From a178c00b1584b1bc630e2f7bdb55bc23cdb72dba Mon Sep 17 00:00:00 2001
From: SphinxKnight <julien.gattelier@gmail.com>
Date: Thu, 29 Sep 2022 11:04:47 +0200
Subject: [PATCH 1/2] move *.html to *.md

---
 .../accessibility_troubleshooting/{index.html => index.md}        | 0
 .../accessibility/css_and_javascript/{index.html => index.md}     | 0
 files/ru/learn/accessibility/html/{index.html => index.md}        | 0
 files/ru/learn/accessibility/{index.html => index.md}             | 0
 files/ru/learn/accessibility/mobile/{index.html => index.md}      | 0
 files/ru/learn/accessibility/multimedia/{index.html => index.md}  | 0
 .../learn/accessibility/wai-aria_basics/{index.html => index.md}  | 0
 .../accessibility/what_is_accessibility/{index.html => index.md}  | 0
 .../available_text_editors/{index.html => index.md}               | 0
 .../design_for_all_types_of_users/{index.html => index.md}        | 0
 .../{index.html => index.md}                                      | 0
 .../how_does_the_internet_work/{index.html => index.md}           | 0
 .../how_much_does_it_cost/{index.html => index.md}                | 0
 files/ru/learn/common_questions/{index.html => index.md}          | 0
 .../{index.html => index.md}                                      | 0
 .../set_up_a_local_testing_server/{index.html => index.md}        | 0
 .../thinking_before_coding/{index.html => index.md}               | 0
 .../upload_files_to_a_web_server/{index.html => index.md}         | 0
 .../common_questions/using_github_pages/{index.html => index.md}  | 0
 .../what_are_browser_developer_tools/{index.html => index.md}     | 0
 .../common_questions/what_are_hyperlinks/{index.html => index.md} | 0
 .../what_is_a_domain_name/{index.html => index.md}                | 0
 .../learn/common_questions/what_is_a_url/{index.html => index.md} | 0
 .../what_is_a_web_server/{index.html => index.md}                 | 0
 .../what_software_do_i_need/{index.html => index.md}              | 0
 .../advanced_styling_effects/{index.html => index.md}             | 0
 .../backgrounds_and_borders/{index.html => index.md}              | 0
 .../cascade_and_inheritance/{index.html => index.md}              | 0
 .../css/building_blocks/cascade_tasks/{index.html => index.md}    | 0
 .../css/building_blocks/debugging_css/{index.html => index.md}    | 0
 .../fundamental_css_comprehension/{index.html => index.md}        | 0
 .../handling_different_text_directions/{index.html => index.md}   | 0
 .../images_media_form_elements/{index.html => index.md}           | 0
 files/ru/learn/css/building_blocks/{index.html => index.md}       | 0
 .../learn/css/building_blocks/organizing/{index.html => index.md} | 0
 .../building_blocks/overflowing_content/{index.html => index.md}  | 0
 .../selectors/attribute_selectors/{index.html => index.md}        | 0
 .../selectors/combinators/{index.html => index.md}                | 0
 .../learn/css/building_blocks/selectors/{index.html => index.md}  | 0
 .../pseudo-classes_and_pseudo-elements/{index.html => index.md}   | 0
 .../selectors/selectors_tasks/{index.html => index.md}            | 0
 .../type_class_and_id_selectors/{index.html => index.md}          | 0
 .../building_blocks/sizing_items_in_css/{index.html => index.md}  | 0
 .../css/building_blocks/styling_tables/{index.html => index.md}   | 0
 .../css/building_blocks/the_box_model/{index.html => index.md}    | 0
 .../css/building_blocks/values_and_units/{index.html => index.md} | 0
 files/ru/learn/css/css_layout/flexbox/{index.html => index.md}    | 0
 files/ru/learn/css/css_layout/floats/{index.html => index.md}     | 0
 .../learn/css/css_layout/floats_skills/{index.html => index.md}   | 0
 .../fundamental_layout_comprehension/{index.html => index.md}     | 0
 files/ru/learn/css/css_layout/grids/{index.html => index.md}      | 0
 files/ru/learn/css/css_layout/{index.html => index.md}            | 0
 .../ru/learn/css/css_layout/introduction/{index.html => index.md} | 0
 .../learn/css/css_layout/multicol_skills/{index.html => index.md} | 0
 .../css_layout/multiple-column_layout/{index.html => index.md}    | 0
 .../ru/learn/css/css_layout/normal_flow/{index.html => index.md}  | 0
 .../learn/css/css_layout/position_skills/{index.html => index.md} | 0
 .../ru/learn/css/css_layout/positioning/{index.html => index.md}  | 0
 .../practical_positioning_examples/{index.html => index.md}       | 0
 .../css/css_layout/responsive_design/{index.html => index.md}     | 0
 .../css/first_steps/getting_started/{index.html => index.md}      | 0
 .../first_steps/how_css_is_structured/{index.html => index.md}    | 0
 .../learn/css/first_steps/how_css_works/{index.html => index.md}  | 0
 files/ru/learn/css/first_steps/{index.html => index.md}           | 0
 .../first_steps/styling_a_biography_page/{index.html => index.md} | 0
 .../ru/learn/css/first_steps/what_is_css/{index.html => index.md} | 0
 files/ru/learn/css/howto/css_faq/{index.html => index.md}         | 0
 files/ru/learn/css/howto/{index.html => index.md}                 | 0
 files/ru/learn/css/{index.html => index.md}                       | 0
 .../learn/css/styling_text/fundamentals/{index.html => index.md}  | 0
 files/ru/learn/css/styling_text/{index.html => index.md}          | 0
 .../learn/css/styling_text/styling_links/{index.html => index.md} | 0
 .../learn/css/styling_text/styling_lists/{index.html => index.md} | 0
 .../styling_text/typesetting_a_homepage/{index.html => index.md}  | 0
 .../ru/learn/css/styling_text/web_fonts/{index.html => index.md}  | 0
 .../forms/basic_native_form_controls/{index.html => index.md}     | 0
 files/ru/learn/forms/form_validation/{index.html => index.md}     | 0
 .../how_to_build_custom_form_controls/{index.html => index.md}    | 0
 .../forms/how_to_structure_a_web_form/{index.html => index.md}    | 0
 files/ru/learn/forms/{index.html => index.md}                     | 0
 .../sending_and_retrieving_form_data/{index.html => index.md}     | 0
 .../sending_forms_through_javascript/{index.html => index.md}     | 0
 files/ru/learn/forms/styling_web_forms/{index.html => index.md}   | 0
 files/ru/learn/front-end_web_developer/{index.html => index.md}   | 0
 .../css_basics/{index.html => index.md}                           | 0
 .../dealing_with_files/{index.html => index.md}                   | 0
 .../how_the_web_works/{index.html => index.md}                    | 0
 .../html_basics/{index.html => index.md}                          | 0
 .../learn/getting_started_with_the_web/{index.html => index.md}   | 0
 .../installing_basic_software/{index.html => index.md}            | 0
 .../javascript_basics/{index.html => index.md}                    | 0
 .../publishing_your_website/{index.html => index.md}              | 0
 .../the_web_and_web_standards/{index.html => index.md}            | 0
 .../what_will_your_website_look_like/{index.html => index.md}     | 0
 .../howto/author_fast-loading_html_pages/{index.html => index.md} | 0
 files/ru/learn/html/howto/{index.html => index.md}                | 0
 .../learn/html/howto/use_data_attributes/{index.html => index.md} | 0
 files/ru/learn/html/{index.html => index.md}                      | 0
 .../advanced_text_formatting/{index.html => index.md}             | 0
 .../creating_hyperlinks/{index.html => index.md}                  | 0
 .../introduction_to_html/debugging_html/{index.html => index.md}  | 0
 .../document_and_website_structure/{index.html => index.md}       | 0
 .../introduction_to_html/getting_started/{index.html => index.md} | 0
 .../html_text_fundamentals/{index.html => index.md}               | 0
 files/ru/learn/html/introduction_to_html/{index.html => index.md} | 0
 .../marking_up_a_letter/{index.html => index.md}                  | 0
 .../structuring_a_page_of_content/{index.html => index.md}        | 0
 .../the_head_metadata_in_html/{index.html => index.md}            | 0
 .../adding_vector_graphics_to_the_web/{index.html => index.md}    | 0
 .../images_in_html/{index.html => index.md}                       | 0
 .../test_your_skills_colon__html_images/{index.html => index.md}  | 0
 .../learn/html/multimedia_and_embedding/{index.html => index.md}  | 0
 .../mozilla_splash_page/{index.html => index.md}                  | 0
 .../other_embedding_technologies/{index.html => index.md}         | 0
 .../responsive_images/{index.html => index.md}                    | 0
 .../video_and_audio_content/{index.html => index.md}              | 0
 files/ru/learn/html/tables/advanced/{index.html => index.md}      | 0
 files/ru/learn/html/tables/basics/{index.html => index.md}        | 0
 files/ru/learn/html/tables/{index.html => index.md}               | 0
 .../html/tables/structuring_planet_data/{index.html => index.md}  | 0
 files/ru/learn/{index.html => index.md}                           | 0
 files/ru/learn/javascript/asynchronous/{index.html => index.md}   | 0
 .../javascript/asynchronous/introducing/{index.html => index.md}  | 0
 .../javascript/asynchronous/promises/{index.html => index.md}     | 0
 .../build_your_own_function/{index.html => index.md}              | 0
 .../building_blocks/conditionals/{index.html => index.md}         | 0
 .../javascript/building_blocks/events/{index.html => index.md}    | 0
 .../javascript/building_blocks/functions/{index.html => index.md} | 0
 .../building_blocks/image_gallery/{index.html => index.md}        | 0
 .../ru/learn/javascript/building_blocks/{index.html => index.md}  | 0
 .../building_blocks/looping_code/{index.html => index.md}         | 0
 .../building_blocks/return_values/{index.html => index.md}        | 0
 .../test_your_skills_colon__functions/{index.html => index.md}    | 0
 .../client-side_storage/{index.html => index.md}                  | 0
 .../client-side_web_apis/fetching_data/{index.html => index.md}   | 0
 .../javascript/client-side_web_apis/{index.html => index.md}      | 0
 .../client-side_web_apis/introduction/{index.html => index.md}    | 0
 .../manipulating_documents/{index.html => index.md}               | 0
 .../third_party_apis/{index.html => index.md}                     | 0
 .../first_steps/a_first_splash/{index.html => index.md}           | 0
 .../learn/javascript/first_steps/arrays/{index.html => index.md}  | 0
 files/ru/learn/javascript/first_steps/{index.html => index.md}    | 0
 .../ru/learn/javascript/first_steps/math/{index.html => index.md} | 0
 .../first_steps/silly_story_generator/{index.html => index.md}    | 0
 .../learn/javascript/first_steps/strings/{index.html => index.md} | 0
 .../first_steps/useful_string_methods/{index.html => index.md}    | 0
 .../javascript/first_steps/variables/{index.html => index.md}     | 0
 .../first_steps/what_is_javascript/{index.html => index.md}       | 0
 .../first_steps/what_went_wrong/{index.html => index.md}          | 0
 files/ru/learn/javascript/howto/{index.html => index.md}          | 0
 files/ru/learn/javascript/{index.html => index.md}                | 0
 .../adding_bouncing_balls_features/{index.html => index.md}       | 0
 files/ru/learn/javascript/objects/basics/{index.html => index.md} | 0
 .../objects/classes_in_javascript/{index.html => index.md}        | 0
 files/ru/learn/javascript/objects/{index.html => index.md}        | 0
 files/ru/learn/javascript/objects/json/{index.html => index.md}   | 0
 .../objects/object_building_practice/{index.html => index.md}     | 0
 .../javascript/objects/object_prototypes/{index.html => index.md} | 0
 .../business_case_for_performance/{index.html => index.md}        | 0
 files/ru/learn/performance/{index.html => index.md}               | 0
 .../apache_configuration_htaccess/{index.html => index.md}        | 0
 .../learn/server-side/django/admin_site/{index.html => index.md}  | 0
 .../server-side/django/authentication/{index.html => index.md}    | 0
 .../learn/server-side/django/deployment/{index.html => index.md}  | 0
 .../django/development_environment/{index.html => index.md}       | 0
 .../django/django_assessment_blog/{index.html => index.md}        | 0
 files/ru/learn/server-side/django/forms/{index.html => index.md}  | 0
 .../server-side/django/generic_views/{index.html => index.md}     | 0
 .../learn/server-side/django/home_page/{index.html => index.md}   | 0
 files/ru/learn/server-side/django/{index.html => index.md}        | 0
 .../server-side/django/introduction/{index.html => index.md}      | 0
 files/ru/learn/server-side/django/models/{index.html => index.md} | 0
 .../ru/learn/server-side/django/sessions/{index.html => index.md} | 0
 .../server-side/django/skeleton_website/{index.html => index.md}  | 0
 .../ru/learn/server-side/django/testing/{index.html => index.md}  | 0
 .../tutorial_local_library_website/{index.html => index.md}       | 0
 .../django/web_application_security/{index.html => index.md}      | 0
 .../development_environment/{index.html => index.md}              | 0
 .../displaying_data/author_list_page/{index.html => index.md}     | 0
 .../displaying_data/book_list_page/{index.html => index.md}       | 0
 .../bookinstance_list_page/{index.html => index.md}               | 0
 .../date_formatting_using_moment/{index.html => index.md}         | 0
 .../flow_control_using_async/{index.html => index.md}             | 0
 .../displaying_data/genre_detail_page/{index.html => index.md}    | 0
 .../displaying_data/home_page/{index.html => index.md}            | 0
 .../express_nodejs/displaying_data/{index.html => index.md}       | 0
 .../locallibrary_base_template/{index.html => index.md}           | 0
 .../displaying_data/template_primer/{index.html => index.md}      | 0
 .../forms/create_bookinstance_form/{index.html => index.md}       | 0
 .../forms/create_genre_form/{index.html => index.md}              | 0
 .../forms/delete_author_form/{index.html => index.md}             | 0
 .../server-side/express_nodejs/forms/{index.html => index.md}     | 0
 .../forms/update_book_form/{index.html => index.md}               | 0
 .../ru/learn/server-side/express_nodejs/{index.html => index.md}  | 0
 .../express_nodejs/introduction/{index.html => index.md}          | 0
 .../server-side/express_nodejs/mongoose/{index.html => index.md}  | 0
 .../server-side/express_nodejs/routes/{index.html => index.md}    | 0
 .../express_nodejs/skeleton_website/{index.html => index.md}      | 0
 .../tutorial_local_library_website/{index.html => index.md}       | 0
 .../first_steps/client-server_overview/{index.html => index.md}   | 0
 files/ru/learn/server-side/first_steps/{index.html => index.md}   | 0
 .../server-side/first_steps/introduction/{index.html => index.md} | 0
 .../first_steps/web_frameworks/{index.html => index.md}           | 0
 .../first_steps/website_security/{index.html => index.md}         | 0
 files/ru/learn/server-side/{index.html => index.md}               | 0
 .../node_server_without_framework/{index.html => index.md}        | 0
 .../angular_getting_started/{index.html => index.md}              | 0
 .../angular_todo_list_beginning/{index.html => index.md}          | 0
 .../client-side_javascript_frameworks/{index.html => index.md}    | 0
 .../react_getting_started/{index.html => index.md}                | 0
 .../feature_detection/{index.html => index.md}                    | 0
 .../cross_browser_testing/html_and_css/{index.html => index.md}   | 0
 .../cross_browser_testing/{index.html => index.md}                | 0
 .../cross_browser_testing/introduction/{index.html => index.md}   | 0
 files/ru/learn/tools_and_testing/github/{index.html => index.md}  | 0
 files/ru/learn/tools_and_testing/{index.html => index.md}         | 0
 216 files changed, 0 insertions(+), 0 deletions(-)
 rename files/ru/learn/accessibility/accessibility_troubleshooting/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/css_and_javascript/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/html/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/mobile/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/multimedia/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/wai-aria_basics/{index.html => index.md} (100%)
 rename files/ru/learn/accessibility/what_is_accessibility/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/available_text_editors/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/design_for_all_types_of_users/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/how_does_the_internet_work/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/how_much_does_it_cost/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/pages_sites_servers_and_search_engines/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/set_up_a_local_testing_server/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/thinking_before_coding/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/upload_files_to_a_web_server/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/using_github_pages/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_are_browser_developer_tools/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_are_hyperlinks/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_is_a_domain_name/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_is_a_url/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_is_a_web_server/{index.html => index.md} (100%)
 rename files/ru/learn/common_questions/what_software_do_i_need/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/advanced_styling_effects/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/backgrounds_and_borders/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/cascade_and_inheritance/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/cascade_tasks/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/debugging_css/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/fundamental_css_comprehension/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/handling_different_text_directions/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/images_media_form_elements/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/organizing/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/overflowing_content/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/attribute_selectors/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/combinators/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/selectors_tasks/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/sizing_items_in_css/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/styling_tables/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/the_box_model/{index.html => index.md} (100%)
 rename files/ru/learn/css/building_blocks/values_and_units/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/flexbox/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/floats/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/floats_skills/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/fundamental_layout_comprehension/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/grids/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/multicol_skills/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/multiple-column_layout/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/normal_flow/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/position_skills/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/positioning/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/practical_positioning_examples/{index.html => index.md} (100%)
 rename files/ru/learn/css/css_layout/responsive_design/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/getting_started/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/how_css_is_structured/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/how_css_works/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/styling_a_biography_page/{index.html => index.md} (100%)
 rename files/ru/learn/css/first_steps/what_is_css/{index.html => index.md} (100%)
 rename files/ru/learn/css/howto/css_faq/{index.html => index.md} (100%)
 rename files/ru/learn/css/howto/{index.html => index.md} (100%)
 rename files/ru/learn/css/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/fundamentals/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/styling_links/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/styling_lists/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/typesetting_a_homepage/{index.html => index.md} (100%)
 rename files/ru/learn/css/styling_text/web_fonts/{index.html => index.md} (100%)
 rename files/ru/learn/forms/basic_native_form_controls/{index.html => index.md} (100%)
 rename files/ru/learn/forms/form_validation/{index.html => index.md} (100%)
 rename files/ru/learn/forms/how_to_build_custom_form_controls/{index.html => index.md} (100%)
 rename files/ru/learn/forms/how_to_structure_a_web_form/{index.html => index.md} (100%)
 rename files/ru/learn/forms/{index.html => index.md} (100%)
 rename files/ru/learn/forms/sending_and_retrieving_form_data/{index.html => index.md} (100%)
 rename files/ru/learn/forms/sending_forms_through_javascript/{index.html => index.md} (100%)
 rename files/ru/learn/forms/styling_web_forms/{index.html => index.md} (100%)
 rename files/ru/learn/front-end_web_developer/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/css_basics/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/dealing_with_files/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/how_the_web_works/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/html_basics/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/installing_basic_software/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/javascript_basics/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/publishing_your_website/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/{index.html => index.md} (100%)
 rename files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/{index.html => index.md} (100%)
 rename files/ru/learn/html/howto/author_fast-loading_html_pages/{index.html => index.md} (100%)
 rename files/ru/learn/html/howto/{index.html => index.md} (100%)
 rename files/ru/learn/html/howto/use_data_attributes/{index.html => index.md} (100%)
 rename files/ru/learn/html/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/advanced_text_formatting/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/creating_hyperlinks/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/debugging_html/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/document_and_website_structure/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/getting_started/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/html_text_fundamentals/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/marking_up_a_letter/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/{index.html => index.md} (100%)
 rename files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/images_in_html/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/responsive_images/{index.html => index.md} (100%)
 rename files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/{index.html => index.md} (100%)
 rename files/ru/learn/html/tables/advanced/{index.html => index.md} (100%)
 rename files/ru/learn/html/tables/basics/{index.html => index.md} (100%)
 rename files/ru/learn/html/tables/{index.html => index.md} (100%)
 rename files/ru/learn/html/tables/structuring_planet_data/{index.html => index.md} (100%)
 rename files/ru/learn/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/asynchronous/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/asynchronous/introducing/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/asynchronous/promises/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/build_your_own_function/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/conditionals/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/events/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/functions/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/image_gallery/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/looping_code/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/return_values/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/client-side_storage/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/fetching_data/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/manipulating_documents/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/client-side_web_apis/third_party_apis/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/a_first_splash/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/arrays/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/math/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/silly_story_generator/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/strings/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/useful_string_methods/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/variables/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/what_is_javascript/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/first_steps/what_went_wrong/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/howto/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/adding_bouncing_balls_features/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/basics/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/classes_in_javascript/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/json/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/object_building_practice/{index.html => index.md} (100%)
 rename files/ru/learn/javascript/objects/object_prototypes/{index.html => index.md} (100%)
 rename files/ru/learn/performance/business_case_for_performance/{index.html => index.md} (100%)
 rename files/ru/learn/performance/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/apache_configuration_htaccess/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/admin_site/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/authentication/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/deployment/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/development_environment/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/django_assessment_blog/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/forms/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/generic_views/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/home_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/models/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/sessions/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/skeleton_website/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/testing/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/tutorial_local_library_website/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/django/web_application_security/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/development_environment/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/home_page/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/forms/create_genre_form/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/forms/delete_author_form/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/forms/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/forms/update_book_form/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/mongoose/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/routes/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/skeleton_website/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/first_steps/client-server_overview/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/first_steps/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/first_steps/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/first_steps/web_frameworks/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/first_steps/website_security/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/{index.html => index.md} (100%)
 rename files/ru/learn/server-side/node_server_without_framework/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/client-side_javascript_frameworks/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/cross_browser_testing/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/cross_browser_testing/introduction/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/github/{index.html => index.md} (100%)
 rename files/ru/learn/tools_and_testing/{index.html => index.md} (100%)

diff --git a/files/ru/learn/accessibility/accessibility_troubleshooting/index.html b/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
similarity index 100%
rename from files/ru/learn/accessibility/accessibility_troubleshooting/index.html
rename to files/ru/learn/accessibility/accessibility_troubleshooting/index.md
diff --git a/files/ru/learn/accessibility/css_and_javascript/index.html b/files/ru/learn/accessibility/css_and_javascript/index.md
similarity index 100%
rename from files/ru/learn/accessibility/css_and_javascript/index.html
rename to files/ru/learn/accessibility/css_and_javascript/index.md
diff --git a/files/ru/learn/accessibility/html/index.html b/files/ru/learn/accessibility/html/index.md
similarity index 100%
rename from files/ru/learn/accessibility/html/index.html
rename to files/ru/learn/accessibility/html/index.md
diff --git a/files/ru/learn/accessibility/index.html b/files/ru/learn/accessibility/index.md
similarity index 100%
rename from files/ru/learn/accessibility/index.html
rename to files/ru/learn/accessibility/index.md
diff --git a/files/ru/learn/accessibility/mobile/index.html b/files/ru/learn/accessibility/mobile/index.md
similarity index 100%
rename from files/ru/learn/accessibility/mobile/index.html
rename to files/ru/learn/accessibility/mobile/index.md
diff --git a/files/ru/learn/accessibility/multimedia/index.html b/files/ru/learn/accessibility/multimedia/index.md
similarity index 100%
rename from files/ru/learn/accessibility/multimedia/index.html
rename to files/ru/learn/accessibility/multimedia/index.md
diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.html b/files/ru/learn/accessibility/wai-aria_basics/index.md
similarity index 100%
rename from files/ru/learn/accessibility/wai-aria_basics/index.html
rename to files/ru/learn/accessibility/wai-aria_basics/index.md
diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.html b/files/ru/learn/accessibility/what_is_accessibility/index.md
similarity index 100%
rename from files/ru/learn/accessibility/what_is_accessibility/index.html
rename to files/ru/learn/accessibility/what_is_accessibility/index.md
diff --git a/files/ru/learn/common_questions/available_text_editors/index.html b/files/ru/learn/common_questions/available_text_editors/index.md
similarity index 100%
rename from files/ru/learn/common_questions/available_text_editors/index.html
rename to files/ru/learn/common_questions/available_text_editors/index.md
diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.html b/files/ru/learn/common_questions/design_for_all_types_of_users/index.md
similarity index 100%
rename from files/ru/learn/common_questions/design_for_all_types_of_users/index.html
rename to files/ru/learn/common_questions/design_for_all_types_of_users/index.md
diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
similarity index 100%
rename from files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.html
rename to files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.html b/files/ru/learn/common_questions/how_does_the_internet_work/index.md
similarity index 100%
rename from files/ru/learn/common_questions/how_does_the_internet_work/index.html
rename to files/ru/learn/common_questions/how_does_the_internet_work/index.md
diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.html b/files/ru/learn/common_questions/how_much_does_it_cost/index.md
similarity index 100%
rename from files/ru/learn/common_questions/how_much_does_it_cost/index.html
rename to files/ru/learn/common_questions/how_much_does_it_cost/index.md
diff --git a/files/ru/learn/common_questions/index.html b/files/ru/learn/common_questions/index.md
similarity index 100%
rename from files/ru/learn/common_questions/index.html
rename to files/ru/learn/common_questions/index.md
diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md
similarity index 100%
rename from files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.html
rename to files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md
diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.html b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.md
similarity index 100%
rename from files/ru/learn/common_questions/set_up_a_local_testing_server/index.html
rename to files/ru/learn/common_questions/set_up_a_local_testing_server/index.md
diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.html b/files/ru/learn/common_questions/thinking_before_coding/index.md
similarity index 100%
rename from files/ru/learn/common_questions/thinking_before_coding/index.html
rename to files/ru/learn/common_questions/thinking_before_coding/index.md
diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.html b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.md
similarity index 100%
rename from files/ru/learn/common_questions/upload_files_to_a_web_server/index.html
rename to files/ru/learn/common_questions/upload_files_to_a_web_server/index.md
diff --git a/files/ru/learn/common_questions/using_github_pages/index.html b/files/ru/learn/common_questions/using_github_pages/index.md
similarity index 100%
rename from files/ru/learn/common_questions/using_github_pages/index.html
rename to files/ru/learn/common_questions/using_github_pages/index.md
diff --git a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.html b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_are_browser_developer_tools/index.html
rename to files/ru/learn/common_questions/what_are_browser_developer_tools/index.md
diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.html b/files/ru/learn/common_questions/what_are_hyperlinks/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_are_hyperlinks/index.html
rename to files/ru/learn/common_questions/what_are_hyperlinks/index.md
diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_is_a_domain_name/index.html
rename to files/ru/learn/common_questions/what_is_a_domain_name/index.md
diff --git a/files/ru/learn/common_questions/what_is_a_url/index.html b/files/ru/learn/common_questions/what_is_a_url/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_is_a_url/index.html
rename to files/ru/learn/common_questions/what_is_a_url/index.md
diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.html b/files/ru/learn/common_questions/what_is_a_web_server/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_is_a_web_server/index.html
rename to files/ru/learn/common_questions/what_is_a_web_server/index.md
diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.html b/files/ru/learn/common_questions/what_software_do_i_need/index.md
similarity index 100%
rename from files/ru/learn/common_questions/what_software_do_i_need/index.html
rename to files/ru/learn/common_questions/what_software_do_i_need/index.md
diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.html b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/advanced_styling_effects/index.html
rename to files/ru/learn/css/building_blocks/advanced_styling_effects/index.md
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/backgrounds_and_borders/index.html
rename to files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/cascade_and_inheritance/index.html
rename to files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/cascade_tasks/index.html
rename to files/ru/learn/css/building_blocks/cascade_tasks/index.md
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.html b/files/ru/learn/css/building_blocks/debugging_css/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/debugging_css/index.html
rename to files/ru/learn/css/building_blocks/debugging_css/index.md
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html
rename to files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/handling_different_text_directions/index.html
rename to files/ru/learn/css/building_blocks/handling_different_text_directions/index.md
diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.html b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/images_media_form_elements/index.html
rename to files/ru/learn/css/building_blocks/images_media_form_elements/index.md
diff --git a/files/ru/learn/css/building_blocks/index.html b/files/ru/learn/css/building_blocks/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/index.html
rename to files/ru/learn/css/building_blocks/index.md
diff --git a/files/ru/learn/css/building_blocks/organizing/index.html b/files/ru/learn/css/building_blocks/organizing/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/organizing/index.html
rename to files/ru/learn/css/building_blocks/organizing/index.md
diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/overflowing_content/index.html
rename to files/ru/learn/css/building_blocks/overflowing_content/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html
rename to files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/combinators/index.html
rename to files/ru/learn/css/building_blocks/selectors/combinators/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/index.html
rename to files/ru/learn/css/building_blocks/selectors/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html
rename to files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html
rename to files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
rename to files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/sizing_items_in_css/index.html
rename to files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.html b/files/ru/learn/css/building_blocks/styling_tables/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/styling_tables/index.html
rename to files/ru/learn/css/building_blocks/styling_tables/index.md
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.html b/files/ru/learn/css/building_blocks/the_box_model/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/the_box_model/index.html
rename to files/ru/learn/css/building_blocks/the_box_model/index.md
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.html b/files/ru/learn/css/building_blocks/values_and_units/index.md
similarity index 100%
rename from files/ru/learn/css/building_blocks/values_and_units/index.html
rename to files/ru/learn/css/building_blocks/values_and_units/index.md
diff --git a/files/ru/learn/css/css_layout/flexbox/index.html b/files/ru/learn/css/css_layout/flexbox/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/flexbox/index.html
rename to files/ru/learn/css/css_layout/flexbox/index.md
diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/floats/index.html
rename to files/ru/learn/css/css_layout/floats/index.md
diff --git a/files/ru/learn/css/css_layout/floats_skills/index.html b/files/ru/learn/css/css_layout/floats_skills/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/floats_skills/index.html
rename to files/ru/learn/css/css_layout/floats_skills/index.md
diff --git a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.html
rename to files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md
diff --git a/files/ru/learn/css/css_layout/grids/index.html b/files/ru/learn/css/css_layout/grids/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/grids/index.html
rename to files/ru/learn/css/css_layout/grids/index.md
diff --git a/files/ru/learn/css/css_layout/index.html b/files/ru/learn/css/css_layout/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/index.html
rename to files/ru/learn/css/css_layout/index.md
diff --git a/files/ru/learn/css/css_layout/introduction/index.html b/files/ru/learn/css/css_layout/introduction/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/introduction/index.html
rename to files/ru/learn/css/css_layout/introduction/index.md
diff --git a/files/ru/learn/css/css_layout/multicol_skills/index.html b/files/ru/learn/css/css_layout/multicol_skills/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/multicol_skills/index.html
rename to files/ru/learn/css/css_layout/multicol_skills/index.md
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/multiple-column_layout/index.html
rename to files/ru/learn/css/css_layout/multiple-column_layout/index.md
diff --git a/files/ru/learn/css/css_layout/normal_flow/index.html b/files/ru/learn/css/css_layout/normal_flow/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/normal_flow/index.html
rename to files/ru/learn/css/css_layout/normal_flow/index.md
diff --git a/files/ru/learn/css/css_layout/position_skills/index.html b/files/ru/learn/css/css_layout/position_skills/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/position_skills/index.html
rename to files/ru/learn/css/css_layout/position_skills/index.md
diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/positioning/index.html
rename to files/ru/learn/css/css_layout/positioning/index.md
diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.html b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/practical_positioning_examples/index.html
rename to files/ru/learn/css/css_layout/practical_positioning_examples/index.md
diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.md
similarity index 100%
rename from files/ru/learn/css/css_layout/responsive_design/index.html
rename to files/ru/learn/css/css_layout/responsive_design/index.md
diff --git a/files/ru/learn/css/first_steps/getting_started/index.html b/files/ru/learn/css/first_steps/getting_started/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/getting_started/index.html
rename to files/ru/learn/css/first_steps/getting_started/index.md
diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.html b/files/ru/learn/css/first_steps/how_css_is_structured/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/how_css_is_structured/index.html
rename to files/ru/learn/css/first_steps/how_css_is_structured/index.md
diff --git a/files/ru/learn/css/first_steps/how_css_works/index.html b/files/ru/learn/css/first_steps/how_css_works/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/how_css_works/index.html
rename to files/ru/learn/css/first_steps/how_css_works/index.md
diff --git a/files/ru/learn/css/first_steps/index.html b/files/ru/learn/css/first_steps/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/index.html
rename to files/ru/learn/css/first_steps/index.md
diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.html b/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/styling_a_biography_page/index.html
rename to files/ru/learn/css/first_steps/styling_a_biography_page/index.md
diff --git a/files/ru/learn/css/first_steps/what_is_css/index.html b/files/ru/learn/css/first_steps/what_is_css/index.md
similarity index 100%
rename from files/ru/learn/css/first_steps/what_is_css/index.html
rename to files/ru/learn/css/first_steps/what_is_css/index.md
diff --git a/files/ru/learn/css/howto/css_faq/index.html b/files/ru/learn/css/howto/css_faq/index.md
similarity index 100%
rename from files/ru/learn/css/howto/css_faq/index.html
rename to files/ru/learn/css/howto/css_faq/index.md
diff --git a/files/ru/learn/css/howto/index.html b/files/ru/learn/css/howto/index.md
similarity index 100%
rename from files/ru/learn/css/howto/index.html
rename to files/ru/learn/css/howto/index.md
diff --git a/files/ru/learn/css/index.html b/files/ru/learn/css/index.md
similarity index 100%
rename from files/ru/learn/css/index.html
rename to files/ru/learn/css/index.md
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.html b/files/ru/learn/css/styling_text/fundamentals/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/fundamentals/index.html
rename to files/ru/learn/css/styling_text/fundamentals/index.md
diff --git a/files/ru/learn/css/styling_text/index.html b/files/ru/learn/css/styling_text/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/index.html
rename to files/ru/learn/css/styling_text/index.md
diff --git a/files/ru/learn/css/styling_text/styling_links/index.html b/files/ru/learn/css/styling_text/styling_links/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/styling_links/index.html
rename to files/ru/learn/css/styling_text/styling_links/index.md
diff --git a/files/ru/learn/css/styling_text/styling_lists/index.html b/files/ru/learn/css/styling_text/styling_lists/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/styling_lists/index.html
rename to files/ru/learn/css/styling_text/styling_lists/index.md
diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/typesetting_a_homepage/index.html
rename to files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
diff --git a/files/ru/learn/css/styling_text/web_fonts/index.html b/files/ru/learn/css/styling_text/web_fonts/index.md
similarity index 100%
rename from files/ru/learn/css/styling_text/web_fonts/index.html
rename to files/ru/learn/css/styling_text/web_fonts/index.md
diff --git a/files/ru/learn/forms/basic_native_form_controls/index.html b/files/ru/learn/forms/basic_native_form_controls/index.md
similarity index 100%
rename from files/ru/learn/forms/basic_native_form_controls/index.html
rename to files/ru/learn/forms/basic_native_form_controls/index.md
diff --git a/files/ru/learn/forms/form_validation/index.html b/files/ru/learn/forms/form_validation/index.md
similarity index 100%
rename from files/ru/learn/forms/form_validation/index.html
rename to files/ru/learn/forms/form_validation/index.md
diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.html b/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
similarity index 100%
rename from files/ru/learn/forms/how_to_build_custom_form_controls/index.html
rename to files/ru/learn/forms/how_to_build_custom_form_controls/index.md
diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.html b/files/ru/learn/forms/how_to_structure_a_web_form/index.md
similarity index 100%
rename from files/ru/learn/forms/how_to_structure_a_web_form/index.html
rename to files/ru/learn/forms/how_to_structure_a_web_form/index.md
diff --git a/files/ru/learn/forms/index.html b/files/ru/learn/forms/index.md
similarity index 100%
rename from files/ru/learn/forms/index.html
rename to files/ru/learn/forms/index.md
diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.html b/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
similarity index 100%
rename from files/ru/learn/forms/sending_and_retrieving_form_data/index.html
rename to files/ru/learn/forms/sending_and_retrieving_form_data/index.md
diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.html b/files/ru/learn/forms/sending_forms_through_javascript/index.md
similarity index 100%
rename from files/ru/learn/forms/sending_forms_through_javascript/index.html
rename to files/ru/learn/forms/sending_forms_through_javascript/index.md
diff --git a/files/ru/learn/forms/styling_web_forms/index.html b/files/ru/learn/forms/styling_web_forms/index.md
similarity index 100%
rename from files/ru/learn/forms/styling_web_forms/index.html
rename to files/ru/learn/forms/styling_web_forms/index.md
diff --git a/files/ru/learn/front-end_web_developer/index.html b/files/ru/learn/front-end_web_developer/index.md
similarity index 100%
rename from files/ru/learn/front-end_web_developer/index.html
rename to files/ru/learn/front-end_web_developer/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.html b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/css_basics/index.html
rename to files/ru/learn/getting_started_with_the_web/css_basics/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/dealing_with_files/index.html
rename to files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/how_the_web_works/index.html
rename to files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.html b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/html_basics/index.html
rename to files/ru/learn/getting_started_with_the_web/html_basics/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/index.html b/files/ru/learn/getting_started_with_the_web/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/index.html
rename to files/ru/learn/getting_started_with_the_web/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/installing_basic_software/index.html
rename to files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.html b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/javascript_basics/index.html
rename to files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/publishing_your_website/index.html
rename to files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.html
rename to files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
similarity index 100%
rename from files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.html
rename to files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
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.md
similarity index 100%
rename from files/ru/learn/html/howto/author_fast-loading_html_pages/index.html
rename to files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
diff --git a/files/ru/learn/html/howto/index.html b/files/ru/learn/html/howto/index.md
similarity index 100%
rename from files/ru/learn/html/howto/index.html
rename to files/ru/learn/html/howto/index.md
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.html b/files/ru/learn/html/howto/use_data_attributes/index.md
similarity index 100%
rename from files/ru/learn/html/howto/use_data_attributes/index.html
rename to files/ru/learn/html/howto/use_data_attributes/index.md
diff --git a/files/ru/learn/html/index.html b/files/ru/learn/html/index.md
similarity index 100%
rename from files/ru/learn/html/index.html
rename to files/ru/learn/html/index.md
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.html
rename to files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.html
rename to files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.html b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/debugging_html/index.html
rename to files/ru/learn/html/introduction_to_html/debugging_html/index.md
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/document_and_website_structure/index.html
rename to files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.html b/files/ru/learn/html/introduction_to_html/getting_started/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/getting_started/index.html
rename to files/ru/learn/html/introduction_to_html/getting_started/index.md
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.html
rename to files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
diff --git a/files/ru/learn/html/introduction_to_html/index.html b/files/ru/learn/html/introduction_to_html/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/index.html
rename to files/ru/learn/html/introduction_to_html/index.md
diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.html
rename to files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.html
rename to files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
similarity index 100%
rename from files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.html
rename to files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html
rename to files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/images_in_html/index.html
rename to files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.html
rename to files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/index.html b/files/ru/learn/html/multimedia_and_embedding/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/index.html
rename to files/ru/learn/html/multimedia_and_embedding/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.html
rename to files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html
rename to files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html
rename to files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
similarity index 100%
rename from files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.html
rename to files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
diff --git a/files/ru/learn/html/tables/advanced/index.html b/files/ru/learn/html/tables/advanced/index.md
similarity index 100%
rename from files/ru/learn/html/tables/advanced/index.html
rename to files/ru/learn/html/tables/advanced/index.md
diff --git a/files/ru/learn/html/tables/basics/index.html b/files/ru/learn/html/tables/basics/index.md
similarity index 100%
rename from files/ru/learn/html/tables/basics/index.html
rename to files/ru/learn/html/tables/basics/index.md
diff --git a/files/ru/learn/html/tables/index.html b/files/ru/learn/html/tables/index.md
similarity index 100%
rename from files/ru/learn/html/tables/index.html
rename to files/ru/learn/html/tables/index.md
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.html b/files/ru/learn/html/tables/structuring_planet_data/index.md
similarity index 100%
rename from files/ru/learn/html/tables/structuring_planet_data/index.html
rename to files/ru/learn/html/tables/structuring_planet_data/index.md
diff --git a/files/ru/learn/index.html b/files/ru/learn/index.md
similarity index 100%
rename from files/ru/learn/index.html
rename to files/ru/learn/index.md
diff --git a/files/ru/learn/javascript/asynchronous/index.html b/files/ru/learn/javascript/asynchronous/index.md
similarity index 100%
rename from files/ru/learn/javascript/asynchronous/index.html
rename to files/ru/learn/javascript/asynchronous/index.md
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.md
similarity index 100%
rename from files/ru/learn/javascript/asynchronous/introducing/index.html
rename to files/ru/learn/javascript/asynchronous/introducing/index.md
diff --git a/files/ru/learn/javascript/asynchronous/promises/index.html b/files/ru/learn/javascript/asynchronous/promises/index.md
similarity index 100%
rename from files/ru/learn/javascript/asynchronous/promises/index.html
rename to files/ru/learn/javascript/asynchronous/promises/index.md
diff --git a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.html b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/build_your_own_function/index.html
rename to files/ru/learn/javascript/building_blocks/build_your_own_function/index.md
diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.html b/files/ru/learn/javascript/building_blocks/conditionals/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/conditionals/index.html
rename to files/ru/learn/javascript/building_blocks/conditionals/index.md
diff --git a/files/ru/learn/javascript/building_blocks/events/index.html b/files/ru/learn/javascript/building_blocks/events/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/events/index.html
rename to files/ru/learn/javascript/building_blocks/events/index.md
diff --git a/files/ru/learn/javascript/building_blocks/functions/index.html b/files/ru/learn/javascript/building_blocks/functions/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/functions/index.html
rename to files/ru/learn/javascript/building_blocks/functions/index.md
diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.html b/files/ru/learn/javascript/building_blocks/image_gallery/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/image_gallery/index.html
rename to files/ru/learn/javascript/building_blocks/image_gallery/index.md
diff --git a/files/ru/learn/javascript/building_blocks/index.html b/files/ru/learn/javascript/building_blocks/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/index.html
rename to files/ru/learn/javascript/building_blocks/index.md
diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.html b/files/ru/learn/javascript/building_blocks/looping_code/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/looping_code/index.html
rename to files/ru/learn/javascript/building_blocks/looping_code/index.md
diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.html b/files/ru/learn/javascript/building_blocks/return_values/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/return_values/index.html
rename to files/ru/learn/javascript/building_blocks/return_values/index.md
diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
similarity index 100%
rename from files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.html
rename to files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.html
rename to files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/fetching_data/index.html
rename to files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/index.html
rename to files/ru/learn/javascript/client-side_web_apis/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.html b/files/ru/learn/javascript/client-side_web_apis/introduction/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/introduction/index.html
rename to files/ru/learn/javascript/client-side_web_apis/introduction/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.html
rename to files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md
diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md
similarity index 100%
rename from files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.html
rename to files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md
diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.html b/files/ru/learn/javascript/first_steps/a_first_splash/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/a_first_splash/index.html
rename to files/ru/learn/javascript/first_steps/a_first_splash/index.md
diff --git a/files/ru/learn/javascript/first_steps/arrays/index.html b/files/ru/learn/javascript/first_steps/arrays/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/arrays/index.html
rename to files/ru/learn/javascript/first_steps/arrays/index.md
diff --git a/files/ru/learn/javascript/first_steps/index.html b/files/ru/learn/javascript/first_steps/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/index.html
rename to files/ru/learn/javascript/first_steps/index.md
diff --git a/files/ru/learn/javascript/first_steps/math/index.html b/files/ru/learn/javascript/first_steps/math/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/math/index.html
rename to files/ru/learn/javascript/first_steps/math/index.md
diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.html b/files/ru/learn/javascript/first_steps/silly_story_generator/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/silly_story_generator/index.html
rename to files/ru/learn/javascript/first_steps/silly_story_generator/index.md
diff --git a/files/ru/learn/javascript/first_steps/strings/index.html b/files/ru/learn/javascript/first_steps/strings/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/strings/index.html
rename to files/ru/learn/javascript/first_steps/strings/index.md
diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.html b/files/ru/learn/javascript/first_steps/useful_string_methods/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/useful_string_methods/index.html
rename to files/ru/learn/javascript/first_steps/useful_string_methods/index.md
diff --git a/files/ru/learn/javascript/first_steps/variables/index.html b/files/ru/learn/javascript/first_steps/variables/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/variables/index.html
rename to files/ru/learn/javascript/first_steps/variables/index.md
diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.html b/files/ru/learn/javascript/first_steps/what_is_javascript/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/what_is_javascript/index.html
rename to files/ru/learn/javascript/first_steps/what_is_javascript/index.md
diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.html b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
similarity index 100%
rename from files/ru/learn/javascript/first_steps/what_went_wrong/index.html
rename to files/ru/learn/javascript/first_steps/what_went_wrong/index.md
diff --git a/files/ru/learn/javascript/howto/index.html b/files/ru/learn/javascript/howto/index.md
similarity index 100%
rename from files/ru/learn/javascript/howto/index.html
rename to files/ru/learn/javascript/howto/index.md
diff --git a/files/ru/learn/javascript/index.html b/files/ru/learn/javascript/index.md
similarity index 100%
rename from files/ru/learn/javascript/index.html
rename to files/ru/learn/javascript/index.md
diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.html
rename to files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md
diff --git a/files/ru/learn/javascript/objects/basics/index.html b/files/ru/learn/javascript/objects/basics/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/basics/index.html
rename to files/ru/learn/javascript/objects/basics/index.md
diff --git a/files/ru/learn/javascript/objects/classes_in_javascript/index.html b/files/ru/learn/javascript/objects/classes_in_javascript/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/classes_in_javascript/index.html
rename to files/ru/learn/javascript/objects/classes_in_javascript/index.md
diff --git a/files/ru/learn/javascript/objects/index.html b/files/ru/learn/javascript/objects/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/index.html
rename to files/ru/learn/javascript/objects/index.md
diff --git a/files/ru/learn/javascript/objects/json/index.html b/files/ru/learn/javascript/objects/json/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/json/index.html
rename to files/ru/learn/javascript/objects/json/index.md
diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.html b/files/ru/learn/javascript/objects/object_building_practice/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/object_building_practice/index.html
rename to files/ru/learn/javascript/objects/object_building_practice/index.md
diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.html b/files/ru/learn/javascript/objects/object_prototypes/index.md
similarity index 100%
rename from files/ru/learn/javascript/objects/object_prototypes/index.html
rename to files/ru/learn/javascript/objects/object_prototypes/index.md
diff --git a/files/ru/learn/performance/business_case_for_performance/index.html b/files/ru/learn/performance/business_case_for_performance/index.md
similarity index 100%
rename from files/ru/learn/performance/business_case_for_performance/index.html
rename to files/ru/learn/performance/business_case_for_performance/index.md
diff --git a/files/ru/learn/performance/index.html b/files/ru/learn/performance/index.md
similarity index 100%
rename from files/ru/learn/performance/index.html
rename to files/ru/learn/performance/index.md
diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.html b/files/ru/learn/server-side/apache_configuration_htaccess/index.md
similarity index 100%
rename from files/ru/learn/server-side/apache_configuration_htaccess/index.html
rename to files/ru/learn/server-side/apache_configuration_htaccess/index.md
diff --git a/files/ru/learn/server-side/django/admin_site/index.html b/files/ru/learn/server-side/django/admin_site/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/admin_site/index.html
rename to files/ru/learn/server-side/django/admin_site/index.md
diff --git a/files/ru/learn/server-side/django/authentication/index.html b/files/ru/learn/server-side/django/authentication/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/authentication/index.html
rename to files/ru/learn/server-side/django/authentication/index.md
diff --git a/files/ru/learn/server-side/django/deployment/index.html b/files/ru/learn/server-side/django/deployment/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/deployment/index.html
rename to files/ru/learn/server-side/django/deployment/index.md
diff --git a/files/ru/learn/server-side/django/development_environment/index.html b/files/ru/learn/server-side/django/development_environment/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/development_environment/index.html
rename to files/ru/learn/server-side/django/development_environment/index.md
diff --git a/files/ru/learn/server-side/django/django_assessment_blog/index.html b/files/ru/learn/server-side/django/django_assessment_blog/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/django_assessment_blog/index.html
rename to files/ru/learn/server-side/django/django_assessment_blog/index.md
diff --git a/files/ru/learn/server-side/django/forms/index.html b/files/ru/learn/server-side/django/forms/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/forms/index.html
rename to files/ru/learn/server-side/django/forms/index.md
diff --git a/files/ru/learn/server-side/django/generic_views/index.html b/files/ru/learn/server-side/django/generic_views/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/generic_views/index.html
rename to files/ru/learn/server-side/django/generic_views/index.md
diff --git a/files/ru/learn/server-side/django/home_page/index.html b/files/ru/learn/server-side/django/home_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/home_page/index.html
rename to files/ru/learn/server-side/django/home_page/index.md
diff --git a/files/ru/learn/server-side/django/index.html b/files/ru/learn/server-side/django/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/index.html
rename to files/ru/learn/server-side/django/index.md
diff --git a/files/ru/learn/server-side/django/introduction/index.html b/files/ru/learn/server-side/django/introduction/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/introduction/index.html
rename to files/ru/learn/server-side/django/introduction/index.md
diff --git a/files/ru/learn/server-side/django/models/index.html b/files/ru/learn/server-side/django/models/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/models/index.html
rename to files/ru/learn/server-side/django/models/index.md
diff --git a/files/ru/learn/server-side/django/sessions/index.html b/files/ru/learn/server-side/django/sessions/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/sessions/index.html
rename to files/ru/learn/server-side/django/sessions/index.md
diff --git a/files/ru/learn/server-side/django/skeleton_website/index.html b/files/ru/learn/server-side/django/skeleton_website/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/skeleton_website/index.html
rename to files/ru/learn/server-side/django/skeleton_website/index.md
diff --git a/files/ru/learn/server-side/django/testing/index.html b/files/ru/learn/server-side/django/testing/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/testing/index.html
rename to files/ru/learn/server-side/django/testing/index.md
diff --git a/files/ru/learn/server-side/django/tutorial_local_library_website/index.html b/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/tutorial_local_library_website/index.html
rename to files/ru/learn/server-side/django/tutorial_local_library_website/index.md
diff --git a/files/ru/learn/server-side/django/web_application_security/index.html b/files/ru/learn/server-side/django/web_application_security/index.md
similarity index 100%
rename from files/ru/learn/server-side/django/web_application_security/index.html
rename to files/ru/learn/server-side/django/web_application_security/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.html b/files/ru/learn/server-side/express_nodejs/development_environment/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/development_environment/index.html
rename to files/ru/learn/server-side/express_nodejs/development_environment/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.html
rename to files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.html
rename to files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.html
rename to files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.html
rename to files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.html b/files/ru/learn/server-side/express_nodejs/forms/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/forms/index.html
rename to files/ru/learn/server-side/express_nodejs/forms/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.html
rename to files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/index.html b/files/ru/learn/server-side/express_nodejs/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/index.html
rename to files/ru/learn/server-side/express_nodejs/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.html b/files/ru/learn/server-side/express_nodejs/introduction/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/introduction/index.html
rename to files/ru/learn/server-side/express_nodejs/introduction/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.html b/files/ru/learn/server-side/express_nodejs/mongoose/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/mongoose/index.html
rename to files/ru/learn/server-side/express_nodejs/mongoose/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.html b/files/ru/learn/server-side/express_nodejs/routes/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/routes/index.html
rename to files/ru/learn/server-side/express_nodejs/routes/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.html b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/skeleton_website/index.html
rename to files/ru/learn/server-side/express_nodejs/skeleton_website/index.md
diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
similarity index 100%
rename from files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.html
rename to files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.html b/files/ru/learn/server-side/first_steps/client-server_overview/index.md
similarity index 100%
rename from files/ru/learn/server-side/first_steps/client-server_overview/index.html
rename to files/ru/learn/server-side/first_steps/client-server_overview/index.md
diff --git a/files/ru/learn/server-side/first_steps/index.html b/files/ru/learn/server-side/first_steps/index.md
similarity index 100%
rename from files/ru/learn/server-side/first_steps/index.html
rename to files/ru/learn/server-side/first_steps/index.md
diff --git a/files/ru/learn/server-side/first_steps/introduction/index.html b/files/ru/learn/server-side/first_steps/introduction/index.md
similarity index 100%
rename from files/ru/learn/server-side/first_steps/introduction/index.html
rename to files/ru/learn/server-side/first_steps/introduction/index.md
diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.html b/files/ru/learn/server-side/first_steps/web_frameworks/index.md
similarity index 100%
rename from files/ru/learn/server-side/first_steps/web_frameworks/index.html
rename to files/ru/learn/server-side/first_steps/web_frameworks/index.md
diff --git a/files/ru/learn/server-side/first_steps/website_security/index.html b/files/ru/learn/server-side/first_steps/website_security/index.md
similarity index 100%
rename from files/ru/learn/server-side/first_steps/website_security/index.html
rename to files/ru/learn/server-side/first_steps/website_security/index.md
diff --git a/files/ru/learn/server-side/index.html b/files/ru/learn/server-side/index.md
similarity index 100%
rename from files/ru/learn/server-side/index.html
rename to files/ru/learn/server-side/index.md
diff --git a/files/ru/learn/server-side/node_server_without_framework/index.html b/files/ru/learn/server-side/node_server_without_framework/index.md
similarity index 100%
rename from files/ru/learn/server-side/node_server_without_framework/index.html
rename to files/ru/learn/server-side/node_server_without_framework/index.md
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.html
rename to files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.html
rename to files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.html
rename to files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.html
rename to files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.html
rename to files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.html
rename to files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/cross_browser_testing/index.html
rename to files/ru/learn/tools_and_testing/cross_browser_testing/index.md
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.html
rename to files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md
diff --git a/files/ru/learn/tools_and_testing/github/index.html b/files/ru/learn/tools_and_testing/github/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/github/index.html
rename to files/ru/learn/tools_and_testing/github/index.md
diff --git a/files/ru/learn/tools_and_testing/index.html b/files/ru/learn/tools_and_testing/index.md
similarity index 100%
rename from files/ru/learn/tools_and_testing/index.html
rename to files/ru/learn/tools_and_testing/index.md

From 221185207719323a300f10df25c3b0679a3d7c03 Mon Sep 17 00:00:00 2001
From: SphinxKnight <julien.gattelier@gmail.com>
Date: Thu, 29 Sep 2022 11:05:20 +0200
Subject: [PATCH 2/2] convert content to md

---
 .../accessibility_troubleshooting/index.md    | 109 +-
 .../accessibility/css_and_javascript/index.md | 367 ++++---
 files/ru/learn/accessibility/html/index.md    | 774 +++++++-------
 files/ru/learn/accessibility/index.md         |  80 +-
 files/ru/learn/accessibility/mobile/index.md  | 354 +++----
 .../learn/accessibility/multimedia/index.md   | 388 ++++----
 .../accessibility/wai-aria_basics/index.md    | 523 +++++-----
 .../what_is_accessibility/index.md            | 223 ++---
 .../available_text_editors/index.md           | 428 +++-----
 .../design_for_all_types_of_users/index.md    | 264 +++--
 .../index.md                                  | 107 +-
 .../how_does_the_internet_work/index.md       |  97 +-
 .../how_much_does_it_cost/index.md            | 165 ++-
 files/ru/learn/common_questions/index.md      | 164 +--
 .../index.md                                  | 119 +--
 .../set_up_a_local_testing_server/index.md    | 161 ++-
 .../thinking_before_coding/index.md           | 261 ++---
 .../upload_files_to_a_web_server/index.md     | 195 ++--
 .../using_github_pages/index.md               | 132 +--
 .../what_are_browser_developer_tools/index.md | 205 ++--
 .../what_are_hyperlinks/index.md              | 107 +-
 .../what_is_a_domain_name/index.md            | 141 ++-
 .../common_questions/what_is_a_url/index.md   | 206 ++--
 .../what_is_a_web_server/index.md             | 130 +--
 .../what_software_do_i_need/index.md          | 192 ++--
 .../advanced_styling_effects/index.md         | 265 +++--
 .../backgrounds_and_borders/index.md          | 359 ++++---
 .../cascade_and_inheritance/index.md          | 435 ++++----
 .../building_blocks/cascade_tasks/index.md    |  50 +-
 .../building_blocks/debugging_css/index.md    | 222 ++---
 .../fundamental_css_comprehension/index.md    | 200 ++--
 .../index.md                                  | 164 ++-
 .../images_media_form_elements/index.md       | 218 ++--
 files/ru/learn/css/building_blocks/index.md   | 123 ++-
 .../css/building_blocks/organizing/index.md   | 343 ++++---
 .../overflowing_content/index.md              | 140 ++-
 .../selectors/attribute_selectors/index.md    | 232 ++---
 .../selectors/combinators/index.md            | 134 ++-
 .../css/building_blocks/selectors/index.md    | 313 +++---
 .../index.md                                  | 530 +++-------
 .../selectors/selectors_tasks/index.md        | 146 ++-
 .../type_class_and_id_selectors/index.md      | 142 ++-
 .../sizing_items_in_css/index.md              | 148 ++-
 .../building_blocks/styling_tables/index.md   | 299 +++---
 .../building_blocks/the_box_model/index.md    | 393 ++++----
 .../building_blocks/values_and_units/index.md | 463 ++++-----
 .../ru/learn/css/css_layout/flexbox/index.md  | 334 ++++---
 files/ru/learn/css/css_layout/floats/index.md | 408 ++++----
 .../css/css_layout/floats_skills/index.md     |  78 +-
 .../fundamental_layout_comprehension/index.md |  69 +-
 files/ru/learn/css/css_layout/grids/index.md  | 704 ++++++-------
 files/ru/learn/css/css_layout/index.md        |  84 +-
 .../css/css_layout/introduction/index.md      | 683 ++++++-------
 .../css/css_layout/multicol_skills/index.md   |  80 +-
 .../multiple-column_layout/index.md           | 468 ++++-----
 .../learn/css/css_layout/normal_flow/index.md |  91 +-
 .../css/css_layout/position_skills/index.md   |  66 +-
 .../learn/css/css_layout/positioning/index.md | 578 ++++++-----
 .../practical_positioning_examples/index.md   | 405 ++++----
 .../css/css_layout/responsive_design/index.md | 339 +++----
 .../css/first_steps/getting_started/index.md  | 296 +++---
 .../how_css_is_structured/index.md            | 499 +++++-----
 .../css/first_steps/how_css_works/index.md    | 173 ++--
 files/ru/learn/css/first_steps/index.md       |  54 +-
 .../styling_a_biography_page/index.md         | 111 +--
 .../css/first_steps/what_is_css/index.md      | 121 +--
 files/ru/learn/css/howto/css_faq/index.md     | 196 ++--
 files/ru/learn/css/howto/index.md             | 142 ++-
 files/ru/learn/css/index.md                   |  65 +-
 .../css/styling_text/fundamentals/index.md    | 760 +++++++-------
 files/ru/learn/css/styling_text/index.md      |  46 +-
 .../css/styling_text/styling_links/index.md   | 313 +++---
 .../css/styling_text/styling_lists/index.md   | 429 ++++----
 .../typesetting_a_homepage/index.md           | 147 ++-
 .../learn/css/styling_text/web_fonts/index.md | 225 ++---
 .../forms/basic_native_form_controls/index.md | 866 ++++++++--------
 files/ru/learn/forms/form_validation/index.md | 756 +++++++-------
 .../index.md                                  | 695 +++++++------
 .../how_to_structure_a_web_form/index.md      | 532 +++++-----
 files/ru/learn/forms/index.md                 |  86 +-
 .../sending_and_retrieving_form_data/index.md | 413 ++++----
 .../sending_forms_through_javascript/index.md | 219 ++--
 .../ru/learn/forms/styling_web_forms/index.md | 339 ++++---
 .../ru/learn/front-end_web_developer/index.md | 212 ++--
 .../css_basics/index.md                       | 367 +++----
 .../dealing_with_files/index.md               | 139 ++-
 .../how_the_web_works/index.md                | 114 +--
 .../html_basics/index.md                      | 294 +++---
 .../getting_started_with_the_web/index.md     |  52 +-
 .../installing_basic_software/index.md        |  82 +-
 .../javascript_basics/index.md                | 555 +++++------
 .../publishing_your_website/index.md          | 224 ++---
 .../the_web_and_web_standards/index.md        | 186 ++--
 .../what_will_your_website_look_like/index.md | 124 +--
 .../author_fast-loading_html_pages/index.md   | 230 ++---
 files/ru/learn/html/howto/index.md            | 169 ++--
 .../html/howto/use_data_attributes/index.md   |  66 +-
 files/ru/learn/html/index.md                  |  55 +-
 .../advanced_text_formatting/index.md         | 531 +++++-----
 .../creating_hyperlinks/index.md              | 422 ++++----
 .../debugging_html/index.md                   | 267 +++--
 .../document_and_website_structure/index.md   | 378 ++++---
 .../getting_started/index.md                  | 594 ++++++-----
 .../html_text_fundamentals/index.md           | 623 ++++++------
 .../learn/html/introduction_to_html/index.md  |  68 +-
 .../marking_up_a_letter/index.md              | 119 +--
 .../structuring_a_page_of_content/index.md    | 117 +--
 .../the_head_metadata_in_html/index.md        | 375 ++++---
 .../index.md                                  | 319 +++---
 .../images_in_html/index.md                   | 355 +++----
 .../index.md                                  |  76 +-
 .../html/multimedia_and_embedding/index.md    |  92 +-
 .../mozilla_splash_page/index.md              | 111 +--
 .../other_embedding_technologies/index.md     | 348 +++----
 .../responsive_images/index.md                | 287 +++---
 .../video_and_audio_content/index.md          | 371 +++----
 files/ru/learn/html/tables/advanced/index.md  | 589 ++++++-----
 files/ru/learn/html/tables/basics/index.md    | 672 +++++--------
 files/ru/learn/html/tables/index.md           |  34 +-
 .../tables/structuring_planet_data/index.md   | 104 +-
 files/ru/learn/index.md                       | 153 ++-
 .../ru/learn/javascript/asynchronous/index.md |  50 +-
 .../asynchronous/introducing/index.md         | 273 +++--
 .../javascript/asynchronous/promises/index.md | 343 ++++---
 .../build_your_own_function/index.md          | 372 +++----
 .../building_blocks/conditionals/index.md     | 583 ++++++-----
 .../building_blocks/events/index.md           | 609 ++++++------
 .../building_blocks/functions/index.md        | 457 +++++----
 .../building_blocks/image_gallery/index.md    | 160 ++-
 .../learn/javascript/building_blocks/index.md |  50 +-
 .../building_blocks/looping_code/index.md     | 750 +++++++-------
 .../building_blocks/return_values/index.md    | 218 ++--
 .../index.md                                  | 108 +-
 .../client-side_storage/index.md              | 941 +++++++++---------
 .../fetching_data/index.md                    | 441 ++++----
 .../javascript/client-side_web_apis/index.md  |  46 +-
 .../introduction/index.md                     | 299 +++---
 .../manipulating_documents/index.md           | 578 +++++------
 .../third_party_apis/index.md                 | 541 +++++-----
 .../first_steps/a_first_splash/index.md       | 682 ++++++-------
 .../javascript/first_steps/arrays/index.md    | 518 +++++-----
 .../ru/learn/javascript/first_steps/index.md  |  86 +-
 .../javascript/first_steps/math/index.md      | 624 +++++-------
 .../silly_story_generator/index.md            | 229 ++---
 .../javascript/first_steps/strings/index.md   | 354 ++++---
 .../useful_string_methods/index.md            | 434 ++++----
 .../javascript/first_steps/variables/index.md | 326 +++---
 .../first_steps/what_is_javascript/index.md   | 378 ++++---
 .../first_steps/what_went_wrong/index.md      | 362 ++++---
 files/ru/learn/javascript/howto/index.md      | 453 ++++-----
 files/ru/learn/javascript/index.md            |  72 +-
 .../adding_bouncing_balls_features/index.md   | 225 ++---
 .../learn/javascript/objects/basics/index.md  | 294 +++---
 .../objects/classes_in_javascript/index.md    | 258 +++--
 files/ru/learn/javascript/objects/index.md    |  50 +-
 .../ru/learn/javascript/objects/json/index.md | 327 +++---
 .../objects/object_building_practice/index.md | 420 ++++----
 .../objects/object_prototypes/index.md        | 323 +++---
 .../business_case_for_performance/index.md    |  88 +-
 files/ru/learn/performance/index.md           | 131 ++-
 .../apache_configuration_htaccess/index.md    |  39 +-
 .../server-side/django/admin_site/index.md    | 342 +++----
 .../django/authentication/index.md            | 764 +++++++-------
 .../server-side/django/deployment/index.md    | 872 ++++++++--------
 .../django/development_environment/index.md   | 460 ++++-----
 .../django/django_assessment_blog/index.md    | 541 +++++-----
 .../learn/server-side/django/forms/index.md   | 634 ++++++------
 .../server-side/django/generic_views/index.md | 758 +++++++-------
 .../server-side/django/home_page/index.md     | 402 ++++----
 files/ru/learn/server-side/django/index.md    | 104 +-
 .../server-side/django/introduction/index.md  | 270 +++--
 .../learn/server-side/django/models/index.md  | 390 ++++----
 .../server-side/django/sessions/index.md      | 163 ++-
 .../django/skeleton_website/index.md          | 360 ++++---
 .../learn/server-side/django/testing/index.md | 513 +++++-----
 .../tutorial_local_library_website/index.md   |  77 +-
 .../django/web_application_security/index.md  | 224 ++---
 .../development_environment/index.md          | 550 +++++-----
 .../displaying_data/author_list_page/index.md |  73 +-
 .../displaying_data/book_list_page/index.md   |  50 +-
 .../bookinstance_list_page/index.md           |  48 +-
 .../date_formatting_using_moment/index.md     |  66 +-
 .../flow_control_using_async/index.md         | 109 +-
 .../genre_detail_page/index.md                | 129 +--
 .../displaying_data/home_page/index.md        | 118 +--
 .../express_nodejs/displaying_data/index.md   | 103 +-
 .../locallibrary_base_template/index.md       |  32 +-
 .../displaying_data/template_primer/index.md  | 137 +--
 .../forms/create_bookinstance_form/index.md   |  76 +-
 .../forms/create_genre_form/index.md          | 131 +--
 .../forms/delete_author_form/index.md         | 122 ++-
 .../server-side/express_nodejs/forms/index.md | 335 +++----
 .../forms/update_book_form/index.md           |  86 +-
 .../learn/server-side/express_nodejs/index.md |  90 +-
 .../express_nodejs/introduction/index.md      | 522 +++++-----
 .../express_nodejs/mongoose/index.md          | 841 ++++++++--------
 .../express_nodejs/routes/index.md            | 425 ++++----
 .../express_nodejs/skeleton_website/index.md  | 502 +++++-----
 .../tutorial_local_library_website/index.md   |  69 +-
 .../client-server_overview/index.md           | 284 +++---
 .../ru/learn/server-side/first_steps/index.md |  44 +-
 .../first_steps/introduction/index.md         | 229 ++---
 .../first_steps/web_frameworks/index.md       | 311 +++---
 .../first_steps/website_security/index.md     | 186 ++--
 files/ru/learn/server-side/index.md           |  48 +-
 .../node_server_without_framework/index.md    |  32 +-
 .../angular_getting_started/index.md          | 433 ++++----
 .../angular_todo_list_beginning/index.md      | 330 +++---
 .../index.md                                  | 239 ++---
 .../react_getting_started/index.md            | 553 +++++-----
 .../feature_detection/index.md                | 404 ++++----
 .../html_and_css/index.md                     | 551 +++++-----
 .../cross_browser_testing/index.md            |  46 +-
 .../introduction/index.md                     | 225 ++---
 .../learn/tools_and_testing/github/index.md   |  96 +-
 files/ru/learn/tools_and_testing/index.md     |  30 +-
 216 files changed, 29036 insertions(+), 32940 deletions(-)

diff --git a/files/ru/learn/accessibility/accessibility_troubleshooting/index.md b/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
index 53049d677b9af5..789fe29a89dc42 100644
--- a/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
+++ b/files/ru/learn/accessibility/accessibility_troubleshooting/index.md
@@ -4,99 +4,78 @@ slug: Learn/Accessibility/Accessibility_troubleshooting
 translation_of: Learn/Accessibility/Accessibility_troubleshooting
 original_slug: Learn/Доступность/Accessibility_troubleshooting
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
-<div>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.
 
-<p class="summary">In the assessment for this module, we present to you a simple site with a number of accessibility issues that you need to diagnose and fix.</p>
+| Prerequisites: | Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the [previous articles in the course](/ru/docs/Learn/Accessibility). |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Objective:     | To test basic knowledge of accessibility fundamentals.                                                                                                                |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of the <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To test basic knowledge of accessibility fundamentals.</td>
-  </tr>
- </tbody>
-</table>
+## Starting point
 
-<h2 id="Starting_point">Starting point</h2>
+To get this assessment started, you should go and grab the [ZIP containing the files that comprise the example](https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true). Decompress the contents into a new directory somewhere on your local computer.
 
-<p>To get this assessment started, you should go and grab the <a href="https://github.com/mdn/learning-area/blob/master/accessibility/assessment-start/assessment-files.zip?raw=true">ZIP containing the files that comprise the example</a>. Decompress the contents into a new directory somewhere on your local computer.</p>
+The finished assessment site should look like so:
 
-<p>The finished assessment site should look like so:</p>
+![](https://mdn.mozillademos.org/files/14555/assessment-site-finished.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14555/assessment-site-finished.png" style="border-style: solid; border-width: 1px; display: block; height: 457px; margin: 0px auto; width: 800px;"></p>
+You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!
 
-<p>You will see some differences/issues with the display of the starting state of the assessment — this is mainly due to the differences in the markup, which in turn cause some styling issues as the CSS is not applied properly. Don't worry — you'll be fixing these problems in the upcoming sections!</p>
+## Project brief
 
-<h2 id="Project_brief">Project brief</h2>
+For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.
 
-<p>For this project, you are presented with a fictional nature site displaying a "factual" article about bears. As it stands, it has a number of accessibility issues — your task is to explore the existing site and fix them to the best of your abilities, answering the questions given below.</p>
+### Color
 
-<h3 id="Color">Color</h3>
+The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?
 
-<p>The text is difficult to read because of the current color scheme. Can you do a test of the current color contrast (text/background), report the results of the test, and then fix it by changing the assigned colors?</p>
+### Semantic HTML
 
-<h3 id="Semantic_HTML">Semantic HTML</h3>
+1.  The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.
+2.  Can you update the article text to make it easier for screenreader users to navigate?
+3.  The navigation menu part of the site (wrapped in `<div class="nav"></div>`) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.
 
-<ol>
- <li>The content is still not very accessible — report on what happens when you try to navigate it using a screenreader.</li>
- <li>Can you update the article text to make it easier for screenreader users to navigate?</li>
- <li>The navigation menu part of the site (wrapped in <code>&lt;div class="nav"&gt;&lt;/div&gt;</code>) could be made more accessible by putting it in a proper HTML5 semantic element. Which one should it be updated to? Make the update.</li>
-</ol>
+> **Примечание:** You'll need to update the CSS rule selectors that style the tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.
 
-<div class="note">
-<p><strong>Note</strong>: You'll need to update the CSS rule selectors that style the  tags to their proper equivalents for the semantic headings. Once you add paragraph elements, you'll notice the styling looking better.</p>
-</div>
+### The images
 
-<h3 id="The_images">The images</h3>
+The images are currently inaccessible to screenreader users. Can you fix this?
 
-<p>The images are currently inaccessible to screenreader users. Can you fix this?</p>
+### The audio player
 
-<h3 id="The_audio_player">The audio player </h3>
+1.  The `<audio>` player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?
+2.  The `<audio>` player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?
 
-<ol>
- <li>The <code>&lt;audio&gt;</code> player isn't accessible to hearing impaired (deaf) people — can you add some kind of accessible alternative for these users?</li>
- <li>The <code>&lt;audio&gt;</code> player isn't accessible to those using older browsers that don't support HTML5 audio. How can you allow them to still access the audio?</li>
-</ol>
+### The forms
 
-<h3 id="The_forms">The forms</h3>
+1.  The `<input>` element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?
+2.  The two `<input>` elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.
 
-<ol>
- <li>The <code>&lt;input&gt;</code> element in the search form at the top could do with a label, but we don't want to add a visible text label that would potentially spoil the design and isn't really needed by sighted users. How can you add a label that is only accessible to screenreaders?</li>
- <li>The two <code>&lt;input&gt;</code> elements in the comment form have visible text labels, but they are not unambiguously associated with their labels — how do you achieve this? Note that you'll need to update some of the CSS rule as well.</li>
-</ol>
+### The show/hide comment control
 
-<h3 id="The_showhide_comment_control">The show/hide comment control</h3>
+The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?
 
-<p>The show/hide comment control button is not current keyboard-accessible. Can you make it keyboard accessible, both in terms of focusing it using the tab key, and activating it using the return key?</p>
+### The table
 
-<h3 id="The_table">The table</h3>
+The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?
 
-<p>The data table is not currently very accessible — it is hard for screenreader users to associate data rows and columns together, and the table also has no kind of summary to make it clear what it shows. Can you add some features to your HTML to fix this problem?</p>
+### Other considerations?
 
-<h3 id="Other_considerations">Other considerations?</h3>
+Can you list two more ideas for improvements that would make the website more accessible?
 
-<p>Can you list two more ideas for improvements that would make the website more accessible?</p>
+## Assessment
 
-<h2 id="Assessment">Assessment</h2>
+If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the [discussion thread for this exercise](https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691), or in the [#mdn](irc://irc.mozilla.org/mdn) IRC channel on [Mozilla IRC](https://wiki.mozilla.org/IRC). Try the exercise first — there is nothing to be gained by cheating!
 
-<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/accessibility-troubleshooting-assessment/24691">discussion thread for this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p>
+{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
-<p>{{PreviousMenu("Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/css_and_javascript/index.md b/files/ru/learn/accessibility/css_and_javascript/index.md
index 22e315bfd962ed..df92152072600d 100644
--- a/files/ru/learn/accessibility/css_and_javascript/index.md
+++ b/files/ru/learn/accessibility/css_and_javascript/index.md
@@ -16,114 +16,116 @@ tags:
 translation_of: Learn/Accessibility/CSS_and_JavaScript
 original_slug: Learn/Доступность/CSS_and_JavaScript
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
 
-<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.
 
-<p class="summary">В CSS и JavaScript есть множество возможностей для создания доступных интерфейсов. Но это обоюдоострый клинок — при неосторожном обращении они могут доступности и значительно навредить. В этой статье мы рассмотрим лучшие практики в CSS и JavaScript, которые позволят даже сложному контенту оставаться доступным настолько, насколько это возможно.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, а также понимание, [что такое доступность](/ru/docs/Learn/Accessibility/What_is_accessibility). |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Ознакомиться со способами использования CSS и JavaScript таким образом, чтобы не вредить доступности интерфейсов, а даже улучшать её.                                       |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, а также понимание, <a href="/ru/docs/Learn/Accessibility/What_is_accessibility">что такое доступность</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомиться со способами использования CSS и JavaScript таким образом, чтобы не вредить доступности интерфейсов, а даже улучшать её.</td>
-  </tr>
- </tbody>
-</table>
+## Влияют ли CSS и JavaScript на доступность?
 
-<h2 id="CSS_and_JavaScript_are_accessible">Влияют ли CSS и JavaScript на доступность?</h2>
+По сравнению с HTML, влияние CSS и JavaScript на доступность веб-страниц не столь велико, однако они всё равно способны внести свой вклад — как положительный, так и отрицательный. Иными словами, важно ознакомиться с рекомендациями по использованию CSS и JavaScript без риска случайно сломать доступность ваших веб-страниц.
 
-<p>По сравнению с HTML, влияние CSS и JavaScript на доступность веб-страниц не столь велико, однако они всё равно способны внести свой вклад — как положительный, так и отрицательный. Иными словами, важно ознакомиться с рекомендациями по использованию CSS и JavaScript без риска случайно сломать доступность ваших веб-страниц.</p>
+## CSS
 
-<h2 id="CSS">CSS</h2>
+Начнём наш обзор с CSS.
 
-<p>Начнём наш обзор с CSS.</p>
+### Правильная семантика и ожидаемое пользователем поведение
 
-<h3 id="Correct_semantics_and_user_expectation">Правильная семантика и ожидаемое пользователем поведение</h3>
+При помощи CSS мы можем заставить любой HTML-элемент выглядеть _как угодно_, однако это не означает, что следует так делать. Как мы часто упоминали в статье [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML), для каждой задачи всегда стоит использовать соответствующий семантический элемент. Если не следовать данному правилу, то могут возникнуть проблемы и неудобства для всех, а в особенности для людей с ограниченными возможностями здоровья. Правильная семантика также тесно связана с ожидаемым пользователями поведением — элементы выглядят и ведут себя определенным образом, в соответствии с задачами, которые они решают. Внешний вид и поведение элементов интерфейса часто универсальны между разными сайтами и даже браузерами — пользователи привыкают к этому и им проще ориентироваться в интерфейсах.
 
-<p>При помощи CSS мы можем заставить любой HTML-элемент выглядеть <em>как угодно</em>, однако это не означает, что следует так делать. Как мы часто упоминали в статье <a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a>, для каждой задачи всегда стоит использовать соответствующий семантический элемент. Если не следовать данному правилу, то могут возникнуть проблемы и неудобства для всех, а в особенности для людей с ограниченными возможностями здоровья. Правильная семантика также тесно связана с ожидаемым пользователями поведением — элементы выглядят и ведут себя определенным образом, в соответствии с задачами, которые они решают. Внешний вид и поведение элементов интерфейса часто универсальны между разными сайтами и даже браузерами — пользователи привыкают к этому и им проще ориентироваться в интерфейсах.</p>
+Например, пользователь скринридера не сможет передвигаться по странице с помощью заголовков, если разработчик не разметит контент корректно с их помощью. Аналогично, если заголовок стилизован так, что вовсе не распознается как заголовок, то он теряет своё визуальное значение.
 
-<p>Например, пользователь скринридера не сможет передвигаться по странице с помощью заголовков, если разработчик не разметит контент корректно с их помощью. Аналогично, если заголовок стилизован так, что вовсе не распознается как заголовок, то он теряет своё визуальное значение.</p>
+Эмпирическое правило гласит: стилизовать элементы страницы, подгоняя их под требуемый дизайн, можно до той степени, пока они выглядят и ведут себя ожидаемо. В следующих разделах мы рассмотрим рекомендации по стилизации некоторых важных HTML-элементов.
 
-<p>Эмпирическое правило гласит: стилизовать элементы страницы, подгоняя их под требуемый дизайн, можно до той степени, пока они выглядят и ведут себя ожидаемо. В следующих разделах мы рассмотрим рекомендации по стилизации некоторых важных HTML-элементов.</p>
+#### «Стандартная» структура текстового контента
 
-<h4 id="Standard_text_content_structure">«Стандартная» структура текстового контента</h4>
+Заголовки, параграфы и списки — это основа текстового контента веб-страницы:
 
-<p>Заголовки, параграфы и списки — это основа текстового контента веб-страницы:</p>
+```html
+<h1>Заголовок</h1>
 
-<pre class="brush: html">&lt;h1&gt;Заголовок&lt;/h1&gt;
+<p>Параграф</p>
 
-&lt;p&gt;Параграф&lt;/p&gt;
-
-&lt;ul&gt;
-  &lt;li&gt;В моём списке&lt;/li&gt;
-  &lt;li&gt;два элемента.&lt;/li&gt;
-&lt;/ul&gt;</pre>
+<ul>
+  <li>В моём списке</li>
+  <li>два элемента.</li>
+</ul>
+```
 
-<p>Типичные стили для такого контента могут выглядеть следующим образом:</p>
+Типичные стили для такого контента могут выглядеть следующим образом:
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: 5rem;
 }
 
 p, li {
   line-height: 1.5;
   font-size: 1.6rem;
-}</pre>
+}
+```
 
-<p>Следует обратить внимание, что:</p>
+Следует обратить внимание, что:
 
-<ul>
- <li>У шрифтов выбраны разумные размер, интерлиньяж, межбуквенное расстояние и прочее, чтобы сделать текстовый контент разборчивым и комфортным для чтения.</li>
- <li>Заголовки заметно отличаются от основного текста, например имеют такой же крупный размер шрифта и полужирное начертание, как стандартная стилизация. Списки выглядят как списки.</li>
- <li>Цвет текста должен быть достаточно контрастен относительно цвета фона.</li>
-</ul>
+- У шрифтов выбраны разумные размер, интерлиньяж, межбуквенное расстояние и прочее, чтобы сделать текстовый контент разборчивым и комфортным для чтения.
+- Заголовки заметно отличаются от основного текста, например имеют такой же крупный размер шрифта и полужирное начертание, как стандартная стилизация. Списки выглядят как списки.
+- Цвет текста должен быть достаточно контрастен относительно цвета фона.
 
-<p> Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a> и <a href="/ru/docs/Learn/CSS/Styling_text">Стилизация текста</a>.</p>
+Для более подробной информации смотрите [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals) и [Стилизация текста](/ru/docs/Learn/CSS/Styling_text).
 
-<h4 id="Emphasised_text">Акцентированный текст</h4>
+#### Акцентированный текст
 
-<p>Строчный элемент, который акцентирует особое внимание на содержащемся в нём тексте:</p>
+Строчный элемент, который акцентирует особое внимание на содержащемся в нём тексте:
 
-<pre class="brush: html">&lt;p&gt;Вода &lt;em&gt;очень горячая&lt;/em&gt;.&lt;/p&gt;
+```html
+<p>Вода <em>очень горячая</em>.</p>
 
-&lt;p&gt;Собирающиеся на поверхности капельки воды называются &lt;strong&gt;конденсатом&lt;/strong&gt;.&lt;/p&gt;</pre>
+<p>Собирающиеся на поверхности капельки воды называются <strong>конденсатом</strong>.</p>
+```
 
-<p>Возможно, нам понадобится добавить цвета акцентированному тексту:</p>
+Возможно, нам понадобится добавить цвета акцентированному тексту:
 
-<pre class="brush: css">strong, em {
+```css
+strong, em {
   color: #a60000;
-}</pre>
+}
+```
 
-<p>Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Акцент_и_важность">Акцент и важность</a>.</p>
+Однако не стоит сильно менять стандартную стилизацию акцентирующих элементов. Стандартный вид полужирного и курсивного текста хорошо узнаваем, поэтому изменение стилизации может вызывать путаницу. Для более подробной информации смотрите [Акцент и важность](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Акцент_и_важность).
 
-<h4 id="Abbreviations">Аббревиатуры</h4>
+#### Аббревиатуры
 
-<p>Элемент, который позволяет разметить аббревиатуру или акроним и указать их расшифку:</p>
+Элемент, который позволяет разметить аббревиатуру или акроним и указать их расшифку:
 
-<pre class="brush: html">&lt;p&gt;Веб-контент верстается с помощью &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt;.&lt;/p&gt;</pre>
+```html
+<p>Веб-контент верстается с помощью <abbr title="Hypertext Markup Language">HTML</abbr>.</p>
+```
 
-<p>И вновь, возможно, нам понадобится немного стилизовать наши аббревиатуры:</p>
+И вновь, возможно, нам понадобится немного стилизовать наши аббревиатуры:
 
-<pre class="brush: css">abbr {
+```css
+abbr {
   color: #a60000;
-}</pre>
+}
+```
 
-<p>Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Аббревиатуры">Аббревиатуры</a>.</p>
+Стандартная стилизация для аббревиатур — это пунктирное подчёркивание, не стоит от этого сильно отклоняться. Для более подробной информации смотрите [Аббревиатуры](/ru/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Аббревиатуры).
 
-<h4 id="Links">Ссылки</h4>
+#### Ссылки
 
-<p>Гиперссылки помогают нам переходить из одного места в сети в другое:</p>
+Гиперссылки помогают нам переходить из одного места в сети в другое:
 
-<pre class="brush: html">&lt;p&gt;Посетите &lt;a href="https://www.mozilla.org"&gt;домашнюю страницу Mozilla&lt;/a&gt;.&lt;/p&gt;</pre>
+```html
+<p>Посетите <a href="https://www.mozilla.org">домашнюю страницу Mozilla</a>.</p>
+```
 
-<p>Ниже приведена базовая стилизация для ссылок:</p>
+Ниже приведена базовая стилизация для ссылок:
 
-<pre class="brush: css">a {
+```css
+a {
   color: #ff0000;
 }
 
@@ -135,132 +137,126 @@ a:hover, a:visited, a:focus {
 a:active {
   color: #000000;
   background-color: #a60000;
-}</pre>
+}
+```
 
-<p>Стандартные соглашения по стилизации ссылок — подчёркивание и отличный от стандартного цвет (по умолчанию, синий) в обычном состоянии, другой цвет в случае, если ссылка ранее была посещена (по-умолчанию, фиолетовый) и еще один цвет для состояния нажатости (по-умолчанию, красный). Кроме того при наведении указателя мыши на ссылку указатель начинает отображаться в виде руки, а также ссылка выделяется, когда находится в фокусе (при перемещении по странице с помощью клавиши tab) или активна. Изображение ниже показывает выделение в Firefox (пунктирная обводка) и Chrome (синяя обводка):</p>
+Стандартные соглашения по стилизации ссылок — подчёркивание и отличный от стандартного цвет (по умолчанию, синий) в обычном состоянии, другой цвет в случае, если ссылка ранее была посещена (по-умолчанию, фиолетовый) и еще один цвет для состояния нажатости (по-умолчанию, красный). Кроме того при наведении указателя мыши на ссылку указатель начинает отображаться в виде руки, а также ссылка выделяется, когда находится в фокусе (при перемещении по странице с помощью клавиши tab) или активна. Изображение ниже показывает выделение в Firefox (пунктирная обводка) и Chrome (синяя обводка):
 
-<p><img alt="" src="focus-highlight-firefox.png" style="display: block; margin: 0px auto;"></p>
+![](focus-highlight-firefox.png)
 
-<p><img alt="" src="focus-highlight-chrome.png" style="display: block; margin: 0px auto;"></p>
+![](focus-highlight-chrome.png)
 
-<p>До тех пор, пока пользователь получает обратную связь при взаимодействии со ссылками, можно проявлять определённую креативность относительно их стилизации. Что-нибудь обязательно должно происходить при изменении состояния. Не следует также отключать стандартную иконку указателя мыши или обводку — она вносит очень важный вклад в доступность для тех, кто при навигации по сайту использует клавитуру.</p>
+До тех пор, пока пользователь получает обратную связь при взаимодействии со ссылками, можно проявлять определённую креативность относительно их стилизации. Что-нибудь обязательно должно происходить при изменении состояния. Не следует также отключать стандартную иконку указателя мыши или обводку — она вносит очень важный вклад в доступность для тех, кто при навигации по сайту использует клавитуру.
 
-<h4 id="Form_elements">Формы</h4>
+#### Формы
 
-<p>Формы - это DOM-элементы, которые позволяют пользователям вводить данные на веб-страницах:</p>
+Формы - это DOM-элементы, которые позволяют пользователям вводить данные на веб-страницах:
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;label for="name"&gt;Введите имя&lt;/label&gt;
-  &lt;input type="text" id="name" name="name"&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+  <label for="name">Введите имя</label>
+  <input type="text" id="name" name="name">
+</div>
+```
 
-<p>Мы подготовили пример хорошей стилизации формы, который вы можете найти здесь: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html">form-css.html</a> (а также <a href="https://mdn.github.io/learning-area/accessibility/css/form-css.html">посмотреть вживую</a>).</p>
+Мы подготовили пример хорошей стилизации формы, который вы можете найти здесь: [form-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-css.html) (а также [посмотреть вживую](https://mdn.github.io/learning-area/accessibility/css/form-css.html)).
 
-<p>При стилизации форм обычно производится подгонка размеров элементов, выравнивание лейблов и полей ввода, а также придание им приятного внешнего вида.</p>
+При стилизации форм обычно производится подгонка размеров элементов, выравнивание лейблов и полей ввода, а также придание им приятного внешнего вида.
 
-<p>Не следует сильно отклоняться от стандартной стилизации состояния фокуса на элементах формы. По умолчанию, оно выглядит так же, как у ссылок (смотрите изображения выше). Можно стилизовать фокус и наведение указателя мыши на элементы формы, например, для придания им универсального внешнего вида в разных браузерах или же для лучшего соответствия дизайну сайта. При этом не стоит совсем отключать отображение этих состояний, потому что с их помощью пользователи ориентируются в происходящем на странице.</p>
+Не следует сильно отклоняться от стандартной стилизации состояния фокуса на элементах формы. По умолчанию, оно выглядит так же, как у ссылок (смотрите изображения выше). Можно стилизовать фокус и наведение указателя мыши на элементы формы, например, для придания им универсального внешнего вида в разных браузерах или же для лучшего соответствия дизайну сайта. При этом не стоит совсем отключать отображение этих состояний, потому что с их помощью пользователи ориентируются в происходящем на странице.
 
-<h4 id="Tables">Таблицы</h4>
+#### Таблицы
 
-<p>Таблицы используются для отображения табличных данных.</p>
+Таблицы используются для отображения табличных данных.
 
-<p>Вы можете найти хороший образец HTML и CSS для таблицы в нашем примере: <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html">table-css.html</a> (а также <a href="https://mdn.github.io/learning-area/accessibility/css/table-css.html">посмотреть вживую</a>).</p>
+Вы можете найти хороший образец HTML и CSS для таблицы в нашем примере: [table-css.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/table-css.html) (а также [посмотреть вживую](https://mdn.github.io/learning-area/accessibility/css/table-css.html)).
 
-<p>Стилизуют таблицы обычно для придания им более симпатичного внешнего вида и лучшего вписывания в общий дизайн страницы. Не стоит отказываться от выделения заголовков (обычно с помощью полужирного начертания) и чередования двух цветов строк для лучшего восприятия информации.</p>
+Стилизуют таблицы обычно для придания им более симпатичного внешнего вида и лучшего вписывания в общий дизайн страницы. Не стоит отказываться от выделения заголовков (обычно с помощью полужирного начертания) и чередования двух цветов строк для лучшего восприятия информации.
 
-<h3 id="Color_and_color_contrast">Цвета и контраст</h3>
+### Цвета и контраст
 
-<p>При выборе цветовой палитры для сайта, следует следить за тем, чтобы цвет текста имел высокий уровень контрастности относительно цвета фона. Дизайн может выглядеть очень стильно, однако это не будет иметь никакого смысла, если люди с дефектами зрения (такими как дальтонизм) не смогут прочитать ваш контент.</p>
+При выборе цветовой палитры для сайта, следует следить за тем, чтобы цвет текста имел высокий уровень контрастности относительно цвета фона. Дизайн может выглядеть очень стильно, однако это не будет иметь никакого смысла, если люди с дефектами зрения (такими как дальтонизм) не смогут прочитать ваш контент.
 
-<p>К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, <a href="http://webaim.org/resources/contrastchecker/">Color Contrast Checker</a> от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов.</p>
+К счастью, проверить, всё ли в порядке с уровнем контрастности, весьма просто. Существует множество онлайн-инструментов, которые помогут сравнить пару цветов и вычислить значение контрастности. Например, [Color Contrast Checker](http://webaim.org/resources/contrastchecker/) от WebAIM. Это довольно простой в использовании инструмент, который также предоставляет инструкции, как можно добиться соответствия критериям WCAG по контрастности цветов.
 
-<div class="note">
-<p><strong>Примечание</strong>: Высокий уровень контрастности также позволяет пользователям мобильных устройств с глянцевыми экранами комфортнее читать текст при ярком освещении.</p>
-</div>
+> **Примечание:** Высокий уровень контрастности также позволяет пользователям мобильных устройств с глянцевыми экранами комфортнее читать текст при ярком освещении.
 
-<p>Кроме того, не следует полагаться только на цвет при выделении важной информации, потому что некоторые пользователи не распознают цвета. Например, стоит не просто пометить обязательные поля формы красным, но также добавить рядом звёздочку.</p>
+Кроме того, не следует полагаться только на цвет при выделении важной информации, потому что некоторые пользователи не распознают цвета. Например, стоит не просто пометить обязательные поля формы красным, но также добавить рядом звёздочку.
 
-<h3 id="Hiding_things">Скрытые элементы</h3>
+### Скрытые элементы
 
-<p>Существует множество ситуаций, когда не нужно показывать сразу весь контент. Например, в нашем прототипе <a href="https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">панели вкладок</a> (здесь можно посмотреть <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">исходный код</a>) имеется три секции с информацией, но мы <a href="/ru/docs/Learn/CSS/CSS_layout/Positioning">располагаем</a> их одна над другой и предоставляем набор вкладок, которые позволяют при кликах по ним переключаться между секциями (они также доступны при помощи клавиатуры — их можно выбирать клавишами Таб и Enter/Return).</p>
+Существует множество ситуаций, когда не нужно показывать сразу весь контент. Например, в нашем прототипе [панели вкладок](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (здесь можно посмотреть [исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)) имеется три секции с информацией, но мы [располагаем](/ru/docs/Learn/CSS/CSS_layout/Positioning) их одна над другой и предоставляем набор вкладок, которые позволяют при кликах по ним переключаться между секциями (они также доступны при помощи клавиатуры — их можно выбирать клавишами Таб и Enter/Return).
 
-<p><img alt="" src="tabbed-info-box.png" style="display: block; margin: 0px auto;"></p>
+![](tabbed-info-box.png)
 
-<p>При этом, такой подход никак не мешает пользователям скринридеров — до тех пор, пока контент в вёрстке расположен в правильном порядке, у них не будет никаких проблем. Именно поэтому абсолютное позиционирование (как в примере выше) считается одним из лучших механизмов для визуального скрытия контента.</p>
+При этом, такой подход никак не мешает пользователям скринридеров — до тех пор, пока контент в вёрстке расположен в правильном порядке, у них не будет никаких проблем. Именно поэтому абсолютное позиционирование (как в примере выше) считается одним из лучших механизмов для визуального скрытия контента.
 
-<p>А вот {{cssxref("visibility")}}<code>:hidden</code> и {{cssxref("display")}}<code>:none</code>, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей.</p>
+А вот {{cssxref("visibility")}}`:hidden` и {{cssxref("display")}}`:none`, напротив, использовать для скрытия контента не следует, потому что они скрывают его не только визуально, но и от скринридеров. Поэтому применять эти свойства стоит, только если совсем скрыть контент и является вашей задачей.
 
-<div class="note">
-<p><strong>Примечание</strong>: В статье <a href="http://webaim.org/techniques/css/invisiblecontent/">Невидимый контент только для пользователей скринридеров (EN)</a> содержится множество полезной информации по этой теме.</p>
-</div>
+> **Примечание:** В статье [Невидимый контент только для пользователей скринридеров (EN)](http://webaim.org/techniques/css/invisiblecontent/) содержится множество полезной информации по этой теме.
 
-<h3 id="Accept_that_users_can_override_styles">Помните, что пользователи могут переопределять стили</h3>
+### Помните, что пользователи могут переопределять стили
 
-<h4 id="Accept_that_users_can_override_your_styles">Помните, что пользователи могут переопределять ваши стили</h4>
+#### Помните, что пользователи могут переопределять ваши стили
 
-<p>У пользователей есть возможность переопределять ваши стили своими, например:</p>
+У пользователей есть возможность переопределять ваши стили своими, например:
 
-<ul>
- <li>В руководстве Сары Мэддокс <a class="external external-icon" href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/" rel="noopener">Как использовать пользовательские таблицы стилей (CSS) в Firefox (EN)</a> можно найти подробные инструкции по пользовательским стилям в Firefox, а в статье <a href="https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/">Как использовать пользовательские таблицы стилей (CSS) в Internet Explorer (EN)</a> за авторством Адриана Гордона, соответственно, для <abbr title="Internet Explorer">IE</abbr>.</li>
- <li>Также можно воспользоваться браузерными расширениями. Например, расширение Stylish доступно для <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/">Firefox</a>, <a href="https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45">Safari</a>, <a href="https://addons.opera.com/en/extensions/details/stylish/">Opera</a> и <a href="https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe">Chrome</a>.</li>
-</ul>
+- В руководстве Сары Мэддокс [Как использовать пользовательские таблицы стилей (CSS) в Firefox (EN)](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-firefox/) можно найти подробные инструкции по пользовательским стилям в Firefox, а в статье [Как использовать пользовательские таблицы стилей (CSS) в Internet Explorer (EN)](https://www.itsupportguides.com/knowledge-base/computer-accessibility/how-to-use-a-custom-style-sheet-css-with-internet-explorer/) за авторством Адриана Гордона, соответственно, для IE.
+- Также можно воспользоваться браузерными расширениями. Например, расширение Stylish доступно для [Firefox](https://addons.mozilla.org/en-US/firefox/addon/stylish/), [Safari](https://safari-extensions.apple.com/details/?id=com.sobolev.stylish-5555L95H45), [Opera](https://addons.opera.com/en/extensions/details/stylish/) и [Chrome](https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe).
 
-<p>Пользователи могут переопределять стили по множеству причин. Людям со слабым зрением может понадобиться сделать текст крупнее на всех сайтах, которыми они пользуются. А пользователю с монохромазией потребуется перекрасить все сайты в высококонтрастные цвета, которые ему проще различать. Какая бы ни была причина, следует оставлять дизайн сайта достаточно гибким, чтобы подобные изменения в нём работали. Например, важно убедиться, что область с главным контентом будет нормально обрабатывать более крупные размеры шрифта — она не должна просто обрезать текст или совсем ломаться.</p>
+Пользователи могут переопределять стили по множеству причин. Людям со слабым зрением может понадобиться сделать текст крупнее на всех сайтах, которыми они пользуются. А пользователю с монохромазией потребуется перекрасить все сайты в высококонтрастные цвета, которые ему проще различать. Какая бы ни была причина, следует оставлять дизайн сайта достаточно гибким, чтобы подобные изменения в нём работали. Например, важно убедиться, что область с главным контентом будет нормально обрабатывать более крупные размеры шрифта — она не должна просто обрезать текст или совсем ломаться.
 
-<h2 id="JavaScript">JavaScript</h2>
+## JavaScript
 
-<p>При неправильном использовании JavaScript тоже может вредить доступности.</p>
+При неправильном использовании JavaScript тоже может вредить доступности.
 
-<p>Современный JavaScript — это очень мощный язык, с помощью которого можно делать кучу разных вещей: от простых обновлений пользовательского интерфейса до полноценных 2D- и 3D-игр. Понятно, что нельзя сделать абсолютно любой тип контента доступным на 100% для всех — нужно просто прилагать все усилия, чтобы делать веб-приложения доступными настолько, насколько это возможно.</p>
+Современный JavaScript — это очень мощный язык, с помощью которого можно делать кучу разных вещей: от простых обновлений пользовательского интерфейса до полноценных 2D- и 3D-игр. Понятно, что нельзя сделать абсолютно любой тип контента доступным на 100% для всех — нужно просто прилагать все усилия, чтобы делать веб-приложения доступными настолько, насколько это возможно.
 
-<p>Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи <a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a>:</p>
+Сравнительно несложно сделать доступным простой контент — например, текст, изображения, таблицы, формы и кнопки. Вспомним основные тезисы из статьи [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML):
 
-<ul>
- <li>Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, {{htmlelement("button")}}, {{htmlelement("a")}} и так далее.</li>
- <li>Контент должен быть доступен либо как обычный текст, либо как <a href="/ru/docs/Learn/Accessibility/HTML#Альтернативный_текст">альтернативный текст</a>, например атрибут alt для изображений.</li>
-</ul>
+- Хорошая семантика: использование каждого элемента для своей задачи. Следует убедиться, что используются различные типы элементов: заголовки, параграфы, {{htmlelement("button")}}, {{htmlelement("a")}} и так далее.
+- Контент должен быть доступен либо как обычный текст, либо как [альтернативный текст](/ru/docs/Learn/Accessibility/HTML#Альтернативный_текст), например атрибут alt для изображений.
 
-<p>Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе <a href="/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</a>. Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием <abbr title="Web Accessibility Initiative — Accessible Rich Internet Applications">WAI-ARIA</abbr> атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее.</p>
+Мы также показали пример использования JavaScript для добавления некоторым элементам возможностей, которых они лишены по умолчанию — смотрите в разделе [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры). Такое решение стоит рассматривать только в случае, когда по какой-то причине у вас нет доступа к изменению разметки. Намного надежнее и универсальнее будет использовать для каждой задачи соответствующий элемент. Также улучшить доступность несемантичных JavaScript-виджетов можно использованием WAI-ARIA атрибутов — с их помощью можно добавить некоторой искусственной семантики для пользователей скринридеров. В следующей статье мы рассмотрим эту тему подробнее.
 
-<p>Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием <a href="/ru/docs/Web/API/WebGL_API">WebGL</a> игра рендерится в элементе {{htmlelement("canvas")}}, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать <a href="/ru/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard">управление с помощью клавиатуры</a> для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом.</p>
+Сложные приложения, например 3D-игры, сделать доступными непросто — написанная с использованием [WebGL](/ru/docs/Web/API/WebGL_API) игра рендерится в элементе {{htmlelement("canvas")}}, который в настоящее время не предоставляет никаких возможностей для использования людьми с дефектами зрения. Можно успокаивать себя тем, что данная группа пользователей не входит в целевую аудиторию, поэтому не стоит ожидать полной доступности для них. Тем не менее, вы можете реализовать [управление с помощью клавиатуры](/ru/docs/Games/Techniques/Control_mechanisms/Desktop_with_mouse_and_keyboard) для игроков, которые не могут использовать мышь, а также сделать цветовую схему достаточно контрастной для игроков с дальтонизмом.
 
-<h3 id="The_problem_with_too_much_JavaScript">Проблема с чрезмерным использованием JavaScript</h3>
+### Проблема с чрезмерным использованием JavaScript
 
-<p>Данная проблема возникает, когда разработчики слишком сильно полагаются на JavaScript. Порой вы можете встретить сайт, на котором всё генерируется с помощью JavaScript — HTML, CSS и так далее. Такое решение точно так же требует поддержания всех видов доступности и решения связанных с ними проблем.</p>
+Данная проблема возникает, когда разработчики слишком сильно полагаются на JavaScript. Порой вы можете встретить сайт, на котором всё генерируется с помощью JavaScript — HTML, CSS и так далее. Такое решение точно так же требует поддержания всех видов доступности и решения связанных с ними проблем.
 
-<p>Для каждой задачи хорош свой инструмент — это правило справедливо как для выбора HTML-элементов, так и для используемой технологии в целом. Стоит хорошенько обдумать, нужно ли использовать тот сияющий, написанный на JavaScript информационный 3D-блок или же воспользоваться старым добрым и обыкновенным текстовым блоком? Нужен ли тот сложный нестандартный виджет в форме, или будет достаточно простого поля для ввода текста? Не следует генерировать весь HTML при помощи JavaScript, если это возможно.</p>
+Для каждой задачи хорош свой инструмент — это правило справедливо как для выбора HTML-элементов, так и для используемой технологии в целом. Стоит хорошенько обдумать, нужно ли использовать тот сияющий, написанный на JavaScript информационный 3D-блок или же воспользоваться старым добрым и обыкновенным текстовым блоком? Нужен ли тот сложный нестандартный виджет в форме, или будет достаточно простого поля для ввода текста? Не следует генерировать весь HTML при помощи JavaScript, если это возможно.
 
-<h3 id="Keeping_it_unobtrusive">Ненавязчивый JavaScript</h3>
+### Ненавязчивый JavaScript
 
-<p>При создании веб-страниц, стоит помнить об идее <strong>ненавязчивого JavaScript</strong>. Идея гласит, что JavaScript следует использовать только для дополнительного улучшения пользовательского опыта — базовые возможности должны работать без JavaScript. Здесь мы говорим в основном об использовании стандартных браузерных возможностей, когда это возможно.</p>
+При создании веб-страниц, стоит помнить об идее **ненавязчивого JavaScript**. Идея гласит, что JavaScript следует использовать только для дополнительного улучшения пользовательского опыта — базовые возможности должны работать без JavaScript. Здесь мы говорим в основном об использовании стандартных браузерных возможностей, когда это возможно.
 
-<p>Хорошие примеры использования подхода с ненавязчивым JavaScript:</p>
+Хорошие примеры использования подхода с ненавязчивым JavaScript:
 
-<ul>
- <li>Валидация формы на клиенте, которая показывает пользователю сообщение о проблемах в заполнении формы без необходимости отправлять данные для проверки на сервер. Если скриптов не будет, то форма продолжит работать, просто валидация будет несколько медленнее.</li>
- <li>Создание нестандартных элементов управления для HTML5 <code>&lt;video&gt;</code>, которыми возможно пользоваться с клавиатуры. И в то же самое время, указание прямой ссылки на видео, которой можно воспользоваться, если JavaScript отключён (стандартные элементы управления <code>&lt;video&gt;</code> недоступны с клавиатуры в большинстве браузеров).</li>
-</ul>
+- Валидация формы на клиенте, которая показывает пользователю сообщение о проблемах в заполнении формы без необходимости отправлять данные для проверки на сервер. Если скриптов не будет, то форма продолжит работать, просто валидация будет несколько медленнее.
+- Создание нестандартных элементов управления для HTML5 `<video>`, которыми возможно пользоваться с клавиатуры. И в то же самое время, указание прямой ссылки на видео, которой можно воспользоваться, если JavaScript отключён (стандартные элементы управления `<video>` недоступны с клавиатуры в большинстве браузеров).
 
-<p id="Client-side_form_validation">Для примера, мы подготовили простенькую черновую версию клиентской валидации формы — <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> (здесь можно <a href="https://mdn.github.io/learning-area/accessibility/css/form-validation.html">посмотреть вживую</a>). Если попытаться нажать на кнопку отправки, не заполнив одно из полей, то форма на сервер отправлена не будет, зато появится сообщение с информацией об ошибках.</p>
+Для примера, мы подготовили простенькую черновую версию клиентской валидации формы — [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) (здесь можно [посмотреть вживую](https://mdn.github.io/learning-area/accessibility/css/form-validation.html)). Если попытаться нажать на кнопку отправки, не заполнив одно из полей, то форма на сервер отправлена не будет, зато появится сообщение с информацией об ошибках.
 
-<p>Такая валидации формы соответствует принципам ненавязчивости — форму можно будет абсолютно полноценно использовать вообще без JavaScript. Форма всё равно будет провалидирована. Так как злонамеренные пользователи могут очень просто обойти клиентскую валидацию (например, отключив JavaScript в браузере), для важных форм её всегда дублируют на сервере. При этом валидация на стороне клиента всё ещё остаётся очень полезной для показа ошибок — пользователи узнают о проблемах с заполнением формы мгновенно, вместо того, чтобы ждать цикла: отправка на сервер - валидация - перезагрузка страницы. Это очень хорошее улучшение пользовательского опыта.</p>
+Такая валидации формы соответствует принципам ненавязчивости — форму можно будет абсолютно полноценно использовать вообще без JavaScript. Форма всё равно будет провалидирована. Так как злонамеренные пользователи могут очень просто обойти клиентскую валидацию (например, отключив JavaScript в браузере), для важных форм её всегда дублируют на сервере. При этом валидация на стороне клиента всё ещё остаётся очень полезной для показа ошибок — пользователи узнают о проблемах с заполнением формы мгновенно, вместо того, чтобы ждать цикла: отправка на сервер - валидация - перезагрузка страницы. Это очень хорошее улучшение пользовательского опыта.
 
-<div class="note">
-<p><strong>Примечание</strong>: В этом простом примере серверная валидация не реализована.</p>
-</div>
+> **Примечание:** В этом простом примере серверная валидация не реализована.
 
-<p>Также мы постарались сделать эту форму довольно доступной. Мы использовали элементы {{htmlelement("label")}} и связали их со своими полями ввода, таким образом скринридеры смогут корректно их озвучить:</p>
+Также мы постарались сделать эту форму довольно доступной. Мы использовали элементы {{htmlelement("label")}} и связали их со своими полями ввода, таким образом скринридеры смогут корректно их озвучить:
 
-<pre class="brush: html">&lt;label for="name"&gt;Введите ваше имя:&lt;/label&gt;
-&lt;input type="text" name="name" id="name"&gt;</pre>
+```html
+<label for="name">Введите ваше имя:</label>
+<input type="text" name="name" id="name">
+```
 
-<p>Чтобы избежать слишком частого обновления пользовательского интерфейса и возможных проблем для пользователей скринридеров, мы производим валидацию только при попытке отправки формы:</p>
+Чтобы избежать слишком частого обновления пользовательского интерфейса и возможных проблем для пользователей скринридеров, мы производим валидацию только при попытке отправки формы:
 
-<pre class="brush: js">form.onsubmit = validate;
+```js
+form.onsubmit = validate;
 
 function validate(e) {
   errorList.innerHTML = '';
-  for (let i = 0; i &lt; formItems.length; i++) {
+  for (let i = 0; i < formItems.length; i++) {
     const testItem = formItems[i];
     if (testItem.input.value === '') {
       errorField.style.left = '360px';
@@ -271,19 +267,19 @@ function validate(e) {
   if (errorList.innerHTML !== '') {
     e.preventDefault();
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: В данном примере мы скрываем и показываем сообщение об ошибке с помощью абсолютного позиционирования, а не каким-то иным методом, потому что такой способ не мешает скринридерам озвучивать контент.</p>
-</div>
+> **Примечание:** В данном примере мы скрываем и показываем сообщение об ошибке с помощью абсолютного позиционирования, а не каким-то иным методом, потому что такой способ не мешает скринридерам озвучивать контент.
 
-<p>В реальности валидация формы будет в разы сложнее. Возможно, вы захотите проверить, что введённое имя действительно выглядит как имя, а возраст — как число, да ещё и реалистичное (например, не отрицательное и состоящее не более чем из 3 цифр). Здесь мы реализовали лишь примитивную проверку на наличие хоть какого-то текста в полях ввода (<code>if (testItem.input.value === '')</code>).</p>
+В реальности валидация формы будет в разы сложнее. Возможно, вы захотите проверить, что введённое имя действительно выглядит как имя, а возраст — как число, да ещё и реалистичное (например, не отрицательное и состоящее не более чем из 3 цифр). Здесь мы реализовали лишь примитивную проверку на наличие хоть какого-то текста в полях ввода (`if (testItem.input.value === '')`).
 
-<p>Когда валидация проходит успешно, форма отправляется на сервер. Если же были обнаружены ошибки (<code>if (errorList.innerHTML !== '')</code>), то мы прерываем отправку формы (при помощи <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code>) и отображаем сообщения обо всех найденных ошибках (смотрите далее).</p>
+Когда валидация проходит успешно, форма отправляется на сервер. Если же были обнаружены ошибки (`if (errorList.innerHTML !== '')`), то мы прерываем отправку формы (при помощи [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault)) и отображаем сообщения обо всех найденных ошибках (смотрите далее).
 
-<p>Для каждого пустого на момент отправки формы поля ввода мы создаем элемент списка с ссылкой и добавляем в <code>errorList</code>.</p>
+Для каждого пустого на момент отправки формы поля ввода мы создаем элемент списка с ссылкой и добавляем в `errorList`.
 
-<pre class="brush: js">function createLink(testItem) {
+```js
+function createLink(testItem) {
   const listItem = document.createElement('li');
   const anchor = document.createElement('a');
 
@@ -294,77 +290,74 @@ function validate(e) {
   };
   listItem.appendChild(anchor);
   errorList.appendChild(listItem);
-}</pre>
+}
+```
 
-<p>Каждая ссылка выполняет две задачи — она рассказыает, какая ошибка случилась, а также при клике на неё можно перейти прямо в связанное поле ввода и скорректировать введённое значение.</p>
+Каждая ссылка выполняет две задачи — она рассказыает, какая ошибка случилась, а также при клике на неё можно перейти прямо в связанное поле ввода и скорректировать введённое значение.
 
-<div class="note">
-<p><strong>Примечание</strong>: Часть этого примера, связанная с <code>focus()</code>, довольно хитрая. Браузеры Chrome и Edge (а также новые версии IE) не нуждаются в коде <code>onclick</code>/<code>focus()</code> — они сами переведут фокус на элемент после клика по ссылке. Safari лишь выделит нужный элемент, так что этот блок кода нужен для корректной установки фокуса. В Firefox же трюк с выделением элемента при клике по ссылке не работает вообще. Данная ошибка должна быть вскоре исправлена — тогда Firefox придет к паритету с прочими браузерами (смотрите {{bug(277178)}}).</p>
-</div>
+> **Примечание:** Часть этого примера, связанная с `focus()`, довольно хитрая. Браузеры Chrome и Edge (а также новые версии IE) не нуждаются в коде `onclick`/`focus()` — они сами переведут фокус на элемент после клика по ссылке. Safari лишь выделит нужный элемент, так что этот блок кода нужен для корректной установки фокуса. В Firefox же трюк с выделением элемента при клике по ссылке не работает вообще. Данная ошибка должна быть вскоре исправлена — тогда Firefox придет к паритету с прочими браузерами (смотрите {{bug(277178)}}).
 
-<p>Дополнительно, то что <code>errorField</code> расположено в вёрстке в самом начале (тогда как визуально в интерфейсе расположено иначе при помощи CSS), позволяет пользователям увидеть, что именно не так с заполнением формы, и легко вернуться обратно к нужным полям ввода в начале страницы.</p>
+Дополнительно, то что `errorField` расположено в вёрстке в самом начале (тогда как визуально в интерфейсе расположено иначе при помощи CSS), позволяет пользователям увидеть, что именно не так с заполнением формы, и легко вернуться обратно к нужным полям ввода в начале страницы.
 
-<p>Кроме того, мы использовали несколько WAI-ARIA атрибутов в нашем примере, чтобы решить проблемы с доступностью, вызванные обновлением контента без перезагрузки страницы (по умолчанию, скринридеры не могут подхватить эти изменения и уведомить об этом пользователя):</p>
+Кроме того, мы использовали несколько WAI-ARIA атрибутов в нашем примере, чтобы решить проблемы с доступностью, вызванные обновлением контента без перезагрузки страницы (по умолчанию, скринридеры не могут подхватить эти изменения и уведомить об этом пользователя):
 
-<pre>&lt;div class="errors" role="alert" aria-relevant="all"&gt;
-  &lt;ul&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;</pre>
+```
+<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+```
 
-<p>Мы разберем данные атрибуты в следующей статье, которая подробно описывает <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>.</p>
+Мы разберем данные атрибуты в следующей статье, которая подробно описывает [WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics).
 
-<div class="note">
-<p><strong>Примечание</strong>: Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты <code>required</code>, <code>min</code>/<code>minlength</code> и <code>max</code>/<code>maxlength</code> (смотрите подробнее на странице элемента {{htmlelement("input")}}). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее).</p>
-</div>
+> **Примечание:** Кто-то из читателей мог задуматься о том факте, что в HTML5 формах есть встроенные механизмы валидации, такие как атрибуты `required`, `min`/`minlength` и `max`/`maxlength` (смотрите подробнее на странице элемента {{htmlelement("input")}}). Мы не использовали их в примере, потому что поддержка браузерами у HTML5 валидации весьма варьируется (например, только IE10 и новее).
 
-<div class="note">
-<p><strong>Примечание</strong>: Статья <a href="http://webaim.org/techniques/formvalidation/">Удобная и доступная валидация форм (EN)</a> от WebAIM содержит дополнительную полезную информацию по этой теме.</p>
-</div>
+> **Примечание:** Статья [Удобная и доступная валидация форм (EN)](http://webaim.org/techniques/formvalidation/) от WebAIM содержит дополнительную полезную информацию по этой теме.
 
-<h3 id="Other_JavaScript_accessibility_concerns">Прочие проблемы доступности, связанные с JavaScript</h3>
+### Прочие проблемы доступности, связанные с JavaScript
 
-<p>Здесь мы собрали прочие аспекты, о которых стоит задумываться при написании JavaScript, если вы беспокоитесь о доступности. Мы будем обновлять данный раздел.</p>
+Здесь мы собрали прочие аспекты, о которых стоит задумываться при написании JavaScript, если вы беспокоитесь о доступности. Мы будем обновлять данный раздел.
 
-<h4 id="mouse-specific_events">Специфичные события мыши</h4>
+#### Специфичные события мыши
 
-<p>Большая часть интерактивности в пользовательских интерфейсах реализуется в JavaScript при помощи обработчиков событий, которые позволяют запускать код, когда происходит определённое событие. У некоторых таких событий имеются проблемы с доступностью. Хороший пример — это специфичные события мыши, например <a href="/ru/docs/Web/API/Element/mouseover_event">mouseover</a>, <a href="/ru/docs/Web/API/Element/mouseout_event">mouseout</a>, <a href="/ru/docs/Web/API/Element/dblclick_event">dblclick</a> и так далее. Функции, которые активируются при срабатывании этих событий, не будут доступны при использовании других устройств ввода, например клавиатуры.</p>
+Большая часть интерактивности в пользовательских интерфейсах реализуется в JavaScript при помощи обработчиков событий, которые позволяют запускать код, когда происходит определённое событие. У некоторых таких событий имеются проблемы с доступностью. Хороший пример — это специфичные события мыши, например [mouseover](/ru/docs/Web/API/Element/mouseover_event), [mouseout](/ru/docs/Web/API/Element/mouseout_event), [dblclick](/ru/docs/Web/API/Element/dblclick_event) и так далее. Функции, которые активируются при срабатывании этих событий, не будут доступны при использовании других устройств ввода, например клавиатуры.
 
-<p>Чтобы избежать проблем подобного рода, следует дублировать функциональность при помощи независимых от устройств событий. Например, события <a href="/ru/docs/Web/API/Element/focus_event">focus</a> и <a href="/ru/docs/Web/API/Element/blur_event">blur</a> будут работать как для мыши, так и для клавиатуры.</p>
+Чтобы избежать проблем подобного рода, следует дублировать функциональность при помощи независимых от устройств событий. Например, события [focus](/ru/docs/Web/API/Element/focus_event) и [blur](/ru/docs/Web/API/Element/blur_event) будут работать как для мыши, так и для клавиатуры.
 
-<p>Рассмотрим пример, который проиллюстрирует, когда это может быть важно. Допустим, у нас есть миниатюрное изображение, при наведении на которое или при фокусе на котором должна показываться его увеличенная версия (примерно как карточки товаров в каталоге интернет-магазина).</p>
+Рассмотрим пример, который проиллюстрирует, когда это может быть важно. Допустим, у нас есть миниатюрное изображение, при наведении на которое или при фокусе на котором должна показываться его увеличенная версия (примерно как карточки товаров в каталоге интернет-магазина).
 
-<p>Мы подготовили простой пример, который можно посмотреть здесь <a href="https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html">mouse-and-keyboard-events.html</a> (а здесь можно посмотреть <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html">исходный код</a>). В коде представлены две функции, которые показывают и скрывают увеличенное изображение. Они устанавливаются в качестве обработчиков событий следующими строками кода:</p>
+Мы подготовили простой пример, который можно посмотреть здесь [mouse-and-keyboard-events.html](https://mdn.github.io/learning-area/accessibility/css/mouse-and-keyboard-events.html) (а здесь можно посмотреть [исходный код](https://github.com/mdn/learning-area/blob/master/accessibility/css/mouse-and-keyboard-events.html)). В коде представлены две функции, которые показывают и скрывают увеличенное изображение. Они устанавливаются в качестве обработчиков событий следующими строками кода:
 
-<pre class="brush: js">imgThumb.onmouseover = showImg;
+```js
+imgThumb.onmouseover = showImg;
 imgThumb.onmouseout = hideImg;
 
 imgThumb.onfocus = showImg;
-imgThumb.onblur = hideImg;</pre>
+imgThumb.onblur = hideImg;
+```
 
-<p>Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам <code>tabindex="0"</code>).</p>
+Первые две строки кода запускают функцию, когда указатель мыши наводится на изображение или уходит с него, соответственно. Такая реализация не позволит открыть увеличенное изображение при помощи клавиатуры. Чтобы решить эту проблему, мы добавили последние две строки, которые запускают функции в случаях, если фокус перешёл на изображение или же ушёл с него. Таким образом, увеличенное изображение будет открываться при переходе на миниатюру при помощи клавиши tab (это возможно, потому что мы добавили миниатюрам `tabindex="0"`).
 
-<p>Событие <a href="/ru/docs/Web/API/Element/click_event">click</a> довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий <a href="/ru/docs/Web/API/GlobalEventHandlers/onclick">onclick</a> на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите <a href="/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</a>).</p>
+Событие [click](/ru/docs/Web/API/Element/click_event) довольно любопытное — выглядит так, будто бы оно специфичное для мыши, однако большинство браузеров при нажатии клавиши Enter/Return активируют обработчики событий [onclick](/ru/docs/Web/API/GlobalEventHandlers/onclick) на находящихся в фокусе ссылках или элементах формы, а также при тапе по элементам на сенсорном экране. Впрочем, это не работает автоматически, если вы позволяете принимать фокус неинтерактивному по умолчанию элементу при помощи tabindex — в таких случаях нужно специально прослушивать нажатие нужных кнопок (смотрите [Добавление доступности с клавиатуры](/ru/docs/Learn/Accessibility/HTML#Добавление_доступности_с_клавиатуры)).
 
-<h2 id="Test_your_skills!">Проверьте ваши навыки!</h2>
+## Проверьте ваши навыки!
 
-<p>Вы дочитали до конца, но хорошо ли вы усвоили материал? Перед тем как двигаться дальше, вы можете пройти тесты, которые мы специально подготовили — смотрите <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility">Проверьте ваши навыки: CSS и JavaScript доступность (EN)</a>.</p>
+Вы дочитали до конца, но хорошо ли вы усвоили материал? Перед тем как двигаться дальше, вы можете пройти тесты, которые мы специально подготовили — смотрите [Проверьте ваши навыки: CSS и JavaScript доступность (EN)](/ru/docs/Learn/Accessibility/CSS_and_JavaScript/Test_your_skills:_CSS_and_JavaScript_accessibility).
 
-<h2 id="Summary">Заключение</h2>
+## Заключение
 
-<p>Надеемся, что данная статья даст вам хорошую базу в решении проблем с доступностью, которые могут возникнуть при использовании CSS и JavaScript на веб-страницах.</p>
+Надеемся, что данная статья даст вам хорошую базу в решении проблем с доступностью, которые могут возникнуть при использовании CSS и JavaScript на веб-страницах.
 
-<p>Далее WAI-ARIA!</p>
+Далее WAI-ARIA!
 
-<div>{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}</div>
+{{PreviousMenuNext("Learn/Accessibility/HTML","Learn/Accessibility/WAI-ARIA_basics", "Learn/Accessibility")}}
 
-<h2 id="In_this_module">В этом модуле</h2>
+## В этом модуле
 
-<ul>
-  <li><a href="/ru/docs/Learn/Accessibility/What_is_accessibility">Что такое доступность?</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
-  <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
- </ul>
+- [Что такое доступность?](/ru/docs/Learn/Accessibility/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/html/index.md b/files/ru/learn/accessibility/html/index.md
index e2ee0ba1c85d84..1d05a18f88e7c4 100644
--- a/files/ru/learn/accessibility/html/index.md
+++ b/files/ru/learn/accessibility/html/index.md
@@ -15,524 +15,516 @@ tags:
 translation_of: Learn/Accessibility/HTML
 original_slug: Learn/Доступность/HTML
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
 
-<div>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</div>
+Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.
 
-<p class="summary">Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию правильных HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML (смотрите [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)), и понимания, [что такое доступность](/ru/docs/Learn/Доступность/What_is_accessibility). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Познакомиться с тем, какие особенности HTML способствуют доступности, и как использовать их на ваших веб-страницах должным образом.                                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML (смотрите <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), и понимания, <a href="/ru/docs/Learn/Доступность/What_is_accessibility">что такое доступность</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Познакомиться с тем, какие особенности HTML способствуют доступности, и как использовать их на ваших веб-страницах должным образом.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## HTML и доступность
 
-<h2 id="HTML_и_доступность">HTML и доступность</h2>
+По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.
 
-<p>По мере изучения HTML: чтения статей, просмотра примеров и т.д., вы заметите одну общую тему — важность использования семантического HTML (иногда называемого POSH (Plain Old Semantic HTML), или «старый добрый семантический HTML»). Это означает использование HTML-элементов по назначению насколько это возможно.</p>
+Вы спросите, почему это так важно? В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:
 
-<p>Вы спросите, почему это так важно?  В конце концов, можно использовать комбинацию CSS и JavaScript, чтобы заставить почти любой HTML-элемент вести себя так, как вы захотите. Например, кнопка для воспроизведения видео на вашем сайте может быть обозначена вот так:</p>
+```html
+<div>Воспроизвести видео</div>
+```
 
-<pre class="brush: html">&lt;div&gt;Воспроизвести видео&lt;/div&gt;</pre>
+Но, как вы увидите далее, в данном случае намного логичнее использовать правильный элемент:
 
-<p>Но, как вы увидите далее, в данном случае намного логичнее использовать правильный элемент:</p>
+```html
+<button>Воспроизвести видео</button>
+```
 
-<pre class="brush: html">&lt;button&gt;Воспроизвести видео&lt;/button&gt;</pre>
+HTML-элементы `<button>` не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки <kbd>Tab</kbd> и активировать, используя <kbd>Enter</kbd>.
 
-<p>HTML-элементы <code>&lt;button&gt;</code> не только имеют соответствующие кнопке стили по умолчанию (которые вы скорее всего захотите переписать), они также имеют встроенную доступность с клавиатуры: между ними можно передвигаться с помощью кнопки <kbd>Tab</kbd> и активировать, используя <kbd>Enter</kbd>.</p>
+Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:
 
-<p>Вёрстка с помощью семантического HTML не займёт больше времени, чем с помощью не семантического (плохого) HTML, если делать это последовательно с самого начала проекта, и это также имеет другие преимущества помимо доступности:</p>
+1.  **Легче разрабатывать** — как сказано выше, вы получаете функциональность «из коробки», плюс проще для восприятия.
+2.  **Лучше для мобильных** — семантический HTML легче по размеру, чем не семантический спагетти-код, и его легче сделать адаптивным.
+3.  **Хорошо для SEO** — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический `<div>` и т.д., поэтому клиентам будет проще найти ваш сайт.
 
-<ol>
- <li><strong>Легче разрабатывать</strong> — как сказано выше, вы получаете функциональность «из коробки», плюс проще для восприятия.</li>
- <li><strong>Лучше для мобильных</strong> — семантический HTML легче по размеру, чем не семантический спагетти-код, и его легче сделать адаптивным.</li>
- <li><strong>Хорошо для SEO</strong> — поисковики уделяют больше внимания ключевым словам внутри заголовков, ссылок и т.д., чем ключевым словам, помещённым в не семантический <code>&lt;div&gt;</code> и т.д., поэтому клиентам будет проще найти ваш сайт.</li>
-</ol>
+Давайте рассмотрим доступный HTML более детально.
 
-<p>Давайте рассмотрим доступный HTML более детально.</p>
+> **Примечание:** Желательно, чтобы у вас был установлен скринридер, чтобы вы могли тестировать примеры, приведённые ниже. Посмотрите наше [Руководство по скринридерам](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) для более подробной информации.
 
-<div class="note">
-<p><strong>Примечание</strong>: Желательно, чтобы у вас был установлен скринридер, чтобы вы могли тестировать примеры, приведённые ниже. Посмотрите наше <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Руководство по скринридерам</a> для более подробной информации.</p>
-</div>
+## Хорошая семантика
 
-<h2 id="Хорошая_семантика">Хорошая семантика</h2>
+Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML-элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.
 
-<p>Мы уже говорили о важности хорошей семантики, и почему нам стоит использовать HTML-элементы по назначению. Это нельзя игнорировать, поскольку это одно из основных мест, где ломается доступность из-за плохой семантики, если должным образом не уделять внимания.</p>
+В интернете люди делают очень странные вещи с HTML разметкой. Некоторые злоупотребляют HTML, используя устаревшие практики, которые не были полностью забыты, а некоторые просто не знают. В любом случае, вам стоит заменить по возможности плохой код, где бы вы его не увидели.
 
-<p>В интернете люди делают очень странные вещи с HTML разметкой. Некоторые злоупотребляют HTML, используя устаревшие практики, которые не были полностью забыты, а некоторые просто не знают. В любом случае, вам стоит заменить по возможности плохой код, где бы вы его не увидели.</p>
+У вас не всегда есть возможность избавиться от плохой вёрстки: ваши страницы могут быть сгенерированы каким-нибудь фреймворком на стороне сервера, над которым у вас нет полного контроля, или на страницах есть сторонний контент (такой как рекламные баннеры), которые вы также не контролируете.
 
-<p>У вас не всегда есть возможность избавиться от плохой вёрстки: ваши страницы могут быть сгенерированы каким-нибудь фреймворком на стороне сервера, над которым у вас нет полного контроля, или на страницах есть сторонний контент (такой как рекламные баннеры), которые вы также не контролируете.</p>
+Цель не «всё или ничего», однако — каждое улучшение, которое вам под силу сделать, поможет обеспечить доступность.
 
-<p>Цель не «всё или ничего», однако — каждое улучшение, которое вам под силу сделать, поможет обеспечить доступность.</p>
+### Текстовый контент
 
-<h3 id="Текстовый_контент">Текстовый контент</h3>
+Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:
 
-<p>Одно из самых лучших вспомогательных средств доступности для пользователя скринридера — хорошая структура заголовков, параграфов, список и т.д. Пример хорошей семантики может выглядеть так:</p>
+```html example-good
+<h1>Мой заголовок</h1>
 
-<pre class="brush: html example-good line-numbers language-html"><code class="language-html">&lt;h1&gt;Мой заголовок&lt;/h1&gt;
+<p>Это первый раздел моей страницы.</p>
 
-&lt;p&gt;Это первый раздел моей страницы.&lt;/p&gt;
+<p>Я добавлю ещё один параграф тут.</p>
 
-&lt;p&gt;Я добавлю ещё один параграф тут.&lt;/p&gt;
+<ol>
+  <li>Это</li>
+  <li>список для</li>
+  <li>чтения</li>
+</ol>
 
-&lt;ol&gt;
-  &lt;li&gt;Это&lt;/li&gt;
-  &lt;li&gt;список для&lt;/li&gt;
-  &lt;li&gt;чтения&lt;/li&gt;
-&lt;/ol&gt;
+<h2>Мой подзаголовок</h2>
 
-&lt;h2&gt;Мой подзаголовок&lt;/h2&gt;
+<p>Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!</p>
 
-&lt;p&gt;Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!&lt;/p&gt;
+<h2>Мой второй подзаголовок</h2>
 
-&lt;h2&gt;Мой второй подзаголовок&lt;/h2&gt;
+<p>Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</p>
+```
 
-&lt;p&gt;Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.&lt;/p&gt;</code></pre>
+Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите [good-semantics.html](http://mdn.github.io/learning-area/accessibility/html/good-semantics.html)). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:
 
-<p>Мы подготовили версию с длинными текстом, чтобы вы попробовали со скринридером (смотрите <a href="http://mdn.github.io/learning-area/accessibility/html/good-semantics.html">good-semantics.html</a>). Если вы попробуете поперемещаться, то увидите, как легко ориентироваться на странице:</p>
+1.  Скринридер озвучивает каждый заголовок по мере перемещения, оповещая вас, что является заголовком, а что параграфом.
+2.  Он останавливается после каждого элемента, позволяя вам переместиться в любое другое место, которое вам надо.
+3.  Во многих скринридерах вы можете перемещаться к следующему/предыдущему заголовкам.
+4.  Во многих скринридерах вы также можете вызвать список всех заголовков, который можно использовать как содержание, чтобы найти определённую информацию.
 
-<ol>
- <li>Скринридер озвучивает каждый заголовок по мере перемещения, оповещая вас, что является заголовком, а что параграфом. </li>
- <li>Он останавливается после каждого элемента, позволяя вам переместиться в любое другое место, которое вам надо.</li>
- <li>Во многих скринридерах вы можете перемещаться к следующему/предыдущему заголовкам.</li>
- <li>Во многих скринридерах вы также можете вызвать список всех заголовков, который можно использовать как содержание, чтобы найти определённую информацию. </li>
-</ol>
-
-<p>Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:</p>
+Иногда люди используют презентационные элементы HTML и перенос строки, чтобы написать заголовки или параграфы:
 
-<pre class="brush: html example-bad line-numbers  language-html"><code class="language-html">&lt;font size="7"&gt;Мой заголовок&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
+```html example-bad
+<font size="7">Мой заголовок</font>
+<br><br>
 Это первый раздел моей страницы.
-&lt;br&gt;&lt;br&gt;
+<br><br>
 Я добавлю ещё один параграф тут.
-&lt;br&gt;&lt;br&gt;
+<br><br>
 1. Это
-&lt;br&gt;&lt;br&gt;
+<br><br>
 2. список для
-&lt;br&gt;&lt;br&gt;
+<br><br>
 3. чтения
-&lt;br&gt;&lt;br&gt;
-&lt;font size="5"&gt;Мой подзаголовок&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
+<br><br>
+<font size="5">Мой подзаголовок</font>
+<br><br>
 Это первый подраздел моей страницы. Я бы хотела, чтобы люди могли найти этот контент!
-&lt;br&gt;&lt;br&gt;
-&lt;font size="5"&gt;Мой второй подзаголовок&lt;/font&gt;
-&lt;br&gt;&lt;br&gt;
-Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.</code></pre>
-
-<p>Если вы попробуете полную версию с помощью скринридера (смотрите <a href="http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html">bad-semantics.html</a>), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок. </p>
-
-<p>Есть и другие проблемы, помимо доступности — сложнее стилизовать контент, используя CSS, или манипулировать им с помощью JavaScript, например, потому что  там нет элементов, которые можно использовать как селекторы.</p>
-
-<h4 id="Использование_понятного_языка">Использование понятного языка</h4>
-
-<p>Язык, который вы используете, также может влиять на доступность. В целом, лучше использовать понятный язык, который не слишком сложный, и который не использует ненужные жаргоны и сленг. Это помогает не только людям с когнитивными или другими нарушениями, но и читателям, для которых текст написан не на родном языке, молодым людям... на самом деле всем! Кроме этого, стоит избегать использование языка и символов, которые не могут быть чётко озвучено скринридером. Например:</p>
-
-<ul>
- <li>Не используйте тире, если можете избежать этого. Вместо «5-7», напишите «от 5 до 7».</li>
- <li>Не пишите сокращения: вместо «Янв» пишите «Январь».</li>
- <li>Расшифровывайте аббревиатуры, как минимум один или два раза. Вместо «HTML» при первом употреблении, пишите «Hypertext Markup Language».</li>
-</ul>
-
-<h3 id="Вёрстка">Вёрстка</h3>
-
-<p>В старые недобрые времена, люди верстали с помощью HTML-таблиц: использовали различные табличные ячейки для размещения шапки, подвала, боковую панель, колонку с основным контентом и т.д. Это плохая идея, потому что скринридер, скорее всего, выдаст непонятную озвучку, особенно, если раскладка сложная и имеет много вложенных таблиц.</p>
-
-<p>Посмотрите пример табличной вёрстки, открыв <a href="http://mdn.github.io/learning-area/accessibility/html/table-layout.html">table-layout.html</a>, которая выглядит примерно так:</p>
-
-<pre class="brush: html">&lt;table width="1200"&gt;
-      &lt;!-- main heading row --&gt;
-      &lt;tr id="heading"&gt;
-        &lt;td colspan="6"&gt;
-
-          &lt;h1 align="center"&gt;Шапка&lt;/h1&gt;
-
-        &lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;!-- nav menu row  --&gt;
-      &lt;tr id="nav" bgcolor="#ffffff"&gt;
-        &lt;td width="200"&gt;
-          &lt;a href="#" align="center"&gt;Главная&lt;/a&gt;
-        &lt;/td&gt;
-        &lt;td width="200"&gt;
-          &lt;a href="#" align="center"&gt;Наша команда&lt;/a&gt;
-        &lt;/td&gt;
-        &lt;td width="200"&gt;
-          &lt;a href="#" align="center"&gt;Проекты&lt;/a&gt;
-        &lt;/td&gt;
-        &lt;td width="200"&gt;
-          &lt;a href="#" align="center"&gt;Контакты&lt;/a&gt;
-        &lt;/td&gt;
-        &lt;td width="300"&gt;
-          &lt;form width="300"&gt;
-            &lt;input type="search" name="q" placeholder="Поиск" width="300"&gt;
-          &lt;/form&gt;
-        &lt;/td&gt;
-        &lt;td width="100"&gt;
-          &lt;button width="100"&gt;Вперёд!&lt;/button&gt;
-        &lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;!-- spacer row --&gt;
-      &lt;tr id="spacer" height="10"&gt;
-        &lt;td&gt;
-
-        &lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;!-- main content and aside row --&gt;
-      &lt;tr id="main"&gt;
-        &lt;td id="content" colspan="4" bgcolor="#ffffff"&gt;
-
-          &lt;!-- основной контент --&gt;
-        &lt;/td&gt;
-        &lt;td id="aside" colspan="2" bgcolor="#ff80ff" valign="top"&gt;
-          &lt;h2&gt;Связанный контент&lt;/h2&gt;
-
-          &lt;!-- второстепенный контент --&gt;
-
-        &lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;!-- spacer row --&gt;
-      &lt;tr id="spacer" height="10"&gt;
-        &lt;td&gt;
-
-        &lt;/td&gt;
-      &lt;/tr&gt;
-      &lt;!-- footer row --&gt;
-      &lt;tr id="footer" bgcolor="#ffffff"&gt;
-        &lt;td colspan="6"&gt;
-          &lt;p&gt;© 2050 никто. Все права защищены.&lt;/p&gt;
-        &lt;/td&gt;
-      &lt;/tr&gt;
-    &lt;/table&gt;</pre>
-
-<p>Если вы попробуете поперемещаться с помощью скринридера, вероятно, он скажет вам, что перед вами таблица (хотя некоторые скринридеры могу различать табличную вёрстку от таблиц данных). После этого, скорее всего (в зависимости от того, какой скринридер вы используете), вам придётся переместиться в таблицу как в объект, посмотрев каждый элемент по отдельности, затем выйти из таблицы, чтобы продолжить перемещение по контенту.</p>
-
-<p>Табличная вёрстка — пережиток прошлого, который имел смысл, когда поддержка CSS не была сильно распространена среди браузеров, но она создаёт путаницу среди пользователей скринридеров, и плоха по многим другим причинам (злоупотребление таблицами, пожалуй, требует больше разметки, делает дизайн менее гибким). Не делайте так!</p>
-
-<p>Вы можете проверить эти утверждения, сравнив предыдущий опыт с <a href="http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/">более современной структурой веб-сайта</a>, которая выглядит так:</p>
-
-<pre class="brush: html">&lt;header&gt;
-  &lt;h1&gt;Шапка&lt;/h1&gt;
-&lt;/header&gt;
-
-&lt;nav&gt;
-  &lt;!-- основная навигация --&gt;
-&lt;/nav&gt;
+<br><br>
+<font size="5">Мой второй подзаголовок</font>
+<br><br>
+Это второй подраздел. Думаю, он намного интереснее, чем предыдущий.
+```
+
+Если вы попробуете полную версию с помощью скринридера (смотрите [bad-semantics.html](http://mdn.github.io/learning-area/accessibility/html/bad-semantics.html)), вам не слишком это понравится: скринридеру нечего использовать как ориентир, поэтому вы не сможете получить содержание, а вся страница для скринридера — это один большой блок, поэтому он озвучит всё за один раз, без остановок.
+
+Есть и другие проблемы, помимо доступности — сложнее стилизовать контент, используя CSS, или манипулировать им с помощью JavaScript, например, потому что там нет элементов, которые можно использовать как селекторы.
+
+#### Использование понятного языка
+
+Язык, который вы используете, также может влиять на доступность. В целом, лучше использовать понятный язык, который не слишком сложный, и который не использует ненужные жаргоны и сленг. Это помогает не только людям с когнитивными или другими нарушениями, но и читателям, для которых текст написан не на родном языке, молодым людям... на самом деле всем! Кроме этого, стоит избегать использование языка и символов, которые не могут быть чётко озвучено скринридером. Например:
+
+- Не используйте тире, если можете избежать этого. Вместо «5-7», напишите «от 5 до 7».
+- Не пишите сокращения: вместо «Янв» пишите «Январь».
+- Расшифровывайте аббревиатуры, как минимум один или два раза. Вместо «HTML» при первом употреблении, пишите «Hypertext Markup Language».
+
+### Вёрстка
+
+В старые недобрые времена, люди верстали с помощью HTML-таблиц: использовали различные табличные ячейки для размещения шапки, подвала, боковую панель, колонку с основным контентом и т.д. Это плохая идея, потому что скринридер, скорее всего, выдаст непонятную озвучку, особенно, если раскладка сложная и имеет много вложенных таблиц.
+
+Посмотрите пример табличной вёрстки, открыв [table-layout.html](http://mdn.github.io/learning-area/accessibility/html/table-layout.html), которая выглядит примерно так:
+
+```html
+<table width="1200">
+      <!-- main heading row -->
+      <tr id="heading">
+        <td colspan="6">
+
+          <h1 align="center">Шапка</h1>
+
+        </td>
+      </tr>
+      <!-- nav menu row  -->
+      <tr id="nav" bgcolor="#ffffff">
+        <td width="200">
+          <a href="#" align="center">Главная</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Наша команда</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Проекты</a>
+        </td>
+        <td width="200">
+          <a href="#" align="center">Контакты</a>
+        </td>
+        <td width="300">
+          <form width="300">
+            <input type="search" name="q" placeholder="Поиск" width="300">
+          </form>
+        </td>
+        <td width="100">
+          <button width="100">Вперёд!</button>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
 
-&lt;!-- Основной контент нашей страницы --&gt;
-&lt;main&gt;
-
-  &lt;!-- На ней есть статьи --&gt;
-  &lt;article&gt;
-    &lt;h2&gt;Заголовок статьи&lt;/h2&gt;
-
-    &lt;!-- сама статья --&gt;
-  &lt;/article&gt;
-
-  &lt;aside&gt;
-    &lt;h2&gt;Связанный контент&lt;/h2&gt;
-
-    &lt;!-- второстепенный контент --&gt;
-  &lt;/aside&gt;
-
-&lt;/main&gt;
-
-&lt;!-- А здесь наш основной подвал, который используется на всех страницах нашего сайта --&gt;
-
-&lt;footer&gt;
-  &lt;!-- здесь содержимое подвала --&gt;
-&lt;/footer&gt;</pre>
-
-<p>Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интернет).</p>
-
-<p>На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите <a href="/ru/docs/Web/HTML/Element#Секционирование_содержания">секционирование содержания)</a>: вы можно верстать, используя только вложенные {{htmlelement("div")}} элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию ({{htmlelement("nav")}}), футер ({{htmlelement("footer")}}), повторяющийся контент ({{htmlelement("article")}}) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью <a href="http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/">Screen Reader Support for new HTML5 Section Elements</a> для представления поддержки этих элементов с помощью скринридеров).</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Помимо того, что ваш контент имеет семантическую и красивую разметку, он должен иметь логический порядок в его исходном коде — позже вы всегда можете разместить элементы там, где хотите, с помощью CSS, но располагать элементы в правильном порядке нужно в самом начале, чтобы то, что зачитывает пользователям скринридер, имело смысл.</p>
-</div>
+        </td>
+      </tr>
+      <!-- main content and aside row -->
+      <tr id="main">
+        <td id="content" colspan="4" bgcolor="#ffffff">
 
-<h3 id="Элементы_интерфейса">Элементы интерфейса</h3>
+          <!-- основной контент -->
+        </td>
+        <td id="aside" colspan="2" bgcolor="#ff80ff" valign="top">
+          <h2>Связанный контент</h2>
 
-<p>Под элементами интерфейса мы подразумеваем основные элементы веб-страниц, с которыми взаимодействует пользователь, в основном это кнопки, ссылки и элементы форм. В этом разделе мы рассмотрим основные проблемы доступности, которые стоит учитывать при создании таких элементов. В следующих статьях про WAI-ARIA и мультимедиа мы рассмотрим другие аспекты доступности пользовательского интерфейса.</p>
+          <!-- второстепенный контент -->
 
-<p>Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">native-keyboard-accessibility.html </a>(смотрите <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html">исходный код</a>). Попробуйте понажимать клавишу <kbd>Tab</kbd>, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.</p>
+        </td>
+      </tr>
+      <!-- spacer row -->
+      <tr id="spacer" height="10">
+        <td>
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png" style="border-style: solid; border-width: 1px; display: block; height: 39px; margin: 0px auto; width: 288px;"></p>
+        </td>
+      </tr>
+      <!-- footer row -->
+      <tr id="footer" bgcolor="#ffffff">
+        <td colspan="6">
+          <p>© 2050 никто. Все права защищены.</p>
+        </td>
+      </tr>
+    </table>
+```
 
-<p>Вы можете нажать <kbd>Enter</kbd>, чтобы перейти по сфокусированной ссылке или нажать кнопку (мы добавили немного JavaScript, чтобы кнопки выводили окно с сообщением), или начать печатать в текстовом поле (другие элементы формы имеют разное управление, например, у элемента {{htmlelement("select")}} можно отобразить опции и переключаться между ними, используя клавиши-стрелки вверх и вниз).</p>
+Если вы попробуете поперемещаться с помощью скринридера, вероятно, он скажет вам, что перед вами таблица (хотя некоторые скринридеры могу различать табличную вёрстку от таблиц данных). После этого, скорее всего (в зависимости от того, какой скринридер вы используете), вам придётся переместиться в таблицу как в объект, посмотрев каждый элемент по отдельности, затем выйти из таблицы, чтобы продолжить перемещение по контенту.
 
-<div class="note">
-<p><strong>Примечание</strong>: Различные браузеры могут иметь разное управление с клавиатуры. Для более подробной информации смотрите <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Using native keyboard accessibility.</a></p>
-</div>
+Табличная вёрстка — пережиток прошлого, который имел смысл, когда поддержка CSS не была сильно распространена среди браузеров, но она создаёт путаницу среди пользователей скринридеров, и плоха по многим другим причинам (злоупотребление таблицами, пожалуй, требует больше разметки, делает дизайн менее гибким). Не делайте так!
+
+Вы можете проверить эти утверждения, сравнив предыдущий опыт с [более современной структурой веб-сайта](http://mdn.github.io/learning-area/html/introduction-to-html/document_and_website_structure/), которая выглядит так:
+
+```html
+<header>
+  <h1>Шапка</h1>
+</header>
+
+<nav>
+  <!-- основная навигация -->
+</nav>
+
+<!-- Основной контент нашей страницы -->
+<main>
+
+  <!-- На ней есть статьи -->
+  <article>
+    <h2>Заголовок статьи</h2>
+
+    <!-- сама статья -->
+  </article>
+
+  <aside>
+    <h2>Связанный контент</h2>
+
+    <!-- второстепенный контент -->
+  </aside>
+
+</main>
+
+<!-- А здесь наш основной подвал, который используется на всех страницах нашего сайта -->
+
+<footer>
+  <!-- здесь содержимое подвала -->
+</footer>
+```
+
+Если вы попробуете нашу более современную структуру с помощью скринридера, вы увидите, что разметка больше не сбивает с толку скринридер. Она также более компактная с точки зрения размера кода, что означает, его легче поддерживать, а пользователям меньше скачивать (особенно для тех, у кого медленный интернет).
+
+На что ещё стоит обратить внимание при вёрстке — это использование семантических HTML5 элементов, которые можно увидеть в примере выше (смотрите [секционирование содержания)](/ru/docs/Web/HTML/Element#Секционирование_содержания): вы можно верстать, используя только вложенные {{htmlelement("div")}} элементы, но лучше использовать соответствующие секционные элементы, чтобы обернуть вашу основную навигацию ({{htmlelement("nav")}}), футер ({{htmlelement("footer")}}), повторяющийся контент ({{htmlelement("article")}}) и т.д. Эти элементы предоставляют дополнительную семантику для скринридеров (и других инструментов), чтобы давать пользователю дополнительную информацию о контенте, по которому они перемещаются (смотрите статью [Screen Reader Support for new HTML5 Section Elements](http://www.weba11y.com/blog/2016/04/22/screen-reader-support-for-new-html5-section-elements/) для представления поддержки этих элементов с помощью скринридеров).
+
+> **Примечание:** Помимо того, что ваш контент имеет семантическую и красивую разметку, он должен иметь логический порядок в его исходном коде — позже вы всегда можете разместить элементы там, где хотите, с помощью CSS, но располагать элементы в правильном порядке нужно в самом начале, чтобы то, что зачитывает пользователям скринридер, имело смысл.
+
+### Элементы интерфейса
 
-<p>Такое поведение вы получаете сразу по умолчанию, просто используя правильные элементы, например:</p>
+Под элементами интерфейса мы подразумеваем основные элементы веб-страниц, с которыми взаимодействует пользователь, в основном это кнопки, ссылки и элементы форм. В этом разделе мы рассмотрим основные проблемы доступности, которые стоит учитывать при создании таких элементов. В следующих статьях про WAI-ARIA и мультимедиа мы рассмотрим другие аспекты доступности пользовательского интерфейса.
 
-<pre class="brush: html example-good">&lt;h1&gt;Ссылки&lt;/h1&gt;
+Одним из ключевых аспектов доступности элементов интерфейса является то, что браузеры по умолчанию позволяют управлять ими с помощью клавиатуры. Вы можете проверить это, открыв в новой вкладке [native-keyboard-accessibility.html ](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)(смотрите [исходный код](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/native-keyboard-accessibility.html)). Попробуйте понажимать клавишу <kbd>Tab</kbd>, после нескольких нажатий вы заметите, что фокус перемещается по всем фокусируемым элементам. Сфокусированные элементы подсвечиваются браузерными стилями по умолчанию (в зависимости от браузера они немного разные), чтобы можно было понять, какой элемент в фокусе.
 
-&lt;p&gt;Это ссылка ведёт на сайт &lt;a href="https://www.mozilla.org"&gt;Mozilla&lt;/a&gt;.&lt;/p&gt;
+![](https://mdn.mozillademos.org/files/14215/button-focused-unfocused.png)
 
-&lt;p&gt;Другая ссылка на &lt;a href="https://developer.mozilla.org"&gt;Mozilla Developer Network&lt;/a&gt;.&lt;/p&gt;
+Вы можете нажать <kbd>Enter</kbd>, чтобы перейти по сфокусированной ссылке или нажать кнопку (мы добавили немного JavaScript, чтобы кнопки выводили окно с сообщением), или начать печатать в текстовом поле (другие элементы формы имеют разное управление, например, у элемента {{htmlelement("select")}} можно отобразить опции и переключаться между ними, используя клавиши-стрелки вверх и вниз).
 
-&lt;h2&gt;Кнопки&lt;/h2&gt;
+> **Примечание:** Различные браузеры могут иметь разное управление с клавиатуры. Для более подробной информации смотрите [Using native keyboard accessibility.](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility)
 
-&lt;p&gt;
-  &lt;button data-message="Это из первой кнопки"&gt;Нажми меня!&lt;/button&gt;
-  &lt;button data-message="Это из второй кнопки"&gt;Меня тоже нажми!&lt;/button&gt;
-  &lt;button data-message="Это из третьей кнопки"&gt;И меня!&lt;/button&gt;
-&lt;/p&gt;
+Такое поведение вы получаете сразу по умолчанию, просто используя правильные элементы, например:
 
-&lt;h2&gt;Форма&lt;/h2&gt;
+```html example-good
+<h1>Ссылки</h1>
 
-&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="name"&gt;Укажите ваше имя:&lt;/label&gt;
-    &lt;input type="text" id="name" name="name"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="age"&gt;Укажите ваш возраст:&lt;/label&gt;
-    &lt;input type="text" id="age" name="age"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="mood"&gt;Выберите ваше настроение:&lt;/label&gt;
-    &lt;select id="mood" name="mood"&gt;
-      &lt;option&gt;Счастливый&lt;/option&gt;
-      &lt;option&gt;Грустный&lt;/option&gt;
-      &lt;option&gt;Злой&lt;/option&gt;
-      &lt;option&gt;Обеспокоенный&lt;/option&gt;
-    &lt;/select&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+<p>Это ссылка ведёт на сайт <a href="https://www.mozilla.org">Mozilla</a>.</p>
 
-<p>Это предполагает использование соответствующим образом ссылок, кнопок, элементов форм и меток (включая элемент {{htmlelement("label")}} для элементов форм).</p>
+<p>Другая ссылка на <a href="https://developer.mozilla.org">Mozilla Developer Network</a>.</p>
 
-<p>Однако, опять же, люди иногда делают странные вещи с HTML. Например, иногда вы видите кнопки, размеченные с помощью элемента {{htmlelement("div")}}:</p>
+<h2>Кнопки</h2>
 
-<pre class="brush: html example-bad">&lt;div data-message="Это из первой кнопки"&gt;Нажми меня!&lt;/div&gt;
-&lt;div data-message="Это из второй кнопки"&gt;Меня тоже нажми!&lt;/div&gt;
-&lt;div data-message="Это из третьей кнопки"&gt;И меня!&lt;/div&gt;</pre>
+<p>
+  <button data-message="Это из первой кнопки">Нажми меня!</button>
+  <button data-message="Это из второй кнопки">Меня тоже нажми!</button>
+  <button data-message="Это из третьей кнопки">И меня!</button>
+</p>
 
-<p>Такой код не советуется использовать: вы сразу же теряете нативную доступность с клавиатуры, которая у вас была бы, если просто использовать элемент {{htmlelement("button")}}, к тому же {{htmlelement("div")}} по умолчанию не имеет кнопочных стилей.</p>
+<h2>Форма</h2>
 
-<h4 id="Добавление_доступности_с_клавиатуры">Добавление доступности с клавиатуры</h4>
+<form>
+  <div>
+    <label for="name">Укажите ваше имя:</label>
+    <input type="text" id="name" name="name">
+  </div>
+  <div>
+    <label for="age">Укажите ваш возраст:</label>
+    <input type="text" id="age" name="age">
+  </div>
+  <div>
+    <label for="mood">Выберите ваше настроение:</label>
+    <select id="mood" name="mood">
+      <option>Счастливый</option>
+      <option>Грустный</option>
+      <option>Злой</option>
+      <option>Обеспокоенный</option>
+    </select>
+  </div>
+</form>
+```
 
-<p>Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв  <a class="external external-icon" href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, а также <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">исходный код</a>). Мы дали нашим поддельным <code>&lt;div&gt;</code>-кнопкам возможность фокусироваться (в том числе через <kbd>Tab</kbd>), указав атрибут <code>tabindex="0"</code>:</p>
+Это предполагает использование соответствующим образом ссылок, кнопок, элементов форм и меток (включая элемент {{htmlelement("label")}} для элементов форм).
 
-<pre class="brush: html">&lt;div data-message="Это из первой кнопки" tabindex="0"&gt;Кликни меня!&lt;/div&gt;
-&lt;div data-message="Это из второй кнопки" tabindex="0"&gt;Меня тоже кликни!&lt;/div&gt;
-&lt;div data-message="Это из третьей кнопки" tabindex="0"&gt;И меня!&lt;/div&gt;</pre>
+Однако, опять же, люди иногда делают странные вещи с HTML. Например, иногда вы видите кнопки, размеченные с помощью элемента {{htmlelement("div")}}:
 
-<p>Атрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений <code>tabindex</code>:</p>
+```html example-bad
+<div data-message="Это из первой кнопки">Нажми меня!</div>
+<div data-message="Это из второй кнопки">Меня тоже нажми!</div>
+<div data-message="Это из третьей кнопки">И меня!</div>
+```
 
-<ul>
- <li><code>tabindex="0"</code> — как указано выше, это значение позволяет элементу быть выделенным и достигнутым с помощью последовательной навигации. Это самое полезное значение <code>tabindex</code>.</li>
- <li><code>tabindex="-1"</code> — позволяет элементам, которые обычно не принимают фокусное выделение, получать его программно, например, с помощью JavaScript, или как цель якорной ссылки.</li>
-</ul>
+Такой код не советуется использовать: вы сразу же теряете нативную доступность с клавиатуры, которая у вас была бы, если просто использовать элемент {{htmlelement("button")}}, к тому же {{htmlelement("div")}} по умолчанию не имеет кнопочных стилей.
 
-<p>Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью <kbd>Tab</kbd>, оно не позволяет нам активировать их кнопкой <kbd>Enter</kbd>. Для этого нам необходимо добавить хитрый кусочек JavaScript:</p>
+#### Добавление доступности с клавиатуры
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">document.onkeydown = function(e) {
+Для добавления доступности с клавиатуры несоответствующим элементам придётся немного поработать (вы можете посмотреть пример, открыв [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), а также [исходный код](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html)). Мы дали нашим поддельным `<div>`-кнопкам возможность фокусироваться (в том числе через <kbd>Tab</kbd>), указав атрибут `tabindex="0"`:
+
+```html
+<div data-message="Это из первой кнопки" tabindex="0">Кликни меня!</div>
+<div data-message="Это из второй кнопки" tabindex="0">Меня тоже кликни!</div>
+<div data-message="Это из третьей кнопки" tabindex="0">И меня!</div>
+```
+
+Атрибут {{htmlattrxref("tabindex")}} в первую очередь предназначен для того, чтобы менять порядок фокусируемых элементов в последовательной навигации (указанный в виде положительного целого числа). Это почти всегда — плохая идея, которая может вызвать большую путаницу. Используйте его, если он правда необходим, например, если визуальный порядок сильно отличается от исходного, и вы хотите более логичную последовательную навигацию. Есть два варианта значений `tabindex`:
+
+- `tabindex="0"` — как указано выше, это значение позволяет элементу быть выделенным и достигнутым с помощью последовательной навигации. Это самое полезное значение `tabindex`.
+- `tabindex="-1"` — позволяет элементам, которые обычно не принимают фокусное выделение, получать его программно, например, с помощью JavaScript, или как цель якорной ссылки.
+
+Хотя дополнение, которые мы сделали, позволяет нам перемещаться по кнопкам с помощью <kbd>Tab</kbd>, оно не позволяет нам активировать их кнопкой <kbd>Enter</kbd>. Для этого нам необходимо добавить хитрый кусочек JavaScript:
+
+```js
+document.onkeydown = function(e) {
   if(e.keyCode === 13) { // Кнопка Enter
     document.activeElement.click();
   }
-};</code></pre>
+};
+```
+
+Мы навешиваем обработчик событий на `document` для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события [`keyCode`](/ru/docs/Web/API/KeyboardEvent/keyCode), проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши <kbd>Enter</kbd>, мы выполняем функцию, которая хранится в обработчике кнопки `onclick`, используя `document.activeElement.click().` [`activeElement`](/ru/docs/Web/API/Document/activeElement) возвращает текущий сфокусированный элемент.
+
+Слишком много дополнительной мороки с добавлением такой функциональности. И обязательно будут ещё проблемы. **Лучше просто сразу использовать правильные элементы по назначению.**
+
+#### Содержательные текстовые метки
 
-<p>Мы навешиваем обработчик событий на <code>document</code> для обнаружения нажатий с клавиатуры. Далее, через свойство объекта события <code><a href="/ru/docs/Web/API/KeyboardEvent/keyCode">keyCode</a></code>, проверяем, какая кнопка была нажата. Если код клавиши совпадает с кодом клавиши <kbd>Enter</kbd>, мы выполняем функцию, которая хранится в обработчике кнопки <code>onclick</code>, используя <code>document.activeElement.click().</code> <code><a href="/ru/docs/Web/API/Document/activeElement">activeElement</a></code> возвращает текущий сфокусированный элемент.</p>
+Текстовые метки (описания) для элементов интерфейса полезны всем пользователям, но их правильное описание — особенно важно для пользователей с ограниченными способностями.
 
-<p>Слишком много дополнительной мороки с добавлением такой функциональности. И обязательно будут ещё проблемы. <strong>Лучше просто сразу использовать правильные элементы по назначению.</strong></p>
+Вы должны следить за тем, чтобы кнопки и ссылки имели понятные и уникальные текстовые описания. Не используйте фразу «Кликните здесь», потому что пользователи скринридеров иногда вызывают список кнопок и элементов форм. В примере ниже можно увидеть такой список, вызванный из VoiceOver на Mac.
 
-<h4 id="Содержательные_текстовые_метки">Содержательные текстовые метки</h4>
+![](https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png)
 
-<p>Текстовые метки (описания) для элементов интерфейса полезны всем пользователям, но их правильное описание — особенно важно для пользователей с ограниченными способностями.</p>
+Удостоверьтесь, что описания вне контекста имеют смысл, так же как и в контексте параграфа, в котором они содержаться. Например, вот хороший текст для ссылки:
 
-<p>Вы должны следить за тем, чтобы кнопки и ссылки имели понятные и уникальные текстовые описания. Не используйте фразу «Кликните здесь», потому что пользователи скринридеров иногда вызывают список кнопок и элементов форм. В примере ниже можно увидеть такой список, вызванный из VoiceOver на Mac.</p>
+```html example-good
+<p>Киты очень классные существа. <a href="whales.html">Узнай больше о китах</a>.</p>
+```
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14335/voiceover-formcontrols.png" style="display: block; height: 604px; margin: 0px auto; width: 802px;"></p>
+а это плохой текст для ссылки:
 
-<p>Удостоверьтесь, что описания вне контекста имеют смысл, так же как и в контексте параграфа, в котором они содержаться. Например, вот хороший текст для ссылки:</p>
+```html example-bad
+<p>Киты очень классные существа. Чтобы узнать больше о китах, <a href="whales.html">нажмите здесь</a>.</p>
+```
 
-<pre class="brush: html example-good">&lt;p&gt;Киты очень классные существа. &lt;a href="whales.html"&gt;Узнай больше о китах&lt;/a&gt;.&lt;/p&gt;</pre>
+> **Примечание:**Более подробно о создании ссылок и лучших практиках можно почитать в статье «[Создание ссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)». Также посмотреть на примеры хороших и плохих ссылок можно на [good-links.html](http://mdn.github.io/learning-area/accessibility/html/good-links.html) и [bad-links.html](http://mdn.github.io/learning-area/accessibility/html/bad-links.html).
 
-<p>а это плохой текст для ссылки:</p>
+Описания форм также важны для понимания, что нужно вводить в каждое текстовое поле. Следующий пример кажется достаточно разумным:
 
-<pre class="brush: html example-bad">&lt;p&gt;Киты очень классные существа. Чтобы узнать больше о китах, &lt;a href="whales.html"&gt;нажмите здесь&lt;/a&gt;.&lt;/p&gt;</pre>
+```html example-bad
+Укажите ваше имя: <input type="text" id="name" name="name">
+```
 
-<div class="note">
-<p><strong>Примечание: </strong>Более подробно о создании ссылок и лучших практиках можно почитать в статье «<a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Создание ссылок</a>». Также посмотреть на примеры хороших и плохих ссылок можно на <a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/html/good-links.html">good-links.html</a> и <a class="external external-icon" href="http://mdn.github.io/learning-area/accessibility/html/bad-links.html">bad-links.html</a>. </p>
+Однако, это не совсем удобно для пользователей с ограниченными возможностями. В примере нет ничего, что могло бы однозначно связать описание текстового поля с самим текстовым полем, и чётко указать, как его заполнить, если вы не можете видеть. Если бы вы воспользовались скринридером, скорее всего он озвучил описание примерно как «редактировать текст».
+
+Следующий пример намного лучше:
+
+```html example-good
+<div>
+  <label for="name">Укажите ваше имя:</label>
+  <input type="text" id="name" name="name">
 </div>
+```
 
-<p>Описания форм также важны для понимания, что нужно вводить в каждое текстовое поле. Следующий пример кажется достаточно разумным:</p>
+С такой разметкой описание будет явно связано с текстовым полем, и будет звучать как «Укажите ваше имя: редактировать текст».
 
-<pre class="brush: html example-bad">Укажите ваше имя: &lt;input type="text" id="name" name="name"&gt;</pre>
+![](https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png)
 
-<p>Однако, это не совсем удобно для пользователей с ограниченными возможностями. В примере нет ничего, что могло бы однозначно связать описание текстового поля с самим текстовым полем, и чётко указать, как его заполнить, если вы не можете видеть. Если бы вы воспользовались скринридером, скорее всего он озвучил описание примерно как «редактировать текст».</p>
+Как бонус, в большинстве браузеров привязка описания к полю ввода означает, что вы можете щёлкнуть по описанию, чтобы выбрать/активировать элемент формы. Это облегчает нажатие на элемент формы из-за увеличенной зоны нажатия.
 
-<p>Следующий пример намного лучше:</p>
+> **Примечание:** Посмотреть на хорошие и плохие пример форм можно на [good-form.html](http://mdn.github.io/learning-area/accessibility/html/good-form.html) и [bad-form.html](http://mdn.github.io/learning-area/accessibility/html/bad-form.html).
 
-<pre class="brush: html example-good">&lt;div&gt;
-  &lt;label for="name"&gt;Укажите ваше имя:&lt;/label&gt;
-  &lt;input type="text" id="name" name="name"&gt;
-&lt;/div&gt;</pre>
+## Доступные таблицы
 
-<p>С такой разметкой описание будет явно связано с текстовым полем, и будет звучать как «Укажите ваше имя: редактировать текст».</p>
+Обычные таблицы с данными можно сверстать очень простой разметкой, например:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14337/voiceover-good-form-label.png" style="display: block; margin: 0 auto;"></p>
+```html
+<table>
+  <tr>
+    <td>Имя</td>
+    <td>Возраст</td>
+    <td>Пол</td>
+  </tr>
+  <tr>
+    <td>Гавриил</td>
+    <td>13</td>
+    <td>Мужской</td>
+  </tr>
+  <tr>
+    <td>Эвелина</td>
+    <td>8</td>
+    <td>Женский</td>
+  </tr>
+  <tr>
+    <td>Фрида</td>
+    <td>5</td>
+    <td>Женский</td>
+  </tr>
+</table>
+```
 
-<p>Как бонус, в большинстве браузеров привязка описания к полю ввода означает, что вы можете щёлкнуть по описанию, чтобы выбрать/активировать элемент формы. Это облегчает нажатие на элемент формы из-за увеличенной зоны нажатия.</p>
+Но есть проблемы — пользователи скринридера никак не смогут связать вместе строки или столбцы в группу данных. Чтобы это сделать, нужно знать какие из строк являются заголовками, и озаглавливают ли они строки, столбцы и т.д. Для таблицы выше это можно определить только визуально (попробуйте сами на примере, открыв [bad-table.html](http://mdn.github.io/learning-area/accessibility/html/bad-table.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Посмотреть на хорошие и плохие пример форм можно на <a href="http://mdn.github.io/learning-area/accessibility/html/good-form.html">good-form.html</a> и <a href="http://mdn.github.io/learning-area/accessibility/html/bad-form.html">bad-form.html</a>.</p>
-</div>
+Теперь посмотрим на [пример таблицы с панк-группами](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html), где можно увидеть несколько вспомогательных средств:
 
-<h2 id="Доступные_таблицы">Доступные таблицы</h2>
-
-<p>Обычные таблицы с данными можно сверстать очень простой разметкой, например:</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Имя&lt;/td&gt;
-    &lt;td&gt;Возраст&lt;/td&gt;
-    &lt;td&gt;Пол&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Гавриил&lt;/td&gt;
-    &lt;td&gt;13&lt;/td&gt;
-    &lt;td&gt;Мужской&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Эвелина&lt;/td&gt;
-    &lt;td&gt;8&lt;/td&gt;
-    &lt;td&gt;Женский&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Фрида&lt;/td&gt;
-    &lt;td&gt;5&lt;/td&gt;
-    &lt;td&gt;Женский&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Но есть проблемы — пользователи скринридера никак не смогут связать вместе строки или столбцы в группу данных. Чтобы это сделать, нужно знать какие из строк являются заголовками, и озаглавливают ли они строки, столбцы и т.д. Для таблицы выше это можно определить только визуально (попробуйте сами на примере, открыв <a href="http://mdn.github.io/learning-area/accessibility/html/bad-table.html">bad-table.html</a>).</p>
-
-<p>Теперь посмотрим на <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-complete.html">пример таблицы с панк-группами</a>, где можно увидеть несколько вспомогательных средств:</p>
-
-<ul>
- <li>Заголовки таблиц определены, используя элементы {{htmlelement("th")}}; можно также указать являются ли они заголовками для строк или столбцов с помощью атрибута <code>scope</code>. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.</li>
- <li>Элемент {{htmlelement("caption")}} и атрибут <code>summary</code> у элемента {{htmlelement("table")}} выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент <code>&lt;caption&gt;</code> обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.</li>
-</ul>
-
-<div class="note">
-<p><strong>Примечание</strong>: Более подробную информацию о доступных таблицах можно узнать в статье <a href="/ru/docs//ru/docs/Learn/HTML/Tables/Advanced">HTML-таблицы: продвинутые возможности и доступность</a>.</p>
-</div>
+- Заголовки таблиц определены, используя элементы {{htmlelement("th")}}; можно также указать являются ли они заголовками для строк или столбцов с помощью атрибута `scope`. Это даёт нам полные группы данных, которые скринридер обработает как отдельные блоки.
+- Элемент {{htmlelement("caption")}} и атрибут `summary` у элемента {{htmlelement("table")}} выполняют похожую работу — они выступают в качестве альтернативного текста для таблицы, предоставляя пользователям скринридера краткое содержание. Элемент `<caption>` обычно предпочтительнее, так как контент становится доступнее и для зрячих пользователей, которые могут посчитать это полезным. На самом деле необязательно ни то, ни другое.
 
-<h2 id="Альтернативный_текст">Альтернативный текст</h2>
+> **Примечание:** Более подробную информацию о доступных таблицах можно узнать в статье [HTML-таблицы: продвинутые возможности и доступность](/ru/docs//ru/docs/Learn/HTML/Tables/Advanced).
 
-<p>В то время как текстовый контент доступен по умолчанию, этого нельзя сказать о мультимедийном контенте — изображения/видео-контент не может быть просмотрен людьми с нарушениями зрения, а аудио контент не может быть услышан людьми с нарушениями слуха. Мы подробно рассмотрим видео и аудио контент в статье о доступности мультимедиа позже, но в этой статье мы рассмотрим доступность для простого элемента {{htmlelement("img")}}.</p>
+## Альтернативный текст
 
-<p>У нас есть простой пример, <a href="http://mdn.github.io/learning-area/accessibility/html/accessible-image.html">accessible-image.html</a>, который содержит четыре копии одного и того же изображения:</p>
+В то время как текстовый контент доступен по умолчанию, этого нельзя сказать о мультимедийном контенте — изображения/видео-контент не может быть просмотрен людьми с нарушениями зрения, а аудио контент не может быть услышан людьми с нарушениями слуха. Мы подробно рассмотрим видео и аудио контент в статье о доступности мультимедиа позже, но в этой статье мы рассмотрим доступность для простого элемента {{htmlelement("img")}}.
 
-<pre>&lt;img src="dinosaur.png"&gt;
+У нас есть простой пример, [accessible-image.html](http://mdn.github.io/learning-area/accessibility/html/accessible-image.html), который содержит четыре копии одного и того же изображения:
 
-&lt;img src="dinosaur.png"
-     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов."&gt;
+```
+<img src="dinosaur.png">
 
-&lt;img src="dinosaur.png"
+<img src="dinosaur.png"
+     alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.">
+
+<img src="dinosaur.png"
      alt="Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов."
-     title="Красный динозавр Mozilla"&gt;
+     title="Красный динозавр Mozilla">
 
 
-&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+<img src="dinosaur.png" aria-labelledby="dino-label">
 
-&lt;p id="dino-label"&gt;Красный тираннозавр Рекс Mozilla: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.&lt;/p&gt;
-</pre>
+<p id="dino-label">Красный тираннозавр Рекс Mozilla: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.</p>
+```
 
-<p>Первое изображение, когда оно просматривается программой чтения с экрана, не очень помогает пользователю — например, VoiceOver озвучивает его как «/dinosaur.png, image». Он озвучивает имя файла, чтобы попытаться помочь. В этом примере пользователь, по крайней мере, будет знать, что это какой-то динозавр, но часто файлы могут загружаться с программно-генерируемыми именами (например, с цифровой камеры), и эти имена файлов, скорее всего, не обеспечат контекста для содержимого изображения.</p>
+Первое изображение, когда оно просматривается программой чтения с экрана, не очень помогает пользователю — например, VoiceOver озвучивает его как «/dinosaur.png, image». Он озвучивает имя файла, чтобы попытаться помочь. В этом примере пользователь, по крайней мере, будет знать, что это какой-то динозавр, но часто файлы могут загружаться с программно-генерируемыми именами (например, с цифровой камеры), и эти имена файлов, скорее всего, не обеспечат контекста для содержимого изображения.
 
-<div class="note">
-<p><strong>Примечание</strong>: Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!</p>
-</div>
+> **Примечание:** Вот почему вы никогда не должны включать текстовое содержимое в изображение — скринридеры просто не могут получить к нему доступ.Есть и другие недостатки — вы не можете выбрать его и скопировать/вставить. Просто не делайте этого!
 
-<p>Когда скринридер встретит второе изображение, он озвучит атрибут <code>alt</code> полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».</p>
+Когда скринридер встретит второе изображение, он озвучит атрибут `alt` полностью: «Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов».
 
-<p>Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, <strong>альтернативного текста</strong>, но также важность предоставления альтернативного текста в атрибуте <code>alt</code>, где это возможно. Заметьте, что содержание атрибута <code>alt</code> должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.</p>
+Это подчёркивает важность не только использования содержательных файловых имён в случаях отсутствия, так называемого, **альтернативного текста**, но также важность предоставления альтернативного текста в атрибуте `alt`, где это возможно. Заметьте, что содержание атрибута `alt` должно всегда предоставлять прямое представление изображения и то, что оно визуально передаёт. Любые личные знания или дополнительное описание не должны быть включены, так как это не принесёт пользы людям, которые не видели изображение ранее.
 
-<p>Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута <code>alt</code> пустым (смотрите «<a href="#Пустые_атрибуты_alt">Пустые атрибуты alt</a>») или просто вставить их как фон с помощью CSS.</p>
+Также стоит учитывать, имеют ли изображения значение внутри вашего контента, или они исключительно для украшения без смысла. Если они декоративные, лучше оставить значение атрибута `alt` пустым (смотрите «[Пустые атрибуты alt](#Пустые_атрибуты_alt)») или просто вставить их как фон с помощью CSS.
 
-<div class="note">
-<p><strong>Примечание</strong>: Для более подробной информации об изображениях и лучших практиках читайте «<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML»</a> и «<a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a>».</p>
-</div>
+> **Примечание:** Для более подробной информации об изображениях и лучших практиках читайте «[Изображения в HTML»](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML) и «[Адаптивные изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)».
 
-<p>Если вы всё же хотите предоставить дополнительную контекстуальную информацию, поместите её в тексте рядом с изображением или внутри атрибута <code>title</code>, как показано ниже. В этом случае большинство скринридеров озвучат альтернативный текст, атрибут <code>title</code> и имя файла. Дополнительно, при наведении мышкой браузеры отобразят текст из атрибута <code>title</code> как всплывающую подсказку.</p>
+Если вы всё же хотите предоставить дополнительную контекстуальную информацию, поместите её в тексте рядом с изображением или внутри атрибута `title`, как показано ниже. В этом случае большинство скринридеров озвучат альтернативный текст, атрибут `title` и имя файла. Дополнительно, при наведении мышкой браузеры отобразят текст из атрибута `title` как всплывающую подсказку.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14333/title-attribute.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/14333/title-attribute.png)
 
-<p>Давайте взглянем на четвёртый способ:</p>
+Давайте взглянем на четвёртый способ:
 
-<pre class="brush: html">&lt;img src="dinosaur.png" aria-labelledby="dino-label"&gt;
+```html
+<img src="dinosaur.png" aria-labelledby="dino-label">
 
-&lt;p id="dino-label"&gt;Красный тираннозавр Mozilla ... &lt;/p&gt;</pre>
+<p id="dino-label">Красный тираннозавр Mozilla ... </p>
+```
 
-<p>В этом случае мы вообще не используем атрибут <code>alt</code>. Вместо этого мы представили наше описание изображения как обычный параграф, указали <code>id</code>, и потом использовали атрибут <code>aria-labelledby</code>, сославшись на тот <code>id</code>. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута <code>alt</code>.</p>
+В этом случае мы вообще не используем атрибут `alt`. Вместо этого мы представили наше описание изображения как обычный параграф, указали `id`, и потом использовали атрибут `aria-labelledby`, сославшись на тот `id`. Это вынуждает скринридеры использовать параграф как альтернативный текст/описание изображения. Это особенно удобно, если вы хотите использовать один текст как описание для нескольких изображений, что невозможно с помощью атрибута `alt`.
 
-<div class="note">
-<p><strong>Примечание</strong>: <code>aria-labelledby</code> — часть спецификации <a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a>, которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">«Основы WAI-ARIA».</a></p>
-</div>
+> **Примечание:** `aria-labelledby` — часть спецификации [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/), которая позволяет разработчиками добавлять, где требуется, дополнительную семантику разметке для улучшения доступности при использовании скринридеров. Чтобы узнать больше о том, как это работает, читайте статью [«Основы WAI-ARIA».](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
 
-<h3 id="Другие_механизмы_альтернативного_текста">Другие механизмы альтернативного текста</h3>
+### Другие механизмы альтернативного текста
 
-<p>У изображений есть ещё один механизм для предоставления описательного текста. Например, есть атрибут <code>longdesc</code>, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:</p>
+У изображений есть ещё один механизм для предоставления описательного текста. Например, есть атрибут `longdesc`, который предназначен для указания отдельной веб-страницы, содержащей расширенное описание изображения:
 
-<pre class="brush: html">&lt;img src="dinosaur.png" longdesc="dino-info.html"&gt;</pre>
+```html
+<img src="dinosaur.png" longdesc="dino-info.html">
+```
 
-<p>Звучит, как хорошая идея, особенно для такой инфографики как диаграммы с большим количеством информации, которую, в качестве альтернативы, можно представить в виде доступной таблицы с данными (смотрите предыдущий раздел). Однако, <code>longdesc</code> нестабильно поддерживается скринридерами, и контент полностью недоступен пользователям, которые не используют скринридеры. Пожалуй, намного лучше будет вставить длинное описание на страницу вместе с изображением, или указать обычную ссылку.</p>
+Звучит, как хорошая идея, особенно для такой инфографики как диаграммы с большим количеством информации, которую, в качестве альтернативы, можно представить в виде доступной таблицы с данными (смотрите предыдущий раздел). Однако, `longdesc` нестабильно поддерживается скринридерами, и контент полностью недоступен пользователям, которые не используют скринридеры. Пожалуй, намного лучше будет вставить длинное описание на страницу вместе с изображением, или указать обычную ссылку.
 
-<p>HTML5 содержит два новых элемента — {{htmlelement("figure")}} и {{htmlelement("figcaption")}}, которые, как предполагается, должны связывать какую-любо фигуру (всё что угодно, необязательно изображение) с заголовком фигуры:</p>
+HTML5 содержит два новых элемента — {{htmlelement("figure")}} и {{htmlelement("figcaption")}}, которые, как предполагается, должны связывать какую-любо фигуру (всё что угодно, необязательно изображение) с заголовком фигуры:
 
-<pre class="brush: html">&lt;figure&gt;
-  &lt;img src="dinosaur.png" alt="Тираннозавр организации Mozilla"&gt;
-  &lt;figcaption&gt;Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+```html
+<figure>
+  <img src="dinosaur.png" alt="Тираннозавр организации Mozilla">
+  <figcaption>Красный тираннозавр Рекс: стоящий как человек двуногий динозавр, с маленькими передними лапами и большой головой с большим количеством острых зубов.</figcaption>
+</figure>
+```
 
-<p>К сожалению, большинство скринридеров, кажется, пока ещё не умеют связывать заголовки фигур с  самими фигурами, но такая структура элементов удобна для CSS стилизации, к тому же, она предоставляет способ расположить описание рядом с изображением в исходнике.</p>
+К сожалению, большинство скринридеров, кажется, пока ещё не умеют связывать заголовки фигур с самими фигурами, но такая структура элементов удобна для CSS стилизации, к тому же, она предоставляет способ расположить описание рядом с изображением в исходнике.
 
-<h3 id="Пустые_атрибуты_alt">Пустые атрибуты alt</h3>
+### Пустые атрибуты alt
 
-<pre class="brush: html">&lt;h3&gt;
-  &lt;img src="article-icon.png" alt=""&gt;
+```html
+<h3>
+  <img src="article-icon.png" alt="">
   Тираннозавр Рекс: король динозавров
-&lt;/h3&gt;</pre>
+</h3>
+```
 
-<p>Бывает, что  в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой атрибут <code>alt</code> — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).</p>
-
-<p>Причина, по которой стоит использовать пустой атрибут <code>alt</code>, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан <code>alt</code>. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут <code>alt</code>. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: По возможности для отображения декоративных изображений вы должны использовать CSS.</p>
-</div>
+Бывает, что в дизайне страницы присутствуют изображения, но они исполняют декоративную роль. В примере выше вы можете заметить, что у изображения пустой атрибут `alt` — это сделано, чтобы скринридер опознал изображение, но не стал озвучивать её описание (вместо этого, он бы озвучил её как «изображение», или аналогично).
 
-<h2 id="Заключение">Заключение</h2>
+Причина, по которой стоит использовать пустой атрибут `alt`, вместо того, чтобы просто его не указывать в том, что большинство скринридеров объявят весь URL-адрес изображения, если не указан `alt`. В пример выше изображение используется как украшение для связанного с ним заголовка. В таких случаях и случаях, когда изображение является украшением и не имеет ценное содержание, вы должны использовать пустой атрибут `alt`. Другой вариант — использовать aria роль role="presentation". Это также предотвратит озвучивание скринридером альтернативного текста.
 
-<p>Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность. </p>
+> **Примечание:** По возможности для отображения декоративных изображений вы должны использовать CSS.
 
-<p>{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}</p>
+## Заключение
 
+Теперь вы должны хорошо разбираться в написании доступного HTML для большинства случаев. Наша статья про основы WAI-ARIA также заполнит пробелы в знаниях, но эта статья посвящена основам. Далее мы рассмотрим CSS и JavaScript, и как хорошо или плохое их использование влияет на доступность.
 
+{{PreviousMenuNext("Learn/Accessibility/What_is_Accessibility","Learn/Accessibility/CSS_and_JavaScript", "Learn/Accessibility")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/index.md b/files/ru/learn/accessibility/index.md
index 1d0180af4d1a00..c5fa62e1e962c4 100644
--- a/files/ru/learn/accessibility/index.md
+++ b/files/ru/learn/accessibility/index.md
@@ -10,47 +10,39 @@ tags:
 translation_of: Learn/Accessibility
 original_slug: Learn/Доступность
 ---
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Изучение HTML, CSS, и JavaScript полезно, если вы хотите стать веб-разработчиком, но ваши знания должны быть глубже обычного использования технологий — вы должны быть ответственны и максимизировать доступность ваших веб-приложений, не лишая никого возможности их использования. Чтобы достигнуть этого, вы можете следовать общепринятым лучшим практикам (которые демонстрируются в статьях посвящённых <a href="/ru-RU/docs/Learn/HTML">HTML</a>, <a href="/ru-RU/docs/Learn/CSS">CSS</a> и <a href="/ru-RU/docs/Learn/JavaScript">JavaScript</a>), проводить <a href="/ru-RU/docs/Learn/Tools_and_testing/Cross_browser_testing">кросс-браузерное тестирование</a> и обращать внимание на доступность с самого начала. В этом модуле мы рассмотрим эту тему в деталях.</p>
-
-<h2 id="Прежде_чем_начать">Прежде чем начать</h2>
-
-<p>Чтобы разобраться с большей частью материалов этого модуля, хорошей идеей будет проходить одновременно один или несколько из модулей других тем (<a href="/ru-RU/docs/Learn/HTML">HTML</a>, <a href="/ru-RU/docs/Learn/CSS">CSS</a> или <a href="/ru-RU/docs/Learn/JavaScript">JavaScript</a>), или, что ещё лучше, пройти соответствующие части данного модуля во время изучения этих технологий.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать большую часть примеров кода в онлайн программах, таких как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Справочники">Справочники</h2>
-
-<dl>
- <dt><a href="/ru/docs/Learn/Accessibility/What_is_accessibility">Что такое доступность?</a></dt>
- <dd>Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.</dd>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></dt>
- <dd>Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.</dd>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/CSS_and_JavaScript">Лучшие практики CSS и JavaScript для обеспечения доступности</a></dt>
- <dd>CSS и JavaScript, при правильном использовании, также имеют потенциал для обеспечения доступности, но при неправильном использовании они могут существенно ухудшить доступность. Эта статья раскрывает некоторые из лучших практик CSS и JavaScript которые должны помочь сделать даже очень сложное содержимое как можно более доступным.</dd>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></dt>
- <dd><em>Web Accessibility Initiative - Accessible Rich Internet Applications </em>— это технологический стандарт для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями.<br>
- Исходя из предыдущей статьи, иногда создание сложных элементов управления пользовательским интерфейсом, которые включают в себя не семантический HTML и динамический контент, обновляемый с помощью JavaScript, может быть затруднено. WAI-ARIA — это технология, которая может помочь в решении таких проблем, добавляя дополнительную семантику, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. Здесь мы покажем, как использовать его на базовом уровне для улучшения доступности.</dd>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/Multimedia">Доступный мультимедиа контент</a></dt>
- <dd>Другая категория контента, которая может создавать проблемы с доступностью, это мультимедиа — видео, аудио и изображения, которые должны быть предоставлены с надлежащей текстовой альтернативой, чтобы их могли понять с помощью вспомогательных технологий и их пользователи. В этой статье показано, как это можно сделать.</dd>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/Mobile">Доступность на мобильных устройствах</a></dt>
- <dd>Поскольку веб-доступ на мобильных устройствах является настолько популярным, и на популярных платформах, таких как iOS и Android, есть полноценные средства обеспечения доступности, важно учитывать доступность вашего веб-контента для этих платформ. В этой статье рассматриваются соображения доступности для мобильных устройств.</dd>
-</dl>
-
-<h2 id="Проверка_знаний">Проверка знаний</h2>
-
-<dl>
- <dt><a href="/ru-RU/docs/Learn/Accessibility/Accessibility_troubleshooting">Найди недочёты в доступности</a></dt>
- <dd>В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить.</dd>
-</dl>
-
-<h2 id="Также_советуем_посмотреть">Также советуем посмотреть</h2>
-
-<ul>
- <li><a href="https://egghead.io/courses/start-building-accessible-web-applications-today">Начать создание доступных веб-приложений сегодня</a> — отличная серия видеоуроков Марси Саттона.</li>
- <li><a href="https://dequeuniversity.com/resources/">Ресурсы университета Deque</a> — включает примеры кода, ссылки для чтения с экрана и другие полезные ресурсы.</li>
- <li><a href="http://webaim.org/resources/">Ресурсы WebAIM</a> — включает руководства, контрольные списки, инструменты и многое другое.</li>
-</ul>
+{{LearnSidebar}}
+
+Изучение HTML, CSS, и JavaScript полезно, если вы хотите стать веб-разработчиком, но ваши знания должны быть глубже обычного использования технологий — вы должны быть ответственны и максимизировать доступность ваших веб-приложений, не лишая никого возможности их использования. Чтобы достигнуть этого, вы можете следовать общепринятым лучшим практикам (которые демонстрируются в статьях посвящённых [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS) и [JavaScript](/ru/docs/Learn/JavaScript)), проводить [кросс-браузерное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) и обращать внимание на доступность с самого начала. В этом модуле мы рассмотрим эту тему в деталях.
+
+## Прежде чем начать
+
+Чтобы разобраться с большей частью материалов этого модуля, хорошей идеей будет проходить одновременно один или несколько из модулей других тем ([HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS) или [JavaScript](/ru/docs/Learn/JavaScript)), или, что ещё лучше, пройти соответствующие части данного модуля во время изучения этих технологий.
+
+> **Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать большую часть примеров кода в онлайн программах, таких как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
+
+## Справочники
+
+- [Что такое доступность?](/ru/docs/Learn/Accessibility/What_is_accessibility)
+  - : Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+  - : Большая часть содержимого интернета может быть сделана доступной просто благодаря использованию HTML-элементов по назначению. В этой статье подробно рассмотрено как HTML может быть использован для обеспечения максимальной доступности.
+- [Лучшие практики CSS и JavaScript для обеспечения доступности](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+  - : CSS и JavaScript, при правильном использовании, также имеют потенциал для обеспечения доступности, но при неправильном использовании они могут существенно ухудшить доступность. Эта статья раскрывает некоторые из лучших практик CSS и JavaScript которые должны помочь сделать даже очень сложное содержимое как можно более доступным.
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+  - : _Web Accessibility Initiative - Accessible Rich Internet Applications_ — это технологический стандарт для предоставления возможности полноценного использования Интернета людьми с физическими ограничениями.
+    Исходя из предыдущей статьи, иногда создание сложных элементов управления пользовательским интерфейсом, которые включают в себя не семантический HTML и динамический контент, обновляемый с помощью JavaScript, может быть затруднено. WAI-ARIA — это технология, которая может помочь в решении таких проблем, добавляя дополнительную семантику, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. Здесь мы покажем, как использовать его на базовом уровне для улучшения доступности.
+- [Доступный мультимедиа контент](/ru/docs/Learn/Accessibility/Multimedia)
+  - : Другая категория контента, которая может создавать проблемы с доступностью, это мультимедиа — видео, аудио и изображения, которые должны быть предоставлены с надлежащей текстовой альтернативой, чтобы их могли понять с помощью вспомогательных технологий и их пользователи. В этой статье показано, как это можно сделать.
+- [Доступность на мобильных устройствах](/ru/docs/Learn/Accessibility/Mobile)
+  - : Поскольку веб-доступ на мобильных устройствах является настолько популярным, и на популярных платформах, таких как iOS и Android, есть полноценные средства обеспечения доступности, важно учитывать доступность вашего веб-контента для этих платформ. В этой статье рассматриваются соображения доступности для мобильных устройств.
+
+## Проверка знаний
+
+- [Найди недочёты в доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
+  - : В этом блоке представлен достаточно простой сайт, в котором, однако, есть множество недочётов в доступности. Необходимо найти их и починить.
+
+## Также советуем посмотреть
+
+- [Начать создание доступных веб-приложений сегодня](https://egghead.io/courses/start-building-accessible-web-applications-today) — отличная серия видеоуроков Марси Саттона.
+- [Ресурсы университета Deque](https://dequeuniversity.com/resources/) — включает примеры кода, ссылки для чтения с экрана и другие полезные ресурсы.
+- [Ресурсы WebAIM](http://webaim.org/resources/) — включает руководства, контрольные списки, инструменты и многое другое.
diff --git a/files/ru/learn/accessibility/mobile/index.md b/files/ru/learn/accessibility/mobile/index.md
index 856f00d85bc75d..d4d0cd6c465fde 100644
--- a/files/ru/learn/accessibility/mobile/index.md
+++ b/files/ru/learn/accessibility/mobile/index.md
@@ -6,300 +6,262 @@ tags:
 translation_of: Learn/Accessibility/Mobile
 original_slug: Learn/Доступность/Mobile
 ---
-<div>
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
 
-<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.
 
-<p class="summary">With web access on mobile devices being so popular, and popular platforms such as iOS and Android having fully fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.</p>
+| Prerequisites: | Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and an understanding of the [previous articles in the course](/ru/docs/Learn/Accessibility). |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Objective:     | To understand what problems exist with accessibility on mobile devices, and how to overcome them.                                                                         |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, and an understanding of the <a href="/en-US/docs/Learn/Accessibility">previous articles in the course</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand what problems exist with accessibility on mobile devices, and how to overcome them.</td>
-  </tr>
- </tbody>
-</table>
+## Accessibility on mobile devices
 
-<h2 id="Accessibility_on_mobile_devices">Accessibility on mobile devices</h2>
+The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).
 
-<p>The state of accessibility — and support for web standards in general — is good in modern mobile devices. Long gone are the days when mobile devices ran completely different web technologies to desktop browsers, forcing developers to use browser sniffing and serve them completely separate sites (although quite a few companies still detect usage of mobile devices and serve them a separate mobile domain).</p>
+These days, mobile devices in general can handle "full fat" websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for [WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics), too.
 
-<p>These days, mobile devices in general can handle "full fat" websites, and the main platforms even have screenreaders built in to enable visually impaired users to use them successfully. Modern mobile browsers tend to have good support for <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a>, too.</p>
+To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.
 
-<p>To make a website accessible and usable on mobile, you just need to follow general good web design and accessibility best practices.</p>
+There are some exceptions that need special consideration for mobile; the main ones are:
 
-<p>There are some exceptions that need special consideration for mobile; the main ones are:</p>
+- Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).
+- User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).
+- Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high-resolution screens.
 
-<ul>
- <li>Control mechanisms — Make sure interface controls such as buttons are accessible on mobiles (i.e., mainly touchscreen), as well as desktops/laptops (mainly mouse/keyboard).</li>
- <li>User input — Make user input requirements as painless as possible on mobile (e.g., in forms, keep typing to a minimum).</li>
- <li>Responsive design — Make sure layouts work on mobile, conserve image download sizes, and think about provision of images for high-resolution screens.</li>
-</ul>
+## Summary of screenreader testing on Android and iOS
 
-<h2 id="Summary_of_screenreader_testing_on_Android_and_iOS">Summary of screenreader testing on Android and iOS</h2>
+The most common mobile platforms have fully functional screenreaders. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.
 
-<p>The most common mobile platforms have fully functional screenreaders. These function in much the same way as desktop screenreaders, except they are largely operated using touch gestures rather than key combinations.</p>
+Let's look at the main two: TalkBack on Android and VoiceOver on iOS.
 
-<p>Let's look at the main two: TalkBack on Android and VoiceOver on iOS.</p>
+### Android TalkBack
 
-<h3 id="Android_TalkBack">Android TalkBack</h3>
+The TalkBack screenreader is built into the Android operating system.
 
-<p>The TalkBack screenreader is built into the Android operating system.</p>
+To turn it on, select _Settings > Accessibility > TalkBack_, and then press the slider switch to turn it on. Follow any additional on-screen prompts that you are presented with.
 
-<p>To turn it on, select <em>Settings &gt; Accessibility &gt; TalkBack</em>, and then press the slider switch to turn it on. Follow any additional on-screen prompts that you are presented with.</p>
+**Note:** Older versions of TalkBack are turned on in [slightly different ways](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback).
 
-<p><strong>Note:</strong> Older versions of TalkBack are turned on in <a href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">slightly different ways</a>.</p>
+When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:
 
-<p>When TalkBack is turned on, your Android device's basic controls will be a bit different. For example:</p>
+1.  Single-tapping an app will select it, and the device will read out what the app is.
+2.  Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.
+3.  Double-tapping anywhere will open the app/select the option.
+4.  You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.
 
-<ol>
- <li>Single-tapping an app will select it, and the device will read out what the app is.</li>
- <li>Swiping left and right will move between apps, or buttons/controls if you are in a control bar. The device will read out each option.</li>
- <li>Double-tapping anywhere will open the app/select the option.</li>
- <li>You can also "explore by touch" — hold your finger down on the screen and drag it around, and your device will read out the different apps/items you move across.</li>
-</ol>
+If you want to turn TalkBack off:
 
-<p>If you want to turn TalkBack off:</p>
+1.  Navigate to your _Settings_ app using the above gestures.
+2.  Navigate to _Accessibility > TalkBack_.
+3.  Navigate to the slider switch and activate it to turn it off.
 
-<ol>
- <li>Navigate to your <em>Settings</em> app using the above gestures.</li>
- <li>Navigate to <em>Accessibility &gt; TalkBack</em>.</li>
- <li>Navigate to the slider switch and activate it to turn it off.</li>
-</ol>
+**Note:** You can get to your homescreen at any time by swiping up and left in a smooth motion. If you have more than one homescreen, you can move between them by swiping two fingers left and right.
 
-<p><strong>Note:</strong> You can get to your homescreen at any time by swiping up and left in a smooth motion. If you have more than one homescreen, you can move between them by swiping two fingers left and right.</p>
+For a more complete list of TalkBack gestures, see [Use TalkBack gestures](https://support.google.com/accessibility/android/answer/6151827).
 
-<p>For a more complete list of TalkBack gestures, see <a href="https://support.google.com/accessibility/android/answer/6151827">Use TalkBack gestures</a>.</p>
+#### Unlocking the phone
 
-<h4 id="Unlocking_the_phone">Unlocking the phone</h4>
+When TalkBack is turned on, unlocking the phone is a bit different.
 
-<p>When TalkBack is turned on, unlocking the phone is a bit different.</p>
+You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.
 
-<p>You can do a two-finger swipe up from the bottom of the lock screen. If you've set a passcode or pattern for unlocking your device, you will then be taken to the relevant entry screen to enter it.</p>
+You can also explore by touch to find the _Unlock_ button at the bottom middle of the screen, and then double-tap.
 
-<p>You can also explore by touch to find the <em>Unlock</em> button at the bottom middle of the screen, and then double-tap.</p>
+#### Global and local menus
 
-<h4 id="Global_and_local_menus">Global and local menus</h4>
+TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.
 
-<p>TalkBack allows you to access global and local context menus, wherever you have navigated to on the device. The former provides global options relating to the device as a whole, and the latter provides options relating just to the current app/screen you are in.</p>
+To get to these menus:
 
-<p>To get to these menus:</p>
+1.  Access the global menu by quickly swiping down, and then right.
+2.  Access the local menu by quickly swiping up, and then right.
+3.  Swipe left and right to cycle between the different options.
+4.  Once you've selected the option you want, double-click to choose that option.
 
-<ol>
- <li>Access the global menu by quickly swiping down, and then right.</li>
- <li>Access the local menu by quickly swiping up, and then right.</li>
- <li>Swipe left and right to cycle between the different options.</li>
- <li>Once you've selected the option you want, double-click to choose that option.</li>
-</ol>
+For details on all the options available under the global and local context menus, see [Use global and local context menus](https://support.google.com/accessibility/android/answer/6007066).
 
-<p>For details on all the options available under the global and local context menus, see <a href="https://support.google.com/accessibility/android/answer/6007066">Use global and local context menus</a>.</p>
+#### Browsing web pages
 
-<h4 id="Browsing_web_pages">Browsing web pages</h4>
+You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.
 
-<p>You can use the local context menu while in a web browser to find options to navigate web pages using just the headings, form controls, or links, or navigate line by line, etc.</p>
+For example, with TalkBack turned on:
 
-<p>For example, with TalkBack turned on:</p>
+1.  Open your web browser.
+2.  Activate the URL bar.
+3.  Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
 
-<ol>
- <li>Open your web browser.</li>
- <li>Activate the URL bar.</li>
- <li>Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-  <ul>
-   <li>Select the URL bar by swiping left/right till you get to it, and then double-tapping.</li>
-   <li>Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.</li>
-   <li>Once you've finished, find the Enter key and press it.</li>
-  </ul>
- </li>
- <li>Swipe left and right to move between different items on the page.</li>
- <li>Swipe up and right with a smooth motion to enter the local content menu.</li>
- <li>Swipe right until you find the "Headings and Landmarks" option.</li>
- <li>Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.</li>
- <li>To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.</li>
-</ol>
+    - Select the URL bar by swiping left/right till you get to it, and then double-tapping.
+    - Hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to type it. Repeat for each character.
+    - Once you've finished, find the Enter key and press it.
 
-<p><strong>Note:</strong> See <a href="https://support.google.com/accessibility/android/answer/6283677?hl=en&amp;ref_topic=3529932">Get started on Android with TalkBack</a> for more complete documentation.</p>
+4.  Swipe left and right to move between different items on the page.
+5.  Swipe up and right with a smooth motion to enter the local content menu.
+6.  Swipe right until you find the "Headings and Landmarks" option.
+7.  Double-tap to select it. Now you'll be able to swipe left and right to move between headings and ARIA landmarks.
+8.  To go back to the default mode, enter the local context menu again by swiping up and right, select "Default", and then double-tap to activate.
 
-<h3 id="iOS_VoiceOver">iOS VoiceOver</h3>
+**Note:** See [Get started on Android with TalkBack](https://support.google.com/accessibility/android/answer/6283677?hl=en&ref_topic=3529932) for more complete documentation.
 
-<p>A mobile version of VoiceOver is built into the iOS operating system.</p>
+### iOS VoiceOver
 
-<p>To turn it on, go to Your <em>Settings</em> app and select <em>General &gt; Accessibility &gt; VoiceOver</em>. Press the <em>VoiceOver</em> slider to enable it (you'll also see a number of other options related to VoiceOver on this page).</p>
+A mobile version of VoiceOver is built into the iOS operating system.
 
-<p>Once VoiceOver is enabled, the iOS's basic control gestures will be a bit different:</p>
+To turn it on, go to Your _Settings_ app and select _General > Accessibility > VoiceOver_. Press the _VoiceOver_ slider to enable it (you'll also see a number of other options related to VoiceOver on this page).
 
-<ol>
- <li>A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.</li>
- <li>You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).</li>
- <li>To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.</li>
- <li>Swipe with three fingers to scroll through a page.</li>
- <li>Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.</li>
-</ol>
+Once VoiceOver is enabled, the iOS's basic control gestures will be a bit different:
 
-<p>To turn it off again, navigate back to <em>Settings &gt; General &gt; Accessibility &gt; VoiceOver</em> using the above gestures, and toggle the <em>VoiceOver</em> slider back to off.</p>
+1.  A single tap will cause the item you tap on to be selected; your device will speak the item you've tapped on.
+2.  You can also navigate the items on the screen by swiping left and right to move between them, or by sliding your finger around on the screen to move between different items (when you find the item you want, you can remove your finger to select it).
+3.  To activate the selected item (e.g., open a selected app), double-tap anywhere on the screen.
+4.  Swipe with three fingers to scroll through a page.
+5.  Tap with two fingers to perform a context-relevant action — for example, taking a photo while in the camera app.
 
-<h4 id="Unlock_phone">Unlock phone</h4>
+To turn it off again, navigate back to _Settings > General > Accessibility > VoiceOver_ using the above gestures, and toggle the _VoiceOver_ slider back to off.
 
-<p>To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.</p>
+#### Unlock phone
 
-<h4 id="Using_the_Rotor">Using the Rotor</h4>
+To unlock the phone, you need to press the home button (or swipe) as normal. If you have a passcode set, you can select each number by swiping/sliding (as explained above) and then double-tapping to enter each number when you've found the right one.
 
-<p>When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:</p>
+#### Using the Rotor
 
-<ol>
- <li>Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.</li>
- <li>Once you've found the option you want:
-  <ul>
-   <li>Release your fingers to select it.</li>
-   <li>If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.</li>
-  </ul>
- </li>
-</ol>
+When VoiceOver is turned on, you have a navigation feature called the Rotor available to you, which allows you to quickly choose from a number of common useful options. To use it:
 
-<p>The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).</p>
+1.  Twist two fingers around on the screen like you are turning a dial. Each option will be read aloud as you twist further around. You can go back and forth to cycle through the options.
+2.  Once you've found the option you want:
 
-<h4 id="Browsing_web_pages_2">Browsing web pages</h4>
+    - Release your fingers to select it.
+    - If it is an option you can iterate the value of (such as Volume or Speaking Rate), you can do a swipe up or down to increase or decrease the value of the selected item.
 
-<p>Let's have a go at web browsing with VoiceOver:</p>
+The options available under the Rotor are context-sensitive — they will differ depending on what app or view you are in (see below for an example).
 
-<ol>
- <li>Open your web browser.</li>
- <li>Activate the URL bar.</li>
- <li>Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
-  <ul>
-   <li>Select the URL bar by swiping left/right until you get to it, and then double-tapping.</li>
-   <li>For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.</li>
-   <li>Once you've finished, find the Enter key and press it.</li>
-  </ul>
- </li>
- <li>Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).</li>
- <li>By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.</li>
- <li>Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
-  <ul>
-   <li><em>Speaking Rate</em>: Change the speaking rate.</li>
-   <li><em>Containers</em>: Move between different semantic containers on the page.</li>
-   <li><em>Headings</em>: Move between headings on the page.</li>
-   <li><em>Links</em>: Move between links on the page.</li>
-   <li><em>Form Controls</em>: Move between form controls on the page.</li>
-   <li><em>Language</em>: Move between different translations, if they are available.</li>
-  </ul>
- </li>
- <li>Select <em>Headings</em>. Now you'll be able to swipe up and down to move between headings on the page.</li>
-</ol>
+#### Browsing web pages
 
-<p><strong>Note:</strong> For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see <a href="https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3">Test Accessibility on Your Device with VoiceOver</a>.</p>
+Let's have a go at web browsing with VoiceOver:
 
-<h2 id="Control_mechanisms">Control mechanisms</h2>
+1.  Open your web browser.
+2.  Activate the URL bar.
+3.  Enter a web page that has a bunch of headings on it, such as the front page of bbc.co.uk. To enter the text of the URL:
 
-<p>In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events">Mouse-specific events</a>). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.</p>
+    - Select the URL bar by swiping left/right until you get to it, and then double-tapping.
+    - For each character, hold your finger down on the virtual keyboard until you get the character you want, and then release your finger to select it. Double-tap to type it.
+    - Once you've finished, find the Enter key and press it.
 
-<p>As an example, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">click</a> event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html">simple-button-example.html</a> example (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html">see it running live</a>) to see what we mean.</p>
+4.  Swipe left and right to move between items on the page. You can double-tap an item to select it (e.g., follow a link).
+5.  By default, the selected Rotor option will be Speaking Rate; you can currently swipe up and down to increase or decrease the speaking rate.
+6.  Now turn two fingers around the screen like a dial to show the rotor and move between its options. Here are a few examples of the options available:
 
-<p>Alternatively, mouse-specific events such as <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmousedown">mousedown</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onmouseup">mouseup</a> create problems — their event handlers cannot be invoked using non-mouse controls.</p>
+    - _Speaking Rate_: Change the speaking rate.
+    - _Containers_: Move between different semantic containers on the page.
+    - _Headings_: Move between headings on the page.
+    - _Links_: Move between links on the page.
+    - _Form Controls_: Move between form controls on the page.
+    - _Language_: Move between different translations, if they are available.
 
-<p>If you try to control our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html">simple-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html">see example live</a>) example with keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:</p>
+7.  Select _Headings_. Now you'll be able to swipe up and down to move between headings on the page.
 
-<pre><code>div.onmousedown = function() {
+**Note:** For a more complete reference covering the VoiceOver gestures available and other hints on accessibility testing on iOS, see [Test Accessibility on Your Device with VoiceOver](https://developer.apple.com/library/content/technotes/TestingAccessibilityOfiOSApps/TestAccessibilityonYourDevicewithVoiceOver/TestAccessibilityonYourDevicewithVoiceOver.html#//apple_ref/doc/uid/TP40012619-CH3).
+
+## Control mechanisms
+
+In our CSS and JavaScript accessibility article, we looked at the idea of events that are specific to a certain type of control mechanism (see [Mouse-specific events](/ru/docs/Learn/Accessibility/CSS_and_JavaScript#mouse-specific_events)). To recap, these cause accessibility issues because other control mechanisms can't activate the associated functionality.
+
+As an example, the [click](/ru/docs/Web/API/GlobalEventHandlers/onclick) event is good in terms of accessibility — an associated event handler can be invoked by clicking the element the handler is set on, tabbing to it and pressing Enter/Return, or tapping it on a touchscreen device. Try our [simple-button-example.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-button-example.html) example ([see it running live](http://mdn.github.io/learning-area/accessibility/mobile/simple-button-example.html)) to see what we mean.
+
+Alternatively, mouse-specific events such as [mousedown](/ru/docs/Web/API/GlobalEventHandlers/onmousedown) and [mouseup](/ru/docs/Web/API/GlobalEventHandlers/onmouseup) create problems — their event handlers cannot be invoked using non-mouse controls.
+
+If you try to control our [simple-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/simple-box-drag.html) ([see example live](http://mdn.github.io/learning-area/accessibility/mobile/simple-box-drag.html)) example with keyboard or touch, you'll see the problem. This occurs because we are using code such as the following:
+
+```
+div.onmousedown = function() {
   initialBoxX = div.offsetLeft;
   initialBoxY = div.offsetTop;
   movePanel();
 }
 
-document.onmouseup = stopMove;</code></pre>
+document.onmouseup = stopMove;
+```
 
-<p>To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:</p>
+To enable other forms of control, you need to use different, yet equivalent events — for example, touch events work on touchscreen devices:
 
-<pre><code>div.ontouchstart = function(e) {
+```
+div.ontouchstart = function(e) {
   initialBoxX = div.offsetLeft;
   initialBoxY = div.offsetTop;
   positionHandler(e);
   movePanel();
 }
 
-panel.ontouchend = stopMove;</code></pre>
+panel.ontouchend = stopMove;
+```
 
-<p>We've provided a simple example that shows how to use the mouse and touch events together — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html">multi-control-box-drag.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html">see the example live</a> also).</p>
+We've provided a simple example that shows how to use the mouse and touch events together — see [multi-control-box-drag.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/multi-control-box-drag.html) ([see the example live](http://mdn.github.io/learning-area/accessibility/mobile/multi-control-box-drag.html) also).
 
-<p><strong>Note:</strong> You can also see fully functional examples showing how to implement different control mechanisms at <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/Control_mechanisms">Implementing game control mechanisms</a>.</p>
+**Note:** You can also see fully functional examples showing how to implement different control mechanisms at [Implementing game control mechanisms](/ru/docs/Games/Techniques/Control_mechanisms).
 
-<h2 id="Responsive_design">Responsive design</h2>
+## Responsive design
 
-<p><a href="https://developer.mozilla.org/en-US/docs/Web/Apps/Progressive/Responsive">Responsive design</a> is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.</p>
+[Responsive design](/ru/docs/Web/Apps/Progressive/Responsive) is the practice of making your layouts and other features of your apps dynamically change depending on factors such as screen size and resolution, so they are usable and accessible to users of different device types.
 
-<p>In particular, the most common problems that need to be addressed for mobile are:</p>
+In particular, the most common problems that need to be addressed for mobile are:
 
-<ul>
- <li>Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries">media queries</a>, <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, and <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li>
- <li>Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</li>
- <li>Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed  (see <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the web</a> for more details).</li>
-</ul>
+- Suitability of layouts for mobile devices. A multi-column layout won't work as well on a narrow screen, for example, and the text size may need to be increased so it is legible. Such issues can be solved by creating a responsive layout using technologies such as [media queries](/ru/docs/Web/CSS/Media_Queries), [viewport](/ru/docs/Mozilla/Mobile/Viewport_meta_tag), and [flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox).
+- Conserving image sizes downloaded. In general, small screen devices won't need images that are as large as their desktop counterparts, and they are more likely to be on slow network connections. Therefore, it is wise to serve smaller images to narrow screen devices as appropriate. You can handle this using [responsive image techniques](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
+- Thinking about high resolutions. Many mobile devices have high-resolution screens, and therefore need higher-resolution images so that the display can continue to look crisp and sharp. Again, you can serve images as appropriate using responsive image techniques. In addition, many image requirements can be fulfilled using the SVG vector images format, which is well-supported across browsers today. SVG has a small file size and will stay sharp regardless of whatever size is being displayed (see [Adding vector graphics to the web](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) for more details).
 
-<p><strong>Note:</strong> We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).</p>
+**Note:** We won't provide a full discussion of responsive design techniques here, as they are covered in other places around MDN (see above links).
 
-<h3 id="Specific_mobile_considerations">Specific mobile considerations</h3>
+### Specific mobile considerations
 
-<p>There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.</p>
+There are other important issues to consider when making sites more accessible on mobile. We have listed a couple here, but we will add more when we think of them.
 
-<h4 id="Not_disabling_zoom">Not disabling zoom</h4>
+#### Not disabling zoom
 
-<p>Using <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>, it is possible to disable zoom, using code like this in your {{htmlelement("head")}}:</p>
+Using [viewport](/ru/docs/Mozilla/Mobile/Viewport_meta_tag), it is possible to disable zoom, using code like this in your {{htmlelement("head")}}:
 
-<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;</code></pre>
+```
+<meta name="viewport" content="user-scalable=no">
+```
 
-<p>You should never do this if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.</p>
+You should never do this if at all possible — many people rely on zoom to be able to see the content of your website, so taking this functionality away is a really bad idea. There are certain situations where zooming might break the UI; in such cases, if you feel that you absolutely need to disable zoom, you should provide some other kind of equivalent, such as a control for increasing the text size in a way that doesn't break your UI.
 
-<h4 id="Keeping_menus_accessible">Keeping menus accessible</h4>
+#### Keeping menus accessible
 
-<p>Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".</p>
+Because the screen is so much narrower on mobile devices, it is very common to use media queries and other technologies to make the navigation menu shrink down to a tiny icon at the top of the display — which can be pressed to reveal the menu only if it's needed — when the site is viewed on mobile. This is commonly represented by a "three horizontal lines" icon, and the design pattern is consequently known as a "hamburger menu".
 
-<p>When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in <a href="#control_mechanisms">Control mechanisms</a> above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.</p>
+When implementing such a menu, you need to make sure that the control to reveal it is accessible by appropriate control mechanisms (normally touch for mobile), as discussed in [Control mechanisms](#control_mechanisms) above, and that the rest of the page is moved out of the way or hidden in some way while the menu is being accessed, to avoid confusion with navigating it.
 
-<p>Click here for a <a href="http://fritz-weisshart.de/meg_men/">good hamburger menu example</a>.</p>
+Click here for a [good hamburger menu example](http://fritz-weisshart.de/meg_men/).
 
-<h2 id="User_input">User input</h2>
+## User input
 
-<p>On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.</p>
+On mobile devices, inputting data tends to be more annoying for users than the equivalent experience on desktop computers. It is more convenient to type text into form inputs using a desktop or laptop keyboard than a touchscreen virtual keyboard or a tiny mobile physical keyboard.
 
-<p>For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html">common-job-types.html</a> (see the <a href="http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html">common jobs example live</a>).</p>
+For this reason, it is worth trying to minimize the amount of typing needed. As an example, instead of getting users to fill out their job title each time using a regular text input, you could instead offer a {{htmlelement("select")}} menu containing the most common options (which also helps with consistency in data entry), and offer an "Other" option that displays a text field to type any outliers into. You can see a simple example of this idea in action in [common-job-types.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/common-job-types.html) (see the [common jobs example live](http://mdn.github.io/learning-area/accessibility/mobile/common-job-types.html)).
 
-<p>It is also worth considering the use of HTML5 form input types such as date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See <a href="https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html">html5-form-examples.html</a> for some examples (see the <a href="http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html">HTML5 form examples live</a>) — try loading these and manipulating them on mobile devices. For example:</p>
+It is also worth considering the use of HTML5 form input types such as date on mobile platforms as they handle them well — both Android and iOS, for example, display usable widgets that fit well with the device experience. See [html5-form-examples.html](https://github.com/mdn/learning-area/blob/master/accessibility/mobile/html5-form-examples.html) for some examples (see the [HTML5 form examples live](http://mdn.github.io/learning-area/accessibility/mobile/html5-form-examples.html)) — try loading these and manipulating them on mobile devices. For example:
 
-<ul>
- <li>Types <code>number</code>, <code>tel</code>, and <code>email</code> display suitable virtual keyboards for entering numbers/telephone numbers.</li>
- <li>Types <code>time</code> and <code>date</code> display suitable pickers for selecting times and dates.</li>
-</ul>
+- Types `number`, `tel`, and `email` display suitable virtual keyboards for entering numbers/telephone numbers.
+- Types `time` and `date` display suitable pickers for selecting times and dates.
 
-<p>If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See <a href="http://diveinto.html5doctor.com/detect.html#input-types">input types</a> for raw information on detecting different input types, and also check out our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">feature detection article</a> for much more information.</p>
+If you want to provide a different solution for desktops, you could always serve different markup to your mobile devices using feature detection. See [input types](http://diveinto.html5doctor.com/detect.html#input-types) for raw information on detecting different input types, and also check out our [feature detection article](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection) for much more information.
 
-<h2 id="Summary">Summary</h2>
+## Summary
 
-<p>In this article we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through usage of the most common screenreaders to aid you in accessibility testing.</p>
+In this article we have provided you with some details about common mobile accessibility-specific issues and how to overcome them. We also took you through usage of the most common screenreaders to aid you in accessibility testing.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="https://www.smashingmagazine.com/guidelines-for-mobile-web-development/">Guidelines For Mobile Web Development</a> — A list of articles in <em>Smashing Magazine</em> covering different techniques for mobile web design.</li>
- <li><a href="http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644">Make your site work on touch devices</a> — Useful article about using touch events to get interactions working on mobile devices.</li>
-</ul>
+- [Guidelines For Mobile Web Development](https://www.smashingmagazine.com/guidelines-for-mobile-web-development/) — A list of articles in _Smashing Magazine_ covering different techniques for mobile web design.
+- [Make your site work on touch devices](http://www.creativebloq.com/javascript/make-your-site-work-touch-devices-51411644) — Useful article about using touch events to get interactions working on mobile devices.
 
-<div>{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}</div>
+{{PreviousMenuNext("Learn/Accessibility/Multimedia","Learn/Accessibility/Accessibility_troubleshooting", "Learn/Accessibility")}}
 
-<div>
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
-</div>
-</div>
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/multimedia/index.md b/files/ru/learn/accessibility/multimedia/index.md
index b996f2e5ef1cde..d9b66dd68383cb 100644
--- a/files/ru/learn/accessibility/multimedia/index.md
+++ b/files/ru/learn/accessibility/multimedia/index.md
@@ -6,139 +6,138 @@ tags:
 translation_of: Learn/Accessibility/Multimedia
 original_slug: Learn/Доступность/Multimedia
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
-<div>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</div>
+Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.
 
-<p class="summary">Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so they can be understood by assistive technologies and their users. This article shows how.</p>
+| Prerequisites: | Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of [what accessibility is](/ru/docs/Learn/Accessibility/What_is_accessibility). |
+| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Objective:     | To understand the accessibility issues behind multimedia, and how to overcome them.                                                                                           |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, a basic understanding of HTML, CSS, and JavaScript, an understanding of <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility">what accessibility is</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand the accessibility issues behind multimedia, and how to overcome them.</td>
-  </tr>
- </tbody>
-</table>
+## Multimedia and accessibility
 
-<h2 id="Multimedia_and_accessibility">Multimedia and accessibility</h2>
+So far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with [WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics) attributes).
 
-<p>So far in this module we have looked at a variety of content and what needs to be done to ensure its accessibility, ranging from simple text content to data tables, images, native controls such as form elements and buttons, and even more complex markup structures (with <a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> attributes).</p>
+This article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. Images, videos, {{htmlelement("canvas")}} elements, Flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.
 
-<p>This article on the other hand looks at another general class of content that arguably isn't as easy to ensure accessibility for — multimedia. Images, videos, {{htmlelement("canvas")}} elements, Flash movies, etc., aren't as easily understood by screenreaders or navigated by the keyboard, and we need to give them a helping hand.</p>
+But don't despair — here we will help you navigate through the techniques available for making multimedia more accessible.
 
-<p>But don't despair — here we will help you navigate through the techniques available for making multimedia more accessible.</p>
+## Simple images
 
-<h2 id="Simple_images">Simple images</h2>
+We already covered simple text alternatives for HTML images in our [HTML: A good basis for accessibility](/ru/docs/Learn/Accessibility/HTML) article — you can refer back to there for the full details. In short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users.
 
-<p>We already covered simple text alternatives for HTML images in our <a href="/en-US/docs/Learn/Accessibility/HTML">HTML: A good basis for accessibility</a> article — you can refer back to there for the full details. In short, you should ensure that where possible visual content has an alternative text available for screenreaders to pick up and read to their users.</p>
+For example:
 
-<p>For example:</p>
+```html
+<img src="dinosaur.png"
+     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+```
 
-<pre class="brush: html">&lt;img src="dinosaur.png"
-     alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
-</pre>
+## Accessible audio and video controls
 
-<h2 id="Accessible_audio_and_video_controls">Accessible audio and video controls</h2>
+Implementing controls for web-based audio/video shouldn't be a problem, right? Let's investigate.
 
-<p>Implementing controls for web-based audio/video shouldn't be a problem, right? Let's investigate.</p>
+### The problem with native HTML5 controls
 
-<h3 id="The_problem_with_native_HTML5_controls">The problem with native HTML5 controls</h3>
+HTML5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. For example (see `native-controls.html` [source code](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html) and [live](http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html)):
 
-<p>HTML5 video and audio instances even come with a set of inbuilt controls that allow you to control the media straight out of the box. For example (see <code>native-controls.html</code> <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/native-controls.html">source code</a> and <a href="http://mdn.github.io/learning-area/accessibility/multimedia/native-controls.html">live</a>):</p>
+```html
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
 
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="viper.mp3" type="audio/mp3"&gt;
-  &lt;source src="viper.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/audio&gt;
+<br>
 
-&lt;br&gt;
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+```
 
-&lt;video controls&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;</pre>
+The controls attribute provides play/pause buttons, seek bar, etc. — the basic controls you'd expect from a media player. It looks like so in Firefox and Chrome:
 
-<p>The controls attribute provides play/pause buttons, seek bar, etc. — the basic controls you'd expect from a media player. It looks like so in Firefox and Chrome:</p>
+![Screenshot of Video Controls in Firefox](https://mdn.mozillademos.org/files/14440/native-controls-firefox.png)
 
-<p><img alt="Screenshot of Video Controls in Firefox" src="https://mdn.mozillademos.org/files/14440/native-controls-firefox.png" style="display: block; height: 361px; margin: 0px auto; width: 400px;"></p>
+![Screenshot of Video Controls in Chrome](https://mdn.mozillademos.org/files/14438/native-controls-chrome.png)
 
-<p><img alt="Screenshot of Video Controls in Chrome" src="https://mdn.mozillademos.org/files/14438/native-controls-chrome.png" style="display: block; height: 344px; margin: 0px auto; width: 400px;"></p>
+However, there are problems with these controls:
 
-<p>However, there are problems with these controls:</p>
+- They are not keyboard accessible, in any browser except for Opera
+- Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.
 
-<ul>
- <li>They are not keyboard accessible, in any browser except for Opera</li>
- <li>Different browsers give the native controls differing styling and functionality, and they aren't stylable, meaning that they can't be easily made to follow a site style guide.</li>
-</ul>
+To remedy this, we can create our own custom controls. Let's look at how.
 
-<p>To remedy this, we can create our own custom controls. Let's look at how.</p>
+### Creating custom audio and video controls
 
-<h3 id="Creating_custom_audio_and_video_controls">Creating custom audio and video controls</h3>
+HTML5 video and audio share an API — HTML Media Element — which allows you to map custom functionality to buttons and other controls — both of which you define yourself.
 
-<p>HTML5 video and audio share an API — HTML Media Element — which allows you to map custom functionality to buttons and other controls — both of which you define yourself.</p>
+Let's take the video example from above and add custom controls to them.
 
-<p>Let's take the video example from above and add custom controls to them.</p>
+#### Basic setup
 
-<h4 id="Basic_setup">Basic setup</h4>
+First, grab a copy of our [custom-controls-start.html](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html), [custom-controls.css](https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css), [rabbit320.mp4](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4), and [rabbit320.webm](https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm) files and save them in a new directory on your hard drive.
 
-<p>First, grab a copy of our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls-start.html">custom-controls-start.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/accessibility/multimedia/custom-controls.css">custom-controls.css</a>, <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.mp4">rabbit320.mp4</a>, and <a href="https://raw.githubusercontent.com/mdn/learning-area/master/accessibility/multimedia/rabbit320.webm">rabbit320.webm</a> files and save them in a new directory on your hard drive.</p>
+Create a new file called main.js and save it in the same directory.
 
-<p>Create a new file called main.js and save it in the same directory.</p>
+First of all, let's look at the HTML for the video player, in the HTML:
 
-<p>First of all, let's look at the HTML for the video player, in the HTML:</p>
+```html
+<section class="player">
+  <video controls>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
 
-<pre class="brush: html">&lt;section class="player"&gt;
-  &lt;video controls&gt;
-    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-    &lt;source src="rabbit320.webm" type="video/webm"&gt;
-    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-  &lt;/video&gt;
+  <div class="controls">
+    <button class="playpause">Play</button>
+    <button class="stop">Stop</button>
+    <button class="rwd">Rwd</button>
+    <button class="fwd">Fwd</button>
+    <div class="time">00:00</div>
+  </div>
+</section>
+```
 
-  &lt;div class="controls"&gt;
-    &lt;button class="playpause"&gt;Play&lt;/button&gt;
-    &lt;button class="stop"&gt;Stop&lt;/button&gt;
-    &lt;button class="rwd"&gt;Rwd&lt;/button&gt;
-    &lt;button class="fwd"&gt;Fwd&lt;/button&gt;
-    &lt;div class="time"&gt;00:00&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/section&gt;</pre>
+#### JavaScript basic setup
 
-<h4 id="JavaScript_basic_setup">JavaScript basic setup</h4>
+We've inserted some simple control buttons below our video. These controls of course won't do anything by default; to add functionality, we will use JavaScript.
 
-<p>We've inserted some simple control buttons below our video. These controls of course won't do anything by default; to add functionality, we will use JavaScript.</p>
+We will first need to store references to each of the controls — add the following to the top of your JavaScript file:
 
-<p>We will first need to store references to each of the controls — add the following to the top of your JavaScript file:</p>
-
-<pre class="brush: js">var playPauseBtn = document.querySelector('.playpause');
+```js
+var playPauseBtn = document.querySelector('.playpause');
 var stopBtn = document.querySelector('.stop');
 var rwdBtn = document.querySelector('.rwd');
 var fwdBtn = document.querySelector('.fwd');
-var timeLabel = document.querySelector('.time');</pre>
+var timeLabel = document.querySelector('.time');
+```
 
-<p>Next, we need to grab a reference to the video/audio player itself — add this line below the previous lines:</p>
+Next, we need to grab a reference to the video/audio player itself — add this line below the previous lines:
 
-<pre class="brush: js">var player = document.querySelector('video');</pre>
+```js
+var player = document.querySelector('video');
+```
 
-<p>This holds a reference to a {{domxref("HTMLMediaElement")}} object, which has several useful properties and methods available on it that can be used to wire up functionality to our buttons.</p>
+This holds a reference to a {{domxref("HTMLMediaElement")}} object, which has several useful properties and methods available on it that can be used to wire up functionality to our buttons.
 
-<p>Before moving onto creating our button functionality, let's remove the native controls so they don't get in the way of our custom controls. Add the following, again at the bottom of your JavaScript:</p>
+Before moving onto creating our button functionality, let's remove the native controls so they don't get in the way of our custom controls. Add the following, again at the bottom of your JavaScript:
 
-<pre class="brush: js">player.removeAttribute('controls');</pre>
+```js
+player.removeAttribute('controls');
+```
 
-<p>Doing it this way round rather than just not including the controls attribute in the first place has the advantage that if our JavaScript fails for any reason, the user still has some controls available.</p>
+Doing it this way round rather than just not including the controls attribute in the first place has the advantage that if our JavaScript fails for any reason, the user still has some controls available.
 
-<h4 id="Wiring_up_our_buttons">Wiring up our buttons</h4>
+#### Wiring up our buttons
 
-<p>First, let's set up the play/pause button. We can get this to toggle between play and pause with a simple conditional function, like the following. Add it to your code, at the bottom:</p>
+First, let's set up the play/pause button. We can get this to toggle between play and pause with a simple conditional function, like the following. Add it to your code, at the bottom:
 
-<pre class="brush: js">playPauseBtn.onclick = function() {
+```js
+playPauseBtn.onclick = function() {
   if(player.paused) {
     player.play();
     playPauseBtn.textContent = 'Pause';
@@ -146,52 +145,58 @@ var timeLabel = document.querySelector('.time');</pre>
     player.pause();
     playPauseBtn.textContent = 'Play';
   }
-};</pre>
+};
+```
 
-<p>Next, add this code to the bottom, which controls the stop button:</p>
+Next, add this code to the bottom, which controls the stop button:
 
-<pre class="brush: js">stopBtn.onclick = function() {
+```js
+stopBtn.onclick = function() {
   player.pause();
   player.currentTime = 0;
   playPauseBtn.textContent = 'Play';
-};</pre>
+};
+```
 
-<p>There is no <code>stop()</code> function available on {{domxref("HTMLMediaElement")}}s, so instead we <code>pause()</code> it, and at the same time set the <code>currentTime</code> to 0.</p>
+There is no `stop()` function available on {{domxref("HTMLMediaElement")}}s, so instead we `pause()` it, and at the same time set the `currentTime` to 0.
 
-<p>Next, our rewind and fast forward buttons — add the following blocks to the bottom of your code:</p>
+Next, our rewind and fast forward buttons — add the following blocks to the bottom of your code:
 
-<pre class="brush: js">rwdBtn.onclick = function() {
+```js
+rwdBtn.onclick = function() {
   player.currentTime -= 3;
 };
 
 fwdBtn.onclick = function() {
   player.currentTime += 3;
-  if(player.currentTime &gt;= player.duration || player.paused) {
+  if(player.currentTime >= player.duration || player.paused) {
     player.pause();
     player.currentTime = 0;
     playPauseBtn.textContent = 'Play';
   }
-};</pre>
+};
+```
 
-<p>These are very simple, just adding or subtracting 3 seconds to the <code>currentTime</code> each time they are clicked. In a real video player, you'd probably want a more elaborate seeking bar, or similar.</p>
+These are very simple, just adding or subtracting 3 seconds to the `currentTime` each time they are clicked. In a real video player, you'd probably want a more elaborate seeking bar, or similar.
 
-<p>Note that we also check to see if the <code>currentTime</code> is more than the total media <code>duration</code>, or if the media is not playing, when the Fwd button is pressed. If either conditions are true, we simply stop the video, to avoid the user interface going wrong if they attempt to fast forward when the video is not playing, or fast forward past the end of the video.</p>
+Note that we also check to see if the `currentTime` is more than the total media `duration`, or if the media is not playing, when the Fwd button is pressed. If either conditions are true, we simply stop the video, to avoid the user interface going wrong if they attempt to fast forward when the video is not playing, or fast forward past the end of the video.
 
-<p>Last of all, add the following to the end of the code, to control the time elapsed display:</p>
+Last of all, add the following to the end of the code, to control the time elapsed display:
 
-<pre class="brush: js">player.ontimeupdate = function() {
+```js
+player.ontimeupdate = function() {
   var minutes = Math.floor(player.currentTime / 60);
   var seconds = Math.floor(player.currentTime - minutes * 60);
   var minuteValue;
   var secondValue;
 
-  if (minutes&lt;10) {
+  if (minutes<10) {
     minuteValue = "0" + minutes;
   } else {
     minuteValue = minutes;
   }
 
-  if (seconds&lt;10) {
+  if (seconds<10) {
     secondValue = "0" + seconds;
   } else {
     secondValue = seconds;
@@ -199,163 +204,144 @@ fwdBtn.onclick = function() {
 
   mediaTime = minuteValue + ":" + secondValue;
   timeLabel.textContent = mediaTime;
-};</pre>
+};
+```
 
-<p>Each time the time updates (once per second), we fire this function. It works out the number of minutes and seconds from the given currentTime value that is just in seconds, adds a leading 0 if either the minute or second value is less than 10, and then create the display readout and adds it to the time label.</p>
+Each time the time updates (once per second), we fire this function. It works out the number of minutes and seconds from the given currentTime value that is just in seconds, adds a leading 0 if either the minute or second value is less than 10, and then create the display readout and adds it to the time label.
 
-<h4 id="Further_reading">Further reading</h4>
+#### Further reading
 
-<p>This gives you a basic idea of how to add custom player functionality to video/audio player instances. For more information on how to add more complex features to video/audio players, including Flash fallbacks for older browsers, see:</p>
+This gives you a basic idea of how to add custom player functionality to video/audio player instances. For more information on how to add more complex features to video/audio players, including Flash fallbacks for older browsers, see:
 
-<ul>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and video delivery</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics">Video player styling basics</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a></li>
-</ul>
+- [Audio and video delivery](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery)
+- [Video player styling basics](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Video_player_styling_basics)
+- [Creating a cross-browser video player](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player)
 
-<p>We've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it. See <a href="http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/">custom-controls-oojs</a> (also <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS">see the source code</a>).</p>
+We've also created an advanced example to show how you could create an object-oriented system that finds every video and audio player on the page (no matter how many there are) and adds our custom controls to it. See [custom-controls-oojs](http://mdn.github.io/learning-area/accessibility/multimedia/custom-controls-OOJS/) (also [see the source code](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/custom-controls-OOJS)).
 
-<h2 id="Audio_transcripts">Audio transcripts</h2>
+## Audio transcripts
 
-<p>To provide deaf people with access to audio content, you really need to create text transcripts. These can either be included on the same page as the audio in some way, or included on a separate page and linked to.</p>
+To provide deaf people with access to audio content, you really need to create text transcripts. These can either be included on the same page as the audio in some way, or included on a separate page and linked to.
 
-<p>In terms of actually creating the transcript, your options are:</p>
+In terms of actually creating the transcript, your options are:
 
-<ul>
- <li>Commercial services — You could pay a professional to do the transcription, see for example companies like <a href="https://scribie.com/">Scribie</a>, <a href="https://castingwords.com/">Casting Words</a>, or <a href="https://www.rev.com/">Rev</a>. Look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively.</li>
- <li>Community/grass roots/self transcription — If you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. You could even have a go at doing them yourself.</li>
- <li>Automated services — There are AI services available, like <a href="https://trint.com">Trint</a>. Upload a video/audio file to the site, and it automatically transcribes it for you. On YouTube you can choose to generate automated captions/transcripts. Depending on how clear the spoken audio is, the resulting transcript quality will vary greatly. </li>
-</ul>
+- Commercial services — You could pay a professional to do the transcription, see for example companies like [Scribie](https://scribie.com/), [Casting Words](https://castingwords.com/), or [Rev](https://www.rev.com/). Look around and ask advice to make sure you find a reputable company that you'll be able to work with effectively.
+- Community/grass roots/self transcription — If you are part of an active community or team in your workplace, then you could ask them for help with doing the translations. You could even have a go at doing them yourself.
+- Automated services — There are AI services available, like [Trint](https://trint.com). Upload a video/audio file to the site, and it automatically transcribes it for you. On YouTube you can choose to generate automated captions/transcripts. Depending on how clear the spoken audio is, the resulting transcript quality will vary greatly.
 
-<p>As with most things in life, you tend to get what you pay for; different services will vary in accuracy and time taken to produce the transcript. If you pay a reputable company or AI service to do the transcription, you will probably get it done rapidly and to a high quality. If you don't want to pay for it, you are likely to get it done at a lower quality, and/or slowly.</p>
+As with most things in life, you tend to get what you pay for; different services will vary in accuracy and time taken to produce the transcript. If you pay a reputable company or AI service to do the transcription, you will probably get it done rapidly and to a high quality. If you don't want to pay for it, you are likely to get it done at a lower quality, and/or slowly.
 
-<p>It is not OK to publish an audio resource but promise to publish the transcript later on — such promises often aren't kept, which will erode trust between you and your users. If the audio you are presenting is something like a face to face meeting or live spoken performance, it would be acceptable to take notes during the performance, publish them in full along with the audio, then seek help in cleaning up the notes afterwards.</p>
+It is not OK to publish an audio resource but promise to publish the transcript later on — such promises often aren't kept, which will erode trust between you and your users. If the audio you are presenting is something like a face to face meeting or live spoken performance, it would be acceptable to take notes during the performance, publish them in full along with the audio, then seek help in cleaning up the notes afterwards.
 
-<h3 id="Transcript_examples">Transcript examples</h3>
+### Transcript examples
 
-<p>If you use an automated service, then you'll probably have to use the user interface that the tool provides. For example, take a look at <a href="https://www.youtube.com/watch?v=zFFBsj97Od8">Audio Transcription Sample 1</a> and choose <em>More &gt; Transcript</em>.</p>
+If you use an automated service, then you'll probably have to use the user interface that the tool provides. For example, take a look at [Audio Transcription Sample 1](https://www.youtube.com/watch?v=zFFBsj97Od8) and choose _More > Transcript_.
 
-<p>If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our <a href="http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/">audio-transcript-ui</a> example (also see the <a href="https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui">source code</a>).</p>
+If you are creating your own user interface to present your audio and associated transcript, you can do it however you like, but it might make sense to include it in a showable/hideable panel; see our [audio-transcript-ui](http://mdn.github.io/learning-area/accessibility/multimedia/audio-transcript-ui/) example (also see the [source code](https://github.com/mdn/learning-area/tree/master/accessibility/multimedia/audio-transcript-ui)).
 
-<h3 id="Audio_descriptions">Audio descriptions</h3>
+### Audio descriptions
 
-<p>On occasions where there are visuals accompanying your audio, you'll need to provide audio descriptions of some kind to describe that extra content.</p>
+On occasions where there are visuals accompanying your audio, you'll need to provide audio descriptions of some kind to describe that extra content.
 
-<p>In many cases this will simply take the form of video, in which case you can implement captions using the techniques described in the next section of the article.</p>
+In many cases this will simply take the form of video, in which case you can implement captions using the techniques described in the next section of the article.
 
-<p>However, there are some edge cases. You might for example have an audio recording of a meeting that refers to an accompanying resource such as a spreadsheet or chart. In such cases, you should make sure that the resources are provided along with the audio + transcript, and specifically link to them in the places where they are referred to in the transcript. This of course will help all users, not just people who are deaf.</p>
+However, there are some edge cases. You might for example have an audio recording of a meeting that refers to an accompanying resource such as a spreadsheet or chart. In such cases, you should make sure that the resources are provided along with the audio + transcript, and specifically link to them in the places where they are referred to in the transcript. This of course will help all users, not just people who are deaf.
 
-<div class="note">
-<p><strong>Note</strong>: An audio transcript will in general help multiple user groups. As well as giving deaf users access to the information contained in the audio, think about a user with a low bandwidth connection, who would find downloading the audio inconvenient. Think also about a user in a noisy environment like a pub or bar, who is trying to access the information but can't hear it over the noise.</p>
-</div>
+> **Примечание:** An audio transcript will in general help multiple user groups. As well as giving deaf users access to the information contained in the audio, think about a user with a low bandwidth connection, who would find downloading the audio inconvenient. Think also about a user in a noisy environment like a pub or bar, who is trying to access the information but can't hear it over the noise.
 
-<h2 id="Video_text_tracks">Video text tracks</h2>
+## Video text tracks
 
-<p>To make video accessible for deaf, blind, or even other groups of users (such as those on low bandwidth, or who don't understand the language the video is recorded in), you need to include text tracks along with your video content.</p>
+To make video accessible for deaf, blind, or even other groups of users (such as those on low bandwidth, or who don't understand the language the video is recorded in), you need to include text tracks along with your video content.
 
-<div class="note">
-<p><strong>Note</strong>: text tracks are also useful for potentially any user, not just those with disabilities. for example, some users may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)</p>
-</div>
+> **Примечание:** text tracks are also useful for potentially any user, not just those with disabilities. for example, some users may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
 
-<p>This is not a new concept — television services have had closed captioning available for quite a long time:</p>
+This is not a new concept — television services have had closed captioning available for quite a long time:
 
-<p><img alt='Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"' src="https://mdn.mozillademos.org/files/14436/closed-captions.png" style="display: block; height: 240px; margin: 0px auto; width: 320px;"></p>
+![Frame from an old-timey cartoon with closed captioning "Good work, Goldie. Keep it up!"](https://mdn.mozillademos.org/files/14436/closed-captions.png)
 
-<p>Whereas many countries offer English films with subtitles written in their own native languages, and different language subtitles are often available on DVDs, for example</p>
+Whereas many countries offer English films with subtitles written in their own native languages, and different language subtitles are often available on DVDs, for example
 
-<p><img alt='An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"' src="https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg" style="display: block; margin: 0 auto;"></p>
+![An English film with German subtitles "Emo, warum erkennst du nicht die Schonheit dieses Ortes?"](https://mdn.mozillademos.org/files/14442/Subtitles_German.jpg)
 
-<p>There are different types of text track with different purposes. The main ones you'll come across are:</p>
+There are different types of text track with different purposes. The main ones you'll come across are:
 
-<ul>
- <li>Captions — There for the benefit of deaf users who can't hear the audio track, including the words being spoken, and contextual information such as who spoke the words, if the people were angry or sad, and what mood the music is currently creating.</li>
- <li>Subtitles — Include translations of the audio dialog, for users that don't understand the language being spoken.</li>
- <li>Descriptions — These include descriptions for blind people who can't see the video, for example what the scene looks like.</li>
- <li>Chapter titles — Chapter markers intended to help the user navigate the media resource</li>
-</ul>
+- Captions — There for the benefit of deaf users who can't hear the audio track, including the words being spoken, and contextual information such as who spoke the words, if the people were angry or sad, and what mood the music is currently creating.
+- Subtitles — Include translations of the audio dialog, for users that don't understand the language being spoken.
+- Descriptions — These include descriptions for blind people who can't see the video, for example what the scene looks like.
+- Chapter titles — Chapter markers intended to help the user navigate the media resource
 
-<h3 id="Implementing_HTML5_video_text_tracks">Implementing HTML5 video text tracks</h3>
+### Implementing HTML5 video text tracks
 
-<p>Text tracks for displaying with HTML5 video need to be written in WebVTT, a text format containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues.</p>
+Text tracks for displaying with HTML5 video need to be written in WebVTT, a text format containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues.
 
-<p>A typical WebVTT file will look something like this:</p>
+A typical WebVTT file will look something like this:
 
-<pre>WEBVTT
+```
+WEBVTT
 
 1
-00:00:22.230 --&gt; 00:00:24.606
+00:00:22.230 --> 00:00:24.606
 This is the first subtitle.
 
 2
-00:00:30.739 --&gt; 00:00:34.074
+00:00:30.739 --> 00:00:34.074
 This is the second.
 
-  ...</pre>
-
-<p>To get this displayed along with the HTML media playback, you need to:</p>
-
-<ul>
- <li>Save it as a .vtt file in a sensible place.</li>
- <li>Link to the .vtt file with the {{htmlelement("track")}} element. <code>&lt;track&gt;</code> should be placed within <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code>, but after all <code>&lt;source&gt;</code> elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.</li>
-</ul>
+  ...
+```
 
-<p>Here's an example:</p>
+To get this displayed along with the HTML media playback, you need to:
 
-<pre class="brush: html">&lt;video controls&gt;
-    &lt;source src="example.mp4" type="video/mp4"&gt;
-    &lt;source src="example.webm" type="video/webm"&gt;
-    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
-&lt;/video&gt;</pre>
+- Save it as a .vtt file in a sensible place.
+- Link to the .vtt file with the {{htmlelement("track")}} element. `<track>` should be placed within `<audio>` or `<video>`, but after all `<source>` elements. Use the {{htmlattrxref("kind","track")}} attribute to specify whether the cues are subtitles, captions, or descriptions. Furthermore, use {{htmlattrxref("srclang","track")}} to tell the browser what language you have written the subtitles in.
 
-<p>This will result in a video that has subtitles displayed, kind of like this:</p>
+Here's an example:
 
-<p><img alt='Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+```html
+<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+```
 
-<p>For more details, please read <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a>. You can find <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">the example</a> that goes along with this article on Github, written by Ian Devlin (see the <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">source code</a> too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.</p>
+This will result in a video that has subtitles displayed, kind of like this:
 
-<div class="note">
-<p><strong>Note</strong>: Text tracks and transcriptions also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.</p>
-</div>
+![Video player with standard controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](https://mdn.mozillademos.org/files/7887/video-player-with-captions.png)
 
-<h2 id="Other_multimedia_content">Other multimedia content</h2>
+For more details, please read [Adding captions and subtitles to HTML5 video](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). You can find [the example](http://iandevlin.github.io/mdn/video-player-with-captions/) that goes along with this article on Github, written by Ian Devlin (see the [source code](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions) too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option — English, Deutsch, or Español.
 
-<p>The above sections don't cover all types of multimedia content that you might want to put on a web page. You might also need to deal with games, animations, slideshows, embedded video, and content created using other available technologies such as:</p>
+> **Примечание:** Text tracks and transcriptions also help you with {{glossary("SEO")}}, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Canvas_API">HTML5 canvas</a></li>
- <li>Flash</li>
- <li>Silverlight</li>
-</ul>
+## Other multimedia content
 
-<p>For such content, you need to deal with accessibility concerns on a case by case basis. In some cases it is not so bad, for example:</p>
+The above sections don't cover all types of multimedia content that you might want to put on a web page. You might also need to deal with games, animations, slideshows, embedded video, and content created using other available technologies such as:
 
-<ul>
- <li>If you are embedding audio content using a plugin technology like Flash or Silverlight, you can probably just provide an audio transcript in the same manner as we already showed above in the <a href="#transcript_examples">Transcript examples</a> section.</li>
- <li>If you are embedding video content using a plugin technology like Flash or Silverlight, you can take advantage of captioning/subtitling techniques available to those technologies. For example, see <a href="http://www.adobe.com/accessibility/products/flash/captions.html">Flash captions</a>, <a href="https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning">Using the Flash-Only Player API for Closed Captioning</a>, or <a href="https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/">Playing Subtitles with Videos in Silverlight</a>.</li>
-</ul>
+- [HTML5 canvas](/ru/docs/Web/API/Canvas_API)
+- Flash
+- Silverlight
 
-<p>However, other multimedia is not so easy to make accessible. If for example you are dealing with an immersive 3D game or virtual reality app, it really is quite difficult to provide text alternatives for such an experience, and you might argue that blind users are not really in the target audience bracket for such apps.</p>
+For such content, you need to deal with accessibility concerns on a case by case basis. In some cases it is not so bad, for example:
 
-<p>You can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible. Remember that accessibility is about doing as much as you can, rather than striving for 100% accessibility all the time, which is often impossible.</p>
+- If you are embedding audio content using a plugin technology like Flash or Silverlight, you can probably just provide an audio transcript in the same manner as we already showed above in the [Transcript examples](#transcript_examples) section.
+- If you are embedding video content using a plugin technology like Flash or Silverlight, you can take advantage of captioning/subtitling techniques available to those technologies. For example, see [Flash captions](http://www.adobe.com/accessibility/products/flash/captions.html), [Using the Flash-Only Player API for Closed Captioning](https://support.brightcove.com/en/video-cloud/docs/using-flash-only-player-api-closed-captioning), or [Playing Subtitles with Videos in Silverlight](https://blogs.msdn.microsoft.com/anilkumargupta/2009/05/01/playing-subtitles-with-videos-in-silverlight/).
 
-<h2 id="Summary">Summary</h2>
+However, other multimedia is not so easy to make accessible. If for example you are dealing with an immersive 3D game or virtual reality app, it really is quite difficult to provide text alternatives for such an experience, and you might argue that blind users are not really in the target audience bracket for such apps.
 
-<p>This chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.</p>
+You can however make sure that such an app has good enough color contrast and clear presentation so it is perceivable to those with low vision/color blindness, and also make it keyboard accessible. Remember that accessibility is about doing as much as you can, rather than striving for 100% accessibility all the time, which is often impossible.
 
-<p>{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}</p>
+## Summary
 
-<p> </p>
+This chapter has provided a summary of accessibility concerns for multimedia content, along with some practical solutions.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+{{PreviousMenuNext("Learn/Accessibility/WAI-ARIA_basics","Learn/Accessibility/Mobile", "Learn/Accessibility")}}
 
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
+## В этом модуле
 
-<p> </p>
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/wai-aria_basics/index.md b/files/ru/learn/accessibility/wai-aria_basics/index.md
index 9483d7223b6f5e..836526458793fc 100644
--- a/files/ru/learn/accessibility/wai-aria_basics/index.md
+++ b/files/ru/learn/accessibility/wai-aria_basics/index.md
@@ -6,309 +6,295 @@ tags:
 translation_of: Learn/Accessibility/WAI-ARIA_basics
 original_slug: Learn/Доступность/WAI-ARIA_basics
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
 
-<div>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</div>
+Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.
 
-<p class="summary">Исходя из предыдущей статьи, иногда создание сложных элементов UI, которые включают в себя несемантичный HTML и динамически обновляемый с помощью JavaScript контент, может быть затруднено. WAI-ARIA - это технология, которая может помочь в решении таких проблем, добавляя дополнительную разметку, которую браузеры и вспомогательные технологии могут распознавать и использовать, чтобы пользователи знали, что происходит. В этой статье мы покажем, как использовать эту технологию на базовом уровне для улучшения доступности.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, понимание [предыдущей статьи курса](/ru/docs/Learn/Accessibility).         |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:               | Ознакомиться с WAI-ARIA и узнать, как эту технологию можно использовать для включения полезной дополнительной семантики в целях повышения доступности. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript, понимание <a href="/en-US/docs/Learn/Accessibility">предыдущей статьи курса</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомиться с WAI-ARIA и узнать, как эту технологию можно использовать для включения полезной дополнительной семантики в целях повышения доступности.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое WAI-ARIA?
 
-<h2 id="Что_такое_WAI-ARIA">Что такое WAI-ARIA?</h2>
+Давайте начнём с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.
 
-<p>Давайте начнём с рассмотрения того, что такое WAI-ARIA и чем она может быть полезна.</p>
+### Новый набор проблем
 
-<h3 id="Новый_набор_проблем">Новый набор проблем</h3>
+С тех пор как веб-приложения стали более сложными и динамичными, появились новые специальные возможности и проблемы.
 
-<p>С тех пор как веб-приложения стали более сложными и динамичными, появились новые специальные возможности и проблемы.</p>
+Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( [`<nav>`](/ru/docs/Web/HTML/Element/nav "HTML-элемент <nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки."), [`<footer>`](/ru/docs/Web/HTML/Element/footer "HTML-элемент  <footer> представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы.")и т.д.). До того как они были доступны, разработчики просто использовали [`<div>`](/ru/docs/Web/HTML/Element/div 'Элемент разделения контента HTML (<div>) является базовым контейнером для элементов основного потока ( flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент <div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя ') с идентификаторами или классами, например `<div class="nav">`, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.
 
-<p>Например, HTML5 ввёл ряд семантических элементов, чтобы определить общую разметку страниц ( <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/nav" title="HTML-элемент &lt;nav> определяет отдельную секцию документа, назначение которой обозначение ссылок навигации (как внутри текущего документа, так и ведущих на другую страницу). В качестве примера такой секции можно привести меню, якорные ссылки."><code>&lt;nav&gt;</code></a>, <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/footer" title="HTML-элемент  &lt;footer> представляет нижний колонтитул (футер, подвал) для своего ближайшего элемента секционного контента или секционного корня. Футер обычно содержит информацию об авторе секции, информацию об авторском праве или ссылки на связанные документы."><code>&lt;footer&gt;</code></a>и т.д.). До того как они были доступны, разработчики просто использовали <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/div" title='Элемент разделения контента HTML (&lt;div>) является базовым контейнером для элементов основного потока ( flow content ). Он не влияет на контент или формат пока не стилизован, используя CSS. Являясь "чистым" контейнером, элемент &lt;div> по своему существу не представляет ничего. Между тем, он используется для группировки контента, что позволяет легко его стилизовать, используя '><code>&lt;div&gt;</code></a> с идентификаторами или классами, например <code>&lt;div class="nav"&gt;</code>, но это создавало проблемы, так как не было никакого простого способа найти определённый раздел страницы программным способом.</p>
+Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то ещё), например:
 
-<p>Первоначальным решением было добавить одну или несколько скрытых ссылок вверху страницы для ссылки на навигацию (или на что-то ещё), например:</p>
+```html
+<a href="#hidden" class="hidden">Skip to navigation</a>
+```
 
-<pre class="brush: html">&lt;a href="#hidden" class="hidden"&gt;Skip to navigation&lt;/a&gt;</pre>
+Но это все ещё не очень точно, и может использоваться только тогда, когда программа чтения с экрана читает сверху страницы.
 
-<p>Но это все ещё не очень точно, и может использоваться только тогда, когда программа чтения с экрана читает сверху страницы.</p>
+В качестве другого примера, в приложения стали использовать сложные элементы управления, такие как поля выбора даты, ползунки для выбора значений и т.д. HTML5 предоставляет специальные типы ввода для отображения таких элементов управления:
 
-<p>В качестве другого примера, в приложения стали использовать сложные элементы управления, такие как поля выбора даты, ползунки для выбора значений и т.д. HTML5 предоставляет специальные типы ввода для отображения таких элементов управления:</p>
+```html
+<input type="date">
+<input type="range">
+```
 
-<pre class="brush: html">&lt;input type="date"&gt;
-&lt;input type="range"&gt;</pre>
+Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных [`<div>`](/ru/docs/Web/HTML/Element/div "Элемент разделения контента HTML (<div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS.")элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.
 
-<p>Они не очень хорошо поддерживаются в разных браузерах, и их очень сложно стилизовать, что делает их не очень полезными для интеграции с дизайном сайтов. В результате разработчики нередко используют библиотеки JavaScript, которые генерируют такие элементы управления, как последовательность вложенных <a href="/ru/docs/Web/HTML/Element/div" title="Элемент разделения контента HTML (&lt;div>) является универсальным контейнером для потокового контента. Он не влияет на контент или макет до тех пор, пока не будет стилизован с помощью CSS."><code>&lt;div&gt;</code></a>элементов или ячеек таблиц с именами классов, которые затем стилизуются с помощью CSS и управляют с помощью JavaScript.</p>
+The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.
 
-<p>The problem here is that visually they work, but screenreaders can't make any sense of what they are at all, and their users just get told that they can see a jumble of elements with no semantics to describe what they mean.</p>
+### Enter WAI-ARIA
 
-<h3 id="Enter_WAI-ARIA">Enter WAI-ARIA</h3>
+[WAI-ARIA](https://www.w3.org/TR/wai-aria-1.1/) is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. There are three main features defined in the spec:
 
-<p><a href="https://www.w3.org/TR/wai-aria-1.1/">WAI-ARIA</a> is a specification written by the W3C, defining a set of additional HTML attributes that can be applied to elements to provide additional semantics and improve accessibility wherever it is lacking. There are three main features defined in the spec:</p>
+- **Roles** — These define what an element is or does. Many of these are so-called landmark roles, which largely duplicate the semantic value of HTML5 structural elements e.g. `role="navigation"` ({{htmlelement("nav")}}) or `role="complementary"` ({{htmlelement("aside")}}), but there are also others that describe different pages structures, such as `role="banner"`, `role="search"`, `role="tabgroup"`, `role="tab"`, etc., which are commonly found in UIs.
+- **Properties** — These define properties of elements, which can be used to give them extra meaning or semantics. As an example, `aria-required="true"` specifies that a form input needs to be filled in to be valid, whereas `aria-labelledby="label"` allows you to put an ID on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using `<label for="input">`. As an example, you could use `aria-labelledby` to specify that a key description contained in a {{htmlelement("div")}} is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the `alt` attribute. You can see an example of this at [Text alternatives](/ru/docs/Learn/Accessibility/HTML?document_saved=true#Text_alternatives).
+- **States** — Special properties that define the current conditions of elements, such as `aria-disabled="true"`, which specifies to a screenreader that a form input is currently disabled. States differ from properties in that properties don't change throughout the lifecycle of an app, whereas states can change, generally programmatically via JavaScript.
 
-<ul>
- <li><strong>Roles</strong> — These define what an element is or does. Many of these are so-called landmark roles, which largely duplicate the semantic value of HTML5 structural elements e.g. <code>role="navigation"</code> ({{htmlelement("nav")}}) or <code>role="complementary"</code> ({{htmlelement("aside")}}), but there are also others that describe different pages structures, such as <code>role="banner"</code>, <code>role="search"</code>, <code>role="tabgroup"</code>, <code>role="tab"</code>, etc., which are commonly found in UIs.</li>
- <li><strong>Properties</strong> — These define properties of elements, which can be used to give them extra meaning or semantics. As an example, <code>aria-required="true"</code> specifies that a form input needs to be filled in to be valid, whereas <code>aria-labelledby="label"</code> allows you to put an ID on an element, then reference it as being the label for anything else on the page, including multiple elements, which is not possible using <code>&lt;label for="input"&gt;</code>. As an example, you could use <code>aria-labelledby</code> to specify that a key description contained in a {{htmlelement("div")}} is the label for multiple table cells, or you could use it as an alternative to image alt text — specify existing information on the page as an image's alt text, rather than having to repeat it inside the <code>alt</code> attribute. You can see an example of this at <a href="/en-US/docs/Learn/Accessibility/HTML?document_saved=true#Text_alternatives">Text alternatives</a>.</li>
- <li><strong>States</strong> — Special properties that define the current conditions of elements, such as <code>aria-disabled="true"</code>, which specifies to a screenreader that a form input is currently disabled. States differ from properties in that properties don't change throughout the lifecycle of an app, whereas states can change, generally programmatically via JavaScript.</li>
-</ul>
+An important point about WAI-ARIA attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility APIs (where screenreaders get their information from). WAI-ARIA doesn't affect webpage structure, the DOM, etc., although the attributes can be useful for selecting elements by CSS.
 
-<p>An important point about WAI-ARIA attributes is that they don't affect anything about the web page, except for the information exposed by the browser's accessibility APIs (where screenreaders get their information from). WAI-ARIA doesn't affect webpage structure, the DOM, etc., although the attributes can be useful for selecting elements by CSS.</p>
+> **Примечание:** You can find a useful list of all the ARIA roles and their uses, with links to futher information, in the WAI-ARIA spec — see [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions).
+>
+> The spec also contains a list of all the properties and states, with links to further information — see [Definitions of States and Properties (all aria-\* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def).
 
-<div class="note">
-<p><strong>Note</strong>: You can find a useful list of all the ARIA roles and their uses, with links to futher information, in the WAI-ARIA spec — see <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a>.</p>
+### Where is WAI-ARIA supported?
 
-<p>The spec also contains a list of all the properties and states, with links to further information — see <a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a>.</p>
-</div>
+This is not an easy question to answer. It is difficult to find a conclusive resource that states what features of WAI-ARIA are supported, and where, because:
 
-<h3 id="Where_is_WAI-ARIA_supported">Where is WAI-ARIA supported?</h3>
+1.  There are a lot of features in the WAI-ARIA spec.
+2.  There are many combinations of operating system, browser, and screenreader to consider.
 
-<p>This is not an easy question to answer. It is difficult to find a conclusive resource that states what features of WAI-ARIA are supported, and where, because:</p>
+This last point is key — To use a screenreader in the first place, your operating system needs to run browsers that have the necessary accessibility APIs in place to expose the information screenreaders need to do their job. Most popular OSes have one or two browsers in place that screenreaders can work with. The Paciello Group has a fairly up-to-date post that provides data for this — see [Rough Guide: browsers, operating systems and screen reader support updated](https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/).
 
-<ol>
- <li>There are a lot of features in the WAI-ARIA spec.</li>
- <li>There are many combinations of operating system, browser, and screenreader to consider.</li>
-</ol>
+Next, you need to worry about whether the browsers in question support ARIA features and expose them via their APIs, but also whether screenreaders recognise that information and present it to their users in a useful way.
 
-<p>This last point is key — To use a screenreader in the first place, your operating system needs to run browsers that have the necessary accessibility APIs in place to expose the information screenreaders need to do their job. Most popular OSes have one or two browsers in place that screenreaders can work with. The Paciello Group has a fairly up-to-date post that provides data for this — see <a href="https://www.paciellogroup.com/blog/2014/10/rough-guide-browsers-operating-systems-and-screen-reader-support-updated/">Rough Guide: browsers, operating systems and screen reader support updated</a>.</p>
+1.  Browser support is generally quite good — at the time of writing, [caniuse.com](http://caniuse.com/#feat=wai-aria) stated that global browser support for WAI-ARIA was around 88%.
+2.  Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's [WAI-ARIA Screen reader compatibility](http://www.powermapper.com/tests/screen-readers/aria/) article.
 
-<p>Next, you need to worry about whether the browsers in question support ARIA features and expose them via their APIs, but also whether screenreaders recognise that information and present it to their users in a useful way.</p>
+In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.
 
-<ol>
- <li>Browser support is generally quite good — at the time of writing, <a href="http://caniuse.com/#feat=wai-aria">caniuse.com</a> stated that global browser support for WAI-ARIA was around 88%.</li>
- <li>Screenreader support for ARIA features isn't quite at this level, but the most popular screenreaders are getting there. You can get an idea of support levels by looking at Powermapper's <a href="http://www.powermapper.com/tests/screen-readers/aria/">WAI-ARIA Screen reader compatibility</a> article.</li>
-</ol>
+> **Примечание:** Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see [About jQuery UI: Deep accessibility support](https://jqueryui.com/about/#deep-accessibility-support)), [ExtJS](https://www.sencha.com/products/extjs/), and [Dojo/Dijit](https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html).
 
-<p>In this article, we won't attempt to cover every WAI-ARIA feature, and its exact support details. Instead, we will cover the most critical WAI-ARIA features for you to know about; if we don't mention any support details, you can assume that the feature is well-supported. We will clearly mention any exceptions to this.</p>
+### When should you use WAI-ARIA?
 
-<div class="note">
-<p><strong>Note</strong>: Some JavaScript libraries support WAI-ARIA, meaning that when they generate UI features like complex form controls, they add ARIA attributes to improve the accessibility of those features. If you are looking for a 3rd party JavaScript solution for rapid UI development, you should definitely consider the accessibility of its UI widgets as an important factor when making your choice. Good examples are jQuery UI (see <a href="https://jqueryui.com/about/#deep-accessibility-support">About jQuery UI: Deep accessibility support</a>), <a href="https://www.sencha.com/products/extjs/">ExtJS</a>, and <a href="https://dojotoolkit.org/reference-guide/1.10/dijit/a11y/statement.html">Dojo/Dijit</a>.</p>
-</div>
+We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:
 
-<h3 id="When_should_you_use_WAI-ARIA">When should you use WAI-ARIA?</h3>
+1.  **Signposts/Landmarks**: ARIA's `role` attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g `search`, `tabgroup`, `tab`, `listbox`, etc.
+2.  **Dynamic content updates**: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use `aria-live` to inform screenreader users when an area of content is updated, e.g. via [XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest), or [DOM APIs](/ru/docs/Web/API/Document_Object_Model).
+3.  **Enhancing keyboard accessibility**: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using `tabindex`).
+4.  **Accessibility of non-semantic controls**: When a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like `button`, `listbox`, or `tabgroup`, and properties like `aria-required` or `aria-posinset` to provide further clues as to functionality.
 
-<p>We talked about some of the problems that prompted WAI-ARIA to be created earlier on, but essentially, there are four main areas that WAI-ARIA is useful in:</p>
+One thing to remember though — **you should only use WAI-ARIA when you need to!** Ideally, you should _always_ use [native HTML features](/ru/docs/Learn/Accessibility/HTML) to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.
 
-<ol>
- <li><strong>Signposts/Landmarks</strong>: ARIA's <code>role</code> attribute values can act as landmarks that either replicate the semantics of HTML5 elements (e.g. {{htmlelement("nav")}}), or go beyond HTML5 semantics to provide signposts to different functional areas, e.g <code>search</code>, <code>tabgroup</code>, <code>tab</code>, <code>listbox</code>, etc.</li>
- <li><strong>Dynamic content updates</strong>: Screenreaders tend to have difficulty with reporting constantly changing content; with ARIA we can use <code>aria-live</code> to inform screenreader users when an area of content is updated, e.g. via <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>.</li>
- <li><strong>Enhancing keyboard accessibility</strong>: There are built-in HTML elements that have native keyboard accessibility; when other elements are used along with JavaScript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a result. Where this is unavoidable, WAI-ARIA provides a means to allow other elements to receive focus (using <code>tabindex</code>).</li>
- <li><strong>Accessibility of non-semantic controls</strong>: When a series of nested <code>&lt;div&gt;</code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, accessibility can suffer — screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In these situations, ARIA can help to provide what's missing with a combination of roles like <code>button</code>, <code>listbox</code>, or <code>tabgroup</code>, and properties like <code>aria-required</code> or <code>aria-posinset</code> to provide further clues as to functionality.</li>
-</ol>
+But again, only use it when necessary!
 
-<p>One thing to remember though — <strong>you should only use WAI-ARIA when you need to!</strong> Ideally, you should <em>always</em> use <a href="/en-US/docs/Learn/Accessibility/HTML">native HTML features</a> to provide the semantics required by screenreaders to tell their users what is going on. Sometimes this isn't possible, either because you have limited control over the code, or because you are creating something complex that doesn't have an easy HTML element to implement it. In such cases, WAI-ARIA can be a valuable accessibility enhancing tool.</p>
+> **Примечание:** Also, try to make sure you test your site with a variety of _real_ users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.
 
-<p>But again, only use it when necessary!</p>
+## Practical WAI-ARIA implementations
 
-<div class="note">
-<p><strong>Note</strong>: Also, try to make sure you test your site with a variety of <em>real</em> users — non-disabled people, people using screenreaders, people using keyboard navigation, etc. They will have better insights than you about how well it works.</p>
-</div>
+In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.
 
-<h2 id="Practical_WAI-ARIA_implementations">Practical WAI-ARIA implementations</h2>
+See our section on [testing screenreaders](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders) for more information.
 
-<p>In the next section we'll look at the four areas in more detail, along with practical examples. Before you continue, you should get a screenreader testing setup put in place, so you can test some of the examples as you go through.</p>
+### Signposts/Landmarks
 
-<p>See our section on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">testing screenreaders</a> for more information.</p>
+WAI-ARIA adds the [`role` attribute](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our [website-no-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/)) has the following structure:
 
-<h3 id="SignpostsLandmarks">Signposts/Landmarks</h3>
+```html
+<header>
+  <h1>...</h1>
+  <nav>
+    <ul>...</ul>
+    <form>
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
 
-<p>WAI-ARIA adds the <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions"><code>role</code> attribute</a> to browsers, which allows you to add extra semantic value to elements on your site wherever they are needed. The first major area in which this is useful is providing information for screenreaders so that their users can find common page elements. Let's look at an example — our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-no-roles">website-no-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-no-roles/">see it live</a>) has the following structure:</p>
+<main>
+  <article>...</article>
+  <aside>...</aside>
+</main>
 
-<pre class="brush: html">&lt;header&gt;
-  &lt;h1&gt;...&lt;/h1&gt;
-  &lt;nav&gt;
-    &lt;ul&gt;...&lt;/ul&gt;
-    &lt;form&gt;
-      &lt;!-- search form  --&gt;
-    &lt;/form&gt;
-  &lt;/nav&gt;
-&lt;/header&gt;
+<footer>...</footer>
+```
 
-&lt;main&gt;
-  &lt;article&gt;...&lt;/article&gt;
-  &lt;aside&gt;...&lt;/aside&gt;
-&lt;/main&gt;
+If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:
 
-&lt;footer&gt;...&lt;/footer&gt;</pre>
+- On the `<header>` element — "banner, 2 items" (it contains a heading and the `<nav>`).
+- On the `<nav>` element — "navigation 2 items" (it contains a list and a form).
+- On the `<main>` element — "main 2 items" (it contains an article and an aside).
+- On the `<aside>` element — "complementary 2 items" (it contains a heading and a list).
+- On the search form input — "Search query, insertion at beginning of text".
+- On the `<footer>` element — "footer 1 item".
 
-<p>If you try testing the example with a screenreader in a modern browser, you'll already get some useful information. For example, VoiceOver gives you the following:</p>
+If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.
 
-<ul>
- <li>On the <code>&lt;header&gt;</code> element — "banner, 2 items" (it contains a heading and the <code>&lt;nav&gt;</code>).</li>
- <li>On the <code>&lt;nav&gt;</code> element — "navigation 2 items" (it contains a list and a form).</li>
- <li>On the <code>&lt;main&gt;</code> element — "main 2 items" (it contains an article and an aside).</li>
- <li>On the <code>&lt;aside&gt;</code> element — "complementary 2 items" (it contains a heading and a list).</li>
- <li>On the search form input — "Search query, insertion at beginning of text".</li>
- <li>On the <code>&lt;footer&gt;</code> element — "footer 1 item".</li>
-</ul>
+![](https://mdn.mozillademos.org/files/14420/landmarks-list.png)
 
-<p>If you go to VoiceOver's landmarks menu (accessed using VoiceOver key + U and then using the cursor keys to cycle through the menu choices), you'll see that most of the elements are nicely listed so they can be accessed quickly.</p>
+However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (`<input type="search">`). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14420/landmarks-list.png" style="display: block; margin: 0 auto;"></p>
+Let's improve it by the use of some ARIA features. First, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see [index.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html) and [style.css](https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css)), or navigating to our [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) example ([see it live](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)), which has a structure like this:
 
-<p>However, we could do better here. the search form is a really important landmark that people will want to find, but it is not listed in the landmarks menu or treated like a notable landmark, beyond the actual input being called out as a search input (<code>&lt;input type="search"&gt;</code>). In addition, some older browsers (most notably IE8) don't recognise the semantics of the HTML5 elements.</p>
+```html
+<header>
+  <h1>...</h1>
+  <nav role="navigation">
+    <ul>...</ul>
+    <form role="search">
+      <!-- search form  -->
+    </form>
+  </nav>
+</header>
 
-<p>Let's improve it by the use of some ARIA features. First, we'll add some role attributes to our HTML structure. You can try taking a copy of our original files (see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/index.html">index.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/website-no-roles/style.css">style.css</a>), or navigating to our <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> example (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">see it live</a>), which has a structure like this:</p>
+<main>
+  <article role="article">...</article>
+  <aside role="complementary">...</aside>
+</main>
 
-<pre class="brush: html">&lt;header&gt;
-  &lt;h1&gt;...&lt;/h1&gt;
-  &lt;nav role="navigation"&gt;
-    &lt;ul&gt;...&lt;/ul&gt;
-    &lt;form role="search"&gt;
-      &lt;!-- search form  --&gt;
-    &lt;/form&gt;
-  &lt;/nav&gt;
-&lt;/header&gt;
+<footer>...</footer>
+```
 
-&lt;main&gt;
-  &lt;article role="article"&gt;...&lt;/article&gt;
-  &lt;aside role="complementary"&gt;...&lt;/aside&gt;
-&lt;/main&gt;
+We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label), which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.
 
-&lt;footer&gt;...&lt;/footer&gt;</pre>
+```html
+<input type="search" name="q" placeholder="Search query" aria-label="Search through site content">
+```
 
-<p>We've also given you a bonus feature in this example — the {{htmlelement("input")}} element has been given the attribute <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code>, which gives it a descriptive label to be read out by a screenreader, even though we haven't included a {{htmlelement("label")}} element. In cases like these, this is very useful — a search form like this one is a very common, easily recognised feature, and adding a visual label would spoil the page design.</p>
+Now if we use VoiceOver to look at this example, we get some improvements:
 
-<pre class="brush: html">&lt;input type="search" name="q" placeholder="Search query" aria-label="Search through site content"&gt;</pre>
+- The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.
+- The label text contained in the `aria-label` attribute is read out when the form input is highlighted.
 
-<p>Now if we use VoiceOver to look at this example, we get some improvements:</p>
+Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just `<div>`s, you should definitely include the ARIA roles to provide these much needed semantics!
 
-<ul>
- <li>The search form is called out as a separate item, both when browsing through the page, and in the Landmarks menu.</li>
- <li>The label text contained in the <code>aria-label</code> attribute is read out when the form input is highlighted.</li>
-</ul>
+The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the [Accessibility of non-semantic controls](#accessibility_of_non-semantic_controls) section. For now though, let's look at how ARIA can help with dynamic content updates.
 
-<p>Beyond this, the site is more likely to be accessible to users of older browsers such as IE8; it is worth including ARIA roles for that purpose. And if for some reason your site is built using just <code>&lt;div&gt;</code>s, you should definitely include the ARIA roles to provide these much needed semantics!</p>
+### Dynamic content updates
 
-<p>The improved semantics of the search form have shown what is made possible when ARIA goes beyond the semantics available in HTML5. You'll see a lot more about these semantics and the power of ARIA properties/attributes below, especially in the <a href="#accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</a> section. For now though, let's look at how ARIA can help with dynamic content updates.</p>
+Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.
 
-<h3 id="Dynamic_content_updates">Dynamic content updates</h3>
+The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like [XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest), [Fetch](/ru/docs/Web/API/Fetch_API), or [DOM APIs](/ru/docs/Web/API/Document_Object_Model). These are sometimes referred to as **live regions**.
 
-<p>Content loaded into the DOM can be easily accessed using a screenreader, from textual content to alternative text attached to images. Traditional static websites with largely text content are therefore easy to make accessible for people with visual impairments.</p>
+Let's look at a quick example — see [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) (also [see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html)). In this example we have a simple random quote box:
 
-<p>The problem is that modern web apps are often not just static text — they tend to have a lot of dynamically updating content, i.e. content that updates without the entire page reloading via a mechanism like <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, or <a href="/en-US/docs/Web/API/Document_Object_Model">DOM APIs</a>. These are sometimes referred to as <strong>live regions</strong>.</p>
+```html
+<section>
+  <h1>Random quote</h1>
+  <blockquote>
+    <p></p>
+  </blockquote>
+</section>
+```
 
-<p>Let's look at a quick example — see <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> (also <a href="http://mdn.github.io/learning-area/accessibility/aria/aria-no-live.html">see it running live</a>). In this example we have a simple random quote box:</p>
+Our JavaScript loads a JSON file via [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) containing a series of random quotes and their authors. Once that is done, we start up a [`setInterval()`](/en-US/docs/Web/API/WindowTimers/setInterval) loop that loads a new random quote into the quote box every 10 seconds:
 
-<pre class="brush: html">&lt;section&gt;
-  &lt;h1&gt;Random quote&lt;/h1&gt;
-  &lt;blockquote&gt;
-    &lt;p&gt;&lt;/p&gt;
-  &lt;/blockquote&gt;
-&lt;/section&gt;</pre>
+```js
+var intervalID = window.setInterval(showQuote, 10000);
+```
 
-<p>Our JavaScript loads a JSON file via <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> containing a series of random quotes and their authors. Once that is done, we start up a <code><a href="/en-US/docs/Web/API/WindowTimers/setInterval">setInterval()</a></code> loop that loads a new random quote into the quote box every 10 seconds:</p>
+This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.
 
-<pre class="brush: js">var intervalID = window.setInterval(showQuote, 10000);</pre>
+WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the [`aria-live`](https://www.w3.org/TR/wai-aria-1.1/#aria-live) property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:
 
-<p>This works OK, but it is not good for accessibility — the content update is not detected by screenreaders, so their users would not know what is going on. This is a fairly trivial example, but just imagine if you were creating a complex UI with lots of constantly updating content, like a chat room, or a strategy game UI, or a live updating shopping cart display — it would be impossible to use the app in any effective way without some kind of way of alerting the user to the updates.</p>
+- `off:` The default. Updates should not be announced.
+- `polite`: Updates should be announced only if the user is idle.
+- `assertive`: Updates should be announced to the user as soon as possible.
 
-<p>WAI-ARIA fortunately provides a useful mechanism to provide these alerts — the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-live">aria-live</a></code> property. Applying this to an element causes screenreaders to read out the content that is updated. How urgently the content is read out depends on the attribute value:</p>
+We'd like you to take a copy of [aria-no-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html) and [quotes.json](https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json), and update your `<section>` tag as follows:
 
-<ul>
- <li><code>off:</code> The default. Updates should not be announced.</li>
- <li><code>polite</code>: Updates should be announced only if the user is idle.</li>
- <li><code>assertive</code>: Updates should be announced to the user as soon as possible.</li>
-</ul>
+```html
+<section aria-live="assertive">
+```
 
-<p>We'd like you to take a copy of <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-no-live.html">aria-no-live.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/quotes.json">quotes.json</a>, and update your <code>&lt;section&gt;</code> tag as follows:</p>
+This will cause a screenreader to read out the content as it is updated.
 
-<pre class="brush: html">&lt;section aria-live="assertive"&gt;</pre>
+> **Примечание:** Most browsers will throw a security exception if you try to do an `XMLHttpRequest` call from a `file://` URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example [using GitHub](/ru/docs/Learn/Common_questions/Using_Github_pages), or a local web server like [Python's SimpleHTTPServer](http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/).
 
-<p>This will cause a screenreader to read out the content as it is updated.</p>
+There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the [`aria-atomic`](https://www.w3.org/TR/wai-aria-1.1/#aria-atomic) property to the section. Update your `<section>` tag again, like so:
 
-<div class="note">
-<p><strong>Note</strong>: Most browsers will throw a security exception if you try to do an <code>XMLHttpRequest</code> call from a <code>file://</code> URL, e.g. if you just load the file by loading it directly into the browser (via double clicking, etc.). To get it to run, you will need to upload it to a web server, for example <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">using GitHub</a>, or a local web server like <a href="http://www.pythonforbeginners.com/modules-in-python/how-to-use-simplehttpserver/">Python's SimpleHTTPServer</a>.</p>
-</div>
+```html
+<section aria-live="assertive" aria-atomic="true">
+```
 
-<p>There is an additional consideration here — only the bit of text that updates is read out. It might be nice if we always read out the heading too, so the user can remember what is being read out. To do this, we can add the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-atomic">aria-atomic</a></code> property to the section. Update your <code>&lt;section&gt;</code> tag again, like so:</p>
+The `aria-atomic="true"` attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.
 
-<pre class="brush: html">&lt;section aria-live="assertive" aria-atomic="true"&gt;</pre>
+> **Примечание:** You can see the finished example at [aria-live.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-live.html)).
 
-<p>The <code>aria-atomic="true"</code> attribute tells screenreaders to read out the entire element contents as one atomic unit, not just the bits that were updated.</p>
+> **Примечание:** The [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.
 
-<div class="note">
-<p><strong>Note</strong>: You can see the finished example at <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-live.html">aria-live.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-live.html">see it running live</a>).</p>
-</div>
+### Enhancing keyboard accessibility
 
-<div class="note">
-<p><strong>Note</strong>: The <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> property is also quite useful for controlling what gets read out when a live region is updated. You can for example only get content additions or removals read out.</p>
-</div>
+As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a `<select>` box).
 
-<h3 id="Enhancing_keyboard_accessibility">Enhancing keyboard accessibility</h3>
+However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.
 
-<p>As discussed in a few other places in the module, one of the key strengths of HTML with respect to accessibility is the built-in keyboard accessibility of features such as buttons, form controls, and links. Generally, you are able to use the tab key to move between controls, the Enter/Return key to select or activate controls, and occasionally other controls as needed (for example the up and down cursor to move between options in a <code>&lt;select&gt;</code> box).</p>
+In terms of making non-focusable code focusable, WAI-ARIA extends the `tabindex` attribute with some new values:
 
-<p>However, sometimes you will end up having to write code that either uses non-semantic elements as buttons (or other types of control), or uses focusable controls for not quite the right purpose. You might be trying to fix some bad code you've inherited, or you might be building some kind of complex widget that requires it.</p>
+- `tabindex="0"` — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of `tabindex`.
+- `tabindex="-1"` — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links.
 
-<p>In terms of making non-focusable code focusable, WAI-ARIA extends the <code>tabindex</code> attribute with some new values:</p>
+We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see [Building keyboard accessibility back in](/ru/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in).
 
-<ul>
- <li><code>tabindex="0"</code> — as indicated above, this value allows elements that are not normally tabbable to become tabbable. This is the most useful value of <code>tabindex</code>.</li>
- <li><code>tabindex="-1"</code> — this allows not normally tabbable elements to receive focus programmatically, e.g. via JavaScript, or as the target of links. </li>
-</ul>
+### Accessibility of non-semantic controls
 
-<p>We discussed this in more detail and showed a typical implementation back in our HTML accessibility article — see <a href="/en-US/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a>.</p>
+This follows on from the previous section — when a series of nested `<div>`s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.
 
-<h3 id="Accessibility_of_non-semantic_controls">Accessibility of non-semantic controls</h3>
+#### Form validation and error alerts
 
-<p>This follows on from the previous section — when a series of nested <code>&lt;div&gt;</code>s along with CSS/JavaScript is used to create a complex UI-feature, or a native control is greatly enhanced/changed via JavaScript, not only can keyboard accessibility suffer, but screenreader users will find it difficult to work out what the feature does if there are no semantics or other clues. In such situations, ARIA can help to provide those missing semantics.</p>
+First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read [Keeping it unobtrusive](/ru/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive) for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:
 
-<h4 id="Form_validation_and_error_alerts">Form validation and error alerts</h4>
+```html
+<div class="errors" role="alert" aria-relevant="all">
+  <ul>
+  </ul>
+</div>
+```
 
-<p>First of all, let's revisit the form example we first looked at in our CSS and JavaScript accessibility article (read <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Keeping_it_unobtrusive">Keeping it unobtrusive</a> for a full recap). At the end of this section we showed that we have included some ARIA attributes on the error message box that appears when there are validation errors when you try to submit the form:</p>
+- [`role="alert"`](https://www.w3.org/TR/wai-aria-1.1/#alert) automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like [`alert()`](/en-US/docs/Web/API/Window/alert) calls have a number of accessibility problems; see [Popup Windows](http://webaim.org/techniques/javascript/other#popups) by WebAIM).
+- An [`aria-relevant`](https://www.w3.org/TR/wai-aria-1.1/#aria-relevant) value of `all` instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.
 
-<pre class="brush: html"><code class="language-html">&lt;div class="errors" role="alert" aria-relevant="all"&gt;
-  &lt;ul&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;</code></pre>
+We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?
 
-<ul>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#alert">role="alert"</a></code> automatically turns the element it is applied to into a live region, so changes to it are read out; it also semantically identifies it as an alert message (important time/context sensitive information), and represents a better, more accessible way of delivering an alert to a user (modal dialogs like <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code> calls have a number of accessibility problems; see <a href="http://webaim.org/techniques/javascript/other#popups">Popup Windows</a> by WebAIM).</li>
- <li>An <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-relevant">aria-relevant</a></code> value of <code>all</code> instructs the screenreader to read out the contents of the error list when any changes are made to it — i.e. when errors are added or removed. This is useful because the user will want to know what errors are left, not just what has been added or removed from the list.</li>
-</ul>
+1.  At this point, take a copy of our [form-validation.html](https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html) and [validation.js](https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js) files, and save them in a local directory.
+2.  Open them both in a text editor and have a look at how the code works.
+3.  First of all, add a paragraph just above the opening `<form>` tag, like the one below, and mark both the form `<label>`s with an asterisk. This is normally how we mark required fields for sighted users.
 
-<p>We could go further with our ARIA usage, and provide some more validation help. How about indicating whether fields are required in the first place, and what range the age should be?</p>
-
-<ol>
- <li>At this point, take a copy of our <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/form-validation.html">form-validation.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/accessibility/css/validation.js">validation.js</a> files, and save them in a local directory.</li>
- <li>Open them both in a text editor and have a look at how the code works.</li>
- <li>First of all, add a paragraph just above the opening <code>&lt;form&gt;</code> tag, like the one below, and mark both the form <code>&lt;label&gt;</code>s with an asterisk. This is normally how we mark required fields for sighted users.
-  <pre class="brush: html">&lt;p&gt;Fields marked with an asterisk (*) are required.&lt;/p&gt;</pre>
- </li>
- <li>This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-required">aria-required</a></code> attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the <code>&lt;input&gt;</code> elements like so:
-  <pre class="brush: html">&lt;input type="text" name="name" id="name" aria-required="true"&gt;
-
-&lt;input type="number" name="age" id="age" aria-required="true"&gt;</pre>
- </li>
- <li>If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".</li>
- <li>It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin">aria-valuemin</a></code> and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax">aria-valuemax</a></code> properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 <code>placeholder</code> attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this:
-  <pre class="brush: html">&lt;input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true"&gt;</pre>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: You can see the finished example live at <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html">form-validation-updated.html</a>.</p>
-</div>
+    ```html
+    <p>Fields marked with an asterisk (*) are required.</p>
+    ```
 
-<p>WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-label">aria-label</a></code> property to provide a label where we don't want the label to be visible to sighted users (see the <a href="#signposts/landmarks">Signposts/Landmarks</a> section, above). There are some other labelling techniques that use other properties such as <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby">aria-labelledby</a></code> if you want to designate a non-<code>&lt;label&gt;</code> element as a label or label multiple form inputs with the same label, and <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-describedby">aria-describedby</a></code>, if you want to associate other information with a form input and have it read out as well. See <a href="http://webaim.org/techniques/forms/advanced">WebAIM's Advanced Form Labeling article</a> for more details.</p>
+4.  This makes visual sense, but it isn't as easy to understand for screenreader users. Fortunately, WAI-ARIA provides the [`aria-required`](https://www.w3.org/TR/wai-aria-1.1/#aria-required) attribute to give screenreaders hints that they should tell users that form inputs need to be filled in. Update the `<input>` elements like so:
 
-<p>There are many other useful properties and states too, for indicating the status of form elements. For example, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-disabled">aria-disabled</a>="true"</code> can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.</p>
+    ```html
+    <input type="text" name="name" id="name" aria-required="true">
 
-<p>If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our <a href="http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html">form-validation-checkbox-disabled.html</a> demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:</p>
+    <input type="number" name="age" id="age" aria-required="true">
+    ```
 
-<pre class="brush: html">&lt;p class="hidden-alert" aria-live="assertive"&gt;&lt;/p&gt;</pre>
+5.  If you save the example now and test it with a screenreader, you should hear something like "Enter your name star, required, edit text".
+6.  It might also be useful if we give screenreader users and sighted users an idea of what the age value should be. This is often presented as a tooltip, or placeholder inside the form field perhaps. WAI-ARIA does include [`aria-valuemin`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemin) and [`aria-valuemax`](https://www.w3.org/TR/wai-aria-1.1/#aria-valuemax) properties to specify min and max values, but these currently don't seem very well supported; a better supported feature is the HTML5 `placeholder` attribute, which can contain a message that is shown in the input when no value is entered, and is read out by a number of screenreaders. Update your number input like this:
 
-<p>which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the <code>aria-disabled</code> state, and some visual indicators too:</p>
+    ```html
+    <input type="number" name="age" id="age" placeholder="Enter 1 to 150" aria-required="true">
+    ```
 
-<pre class="brush: js">function toggleMusician(bool) {
+> **Примечание:** You can see the finished example live at [form-validation-updated.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-updated.html).
+
+WAI-ARIA also enables some advanced form labelling techniques, beyond the classic {{htmlelement("label")}} element. We already talked about using the [`aria-label`](https://www.w3.org/TR/wai-aria-1.1/#aria-label) property to provide a label where we don't want the label to be visible to sighted users (see the [Signposts/Landmarks](#signposts/landmarks) section, above). There are some other labelling techniques that use other properties such as [`aria-labelledby`](https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby) if you want to designate a non-`<label>` element as a label or label multiple form inputs with the same label, and [`aria-describedby`](https://www.w3.org/TR/wai-aria-1.1/#aria-describedby), if you want to associate other information with a form input and have it read out as well. See [WebAIM's Advanced Form Labeling article](http://webaim.org/techniques/forms/advanced) for more details.
+
+There are many other useful properties and states too, for indicating the status of form elements. For example, `aria-disabled="true"` can be used to indicate that a form field is disabled. Many browsers will just skip past disabled form fields, and they won't even be read out by screenreaders, but in some cases they will be perceived, so it is a good idea to include this attribute to let the screenreader know that a disabled input is in fact disabled.
+
+If the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the result is. For example, in our [form-validation-checkbox-disabled.html](http://mdn.github.io/learning-area/accessibility/aria/form-validation-checkbox-disabled.html) demo there is a checkbox that when checked, enables another form input to allow further information be entered. We've set up a hidden live region:
+
+```html
+<p class="hidden-alert" aria-live="assertive"></p>
+```
+
+which is hidden from view using absolute positioning. When this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the result of checking this checkbox is, as well as updating the `aria-disabled` state, and some visual indicators too:
+
+```js
+function toggleMusician(bool) {
   var instruItem = formItems[formItems.length-1];
   if(bool) {
     instruItem.input.disabled = false;
@@ -322,96 +308,89 @@ original_slug: Learn/Доступность/WAI-ARIA_basics
     instruItem.input.removeAttribute('aria-label');
     hiddenAlert.textContent = 'Instruments played field now disabled.';
   }
-}</pre>
+}
+```
 
-<h4 id="Describing_non-semantic_buttons_as_buttons">Describing non-semantic buttons as buttons</h4>
+#### Describing non-semantic buttons as buttons
 
-<p>A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see <a href="/en-US/docs/Learn/Accessibility/HTML#UI_controls">UI controls</a> in the HTML accessibility article, and <a href="#enhancing_keyboard_accessibility">Enhancing keyboard accessibility</a>, above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using <code>tabindex</code> and a bit of JavaScript.</p>
+A few times in this course already, we've mentioned the native accessibilty of (and the accessibility issues behind using other elements to fake) buttons, links, or form elements (see [UI controls](/ru/docs/Learn/Accessibility/HTML#UI_controls) in the HTML accessibility article, and [Enhancing keyboard accessibility](#enhancing_keyboard_accessibility), above). Basically, you can add keyboard accessibility back in without too much trouble in many cases, using `tabindex` and a bit of JavaScript.
 
-<p>But what about screenreaders? They still won't see the elements as buttons. If we test our <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a> example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.</p>
+But what about screenreaders? They still won't see the elements as buttons. If we test our [fake-div-buttons.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html) example in a screenreader, our fake buttons will be reported using phrases like "Click me!, group", which is obviously confusing.
 
-<p>We can fix this using a WAI-ARIA role. Make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html">fake-div-buttons.html</a>, and add <code><a href="https://www.w3.org/TR/wai-aria-1.1/#button">role="button"</a></code> to each button <code>&lt;div&gt;</code>, for example:</p>
+We can fix this using a WAI-ARIA role. Make a local copy of [fake-div-buttons.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/accessibility/fake-div-buttons.html), and add [`role="button"`](https://www.w3.org/TR/wai-aria-1.1/#button) to each button `<div>`, for example:
 
-<pre>&lt;div data-message="This is from the first button" tabindex="0" role="button"&gt;Click me!&lt;/div&gt;</pre>
+```
+<div data-message="This is from the first button" tabindex="0" role="button">Click me!</div>
+```
 
-<p>Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.</p>
+Now when you try this using a screenreader, you'll have buttons be reported using phrases like "Click me!, button" — much better.
 
-<div class="note">
-<p><strong>Note</strong>: Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!</p>
-</div>
+> **Примечание:** Don't forget however that using the correct semantic element where possible is always better. If you want to create a button, and can use a {{htmlelement("button")}} element, you should use a {{htmlelement("button")}} element!
 
-<h4 id="Guiding_users_through_complex_widgets">Guiding users through complex widgets</h4>
+#### Guiding users through complex widgets
 
-<p>There are a whole host of other <a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">roles</a> that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example <code><a href="https://www.w3.org/TR/wai-aria-1.1/#combobox">combobox</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#slider">slider</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tree">tree</a></code>. You can see a number of userful examples in the <a href="https://dequeuniversity.com/library/">Deque university code library</a>, to give you an idea of how such controls can be made accessible.</p>
+There are a whole host of other [roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) that can identify non-semantic element structures as common UI features that go beyond what's available in standard HTML, for example [`combobox`](https://www.w3.org/TR/wai-aria-1.1/#combobox), [`slider`](https://www.w3.org/TR/wai-aria-1.1/#slider), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel), [`tree`](https://www.w3.org/TR/wai-aria-1.1/#tree). You can see a number of userful examples in the [Deque university code library](https://dequeuniversity.com/library/), to give you an idea of how such controls can be made accessible.
 
-<p>Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see <a href="/en-US/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things">Hiding things</a> in our CSS and JavaScript accessibility article), which you can find at <a class="external external-icon" href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">Tabbed info box example</a> (see <a class="external external-icon" href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>).</p>
+Let's go through an example of our own. We'll return to our simple absolutely-positioned tabbed interface (see [Hiding things](/ru/docs/Learn/Accessibility/CSS_and_JavaScript#Hiding_things) in our CSS and JavaScript accessibility article), which you can find at [Tabbed info box example](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) (see [source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)).
 
-<p>This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.</p>
+This example as-is works fine in terms of keyboard accessibility — you can happily tab between the different tabs and select them to show the tab contents. It is also fairly accessible too — you can scroll through the content and use the headings to navigate , even if you can't see what is happening on screen. It is however not that obvious what the content is — a screenreader currently reports the content as a list of links, and some content with three headings. It doesn't give you any idea of what the relationship is between the content. Giving the user more clues as to the structure of the content is always good.
 
-<p>To improve things, we've created a new version of the example called <a href="https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html">aria-tabbed-info-box.html</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html">see it running live</a>). We've updated the structure of the tabbed interface like so:</p>
+To improve things, we've created a new version of the example called [aria-tabbed-info-box.html](https://github.com/mdn/learning-area/blob/master/accessibility/aria/aria-tabbed-info-box.html) ([see it running live](http://mdn.github.io/learning-area/accessibility/aria/aria-tabbed-info-box.html)). We've updated the structure of the tabbed interface like so:
 
-<pre class="brush: html">&lt;ul role="tablist"&gt;
-  &lt;li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0"&gt;Tab 1&lt;/li&gt;
-  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0"&gt;Tab 2&lt;/li&gt;
-  &lt;li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0"&gt;Tab 3&lt;/li&gt;
-&lt;/ul&gt;
-&lt;div class="panels"&gt;
-  &lt;article class="active-panel" role="tabpanel" aria-hidden="false"&gt;
+```html
+<ul role="tablist">
+  <li class="active" role="tab" aria-selected="true" aria-setsize="3" aria-posinset="1" tabindex="0">Tab 1</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="2" tabindex="0">Tab 2</li>
+  <li role="tab" aria-selected="false" aria-setsize="3" aria-posinset="3" tabindex="0">Tab 3</li>
+</ul>
+<div class="panels">
+  <article class="active-panel" role="tabpanel" aria-hidden="false">
     ...
-  &lt;/article&gt;
-  &lt;article role="tabpanel" aria-hidden="true"&gt;
+  </article>
+  <article role="tabpanel" aria-hidden="true">
     ...
-  &lt;/article&gt;
-  &lt;article role="tabpanel" aria-hidden="true"&gt;
+  </article>
+  <article role="tabpanel" aria-hidden="true">
     ...
-  &lt;/article&gt;
-&lt;/div&gt;</pre>
-
-<div class="note">
-<p><strong>Note</strong>: The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.</p>
+  </article>
 </div>
+```
 
-<p>The new features are as follows:</p>
+> **Примечание:** The most striking change here is that we've removed the links that were originally present in the example, and just used the list items as the tabs — this was done because it makes things less confusing for screenreader users (the links don't really take you anywhere; they just change the view), and it allows the setsize/position in set features to work better — when these were put on the links, the browser kept reporting "1 of 1" all the time, not "1 of 3", "2 of 3", etc.
 
-<ul>
- <li>New roles — <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tablist">tablist</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tab">tab</a></code>, <code><a href="https://www.w3.org/TR/wai-aria-1.1/#tabpanel">tabpanel</a></code> — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.</li>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-selected">aria-selected</a></code> — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-hidden">aria-hidden</a></code> — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.</li>
- <li><code>tabindex="0"</code> — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.</li>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-setsize">aria-setsize</a></code> — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.</li>
- <li><code><a href="https://www.w3.org/TR/wai-aria-1.1/#aria-posinset">aria-posinset</a></code> — This property allows you to specify what position in a series an element is in. Along with <code>aria-setsize</code>, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.</li>
-</ul>
+The new features are as follows:
 
-<p>In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the <code>aria-hidden</code> settings (only the non-hidden tab ever has <code>aria-hidden="false"</code> set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.</p>
+- New roles — [`tablist`](https://www.w3.org/TR/wai-aria-1.1/#tablist), [`tab`](https://www.w3.org/TR/wai-aria-1.1/#tab), [`tabpanel`](https://www.w3.org/TR/wai-aria-1.1/#tabpanel) — these identify the important areas of the tabbed interface — the container for the tabs, the tabs themselves, and the corresponding tabpanels.
+- [`aria-selected`](https://www.w3.org/TR/wai-aria-1.1/#aria-selected) — Defines which tab is currently selected. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
+- [`aria-hidden`](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) — Hides an element from being read out by a screenreader. As different tabs are selected by the user, the value of this attribute on the different tabs is updated via JavaScript.
+- `tabindex="0"` — As we've removed the links, we need to give the list items this attribute to provide it with keyboard focus.
+- [`aria-setsize`](https://www.w3.org/TR/wai-aria-1.1/#aria-setsize) — This property allows you to specify to screenreaders that an element is part of a series, and how many items the series has.
+- [`aria-posinset`](https://www.w3.org/TR/wai-aria-1.1/#aria-posinset) — This property allows you to specify what position in a series an element is in. Along with `aria-setsize`, it provides a screenreader with enough information to tell you that you are currently on item "1 of 3", etc. In many cases, browsers should be able to infer this information from the element hierarchy, but it certainly helps to provide more clues.
 
-<div class="note">
-<p><strong>Note</strong>: If there is anything you explicitly don't want screen readers to read out, you can give them the <code>aria-hidden="true"</code>  attribute.</p>
-</div>
+In our tests, this new structure did serve to improve things overall. The tabs are now recognised as tabs (e.g. "tab" is spoken by the screenreader), the selected tab is indicated by "selected" being read out with the tab name, and the screenreader also tells you which tab number you are currently on. In addition, because of the `aria-hidden` settings (only the non-hidden tab ever has `aria-hidden="false"` set), the non-hidden content is the only one you can navigate down to, meaning the selected content is easier to find.
 
-<h2 id="Summary">Summary</h2>
+> **Примечание:** If there is anything you explicitly don't want screen readers to read out, you can give them the `aria-hidden="true"` attribute.
 
-<p>This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.</p>
+## Summary
 
-<h2 id="See_also">See also</h2>
+This article has by no means covered all that's available in WAI-ARIA, but it should have given you enough information to understand how to use it, and know some of the most common patterns you will encounter that require it.
 
-<ul>
- <li><a href="https://www.w3.org/TR/wai-aria-1.1/#role_definitions">Definition of Roles</a> — ARIA roles reference.</li>
- <li><a href="https://www.w3.org/TR/wai-aria-1.1/#state_prop_def">Definitions of States and Properties (all aria-* attributes)</a> — properties and states reference.</li>
- <li><a href="https://dequeuniversity.com/library/">Deque university code library</a> — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.</li>
- <li><a href="http://w3c.github.io/aria-practices/">WAI-ARIA Authoring Practices</a> — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.</li>
- <li><a href="https://www.w3.org/TR/html-aria/">ARIA in HTML</a> — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.</li>
-</ul>
+## See also
 
-<p>{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}</p>
+- [Definition of Roles](https://www.w3.org/TR/wai-aria-1.1/#role_definitions) — ARIA roles reference.
+- [Definitions of States and Properties (all aria-\* attributes)](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def) — properties and states reference.
+- [Deque university code library](https://dequeuniversity.com/library/) — a library of really useful practical examples showing complex UI controls made accessible using WAI-ARIA features.
+- [WAI-ARIA Authoring Practices](http://w3c.github.io/aria-practices/) — very detailed design patterns from the W3C, explaining how to implement different types of complex UI control whilst making them accessible using WAI-ARIA features.
+- [ARIA in HTML](https://www.w3.org/TR/html-aria/) — A W3C spec that defines, for each HTML feature, what accessibility (ARIA) semantics that feature implicitly has set on it by the browser, and what WAI-ARIA features you may set on it if extra semantics are required.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+{{PreviousMenuNext("Learn/Accessibility/CSS_and_JavaScript","Learn/Accessibility/Multimedia", "Learn/Accessibility")}}
 
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
+## В этом модуле
+
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/accessibility/what_is_accessibility/index.md b/files/ru/learn/accessibility/what_is_accessibility/index.md
index bae890df79cbc6..484efbba471786 100644
--- a/files/ru/learn/accessibility/what_is_accessibility/index.md
+++ b/files/ru/learn/accessibility/what_is_accessibility/index.md
@@ -17,195 +17,158 @@ tags:
 translation_of: Learn/Accessibility/What_is_accessibility
 original_slug: Learn/Доступность/What_is_accessibility
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
 
-<div>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</div>
+Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.
 
-<p class="summary">Данная статья открывает модуль, в котором рассматривается, что такое доступность на самом деле — она включает в себя группы людей, которые нам нужно учитывать и почему, какие инструменты используют разные пользователи для взаимодействия с вебом, и как мы можем сделать доступность частью нашего рабочего процесса веб-разработки.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML и CSS.                 |
+| ------------------- | ------------------------------------------------------------------------------- |
+| Цель:               | Узнать, что такое доступность, и как она влияет на вас как на веб-разработчика. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, что такое доступность, и как она влияет на вас как на веб-разработчика.</td>
-  </tr>
- </tbody>
-</table>
+## Итак, что такое доступность?
 
-<h2 id="Итак_что_такое_доступность">Итак, что такое доступность?</h2>
+Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Мы традиционно думаем об этом как о доступности для людей с ограниченными возможностями, но на самом деле, в это число входят и другие группы пользователей, которые используют мобильные устройства либо имеют медленное сетевое соединение.
 
-<p>Доступность — это практика, позволяющая использовать ваши сайты как можно большему числу людей. Мы традиционно думаем об этом как о доступности для людей с ограниченными возможностями, но на самом деле, в это число входят и другие группы пользователей, которые используют мобильные устройства либо имеют медленное сетевое соединение.</p>
+Вы также можете думать о доступности как о способе предоставления равных прав и одинаковых возможностей, независимо от способностей или обстоятельств. Точно так же, как не правильно лишать человека права посещать разнообразные места, только потому что он перемещается в инвалидном кресле (общественные здания в наши дни обычно имеют пандусы для инвалидных колясок или лифты), так и не правильно исключать кого-либо из веб-пространства из-за того, что у них слабое зрение или они используют мобильный телефон. Мы все разные, но все мы люди, и поэтому имеем одинаковые (человеческие) права.
 
-<p>Вы также можете думать о доступности как о способе предоставления равных прав и одинаковых возможностей, независимо от способностей или обстоятельств. Точно так же, как не правильно лишать человека права посещать разнообразные места, только потому что он перемещается в инвалидном кресле (общественные здания в наши дни обычно имеют пандусы для инвалидных колясок или лифты), так и не правильно исключать кого-либо из веб-пространства из-за того, что у них слабое зрение или они используют мобильный телефон. Мы все разные, но все мы люди, и поэтому имеем одинаковые (человеческие) права.</p>
+Помимо того, что доступность это просто хороший тон, она также регулируется законодательством в некоторых странах и может поспособствовать открытию важных рынков, которые в противном случае не смогут использовать ваши услуги, покупать ваши продукты и т. д.
 
-<p>Помимо того, что доступность это просто хороший тон, она также регулируется законодательством в некоторых странах и может поспособствовать открытию важных рынков, которые в противном случае не смогут использовать ваши услуги, покупать ваши продукты и т. д.</p>
+Доступность и опыт её применения принесут пользу всем:
 
-<p>Доступность и опыт её применения принесут пользу всем:</p>
+- Семантический HTML (который улучшает доступность) также улучшает SEO, делая ваш сайт более доступным для поиска или продажи.
+- Забота о доступности демонстрирует хорошую этику и мораль, что улучшает ваш имидж в обществе.
+- Другие хорошие практики, улучшающие доступность, также делают сайт более удобным для использования другими группами, такими как пользователи мобильных телефонов, пользователи с низкой скоростью сети и т.д. На самом деле, каждый может извлечь выгоду из многих таких улучшений.
+- Мы упоминали, что это также закон в некоторых местах?
 
-<ul>
- <li>Семантический HTML (который улучшает доступность) также улучшает SEO, делая ваш сайт более доступным для поиска или продажи.</li>
- <li>Забота о доступности демонстрирует хорошую этику и мораль, что улучшает ваш имидж в обществе.</li>
- <li>Другие хорошие практики, улучшающие доступность, также делают сайт более удобным для использования другими группами, такими как пользователи мобильных телефонов, пользователи с низкой скоростью сети и т.д. На самом деле, каждый может извлечь выгоду из многих таких улучшений.</li>
- <li>Мы упоминали, что это также закон в некоторых местах?</li>
-</ul>
+## Какие виды ограниченных возможностей мы рассматриваем?
 
-<h2 id="Какие_виды_ограниченных_возможностей_мы_рассматриваем">Какие виды ограниченных возможностей мы рассматриваем?</h2>
+Люди с ограниченными возможностями так же разнообразны, как и люди без них, так и своими недостатками. Ключевой урок заключается в том, чтобы думать за пределами вашего собственного компьютера и того, как вы используете Интернет, и начать изучать как его используют другие — _вы не ваши пользователи._ Ниже разъясняются основные виды инвалидности, а также любые специализированные инструменты, которые используются для доступа к веб-контенту (известные как **вспомогательные технологии**).
 
-<p>Люди с ограниченными возможностями так же разнообразны, как и люди без них, так и своими недостатками. Ключевой урок заключается в том, чтобы думать за пределами вашего собственного компьютера и того, как вы используете Интернет, и начать изучать как его используют другие — <em>вы не ваши пользователи. </em>Ниже разъясняются основные виды инвалидности, а также любые специализированные инструменты, которые  используются для доступа к веб-контенту (известные как <strong>вспомогательные технологии</strong>).</p>
+> **Примечание:** в информационном бюллетене Всемирной организации здравоохранения по вопросам [Инвалидности и Здоровья](https://www.who.int/ru/news-room/fact-sheets/detail/disability-and-health) говорится, что "Более 1 миллиарда людей, около 15% населения мира, имеют какую-либо форму инвалидности" и "От 110 до 190 миллионов взрослых испытывают значительные трудности в функционировании."
 
-<div class="note">
-<p><strong>Примечание</strong>: в информационном бюллетене Всемирной организации здравоохранения по вопросам <a class="external external-icon" href="https://www.who.int/ru/news-room/fact-sheets/detail/disability-and-health">Инвалидности и Здоровья</a> говорится, что "Более 1 миллиарда людей, около 15% населения мира, имеют какую-либо форму инвалидности" и "От 110 до 190 миллионов взрослых испытывают значительные трудности в функционировании."</p>
-</div>
+### Люди с нарушениями зрения
 
-<h3 id="Люди_с_нарушениями_зрения">Люди с нарушениями зрения</h3>
+Сюда относятся люди со слепотой, слабым зрением, дальтонизмом и другие. Многие из этих людей используют экранные лупы (либо физические лупы, либо программные возможности масштабирования — большинство браузеров и операционных систем в наши дни имеют возможности масштабирования), а некоторые будут использовать программы чтения с экрана, то есть программное обеспечение, которое читает цифровой текст вслух:
 
-<p>Сюда относятся люди со слепотой, слабым зрением, дальтонизмом и другие. Многие из этих людей используют экранные лупы (либо физические лупы, либо программные возможности масштабирования — большинство браузеров и операционных систем в наши дни имеют возможности масштабирования), а некоторые будут использовать программы чтения с экрана, то есть программное обеспечение, которое читает цифровой текст вслух:</p>
+- Некоторые платные коммерческие продукты, такие как [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS) (Windows) и [Window Eyes](http://www.gwmicro.com/window-eyes/) (Windows).
+- Некоторые бесплатные продукты, такие как [NVDA](http://www.nvaccess.org/) (для Windows), [ChromeVox](http://www.chromevox.com/) (браузер Chrome, Windows и Mac ОС Х) и [Orca](https://wiki.gnome.org/Projects/Orca) (Linux).
+- Некоторые из них встроены в операционную систему, например [VoiceOver](http://www.apple.com/accessibility/osx/voiceover/) (Mac OS X и iOS), [Экранный диктор](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)([Narrator](https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started)) (Microsoft Windows), [ChromeVox](http://www.chromevox.com/) (в Chrome OS) и [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback) (Android).
 
-<ul>
- <li>Некоторые платные коммерческие продукты, такие как <a class="external external-icon" href="http://www.freedomscientific.com/Products/Blindness/JAWS">JAWS</a> (Windows) и <a class="external external-icon" href="http://www.gwmicro.com/window-eyes/">Window Eyes</a> (Windows).</li>
- <li>Некоторые бесплатные продукты, такие как <a class="external external-icon" href="http://www.nvaccess.org/">NVDA</a> (для Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (браузер Chrome, Windows и Mac ОС Х) и <a class="external external-icon" href="https://wiki.gnome.org/Projects/Orca">Orca</a> (Linux).</li>
- <li>Некоторые из них встроены в операционную систему, например <a class="external external-icon" href="http://www.apple.com/accessibility/osx/voiceover/">VoiceOver</a> (Mac OS X и iOS), <a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Экранный диктор</a>(<a class="external external-icon" href="https://support.microsoft.com/en-us/help/22798/windows-10-narrator-get-started">Narrator</a>) (Microsoft Windows), <a class="external external-icon" href="http://www.chromevox.com/">ChromeVox</a> (в Chrome OS) и <a class="external external-icon" href="https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback">TalkBack</a> (Android).</li>
-</ul>
+Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в [руководстве по кросс-браузерному тестированию](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders). Видео ниже предоставляет краткий пример взаимодействия с экранными читателями.
 
-<p>Хорошая идея ознакомиться с экранными дикторами; вы можете настроить экранный считыватель и поиграть с ним, чтобы получить представление о том, как это работает. Более подробную информацию об их использовании см. в <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">руководстве по кросс-браузерному тестированию</a>. Видео ниже предоставляет краткий пример взаимодействия с экранными читателями.</p>
+{{EmbedYouTube("IK97XMibEws")}}
 
-<p>{{EmbedYouTube("IK97XMibEws")}}</p>
+Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. [Нарушения зрения и слепота](http://www.who.int/ru/news-room/fact-sheets/detail/blindness-and-visual-impairment)). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.
 
-<p> </p>
+### Люди с нарушениями слуха
 
-<p>Что касается статистики: по оценкам Всемирной Организации Здравоохранения: "285 миллионов человек во всем мире страдают нарушениями зрения: 39 миллионов слепы и 246 имеют слабовидение." (см. <a class="external external-icon" href="http://www.who.int/ru/news-room/fact-sheets/detail/blindness-and-visual-impairment">Нарушения зрения и слепота</a>). Это большая и значительная группа пользователей, которые просто упущены, потому что ваш сайт не закодирован должным образом — почти такой же размер, как и население Соединённых Штатов Америки.</p>
+Эта группа людей либо имеет низкий уровень слуха, либо вообще не слышит. Люди с нарушениями слуха используют ATs (см. [Вспомогательные устройства для людей с нарушениями слуха, голоса, речи или языка](https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders)), но на самом деле нет специальных ATs, специфичных для использования на компьютере или в интернете.
 
-<h3 id="Люди_с_нарушениями_слуха">Люди с нарушениями слуха</h3>
+Однако существуют специальные техники, которые следует учитывать для предоставления текстовых альтернатив аудиоконтенту, который люди смогут читать, от простых текстовых транскриптов до текстовых дорожек (т.е. подписей), которые могут отображаться вместе с видео. Об этом будет рассказано в статье позже.
 
-<p>Эта группа людей либо имеет низкий уровень слуха, либо вообще не слышит. Люди с нарушениями слуха используют ATs (см. <a class="external external-icon" href="https://www.nidcd.nih.gov/health/assistive-devices-people-hearing-voice-speech-or-language-disorders">Вспомогательные устройства для людей с нарушениями слуха, голоса, речи или языка</a>), но на самом деле нет специальных ATs, специфичных для использования на компьютере или в интернете.</p>
+Люди с нарушениями слуха представляют значительную базу пользователей — "360 миллионов человек в мире страдают от инвалидизирующей потери слуха", — говорится в информационном бюллетене Всемирной Организации Здравоохранения о [Глухоте и потере слуха](https://www.who.int/ru/news-room/fact-sheets/detail/deafness-and-hearing-loss).
 
-<p>Однако существуют специальные техники, которые следует учитывать для предоставления текстовых альтернатив аудиоконтенту, который люди смогут читать, от простых текстовых транскриптов до текстовых дорожек (т.е. подписей), которые могут отображаться вместе с видео. Об этом будет рассказано в статье позже.</p>
+### Люди с ограниченными физическими возможностями
 
-<p>Люди с нарушениями слуха представляют значительную базу пользователей — "360 миллионов человек в мире страдают от инвалидизирующей потери слуха", — говорится в информационном бюллетене Всемирной Организации Здравоохранения о <a class="external external-icon" href="https://www.who.int/ru/news-room/fact-sheets/detail/deafness-and-hearing-loss">Глухоте и потере слуха</a>.</p>
+Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьёзно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать [указатель головы](https://www.performancehealth.com/baseball-cap-head-pointer) для взаимодействия с компьютером.
 
-<h3 id="Люди_с_ограниченными_физическими_возможностями">Люди с ограниченными физическими возможностями </h3>
+Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.
 
-<p>Это группа людей, которые имеют инвалидность в отношении движения, которая может включать в себя чисто физические проблемы (такие как потеря конечности или паралич), или неврологические/генетические расстройства, которые приводят к слабости или потере контроля в конечностях. Некоторые люди могут испытывать трудности с выполнением точных движений рук, необходимых для использования мыши, в то время как другие могут быть более серьёзно затронуты, возможно, значительно парализованы до такой степени, что им нужно использовать <a class="external external-icon" href="https://www.performancehealth.com/baseball-cap-head-pointer">указатель головы</a> для взаимодействия с компьютером.</p>
+Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатуры в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции [Cross browser testing Using native keyboard accessibility](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility).
 
-<p>Этот вид инвалидности также может быть результатом старости, а не какой-либо конкретной травмы или состояния, а также может быть результатом аппаратных ограничений — у некоторых пользователей может не быть мыши.</p>
+С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний [Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше)](http://www.cdc.gov/nchs/fastats/disability.htm) сообщают, что в США "Процент взрослых с любым физическим нарушением функционирования: 16,1%".
 
-<p>Управление элементами с помощью клавиатуры является обычным требованием, которое влияет на процесс веб-разработки — мы обсудим доступ с клавиатуры в последующих статьях модуля. Хорошая идея, чтобы попробовать пользоваться веб-сайтами, только с помощью клавиатуры, чтобы увидеть, что из этого выйдет и как это работает. Например, можно ли использовать клавишу Tab для перемещения между различными элементами управления веб-формы? Вы можете найти больше деталей об использовании клавиатуры в нашей секции <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Using_native_keyboard_accessibility">Cross browser testing Using native keyboard accessibility</a>.</p>
+### Люди с когнитивными нарушениями
 
-<p>С точки зрения статистики, значительное количество людей имеют нарушения мобильности. Центры США по контролю и профилактике заболеваний <a class="external external-icon" href="http://www.cdc.gov/nchs/fastats/disability.htm">Инвалидности и Функционирования (Неинституционализированные взрослые в возрасте 18 лет и старше)</a> сообщают, что в США "Процент взрослых с любым физическим нарушением функционирования: 16,1%".</p>
+Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как [СДВГ (синдром дефицита внимания и гиперактивности)](https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml), людям [аутистического спектра](https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml), людям с [шизофренией](https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml), и множество других типов нарушений. Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.
 
-<h3 id="Люди_с_когнитивными_нарушениями">Люди с когнитивными нарушениями</h3>
+Наиболее распространённые способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.
 
-<p>Вероятно, самый широкий спектр инвалидности можно увидеть в этой категории — когнитивные нарушения в широком смысле могут относиться к инвалидности от психических заболеваний до трудностей в обучении, трудности в понимании и концентрации, такие как <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/attention-deficit-hyperactivity-disorder-adhd/index.shtml">СДВГ (синдром дефицита внимания и гиперактивности)</a>, людям <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/autism-spectrum-disorders-asd/index.shtml">аутистического спектра</a>, людям с <a class="external external-icon" href="https://www.nimh.nih.gov/health/topics/schizophrenia/index.shtml">шизофренией</a>, и множество других типов нарушений. Такие недостатки могут повлиять на многие детали повседневной жизни из-за проблем с памятью, решением, пониманием, вниманием и т. д.</p>
+В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:
 
-<p>Наиболее распространённые способы, вызванные когнитивными нарушениями, которые могут повлиять на использование веб-сайта — трудности с пониманием того, как выполнить задачу; вспомнить, как сделать что-то, что было ранее выполнено; повышенное разочарование в запутанных рабочих процессах или непоследовательных макетах/навигации/других функциях страницы.</p>
+- страницы согласованы — навигация, шапка и подвал (хедер и футер), а так же главный контент всегда находятся в одном месте.
+- инструменты хорошо разработаны и просты в использовании.
+- многоступенчатые процессы разбиты на логические этапы, с регулярными напоминаниями о том, как далеко вы прошли, и сколько осталось до завершения процесса, если это необходимо.
+- рабочие процессы логичны, просты и требуют как можно меньше взаимодействий. Например, регистрация и вход на веб-сайт зачастую неоправданно сложны.
+- страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.
+- язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.
+- важные моменты и контент выделены некоторым способом.
+- ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.
 
-<p>В отличие от других проблем доступности интернета, невозможно назначить быстрые исправления для многих проблем доступности, связанных с когнитивными нарушениями; лучшее решение, которое у вас есть — это проектировать веб-сайты таким образом, чтобы они были логичными, последовательными и удобными для использования настолько, насколько это возможно. Например, убедитесь, что:</p>
+Это не "методы доступности" как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.
 
-<ul>
- <li>страницы согласованы — навигация, шапка и подвал (хедер и футер), а так же главный контент всегда находятся в одном месте.</li>
- <li>инструменты хорошо разработаны и просты в использовании.</li>
- <li>многоступенчатые процессы разбиты на логические этапы, с регулярными напоминаниями о том, как далеко вы прошли, и сколько осталось до завершения процесса, если это необходимо.</li>
- <li>рабочие процессы логичны, просты и требуют как можно меньше взаимодействий. Например, регистрация и вход на веб-сайт зачастую неоправданно сложны.</li>
- <li>страницы не слишком длинные или плотные с точки зрения количества информации, представленной сразу.</li>
- <li>язык, используемый на ваших страницах, настолько прост и удобен, насколько это возможно, и не полон ненужного жаргона и сленга.</li>
- <li>важные моменты и контент выделены некоторым способом.</li>
- <li>ошибки пользователя чётко выделены, с подсказкой и предлагаемым решением.</li>
-</ul>
+С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета [О состоянии инвалидности за 2014 год](http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf) (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.
 
-<p>Это не "методы доступности" как таковые — это хорошая практика проектирования. Они принесут пользу всем, кто использует ваши сайты, и должны быть стандартной частью вашей работы.</p>
+> **Примечание:** [Страница о когнитивных расстройствах](http://webaim.org/articles/cognitive/) на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.
 
-<p>С точки зрения статистики, опять же цифры значительны. Отчёт Корнелльского университета <a class="external external-icon" href="http://www.disabilitystatistics.org/StatusReports/2014-PDF/2014-StatusReport_US.pdf">О состоянии инвалидности за 2014 год</a> (PDF, 511 КБ)(en) показывает, что в 2014 году 4,5% людей в США в возрасте 21-64 лет имели ту или иную форму когнитивной инвалидности.</p>
+## Реализация доступности в проекте
 
-<div class="note">
-<p><strong>Примечание</strong>: <a href="http://webaim.org/articles/cognitive/">Страница о когнитивных расстройствах</a> на WebAIM обеспечивает полезное распространение этих идей, и это, безусловно, стоит прочитать.</p>
-</div>
+Распространённый миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:
 
-<h2 id="Реализация_доступности_в_проекте">Реализация доступности в проекте</h2>
+- Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.
+- Вы только начали рассматривать доступность и непокрытые смежные вопросы на последних этапах проекта.
 
-<p>Распространённый миф о доступности заключается в том, что доступность является дорогостоящим "дополнением" для реализации проекта. Этот миф на самом деле может быть правдой, если:</p>
+Если вы рассматриваете доступность с самого начала проекта, то стоимость создания доступного контента должна быть весьма небольшой.
 
-<ul>
- <li>Вы пытаетесь "модифицировать" доступность на существующем сайте, который имеет значительные проблемы в этом плане.</li>
- <li>Вы только начали рассматривать доступность и непокрытые смежные вопросы на последних этапах проекта.</li>
-</ul>
+При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий [альтернативный текст](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives) изображения или неправильная ссылка — см. [Element relationships and context](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context)), и тестируйте с некоторыми нетрудоспособными группами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:
 
-<p>Если вы рассматриваете доступность с самого начала проекта, то стоимость создания доступного контента должна быть весьма небольшой.</p>
+- Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?
+- Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?
+- Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?
 
-<p>При планировании проекта учитывайте тестирование доступности в своём режиме тестирования, как при тестировании любого другого важного сегмента целевой аудитории (например, настольный или мобильный браузер). Тестируйте на ранних этапах и часто, выполняя автоматические тесты, чтобы выявить программно обнаруживаемые отсутствующие функции (такие как отсутствующий <a href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">альтернативный текст</a> изображения или неправильная ссылка — см. <a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Element_relationships_and_context">Element relationships and context</a>), и тестируйте с некоторыми нетрудоспособными группами пользователей, чтобы увидеть, насколько хорошо для них работают более сложные функции сайта. Например:</p>
+Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчёт вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.
 
-<ul>
- <li>Может ли мой виджет выбора даты использоваться людьми, использующими программы чтения с экрана?</li>
- <li>Если контент обновляется динамически, знают ли об этом люди с ослабленным зрением?</li>
- <li>Мои интерфейсные кнопки доступны с помощью клавиатуры и сенсорного интерфейса?</li>
-</ul>
+Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнётесь с каким-то случаем, который приводёт к тому, что определённый пользователь найдёт определённый контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трёхмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.
 
-<p>Вы можете и должны хранить заметку о потенциальных проблемных местах в контенте, которые будут нуждаться в доработке, чтобы сделать их доступными, убедитесь, что они тщательно протестированы, и подумайте о решениях/альтернативах. Текстовый контент (как вы увидите в следующей статье) довольно прост, но как насчёт вашего мультимедийного контента, и красивой 3D-графики? Вы должны смотреть на свой бюджет проекта и реально думать о том, какие решения у вас есть, чтобы сделать такой контент доступным? Вы можете заплатить за расшифровку всего вашего мультимедийного контента, это может быть дорогостоящим, но будет сделано.</p>
+С другой стороны, если вы работаете на веб-сайте галереи с интересным трёхмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.
 
-<p>Кроме того, будьте реалистами. "100% доступность" является недостижимым идеалом — вы всегда столкнётесь с каким-то случаем, который приводёт к тому, что определённый пользователь найдёт определённый контент трудным в использовании, но вы должны сделать столько, сколько сможете. Если вы планируете использовать трёхмерную круговую диаграмму, созданную с помощью WebGL, вы можете включить таблицу данных в качестве доступного альтернативного представления данных. Или, вы можете просто включить таблицу и избавиться от 3D круговой диаграммы-таблица доступна для всех, быстрее кодировать, меньше ресурсов процессора, и проще в обслуживании.</p>
+Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своём сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.
 
-<p>С другой стороны, если вы работаете на веб-сайте галереи с интересным трёхмерным искусством, было бы неразумно ожидать, что каждое произведение искусства будет идеально доступно для людей с нарушениями зрения, учитывая, что это полностью визуальная среда.</p>
+> **Примечание:** В нашей статье [«Об общих проблемах доступности»](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives) рассматриваются особенности доступности, которые необходимо протестировать более подробно.
 
-<p>Чтобы показать, что вы заботитесь о доступности и думали о ней, опубликуйте на своём сайте заявление о доступности, в котором подробно излагается, какова ваша политика в отношении доступности, и какие шаги вы предприняли для обеспечения доступности сайта. Если кто-то жалуется, что у вашего сайта есть проблема с доступностью, начните с ним диалог, проявите сочувствие и примите разумные меры, чтобы попытаться устранить проблему.</p>
+Подведём итоги:
 
-<div class="note">
-<p><strong>Note</strong>: В нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Text_alternatives">«Об общих проблемах доступности»</a> рассматриваются особенности доступности, которые необходимо протестировать более подробно.</p>
-</div>
+- Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.
+- Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.
+- Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.
 
-<p>Подведём итоги:</p>
+## Руководство по доступности и закон
 
-<ul>
- <li>Думайте о доступности с самого начала проекта, тестируйте рано и часто. Как и любая другая ошибка, проблема доступности становится более дорогой, чтобы исправлять её позже.</li>
- <li>Имейте в виду, что многие рекомендации по доступности выгодны всем, а не только пользователям с ограниченными возможностями. Например, семантическая разметка полезна не только для программ чтения с экрана, но и для быстрой загрузки и повышения производительности, так лучше для всех, особенно для мобильных устройств, и/или для медленных соединений.</li>
- <li>Опубликуйте заявление о доступности на своём сайте и общайтесь с людьми, у которых есть проблемы.</li>
-</ul>
+Существует множество чек-листов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.
 
-<h2 id="Руководство_по_доступности_и_закон">Руководство по доступности и закон</h2>
+- Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются [Рекомендациями по доступности веб-контента](https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/) ([Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag.php) — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это [WCAG at a Glance](https://www.w3.org/WAI/WCAG20/glance/Overview.html). Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).
+- В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, [Раздел 508 Закона о реабилитации](http://www.section508.gov/content/learn) в США, [Федеральное постановление о безбарьерных информационных технологиях](https://www.einfach-fuer-alle.de/artikel/bitv_english/) в Германии, [Закон о равенстве](http://www.legislation.gov.uk/ukpga/2010/15/contents) в Великобритании, [Accessibilità](http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita) в Италии, [Закон о дискриминации инвалидов](https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014) в Австралии и т.д.
 
-<p>Существует множество чек-листов и наборов руководств, на которых можно основываться при тестировании доступности, которые на первый взгляд могут показаться ошеломляющими. Наш совет — ознакомиться с основными областями, о которых вам необходимо позаботиться, а также понять структуры руководящих принципов, которые наиболее актуальны для вас.</p>
+Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.
 
-<ul>
- <li>Для начала, W3C опубликовал большой и очень подробный документ, который включает в себя очень точные, независимые от технологии критерии соответствия доступности. Они называются <a class="external external-icon" href="https://www.w3.org/Translations/WCAG20-ru/WCAG20-ru-20130220/">Рекомендациями по доступности веб-контента</a> (<a class="external external-icon" href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines</a> — WCAG), и они никоим образом не являются кратким описанием. Критерии разделяются на четыре основные категории, которые определяют, как реализации можно сделать восприимчивыми, работоспособными, понятными и устойчивыми. Лучшее место, чтобы получить лёгкое представление и начать обучение это <a class="external external-icon" href="https://www.w3.org/WAI/WCAG20/glance/Overview.html">WCAG at a Glance</a>. Нет необходимости изучать WCAG наизусть — знайте об основных проблемных областях и используйте различные методы и инструменты, чтобы выделить любые области, которые не соответствуют критериям WCAG (подробнее см. ниже).</li>
- <li>В вашей стране также может быть предусмотрено специальное законодательство, регулирующее необходимость обеспечения доступности веб-сайтов, обслуживающих их население, например, <a class="external external-icon" href="http://www.section508.gov/content/learn">Раздел 508 Закона о реабилитации</a> в США, <a class="external external-icon" href="https://www.einfach-fuer-alle.de/artikel/bitv_english/">Федеральное постановление о безбарьерных информационных технологиях</a> в Германии, <a class="external external-icon" href="http://www.legislation.gov.uk/ukpga/2010/15/contents">Закон о равенстве</a> в Великобритании, <a class="external external-icon" href="http://www.agid.gov.it/agenda-digitale/pubblica-amministrazione/accessibilita">Accessibilità</a> в Италии, <a class="external external-icon" href="https://www.humanrights.gov.au/world-wide-web-access-disability-discrimination-act-advisory-notes-ver-41-2014">Закон о дискриминации инвалидов</a> в Австралии и т.д.</li>
-</ul>
+Это звучит серьёзно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.
 
-<p>Поэтому, хотя WCAG представляет собой набор руководств, в вашей стране, вероятно, будут приняты законы, регулирующие доступность веба или, по крайней мере, доступность обществественных услуг (которые могут включать в себя веб-сайты, телевидение, физические пространства и т.д.). Это хорошая идея — узнать, каковы ваши законы. Если вы не предпримете никаких усилий, чтобы проверить, что ваш контент доступен, у вас могут возникнуть проблемы с законом, если люди с ограниченными возможностями жалуются на это.</p>
+## Специальные API доступа
 
-<p>Это звучит серьёзно, но на самом деле вам просто нужно рассматривать доступность в качестве основного приоритета вашей практики веб-разработки, как описано выше. В случае сомнений обратитесь за советом к квалифицированному юристу. Мы не собираемся предлагать больше советов, чем эти, потому что мы не юристы.</p>
+Веб-браузеры используют **специальные API доступа** (предоставляемые базовой операционной системой) которые предоставляют информацию, полезную для вспомогательных технологий (AT). AT обычно используют семантическую информацию, поэтому эта информация не включает такие вещи, как информация о стилях или JavaScript. Эта информация структурирована в дереве информации, которое называется **деревом доступности**.
 
-<h2 id="Специальные_API_доступа">Специальные API доступа</h2>
+Различные операционные системы имеют разные API доступа:
 
-<p>Веб-браузеры используют <strong>специальные API доступа</strong> (предоставляемые базовой операционной системой)  которые предоставляют информацию, полезную для вспомогательных технологий (AT). AT обычно используют семантическую информацию, поэтому эта информация не включает такие вещи, как информация о стилях или JavaScript. Эта информация структурирована в дереве информации, которое называется <strong>деревом доступности</strong>.</p>
+- Windows: MSAA/IAccessible, UIAExpress, IAccessible2
+- Mac OS X: NSAccessibility
+- Linux: AT-SPI
+- Android: Accessibility framework
+- iOS: UIAccessibility
 
-<p>Различные операционные системы имеют разные API доступа:</p>
+Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить её функциями из [спецификации WAI-ARIA](https://www.w3.org/TR/wai-aria/), которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье [основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics).
 
-<ul>
- <li>Windows: MSAA/IAccessible, UIAExpress, IAccessible2</li>
- <li>Mac OS X: NSAccessibility</li>
- <li>Linux: AT-SPI</li>
- <li>Android: Accessibility framework</li>
- <li>iOS: UIAccessibility</li>
-</ul>
+## Заключение
 
-<p>Там, где нативная семантическая информация, предоставляемая элементами HTML в ваших веб-приложениях, падает, вы можете дополнить её функциями из <a class="external" href="https://www.w3.org/TR/wai-aria/">спецификации WAI-ARIA</a>, которые добавляют семантическую информацию в дерево доступности для улучшения доступности. Вы можете узнать больше о WAI-ARIA в нашей статье <a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">основы WAI-ARIA</a>.</p>
+Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.
 
-<h2 id="Заключение">Заключение</h2>
+{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}
 
-<p>Эта статья должна была дать вам полезный обзор специальных возможностей, показать, почему это так важно, и посмотреть, как вы можете вписать его в свой рабочий процесс. Теперь у вас также должна быть жажда узнать о деталях реализации, которые помогут сделать сайты доступными, и мы начнём с этого в следующем разделе, рассматривая, почему HTML является хорошей основой для доступности.</p>
+## В этом модуле
 
-<p>{{NextMenu("Learn/Accessibility/HTML", "Learn/Accessibility")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/ru/docs/Learn/Доступность/What_is_accessibility">Что такое доступность?</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/HTML">HTML: Хорошая основа для доступности</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/CSS_and_JavaScript">CSS и JavaScript доступность - лучшие практики</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/WAI-ARIA_basics">Основы WAI-ARIA</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Multimedia">Доступность мультимедиа</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Mobile">Мобильная доступность</a></li>
- <li><a href="/ru/docs/Learn/Accessibility/Accessibility_troubleshooting">Устранение проблем доступности</a></li>
-</ul>
+- [Что такое доступность?](/ru/docs/Learn/Доступность/What_is_accessibility)
+- [HTML: Хорошая основа для доступности](/ru/docs/Learn/Accessibility/HTML)
+- [CSS и JavaScript доступность - лучшие практики](/ru/docs/Learn/Accessibility/CSS_and_JavaScript)
+- [Основы WAI-ARIA](/ru/docs/Learn/Accessibility/WAI-ARIA_basics)
+- [Доступность мультимедиа](/ru/docs/Learn/Accessibility/Multimedia)
+- [Мобильная доступность](/ru/docs/Learn/Accessibility/Mobile)
+- [Устранение проблем доступности](/ru/docs/Learn/Accessibility/Accessibility_troubleshooting)
diff --git a/files/ru/learn/common_questions/available_text_editors/index.md b/files/ru/learn/common_questions/available_text_editors/index.md
index e4b83d9915d8c1..da75af59c2764d 100644
--- a/files/ru/learn/common_questions/available_text_editors/index.md
+++ b/files/ru/learn/common_questions/available_text_editors/index.md
@@ -3,307 +3,141 @@ title: Как выбрать текстовый редактор?
 slug: Learn/Common_questions/Available_text_editors
 translation_of: Learn/Common_questions/Available_text_editors
 ---
-<div>{{IncludeSubnav("/en-US/Learn")}}</div>
-
-<div class="summary">
-<p>In this article we highlight some things to think about when installing a text editor for web development.</p>
-</div>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Вы уже должны знать о <a href="/en-US/Learn/What_software_do_I_need">различных программах, необходимых для создания веб-сайта.</a></p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Узнать, как выбрать текстовый редактор, который наилучшим образом соответствует вашим потребностям в качестве веб-разработчика.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Summary">Summary</h2>
-
-<p>Веб-сайт состоит в основном из текстовых файлов, поэтому для весёлого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.</p>
-
-<p>Огромное количество вариантов немного ошеломляет, так как текстовый редактор настолько важен для компьютерных наук (да, веб-разработка - это компьютерная наука). В идеале вы должны попробовать столько редакторов, сколько сможете, и почувствовать, что соответствует вашему рабочему процессу. Но мы дадим вам несколько советов для начала.</p>
-
-<p>Вот основные вопросы, на которые вы должны ответить:</p>
-
-<ul>
- <li>С какой ОС (операционной системой) я хочу работать?</li>
- <li>Какие технологии я хочу использовать?</li>
- <li>Какие основные функции я ожидаю от моего текстового редактора?</li>
- <li>Хочу ли я добавить дополнительные функции в мой текстовый редактор?</li>
- <li>Нужна ли мне поддержка / помощь при использовании моего текстового редактора?</li>
- <li>Имеет ли смысл мой текстовый редактор для меня?</li>
-</ul>
-
-<p>Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдёте подходящий текстовый редактор бесплатно.</p>
-
-<p>Here are some popular editors:</p>
-
-<table class="standard-table" style="height: 522px; width: 917px;">
- <thead>
-  <tr>
-   <th scope="col">Редактор</th>
-   <th scope="col">Лицензия</th>
-   <th scope="col">Цена</th>
-   <th scope="col">ОС</th>
-   <th scope="col">Поддержка</th>
-   <th scope="col">Док.</th>
-   <th scope="col">Расширяемый</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="https://atom.io/">Atom</a></td>
-   <td>MIT/BSD</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="https://discuss.atom.io/categories" rel="external">Forum</a></td>
-   <td><a href="https://atom.io/docs/latest/">Online Manual</a></td>
-   <td style="text-align: center;"><a href="https://atom.io/packages">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://brackets.io/" rel="external">Brackets</a></td>
-   <td>MIT/BSD</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="https://groups.google.com/forum/#!forum/brackets-dev" rel="external">Forum</a>, <a href="http://webchat.freenode.net/?channels=brackets" rel="external">IRC</a></td>
-   <td><a href="https://github.com/adobe/brackets/wiki" rel="external">GitHub Wiki</a></td>
-   <td style="text-align: center;"><a href="https://ingorichter.github.io/BracketsExtensionTweetBot/" rel="external">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="https://panic.com/coda/" rel="external">Coda</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">$99</td>
-   <td>Mac</td>
-   <td><a href="https://twitter.com/panic">Twitter</a>, <a href="https://panic.com/qa" rel="external">Forum</a>, <a href="mailto:coda@panic.com">E-mail</a></td>
-   <td><a href="https://panic.com/coda/#book">eBook</a></td>
-   <td style="text-align: center;"><a href="https://panic.com/coda/plugins.php">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.codelobster.com">CodeLobster</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://www.codelobster.com/forum/index.php" rel="external">Forum</a>, <a href="mailto:support@codelobster.com">E-mail</a></td>
-   <td>No end user doc</td>
-   <td style="text-align: center;">Yes</td>
-  </tr>
-  <tr>
-   <td><a href="http://www.gnu.org/software/emacs/" rel="external">Emacs</a></td>
-   <td>GPL 3</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://www.gnu.org/software/emacs/manual/efaq.html" rel="external">FAQ</a>, <a href="http://mail.gnu.org/mailman/listinfo/help-gnu-emacs" rel="external">Mailing list</a>, <a href="news://gnu.emacs.help" rel="external">News Group</a></td>
-   <td><a href="http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html">Online Manual</a></td>
-   <td style="text-align: center;">Yes</td>
-  </tr>
-  <tr>
-   <td><a href="http://www.macrabbit.com/espresso/">Espresso</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">$75</td>
-   <td>Mac</td>
-   <td><a href="http://www.macrabbit.com/support/" rel="external">FAQ</a>, <a href="mailto:support@macrabbit.com">E-mail</a></td>
-   <td>No end user doc,<br>
-    but <a href="http://wiki.macrabbit.com/">plug-in doc</a></td>
-   <td style="text-align: center;">Yes</td>
-  </tr>
-  <tr>
-   <td><a href="https://wiki.gnome.org/Apps/Gedit">Gedit</a></td>
-   <td>GPL</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://mail.gnome.org/mailman/listinfo/gedit-list" rel="external">Mailing list</a>, <a href="irc://irc.gnome.org/%23gedit">IRC</a></td>
-   <td><a href="https://help.gnome.org/users/gedit/stable/">Online Manual</a></td>
-   <td style="text-align: center;"><a href="https://wiki.gnome.org/Apps/Gedit/PluginsLists">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://komodoide.com/komodo-edit/" rel="external">Komodo Edit</a></td>
-   <td>MPL</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://forum.komodoide.com/" rel="external">Forum</a></td>
-   <td><a href="http://docs.activestate.com/komodo/8.5/" rel="external">Online Manual</a></td>
-   <td style="text-align: center;"><a href="http://komodoide.com/resources/addons/">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.notepad-plus-plus.org/" rel="external">Notepad++</a></td>
-   <td>GPL</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows</td>
-   <td><a href="http://sourceforge.net/p/notepad-plus/discussion/">Forum</a></td>
-   <td><a href="http://npp-wiki.tuxfamily.org/index.php?title=Main_Page" rel="external">Wiki</a></td>
-   <td style="text-align: center;"><a href="http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central" rel="external">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.pspad.com/">PSPad</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows</td>
-   <td><a href="http://gogogadgetscott.info/pspad/dotazy.htm">FAQ</a>, <a href="http://forum.pspad.com/" rel="external">Forum</a></td>
-   <td><a href="http://gogogadgetscott.info/pspad/">Online Help</a></td>
-   <td style="text-align: center;"><a href="http://www.pspad.com/en/pspad-extensions.php">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.sublimetext.com/" rel="external">Sublime Text</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">$70</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://www.sublimetext.com/forum/viewforum.php?f=3" rel="external">Forum</a></td>
-   <td><a href="http://www.sublimetext.com/docs/3/">Official</a>,<a href="http://docs.sublimetext.info/en/latest/index.html"> Unofficial</a></td>
-   <td style="text-align: center;"><a href="https://sublime.wbond.net/">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://macromates.com/" rel="external">TextMate</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">$50</td>
-   <td>Mac</td>
-   <td><a href="https://twitter.com/macromates">Twitter</a>, <a href="http://webchat.freenode.net/?channels=textmate">IRC</a>, <a href="http://lists.macromates.com/listinfo/textmate" rel="external">Mailing list</a>, <a href="mailto:tm-support@macromates.com">E-mail</a></td>
-   <td><a href="http://manual.macromates.com/en/">Online Manual</a>, <a href="http://wiki.macromates.com/Main/HomePage" rel="external">Wiki</a></td>
-   <td style="text-align: center;"><a href="http://wiki.macromates.com/Main/Plugins" rel="external">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="http://www.barebones.com/products/textwrangler/" rel="external">TextWrangler</a></td>
-   <td>Closed source</td>
-   <td style="text-align: center;">Free</td>
-   <td>Mac</td>
-   <td><a href="http://www.barebones.com/support/textwrangler/faqs.html" rel="external">FAQ</a>, <a href="https://groups.google.com/forum/#!forum/textwrangler">Forum</a></td>
-   <td><a href="http://ash.barebones.com/TextWrangler_User_Manual.pdf" rel="external">PDF Manual</a></td>
-   <td style="text-align: center;">No</td>
-  </tr>
-  <tr>
-   <td><a href="http://www.vim.org/" rel="external">Vim</a></td>
-   <td><a href="http://vimdoc.sourceforge.net/htmldoc/uganda.html#license" rel="external">Specific open license</a></td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="http://www.vim.org/maillist.php#vim" rel="external">Mailing list</a></td>
-   <td><a href="http://vimdoc.sourceforge.net/">Online Manual</a></td>
-   <td style="text-align: center;"><a href="http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&amp;direction=descending" rel="external">Yes</a></td>
-  </tr>
-  <tr>
-   <td><a href="https://code.visualstudio.com/download">Visual Studio Code</a></td>
-   <td><a href="https://github.com/microsoft/vscode">Open Source</a> under MIT licence/ Specific licence for product</td>
-   <td style="text-align: center;">Free</td>
-   <td>Windows, Mac, Linux</td>
-   <td><a href="https://code.visualstudio.com/docs/supporting/faq">FAQ</a>     </td>
-   <td><a href="https://code.visualstudio.com/docs">Documentation</a></td>
-   <td style="text-align: center;"><a href="https://marketplace.visualstudio.com/VSCode">Yes</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Активное_изучение">Активное изучение</h2>
-
-<p><em>Активное изучение пока не доступно. <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p>
-
-<h2 id="Копай_глубже">Копай глубже</h2>
-
-<h3 id="Критерии_выбора">Критерии выбора</h3>
-
-<p>Итак, более подробно, о чем вы должны думать, когда выбираете текстовый редактор?</p>
-
-<h4 id="С_какой_ОС_операционной_системой_я_хочу_работать">С какой ОС (операционной системой) я хочу работать?</h4>
-
-<p>Конечно, это ваш выбор. Однако некоторые редакторы доступны только для определённых ОС, поэтому, если вам нравится переключаться вперёд и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.</p>
-
-<p>So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).</p>
-
-<h4 id="What_kind_of_technologies_do_I_want_to_manipulate">What kind of technologies do I want to manipulate?</h4>
-
-<p>Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like</p>
-
-<ul>
- <li><strong>Code coloring. </strong>Make your file more legible by color-coding keywords based on the technology you're using.</li>
- <li><strong>Code completion. </strong>Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).</li>
- <li><strong>Code snippets. </strong>As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.</li>
-</ul>
-
-<p>Most text editors now support code coloring, but not necessarily the other two features. Make sure in particular that your text editor color-codes {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}.</p>
-
-<h4 id="What_kind_of_basic_features_do_I_expect_from_my_text_editor">What kind of basic features do I expect from my text editor?</h4>
-
-<p>It depends on your needs and plans. These functionalities are often helpful:</p>
-
-<ul>
- <li>Search-and-replace, in one or multiple documents, based on {{Glossary("Regular Expression", "regular expressions")}} or other patterns as needed</li>
- <li>Quickly jump to a given line</li>
- <li>View two parts of a large document separately</li>
- <li>View HTML as it will look in the browser</li>
- <li>Select text in multiple places at once</li>
- <li>View your project's files and directories</li>
- <li>Format your code automatically with code beautifier</li>
- <li>Check spelling</li>
-</ul>
-
-<h4 id="Do_I_want_to_add_extra_features_to_my_text_editor">Do I want to add extra features to my text editor?</h4>
-
-<p>An extensible editor comes with fewer built-in features, but can be extended based on your needs.</p>
-
-<p>If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.</p>
-
-<p>If you like <em>lots </em>of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:</p>
-
-<ul>
- <li><a href="http://www.aptana.com/">Aptana Studio</a></li>
- <li><a href="https://eclipse.org/" rel="external">Eclipse</a></li>
- <li><a href="http://komodoide.com/" rel="external">Komodo IDE</a></li>
- <li><a href="https://netbeans.org/" rel="external">NetBeans IDE</a></li>
- <li><a href="http://www.visualstudio.com/" rel="external">Visual Studio</a></li>
- <li><a href="https://www.jetbrains.com/webstorm/" rel="external">WebStorm</a></li>
-</ul>
-
-<h4 id="Do_I_need_supporthelp_while_using_my_text_editor">Do I need support/help while using my text editor?</h4>
-
-<p>Always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:</p>
-
-<ol>
- <li>User-oriented content (FAQ, manual, online help)</li>
- <li>Discussion with developers and other users (forum, email, IRC)</li>
-</ol>
-
-<p>Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.</p>
-
-<h4 id="Does_my_text_editors_look-and-feel_matter_to_me">Does my text editor's look-and-feel matter to me?</h4>
-
-<p>Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.</p>
+{{IncludeSubnav("/en-US/Learn")}}
 
-<h3 id="Install_and_set_up">Install and set up</h3>
+In this article we highlight some things to think about when installing a text editor for web development.
 
-<p>Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:</p>
+| Необходимые знания: | Вы уже должны знать о [различных программах, необходимых для создания веб-сайта.](/en-US/Learn/What_software_do_I_need)         |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Узнать, как выбрать текстовый редактор, который наилучшим образом соответствует вашим потребностям в качестве веб-разработчика. |
 
-<ul>
- <li><strong>Windows. </strong>The developers will give you an <code>.exe</code> or <code>.msi</code> file. Sometimes the software comes in a compressed archive like <code>.zip</code>, <code>.7z</code>, or <code>.rar</code>, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports <code>.zip</code> by default.</li>
- <li><strong>Mac. </strong>On the editor's website you can download a <code>.dmg</code> file. Some text editors you can find directly in the Apple Store to make installation even simpler.</li>
- <li><strong>Linux. </strong>In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &amp;c.). You can often find a <code>.deb</code> or <code>.rpm</code> file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.</li>
-</ul>
+## Summary
 
-<p>When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the <em>file association. </em>These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:</p>
+Веб-сайт состоит в основном из текстовых файлов, поэтому для весёлого и приятного процесса разработки вы должны выбрать свой текстовый редактор с умом.
 
-<ul>
- <li>Windows
-  <ul>
-   <li><a href="http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default" rel="external">Windows 8</a></li>
-   <li><a href="http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7" rel="external">Windows 7</a></li>
-   <li><a href="http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm">older systems</a></li>
-  </ul>
- </li>
- <li><a href="http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/" rel="external">Mac OS X</a></li>
- <li>Linux
-  <ul>
-   <li><a href="http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally" rel="external">Ubuntu Unity</a></li>
-   <li><a href="https://help.gnome.org/users/gnome-help/stable/files-open.html.en" rel="external">GNOME</a></li>
-   <li><a href="http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass">KDE</a></li>
-  </ul>
- </li>
-</ul>
+Огромное количество вариантов немного ошеломляет, так как текстовый редактор настолько важен для компьютерных наук (да, веб-разработка - это компьютерная наука). В идеале вы должны попробовать столько редакторов, сколько сможете, и почувствовать, что соответствует вашему рабочему процессу. Но мы дадим вам несколько советов для начала.
 
-<h2 id="Next_steps">Next steps</h2>
+Вот основные вопросы, на которые вы должны ответить:
 
-<p>Now that you have a good text editor, you could take some time to finalize <a href="/en-US/Learn/Set_up_a_basic_working_environment">your basic working environment</a>, or, if you want to play with it right away, write <a href="/en-US/Learn/HTML/Write_a_simple_page_in_HTML">your very first web page</a>.</p>
+- С какой ОС (операционной системой) я хочу работать?
+- Какие технологии я хочу использовать?
+- Какие основные функции я ожидаю от моего текстового редактора?
+- Хочу ли я добавить дополнительные функции в мой текстовый редактор?
+- Нужна ли мне поддержка / помощь при использовании моего текстового редактора?
+- Имеет ли смысл мой текстовый редактор для меня?
+
+Обратите внимание, что мы не упомянули цену. Очевидно, что это тоже важно, но стоимость продукта мало связана с его качеством или возможностями. Существует большая вероятность, что вы найдёте подходящий текстовый редактор бесплатно.
+
+Here are some popular editors:
+
+| Редактор                                                        | Лицензия                                                                                           | Цена | ОС                  | Поддержка                                                                                                                                                                                                   | Док.                                                                                                            | Расширяемый                                                                                             |
+| --------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- | ---- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| [Atom](https://atom.io/)                                        | MIT/BSD                                                                                            | Free | Windows, Mac, Linux | [Forum](https://discuss.atom.io/categories)                                                                                                                                                                 | [Online Manual](https://atom.io/docs/latest/)                                                                   | [Yes](https://atom.io/packages)                                                                         |
+| [Brackets](http://brackets.io/)                                 | MIT/BSD                                                                                            | Free | Windows, Mac, Linux | [Forum](https://groups.google.com/forum/#!forum/brackets-dev), [IRC](http://webchat.freenode.net/?channels=brackets)                                                                                        | [GitHub Wiki](https://github.com/adobe/brackets/wiki)                                                           | [Yes](https://ingorichter.github.io/BracketsExtensionTweetBot/)                                         |
+| [Coda](https://panic.com/coda/)                                 | Closed source                                                                                      | $99  | Mac                 | [Twitter](https://twitter.com/panic), [Forum](https://panic.com/qa), [E-mail](mailto:coda@panic.com)                                                                                                        | [eBook](https://panic.com/coda/#book)                                                                           | [Yes](https://panic.com/coda/plugins.php)                                                               |
+| [CodeLobster](http://www.codelobster.com)                       | Closed source                                                                                      | Free | Windows, Mac, Linux | [Forum](http://www.codelobster.com/forum/index.php), [E-mail](mailto:support@codelobster.com)                                                                                                               | No end user doc                                                                                                 | Yes                                                                                                     |
+| [Emacs](http://www.gnu.org/software/emacs/)                     | GPL 3                                                                                              | Free | Windows, Mac, Linux | [FAQ](http://www.gnu.org/software/emacs/manual/efaq.html), [Mailing list](http://mail.gnu.org/mailman/listinfo/help-gnu-emacs), [News Group](news://gnu.emacs.help)                                         | [Online Manual](http://www.gnu.org/software/emacs/manual/html_node/emacs/index.html)                            | Yes                                                                                                     |
+| [Espresso](http://www.macrabbit.com/espresso/)                  | Closed source                                                                                      | $75  | Mac                 | [FAQ](http://www.macrabbit.com/support/), [E-mail](mailto:support@macrabbit.com)                                                                                                                            | No end user doc, but [plug-in doc](http://wiki.macrabbit.com/)                                                  | Yes                                                                                                     |
+| [Gedit](https://wiki.gnome.org/Apps/Gedit)                      | GPL                                                                                                | Free | Windows, Mac, Linux | [Mailing list](http://mail.gnome.org/mailman/listinfo/gedit-list), [IRC](irc://irc.gnome.org/%23gedit)                                                                                                      | [Online Manual](https://help.gnome.org/users/gedit/stable/)                                                     | [Yes](https://wiki.gnome.org/Apps/Gedit/PluginsLists)                                                   |
+| [Komodo Edit](http://komodoide.com/komodo-edit/)                | MPL                                                                                                | Free | Windows, Mac, Linux | [Forum](http://forum.komodoide.com/)                                                                                                                                                                        | [Online Manual](http://docs.activestate.com/komodo/8.5/)                                                        | [Yes](http://komodoide.com/resources/addons/)                                                           |
+| [Notepad++](http://www.notepad-plus-plus.org/)                  | GPL                                                                                                | Free | Windows             | [Forum](http://sourceforge.net/p/notepad-plus/discussion/)                                                                                                                                                  | [Wiki](http://npp-wiki.tuxfamily.org/index.php?title=Main_Page)                                                 | [Yes](http://npp-wiki.tuxfamily.org/index.php?title=Plugin_Central)                                     |
+| [PSPad](http://www.pspad.com/)                                  | Closed source                                                                                      | Free | Windows             | [FAQ](http://gogogadgetscott.info/pspad/dotazy.htm), [Forum](http://forum.pspad.com/)                                                                                                                       | [Online Help](http://gogogadgetscott.info/pspad/)                                                               | [Yes](http://www.pspad.com/en/pspad-extensions.php)                                                     |
+| [Sublime Text](http://www.sublimetext.com/)                     | Closed source                                                                                      | $70  | Windows, Mac, Linux | [Forum](http://www.sublimetext.com/forum/viewforum.php?f=3)                                                                                                                                                 | [Official](http://www.sublimetext.com/docs/3/),[ Unofficial](http://docs.sublimetext.info/en/latest/index.html) | [Yes](https://sublime.wbond.net/)                                                                       |
+| [TextMate](http://macromates.com/)                              | Closed source                                                                                      | $50  | Mac                 | [Twitter](https://twitter.com/macromates), [IRC](http://webchat.freenode.net/?channels=textmate), [Mailing list](http://lists.macromates.com/listinfo/textmate), [E-mail](mailto:tm-support@macromates.com) | [Online Manual](http://manual.macromates.com/en/), [Wiki](http://wiki.macromates.com/Main/HomePage)             | [Yes](http://wiki.macromates.com/Main/Plugins)                                                          |
+| [TextWrangler](http://www.barebones.com/products/textwrangler/) | Closed source                                                                                      | Free | Mac                 | [FAQ](http://www.barebones.com/support/textwrangler/faqs.html), [Forum](https://groups.google.com/forum/#!forum/textwrangler)                                                                               | [PDF Manual](http://ash.barebones.com/TextWrangler_User_Manual.pdf)                                             | No                                                                                                      |
+| [Vim](http://www.vim.org/)                                      | [Specific open license](http://vimdoc.sourceforge.net/htmldoc/uganda.html#license)                 | Free | Windows, Mac, Linux | [Mailing list](http://www.vim.org/maillist.php#vim)                                                                                                                                                         | [Online Manual](http://vimdoc.sourceforge.net/)                                                                 | [Yes](http://www.vim.org/scripts/script_search_results.php?order_by=creation_date&direction=descending) |
+| [Visual Studio Code](https://code.visualstudio.com/download)    | [Open Source](https://github.com/microsoft/vscode) under MIT licence/ Specific licence for product | Free | Windows, Mac, Linux | [FAQ](https://code.visualstudio.com/docs/supporting/faq)                                                                                                                                                    | [Documentation](https://code.visualstudio.com/docs)                                                             | [Yes](https://marketplace.visualstudio.com/VSCode)                                                      |
+
+## Активное изучение
+
+_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Getting_started)._
+
+## Копай глубже
+
+### Критерии выбора
+
+Итак, более подробно, о чем вы должны думать, когда выбираете текстовый редактор?
+
+#### С какой ОС (операционной системой) я хочу работать?
+
+Конечно, это ваш выбор. Однако некоторые редакторы доступны только для определённых ОС, поэтому, если вам нравится переключаться вперёд и назад, это сузит возможности. Любой текстовый редактор может выполнить работу, если он работает в вашей системе, но кроссплатформенный редактор облегчает переход с ОС на ОС.
+
+So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions (say, only Windows 7 or later and not Vista). If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).
+
+#### What kind of technologies do I want to manipulate?
+
+Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like
+
+- **Code coloring.** Make your file more legible by color-coding keywords based on the technology you're using.
+- **Code completion.** Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).
+- **Code snippets.** As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.
+
+Most text editors now support code coloring, but not necessarily the other two features. Make sure in particular that your text editor color-codes {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("JavaScript")}}.
+
+#### What kind of basic features do I expect from my text editor?
+
+It depends on your needs and plans. These functionalities are often helpful:
+
+- Search-and-replace, in one or multiple documents, based on {{Glossary("Regular Expression", "regular expressions")}} or other patterns as needed
+- Quickly jump to a given line
+- View two parts of a large document separately
+- View HTML as it will look in the browser
+- Select text in multiple places at once
+- View your project's files and directories
+- Format your code automatically with code beautifier
+- Check spelling
+
+#### Do I want to add extra features to my text editor?
+
+An extensible editor comes with fewer built-in features, but can be extended based on your needs.
+
+If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.
+
+If you like _lots_ of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:
+
+- [Aptana Studio](http://www.aptana.com/)
+- [Eclipse](https://eclipse.org/)
+- [Komodo IDE](http://komodoide.com/)
+- [NetBeans IDE](https://netbeans.org/)
+- [Visual Studio](http://www.visualstudio.com/)
+- [WebStorm](https://www.jetbrains.com/webstorm/)
+
+#### Do I need support/help while using my text editor?
+
+Always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:
+
+1.  User-oriented content (FAQ, manual, online help)
+2.  Discussion with developers and other users (forum, email, IRC)
+
+Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.
+
+#### Does my text editor's look-and-feel matter to me?
+
+Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.
+
+### Install and set up
+
+Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:
+
+- **Windows.** The developers will give you an `.exe` or `.msi` file. Sometimes the software comes in a compressed archive like `.zip`, `.7z`, or `.rar`, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports `.zip` by default.
+- **Mac.** On the editor's website you can download a `.dmg` file. Some text editors you can find directly in the Apple Store to make installation even simpler.
+- **Linux.** In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, \&c.). You can often find a `.deb` or `.rpm` file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.
+
+When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the _file association._ These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:
+
+- Windows
+
+  - [Windows 8](http://windows.microsoft.com/en-us/windows-8/choose-programs-windows-uses-default)
+  - [Windows 7](http://windows.microsoft.com/en-us/windows/change-default-programs#1TC=windows-7)
+  - [older systems](http://pcsupport.about.com/od/fixtheproblem/f/chdefprogram.htm)
+
+- [Mac OS X](http://osxdaily.com/2013/08/08/change-default-application-open-files-mac-os-x/)
+- Linux
+
+  - [Ubuntu Unity](http://askubuntu.com/questions/289337/how-can-i-change-file-association-globally)
+  - [GNOME](https://help.gnome.org/users/gnome-help/stable/files-open.html.en)
+  - [KDE](http://doc.opensuse.org/documentation/html/openSUSE_113/opensuse-kdeuser/cha.kde.cust.html#pro.kde.cust.system.fileass)
+
+## Next steps
+
+Now that you have a good text editor, you could take some time to finalize [your basic working environment](/en-US/Learn/Set_up_a_basic_working_environment), or, if you want to play with it right away, write [your very first web page](/en-US/Learn/HTML/Write_a_simple_page_in_HTML).
diff --git a/files/ru/learn/common_questions/design_for_all_types_of_users/index.md b/files/ru/learn/common_questions/design_for_all_types_of_users/index.md
index 860271cf1041ec..9810575369576a 100644
--- a/files/ru/learn/common_questions/design_for_all_types_of_users/index.md
+++ b/files/ru/learn/common_questions/design_for_all_types_of_users/index.md
@@ -1,5 +1,5 @@
 ---
-title: 'Как создать дизайн, подходящий для всех пользователей?'
+title: Как создать дизайн, подходящий для всех пользователей?
 slug: Learn/Common_questions/Design_for_all_types_of_users
 tags:
   - Дизайн
@@ -8,217 +8,197 @@ tags:
   - доступность
 translation_of: Learn/Common_questions/Design_for_all_types_of_users
 ---
-<div>{{IncludeSubnav("/en-US/Learn")}}</div>
+{{IncludeSubnav("/en-US/Learn")}}
 
-<div class="summary">
-<p>Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей.</p>
-</div>
+Эта статья содержит основные советы, которые помогут вам создавать веб-сайты для любого типа пользователей.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Перед началом:</th>
-   <td>Сначала вам следует прочитать <a href="/en-US/Learn/What_is_accessibility">What is accessibility?</a>, поскольку мы не рассматриваем здесь <strong>доступность </strong>подробно.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна.</td>
-  </tr>
- </tbody>
-</table>
+| Перед началом: | Сначала вам следует прочитать [What is accessibility?](/en-US/Learn/What_is_accessibility), поскольку мы не рассматриваем здесь **доступность** подробно.                                   |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:          | Универсальный дизайн означает дизайн для всех, независимо от инвалидности или технических ограничений. В этой статье перечислены наиболее важные характеристики для универсального дизайна. |
 
-<h2 id="Краткое_описание">Краткое описание</h2>
+## Краткое описание
 
-<p>Когда вы создаёте веб-сайт, одна из главных проблем, которую нужно учитывать, - это универсальный дизайн: доступность для всех пользователей независимо от инвалидности, технических ограничений, культуры, местоположения и так далее.</p>
+Когда вы создаёте веб-сайт, одна из главных проблем, которую нужно учитывать, - это универсальный дизайн: доступность для всех пользователей независимо от инвалидности, технических ограничений, культуры, местоположения и так далее.
 
-<h2 id="Более_глубокое_изучение">Более глубокое изучение</h2>
+## Более глубокое изучение
 
-<h3 id="Цветовой_контраст">Цветовой контраст</h3>
+### Цветовой контраст
 
-<p>Чтобы сделать ваш текст читаемым, используйте цвет текста, который хорошо контрастирует с цветом фона. Сделайте его особенно лёгким для чтения текста, чтобы помочь слабовидящим людям и людям, использующим свои телефоны на улице.</p>
+Чтобы сделать ваш текст читаемым, используйте цвет текста, который хорошо контрастирует с цветом фона. Сделайте его особенно лёгким для чтения текста, чтобы помочь слабовидящим людям и людям, использующим свои телефоны на улице.
 
-<p>{{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчёт может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.</p>
+{{Glossary("W3C")}} определяет хорошее сочетание цветов с помощью алгоритма, который вычисляет соотношение яркости между передним и задним планом. Расчёт может показаться довольно сложным, но мы можем положиться на инструменты, которые сделают эту работу за нас.
 
-<p>Давайте загрузим и установим <a href="http://www.paciellogroup.com/resources/contrastanalyser/">анализатор цветового контраста</a> Paciello Group.</p>
+Давайте загрузим и установим [анализатор цветового контраста](http://www.paciellogroup.com/resources/contrastanalyser/) Paciello Group.
 
-<div class="note">
-<p><strong>Примечание</strong>: в качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как <a href="http://webaim.org/resources/contrastchecker/">проверка цветового контраста</a> WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета.</p>
-</div>
+> **Примечание:** в качестве альтернативы вы можете найти ряд инструментов проверки контраста в интернете, таких как [проверка цветового контраста](http://webaim.org/resources/contrastchecker/) WebAIM. Мы предлагаем локальную проверку, потому что она поставляется в комплекте с экранным цветоподборщиком, чтобы узнать значение цвета.
 
-<p>Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста:</p>
+Например, давайте протестируем цвета на этой странице и посмотрим, как мы справляемся с анализатором цветового контраста:
 
-<p><img alt="Colour contrast on this page: excellent!" src="https://mdn.mozillademos.org/files/9671/colour-contrast.png" style="height: 575px; width: 799px;"></p>
+![Colour contrast on this page: excellent!](https://mdn.mozillademos.org/files/9671/colour-contrast.png)
 
-<p>Коэффициент контрастности яркости между текстом и фоном составляет 8,30:1, что превышает минимальный стандарт (4,5: 1) и должно позволить многим слабовидящим людям читать эту страницу.</p>
+Коэффициент контрастности яркости между текстом и фоном составляет 8,30:1, что превышает минимальный стандарт (4,5: 1) и должно позволить многим слабовидящим людям читать эту страницу.
 
-<h3 id="Размер_шрифта">Размер шрифта</h3>
+### Размер шрифта
 
-<p>Вы можете указать размер шрифта на веб-сайте либо в относительных, либо в абсолютных единицах.</p>
+Вы можете указать размер шрифта на веб-сайте либо в относительных, либо в абсолютных единицах.
 
-<h4 id="Абсолютные_единицы">Абсолютные единицы</h4>
+#### Абсолютные единицы
 
-<p>Абсолютные единицы измерения не рассчитываются пропорционально, а относятся к размеру, так сказать, набранному в камне, и выражаются большую часть времени в пикселях (<code>px</code>). Например, если в вашем CSS вы объявите это:</p>
+Абсолютные единицы измерения не рассчитываются пропорционально, а относятся к размеру, так сказать, набранному в камне, и выражаются большую часть времени в пикселях (`px`). Например, если в вашем CSS вы объявите это:
 
-<pre>body { font-size:16px; }
-</pre>
+```
+body { font-size:16px; }
+```
 
-<p>... вы говорите браузеру, что бы ни случилось, размер шрифта должен быть 16 пикселей. Современные браузеры обходят это правило, делая вид, что вы просите "16 пикселей, когда пользователь устанавливает коэффициент масштабирования 100%".</p>
+... вы говорите браузеру, что бы ни случилось, размер шрифта должен быть 16 пикселей. Современные браузеры обходят это правило, делая вид, что вы просите "16 пикселей, когда пользователь устанавливает коэффициент масштабирования 100%".
 
-<p>Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.</p>
+Однако, на протяжении многих лет Internet Explorer категорически отображается 16 на 16 пикселей. В этом случае масштабирование ничего не дало, даже в последнем Internet Explorer 8, который нам все ещё приходится обслуживать, потому что он все ещё существует.
 
-<h4 id="Относительные_единицы">Относительные единицы</h4>
+#### Относительные единицы
 
-<p>Также называемые пропорциональными единицами, относительные единицы вычисляются относительно родительского элемента. Относительные единицы измерения более дружелюбны к доступности, потому что они уважают настройки в системе пользователя.</p>
+Также называемые пропорциональными единицами, относительные единицы вычисляются относительно родительского элемента. Относительные единицы измерения более дружелюбны к доступности, потому что они уважают настройки в системе пользователя.
 
-<p>Относительные единицы обычно выражаются в <code>em</code>, <code>%</code> и <code>rem</code>:</p>
+Относительные единицы обычно выражаются в `em`, `%` и `rem`:
 
-<dl>
- <dt>Процентные размеры: <code>%</code></dt>
- <dd>Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчёта (обычно эквивалентным 16 пикселям).</dd>
- <dt>Em размеры: <code>em</code></dt>
- <dd>Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы “М” в алфавите (грубо говоря, буква “М” вписывается в квадрат).</dd>
- <dt>Rem размеры: <code>rem</code></dt>
- <dd>Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.</dd>
-</dl>
+- Процентные размеры: `%`
+  - : Этот блок сообщает вашему браузеру, что размер шрифта элемента должен составлять N% от предыдущего элемента, размер шрифта которого был выражен. Если родитель не найден, то размер шрифта по умолчанию в браузере считается базовым размером для расчёта (обычно эквивалентным 16 пикселям).
+- Em размеры: `em`
+  - : Эта единица вычисляется так же, как и проценты, за исключением того, что вы вычисляете в частях 1, а не в частях 100. Говорят, что "em" - это ширина заглавной буквы “М” в алфавите (грубо говоря, буква “М” вписывается в квадрат).
+- Rem размеры: `rem`
+  - : Эта единица измерения пропорциональна размеру шрифта корневого элемента и выражается в виде частей, таких как em.
 
-<p>Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём <code>промежуток </code>с классом <code>подзаголовков</code>, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).</p>
+Предположим, что нам нужен базовый размер шрифта 16px и h1 (основной заголовок) в эквиваленте 32px, но если в пределах h1 мы найдём `промежуток `с классом `подзаголовков`, он тоже должен быть отрисован с размером шрифта по умолчанию (обычно 16px).
 
-<p>Вот HTML, который мы используем:</p>
+Вот HTML, который мы используем:
 
-<pre>&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Эксперимент с размером шрифта&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Эксперимент с размером шрифта</title>
+</head>
+<body>
 
-    &lt;h1&gt;Это наш главный заголовок
-        &lt;span class="subheading"&gt;Это подзаголовок&lt;/span&gt;
-    &lt;/h1&gt;
+    <h1>Это наш главный заголовок
+        <span class="subheading">Это подзаголовок</span>
+    </h1>
 
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<p>CSS на основе процентов будет выглядеть следующим образом:</p>
+CSS на основе процентов будет выглядеть следующим образом:
 
-<pre>body { font-size:100%; } /* 100% от базового размера шрифта браузера, поэтому в большинстве случаев он будет отображаться как 16 пикселей*/
+```
+body { font-size:100%; } /* 100% от базового размера шрифта браузера, поэтому в большинстве случаев он будет отображаться как 16 пикселей*/
 h1 { font-size:200%; } /* в два раза больше размера тела, таким образом, 32 пикселя */
 span.subheading { font-size:50%; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
-</pre>
+```
 
-<p>Та же проблема выражена и с ems:</p>
+Та же проблема выражена и с ems:
 
-<pre>body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
+```
+body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
 h1 { font-size:2em; } /* в 2 раза больше размера тела, так что 32 пикселя */
 span.subheading { font-size:0.5em; } /* половина размера h1, таким образом, 16 пикселей, чтобы вернуться к исходному размеру */
-</pre>
+```
 
-<p>Как вы можете видеть, математика быстро становится сложной, когда вам нужно следить за родителем, родителем родителя, родителем родителя родителя и так далее. (Большинство проектов выполняется в пиксельном программном обеспечении, поэтому математику должен выполнять человек, кодирующий CSS).</p>
+Как вы можете видеть, математика быстро становится сложной, когда вам нужно следить за родителем, родителем родителя, родителем родителя родителя и так далее. (Большинство проектов выполняется в пиксельном программном обеспечении, поэтому математику должен выполнять человек, кодирующий CSS).
 
-<p>Теперь о <code>rem</code>. Эта единица измерения относится к размеру корневого элемента, а не к какому-либо другому родительскому элементу. CSS можно переписать таким образом:</p>
+Теперь о `rem`. Эта единица измерения относится к размеру корневого элемента, а не к какому-либо другому родительскому элементу. CSS можно переписать таким образом:
 
-<pre>body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
+```
+body { font-size:1em; } /* 1em = 100% от базового размера браузера, так что в большинстве случаев это будет выглядеть как 16 пикселей */
 h1 { font-size:2rem; } /* в 2 раза больше размера тела, так что 32 пикселя */
 span.subheading { font-size:1rem; } /* исходный размер */
-</pre>
+```
 
-<p>Так ведь проще, правда? Это работает как в Internet Explorer 9, так и в любом другом поддерживаемом браузере, поэтому, пожалуйста, не стесняйтесь использовать этот способ.</p>
+Так ведь проще, правда? Это работает как в Internet Explorer 9, так и в любом другом поддерживаемом браузере, поэтому, пожалуйста, не стесняйтесь использовать этот способ.
 
-<div class="note">
-<p><strong>Примечание:</strong> вы можете заметить, что Opera Mini не поддерживает размер шрифта в rem. В конечном итоге он будет устанавливать свой собственный размер шрифта, так что не утруждайте себя кормлением его единицами шрифта.</p>
-</div>
+> **Примечание:** вы можете заметить, что Opera Mini не поддерживает размер шрифта в rem. В конечном итоге он будет устанавливать свой собственный размер шрифта, так что не утруждайте себя кормлением его единицами шрифта.
 
-<h4 id="Почему_мне_следует_использовать_пропорциональные_единицы_измерения">Почему мне следует использовать пропорциональные единицы измерения?</h4>
+#### Почему мне следует использовать пропорциональные единицы измерения?
 
-<p>Потому что вы не знаете, когда браузер придёт в себя и откажется увеличивать текст, размер которого выражается в пикселях. Кроме того, проверьте статистику вашего сайта: вы можете получать визиты из старых браузеров.</p>
+Потому что вы не знаете, когда браузер придёт в себя и откажется увеличивать текст, размер которого выражается в пикселях. Кроме того, проверьте статистику вашего сайта: вы можете получать визиты из старых браузеров.
 
-<p>Мы бы посоветовали следующее:</p>
+Мы бы посоветовали следующее:
 
-<ul>
- <li>Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;</li>
- <li>Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.</li>
-</ul>
+- Опишите шрифты в единицах rem, большинство браузеров будут очень довольны ими;
+- Пусть старые браузеры отображают шрифты со своим собственным внутренним движком. Браузерные движки будут игнорировать любое свойство или значение в CSS, если они не могут справиться с ними, так что ваш сайт все ещё может быть непригодным для использования, если он не соответствует видению вашего дизайнера. Старые браузеры в любом случае находятся на пути к выходу из использования.
 
-<div class="note">
-<p><strong>Примечание</strong>: ваш пробег может варьироваться. Если вам нужно угодить старым браузерам, вам придётся использовать ems и сделать немного больше математики.</p>
-</div>
+> **Примечание:** ваш пробег может варьироваться. Если вам нужно угодить старым браузерам, вам придётся использовать ems и сделать немного больше математики.
 
-<h3 id="Длина_строки">Длина строки</h3>
+### Длина строки
 
-<p>Существует давняя дискуссия о длине строки в интернете, но вот история. Ещё в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.</p>
+Существует давняя дискуссия о длине строки в интернете, но вот история. Ещё в те времена, когда у нас были газеты, Печатники понимали, что глаза читателя будут с трудом переходить от одной строки к другой, если строки будут слишком длинными. Какое же решение? Столбцы.
 
-<p>Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.</p>
+Конечно, проблема не исчезает, когда мы переключаемся на интернет. Глаза читателя действуют как челнок, идущий от строки к строке. Чтобы сделать чтение проще для глаз людей, ограничьте ширину строки примерно 60 или 70 символами.
 
-<p>Для этого вы можете указать размер контейнера вашего текста. Давайте рассмотрим этот HTML:</p>
+Для этого вы можете указать размер контейнера вашего текста. Давайте рассмотрим этот HTML:
 
-<pre>&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-    &lt;meta charset="UTF-8"&gt;
-    &lt;title&gt;Эксперимент с размером шрифта&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
+```
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Эксперимент с размером шрифта</title>
+</head>
+<body>
 
-&lt;div class="container"&gt;
-    &lt;h1&gt;Это наш главный заголовок
-        &lt;span class="subheading"&gt;Это наш подзаголовок&lt;/span&gt;
-    &lt;/h1&gt;
+<div class="container">
+    <h1>Это наш главный заголовок
+        <span class="subheading">Это наш подзаголовок</span>
+    </h1>
 
-    &lt;p&gt;[длинный текст, который занимает много строк]&lt;/p&gt;
-&lt;/div&gt;
+    <p>[длинный текст, который занимает много строк]</p>
+</div>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
 
-<p>У нас есть <code>div</code> с классом <code>container</code>. Мы можем стилизовать <code>div</code> либо для установки его ширины (используя свойство <code>width</code>), либо для его максимальной ширины, чтобы он никогда не становился слишком большим (используя свойство <code>max-width</code>). Если вам нужен эластичный/адаптивный веб-сайт, и вы не знаете, какова ширина браузера по умолчанию, вы можете использовать свойство <code>max-width</code>, чтобы разрешить до 70 символов в строке и не более:</p>
+У нас есть `div` с классом `container`. Мы можем стилизовать `div` либо для установки его ширины (используя свойство `width`), либо для его максимальной ширины, чтобы он никогда не становился слишком большим (используя свойство `max-width`). Если вам нужен эластичный/адаптивный веб-сайт, и вы не знаете, какова ширина браузера по умолчанию, вы можете использовать свойство `max-width`, чтобы разрешить до 70 символов в строке и не более:
 
-<pre>div.container { max-width:70em; }</pre>
+```
+div.container { max-width:70em; }
+```
 
-<h3 id="Альтернативный_контент_для_изображений_аудио_и_видео">Альтернативный контент для изображений, аудио и видео</h3>
+### Альтернативный контент для изображений, аудио и видео
 
-<p>Веб-сайты часто включают в себя разные вещи, помимо обычного текста.</p>
+Веб-сайты часто включают в себя разные вещи, помимо обычного текста.
 
-<h4 id="Изображения">Изображения</h4>
+#### Изображения
 
-<p>Изображения могут быть декоративными или информационными, но нет гарантий, что пользователь сможет увидеть их. Например,</p>
+Изображения могут быть декоративными или информационными, но нет гарантий, что пользователь сможет увидеть их. Например,
 
-<ul>
- <li>Слабовидящие пользователи полагаются на средство чтения с экрана, которое может обрабатывать только текст.</li>
- <li>Ваши читатели могут использовать очень строгую интрасеть, которая блокирует изображения, исходящие из {{Glossary("CDN")}}.</li>
- <li>Ваши читатели могут отключить изображения для экономии пропускной способности, особенно на мобильных устройствах (см. ниже).</li>
-</ul>
+- Слабовидящие пользователи полагаются на средство чтения с экрана, которое может обрабатывать только текст.
+- Ваши читатели могут использовать очень строгую интрасеть, которая блокирует изображения, исходящие из {{Glossary("CDN")}}.
+- Ваши читатели могут отключить изображения для экономии пропускной способности, особенно на мобильных устройствах (см. ниже).
 
-<dl>
- <dt>Декоративные изображения</dt>
- <dd>Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут <code>alt</code>: <code>&lt;img src="deco.gif" alt=""&gt;</code>, чтобы они не засоряли текст.</dd>
- <dt>Информационные изображения</dt>
- <dd>Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут <code>alt</code>.</dd>
-</dl>
+<!---->
 
-<p>Если изображение может быть описано кратко, вы можете предоставить атрибут <code>alt </code>и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту <code>longdesc</code>. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.</p>
+- Декоративные изображения
+  - : Они просто для украшения и не передают никакой полезной информации. Чаще всего их можно было бы заменить фоновым изображением. Убедитесь, что они имеют пустой атрибут `alt`: `<img src="deco.gif" alt="">`, чтобы они не засоряли текст.
+- Информационные изображения
+  - : Они используются для передачи информации, отсюда и их название. Они могут, например, показать график, жест человека или любую другую информацию. Как минимум, вы должны предоставить соответствующий атрибут `alt`.
 
-<div class="note">
-<p><strong>Примечание</strong>: использование и даже существование <code>longdesc </code>обсуждается уже довольно давно. Пожалуйста, обратитесь к <a href="http://www.w3.org/TR/html-longdesc/">расширению описания изображений</a> W3C (longdesc) для получения полного объяснения и подробных примеров.</p>
-</div>
+Если изображение может быть описано кратко, вы можете предоставить атрибут `alt `и ничего больше. Если изображение не может быть описано кратко, вам придётся либо предоставить тот же контент в другой форме на той же странице (например, дополнить круговую диаграмму таблицей, содержащей те же данные), либо прибегнуть к атрибуту `longdesc`. Значение этого атрибута представляет собой URL-адрес, указывающий на ресурс, явно описывающий в деталях содержимое изображения.
+
+> **Примечание:** использование и даже существование `longdesc `обсуждается уже довольно давно. Пожалуйста, обратитесь к [расширению описания изображений](http://www.w3.org/TR/html-longdesc/) W3C (longdesc) для получения полного объяснения и подробных примеров.
 
-<h4 id="Аудиовидео">Аудио/видео</h4>
+#### Аудио/видео
 
-<p>Также вам стоит предоставлять альтернативы мультимедийному контенту.</p>
+Также вам стоит предоставлять альтернативы мультимедийному контенту.
 
-<dl>
- <dt>Субтитры / закрытие субтитров</dt>
- <dd>Вы должны включить подписи в своё видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).</dd>
- <dt>Расшифровка</dt>
- <dd>Субтитры работают только в том случае, если кто-то смотрит видео. Многие пользователи не имеют времени или не имеют соответствующего плагина или кодека. Кроме того, поисковые системы полагаются в основном на текст для индексации вашего контента. По всем этим причинам, пожалуйста, предоставьте текстовую расшифровку видео / аудиофайла.</dd>
-</dl>
+- Субтитры / закрытие субтитров
+  - : Вы должны включить подписи в своё видео, чтобы угодить посетителям, которые не могут слышать звук. Некоторые пользователи имеют проблемы со слухом, не имеют функционирующих динамиков или работают в шумной среде (например, в поезде).
+- Расшифровка
+  - : Субтитры работают только в том случае, если кто-то смотрит видео. Многие пользователи не имеют времени или не имеют соответствующего плагина или кодека. Кроме того, поисковые системы полагаются в основном на текст для индексации вашего контента. По всем этим причинам, пожалуйста, предоставьте текстовую расшифровку видео / аудиофайла.
 
-<h3 id="Сжатие_изображения">Сжатие изображения</h3>
+### Сжатие изображения
 
-<p>Некоторые пользователи могут выбрать отображение изображений, но все ещё имеют ограниченную пропускную способность, особенно в развивающихся странах и на мобильных устройствах. Если вы хотите создать успешный сайт, пожалуйста, сожмите ваши изображения. Существуют различные инструменты, которые помогут вам, как онлайн, так и локально:</p>
+Некоторые пользователи могут выбрать отображение изображений, но все ещё имеют ограниченную пропускную способность, особенно в развивающихся странах и на мобильных устройствах. Если вы хотите создать успешный сайт, пожалуйста, сожмите ваши изображения. Существуют различные инструменты, которые помогут вам, как онлайн, так и локально:
 
-<ul>
- <li><strong>Устанавливаемое программное обеспечение.</strong> <a href="https://imageoptim.com/">ImageOptim</a> (Mac), <a href="http://optipng.sourceforge.net/">OptiPNG</a> (все платформы), <a href="http://pmt.sourceforge.net/pngcrush/">PNGcrush</a> (DOS, Unix/Linux)</li>
- <li><strong>Онлайн инструменты.</strong> Yahoo's <a href="https://imgopt.com/">smushit</a>!, <a href="http://tools.dynamicdrive.com/imageoptimizer/">Онлайн-оптимизатор изображений Dynamic</a> drive (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)</li>
-</ul>
+- **Устанавливаемое программное обеспечение.** [ImageOptim](https://imageoptim.com/) (Mac), [OptiPNG](http://optipng.sourceforge.net/) (все платформы), [PNGcrush](http://pmt.sourceforge.net/pngcrush/) (DOS, Unix/Linux)
+- **Онлайн инструменты.** Yahoo's [smushit](https://imgopt.com/)!, [Онлайн-оптимизатор изображений Dynamic](http://tools.dynamicdrive.com/imageoptimizer/) drive (который может автоматически преобразовываться из одного формата в другой, если он более эффективен с пропускной способностью)
diff --git a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
index 0baf91d8dd36c3..380934739e2e49 100644
--- a/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
+++ b/files/ru/learn/common_questions/how_do_you_host_your_website_on_google_app_engine/index.md
@@ -3,58 +3,55 @@ title: Как разместить свой сайт в Google App Engine
 slug: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
 translation_of: Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine
 ---
-<p class="summary"><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google - нужно ли создавать многоуровневое веб-приложение с нуля или размещать статический веб-сайт. Вот пошаговое руководство по размещению вашего сайта в Google App Engine.</p>
-
-<h2 id="Создание_проекта_Google_Cloud_Platform">Создание проекта Google Cloud Platform</h2>
-
-<p>Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учётной записи Google.</p>
-
-<ol>
- <li>Перейдите на панель <a href="https://console.cloud.google.com/projectselector/appengine">App Engine dashboard</a> в консоли Google Cloud Platform и нажмите кнопку «Создать» (<em>Create</em>).</li>
- <li>Введите название проекта, отредактируйте свой ID проекта и отметьте его. Для этого урока используются следующие значения:
-  <ul>
-   <li>Project name: <em>GAE Sample Site</em></li>
-   <li>Project ID: <em>gaesamplesite</em></li>
-  </ul>
- </li>
- <li>Если вы ещё не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.</li>
-</ol>
-
-<h2 id="Создание_приложения">Создание приложения</h2>
-
-<p>Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.</p>
-
-<ol>
- <li>Нам понадобится образец приложения для публикации. Если у вас его нет, загрузите и распакуйте это <a href="http://gaesamplesite.appspot.com/downloads.html">sample app</a>..</li>
- <li>Посмотрите на структуру образца приложения - папка <code>website</code> содержит содержимое вашего сайта, а <code>app.yaml</code> - ваш файл конфигурации приложения.
-  <ul>
-   <li>Ваш веб-сайт должен войти в папку <code>website</code>, а его целевую страницу нужно называть <code>index.html</code>, но кроме того, она может принимать любую форму.</li>
-   <li>Файл <code>app.yaml</code> - это файл конфигурации, который сообщает App Engine, как сопоставлять URL-адреса вашим статическим файлам. Вам не нужно его редактировать.</li>
-  </ul>
- </li>
-</ol>
-
-<h2 id="Публикация_приложения">Публикация приложения</h2>
-
-<p>Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.</p>
-
-<ol>
- <li>Нажмите кнопку Активировать Google Cloud Shell в верхней части окна консоли.<br>
-  <img alt="Activate Google Cloud Shell button" src="https://mdn.mozillademos.org/files/15041/activate-google-cloud-shell-button.png" style="height: 47px; margin: 1em 0; width: 1279px;"></li>
- <li>Откройте редактор кода с панели инструментов Cloud Shell.<br>
-  <img alt="Code Editor from Cloud Shell toolbar" src="https://mdn.mozillademos.org/files/15940/Screen%20Shot%202018-05-09%20at%2023.13.21.png" style="height: 590px; width: 3000px;"></li>
- <li>С помощью drag and drop разместите папку <code>sample-app</code> в левой панели редактора кода.</li>
- <li>Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения:
-  <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">cd sample-app</pre>
- </li>
- <li>Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine:
-  <pre class="brush:bash no-line-numbers" style="margin: 1em 0;">gcloud app deploy</pre>
- </li>
- <li>Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.</li>
- <li>Нажмите <code>Y</code> для подтверждения.</li>
- <li>Теперь перейдите по ссылке <em>your-project-id</em>.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID <em>gaesamplesite, </em>перейдите по ссылке <a href="http://gaesamplesite.appspot.com/">gaesamplesite.appspot.com</a>.</li>
-</ol>
-
-<h2 id="See_also">See also</h2>
-
-<p>Чтобы узнать больше, смотрите <a href="https://cloud.google.com/appengine/docs/">Google App Engine Documentation</a>.</p>
+[Google App Engine](https://cloud.google.com/appengine/ "App Engine - Build Scalable Web & Mobile Backends in Any Language  |  Google Cloud Platform") - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google - нужно ли создавать многоуровневое веб-приложение с нуля или размещать статический веб-сайт. Вот пошаговое руководство по размещению вашего сайта в Google App Engine.
+
+## Создание проекта Google Cloud Platform
+
+Чтобы использовать инструменты Google для своего собственного сайта или приложения, вам нужно создать новый проект на Google Cloud Platform. Для этого требуется наличие учётной записи Google.
+
+1.  Перейдите на панель [App Engine dashboard](https://console.cloud.google.com/projectselector/appengine) в консоли Google Cloud Platform и нажмите кнопку «Создать» (_Create_).
+2.  Введите название проекта, отредактируйте свой ID проекта и отметьте его. Для этого урока используются следующие значения:
+
+    - Project name: _GAE Sample Site_
+    - Project ID: _gaesamplesite_
+
+3.  Если вы ещё не создали проект раньше, вам нужно будет выбрать, хотите ли вы получать обновления электронной почты или нет, соглашайтесь с Условиями обслуживания, а затем вы можете нажать кнопку «Создать», чтобы создать свой проект.
+
+## Создание приложения
+
+Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.
+
+1.  Нам понадобится образец приложения для публикации. Если у вас его нет, загрузите и распакуйте это [sample app](http://gaesamplesite.appspot.com/downloads.html)..
+2.  Посмотрите на структуру образца приложения - папка `website` содержит содержимое вашего сайта, а `app.yaml` - ваш файл конфигурации приложения.
+
+    - Ваш веб-сайт должен войти в папку `website`, а его целевую страницу нужно называть `index.html`, но кроме того, она может принимать любую форму.
+    - Файл `app.yaml` - это файл конфигурации, который сообщает App Engine, как сопоставлять URL-адреса вашим статическим файлам. Вам не нужно его редактировать.
+
+## Публикация приложения
+
+Каждый проект Cloud Platform может содержать одно приложение App Engine. Давайте подготовим приложение для нашего проекта.
+
+1.  Нажмите кнопку Активировать Google Cloud Shell в верхней части окна консоли.
+    ![Activate Google Cloud Shell button](https://mdn.mozillademos.org/files/15041/activate-google-cloud-shell-button.png)
+2.  Откройте редактор кода с панели инструментов Cloud Shell.
+    ![Code Editor from Cloud Shell toolbar](https://mdn.mozillademos.org/files/15940/Screen%20Shot%202018-05-09%20at%2023.13.21.png)
+3.  С помощью drag and drop разместите папку `sample-app` в левой панели редактора кода.
+4.  Вернитесь обратно в Cloud Shell и введите следующую команду для перехода в директорию вашего приложения:
+
+    ```bash
+    cd sample-app
+    ```
+
+5.  Теперь вы готовы развернуть ваше приложение, т.е. загрузить его в App Engine:
+
+    ```bash
+    gcloud app deploy
+    ```
+
+6.  Введите число от одного до семи, чтобы выбрать регион, в котором вы хотите разместить своё приложение.
+7.  Нажмите `Y` для подтверждения.
+8.  Теперь перейдите по ссылке _your-project-id_.appspot.com, чтобы увидеть ваш сайт. Например, для проекта с ID _gaesamplesite,_ перейдите по ссылке [gaesamplesite.appspot.com](http://gaesamplesite.appspot.com/).
+
+## See also
+
+Чтобы узнать больше, смотрите [Google App Engine Documentation](https://cloud.google.com/appengine/docs/).
diff --git a/files/ru/learn/common_questions/how_does_the_internet_work/index.md b/files/ru/learn/common_questions/how_does_the_internet_work/index.md
index 27267bd79ca97d..a8f26903ba690f 100644
--- a/files/ru/learn/common_questions/how_does_the_internet_work/index.md
+++ b/files/ru/learn/common_questions/how_does_the_internet_work/index.md
@@ -9,95 +9,76 @@ tags:
 translation_of: Learn/Common_questions/How_does_the_Internet_work
 original_slug: Learn/How_the_Internet_works
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<div class="summary">
-<p>Эта статья о том, что такое Интернет, и как он работает.</p>
-</div>
+Эта статья о том, что такое Интернет, и как он работает.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Отсутствуют, но мы будем признательны, если вы сначала прочтёте <a href="/en-US/docs/Learn/Thinking_before_coding">Материал о там как начать разрабатывать свой сайт</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом. </p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Отсутствуют, но мы будем признательны, если вы сначала прочтёте [Материал о там как начать разрабатывать свой сайт](/ru/docs/Learn/Thinking_before_coding) |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Вы изучите основы технической инфраструктуры Веба и поймёте разницу между Вебом и интернетом.                                                              |
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p><strong>Интернет</strong> является основой сети (the Web), технической инфраструктурой, благодаря которой и существует Всемирная Паутина. По своей сути, интернет - очень большая сеть компьютеров, которые могут взаимодействовать друг с другом.</p>
+**Интернет** является основой сети (the Web), технической инфраструктурой, благодаря которой и существует Всемирная Паутина. По своей сути, интернет - очень большая сеть компьютеров, которые могут взаимодействовать друг с другом.
 
-<p><a href="https://www.wikiwand.com/ru/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82#/.D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F" rel="external">История интернета не до конца ясна</a>. Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьёзных сбоях, они всё равно найдут способ связаться друг с другом.</p>
+[История интернета не до конца ясна](https://www.wikiwand.com/ru/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BD%D0%B5%D1%82#/.D0.98.D1.81.D1.82.D0.BE.D1.80.D0.B8.D1.8F). Проект по созданию интернета был начат в 60-х годах как исследовательский проект при поддержке министерства обороны США, но уже в 80-е годы вырос в сеть, которую поддерживали и развивали множество университетов и частных компаний. Технологии, лежащие в основе интернета, также продолжали развиваться со временем, но основной принцип работы не сильно изменился: Интернет - это способ подключить компьютеры в единую сеть и убедиться, что даже при серьёзных сбоях, они всё равно найдут способ связаться друг с другом.
 
-<h2 id="Активное_изучение">Активное изучение</h2>
+## Активное изучение
 
-<ul>
- <li><a href="https://www.youtube.com/watch?v=7_LPdttKXPc">Как работает интернет за 5 минут</a>: 5-минутный видеоролик поможет вам понять базовые принципы работы интернета (автор Aaron Titus).</li>
-</ul>
+- [Как работает интернет за 5 минут](https://www.youtube.com/watch?v=7_LPdttKXPc): 5-минутный видеоролик поможет вам понять базовые принципы работы интернета (автор Aaron Titus).
 
-<h2 id="Погружаемся_глубже">Погружаемся глубже</h2>
+## Погружаемся глубже
 
-<h3 id="Простая_сеть">Простая сеть</h3>
+### Простая сеть
 
-<p>Когда нужно связать между собой два компьютера, вы должны связать их в сеть либо проводным (обычно с помощью <a href="https://ru.wikipedia.org/wiki/Коммутационный_шнур">Ethernet кабеля</a>), либо беспроводным способом (например, с помощью <a href="http://ru.wikipedia.org/wiki/WiFi" rel="external">WiFi</a> или <a href="http://ru.wikipedia.org/wiki/Bluetooth" rel="external">Bluetooth</a>). Современные компьютеры поддерживают любой из этих способов связи.</p>
+Когда нужно связать между собой два компьютера, вы должны связать их в сеть либо проводным (обычно с помощью [Ethernet кабеля](https://ru.wikipedia.org/wiki/Коммутационный_шнур)), либо беспроводным способом (например, с помощью [WiFi](http://ru.wikipedia.org/wiki/WiFi) или [Bluetooth](http://ru.wikipedia.org/wiki/Bluetooth)). Современные компьютеры поддерживают любой из этих способов связи.
 
-<div class="note">
-<p><strong>Примечание:</strong> До конца этой статьи мы будем говорить только о физическом (проводном) способе подключения, но беспроводные сети работают аналогичным образом.</p>
-</div>
+> **Примечание:** До конца этой статьи мы будем говорить только о физическом (проводном) способе подключения, но беспроводные сети работают аналогичным образом.
 
-<p><img alt="Two computers linked together" src="https://mdn.mozillademos.org/files/8441/internet-schema-1.png" style="height: 152px; width: 600px;"></p>
+![Two computers linked together](https://mdn.mozillademos.org/files/8441/internet-schema-1.png)
 
-<p>Таким способом вы можете подключить более двух компьютеров, но с каждым новым это становится все сложнее. Если хочется подключить, скажем, 10 компьютеров, вам понадобится 45 кабелей и 9 сетевых плат в каждом компьютере!</p>
+Таким способом вы можете подключить более двух компьютеров, но с каждым новым это становится все сложнее. Если хочется подключить, скажем, 10 компьютеров, вам понадобится 45 кабелей и 9 сетевых плат в каждом компьютере!
 
-<p><img alt="Ten computers all together" src="https://mdn.mozillademos.org/files/8443/internet-schema-2.png" style="height: 576px; width: 600px;"></p>
+![Ten computers all together](https://mdn.mozillademos.org/files/8443/internet-schema-2.png)
 
-<p>Чтобы решить эту проблему, каждый компьютер в сети подключается к специальному маленькому компьютеру. Этот компьютер называют <em>маршрутизатором</em>. Маршрутизатор исполняет только одну роль: как сигнальщик на железной дороге он следит за тем, чтобы пакет, отправленный одним компьютером — источником — достиг пункта назначения. Чтобы отправить сообщение компьютеру B, компьютер A сначала должен отправить его маршрутизатору, который перенаправит его компьютеру B и проконтролирует, чтобы данные не попали компьютеру C.</p>
+Чтобы решить эту проблему, каждый компьютер в сети подключается к специальному маленькому компьютеру. Этот компьютер называют _маршрутизатором_. Маршрутизатор исполняет только одну роль: как сигнальщик на железной дороге он следит за тем, чтобы пакет, отправленный одним компьютером — источником — достиг пункта назначения. Чтобы отправить сообщение компьютеру B, компьютер A сначала должен отправить его маршрутизатору, который перенаправит его компьютеру B и проконтролирует, чтобы данные не попали компьютеру C.
 
-<p>С добавлением маршрутизатора наша сеть здорово упрощается: чтобы соединить 10 компьютеров нам требуется только 10 кабелей (каждый кабель соединяет маршрутизатор с одним из компьютеров).</p>
+С добавлением маршрутизатора наша сеть здорово упрощается: чтобы соединить 10 компьютеров нам требуется только 10 кабелей (каждый кабель соединяет маршрутизатор с одним из компьютеров).
 
-<p><img alt="Ten computers with a router" src="https://mdn.mozillademos.org/files/8445/internet-schema-3.png" style="height: 576px; width: 600px;"></p>
+![Ten computers with a router](https://mdn.mozillademos.org/files/8445/internet-schema-3.png)
 
-<h3 id="Сеть_сетей">Сеть сетей</h3>
+### Сеть сетей
 
-<p>Пока все нормально. Но что нам делать, если нужно объединить в сеть сотни, тысячи или миллиарды компьютеров? Конечно, один маршрутизатор не справится с этой задачей, но если вы внимательно читали, то помните, что маршрутизатор — это обычный компьютер, и ничто не мешает нам соединить друг с другом 2 маршрутизатора. Давайте сделаем это.</p>
+Пока все нормально. Но что нам делать, если нужно объединить в сеть сотни, тысячи или миллиарды компьютеров? Конечно, один маршрутизатор не справится с этой задачей, но если вы внимательно читали, то помните, что маршрутизатор — это обычный компьютер, и ничто не мешает нам соединить друг с другом 2 маршрутизатора. Давайте сделаем это.
 
-<p><img alt="Two routers linked together" src="https://mdn.mozillademos.org/files/8447/internet-schema-4.png"></p>
+![Two routers linked together](https://mdn.mozillademos.org/files/8447/internet-schema-4.png)
 
-<p>Подключая компьютеры к маршрутизатору, а затем — маршрутизатор к другому маршрутизатору, мы можем увеличивать нашу сеть до сколь угодно больших размеров.</p>
+Подключая компьютеры к маршрутизатору, а затем — маршрутизатор к другому маршрутизатору, мы можем увеличивать нашу сеть до сколь угодно больших размеров.
 
-<p><img alt="Routers linked to routers" src="https://mdn.mozillademos.org/files/8449/internet-schema-5.png" style="height: 563px; width: 600px;"></p>
+![Routers linked to routers](https://mdn.mozillademos.org/files/8449/internet-schema-5.png)
 
-<p>Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме неё есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется <em>модем</em>. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.</p>
+Такая сеть уже очень похожа на то, что мы называем интернетом, но мы что-то упустили. Наша сеть построена для решения только наших задач. Но кроме неё есть и другие сети: наши друзья, соседи — кто угодно может создать свою сеть. Как же нам их объединить? Мы не можем протянуть кабели между нашим домом и всеми остальными сетями в мире. Чтобы решить эту проблему, мы можем воспользоваться уже существующими кабельными сетями. Ведь у нас дома уже есть кабели, например, электрические или телефонные. Телефонный провод уже соединяет ваш дом со всем остальным миром, так что он идеально подходит для решения нашей задачи. Чтобы подключить нашу сеть к глобальной сети с помощью телефонного провода, нам понадобится специальное оборудование, которое называется _модем_. Модем перекодирует информацию, поступающую из нашей сети в формат, который можно передавать через телефонную сеть, и наоборот, декодируют информацию из телефонной сети в формат, который распознают наши компьютеры.
 
-<p><img alt="A router linked to a modem" src="https://mdn.mozillademos.org/files/8451/internet-schema-6.png" style="height: 340px; width: 600px;"></p>
+![A router linked to a modem](https://mdn.mozillademos.org/files/8451/internet-schema-6.png)
 
-<p>Итак, мы подключились к телефонной сети. Следующий шаг — передать сообщение из нашей сети в сеть, с которой мы хотим связаться. Чтобы сделать это, мы должны подключить нашу сеть к провайдеру услуг интернета (Internet Service Provider (ISP)). Провайдер — компания, которая обслуживает специальные маршрутизаторы, которые не только подключены друг к другу (объединяют в единую сеть всех клиентов провайдера), но также связаны с маршрутизаторами других провайдеров. Таким образом, наше сообщение, пройдя транзитом через сеть нескольких провайдеров, достигнет сеть назначения. Интернет — это сеть сетей, которая объединяет в себе всю вышеперечисленную инфраструктуру.</p>
+Итак, мы подключились к телефонной сети. Следующий шаг — передать сообщение из нашей сети в сеть, с которой мы хотим связаться. Чтобы сделать это, мы должны подключить нашу сеть к провайдеру услуг интернета (Internet Service Provider (ISP)). Провайдер — компания, которая обслуживает специальные маршрутизаторы, которые не только подключены друг к другу (объединяют в единую сеть всех клиентов провайдера), но также связаны с маршрутизаторами других провайдеров. Таким образом, наше сообщение, пройдя транзитом через сеть нескольких провайдеров, достигнет сеть назначения. Интернет — это сеть сетей, которая объединяет в себе всю вышеперечисленную инфраструктуру.
 
-<p><img alt="Full Internet stack" src="https://mdn.mozillademos.org/files/8453/internet-schema-7.png" style="height: 1293px; width: 340px;"></p>
+![Full Internet stack](https://mdn.mozillademos.org/files/8453/internet-schema-7.png)
 
-<h3 id="Поиск_компьютера">Поиск компьютера</h3>
+### Поиск компьютера
 
-<p>Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключённый к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для <em>Internet Protocol</em>, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделённых точками, например: 192.168.2.10.</p>
+Чтобы послать сообщение какому-то компьютеру, необходимо как-то обратиться к нему, выделить среди других. Поэтому каждый компьютер, подключённый к сети, имеет свой уникальный адрес для связи: этот адрес называют IP-адресом (IP — сокращение для _Internet Protocol_, протокол интернета). В зависимости от версии протокола IP этот адрес может записываться по-разному. Самая широко используемая версия интернет-протокола — версия 4. Адреса IPv4 обычно записываются в виде четырёх чисел, разделённых точками, например: 192.168.2.10.
 
-<p>Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.</p>
+Такие адреса отлично подходят для компьютеров, но людям очень сложно их запоминать. Чтобы упростить себе жизнь, мы можем присвоить каждому IP-адресу псевдоним с понятным для человека именем. Такой псевдоним называют доменным именем. Например, google.com — доменное имя, которое является псевдонимом IP-адреса 173.194.121.32. Использование доменного имени — самый простой способ обратиться к компьютеру в интернете.
 
-<p><img alt="Show how a domain name can alias an IP address" src="https://mdn.mozillademos.org/files/8405/dns-ip.png" style="height: 160px; width: 330px;"></p>
+![Show how a domain name can alias an IP address](https://mdn.mozillademos.org/files/8405/dns-ip.png)
 
-<h3 id="Интернет_и_веб">Интернет и веб</h3>
+### Интернет и веб
 
-<p>Как вы уже заметили, когда мы просматриваем Веб с помощью браузера, обычно мы используем доменное имя, чтобы обратиться к веб-сайту. Означает ли это, что Интернет и Веб — это одно и то же? Ответ не так прост. Мы уже знаем, что Интернет — это техническая основа, которая позволяет миллиардам компьютеров связываться друг с другом. Среди этих компьютеров есть небольшая группа (называемая веб-серверами), которые могут отправлять сообщения, распознаваемые браузерами. <em>Интернет</em> —  это инфраструктура, а <em>Веб</em> — это сервис, построенный на основе этой инфраструктуры. Стоит отметить, что кроме Веба есть и другие сервисы, построенные на базе Интернета. Например, электронная почта или {{Glossary("IRC")}}.</p>
+Как вы уже заметили, когда мы просматриваем Веб с помощью браузера, обычно мы используем доменное имя, чтобы обратиться к веб-сайту. Означает ли это, что Интернет и Веб — это одно и то же? Ответ не так прост. Мы уже знаем, что Интернет — это техническая основа, которая позволяет миллиардам компьютеров связываться друг с другом. Среди этих компьютеров есть небольшая группа (называемая веб-серверами), которые могут отправлять сообщения, распознаваемые браузерами. _Интернет_ — это инфраструктура, а _Веб_ — это сервис, построенный на основе этой инфраструктуры. Стоит отметить, что кроме Веба есть и другие сервисы, построенные на базе Интернета. Например, электронная почта или {{Glossary("IRC")}}.
 
-<h2 id="Что_дальше">Что дальше</h2>
+## Что дальше
 
-<ul>
- <li><a href="/ru/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
- <li><a href="/ru/docs/Learn/Pages_sites_servers_and_search_engines">Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком</a></li>
- <li><a href="/ru/docs/Learn/Understanding_domain_names">Что такое доменные имена</a></li>
-</ul>
+- [Как работает Веб](/ru/Learn/Getting_started_with_the_web/How_the_Web_works)
+- [Понимание разницы между веб-страницей, веб-сайтом, веб-сервером и поисковиком](/ru/docs/Learn/Pages_sites_servers_and_search_engines)
+- [Что такое доменные имена](/ru/docs/Learn/Understanding_domain_names)
diff --git a/files/ru/learn/common_questions/how_much_does_it_cost/index.md b/files/ru/learn/common_questions/how_much_does_it_cost/index.md
index 38db795a52dba8..529b5697e58ee9 100644
--- a/files/ru/learn/common_questions/how_much_does_it_cost/index.md
+++ b/files/ru/learn/common_questions/how_much_does_it_cost/index.md
@@ -7,153 +7,128 @@ tags:
   - стоимость
 translation_of: Learn/Common_questions/How_much_does_it_cost
 ---
-<div class="summary">
-<p>Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.</p>
-</div>
+Веб-разработка обходится не так дёшево, как вам может показаться. В этой статье мы обсудим, как много вам потребуется потратить и почему.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Прежде чем приступить:</th>
-   <td>Вам следует уже иметь представление о том, <a href="/en-US/Learn/What_software_do_I_need">какое программное обеспечение вам нужно</a>, различия между веб-страницей, веб-сайтом, и тд, а также о том, <a href="/en-US/Learn/Understanding_domain_names">что из себя представляет доменное имя</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге.</td>
-  </tr>
- </tbody>
-</table>
+| Прежде чем приступить: | Вам следует уже иметь представление о том, [какое программное обеспечение вам нужно](/en-US/Learn/What_software_do_I_need), различия между веб-страницей, веб-сайтом, и тд, а также о том, [что из себя представляет доменное имя](/en-US/Learn/Understanding_domain_names). |
+| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                  | Рассмотреть весь процесс создания веб-сайта и оценить расходы на каждом шаге.                                                                                                                                                                                                |
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили). </p>
+Запуск сайта может вам обойтись в сущее ничто, однако, ваши расходы могут достичь и критических значений. В этой статье мы обсудим, как дорого может что-либо стоить, и как вам получить то, за что вы заплатили (или не платили).
 
-<h2 id="Программное_обеспечение">Программное обеспечение</h2>
+## Программное обеспечение
 
-<h3 id="Текстовые_редакторы">Текстовые редакторы</h3>
+### Текстовые редакторы
 
-<p>Вероятно, у вас уже есть текстовый редактор: например, блокнот на Windows, Gedit на Linux, TextEdit на Mac. Но вам будет легче писать код, если вы выберете редактор, который имеет подсветку синтаксиса и поможет вам наладить структуру кода.</p>
+Вероятно, у вас уже есть текстовый редактор: например, блокнот на Windows, Gedit на Linux, TextEdit на Mac. Но вам будет легче писать код, если вы выберете редактор, который имеет подсветку синтаксиса и поможет вам наладить структуру кода.
 
-<p>Многие редакторы бесплатны, например, <a href="https://atom.io/">Atom</a>, <a href="http://brackets.io/">Brackets</a>, <a href="http://bluefish.openoffice.nl/">Bluefish</a>, <a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a>, <a href="http://eclipse.org/">Eclipse</a>, <a href="https://netbeans.org/">Netbeans</a>, и <a href="https://code.visualstudio.com/">Visual Studio Code. </a>Некоторые, такие как <a href="http://www.sublimetext.com/">Sublime Text</a>, вы можете использовать в пробном режиме сколько угодно, но при этом, будете получать рекомендации о возможности приобретения. Некоторые, такие как <a href="https://www.jetbrains.com/phpstorm/">PhpStorm</a>, могут стоить от нескольких десятков до 200 долларов, в зависимости от выбранного плана. Наконец, есть те из них, такие как <a href="http://www.visualstudio.com/">Microsoft Visual Studio</a>, которые могут стоить сотни или даже тысячи долларов; хотя Visual Studio Community бесплатна для индивидуальных разработчиков или проектов с открытым исходным кодом. Часто, у платных редакторов есть также пробные версии.</p>
+Многие редакторы бесплатны, например, [Atom](https://atom.io/), [Brackets](http://brackets.io/), [Bluefish](http://bluefish.openoffice.nl/), [TextWrangler](http://www.barebones.com/products/textwrangler/), [Eclipse](http://eclipse.org/), [Netbeans](https://netbeans.org/), и [Visual Studio Code. ](https://code.visualstudio.com/)Некоторые, такие как [Sublime Text](http://www.sublimetext.com/), вы можете использовать в пробном режиме сколько угодно, но при этом, будете получать рекомендации о возможности приобретения. Некоторые, такие как [PhpStorm](https://www.jetbrains.com/phpstorm/), могут стоить от нескольких десятков до 200 долларов, в зависимости от выбранного плана. Наконец, есть те из них, такие как [Microsoft Visual Studio](http://www.visualstudio.com/), которые могут стоить сотни или даже тысячи долларов; хотя Visual Studio Community бесплатна для индивидуальных разработчиков или проектов с открытым исходным кодом. Часто, у платных редакторов есть также пробные версии.
 
-<p>Для начала, мы предлагаем вам попробовать несколько редакторов, чтобы понять, какой из них подходит лучше вам. Если вы пишите лишь простые {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, используйте простой редактор.</p>
+Для начала, мы предлагаем вам попробовать несколько редакторов, чтобы понять, какой из них подходит лучше вам. Если вы пишите лишь простые {{Glossary("HTML")}}, {{Glossary("CSS")}}, and {{Glossary("Javascript")}}, используйте простой редактор.
 
-<p>Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешёвый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.</p>
+Цена не влияет на качество или полезность текстового редактора. Вам необходимо попробовать и решить какой из них отвечает вашим потребностям. К примеру, Sublime Text дешёвый, но поставляется с множеством бесплатных плагинов которые могут здорово расширить его функциональность.
 
-<h3 id="Редакторы_изображений">Редакторы изображений</h3>
+### Редакторы изображений
 
-<p>Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и вскоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.</p>
+Ваша система, вероятно, включает в себя простой редактор изображений или просмотрщик: Paint на Windows, Eye of Gnome на Ubuntu, Preview на Mac. Эти программы относительно ограничены, и вскоре вы захотите более развитый редактор, чтобы иметь возможность добавлять слои, накладывать эффекты и группировать объекты.
 
-<p>Редакторы могут быть бесплатными (<a href="http://www.gimp.org/">GIMP</a>, <a href="https://www.getpaint.net/">Paint.NET</a>), относительно недорогими (<a href="http://www.paintshoppro.com/">PaintShop Pro</a>, меньше чем $100), или иметь стоимость в пару сотен долларов (<a href="https://www.adobe.com/products/photoshop.html">Adobe Photoshop</a>).</p>
+Редакторы могут быть бесплатными ([GIMP](http://www.gimp.org/), [Paint.NET](https://www.getpaint.net/)), относительно недорогими ([PaintShop Pro](http://www.paintshoppro.com/), меньше чем $100), или иметь стоимость в пару сотен долларов ([Adobe Photoshop](https://www.adobe.com/products/photoshop.html)).
 
-<p>Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своём собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как <a href="https://pixabay.com/">Pixabay</a>, предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.</p>
+Вы можете использовать любой из них, так как они имеют похожую функциональность, хотя некоторые из них настолько всеобъемлющие, что вы никогда не сможете использовать весь их функционал. Если в какой то момент вам необходимо обменяться проектами с другими дизайнерами, то вам следует выяснить, какие инструменты они используют. Редакторы могут экспортировать законченные проекты в стандартные форматы, но каждый редактор сохраняет текущие проекты в своём собственном, специализированном формате. Большинство изображений в интернете защищены авторским правом, так что лучше проверить лицензию файла, перед его использованием. Такие сайты, как [Pixabay](https://pixabay.com/), предоставляют изображения под лицензией Creative Commons Zero, так что вы можете использовать, редактировать, и даже публиковать их после изменения, ради коммерческой выгоды.
 
-<h3 id="Медиа_редакторы">Медиа редакторы</h3>
+### Медиа редакторы
 
-<p>Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность).</p>
+Если вы хотите встроить видео или аудио в ваш веб-сайт, то вы можете встроить онлайн сервисы (например, YouTube, Vimeo, или Dailymotion), или встроить ваши собственные видео (см. ниже расходы на пропускную способность).
 
-<p>Для аудиофайлов, вы можете найти бесплатное программное обеспечение (<a href="http://audacity.sourceforge.net/?lang=en">Audacity</a>, <a href="http://www.wavosaur.com/">Wavosaur</a>), либо заплатить пару сотен долларов (<a href="http://www.sonycreativesoftware.com/soundforge">Sony Sound Forge</a>, <a href="http://www.adobe.com/products/audition.html">Adobe Audition</a>). Подобным образом, видеоредакторы могут быть бесплатными (<a href="http://www.pitivi.org/">PiTiVi</a>, <a href="http://www.openshot.org/">OpenShot</a> для Linux, <a href="https://www.apple.com/mac/imovie/">iMovie</a> для Mac), менее чем $100 (<a href="https://www.adobe.com/us/products/premiere-elements.html">Adobe Premiere Elements</a>), либо иметь стоимость в пару сотен долларов (<a href="https://www.adobe.com/products/premiere.html">Adobe Premiere Pro</a>, <a href="http://www.avid.com/US/products/family/Media-Composer">Avid Media Composer</a>, <a href="https://www.apple.com/final-cut-pro/">Final Cut Pro</a>). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды.</p>
+Для аудиофайлов, вы можете найти бесплатное программное обеспечение ([Audacity](http://audacity.sourceforge.net/?lang=en), [Wavosaur](http://www.wavosaur.com/)), либо заплатить пару сотен долларов ([Sony Sound Forge](http://www.sonycreativesoftware.com/soundforge), [Adobe Audition](http://www.adobe.com/products/audition.html)). Подобным образом, видеоредакторы могут быть бесплатными ([PiTiVi](http://www.pitivi.org/), [OpenShot](http://www.openshot.org/) для Linux, [iMovie](https://www.apple.com/mac/imovie/) для Mac), менее чем $100 ([Adobe Premiere Elements](https://www.adobe.com/us/products/premiere-elements.html)), либо иметь стоимость в пару сотен долларов ([Adobe Premiere Pro](https://www.adobe.com/products/premiere.html), [Avid Media Composer](http://www.avid.com/US/products/family/Media-Composer), [Final Cut Pro](https://www.apple.com/final-cut-pro/)). Программное обеспечение, поставляемое с вашей цифровой камерой может, также, удовлетворить все ваши нужды.
 
-<h3 id="Инструменты_публикации">Инструменты публикации</h3>
+### Инструменты публикации
 
-<p>Вам также потребуется возможность выгрузки файлов: с вашего жёсткого диска на удалённый веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)<a href="/en-US/docs/Glossary/FTP">FTP client</a>, <a href="https://en.wikipedia.org/wiki/Rsync">RSync</a>, или <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Git/GitHub</a>.</p>
+Вам также потребуется возможность выгрузки файлов: с вашего жёсткого диска на удалённый веб-сервер. Чтобы осуществить это, вам потребуется утилита для публикации, такая как (S)[FTP client](/ru/docs/Glossary/FTP), [RSync](https://en.wikipedia.org/wiki/Rsync), или [Git/GitHub](https://help.github.com/articles/using-a-custom-domain-with-github-pages/).
 
-<p>Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространённый файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удалённые (S)FTP клиенты, для одновременного отображения локальных и удалённых каталогов и хранения паролей сервера.</p>
+Каждая операционная система включает (S)FTP клиент, как часть своего файлового менеджера. Проводник Windows, Nautilus (распространённый файловый менеджер Linux), и Mac Finder - все имеют такую функциональность. Однако, люди часто выбирают удалённые (S)FTP клиенты, для одновременного отображения локальных и удалённых каталогов и хранения паролей сервера.
 
-<p>Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: <a href="https://filezilla-project.org/">FileZilla</a>, <a href="http://winscp.net/">WinSCP</a> для Windows, <a href="https://cyberduck.io/">Cyberduck</a> для Mac/Windows, <a href="https://en.wikipedia.org/wiki/List_of_FTP_server_software">и другие</a>.</p>
+Если вы хотите установить (S)FTP клиент, то существует несколько, заслуживающих доверия, бесплатных вариантов: [FileZilla](https://filezilla-project.org/), [WinSCP](http://winscp.net/) для Windows, [Cyberduck](https://cyberduck.io/) для Mac/Windows, [и другие](https://en.wikipedia.org/wiki/List_of_FTP_server_software).
 
-<p>Из-за того, что FTP по своей природе небезопасен, вам следует использовать SFTP — безопасную, зашифрованную версию FTP, которую большинство хостинговых сайтов будут предлагать вам по умолчанию  — или другое безопасное решение, такое как Rsync, работающее через SSH.</p>
+Из-за того, что FTP по своей природе небезопасен, вам следует использовать SFTP — безопасную, зашифрованную версию FTP, которую большинство хостинговых сайтов будут предлагать вам по умолчанию — или другое безопасное решение, такое как Rsync, работающее через SSH.
 
-<h2 id="Браузеры">Браузеры</h2>
+## Браузеры
 
-<p>У вас уже есть браузер либо вы можете  загрузить его бесплатно. Если необходимо, загрузите Firefox <a href="https://www.mozilla.org/en-US/firefox/all/">отсюда</a> или Google Chrome <a href="https://www.google.com/chrome/browser/">отсюда</a>.</p>
+У вас уже есть браузер либо вы можете загрузить его бесплатно. Если необходимо, загрузите Firefox [отсюда](https://www.mozilla.org/en-US/firefox/all/) или Google Chrome [отсюда](https://www.google.com/chrome/browser/).
 
-<h2 id="Веб-доступ">Веб-доступ</h2>
+## Веб-доступ
 
-<h3 id="Компьютер_модем">Компьютер / модем</h3>
+### Компьютер / модем
 
-<p>Вам необходим компьютер. Расходы могут сильно варьироваться, в зависимости от вашего бюджета и места проживания. Чтобы опубликовать простой сайт, вам нужен компьютер, способный хотя бы запустить редактор и веб-браузер, таким образом порог вхождения довольно низок.</p>
+Вам необходим компьютер. Расходы могут сильно варьироваться, в зависимости от вашего бюджета и места проживания. Чтобы опубликовать простой сайт, вам нужен компьютер, способный хотя бы запустить редактор и веб-браузер, таким образом порог вхождения довольно низок.
 
-<p>Конечно же, вам необходим более мощный компьютер, если вы хотите проектировать сложные конструкции, править фотографии или создавать аудио и видеофайлы.</p>
+Конечно же, вам необходим более мощный компьютер, если вы хотите проектировать сложные конструкции, править фотографии или создавать аудио и видеофайлы.
 
-<p>Вам потребуется загружать контент на удалённый сервер (<em>см. ниже Хостинг</em>), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.</p>
+Вам потребуется загружать контент на удалённый сервер (_см. ниже Хостинг_), а значит вам потребуется модем. Ваш {{Glossary("ISP", "провайдер")}} может предоставлять доступ в интернет вам за пару долларов в месяц, однако, это также зависит от места вашего проживания.
 
-<h3 id="Доступ_по_провайдеру">Доступ по провайдеру</h3>
+### Доступ по провайдеру
 
-<p>Убедитесь что у вас достаточная {{Glossary("Bandwidth", "скорость передачи данных")}}:</p>
+Убедитесь что у вас достаточная {{Glossary("Bandwidth", "скорость передачи данных")}}:
 
-<ul>
- <li>Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдётся вам в пару долларов, включая аренду модема.</li>
- <li>С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжёлым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.</li>
-</ul>
+- Доступ с низкой пропускной способностью может быть приемлем для простого веб-сайта: изображения, тексты, немного CSS и JavaScript. Это, вероятно, обойдётся вам в пару долларов, включая аренду модема.
+- С другой стороны, вам потребуется соединения с высокой пропускной способностью, такие как DSL, оптоволокно, если вы хотите более сложный веб-сайт с сотнями файлов, или если вы хотите предоставить доступ к тяжёлым видео/аудио файлам напрямую с вашего веб-сервера. Это может стоить столько же, сколько при соединении с низкой пропускной способностью, а может вырасти до пары сотен долларов в месяц, за более профессиональные потребности.
 
-<h2 id="Хостинг">Хостинг</h2>
+## Хостинг
 
-<h3 id="Понимание_пропускной_способности">Понимание пропускной способности</h3>
+### Понимание пропускной способности
 
-<p>Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определённый промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удалённых сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надёжный, платный персональный хостинг может стоить около 10-15 долларов в месяц.</p>
+Хостинг-провайдеры взимают плату в зависимости от того, сколько {{Glossary("Bandwidth", "bandwidth")}} ваш веб-сайт потребил. Это зависит от того как много людей и бот-сканеров получали доступ к вашему контенту за определённый промежуток времени, и, как много серверного пространства этот контент занимает. Вот почему многие люди, обычно, размещают их видео на удалённых сервисах, таких как Youtube, Dailymotion, и Vimeo. Например, ваш провайдер может иметь план, который позволяет выдерживать до нескольких тысяч посетителей в день. Однако, будьте осторожны, так как это условие меняется от одного провайдера к другому. Возьмите за правило, что надёжный, платный персональный хостинг может стоить около 10-15 долларов в месяц.
 
-<div class="note">
-<p>Заметьте, что не существует такого понятия, как "неограниченная пропускная способность". Если вы использовали огромное количество трафика, будьте готовы выплатить огромную сумму денег.</p>
-</div>
+> **Примечание:** Заметьте, что не существует такого понятия, как "неограниченная пропускная способность". Если вы использовали огромное количество трафика, будьте готовы выплатить огромную сумму денег.
 
-<h3 id="Доменные_имена">Доменные имена</h3>
+### Доменные имена
 
-<p>Ваше доменное имя должно быть приобретено через провайдера доменных имён (регистратор). Ваш хостинг-провайдер может также быть регистратором (<a href="https://www.1and1.com/">1&amp;1</a>, <a href="https://www.gandi.net/?lang=en">Gandi</a>, например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:</p>
+Ваше доменное имя должно быть приобретено через провайдера доменных имён (регистратор). Ваш хостинг-провайдер может также быть регистратором ([1&1](https://www.1and1.com/), [Gandi](https://www.gandi.net/?lang=en), например, являются в одно и тоже время регистраторами и хостинг-провайдерами). Доменное имя обычно имеет стоимость в $5-15 за год. Эта цена варьируется в зависимости от:
 
-<ul>
- <li>Местных обязательств: В некоторых странах домены верхнего уровня стоят дороже, так как разные страны устанавливают различные цены.</li>
- <li>Сервисов, ассоциированных с доменным именем: некоторые регистраторы предоставляют защиту от спама, скрывая ваш почтовый адрес и адрес электронной почты за их собственными адресами: почтовый адрес может быть под покровительством регистратора, и ваш электронный адрес может быть скрыт под псевдонимом регистратора.</li>
-</ul>
+- Местных обязательств: В некоторых странах домены верхнего уровня стоят дороже, так как разные страны устанавливают различные цены.
+- Сервисов, ассоциированных с доменным именем: некоторые регистраторы предоставляют защиту от спама, скрывая ваш почтовый адрес и адрес электронной почты за их собственными адресами: почтовый адрес может быть под покровительством регистратора, и ваш электронный адрес может быть скрыт под псевдонимом регистратора.
 
-<h3 id="Самодельный_хостинг_vs._хостинг_“из_коробки”">Самодельный хостинг vs. хостинг “из коробки”</h3>
+### Самодельный хостинг vs. хостинг “из коробки”
 
-<p>Когда вы хотите опубликовать веб-сайт, вы можете сделать все самостоятельно: настроить базу данных (если требуется), Систему управления наполнением, или {{Glossary("CMS")}} (такую как <a href="http://wordpress.org/">Wordpress</a>, <a href="http://dotclear.org/">Dotclear</a>, <a href="http://www.spip.net/en_rubrique25.html">spip</a>, и тд.), загружать заранее подготовленные вами шаблоны.</p>
+Когда вы хотите опубликовать веб-сайт, вы можете сделать все самостоятельно: настроить базу данных (если требуется), Систему управления наполнением, или {{Glossary("CMS")}} (такую как [Wordpress](http://wordpress.org/), [Dotclear](http://dotclear.org/), [spip](http://www.spip.net/en_rubrique25.html), и тд.), загружать заранее подготовленные вами шаблоны.
 
-<p>Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удалённому хостинг-сервису с предустановленным CMSs (такие как, <a href="http://wordpress.com/">Wordpress</a>, <a href="https://www.tumblr.com/">Tumblr</a>, <a href="https://www.blogger.com/">Blogger</a>). В последнем случае, вам не придётся платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.</p>
+Вы можете использовать среду хостинг-провайдера, примерно за 10-15 долларов в месяц, или подписаться напрямую к удалённому хостинг-сервису с предустановленным CMSs (такие как, [Wordpress](http://wordpress.com/), [Tumblr](https://www.tumblr.com/), [Blogger](https://www.blogger.com/)). В последнем случае, вам не придётся платить ни за что, но вы будете иметь меньше контроля над шаблонами и другими элементами.
 
-<h3 id="Бесплатный_хостинг_vs._платный">Бесплатный хостинг vs. платный</h3>
+### Бесплатный хостинг vs. платный
 
-<p>Вы могли бы задать вопрос, почему мне следует платить за хостинг, когда существует так много бесплатных сервисов?</p>
+Вы могли бы задать вопрос, почему мне следует платить за хостинг, когда существует так много бесплатных сервисов?
 
-<ul>
- <li>У вас есть больше свободы, когда вы платите. Ваш веб-сайт только в ваших руках, и вы можете легко перейти от одного хостинг-провайдера к другому.</li>
- <li>Бесплатные хостинги могут добавлять рекламные объявления к вашему контенту, в обход вашего контроля.</li>
-</ul>
+- У вас есть больше свободы, когда вы платите. Ваш веб-сайт только в ваших руках, и вы можете легко перейти от одного хостинг-провайдера к другому.
+- Бесплатные хостинги могут добавлять рекламные объявления к вашему контенту, в обход вашего контроля.
 
-<p>Лучше обратиться к платному хостингу, чем полагаться на бесплатный, так как большинство платных сайтов гарантируют бесперебойную работу и позволяют с лёгкостью управлять файловой структурой. Большинство хостинг-провайдеров предоставят вам огромную скидку для старта.</p>
+Лучше обратиться к платному хостингу, чем полагаться на бесплатный, так как большинство платных сайтов гарантируют бесперебойную работу и позволяют с лёгкостью управлять файловой структурой. Большинство хостинг-провайдеров предоставят вам огромную скидку для старта.
 
-<p>Некоторые люди выбирают смешанный подход. Например, их главный блог на платном хосте, с полным доменном именем, а неожиданный менее важный контент, на бесплатном хосте.</p>
+Некоторые люди выбирают смешанный подход. Например, их главный блог на платном хосте, с полным доменном именем, а неожиданный менее важный контент, на бесплатном хосте.
 
-<h2 id="Профессиональные_веб-сайты_агентств_и_хостингов">Профессиональные веб-сайты агентств и хостингов</h2>
+## Профессиональные веб-сайты агентств и хостингов
 
-<p>Если вы хотите профессиональный веб-сайт, вы можете обратиться в агентство по веб-разработке, чтобы оно сделало его для вас.<br>
- <br>
- Здесь перечислены расходы, зависящие сразу от нескольких факторов:</p>
+Если вы хотите профессиональный веб-сайт, вы можете обратиться в агентство по веб-разработке, чтобы оно сделало его для вас.
 
-<ul>
- <li>Это простой веб-сайт с парой страничек текста? Или более сложный, с около тысячей страниц?</li>
- <li>Будете ли вы его обновлять регулярно? или это будет статический веб-сайт?</li>
- <li>Должен ли веб-сайт подсоединяться к IT структуре вашей компании, чтобы собирать контент (например, внутренние данные)?</li>
- <li>Хотите ли вы какую-нибудь уникальную функцию, которая сейчас в моде?</li>
- <li>Хотите ли вы, чтобы агентство решало сложные проблемы пользователей {{Glossary("UX")}}?</li>
-</ul>
+Здесь перечислены расходы, зависящие сразу от нескольких факторов:
 
-<p>...и для хостинга:</p>
+- Это простой веб-сайт с парой страничек текста? Или более сложный, с около тысячей страниц?
+- Будете ли вы его обновлять регулярно? или это будет статический веб-сайт?
+- Должен ли веб-сайт подсоединяться к IT структуре вашей компании, чтобы собирать контент (например, внутренние данные)?
+- Хотите ли вы какую-нибудь уникальную функцию, которая сейчас в моде?
+- Хотите ли вы, чтобы агентство решало сложные проблемы пользователей {{Glossary("UX")}}?
 
-<ul>
- <li>Хотите ли вы иметь резервный сервер, если вдруг ваш упадёт?</li>
- <li>Надёжность 95%, или вам требуется круглосуточный сервис обслуживания?</li>
- <li>Вам нужны высокопроизводительные, сверхчувствительные удалённые серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.</li>
-</ul>
+...и для хостинга:
 
-<p>В зависимости от ответа на эти вопросы, ваш сайт может обойтись вам в тысячи или даже сотни тысяч долларов.</p>
+- Хотите ли вы иметь резервный сервер, если вдруг ваш упадёт?
+- Надёжность 95%, или вам требуется круглосуточный сервис обслуживания?
+- Вам нужны высокопроизводительные, сверхчувствительные удалённые серверы или вам будет достаточно более медленной, машиной, предназначенной для совместного использования.
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+В зависимости от ответа на эти вопросы, ваш сайт может обойтись вам в тысячи или даже сотни тысяч долларов.
 
-<p>На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и <a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">настройки вашего рабочего пространства.</a></p>
+## Следующие шаги
 
-<ul>
- <li>Прочитайте о том, <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">как выбрать и установить текстовый редактор</a>.</li>
- <li>Если вы больше сфокусированы на проектировании, взгляните на <a href="/en-US/Learn/Anatomy_of_a_web_page">анатомию веб-страницы</a>.</li>
-</ul>
+На данный момент у вас есть понимание того, во сколько вам может обойтись ваш сайт, так что настало время проектирования веб-сайта и [настройки вашего рабочего пространства.](/ru/docs/Learn/Set_up_a_basic_working_environment)
+
+- Прочитайте о том, [как выбрать и установить текстовый редактор](/ru/docs/Learn/Choose,_Install_and_set_up_a_text_editor).
+- Если вы больше сфокусированы на проектировании, взгляните на [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page).
diff --git a/files/ru/learn/common_questions/index.md b/files/ru/learn/common_questions/index.md
index b9221d95e22e93..59b39f818ece28 100644
--- a/files/ru/learn/common_questions/index.md
+++ b/files/ru/learn/common_questions/index.md
@@ -7,125 +7,71 @@ tags:
   - распространённые вопросы
 translation_of: Learn/Common_questions
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Данный раздел создан для обеспечения ответами на распространённые вопросы, которые могут возникнуть и которые не обязательно являются основным материалом при изучении веб-технологий (например, обучающих статей по <a href="/ru/docs/Learn/HTML">HTML</a> или <a href="/ru/docs/Learn/CSS">CSS</a>). Ниже приведённые статьи созданы для самостоятельной работы над их содержимым.</p>
+Данный раздел создан для обеспечения ответами на распространённые вопросы, которые могут возникнуть и которые не обязательно являются основным материалом при изучении веб-технологий (например, обучающих статей по [HTML](/ru/docs/Learn/HTML) или [CSS](/ru/docs/Learn/CSS)). Ниже приведённые статьи созданы для самостоятельной работы над их содержимым.
 
-<h2 id="Как_работает_Всемирная_паутина">Как работает Всемирная паутина?</h2>
+## Как работает Всемирная паутина?
 
-<p>Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает.</p>
+Данный раздел покрывает "механику" Всемирной паутины — вопросы, относящиеся к общим знаниям о экосистеме Всемирной паутины и тому, как эта экосистема работает.
 
-<dl>
- <dt>
- <h3 id="Как_работает_Интернет"><a href="/ru/docs/Learn/Common_questions/How_does_the_Internet_work">Как работает Интернет?</a></h3>
- </dt>
- <dd><strong>Интернет</strong> - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне.</dd>
- <dt>
- <h3 id="В_чём_разница_между_веб-страницей_веб-сайтом_веб-сервером_и_поисковым_движком"><a href="/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?</a></h3>
- </dt>
- <dd>В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают!</dd>
- <dt>
- <h3 id="Что_такое_URL"><a href="/ru/docs/Learn/Common_questions/What_is_a_URL">Что такое URL?</a></h3>
- </dt>
- <dd>Наряду с понятиями <a href="/ru/docs/Glossary/Hypertext">гипертекста</a> и <a href="/ru/docs/Glossary/HTTP">протокола HTTP</a>, понятие <a href="/ru/docs/Glossary/URL">URL</a> является одной из основных концепций Всемирной паутины. Это механизм, используемый <a href="/ru/docs/Glossary/Browser">браузерами</a> для получения любого опубликованного во Всемирной сети ресурса.</dd>
- <dt>
- <h3 id="Что_такое_доменное_имя"><a href="/ru/docs/Learn/Common_questions/What_is_a_domain_name">Что такое доменное имя?</a></h3>
- </dt>
- <dd>Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет.</dd>
- <dt>
- <h3 id="Что_такое_веб-сервер"><a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">Что такое веб-сервер?</a></h3>
- </dt>
- <dd>Термин «<a href="/ru/docs/Glossary/Server">веб-сервер</a>» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО),  работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны.</dd>
- <dt>
- <h3 id="Что_такое_гиперссылки"><a href="/ru/docs/Learn/Common_questions/What_are_hyperlinks">Что такое гиперссылки?</a></h3>
- </dt>
- <dd>В этой статье мы рассмотрим, что такое <a href="/ru/docs/Glossary/Hyperlink">гиперссылки</a> и почему они важны.</dd>
-</dl>
+- ### [Как работает Интернет?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work)
+  - : **Интернет** - основа Всемирной паутины; техническая инфраструктура, благодаря которой возможно существование Всемирной паутины. Выражаясь проще, Интернет - это большая сеть компьютеров, которые "общаются" друг с другом. В данной статье обсуждается, как он (Интернет) работает на базовом уровне.
+- ### [В чём разница между веб-страницей, веб-сайтом, веб-сервером и поисковым движком?](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines)
+  - : В этой статье мы рассмотрим различные связанные с вебом концепции: веб-страницы, веб-сайты, веб-сервера и поисковые движки. Новички в вебе часто путают или неправильно используют данные термины. Давайте узнаем, что они означают!
+- ### [Что такое URL?](/ru/docs/Learn/Common_questions/What_is_a_URL)
+  - : Наряду с понятиями [гипертекста](/ru/docs/Glossary/Hypertext) и [протокола HTTP](/ru/docs/Glossary/HTTP), понятие [URL](/ru/docs/Glossary/URL) является одной из основных концепций Всемирной паутины. Это механизм, используемый [браузерами](/ru/docs/Glossary/Browser) для получения любого опубликованного во Всемирной сети ресурса.
+- ### [Что такое доменное имя?](/ru/docs/Learn/Common_questions/What_is_a_domain_name)
+  - : Доменные имена являются ключевой частью инфраструктуры сети Интернет. С их помощью обеспечивается удобочитаемый адрес для любого веб-сервера, доступного в сети Интернет.
+- ### [Что такое веб-сервер?](/ru/docs/Learn/Common_questions/What_is_a_web_server)
+  - : Термин «[веб-сервер](/ru/docs/Glossary/Server)» может относиться к оборудованию или программному обеспечению (ПО), которое предоставляет клиентам доступ к веб-сайтам через сеть Интернет, или к ним обоим (оборудованию и ПО), работающим вместе. В этой статье мы рассмотрим, как работают веб-серверы и то, почему они важны.
+- ### [Что такое гиперссылки?](/ru/docs/Learn/Common_questions/What_are_hyperlinks)
+  - : В этой статье мы рассмотрим, что такое [гиперссылки](/ru/docs/Glossary/Hyperlink) и почему они важны.
 
-<h2 id="Инструменты_и_настройка">Инструменты и настройка</h2>
+## Инструменты и настройка
 
-<p>Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов.</p>
+Вопросы, связанные с инструментами / программным обеспечением, которое вы можете использовать для создания веб-сайтов.
 
-<dl>
- <dt>
- <h3 id="Сколько_стоит_сделать_что-то_в_Интернете"><a href="/ru/docs/Learn/Common_questions/How_much_does_it_cost">Сколько стоит сделать что-то в Интернете?</a></h3>
- </dt>
- <dd>Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите).</dd>
- <dt>
- <h3 id="Какое_ПО_мне_необходимо_для_создания_веб-сайта"><a href="/ru/docs/Learn/Common_questions/What_software_do_I_need">Какое ПО мне необходимо для создания веб-сайта?</a></h3>
- </dt>
- <dd>В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта.</dd>
- <dt>
- <h3 id="Какие_текстовые_редакторы_доступны"><a href="/ru/docs/Learn/Common_questions/Available_text_editors">Какие текстовые редакторы доступны?</a></h3>
- </dt>
- <dd>В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки.</dd>
- <dt>
- <h3 id="Что_такое_Инструменты_разработчика_браузера"><a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Что такое "Инструменты разработчика" браузера?</a></h3>
- </dt>
- <dd>Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера.</dd>
- <dt>
- <h3 id="Как_убедиться_в_том_что_веб-сайт_работает_правильно"><a href="/ru/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly">Как убедиться в том, что веб-сайт работает правильно?</a></h3>
- </dt>
- <dd>Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок.</dd>
- <dt>
- <h3 id="Как_настроить_локальный_сервер_тестирования"><a href="/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">Как настроить локальный сервер тестирования?</a></h3>
- </dt>
- <dd>
- <div>
- <p>В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования.</p>
- </div>
- </dd>
- <dt>
- <h3 id="Как_загрузить_файлы_на_веб-сервер"><a href="/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как загрузить файлы на веб-сервер?</a></h3>
- </dt>
- <dd>В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.</dd>
- <dt>
- <h3 id="Как_использовать_GitHub_Pages"><a href="/ru/docs/Learn/Common_questions/Using_GitHub_Pages">Как использовать GitHub Pages?</a></h3>
- </dt>
- <dd>В этой статье представлено базовое руководство по публикации контента с использованием функции <strong>gh-pages</strong> сайта GitHub.</dd>
- <dt>
- <h3 id="Как_разместить_сайт_в_Интернете_при_помощи_платформы_Google_App_Engine"><a href="/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">Как разместить сайт в Интернете при помощи платформы Google App Engine?</a></h3>
- </dt>
- <dd>Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine.</dd>
- <dt>
- <h3 id="Какие_существуют_инструменты_для_отладки_сайта_и_увеличения_его_производительности"><a href="/ru/docs/Tools/Performance">Какие существуют инструменты для отладки сайта и увеличения его производительности?</a></h3>
- </dt>
- <dd>В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов <a href="/ru/docs/Glossary/JavaScript">JavaScript</a>, количества отображаемых узлов <a href="/ru/docs/Glossary/DOM">DOM</a> и т. д.</dd>
-</dl>
+- ### [Сколько стоит сделать что-то в Интернете?](/ru/docs/Learn/Common_questions/How_much_does_it_cost)
+  - : Когда вы запускаете веб-сайт, вы можете ничего не потратить, или ваши расходы могут быть достаточно высокими. В этой статье мы обсудим, сколько всё стоит и что вы получаете за то, за что вы платите (или не платите).
+- ### [Какое ПО мне необходимо для создания веб-сайта?](/ru/docs/Learn/Common_questions/What_software_do_I_need)
+  - : В этой статье мы объясним, какие программные компоненты необходимы вам при редактировании, выгрузке или просмотре веб-сайта.
+- ### [Какие текстовые редакторы доступны?](/ru/docs/Learn/Common_questions/Available_text_editors)
+  - : В этой статье мы выделили некоторые моменты, которые следует учитывать при выборе и установке текстового редактора для веб-разработки.
+- ### [Что такое "Инструменты разработчика" браузера?](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools)
+  - : Каждый браузер имеет набор инструментов разработчика для отладки HTML, CSS и другого веб-кода. В этой статье объясняется, как использовать основные функции из инструментов разработчика вашего браузера.
+- ### [Как убедиться в том, что веб-сайт работает правильно?](/ru/docs/Learn/Common_questions/Checking_that_your_web_site_is_working_properly)
+  - : Итак, вы опубликовали свой сайт в Интернете - очень хорошо! Но уверены ли вы в том, что он работает правильно? В этой статье приведены некоторые основные шаги по устранению неполадок.
+- ### [Как настроить локальный сервер тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server)
+  - : В этой статье объясняется, как настроить простой локальный сервер тестирования на вашем компьютере, и основы его использования.
+- ### [Как загрузить файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server)
+  - : В этой статье показано, как публиковать свой сайт в Интернете с помощью инструментов FTP - одним из самых распространённых способов сделать сайт общедоступным, чтобы другие пользователи могли получить доступ к нему со своих компьютеров.
+- ### [Как использовать GitHub Pages?](/ru/docs/Learn/Common_questions/Using_GitHub_Pages)
+  - : В этой статье представлено базовое руководство по публикации контента с использованием функции **gh-pages** сайта GitHub.
+- ### [Как разместить сайт в Интернете при помощи платформы Google App Engine?](/en-US/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine)
+  - : Ищете место для размещения вашего сайта? Здесь представлено пошаговое руководство по размещению вашего сайта с помощью платформы Google App Engine.
+- ### [Какие существуют инструменты для отладки сайта и увеличения его производительности?](/ru/docs/Tools/Performance)
+  - : В этом группе статей рассказывается, как использовать инструменты разработчика в браузере Firefox для отладки и повышения производительности вашего веб-сайта, а именно инструменты для проверки использования памяти, просмотра дерева вызовов [JavaScript](/ru/docs/Glossary/JavaScript), количества отображаемых узлов [DOM](/ru/docs/Glossary/DOM) и т. д.
 
-<h2 id="Дизайн_и_удобство_использования">Дизайн и удобство использования</h2>
+## Дизайн и удобство использования
 
-<p>В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д.</p>
+В этом разделе перечислены вопросы, связанные с эстетикой, структурой страницы, техниками для достижения удобства пользованием сайта и т. д.
 
-<dl>
- <dt>
- <h3 id="С_чего_мне_следует_начать_создание_дизайна_веб-сайта"><a href="/ru/docs/Learn/Common_questions/Thinking_before_coding">С чего мне следует начать создание дизайна веб-сайта?</a></h3>
- </dt>
- <dd>В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью.</dd>
- <dt>
- <h3 id="Какова_структура_наиболее_используемых_макетов_сайтов"><a href="/ru/docs/Learn/Common_questions/Common_web_layouts">Какова структура наиболее используемых макетов сайтов?</a></h3>
- </dt>
- <dd>При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.</dd>
- <dt>
- <h3 id="Что_такое_удобство_использования"><a href="/ru/docs/Learn/Common_questions/What_is_accessibility">Что такое удобство использования?</a></h3>
- </dt>
- <dd>В этой статье представлены основные концепции достижения удобства пользования веб-страницами.</dd>
- <dt>
- <h3 id="Как_разрабатывать_сайты_для_всех_категорий_пользователей"><a href="/ru/docs/Learn/Common_questions/Design_for_all_types_of_users">Как разрабатывать сайты для всех категорий пользователей?</a></h3>
- </dt>
- <dd>В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя.</dd>
- <dt>
- <h3 id="Какие_средства_HTML_используются_для_обеспечения_удобства_использования"><a href="/ru/docs/Learn/Common_questions/HTML_features_for_accessibility">Какие средства HTML используются для обеспечения удобства использования?</a></h3>
- </dt>
- <dd>В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями.</dd>
-</dl>
+- ### [С чего мне следует начать создание дизайна веб-сайта?](/ru/docs/Learn/Common_questions/Thinking_before_coding)
+  - : В этой статье рассматривается крайне важный первый шаг каждого проекта: определение того, чего вы хотите достичь с его помощью.
+- ### [Какова структура наиболее используемых макетов сайтов?](/ru/docs/Learn/Common_questions/Common_web_layouts)
+  - : При разработке страниц вашего сайта хорошо иметь представление о наиболее распространённых макетах. В этой статье приведены некоторые типичные макеты веб-сайтов, а также части, которые входят в каждый макет.
+- ### [Что такое удобство использования?](/ru/docs/Learn/Common_questions/What_is_accessibility)
+  - : В этой статье представлены основные концепции достижения удобства пользования веб-страницами.
+- ### [Как разрабатывать сайты для всех категорий пользователей?](/ru/docs/Learn/Common_questions/Design_for_all_types_of_users)
+  - : В этой статье приводятся основные методы, которые помогут вам создавать веб-сайты для любого пользователя.
+- ### [Какие средства HTML используются для обеспечения удобства использования?](/ru/docs/Learn/Common_questions/HTML_features_for_accessibility)
+  - : В этой статье описываются специфические особенности HTML, которые могут использоваться для того, чтобы сделать веб-страницу более доступной для людей с различными нарушениями.
 
-<h2 id="Вопросы_по_HTML_CSS_и_JavaScript">Вопросы по HTML, CSS и JavaScript</h2>
+## Вопросы по HTML, CSS и JavaScript
 
-<p>Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:</p>
+Чтобы узнать о распространённых решениях большинства проблем в HTML / CSS / JavaScript, используйте следующие статьи:
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения распространённых проблем</a></li>
- <li><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения распространённых проблем </a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Howto">Использование JavaScript для решения распространённых проблем</a></li>
-</ul>
+- [Использование HTML для решения распространённых проблем](/ru/docs/Learn/HTML/Howto)
+- [Использование CSS для решения распространённых проблем](/ru/docs/Learn/CSS/Howto)
+- [Использование JavaScript для решения распространённых проблем](/ru/docs/Learn/JavaScript/Howto)
diff --git a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md
index 9509c3ab080818..9e1b71c6d5aa84 100644
--- a/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md
+++ b/files/ru/learn/common_questions/pages_sites_servers_and_search_engines/index.md
@@ -11,109 +11,76 @@ tags:
 translation_of: Learn/Common_questions/Pages_sites_servers_and_search_engines
 original_slug: Learn/Pages_sites_servers_and_search_engines
 ---
-<div class="summary">
-<p>В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!</p>
-</div>
+В этой статье мы расскажем о различных понятиях связанных с Веб: о веб-страницах, веб-сайтах, веб-серверах и о поисковых системах. Эти термины часто ставят в тупик как начинающих работу с Веб, так и людей, редко пользующихся сетью. Давайте же разберёмся, что именно эти понятия означают!
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Вы должны знать,  <a href="/en-US/Learn/How_the_Internet_works">как работает Интернет</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Вы должны знать, [как работает Интернет](/en-US/Learn/How_the_Internet_works).            |
+| ------------------- | ----------------------------------------------------------------------------------------- |
+| Цель:               | Изучить различия между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами. |
 
-<h2 id="В_двух_словах">В двух словах</h2>
+## В двух словах
 
-<p>Как и любая другая область знаний, Веб полон специфичных терминов. Но не волнуйтесь, мы не хотим перегружать вас в самом начале вашего пути (а если любопытство всё же берёт верх, то у нас есть <a href="/ru/docs/MDN/Doc_status/Glossary">глоссарий</a>). Однако, для начала несколько базовых терминов всё же придётся усвоить, так как вы будете встречать их в наших статьях довольно часто. Иногда эти термины легко перепутать, так как они связаны между собой, но имеют разные функции. Вы, наверное, не раз замечали их неправильное употребление в новостях или где-либо ещё.</p>
+Как и любая другая область знаний, Веб полон специфичных терминов. Но не волнуйтесь, мы не хотим перегружать вас в самом начале вашего пути (а если любопытство всё же берёт верх, то у нас есть [глоссарий](/ru/docs/MDN/Doc_status/Glossary)). Однако, для начала несколько базовых терминов всё же придётся усвоить, так как вы будете встречать их в наших статьях довольно часто. Иногда эти термины легко перепутать, так как они связаны между собой, но имеют разные функции. Вы, наверное, не раз замечали их неправильное употребление в новостях или где-либо ещё.
 
-<p>Мы разберём эти понятия и технологии чуть позже, а сейчас краткие определения ниже станут для вас очень хорошим началом:</p>
+Мы разберём эти понятия и технологии чуть позже, а сейчас краткие определения ниже станут для вас очень хорошим началом:
 
-<dl>
- <dt>Веб-страница</dt>
- <dd>Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие "веб-страница" для краткости будем называть просто "страница".</dd>
- <dt>Веб-сайт</dt>
- <dd>Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: "веб-сайт" или просто "сайт".</dd>
- <dt>Веб-сервер</dt>
- <dd>Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта.</dd>
- <dt>Поисковая система</dt>
- <dd>Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.</dd>
-</dl>
+- Веб-страница
+  - : Документ, который может быть отображён веб-браузерами, такими как: Firefox, Google Chrome, Microsoft Internet Explorer / Edge или Safari от Apple. Само понятие "веб-страница" для краткости будем называть просто "страница".
+- Веб-сайт
+  - : Коллекция веб-страниц, связанных между собой какими-либо способами. Употребление в лексике: "веб-сайт" или просто "сайт".
+- Веб-сервер
+  - : Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта.
+- Поисковая система
+  - : Веб-сайт, помогающий в поиске других веб-страниц, например такие как: Google, Bing или Yahoo.
 
-<h2 id="Активное_изучение">Активное изучение</h2>
+## Активное изучение
 
-<p><em>Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">пожалуйста, окажите нам содействие</a>. </em></p>
+_Пока что активное изучение не доступно. Если вы можете предоставить полезную информацию, то, [пожалуйста, окажите нам содействие](/ru/docs/MDN/Getting_started)._
 
-<h2 id="Погружаемся_глубже">Погружаемся глубже</h2>
+## Погружаемся глубже
 
-<p>Итак, давайте копнём чуть глубже и узнаем, как эти 4 термина связаны между собой, и почему данные понятия зачастую путают друг с другом.</p>
+Итак, давайте копнём чуть глубже и узнаем, как эти 4 термина связаны между собой, и почему данные понятия зачастую путают друг с другом.
 
-<h3 id="Веб-страница">Веб-страница</h3>
+### Веб-страница
 
-<p><strong>Веб-страница</strong> - простой документ, отображаемый на экране компьютера посредством <a href="https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80">браузера</a>. Такой документ написан языком <a href="https://ru.wikipedia.org/wiki/HTML">HTML</a>  (который мы рассмотрим более детально <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">в других статьях</a>). Веб-страница может содержать множество различных материалов, таких как:</p>
+**Веб-страница** - простой документ, отображаемый на экране компьютера посредством [браузера](https://ru.wikipedia.org/wiki/%D0%91%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80). Такой документ написан языком [HTML](https://ru.wikipedia.org/wiki/HTML) (который мы рассмотрим более детально [в других статьях](/ru/docs/Web/HTML)). Веб-страница может содержать множество различных материалов, таких как:
 
-<ul>
- <li><em>стилевая информация</em> — контролирование страницы по восприятию и ощущению</li>
- <li><em>скрипты </em>— которые делают страницу более динамичной и удобной в использовании для пользователей</li>
- <li><em>медиа</em> — изображения, музыка и видео.</li>
-</ul>
+- _стилевая информация_ — контролирование страницы по восприятию и ощущению
+- _скрипты_ — которые делают страницу более динамичной и удобной в использовании для пользователей
+- _медиа_ — изображения, музыка и видео.
 
-<div class="note">
-<p><strong>Примечание: </strong>браузеры зачастую могут отображать некоторые документы в формате <a href="https://ru.wikipedia.org/wiki/Portable_Document_Format">PDF</a> файла или изображения, но термин <strong>веб-страница</strong> больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие  <strong>документ</strong>.</p>
-</div>
+> **Примечание:**браузеры зачастую могут отображать некоторые документы в формате [PDF](https://ru.wikipedia.org/wiki/Portable_Document_Format) файла или изображения, но термин **веб-страница** больше относится непосредственно к HTML-документам. До конца статьи, в данном случае, мы будем использовать понятие **документ**.
 
-<p>Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке вашего браузера:</p>
+Все веб-страницы в сети имеют свой уникальный адрес. Чтобы получить доступ к нужной странице просто наберите её адрес в адресной строке вашего браузера:
 
-<p style="text-align: center;"><img alt="Example of a web page address in the browser address bar" src="https://mdn.mozillademos.org/files/8529/web-page.jpg" style="float: left; height: 239px; width: 650px;"></p>
+![Example of a web page address in the browser address bar](https://mdn.mozillademos.org/files/8529/web-page.jpg)
 
+_Веб-сайт_ - это коллекция страниц, связанных между собой какими-либо способами (включая их связи с иными ресурсами), которые доступны под единым доменным именем. Каждая страница сайта содержит прямые ссылки (практически всегда выделенные части текста, по которым можно кликнуть мышью), что позволяет пользователю быстро переходить от одной страницы веб-сайта к другой.
 
+Чтобы получить доступ к веб-сайту, наберите его доменное имя в адресной строке браузера, и ваш браузер отобразит главную страницу сайта или, по-другому, домашнюю страницу:
 
+![Example of a web site domain name in the browser address bar](https://mdn.mozillademos.org/files/8531/web-site.jpg)
 
+_Веб-страницу_ и _веб-сайт_ особенно легко спутать между собой, когда _сайт_ содержит всего одну _страницу._ Такой сайт иногда называют _одностраничным веб-сайтом._
 
+### Веб-сервер
 
+_Веб-сервер_ - это компьютер, предоставляющий в сеть один или множество _веб-сайтов (хостинг)_. Понятие "хостинг" - означает, что все _страницы_ и прикреплённые к ним файлы содержатся на данном компьютере. Т.е. _Веб-сервер_ будет отправлять любую _страницу_ с _сайта_ по запросу любого пользователя, что и будет хостингом для браузера пользователя.
 
+Не путайте понятия _веб-сайта_ и _веб-сервера_. Например, если вы слышите, что кто-либо говорит: "Мой веб-сайт не отвечает", на самом деле это означает, что это _веб-сервер_ не отвечает на запрос, и поэтому недоступен и сам _сайт._ Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернёмся к предыдущему примеру: если бы мы сказали: "Мой веб-сервер не отвечает", это значило бы, что на этом сервере нет доступных сайтов в данный момент.
 
+### Поисковая система
 
+_Поисковые системы_ являются распространённой причиной путаницы в сети. _Поисковая система_ - это специальный вид веб-сайта, который помогает пользователям найти нужные страницы _других_ сайтов.
 
+Наиболее популярные поисковые системы: [Google](https://www.google.com/), [Bing](https://www.bing.com/), [Yandex](https://www.yandex.com/), [DuckDuckGo](https://duckduckgo.com/), и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен вам.
 
+Многие начинающие пользователи сети путают между собой поисковую систему и браузер. Давайте поясним: _**браузер**_ - это программное обеспечение, которое находит и отображает веб-страницы; **_поисковая система_** - это специальный вид сайта, который помогает пользователям найти нужные страницы _других_ сайтов. Путаница возникает из-за того, что когда кто-либо впервые запускает браузер, тот отображает домашнюю страницу поисковой системы. Это именно так, ведь первое, что вы делаете, запуская браузер, это находите веб-страницу и открываете её. Но не путайте инфраструктуру (т.е. браузер) с сервисом (т.е. поисковой системой). Это отличие несколько поможет вам, но даже некоторые специалисты произвольно употребляют данные понятия, так что из-за этого не следует особо переживать.
 
+Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:
 
-<p><em>Веб-сайт</em> - это коллекция страниц, связанных между собой какими-либо способами (включая их связи с иными ресурсами), которые доступны под единым доменным именем. Каждая страница сайта содержит прямые ссылки (практически всегда выделенные части текста, по которым можно кликнуть мышью), что позволяет пользователю быстро переходить от одной страницы веб-сайта к другой.</p>
+![Example of Firefox nightly displaying a custom Google page as default](https://mdn.mozillademos.org/files/8533/search-engine.jpg)
 
-<p>Чтобы получить доступ к веб-сайту, наберите его доменное имя в адресной строке браузера, и ваш браузер отобразит главную страницу сайта или, по-другому, домашнюю страницу:</p>
+## Смотрите также
 
-<p><img alt="Example of a web site domain name in the browser address bar" src="https://mdn.mozillademos.org/files/8531/web-site.jpg" style="height: 365px; width: 650px;"></p>
-
-<p><em>Веб-страницу </em>и<em> веб-сайт </em>особенно легко спутать между собой, когда <em>сайт</em> содержит всего одну <em>страницу. </em>Такой сайт иногда называют <em>одностраничным веб-сайтом.</em></p>
-
-<h3 id="Веб-сервер">Веб-сервер</h3>
-
-<p><em>Веб-сервер</em> - это компьютер, предоставляющий в сеть один или множество <em>веб-сайтов (хостинг)</em>. Понятие "хостинг" - означает, что все <em>страницы </em>и прикреплённые к ним файлы содержатся на данном компьютере. Т.е. <em>Веб-сервер</em> будет отправлять любую <em>страницу</em> с <em>сайта</em> по запросу любого пользователя, что и будет хостингом для браузера пользователя.</p>
-
-<p>Не путайте понятия <em>веб-сайта</em> и <em>веб-сервера</em>. Например, если вы слышите, что кто-либо говорит: "Мой веб-сайт не отвечает", на самом деле это означает, что это <em>веб-сервер</em> не отвечает на запрос, и поэтому недоступен и сам <em>сайт.</em> Более того, так как веб-сервер может разместить несколько сайтов, термин веб-сервер никогда не используется для обозначения веб-сайта, так как это могло бы привести к большой путанице. Вернёмся к предыдущему примеру: если бы мы сказали: "Мой веб-сервер не отвечает", это значило бы, что на этом сервере нет доступных сайтов в данный момент.</p>
-
-<h3 id="Поисковая_система">Поисковая система</h3>
-
-<p><em>Поисковые системы</em> являются распространённой причиной путаницы в сети. <em>Поисковая система</em> - это специальный вид веб-сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов.</p>
-
-<p>Наиболее популярные поисковые системы: <a href="https://www.google.com/">Google</a>, <a href="https://www.bing.com/">Bing</a>, <a href="https://www.yandex.com/">Yandex</a>, <a href="https://duckduckgo.com/">DuckDuckGo</a>, и многие другие. Некоторые из них универсальны, а какие-то ориентированы на определённую область. Используйте тот поисковик, который удобен вам.</p>
-
-<p>Многие начинающие пользователи сети путают между собой поисковую систему и браузер. Давайте поясним: <em><strong>браузер</strong></em> - это программное обеспечение, которое находит и отображает веб-страницы; <strong><em>поисковая система</em></strong> - это специальный вид сайта, который помогает пользователям найти нужные страницы <em>других</em> сайтов. Путаница возникает из-за того, что когда кто-либо впервые запускает браузер, тот отображает домашнюю страницу поисковой системы. Это именно так, ведь первое, что вы делаете, запуская браузер, это находите веб-страницу и открываете её. Но не путайте инфраструктуру (т.е. браузер) с сервисом (т.е. поисковой системой). Это отличие несколько поможет вам, но даже некоторые специалисты произвольно употребляют данные понятия, так что из-за этого не следует особо переживать. </p>
-
-<p>Ниже пример того, как браузер Firerox по умолчанию отображает окно поиска Google на стартовой (домашней) странице:</p>
-
-<p><img alt="Example of Firefox nightly displaying a custom Google page as default" src="https://mdn.mozillademos.org/files/8533/search-engine.jpg" style="height: 399px; width: 650px;"></p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li>Погружаемся глубже: <a href="https://developer.mozilla.org/ru/docs/Learn/What_is_a_web_server">что такое Веб-сервер</a></li>
- <li>Рассмотрим, как веб-страницы связаны с веб-сайтом: <a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_links_on_the_web">Разбираемся с веб-ссылками</a></li>
-</ul>
+- Погружаемся глубже: [что такое Веб-сервер](/ru/docs/Learn/What_is_a_web_server)
+- Рассмотрим, как веб-страницы связаны с веб-сайтом: [Разбираемся с веб-ссылками](/ru/docs/Learn/Understanding_links_on_the_web)
diff --git a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.md b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.md
index c8cecd1699255c..57db3b4445fcb4 100644
--- a/files/ru/learn/common_questions/set_up_a_local_testing_server/index.md
+++ b/files/ru/learn/common_questions/set_up_a_local_testing_server/index.md
@@ -3,95 +3,72 @@ title: Как настроить локальный сервер для тест
 slug: Learn/Common_questions/set_up_a_local_testing_server
 translation_of: Learn/Common_questions/set_up_a_local_testing_server
 ---
-<div class="summary">
-<p>Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.</p>
-</div>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Сначала вам необходимо изучить <a href="/en-US/docs/Learn/How_the_Internet_works">как работает интернет</a>, а также <a href="/en-US/docs/Learn/What_is_a_Web_server">что такое веб-сервер</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Вы научитесь как устанавливать локальный тестовый сервер.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Локальные_и_удалённые_файлы">Локальные и удалённые файлы</h2>
-
-<p>На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню <em>File</em> &gt; <em>Open...</em> и указывая необходимый HTML файл. Существует множество способов как это сделать.</p>
-
-<p>Если веб-адрес начинается с <code>file://</code> в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с <code>http://</code> или <code>https://</code>, что означает что файл был получен через HTTP.</p>
-
-<h2 id="Проблемы_тестирования_локальных_файлов">Проблемы тестирования локальных файлов</h2>
-
-<p>Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространённые из которых:</p>
-
-<ul>
- <li><strong>Они содержат асинхронные запросы.</strong> Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</li>
- <li><strong>Они имеют серверный язык.</strong> Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.</li>
-</ul>
-
-<h2 id="Запуск_простого_локального_HTTP_сервера">Запуск простого локального HTTP сервера</h2>
-
-<p>Чтобы обойти проблему асинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей - использовать модуль <code>SimpleHTTPServer</code> Python.</p>
-
-<p>Для этого нужно:</p>
-
-<ol>
- <li>
-  <p>Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:</p>
-
-  <ul>
-   <li>Зайдите на <a href="https://www.python.org/">python.org</a></li>
-   <li>В секции загрузок, выберите линк для Python "3.xxx".</li>
-   <li>Внизу страницы выберите <em>Windows x86 executable installer</em> и скачайте его.</li>
-   <li>После загрузки файла запустите его.</li>
-   <li>На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".</li>
-   <li>Нажмите <em>Install</em>, затем нажмите <em>Close</em> когда установка закончится.</li>
-  </ul>
- </li>
- <li>
-  <p>Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:</p>
-
-  <pre class="brush: bash">python -V</pre>
- </li>
- <li>
-  <p>Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды <code>python -V </code> нужно перейти в директорию с вашим проектом, используя команду <code>cd</code>:</p>
-
-  <pre class="brush: bash"># include the directory name to enter it, for example
-cd Desktop
-# use two dots to jump up one directory level if you need to
-cd ..</pre>
- </li>
- <li>
-  <p>Введите команду для запуска сервера в том каталоге:</p>
-
-  <pre class="brush: bash"># If Python version returned above is 3.X
-python -m http.server
-# If Python version returned above is 2.X
-python -m <code>SimpleHTTPServer</code></pre>
- </li>
- <li>
-  <p>По умолчанию это приведёт к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес <code>localhost: 8000</code> в своём веб-браузере. Здесь вы увидите содержимое указанного каталога - щёлкните файл HTML, который вы хотите запустить.</p>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание</strong>. Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: <code>python -m http.server 7800</code> (Python 3.x) или <code>python -m SimpleHTTPServer 7800</code> (Python 2.x). Затем вы можете получить доступ к своему контенту на <code>localhost: 7800</code>.</p>
-</div>
-
-<h2 id="Запуск_серверных_языков_локально">Запуск серверных языков локально</h2>
-
-<p>Модуль Python <code>SimpleHTTPServer (python 2.0) http.server (python 3.0)</code> полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:</p>
-
-<ul>
- <li>Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>. <a href="http://flask.pocoo.org/">Flask</a> также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment#Installing_Python_3">install Python/PIP</a>, а затем установите Flask с помощью <code>pip3 install flask</code>. На этом этапе вы сможете запустить примеры Python Flask, используя, например, <code>python3 python-example.py</code>, затем перейдя на <code>localhost: 5000</code> в свой браузер.</li>
- <li>Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Express Web Framework (Node.js/JavaScript)</a>.</li>
- <li>Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются <a class="external external-icon" href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac и Windows), <a class="external external-icon" href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux) и <a href="https://www.linux.com/learn/easy-lamp-server-installation">LAMP</a> (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.</li>
-</ul>
+Эта статья объясняет как установить простой локальный тестовый сервер на вашем компьютере, а так же основы его использования.
+
+| Требования: | Сначала вам необходимо изучить [как работает интернет](/ru/docs/Learn/How_the_Internet_works), а также [что такое веб-сервер](/ru/docs/Learn/What_is_a_Web_server). |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Вы научитесь как устанавливать локальный тестовый сервер.                                                                                                           |
+
+## Локальные и удалённые файлы
+
+На протяжении всего обучения, вы будете открывать примеры непосредственно в браузере — двойным кликом по HTML файлу, перетаскиванием файла в окно браузера, или через меню _File_ > _Open..._ и указывая необходимый HTML файл. Существует множество способов как это сделать.
+
+Если веб-адрес начинается с `file://` в котором далее прописан путь к файлу на вашем локальном жёстком диске, значит используется локальный файл. В противоположность этому, если вы откроете на просмотр один из наших примеров, расположенных на GitHub (или пример расположенный на любом другом удалённом сервере), веб-адрес будет начинаться с `http://` или `https://`, что означает что файл был получен через HTTP.
+
+## Проблемы тестирования локальных файлов
+
+Некоторые примеры могут не запуститься, если вы попробуете открыть их как локальные файлы. Это может произойти по нескольким причинам, самые распространённые из которых:
+
+- **Они содержат асинхронные запросы.** Некоторые браузеры (включая Chrome) не будут запускать асинхронные запросы (см. [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)), если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с [Website security](/ru/docs/Learn/Server-side/First_steps/Website_security)).
+- **Они имеют серверный язык.** Серверные языки (например, PHP или Python) требуют специального сервера для интерпретации кода и предоставления результатов.
+
+## Запуск простого локального HTTP сервера
+
+Чтобы обойти проблему асинхронных запросов, нам нужно протестировать такие примеры, запустив их через локальный веб-сервер. Один из самых простых способов сделать это для наших целей - использовать модуль `SimpleHTTPServer` Python.
+
+Для этого нужно:
+
+1.  Установить Python. Если вы пользуетесь Linux или Mac OS X, всё уже готово в вашей системе. Если вы пользователь Windows, вы можете скачать установочный файл с домашней страницы Python:
+
+    - Зайдите на [python.org](https://www.python.org/)
+    - В секции загрузок, выберите линк для Python "3.xxx".
+    - Внизу страницы выберите _Windows x86 executable installer_ и скачайте его.
+    - После загрузки файла запустите его.
+    - На первой странице инсталлятора выберите чекбокс "Add Python 3.xxx to PATH".
+    - Нажмите _Install_, затем нажмите _Close_ когда установка закончится.
+
+2.  Откройте командную строку (Windows)/ (OS X/Linux). Для проверки установки Python введите следующую команду:
+
+    ```bash
+    python -V
+    ```
+
+3.  Система вернёт вам номер версии установленной программы. В случае успешного выполнения команды `python -V `нужно перейти в директорию с вашим проектом, используя команду `cd`:
+
+    ```bash
+    # include the directory name to enter it, for example
+    cd Desktop
+    # use two dots to jump up one directory level if you need to
+    cd ..
+    ```
+
+4.  Введите команду для запуска сервера в том каталоге:
+
+    ```bash
+    # If Python version returned above is 3.X
+    python -m http.server
+    # If Python version returned above is 2.X
+    python -m SimpleHTTPServer
+    ```
+
+5.  По умолчанию это приведёт к запуску содержимого каталога на локальном веб-сервере на порту 8000. Вы можете перейти на этот сервер, перейдя на URL-адрес `localhost: 8000` в своём веб-браузере. Здесь вы увидите содержимое указанного каталога - щёлкните файл HTML, который вы хотите запустить.
+
+> **Примечание:** . Если у вас уже есть что-то на порту 8000, вы можете выбрать другой порт, запустив команду сервера, за которой следует альтернативный номер порта, например: `python -m http.server 7800` (Python 3.x) или `python -m SimpleHTTPServer 7800` (Python 2.x). Затем вы можете получить доступ к своему контенту на `localhost: 7800`.
+
+## Запуск серверных языков локально
+
+Модуль Python `SimpleHTTPServer (python 2.0) http.server (python 3.0)` полезен, но он не знает, как запускать код, написанный на таких языках, как Python, PHP или JavaScript. Чтобы справиться с этим, вам понадобится нечто большее - именно то, что вам нужно, зависит от языка сервера, который вы пытаетесь запустить. Вот несколько примеров:
+
+- Для запуска кода на стороне сервера Python вам необходимо использовать веб-инфраструктуру Python. Вы можете узнать, как использовать структуру Django, прочитав [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django). [Flask](http://flask.pocoo.org/) также является хорошей (чуть менее тяжёлой) альтернативой Django. Чтобы запустить это, ознакомьтесь с [install Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#Installing_Python_3), а затем установите Flask с помощью `pip3 install flask`. На этом этапе вы сможете запустить примеры Python Flask, используя, например, `python3 python-example.py`, затем перейдя на `localhost: 5000` в свой браузер.
+- Чтобы запустить серверный код Node.js (JavaScript), вам нужно использовать Node.js или фреймворк, построенный поверх него. Express - хороший выбор - см. [Express Web Framework (Node.js/JavaScript)](/ru/docs/Learn/Server-side/Express_Nodejs).
+- Чтобы запустить PHP-серверный код, вам понадобится настройка сервера, которая может интерпретировать PHP. Хорошими вариантами для локального тестирования PHP являются [MAMP](https://www.mamp.info/en/downloads/) (Mac и Windows), [AMPPS](http://ampps.com/download) (Mac, Windows, Linux) и [LAMP](https://www.linux.com/learn/easy-lamp-server-installation) (Linux, Apache, MySQL и PHP / Python / Perl). Это полные пакеты, которые создают локальные настройки, позволяющие запускать базы данных Apache, PHP и MySQL.
diff --git a/files/ru/learn/common_questions/thinking_before_coding/index.md b/files/ru/learn/common_questions/thinking_before_coding/index.md
index a2d641dcef0f56..5a980e7cc96a28 100644
--- a/files/ru/learn/common_questions/thinking_before_coding/index.md
+++ b/files/ru/learn/common_questions/thinking_before_coding/index.md
@@ -8,169 +8,172 @@ tags:
   - Планирование
 translation_of: Learn/Common_questions/Thinking_before_coding
 ---
-<p class="summary">Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Никаких</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Научиться определять цели, которые позволят дать направление вашему web-проекту.</td>
-  </tr>
- </tbody>
-</table>
+Эта статья покрывает первый и крайне важный шаг в создании любого проекта: определить, что вы хотите получить.
+
+| Необходимые знания: | Никаких                                                                          |
+| ------------------- | -------------------------------------------------------------------------------- |
+| Цель:               | Научиться определять цели, которые позволят дать направление вашему web-проекту. |
 
-<h2 id="Определение_идеи_проекта">Определение идеи проекта</h2>
+## Определение идеи проекта
 
-<p>Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.</p>
+Большинство людей, начиная свой web-проект, фокусируются прежде всего на технической его стороне. Безусловно, вы должны иметь представление о технической стороне своей работы, но гораздо важнее сперва узнать, что вы хотели бы получить в результате. Конечно это кажется очевидным, однако слишком много проектов не доживают до релиза не из-за отсутствия технических знаний, но из-за отсутствия целей и видения.
 
-<p>Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :</p>
+Так что когда у вас появляется какая-то идея и желание воплотить её в web-сайте, вам необходимо ответить на 3 простых вопроса, и уже потом предпринимать что-либо иное :
 
-<ul>
- <li>Что я хочу в конце-концов получить?</li>
- <li>Каким образом web-сайт поможет мне в достижении моих целей?</li>
- <li>Что и в каком порядке должно быть реализовано, чтобы достичь моих целей?</li>
-</ul>
+- Что я хочу в конце-концов получить?
+- Каким образом web-сайт поможет мне в достижении моих целей?
+- Что и в каком порядке должно быть реализовано, чтобы достичь моих целей?
 
-<p>Совокупность и анализ ответов на эти вопросы поможет определить <em>идею проекта</em>, которая является <strong>необходимым</strong> первым шагом в достижении ваших целей, вне зависимости от того, имеется ли у вас опыт разработки или же вы новичок.</p>
+Совокупность и анализ ответов на эти вопросы поможет определить _идею проекта_, которая является **необходимым** первым шагом в достижении ваших целей, вне зависимости от того, имеется ли у вас опыт разработки или же вы новичок.
 
-<h2 id="Активное_Обучение">Активное Обучение</h2>
+## Активное Обучение
 
-<p><em>На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+_На данный момент этот раздел ещё не готов. Вы можете помочь сообществу разработчиков, вступив в [Please, consider contributing](/ru/docs/MDN/Getting_started)._
 
-<h2 id="Более_глубокое_погружение">Более глубокое погружение</h2>
+## Более глубокое погружение
 
-<p>Проект никогда не начинается с реализации. Музыканты никогда не делали бы музыку, пока не решили, что же они хотят сыграть, аналогию можно провести к художникам, писателям, и web-разработчикам. Реализация второстепенна.</p>
+Проект никогда не начинается с реализации. Музыканты никогда не делали бы музыку, пока не решили, что же они хотят сыграть, аналогию можно провести к художникам, писателям, и web-разработчикам. Реализация второстепенна.
 
-<p>Технические навыки безусловно важны. Музыканты обязаны владеть своим инструментом. Но даже хороший музыкант никогда не создаст хорошую музыку не имея идеи. Следовательно, прежде чем переходить к вашей любимой IDE, вы должны отойти немного назад и детально представить, что же вы на самом деле хотите сделать.</p>
+Технические навыки безусловно важны. Музыканты обязаны владеть своим инструментом. Но даже хороший музыкант никогда не создаст хорошую музыку не имея идеи. Следовательно, прежде чем переходить к вашей любимой IDE, вы должны отойти немного назад и детально представить, что же вы на самом деле хотите сделать.
 
-<p>Часовая конференция-обсуждение с вашими друзьями - хорошее начало, но не совсем рациональное. Лучше будет спокойно сесть и структурировать всю информацию, это позволит вам получить наиболее адекватное представление пути к реализации вашей идеи. Для этого вам нужны лишь только листочек, ручка и немного времени для ответа на следующие вопросы.</p>
+Часовая конференция-обсуждение с вашими друзьями - хорошее начало, но не совсем рациональное. Лучше будет спокойно сесть и структурировать всю информацию, это позволит вам получить наиболее адекватное представление пути к реализации вашей идеи. Для этого вам нужны лишь только листочек, ручка и немного времени для ответа на следующие вопросы.
 
-<div class="note">
-<p><strong>Примечание:</strong> Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют <a href="http://en.wikipedia.org/wiki/Ideation_(idea_generation)">Project Ideation</a>, <a href="http://en.wikipedia.org/wiki/Project_planning">Project Planning</a> и <a href="http://en.wikipedia.org/wiki/Project_management">Project Management</a>.</p>
-</div>
+> **Примечание:** Имеется неисчислимое множество способов, как сформулировать идею проекта. К сожалению, мы не можем собрать здесь все сразу (и даже увесистой книги не хватит). То, что мы представляем в этой статье - это простой способ выполнить шаги, которые профессионалы называют [Project Ideation](<http://en.wikipedia.org/wiki/Ideation_(idea_generation)>), [Project Planning](http://en.wikipedia.org/wiki/Project_planning) и [Project Management](http://en.wikipedia.org/wiki/Project_management).
 
-<h3 class="highlight-spanned" id="Что_же_в_конце_концов_я_хочу_получить">Что же в конце концов я хочу получить?</h3>
+### Что же в конце концов я хочу получить?
 
-<p>Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдёт список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно ещё, что вы хотите получить.</p>
+Этот вопрос наиболее остро нуждается в ответе, поскольку ответ является решающим в дальнейших действиях. Лучше всего подойдёт список целей, которых вы хотите достичь. Это может быть что угодно: интернет-магазин, выражение политических взглядов, расширение круга общения, организация концертов, коллекционирование картинок с котиками, или что угодно ещё, что вы хотите получить.
 
-<p>Представьте себя музыкантом. Должно быть, вы хотите:</p>
+Представьте себя музыкантом. Должно быть, вы хотите:
 
-<ul>
- <li>Предоставить людям возможность прослушать ваше творчество.</li>
- <li>Создать интернет-магазин.</li>
- <li>Наладить контакт с другими музыкантами.</li>
- <li>Поговорить о музыке.</li>
- <li>Обучать своему творчеству с помощью видео-уроков.</li>
- <li>Публиковать фото вашего кота.</li>
- <li>Найти нового друга (подругу).</li>
-</ul>
+- Предоставить людям возможность прослушать ваше творчество.
+- Создать интернет-магазин.
+- Наладить контакт с другими музыкантами.
+- Поговорить о музыке.
+- Обучать своему творчеству с помощью видео-уроков.
+- Публиковать фото вашего кота.
+- Найти нового друга (подругу).
 
-<p>Когда вы получили такой список, необходимо упорядочить его согласно приоритетам. Разместим цели в порядке убывания важности:</p>
+Когда вы получили такой список, необходимо упорядочить его согласно приоритетам. Разместим цели в порядке убывания важности:
 
-<ol>
- <li>Найти нового друга (подругу).</li>
- <li>Предоставить людям возможность прослушать ваше творчество.</li>
- <li>Поговорить о музыке.</li>
- <li>Наладить контакт с другими музыкантами.</li>
- <li>Создать интернет-магазин.</li>
- <li>Обучать своему творчеству с помощью видео-уроков.</li>
- <li>Публиковать фото вашего кота.</li>
-</ol>
+1.  Найти нового друга (подругу).
+2.  Предоставить людям возможность прослушать ваше творчество.
+3.  Поговорить о музыке.
+4.  Наладить контакт с другими музыкантами.
+5.  Создать интернет-магазин.
+6.  Обучать своему творчеству с помощью видео-уроков.
+7.  Публиковать фото вашего кота.
 
-<p>Выполнив это простое упражнение, написав ваши цели и отсортировав их, вам будет гораздо легче принимать решения. (Нужно ли мне добавить какие-то возможности, использовать эти или иные сервисы, создавать именно <em>такой</em> дизайн?)</p>
+Выполнив это простое упражнение, написав ваши цели и отсортировав их, вам будет гораздо легче принимать решения. (Нужно ли мне добавить какие-то возможности, использовать эти или иные сервисы, создавать именно _такой_ дизайн?)
 
-<p>Теперь, когда вы получили приоритетный список ваших целей, имеет смысл перейти к следующему вопросу.</p>
+Теперь, когда вы получили приоритетный список ваших целей, имеет смысл перейти к следующему вопросу.
 
-<h3 class="highlight-spanned" id="Как_сайт_поможет_мне_в_достижении_цели">Как сайт поможет мне в достижении цели?</h3>
+### Как сайт поможет мне в достижении цели?
 
-<p>И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?</p>
+И так, у вас есть конкретная цель и вам кажется, что для её достижения нужен веб-сайт. Вы уверены?
 
-<p>Вернёмся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.</p>
+Вернёмся к нашему примеру. У нас есть 5 задач, связанных с музыкой, одна из области личной жизни (поиск своей пары), и ни с чем не связанные фото кота. Есть ли смысл создавать сайт, который способен удовлетворить всем этим требованиям? Так ли это необходимо? В конце концов, десятки уже существующих web-сервисов способны помочь вам в достижении ваших целей.
 
-<p>Поиск пары - главная задача, и более разумно использовать уже существующие ресурсы, чем создавать свой. Почему? Мы потратим больше времени на создание и поддержание сайта чем на поиск своей потенциальной пары. Пока эта цель сохраняет наибольший приоритет, логичнее тратить время и силы на использование (освоение) существующего инструмента, чем начинать его создание с нуля. Аналогично, существует достаточное количество сайтов, которые уже предоставляют возможность демонстрации фотографий, чтобы на создание ещё одного можно было очень коротко ответить: это того не стоит.</p>
+Поиск пары - главная задача, и более разумно использовать уже существующие ресурсы, чем создавать свой. Почему? Мы потратим больше времени на создание и поддержание сайта чем на поиск своей потенциальной пары. Пока эта цель сохраняет наибольший приоритет, логичнее тратить время и силы на использование (освоение) существующего инструмента, чем начинать его создание с нуля. Аналогично, существует достаточное количество сайтов, которые уже предоставляют возможность демонстрации фотографий, чтобы на создание ещё одного можно было очень коротко ответить: это того не стоит.
 
-<p>Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобной функциональностью, но в текущем контексте имеет смысл создать сайт, посвящённый именно вам. Прежде всего, сайт - это лучший способ <em>чтобы собрать все</em>, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.</p>
+Оставшиеся пять задач непосредственно связанны с музыкой. Конечно же, на данный момент уже достаточно сайтов, обладающих подобной функциональностью, но в текущем контексте имеет смысл создать сайт, посвящённый именно вам. Прежде всего, сайт - это лучший способ _чтобы собрать все_, что мы хотим опубликовать, в одном месте (для решения проблем под номерами 3, 5 и 6) и создать среду для взаимодействия между нами и публикой (для решения проблем 2 и 4). Если проще, то так как все эти задачи из одной области, содержание всего в одном месте (веб-сайте) поможет нам в достижении целей, а также поможет нашим поклонникам связаться с нами.
 
-<p>Как способен сайт помочь мне решить мои проблемы? Ответив на это, вы найдёте наилучшее решение для себя и убережётесь от траты усилий впустую.</p>
+Как способен сайт помочь мне решить мои проблемы? Ответив на это, вы найдёте наилучшее решение для себя и убережётесь от траты усилий впустую.
 
-<h3 class="highlight-spanned" id="Что_и_в_какие_сроки_должно_быть_реализовано_для_достижения_целей">Что и в какие сроки должно быть реализовано для достижения целей?</h3>
+### Что и в какие сроки должно быть реализовано для достижения целей?
 
-<p>Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Ещё нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтённом, или просто измените своё видение проекта.</p>
+Теперь, когда вы уже узнали, что вам на самом деле нужно, настало время составить план, раскладывающий ваши цели на небольшие выполнимые шаги. Ещё нужно помнить, что все ваши планы не есть догмы. Они постоянно эволюционируют вместе с изменением курса проекта. К примеру, если вы вдруг вспомните о чем-то ранее неучтённом, или просто измените своё видение проекта.
 
-<p>Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернёмся к нашему примеру:</p>
+Как водится, лучше один раз увидеть, чем сто раз услышать, так что вернёмся к нашему примеру:
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Цель</th>
-   <th scope="col">План по достижению</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td style="vertical-align: top;">Предоставить людям доступ к вашему творчеству</td>
-   <td>
-    <ol>
-     <li>Записать музыку</li>
-     <li>Опубликовать ваши аудиозаписи в сети (Можете ли вы использовать для этого существующие сервисы?)</li>
-     <li>Предоставить людям доступ к вашей музыке в некоторых частях вашего сайта</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Обсудить вашу музыкальную деятельность</td>
-   <td>
-    <ol>
-     <li>Написать несколько статей для затравки обсуждений</li>
-     <li>Определить, как должны быть оформлены статьи</li>
-     <li>Опубликовать готовые тексты на вашем сайте (Как это делается?)</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Познакомиться с коллегами по цеху</td>
-   <td>
-    <ol>
-     <li>Предоставить людям способ связаться с вами (Email? Соц. сеть? Номер телефона? Письмо?)</li>
-     <li>Определить, как люди могут узнать эти данные на вашем сайте</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Создать интернет-магазин</td>
-   <td>
-    <ol>
-     <li>Приготовить их</li>
-     <li>Разместить в магазине</li>
-     <li>Найти способ доставки</li>
-     <li>Определиться с платёжной системой</li>
-     <li>Добавить способ делать заказы на вашем сайте</li>
-    </ol>
-   </td>
-  </tr>
-  <tr>
-   <td style="vertical-align: top;">Обучать музыке в своих видео-уроках</td>
-   <td>
-    <ol>
-     <li>Записать видео-уроки</li>
-     <li>Разместить видео в онлайне (И снова: стоит ли использовать для этого уже готовые платформы?)</li>
-     <li>Предоставить людям доступ к видео на вашем сайте (проинформировать)</li>
-    </ol>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Цель</th>
+      <th scope="col">План по достижению</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td style="vertical-align: top">
+        Предоставить людям доступ к вашему творчеству
+      </td>
+      <td>
+        <ol>
+          <li>Записать музыку</li>
+          <li>
+            Опубликовать ваши аудиозаписи в сети (Можете ли вы использовать для
+            этого существующие сервисы?)
+          </li>
+          <li>
+            Предоставить людям доступ к вашей музыке в некоторых частях вашего
+            сайта
+          </li>
+        </ol>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">
+        Обсудить вашу музыкальную деятельность
+      </td>
+      <td>
+        <ol>
+          <li>Написать несколько статей для затравки обсуждений</li>
+          <li>Определить, как должны быть оформлены статьи</li>
+          <li>
+            Опубликовать готовые тексты на вашем сайте (Как это делается?)
+          </li>
+        </ol>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Познакомиться с коллегами по цеху</td>
+      <td>
+        <ol>
+          <li>
+            Предоставить людям способ связаться с вами (Email? Соц. сеть? Номер
+            телефона? Письмо?)
+          </li>
+          <li>Определить, как люди могут узнать эти данные на вашем сайте</li>
+        </ol>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Создать интернет-магазин</td>
+      <td>
+        <ol>
+          <li>Приготовить их</li>
+          <li>Разместить в магазине</li>
+          <li>Найти способ доставки</li>
+          <li>Определиться с платёжной системой</li>
+          <li>Добавить способ делать заказы на вашем сайте</li>
+        </ol>
+      </td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top">Обучать музыке в своих видео-уроках</td>
+      <td>
+        <ol>
+          <li>Записать видео-уроки</li>
+          <li>
+            Разместить видео в онлайне (И снова: стоит ли использовать для этого
+            уже готовые платформы?)
+          </li>
+          <li>
+            Предоставить людям доступ к видео на вашем сайте (проинформировать)
+          </li>
+        </ol>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p><strong>Два важных замечания.</strong></p>
+**Два важных замечания.**
 
-<p>Во-первых, некоторые из этих задач не привязаны к интернету (к примеру, запись музыки или написание статей). И очень часто такие "офлайн" вещи играют большую роль в достижении целей, чем сам сайт. В продажах, к примеру, гораздо большее значение и тяжёлую реализацию представляют решения вопросов доставки, оплаты и налогообложения, чем непосредственная реализация сайта с возможностью оформления заказов.</p>
+Во-первых, некоторые из этих задач не привязаны к интернету (к примеру, запись музыки или написание статей). И очень часто такие "офлайн" вещи играют большую роль в достижении целей, чем сам сайт. В продажах, к примеру, гораздо большее значение и тяжёлую реализацию представляют решения вопросов доставки, оплаты и налогообложения, чем непосредственная реализация сайта с возможностью оформления заказов.
 
-<p>Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотрено в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)</p>
+Во-вторых, написание плана порождает новые вопросы, которые тоже нуждаются в ответах. И, как правило, этих вопросов больше чем рассмотрено в этой статье. (К примеру, можете ли вы сделать что-то из плана самостоятельно, лучше попросить кого-то из знакомых или придётся прибегнуть к помощи третьих лиц?)
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растёт. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на <em>все </em>вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда её реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.</p>
+Как стало понятно, простая мысль "А не сделать ли мне сайт?" порождает очень много работы, и при каждом следующем обдумывании она только растёт. В скором она может стать очень большой, но это не повод для паники. Вы не обязаны отвечать на _все_ вопросы, а также выполнять каждый пункт плана. Что действительно имеет значение, так это ваше видение результата и понимание целей. Однажды создав идею, вам нужно определиться, как и когда её реализовать. Разбивайте большие задачи на меньшие и более выполнимые. И каждая выполненная задача приблизит вас к грандиозному успеху.
diff --git a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.md b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.md
index 27330d3ffa10d9..bfedcdd35068e4 100644
--- a/files/ru/learn/common_questions/upload_files_to_a_web_server/index.md
+++ b/files/ru/learn/common_questions/upload_files_to_a_web_server/index.md
@@ -3,166 +3,139 @@ title: Как загрузить файлы на веб-сервер
 slug: Learn/Common_questions/Upload_files_to_a_web_server
 translation_of: Learn/Common_questions/Upload_files_to_a_web_server
 ---
-<div class="summary">
-<p>Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).</p>
-</div>
+Данная статья покажет, как можно опубликовать сайт в Интернет с помощью инструментов передачи файлов(file transfer tools).
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Вы должны знать <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">что такое веб-сервер</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">как работают доменные имена</a>. Также вы должны знать, <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">как установить базовую среду</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">как написать простую веб-страницу</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools).</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Вы должны знать [что такое веб-сервер](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80) и [как работают доменные имена](/ru/docs/Learn/Understanding_domain_names). Также вы должны знать, [как установить базовую среду](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server) и [как написать простую веб-страницу](/ru/docs/Learn/Getting_started_with_the_web). |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Научиться передавать файлы на сервер используя различные доступные инструменты передачи файлов(file transfer tools).                                                                                                                                                                                                                                                                                                                                  |
 
-<h2 id="Сводка">Сводка</h2>
+## Сводка
 
-<p>Если вы создали простую веб-страницу (для примера смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.</p>
+Если вы создали простую веб-страницу (для примера смотрите [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)), вы, вероятно, захотите отобразить её онлайн, на веб-сервере. В данной статье мы обсудим как сделать это, используя различные доступные настройки, такие как SFTP клиенты, RSync и GitHub.
 
-<h2 id="SFTP_Безопасный_Протокол_Передачи_Файлов">SFTP (Безопасный Протокол Передачи Файлов)</h2>
+## SFTP (Безопасный Протокол Передачи Файлов)
 
-<p>Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать <a href="https://filezilla-project.org/">FileZilla</a>, тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки <a href="https://filezilla-project.org/download.php?type=client">FileZilla downloads page</a>, нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.</p>
+Существуют различные варианты SFTP клиентов. В нашем примере мы будем использовать [FileZilla](https://filezilla-project.org/), тк он бесплатен и подходит для Windows, macOS и Linux. Чтобы установить менеджер перейдите на страницу загрузки [FileZilla downloads page](https://filezilla-project.org/download.php?type=client), нажмите на кнопку загрузки, затем установите пакет из установочного файла обычным способом.
 
-<div class="note">
-<p><strong>Примечание</strong>: Конечно, есть много других вариантов. Смотрите <a href="/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client">Publishing tools</a> для других способов.</p>
-</div>
+> **Примечание:** Конечно, есть много других вариантов. Смотрите [Publishing tools](/en-US/Learn/How_much_does_it_cost#Publishing_tools.3A_FTP_client) для других способов.
 
-<p>Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:</p>
+Откройте приложение FileZilla; вы должны увидеть что-то вроде этого:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15767/filezilla-ui.png" style="display: block; height: 451px; margin: 0px auto; width: 690px;"></p>
+![](https://mdn.mozillademos.org/files/15767/filezilla-ui.png)
 
-<h3 id="Вход_в_систему">Вход в систему</h3>
+### Вход в систему
 
-<p>В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией "Example Hosting Provider", чьи URL адреса выглядят следующим образом: <code>mypersonalwebsite.examplehostingprovider.net</code>.</p>
+В этом примере мы предположим, что наш хостинг-провайдер (сервис, на котором находится наш HTTP веб сервер) является фиктивной компанией "Example Hosting Provider", чьи URL адреса выглядят следующим образом: `mypersonalwebsite.examplehostingprovider.net`.
 
-<p>Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:</p>
+Сейчас мы создали аккаунт и получили от хостинг-провайдера следующую информацию:
 
-<blockquote>
-<p>Поздравляем с созданием аккаунта на сервисе "Example Hosting Provider".</p>
+> Поздравляем с созданием аккаунта на сервисе "Example Hosting Provider".
+>
+> Ваш аккаунт: `demozilla`
+>
+> Ваш сайт доступен по адресу:
+>
+> `demozilla.examplehostingprovider.net`
+>
+> Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:
+>
+> - SFTP сервер: `sftp://demozilla.examplehostingprovider.net`
+> - Имя пользователя: `demozilla`
+> - Пароль: `quickbrownfox`
+> - Порт: `5548`
+> - Для публикации в интернет, поместите ваши файлы в папку `Public/htdocs` .
 
-<p>Ваш аккаунт: <code>demozilla</code></p>
+Давайте сначала посмотрим на `http://demozilla.examplehostingprovider.net/` — как вы можете видеть, то здесь пока ничего нет:
 
-<p>Ваш сайт доступен по адресу:</p>
+![Our demozilla personal website, seen in a browser: it's empty](https://mdn.mozillademos.org/files/9615/demozilla-empty.png)
 
-<p><code>demozilla.examplehostingprovider.net</code></p>
+> **Примечание:** В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by \[Hosting Service].”
 
-<p>Для загрузки файлов на этот аккаунт, пожалуйста, подключитесь через SFTP с использованием следующих учётных данных:</p>
+Чтобы подключить SFTP клиент к удалённому серверу, выполните следующие действия:
 
-<ul>
- <li>SFTP сервер: <code>sftp://demozilla.examplehostingprovider.net</code></li>
- <li>Имя пользователя: <code>demozilla</code></li>
- <li>Пароль: <code>quickbrownfox</code></li>
- <li>Порт: <code>5548</code></li>
- <li>Для публикации в интернет, поместите ваши файлы в папку <code>Public/htdocs</code> .</li>
-</ul>
-</blockquote>
+1.  Выберите _File > Site Manager..._ в главном меню.
+2.  В окне _Site Manager_, нажмите кнопку _New Site_, затем введите название сайта как **demozilla** в предоставленном месте.
+3.  Укажите SFTP-сервер вашего хоста в предоставленном поле: Host.
+4.  В раскрывающемся списке _Logon Type:_ выберите _Normal_, затем введите предоставленные имя пользователя и пароль в соответствующие поля.
+5.  Введите правильный порт и другую информацию.
 
-<p>Давайте сначала посмотрим на  <code>http://demozilla.examplehostingprovider.net/</code> — как вы можете видеть, то здесь пока ничего нет:</p>
+Ваше окно должно выглядеть как показано ниже:
 
-<p><img alt="Our demozilla personal website, seen in a browser: it's empty" src="https://mdn.mozillademos.org/files/9615/demozilla-empty.png" style="border-style: solid; border-width: 1px; display: block; height: 233px; margin: 0 auto; width: 409px;"></p>
+![](https://mdn.mozillademos.org/files/15769/site-manager.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: В зависимости от вашего хостинг-провайдера, когда вы впервые заходите на свой веб-адрес, большую часть времени вы будете видеть страницу, на которой написано что-то вроде этого: “This website is hosted by [Hosting Service].”</p>
-</div>
+Теперь нажмите _Connect_ для подключения к SFTP-серверу.
 
-<p>Чтобы подключить SFTP клиент к удалённому серверу, выполните следующие действия:</p>
+Примечание: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.
 
-<ol>
- <li>Выберите <em>File &gt; Site Manager...</em> в главном меню.</li>
- <li>В окне <em>Site Manager</em>, нажмите кнопку <em>New Site</em>, затем введите название сайта как <strong>demozilla</strong> в предоставленном месте.</li>
- <li>Укажите SFTP-сервер вашего хоста в предоставленном поле: Host.</li>
- <li>В раскрывающемся списке <em>Logon Type: </em>выберите <em>Normal</em>, затем введите предоставленные имя пользователя и пароль в соответствующие поля.</li>
- <li>Введите правильный порт и другую информацию.</li>
-</ol>
+### Здесь и там: локальный и удалённый просмотр
 
-<p>Ваше окно должно выглядеть как показано ниже:</p>
+После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):![](https://mdn.mozillademos.org/files/15768/connected.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15769/site-manager.png" style="display: block; height: 561px; margin: 0px auto; width: 684px;"></p>
+Давайте посмотрим, что вы видите:
 
-<p>Теперь нажмите <em>Connect</em> для подключения к SFTP-серверу.</p>
+- По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, `mdn`).
+- По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: `users/demozilla`)
+- Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.
 
-<p>Примечание: Убедитесь, что ваш хостинг-провайдер предлагает SFTP (безопасный FTP) подключение к вашему хостинговому пространству. FTP по своей сути небезопасен, и вам не следует его использовать.</p>
+### Загрузка на сервер
 
-<h3 id="Здесь_и_там_локальный_и_удалённый_просмотр">Здесь и там: локальный и удалённый просмотр</h3>
+Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: `Public/htdocs`." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши `index.html` , откуда ваши файл и другие активы будут отправлены.
 
-<p>После подключения ваш экран должен выглядеть примерно так (мы подключились к нашему собственному примеру, чтобы дать вам представление):<img alt="" src="https://mdn.mozillademos.org/files/15768/connected.png" style="border-style: solid; border-width: 1px; display: block; height: 199px; margin: 0px auto; width: 700px;"></p>
+После того, как вы нашли правильный удалённый каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.
 
-<p>Давайте посмотрим, что вы видите:</p>
+### Как узнать, что они online?
 
-<ul>
- <li>По центру левой панели вы можете видеть локальные файлы. Перейдите в каталог, в котором вы храните свой веб-сайт (например, <code>mdn</code>).</li>
- <li>По центру правой панели вы увидеть удалённые файлы. Мы вошли в наш удалённый корень FTP (в данном случае: <code>users/demozilla</code>)</li>
- <li>Вы можете пока игнорировать нижнюю и верхнюю панели. Соответственно, это журнал сообщений, показывающий состояние соединения между вашим компьютером и SFTP-сервером, и журнал в реальном времени каждого взаимодействия между вашим SFTP-клиентом и сервером.</li>
-</ul>
+Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, `http://demozilla.examplehostingprovider.net/`) в вашем браузере:
 
-<h3 id="Загрузка_на_сервер">Загрузка на сервер</h3>
+![Here we go: our website is live!](https://mdn.mozillademos.org/files/9627/here-we-go.png)
 
-<p>Наш пример инструкций для хостинга указывает нам следующее: "Чтобы опубликовать в Интернете, поместите свои файлы в каталог: <code>Public/htdocs</code>." Вам нужно перейти в указанный каталог на правой панели. Этот каталог фактически является корнем вашего веб-сайта, где находятся ваши <code>index.html</code> , откуда ваши файл и другие активы будут отправлены.</p>
+И вуаля! Наш сайт работает!
 
-<p>После того, как вы нашли правильный удалённый каталог для размещения файлов, чтобы загрузить файлы на сервер, вам необходимо переместить их с левой панели на правую.</p>
+## Rsync
 
-<h3 id="Как_узнать_что_они_online">Как узнать, что они online?</h3>
+{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.
 
-<p>Пока все хорошо, но действительно ли файлы в сети? Вы можете перепроверить, перейдя на ваш сайт (например, <code>http://demozilla.examplehostingprovider.net/</code>) в вашем браузере:</p>
+It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:
 
-<p><img alt="Here we go: our website is live!" src="https://mdn.mozillademos.org/files/9627/here-we-go.png" style="border-style: solid; border-width: 1px; display: block; height: 442px; margin: 0 auto; width: 400px;"></p>
+```bash
+rsync [-options] SOURCE user@x.x.x.x:DESTINATION
+```
 
-<p>И вуаля! Наш сайт работает!</p>
+- `-options` is a dash followed by a one or more letters, for example `-v` for verbose error messages, and `-b` to make backups. You can see the full list at the [rsync man page](https://linux.die.net/man/1/rsync) (search for "Options summary").
+- `SOURCE` is the path to the local file or directory that you want to copy files over from.
+- `user@` is the credentials of the user on the remote server you want to copy files over to.
+- `x.x.x.x` is the IP address of the remote server.
+- `DESTINATION` is the path to the location you want to copy your directory or files to on the remote server.
 
-<h2 id="Rsync">Rsync</h2>
+You'd need to get such details from your hosting provider.
 
-<p>{{Glossary("Rsync")}} is a local-to-remote file synchronizing tool, which is generally available on most Unix-based systems (like macOS and Linux), but Windows versions exist too.</p>
+For more information and further eamples, see [How to Use Rsync to Copy/Sync Files Between Servers](https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/).
 
-<p>It is seen as a more advanced tool than SFTP, beause by default it is used on the command line. A basic command looks like so:</p>
+Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the `-e` option. For example:
 
-<pre class="brush: bash">rsync [-options] SOURCE user@x.x.x.x:DESTINATION</pre>
+```bash
+rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION
+```
 
-<ul>
- <li><code>-options</code> is a dash followed by a one or more letters, for example <code>-v</code> for verbose error messages, and <code>-b</code> to make backups. You can see the full list at the <a href="https://linux.die.net/man/1/rsync">rsync man page</a> (search for "Options summary").</li>
- <li><code>SOURCE</code> is the path to the local file or directory that you want to copy files over from.</li>
- <li><code>user@</code> is the credentials of the user on the remote server you want to copy files over to.</li>
- <li><code>x.x.x.x</code> is the IP address of the remote server.</li>
- <li><code>DESTINATION</code> is the path to the location you want to copy your directory or files to on the remote server.</li>
-</ul>
+You can find more details of what is needed at [How To Copy Files With Rsync Over SSH](https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh).
 
-<p>You'd need to get such details from your hosting provider.</p>
+### Rsync GUI tools
 
-<p>For more information and further eamples, see <a href="https://www.atlantic.net/hipaa-compliant-cloud-hosting-services/how-to-use-rsync-copy-sync-files-servers/">How to Use Rsync to Copy/Sync Files Between Servers</a>.</p>
+As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. [Acrosync](https://acrosync.com/mac.html) is one such tool, and it is available for Windows and macOS.
 
-<p>Of course, it is a good idea to use a secure connection, like with FTP. In the case of Rsync, you specify SSH details to make the connection over SSH, using the <code>-e</code> option. For example:</p>
+Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.
 
-<pre class="brush: bash">rsync [-options] -e "ssh [SSH DETAILS GO HERE]" SOURCE user@x.x.x.x:DESTINATION</pre>
+## GitHub
 
-<p>You can find more details of what is needed at <a href="https://www.digitalocean.com/community/tutorials/how-to-copy-files-with-rsync-over-ssh">How To Copy Files With Rsync Over SSH</a>.</p>
+GitHub allows you to publish websites via [GitHub pages](https://pages.github.com/) (gh-pages).
 
-<h3 id="Rsync_GUI_tools">Rsync GUI tools</h3>
+We've covered the basics of using this in the [Publishing your website](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website) article from our [Getting started with the Web](/en-US/Learn/Getting_started_with_the_web) guide, so we aren't going to repeat it all here.
 
-<p>As with other command line tools, GUI tools also exist for Rsync, for those who are not as comfortable with using the command line. <a href="https://acrosync.com/mac.html">Acrosync</a> is one such tool, and it is available for Windows and macOS.</p>
+However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See [Using a custom domain with GitHub Pages](https://help.github.com/articles/using-a-custom-domain-with-github-pages/) for a detailed guide.
 
-<p>Again, you would have to get the connection credentials from your hosting provider, but this way you'd have a GUI to enter them in.</p>
+## Other methods to upload files
 
-<h2 id="GitHub">GitHub</h2>
+The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:
 
-<p>GitHub allows you to publish websites via <a href="https://pages.github.com/">GitHub pages</a> (gh-pages).</p>
-
-<p>We've covered the basics of using this in the <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">Publishing your website</a> article from our <a href="/en-US/Learn/Getting_started_with_the_web">Getting started with the Web</a> guide, so we aren't going to repeat it all here.</p>
-
-<p>However, it is worth knowing that you can also host a website on GitHub, but use a custom domain with it. See <a href="https://help.github.com/articles/using-a-custom-domain-with-github-pages/">Using a custom domain with GitHub Pages</a> for a detailed guide.</p>
-
-<h2 id="Other_methods_to_upload_files">Other methods to upload files</h2>
-
-<p>The FTP protocol is one well-known method for publishing a website, but not the only one. Here are a few other possibilities:</p>
-
-<ul>
- <li><strong>Web interfaces</strong>. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.</li>
- <li><strong>{{Glossary("WebDAV")}}</strong>. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.</li>
-</ul>
+- **Web interfaces**. An HTML interface acting as front-end for a remote file upload service. Provided by your hosting service.
+- **{{Glossary("WebDAV")}}**. An extension of the {{Glossary("HTTP")}} protocol to allow more advanced file management.
diff --git a/files/ru/learn/common_questions/using_github_pages/index.md b/files/ru/learn/common_questions/using_github_pages/index.md
index 24dc63e9a46502..d7b439e562bcbe 100644
--- a/files/ru/learn/common_questions/using_github_pages/index.md
+++ b/files/ru/learn/common_questions/using_github_pages/index.md
@@ -1,7 +1,6 @@
 ---
 title: Как использовать GitHub Pages?
 slug: Learn/Common_questions/Using_Github_pages
-translation_of: Learn/Common_questions/Using_Github_pages
 tags:
   - Beginner
   - GitHub
@@ -10,95 +9,98 @@ tags:
   - gh-pages
   - git
   - publish
+translation_of: Learn/Common_questions/Using_Github_pages
 ---
-<p class="summary"><a href="https://github.com/">GitHub</a> — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения <strong>в системе управления версиями</strong> <a href="http://git-scm.com/">Git</a>. После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.</p>
+[GitHub](https://github.com/) — это сайт «социальной разработки». Он позволяет загружать репозитории кода для хранения **в системе управления версиями** [Git](http://git-scm.com/). После загрузки вы можете сотрудничать с другими участниками для работы над общим проектом, а ещё это система с открытым исходным кодом по умолчанию: любой человек в мире может найти ваш код на GitHub, использовать его, учиться по нему и улучшать его. Вы тоже можете взаимодействовать с кодом других людей! В этой статье представлено базовое руководство по публикации контента с использованием функции gh-pages Github.
+
+## Публикация контента
+
+GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная [система управления версиями](http://git-scm.com/book/ru/v2/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%9E-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9) — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция [GitHub Pages](https://pages.github.com/), которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.
+
+### Базовая установка Github
+
+1.  Прежде всего, [установите Git](https://git-scm.com/downloads) на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.
+2.  Затем [зарегистрируйтесь на GitHub](https://github.com/). Это просто.
+3.  После того, как вы зарегистрировались, войдите в свою учётную запись на [github.com](https://github.com) с помощью своих имени пользователя и пароля.
+
+### Подготовка кода для загрузки
+
+В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем `index.html`.
+
+Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:
 
-<h2 id="Публикация_контента">Публикация контента</h2>
+1.  Направьте командную строку в вашу папку `test-site` (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду `cd` (т.е. «\_c_hange \_d_irectory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке `test-site` на рабочем столе:
 
-<p>GitHub — очень важное и полезное сообщество для участия, а Git/GitHub — очень популярная <a href="http://git-scm.com/book/ru/v2/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5-%D0%9E-%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B5-%D0%BA%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8F-%D0%B2%D0%B5%D1%80%D1%81%D0%B8%D0%B9">система управления версиями</a> — большинство технологических компаний теперь использует её в своём рабочем процессе. У GitHub есть очень полезная функция <a href="https://pages.github.com/">GitHub Pages</a>, которая позволяет публиковать живую демонстрацию кода в виде сайта в Интернете.</p>
+    ```bash
+    cd Desktop/test-site
+    ```
 
-<h3 id="Базовая_установка_Github">Базовая установка Github</h3>
+2.  Когда командная строка указывает внутрь вашей папки веб-сайта, введите следующую команду, которая сообщает инструменту `git`, что папку нужно превратить в репозиторий git:
 
-<ol>
- <li>Прежде всего, <a href="https://git-scm.com/downloads">установите Git</a> на свой компьютер. Это базовое программное обеспечение для управления версиями, поверх которого работает GitHub.</li>
- <li>Затем <a href="https://github.com/">зарегистрируйтесь на GitHub</a>. Это просто.</li>
- <li>После того, как вы зарегистрировались, войдите в свою учётную запись на <a href="https://github.com">github.com</a> с помощью своих имени пользователя и пароля.</li>
-</ol>
+    ```bash
+    git init
+    ```
 
-<h3 id="Подготовка_кода_для_загрузки">Подготовка кода для загрузки</h3>
+#### Дополнительно об интерфейсах командной строки
 
-<p>В репозитории на Github вы можете хранить любой код, который вам нравится, но для полноценного использования функции GitHub Pages ваш код должен быть структурирован как типичный веб-сайт, то есть, основной точкой входа должен быть HTML-файл с именем <code>index.html</code>.</p>
+Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:
 
-<p>Прежде чем двигаться дальше, вам необходимо инициализировать вашу папку (директорию) с кодом как репозиторий Git. Как это сделать:</p>
+![](https://mdn.mozillademos.org/files/9483/command-line.png)
 
-<ol>
- <li>Направьте командную строку в вашу папку <code>test-site</code> (или папку с любым другим названием, содержащую ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «<em>c</em>hange <em>d</em>irectory» — «поменяй директорию»). Вот что вы бы набрали, если бы разместили свой сайт в папке <code>test-site</code> на рабочем столе:
+> **Примечание:** вы также можете использовать [графический пользовательский интерфейс Git](https://git-scm.com/downloads/guis) для выполнения тех же задач, если вам неудобно работать с командной строкой.
 
-  <pre class="brush: bash">cd Desktop/test-site</pre>
- </li>
- <li>Когда командная строка указывает внутрь вашей папки веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, что папку нужно превратить в репозиторий git:
-  <pre class="brush: bash">git init</pre>
- </li>
-</ol>
+Каждая операционная система поставляется с инструментом командной строки:
 
-<h4 id="Дополнительно_об_интерфейсах_командной_строки">Дополнительно об интерфейсах командной строки</h4>
+- **Windows**: **Командную строку** (**Command Prompt**) можно вызвать, нажав клавишу Windows, набрав _Command Prompt_ и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
+- **OS X**: **Терминал** (**Terminal**) можно найти в _Applications > Utilities_.
+- **Linux**: Обычно терминал можно вызвать с помощью _Ctrl + Alt + T_. Если это не сработает, найдите **Terminal** в панели приложений или меню.
 
-<p>Лучший способ загрузить код в Github — использовать командную строку. Это окно, в котором вы вводите команды, чтобы делать такие вещи, как создавать файлы и запускать программы, вместо того чтобы кликать внутри пользовательского интерфейса. Оно будет выглядеть примерно так:</p>
+Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+### Создание репозитория для вашего кода
 
-<div class="note">
-<p><strong>Примечание</strong>: вы также можете использовать <a href="https://git-scm.com/downloads/guis">графический пользовательский интерфейс Git</a> для выполнения тех же задач, если вам неудобно работать с командной строкой.</p>
-</div>
+1.  Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (_New Repository_).
+2.  На этой странице в поле «Имя репозитория» (_Repository name_) введите имя для своего репозитория, например _my-repository_.
+3.  Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:
+    ![](https://mdn.mozillademos.org/files/12143/create-new-repo.png)
+4.  Нажмите «Создать репозиторий» (_Create repository_); откроется следующая страница:
+    ![](https://mdn.mozillademos.org/files/12141/github-repo.png)
 
-<p>Каждая операционная система поставляется с инструментом командной строки:</p>
+### Загрузка файлов на GitHub
 
-<ul>
- <li><strong>Windows</strong>: <strong>Командную строку</strong> (<strong>Command Prompt</strong>) можно вызвать, нажав клавишу Windows, набрав <em>Command Prompt</em> и выбрав её из появившегося списка. Обратите внимание, что в Windows свои собственные условные обозначения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.</li>
- <li><strong>OS X</strong>: <strong>Терминал</strong> (<strong>Terminal</strong>) можно найти в <em>Applications &gt; Utilities</em>.</li>
- <li><strong>Linux</strong>: Обычно терминал можно вызвать с помощью <em>Ctrl + Alt + T</em>. Если это не сработает, найдите <strong>Terminal</strong> в панели приложений или меню.</li>
-</ul>
+1.  На текущей странице вас интересует раздел _…or push an existing repository from the command line_ («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
 
-<p>Сначала это может показаться немного пугающим, но не волнуйтесь — вы быстро разберётесь в основах. Вы говорите компьютеру что-то сделать в терминале, введя команду и нажав Enter, как показано выше.</p>
+    ```
+    git remote add origin https://github.com/chrisdavidmills/my-repository.git
+    ```
 
-<h3 id="Создание_репозитория_для_вашего_кода">Создание репозитория для вашего кода</h3>
+2.  Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
 
-<ol>
- <li>Затем вам нужно создать новый репозиторий для ваших файлов. Нажмите «Плюс» (+) в правом верхнем углу главной страницы GitHub и выберите «Новый репозиторий» (<em>New Repository</em>).</li>
- <li>На этой странице в поле «Имя репозитория» (<em>Repository name</em>) введите имя для своего репозитория, например <em>my-repository</em>.</li>
- <li>Также добавьте описание, чтобы уточнить, что будет содержать ваш репозиторий. Ваш экран должен выглядеть так:<br>
-  <img alt="" src="https://mdn.mozillademos.org/files/12143/create-new-repo.png" style="display: block; height: 548px; margin: 0px auto; width: 800px;"></li>
- <li>Нажмите «Создать репозиторий» (<em>Create repository</em>); откроется следующая страница:<br>
-  <img alt="" src="https://mdn.mozillademos.org/files/12141/github-repo.png" style="display: block; height: 520px; margin: 0px auto; width: 800px;"></li>
-</ol>
+    ```bash
+    git add --all
+    git commit -m 'adding my files to my repository'
+    ```
 
-<h3 id="Загрузка_файлов_на_GitHub">Загрузка файлов на GitHub</h3>
+3.  Наконец, загрузите код на GitHub, для чего вернитесь к текущей веб-странице GitHub и введите в терминал вторую из двух команд, которые мы увидели в секции _…or push an existing repository from the command line_:
 
-<ol>
- <li>На текущей странице вас интересует раздел <em>…or push an existing repository from the command line</em> («...или загрузите существующий репозиторий с помощью командной строки»). В этом разделе вы должны увидеть две строки кода. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
+    ```bash
+    git push -u origin main
+    ```
 
-  <pre>git remote add origin https://github.com/chrisdavidmills/my-repository.git</pre>
- </li>
- <li>Затем введите следующие две команды, нажимая Enter после каждой из них. Они готовят код для загрузки в GitHub и просят Git управлять этими файлами.
-  <pre class="brush: bash">git add --all
-git commit -m 'adding my files to my repository'</pre>
- </li>
- <li>Наконец, загрузите код на GitHub, для чего вернитесь к текущей веб-странице GitHub и введите в терминал вторую из двух команд, которые мы увидели в секции <em>…or push an existing repository from the command line</em>:
-  <pre class="brush: bash">git push -u origin main</pre>
- </li>
- <li>Теперь вам нужно включить функционал GitHub Pages для своего репозитория. Чтобы сделать это, зайдите на страницу своего репозитория и выберите «Настройки» (<em>Settings</em>), затем выберите <em>Pages</em> на панели слева. В разделе <em>Source</em> выберите ветку main. Страница должна обновиться.</li>
- <li>Перейдите в раздел GitHub Pages снова. Вы должны увидеть надпись «Ваш сайт готов к публикации на https://xxxxxx» («Your site is ready to be published at https://xxxxxx»).</li>
- <li>Если вы кликните на ссылку, вам должна открыться страница с живой демонстрацией вашего примера, при условии, что домашняя страница называется <code>index.html</code> — по умолчанию ссылка ведет именно на неё. Если точка входа на ваш сайт называется как-то иначе, например <code>myPage.html</code>, то чтобы увидеть её, вам нужно открыть <code>https://xxxxxx/myPage.html</code>.</li>
-</ol>
+4.  Теперь вам нужно включить функционал GitHub Pages для своего репозитория. Чтобы сделать это, зайдите на страницу своего репозитория и выберите «Настройки» (_Settings_), затем выберите _Pages_ на панели слева. В разделе _Source_ выберите ветку main. Страница должна обновиться.
+5.  Перейдите в раздел GitHub Pages снова. Вы должны увидеть надпись «Ваш сайт готов к публикации на https\://xxxxxx» («Your site is ready to be published at https\://xxxxxx»).
+6.  Если вы кликните на ссылку, вам должна открыться страница с живой демонстрацией вашего примера, при условии, что домашняя страница называется `index.html` — по умолчанию ссылка ведет именно на неё. Если точка входа на ваш сайт называется как-то иначе, например `myPage.html`, то чтобы увидеть её, вам нужно открыть `https://xxxxxx/myPage.html`.
 
-<h3 id="Больше_информации_о_GitHub">Больше информации о GitHub</h3>
+### Больше информации о GitHub
 
-<p>Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:</p>
+Если вы хотите поменять что-то на своем тестовом сайте и загрузить результат на GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам потребуется ввести следующие команды (нажимая Enter после каждой), чтобы загрузить их на GitHub:
 
-<pre>git add --all
+```
+git add --all
 git commit -m 'another commit'
-git push</pre>
+git push
+```
 
-<p>Вы можете написать более подходящее сообщение вместо <em>another commit</em>, чтобы уточнить, что именно вы только что изменили.</p>
+Вы можете написать более подходящее сообщение вместо _another commit_, чтобы уточнить, что именно вы только что изменили.
 
-<p>Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи <a href="/ru/docs/Learn/Tools_and_testing/GitHub">Git и GitHub</a>.</p>
+Мы едва коснулись Git. Чтобы узнать больше, начните с нашей статьи [Git и GitHub](/ru/docs/Learn/Tools_and_testing/GitHub).
diff --git a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.md b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.md
index 59a0e8237afd9c..c7c78fc04a5b55 100644
--- a/files/ru/learn/common_questions/what_are_browser_developer_tools/index.md
+++ b/files/ru/learn/common_questions/what_are_browser_developer_tools/index.md
@@ -15,159 +15,134 @@ tags:
 translation_of: Learn/Common_questions/What_are_browser_developer_tools
 original_slug: Learn/Discover_browser_developer_tools
 ---
-<div>{{IncludeSubnav("/ru-RU/Learn")}}</div>
+{{IncludeSubnav("/ru-RU/Learn")}}
 
-<p>{{Previous("Learn/Getting_started_with_the_web")}}</p>
+{{Previous("Learn/Getting_started_with_the_web")}}
 
-<div class="summary">
-<p>Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере.</p>
-</div>
+Каждый современный интернет-браузер оснащён мощными инструментами для веб-разработчика. Эти инструменты позволяют делать различные вещи, от изучения загруженных в настоящий момент HTML, CSS и JavaScript до отображения в каких ресурсах нуждается страница и как долго она будет загружаться. Эта статья научит вас использовать базовые функции инструментов разработчика в вашем браузере.
 
-<div class="note">
-<p><strong>Примечание</strong>: Прежде чем начать заниматься с примерами, откройте <a href="http://mdn.github.io/beginner-html-site-scripted/">пример сайта для начинающих</a>, с которым мы работали на <a href="/en-US/Learn/Getting_started_with_the_web">предыдущих занятиях</a>. Вам следует держать его открытым, чтобы выполнить описанные ниже действия.</p>
-</div>
+> **Примечание:** Прежде чем начать заниматься с примерами, откройте [пример сайта для начинающих](http://mdn.github.io/beginner-html-site-scripted/), с которым мы работали на [предыдущих занятиях](/en-US/Learn/Getting_started_with_the_web). Вам следует держать его открытым, чтобы выполнить описанные ниже действия.
 
-<h2 id="Как_открыть_инструменты_веб-разработчика_в_Вашем_браузере">Как открыть инструменты веб-разработчика в вашем браузере?</h2>
+## Как открыть инструменты веб-разработчика в вашем браузере?
 
-<p>Панель разработчика находится в нижней части вашего браузера :</p>
+Панель разработчика находится в нижней части вашего браузера :
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png" style="display: block; height: 625px; margin: 0px auto; width: 775px;"></p>
+![](https://mdn.mozillademos.org/files/9561/Screenshot%20from%202014-11-25%2012:32:57.png)
 
-<p>Как её отобразить? Есть три варианта:</p>
+Как её отобразить? Есть три варианта:
 
-<ul>
- <li><em><strong>Клавиатура.</strong></em> <em>Ctrl + Shift + I</em>, кроме
+- _**Клавиатура.**_ _Ctrl + Shift + I_, кроме
 
-  <ul>
-   <li><strong>Internet Explorer. </strong><em>(клавиша - F12) </em></li>
-   <li><strong>Mac OS X. </strong><em>(сочетание клавиш - ⌘ + ⌥ + I )</em></li>
-  </ul>
- </li>
- <li><em><strong>Панель Меню. </strong></em>
-  <ul>
-   <li><strong>Firefox. </strong>Открыть меню <img alt="" src="https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png" style="height: 16px; width: 16px;"> <em>➤ <img alt="" src="https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png" style="height: 40px; width: 45px;"></em><em>➤ Инструменты разработки, или</em> <em>Инструменты ➤</em><em> Веб-разработка ➤ Инструменты разработки</em></li>
-   <li><strong>Chrome.</strong> <em>Дополнительные инструменты ➤ Инструменты разработчика</em></li>
-   <li><strong>Safari.</strong> <em>Разработка ➤ Показать Web Inspector .</em> Если вы не видите меню "Разработка", зайдите в  <em>Safari ➤ Настройки ➤ Дополнительно, </em> и проверьте стоит ли галочка <em>напротив "Показать меню разработки"</em>. </li>
-   <li><strong>Opera</strong>. <em>Меню </em> <em>➤ </em> <em>Разработка ➤ Инструменты разработчика. </em> Если вы не видите меню "Разработка",  включите его отображение, перейдя в Меню <em>➤ </em> Другие инструменты <em>➤ </em>Показать меню разработчика.</li>
-  </ul>
- </li>
- <li><strong><em>Контекстное меню.</em></strong> Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт <em>Исследовать Элемент</em>. (<em>дополнение: </em>этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)</li>
-</ul>
+  - **Internet Explorer.** _(клавиша - F12)_
+  - **Mac OS X.** _(сочетание клавиш - ⌘ + ⌥ + I )_
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9605/inspect-element-option.png" style="display: block; height: 264px; margin: 0px auto; width: 350px;"></p>
+- _**Панель Меню.**_
 
-<h2 id="Inspector_DOM_обозреватель_и_CSS_редактор">Inspector: DOM обозреватель и CSS редактор</h2>
+  - **Firefox.** Открыть меню ![](https://mdn.mozillademos.org/files/9637/2014-01-10-13-08-08-f52b8c.png) _➤ ![](https://mdn.mozillademos.org/files/9639/Screenshot%20from%202014-11-26%2014:24:56.png)\_\_➤ Инструменты разработки, или_ _Инструменты ➤_ _Веб-разработка ➤ Инструменты разработки_
+  - **Chrome.** _Дополнительные инструменты ➤ Инструменты разработчика_
+  - **Safari.** _Разработка ➤ Показать Web Inspector ._ Если вы не видите меню "Разработка", зайдите в _Safari ➤ Настройки ➤ Дополнительно,_ и проверьте стоит ли галочка _напротив "Показать меню разработки"_.
+  - **Opera**. _Меню_ _➤_ _Разработка ➤ Инструменты разработчика._ Если вы не видите меню "Разработка", включите его отображение, перейдя в Меню _➤_ Другие инструменты _➤_ Показать меню разработчика.
 
-<p>По умолчанию, в панели открывается вкладка<em> </em>Inspector, вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.</p>
+- **_Контекстное меню._** Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт _Исследовать Элемент_. (_дополнение:_ этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9607/inspector.png" style="display: block; height: 727px; margin: 0px auto; width: 800px;"></p>
+![](https://mdn.mozillademos.org/files/9605/inspect-element-option.png)
 
-<p>Если вы н<em>е видите</em> Inspector,</p>
+## Inspector: DOM обозреватель и CSS редактор
 
-<ul>
- <li>Нажмите на вкладку <em>Inspector </em>.</li>
- <li>В Internet Explorer, нажмите на <em>DOM Обозреватель, </em>или нажмите Ctrl + 1.</li>
- <li>В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку <em>Стиль,</em> чтобы увидеть CSS.</li>
-</ul>
+По умолчанию, в панели открывается вкладка\_ \_Inspector, вы можете увидеть это на скриншоте снизу. Этот инструмент позволяет вам видеть, как HTML-код выглядит на странице в настоящем времени, также как CSS, который применён к каждому элементу на странице. Это также позволяет вам в реальном времени редактировать как HTML, так и CSS. Внесённые изменения можно увидеть непосредственно в окне браузера.
 
-<h3 id="Обзор_DOM_inspector">Обзор DOM inspector</h3>
+![](https://mdn.mozillademos.org/files/9607/inspector.png)
 
-<p>Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:</p>
+Если вы н*е видите* Inspector,
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png" style="display: block; height: 236px; margin: 0px auto; width: 200px;"></p>
+- Нажмите на вкладку _Inspector_ .
+- В Internet Explorer, нажмите на _DOM Обозреватель,_ или нажмите Ctrl + 1.
+- В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку _Стиль,_ чтобы увидеть CSS.
 
-<ul>
- <li><strong>Удалить узел</strong> (иногда <em>Удалить элемент</em>). Удаляет текущий элемент.</li>
- <li><strong>Править как HTML</strong> (иногда <em>Добавить атрибут</em>/<em>Править текст</em>). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.</li>
- <li><strong>:hover/:active/:focus</strong>. Заставляет элементы переключить своё состояние на то, к которому применён ваш стиль.</li>
- <li><strong>Копировать/Копировать как HTML</strong>. Копирует текущий выделенный HTML.</li>
-</ul>
+### Обзор DOM inspector
 
-<p>Попробуйте изменить что-нибудь через окно Inspector на вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите <em>Править как HTML </em>из контекстного меню. Вы можете сделать любые изменения, какие захотите, но вы не сможете их сохранить.</p>
+Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:
 
-<h3 id="Обзор_CSS_редактора">Обзор CSS редактора</h3>
+![](https://mdn.mozillademos.org/files/9609/dev-tool-context-menu.png)
 
-<p>По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:</p>
+- **Удалить узел** (иногда _Удалить элемент_). Удаляет текущий элемент.
+- **Править как HTML** (иногда _Добавить атрибут_/_Править текст_). Позволяет редактировать HTML и видеть результат "вживую". Очень полезно для отладки и тестирования.
+- **:hover/:active/:focus**. Заставляет элементы переключить своё состояние на то, к которому применён ваш стиль.
+- **Копировать/Копировать как HTML**. Копирует текущий выделенный HTML.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9631/css-viewer-2.png" style="border: 1px solid black; display: block; height: 218px; margin: 0px auto; width: 326px;"></p>
+Попробуйте изменить что-нибудь через окно Inspector на вашей странице прямо сейчас. Дважды кликните по элементу, или нажмите правой кнопкой мыши и выберите _Править как HTML_ из контекстного меню. Вы можете сделать любые изменения, какие захотите, но вы не сможете их сохранить.
 
-<p>Эти функции особенно удобны:</p>
+### Обзор CSS редактора
 
-<ul>
- <li>Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.</li>
- <li>Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.</li>
- <li>Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.</li>
- <li>Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором вы можете задать новые значения и увидеть, как изменится ваш элемент с новыми значениями.</li>
- <li>Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт вас в окно, где можно редактировать этот CSS и сохранить.</li>
- <li>Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где вы сможете написать совершенно новую декларацию для вашей страницы.</li>
-</ul>
+По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:
 
-<p>Вы должно быть уже заметили другие вкладки в  CSS редакторе:</p>
+![](https://mdn.mozillademos.org/files/9631/css-viewer-2.png)
 
-<ul>
- <li><em>Вычислено</em>: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).</li>
- <li><em>Блоковая модель</em>: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.</li>
- <li><em>Анимации</em>: В Firefox, на вкладке <em>Анимации</em> вы можете увидеть анимации применённые к выделенному элементу.</li>
-</ul>
+Эти функции особенно удобны:
 
-<h3 id="Узнать_больше">Узнать больше</h3>
+- Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
+- Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
+- Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
+- Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором вы можете задать новые значения и увидеть, как изменится ваш элемент с новыми значениями.
+- Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт вас в окно, где можно редактировать этот CSS и сохранить.
+- Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где вы сможете написать совершенно новую декларацию для вашей страницы.
 
-<p>Узнать больше об Inspector в различных браузерах:</p>
+Вы должно быть уже заметили другие вкладки в CSS редакторе:
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Firefox Page inspector</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx">IE DOM Explorer</a></li>
- <li><a href="https://developer.chrome.com/devtools/docs/dom-and-styles">Chrome DOM inspector</a> (Inspector в Opera схож с Inspector в Chrome)</li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1">Safari DOM inspector and style explorer</a></li>
-</ul>
+- _Вычислено_: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
+- _Блоковая модель_: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
+- _Анимации_: В Firefox, на вкладке _Анимации_ вы можете увидеть анимации применённые к выделенному элементу.
 
-<h2 id="Консоль_JavaScript">Консоль JavaScript </h2>
+### Узнать больше
 
-<p>Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите <em>Ctrl + 2</em>.) Откроется окно, как показано ниже:</p>
+Узнать больше об Inspector в различных браузерах:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9541/console.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 821px;"></p>
+- [Firefox Page inspector](/ru/docs/Tools/Page_Inspector)
+- [IE DOM Explorer](http://msdn.microsoft.com/en-us/library/ie/dn255008%28v=vs.85%29.aspx)
+- [Chrome DOM inspector](https://developer.chrome.com/devtools/docs/dom-and-styles) (Inspector в Opera схож с Inspector в Chrome)
+- [Safari DOM inspector and style explorer](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/ResourcesandtheDOM/ResourcesandtheDOM.html#//apple_ref/doc/uid/TP40007874-CH3-SW1)
 
-<p>Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):</p>
+## Консоль JavaScript
 
-<ol>
- <li>
-  <pre class="brush: js">alert('hello!');</pre>
- </li>
- <li>
-  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'purple';</pre>
- </li>
- <li>
-  <pre class="brush: js">var myImage = document.createElement('img');
-myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
-document.querySelector('h1').appendChild(myImage);</pre>
- </li>
-</ol>
+Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите _Ctrl + 2_.) Откроется окно, как показано ниже:
 
-<p>Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.</p>
+![](https://mdn.mozillademos.org/files/9541/console.png)
 
-<ol>
- <li>
-  <pre class="brush: js">alert('hello!);</pre>
- </li>
- <li>
-  <pre class="brush: js">document.cheeseSelector('html').style.backgroundColor = 'purple';</pre>
- </li>
- <li>
-  <pre class="brush: js">var myImage = document.createElement('img');
-myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
-document.querySelector('h1').appendChild(myImage);</pre>
- </li>
-</ol>
+Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):
 
-<p>Вы увидите некоторые ошибки, которые сообщит вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!</p>
+1.  ```js
+    alert('hello!');
+    ```
+2.  ```js
+    document.querySelector('html').style.backgroundColor = 'purple';
+    ```
+3.  ```js
+    var myImage = document.createElement('img');
+    myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+    document.querySelector('h1').appendChild(myImage);
+    ```
 
-<h3 id="Узнать_больше_2">Узнать больше</h3>
+Теперь попробуйте ввести следующую, неправильную версию кода и посмотрите, что из этого получится.
 
-<p>Узнать больше о JavaScript консоли в различных браузерах:</p>
+1.  ```js
+    alert('hello!);
+    ```
+2.  ```js
+    document.cheeseSelector('html').style.backgroundColor = 'purple';
+    ```
+3.  ```js
+    var myImage = document.createElement('img');
+    myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+    document.querySelector('h1').appendChild(myImage);
+    ```
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Firefox Web Console</a></li>
- <li><a href="http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx">IE JavaScript console</a></li>
- <li><a href="https://developer.chrome.com/devtools/docs/console">Chrome JavaScript Console</a> (Inpector в Opera схож с Inspector в Chrome)</li>
- <li><a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1">Safari Console</a></li>
-</ul>
+Вы увидите некоторые ошибки, которые сообщит вам браузер. Зачастую эти ошибки выглядят довольно загадочно, но они должны быть довольно простыми, чтобы можно было выяснить проблему!
+
+### Узнать больше
+
+Узнать больше о JavaScript консоли в различных браузерах:
+
+- [Firefox Web Console](/ru/docs/Tools/Web_Console)
+- [IE JavaScript console](http://msdn.microsoft.com/en-us/library/ie/dn255006%28v=vs.85%29.aspx)
+- [Chrome JavaScript Console](https://developer.chrome.com/devtools/docs/console) (Inpector в Opera схож с Inspector в Chrome)
+- [Safari Console](https://developer.apple.com/library/safari/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/Console/Console.html#//apple_ref/doc/uid/TP40007874-CH6-SW1)
diff --git a/files/ru/learn/common_questions/what_are_hyperlinks/index.md b/files/ru/learn/common_questions/what_are_hyperlinks/index.md
index b76d7cf21d5acd..aa51f81e01464e 100644
--- a/files/ru/learn/common_questions/what_are_hyperlinks/index.md
+++ b/files/ru/learn/common_questions/what_are_hyperlinks/index.md
@@ -8,96 +8,75 @@ tags:
 translation_of: Learn/Common_questions/What_are_hyperlinks
 original_slug: Learn/Understanding_links_on_the_web
 ---
-<div class="summary">
-<p>В данной статье мы узнаем, что такое ссылки и почему они важны.</p>
-</div>
+В данной статье мы узнаем, что такое ссылки и почему они важны.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительно:</th>
-   <td>Вы должны знать <a href="/en-US/Learn/How_the_Internet_works">как работает интернет</a> и иметь представление о <a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить, что такое веб-ссылки и почему они важны.</td>
-  </tr>
- </tbody>
-</table>
+| Предварительно: | Вы должны знать [как работает интернет](/en-US/Learn/How_the_Internet_works) и иметь представление о [разнице между веб-страницей, веб-сайтом, веб-сервером и поисковой системой.](/ru/docs/Learn/page_vs_site_vs_server_vs_search_engine) |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:           | Изучить, что такое веб-ссылки и почему они важны.                                                                                                                                                                                          |
 
-<h2 id="Коротко">Коротко</h2>
+## Коротко
 
-<p>Гиперссылки, в народе ссылки, являются фундаментальной основой Веба. Чтобы объяснить, что такое ссылки, мы должны обратиться к основам Веб-архитектуры. </p>
+Гиперссылки, в народе ссылки, являются фундаментальной основой Веба. Чтобы объяснить, что такое ссылки, мы должны обратиться к основам Веб-архитектуры.
 
-<p>В 1989 году Тим Бернерс-Ли (Tim Berners-Lee), создатель Веба, говорил о трёх китах, на которых стоит Веб:</p>
+В 1989 году Тим Бернерс-Ли (Tim Berners-Lee), создатель Веба, говорил о трёх китах, на которых стоит Веб:
 
-<ol>
- <li>{{Glossary("URL")}}, система адресов, которая отслеживает веб-документы. </li>
- <li>{{Glossary("HTTP")}}, транспортный протокол, помогающий найти документы по заданным URL</li>
- <li>{{Glossary("HTML")}}, формат документа, позволяющий встраивать <em>гиперссылки</em></li>
-</ol>
+1.  {{Glossary("URL")}}, система адресов, которая отслеживает веб-документы.
+2.  {{Glossary("HTTP")}}, транспортный протокол, помогающий найти документы по заданным URL
+3.  {{Glossary("HTML")}}, формат документа, позволяющий встраивать _гиперссылки_
 
-<p>Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении лёгкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим. </p>
+Как вы видите, все в Вебе крутится вокруг документов и способах обеспечения доступа к ним. Первоначальная цель Веба заключалась в предоставлении лёгкого инструмента доступа к текстовым документам, их чтения и навигации по ним. С тех пор Веб эволюционировал в инструмент обеспечения доступа к изображениям, видео и бинарным данным, но все эти улучшения вряд ли были бы возможны без тех самых трёх китов, о которых говорил Тим.
 
-<p>До Веба было весьма сложно получить доступ к документам и перемещаться от одного к другому. Став понятными для пользователя, URL-адреса уже сделали жизнь гораздо проще, но нам довольно сложно было печатать длинный URL каждый раз, когда мы хотели получить документ. Вот тут то гиперссылки и совершили революцию. Ссылка может связать любой текст с URL, так что пользователь может моментально достигнуть цели всего лишь активируя ссылку.</p>
+До Веба было весьма сложно получить доступ к документам и перемещаться от одного к другому. Став понятными для пользователя, URL-адреса уже сделали жизнь гораздо проще, но нам довольно сложно было печатать длинный URL каждый раз, когда мы хотели получить документ. Вот тут то гиперссылки и совершили революцию. Ссылка может связать любой текст с URL, так что пользователь может моментально достигнуть цели всего лишь активируя ссылку.
 
-<p>По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать её, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.</p>
+По умолчанию голубого цвета и подчёркнутые, ссылки выделяются из общего текста. Кликните на ссылку, чтобы активировать её, или, если вы используете клавиатуру, перейдите на ссылку при помощи Tab и нажмите Enter.
 
-<p><img alt="Example of a basic display and effect of a link in a web page" src="https://mdn.mozillademos.org/files/8625/link-1.png" style="height: 492px; width: 477px;"></p>
+![Example of a basic display and effect of a link in a web page](https://mdn.mozillademos.org/files/8625/link-1.png)
 
-<p>Ссылки стали прорывом, который сделал Веб таким полезным и популярным. В остальной части этой статьи мы обсудим различные типы ссылок и их важность в современном Веб-дизайне. </p>
+Ссылки стали прорывом, который сделал Веб таким полезным и популярным. В остальной части этой статьи мы обсудим различные типы ссылок и их важность в современном Веб-дизайне.
 
-<h2 id="Активно_изучаем">Активно изучаем</h2>
+## Активно изучаем
 
-<p><em>В данном разделе нет контента. <a href="/en-US/docs/MDN/Getting_started">Please, consider contributing</a>.</em></p>
+_В данном разделе нет контента. [Please, consider contributing](/ru/docs/MDN/Getting_started)._
 
-<h2 id="Глубокое_погружение">Глубокое погружение</h2>
+## Глубокое погружение
 
-<p>Как мы определили, ссылка — <strong style="background-color: #ffffff; color: #333333; display: inline !important; float: none; font-family: Arial,Helvetica,sans-serif; font-size: 28px; font-style: normal; font-variant: normal; font-weight: 700; letter-spacing: normal; line-height: 1.2; text-align: left; text-decoration: none; text-indent: 0px; text-transform: none; white-space: normal;"> </strong>это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть: </p>
+Как мы определили, ссылка — \*\*\*\*это строка, которая связана с URL. Мы используем ссылки, чтобы с лёгкостью перепрыгивать с одного документа на другой. Здесь существуют некоторые нюансы, которые важно рассмотреть:
 
-<h3 id="Типы_ссылок">Типы ссылок</h3>
+### Типы ссылок
 
-<dl>
- <dt>Внутренняя ссылка</dt>
- <dd>Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).</dd>
- <dt>Внешняя ссылка</dt>
- <dd>Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб —  это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте. </dd>
- <dt>Входящие ссылки</dt>
- <dd>Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.</dd>
-</dl>
+- Внутренняя ссылка
+  - : Ссылка между двумя веб-страницами, принадлежащими к одному веб-сайту. Без внутренних ссылок нет такого понятия как веб-сайт (конечно, если это не одностраничный сайт).
+- Внешняя ссылка
+  - : Ссылка с вашей веб-страницы на чью-либо другую веб-страницу. Без внешних ссылок не будет Веба, так как Веб — это сеть веб-страниц. Используйте внешние ссылки для того, чтобы предоставить информацию помимо той, что вы поддерживаете на вашем сайте.
+- Входящие ссылки
+  - : Ссылка с чьей-либо веб-страницы на ваш сайт. Это внешняя ссылка наоборот. Имейте в виду, что вам не обязательно отвечать тем же кому-то, кто ссылается на ваш сайт.
 
-<p>Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаёте веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно. </p>
+Когда вы создаёте веб-сайт, фокусируйтесь на внутренних ссылках, так как они делают ваш сайт возможным и удобным для использования. Найдите нужный баланс между большим и недостаточным количеством ссылок. Мы поговорим о дизайне навигации сайта в другой статье, но в качестве правила, каждый раз когда вы создаёте веб-страницу, убедитесь, что хотя бы одна из ваших страниц ссылается на неё. С другой стороны, если на вашем сайте более чем десять страниц, добиваться того, чтобы каждая страница ссылалась друг на друга, может быть весьма контрпродуктивно.
 
-<p>Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)</p>
+Когда вы начинаете, вам не имеет смысла сильно волноваться о наличии внешних и входящих ссылок, но они важны, если вы хотите, чтобы поисковые системы находили ваш сайт. (См. более детальное объяснение ниже.)
 
-<h3 id="Якоря_Anchors">Якоря (Anchors)</h3>
+### Якоря (Anchors)
 
-<p>В большинстве случаев ссылки связывают две страницы вместе. <strong>Якоря </strong>(<strong>Anchors) </strong>же связывают две области одного документа. Когда вы следуете по ссылке указывающей на якорь, ваш браузер переходит с одной части текущего документа на другую, вместо загрузки нового документа. Хотя вы создаёте и используете якоря точно так же, как любые другие ссылки. </p>
+В большинстве случаев ссылки связывают две страницы вместе. **Якоря** (**Anchors)** же связывают две области одного документа. Когда вы следуете по ссылке указывающей на якорь, ваш браузер переходит с одной части текущего документа на другую, вместо загрузки нового документа. Хотя вы создаёте и используете якоря точно так же, как любые другие ссылки.
 
-<p><img alt="Example of a basic display and effect of an anchor in a web page" src="https://mdn.mozillademos.org/files/8627/link-2.png" style="height: 492px; width: 477px;"></p>
+![Example of a basic display and effect of an anchor in a web page](https://mdn.mozillademos.org/files/8627/link-2.png)
 
-<h3 id="Ссылки_и_поисковые_системы">Ссылки и поисковые системы</h3>
+### Ссылки и поисковые системы
 
-<p>Ссылки важны как для ваших пользователей, так и для поисковых систем. Каждый раз когда поисковые движки проверяют страницу, они индексируют сайт следуя по доступным ссылкам. Поисковые движки не только следуют по ссылкам, чтобы обнаружить разные страницы сайта, но также используют текст ссылки, чтобы определить поисковый запрос, который позволит найти страницу. </p>
+Ссылки важны как для ваших пользователей, так и для поисковых систем. Каждый раз когда поисковые движки проверяют страницу, они индексируют сайт следуя по доступным ссылкам. Поисковые движки не только следуют по ссылкам, чтобы обнаружить разные страницы сайта, но также используют текст ссылки, чтобы определить поисковый запрос, который позволит найти страницу.
 
-<p>Итак, ссылки влияют на готовность поисковых систем сослаться на ваш сайт. Проблема в том, что активность поисковых систем сложно оценить. Компании обычно хотят, чтобы их сайты выводились первыми в результатах поиска, и многочисленные поиски решений дают нам понять, по крайней мере, следующее:</p>
+Итак, ссылки влияют на готовность поисковых систем сослаться на ваш сайт. Проблема в том, что активность поисковых систем сложно оценить. Компании обычно хотят, чтобы их сайты выводились первыми в результатах поиска, и многочисленные поиски решений дают нам понять, по крайней мере, следующее:
 
-<ul>
- <li>Текст ссылки влияет на то, какой поисковый запрос выдаст URL.</li>
- <li>Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска. </li>
- <li><em>Внешние ссылки </em>влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, —  неизвестно. </li>
-</ul>
+- Текст ссылки влияет на то, какой поисковый запрос выдаст URL.
+- Чем больше существует входящих ссылок на сайт, тем выше он будет в результатах поиска.
+- _Внешние ссылки_ влияют на оценку и сайта источника, и сайта, на который они ссылаются, но в какой степени, — неизвестно.
 
-<p><a href="http://en.wikipedia.org/wiki/Search_engine_optimization">SEO</a> (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.</p>
+[SEO](http://en.wikipedia.org/wiki/Search_engine_optimization) (поисковая оптимизация) - это комплекс мер для "поднятия" позиции сайтов в поисковой выдаче. Оптимизация использования ссылок на сайте является одной из ключевых в SEO.
 
+## Следующие шаги
 
+Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками!
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
-
-<p>Так что теперь, конечно, вы захотите создать несколько веб-страниц со ссылками!</p>
-
-<ul>
- <li>Чтобы получить более теоретическое обоснование, узнайте об <a href="/en-US/docs/Learn/Understanding_URLs">URL-адресах и их структуре</a>, поскольку каждая ссылка указывает на URL-адрес.</li>
- <li>Хотите что-нибудь более практичное? В статье <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Создание гиперссылок</a> нашего модуля <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a> подробно объясняется, как реализовывать ссылки.</li>
- <li>Приступите к изучению HTML. Научитесь <a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">создавать HTML-документы и связывать их между собой.</a></li>
-</ul>
+- Чтобы получить более теоретическое обоснование, узнайте об [URL-адресах и их структуре](/ru/docs/Learn/Understanding_URLs), поскольку каждая ссылка указывает на URL-адрес.
+- Хотите что-нибудь более практичное? В статье [Создание гиперссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) нашего модуля [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) подробно объясняется, как реализовывать ссылки.
+- Приступите к изучению HTML. Научитесь [создавать HTML-документы и связывать их между собой.](/ru/docs/Learn/HTML/Write_a_simple_page_in_HTML)
diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.md b/files/ru/learn/common_questions/what_is_a_domain_name/index.md
index 76435372de90a1..f18b0918a51062 100644
--- a/files/ru/learn/common_questions/what_is_a_domain_name/index.md
+++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.md
@@ -10,72 +10,56 @@ tags:
 translation_of: Learn/Common_questions/What_is_a_domain_name
 original_slug: Learn/Understanding_domain_names
 ---
-<div class="summary">
-<p>В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.</p>
-</div>
+В этом материале мы обсудим доменные имена: что это такое, как они формируются и как зарегистрировать домен для себя.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Вы должны знать <a href="/en-US/docs/Learn/How_the_Internet_works">как работает Интернет</a> и понимать устройство <a href="/en-US/Learn/Understanding_URLs">устройство URL</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Вы узнаете, что такое доменные имена, как они работают и почему они важны.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Вы должны знать [как работает Интернет](/ru/docs/Learn/How_the_Internet_works) и понимать устройство [устройство URL](/en-US/Learn/Understanding_URLs). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Вы узнаете, что такое доменные имена, как они работают и почему они важны.                                                                              |
 
-<h2 id="Summary">Summary</h2>
+## Summary
 
-<p>Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.</p>
+Доменные имена - ключевая составляющая инфраструктуры Интернета. Они предоставляют человеко-читаемые адреса веб-серверов, доступных в Интернете.
 
-<p>Каждый компьютер подключён к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., <code>173.194.121.32</code>) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., <code>2027:0da8:8b73:0000:0000:8a2e:0370:1337</code>). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.</p>
+Каждый компьютер подключён к Интернету и может быть доступен через публичный {{Glossary("IP")}}-адрес, который состоит из 32 бит для IPv4 адреса (такие адреса обычно записываются в виде четырёх чисел от 0 до 255, разделённых точками (напр.., `173.194.121.32`) или 128 bit для IPv6 адреса (они обычно записываются в виде 8 групп по 4 шестнадцатеричных чисел, разделённых двоеточиями (напр., `2027:0da8:8b73:0000:0000:8a2e:0370:1337`). Компьютеры могут легко обрабатывать эти адреса , но у живых людей уходит слишком много времени на использование таких адресов. IP-адреса также сложно запоминаются и часто меняются со временем. Для решения этой проблемы в Интернете используются человеко-читаемые адреса, называемые доменными именами.
 
-<h2 id="Активно_изучаем">Активно изучаем</h2>
+## Активно изучаем
 
-<p><em>В данный момент нет обучающего курса . Но вы можете <a href="https://developer.mozilla.org/en-US/docs/MDN/Getting_started">помочь составить его</a>.</em></p>
+_В данный момент нет обучающего курса . Но вы можете [помочь составить его](/ru/docs/MDN/Getting_started)._
 
-<h2 id="Глубокое_погружение">Глубокое погружение</h2>
+## Глубокое погружение
 
-<h3 id="Структура_доменных_имён">Структура доменных имён</h3>
+### Структура доменных имён
 
-<p>Доменное имя имеет простую структуру, состоящую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделённых точками и <strong>читаемых справа налево</strong>:</p>
+Доменное имя имеет простую структуру, состоящую из нескольких частей (частей может быть бесконечное количество, но на практике число уровней обычно невелико), разделённых точками и **читаемых справа налево**:
 
-<p><img alt="Anatomy of the MDN domain name" src="https://mdn.mozillademos.org/files/11229/structure.png" style="height: 76px; width: 252px;"></p>
+![Anatomy of the MDN domain name](https://mdn.mozillademos.org/files/11229/structure.png)
 
-<p>Каждая из этих частей предоставляет специфическую информацию о доменном имени.</p>
+Каждая из этих частей предоставляет специфическую информацию о доменном имени.
 
-<dl>
- <dt>{{Glossary("TLD")}} (Корневой домен).</dt>
- <dd>Корневой домен сообщает наиболее общую информацию. Корневой домен говорит пользователям наиболее общую информацию о службе, доступной по доменному имени. Наиболее общие корневые домены (.com, .org, .net) не требуют от веб-службы соответствия строгим критериям, но некоторые корневые домены имеют и более строгие политики. Например, локальные корневые домены, такие как .us, .fr, или .sh, могут требовать, чтобы услуги по данному адресу предоставлялись на национальном языке или физически размещались на территории страны.</dd>
- <dt>Домены</dt>
- <dd>Домены - это то, что следует за корневыми доменами. Домен может представлять собой что угодно, от одного знака до целого предложения. Домен сразу за корневым доменом также называют <em>"доменом второго уровня"</em>. Доменное имя может включать неограниченное количество доменов, нет никакого ограничения только на 3 домена в составе доменного имени. Например, www.inf.ed.ac.uk - это корректное доменное имя. Тот, кто контролирует "верхнюю" часть доменного имени (например, <a href="https://mozilla.org">mozilla.org</a>), тот может создавать доменные имена более "низких" уровней (часто называемые, "поддоменами") (например, <a href="https://developer.mozilla.org">developer.mozilla.org</a>).</dd>
-</dl>
+- {{Glossary("TLD")}} (Корневой домен).
+  - : Корневой домен сообщает наиболее общую информацию. Корневой домен говорит пользователям наиболее общую информацию о службе, доступной по доменному имени. Наиболее общие корневые домены (.com, .org, .net) не требуют от веб-службы соответствия строгим критериям, но некоторые корневые домены имеют и более строгие политики. Например, локальные корневые домены, такие как .us, .fr, или .sh, могут требовать, чтобы услуги по данному адресу предоставлялись на национальном языке или физически размещались на территории страны.
+- Домены
+  - : Домены - это то, что следует за корневыми доменами. Домен может представлять собой что угодно, от одного знака до целого предложения. Домен сразу за корневым доменом также называют _"доменом второго уровня"_. Доменное имя может включать неограниченное количество доменов, нет никакого ограничения только на 3 домена в составе доменного имени. Например, www\.inf.ed.ac.uk - это корректное доменное имя. Тот, кто контролирует "верхнюю" часть доменного имени (например, [mozilla.org](https://mozilla.org)), тот может создавать доменные имена более "низких" уровней (часто называемые, "поддоменами") (например, [developer.mozilla.org](https://developer.mozilla.org)).
 
-<h3 id="Покупка_доменного_имени">Покупка доменного имени</h3>
+### Покупка доменного имени
 
-<h4 id="Кто_владеет_доменным_именем">Кто владеет доменным именем?</h4>
+#### Кто владеет доменным именем?
 
-<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не будете владеть доменным именем.</p>
+Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не будете владеть доменным именем.
 
-<p>Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.</p>
+Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.
 
-<div class="note">
-<p><strong>Примечание: </strong>Для некоторых доменных имён регистратор может отсутствовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.</p>
-</div>
+> **Примечание:**Для некоторых доменных имён регистратор может отсутствовать, реестр может не вестись. Например, все домены в зоне .fire используются компанией Amazon только в собственных нуждах.
 
-<h4 id="Как_найти_свободное_доменное_имя">Как найти свободное доменное имя</h4>
+#### Как найти свободное доменное имя
 
-<p>Для того, чтобы определить, свободно или нет желаемое доменное имя, сделайте следующее,</p>
+Для того, чтобы определить, свободно или нет желаемое доменное имя, сделайте следующее,
 
-<ul>
- <li>Перейдите на веб-сайта регистратора доменных имён. Большинство из них предоставляют сервис "whois", который подскажет вам, свободно ли желаемое доменное имя.</li>
- <li>Также мы можете использовать командную строку, введя в ней команду whois и получив ответ, например, для <code>mozilla.org</code>:</li>
-</ul>
+- Перейдите на веб-сайта регистратора доменных имён. Большинство из них предоставляют сервис "whois", который подскажет вам, свободно ли желаемое доменное имя.
+- Также мы можете использовать командную строку, введя в ней команду whois и получив ответ, например, для `mozilla.org`:
 
-<pre>$ whois mozilla.org
+```
+$ whois mozilla.org
 Domain Name:MOZILLA.ORG
 Domain ID: D1409563-LROR
 Creation Date: 1998-01-24T05:00:00Z
@@ -97,60 +81,51 @@ Registrant State/Province:CA
 Registrant Postal Code:94041
 Registrant Country:US
 Registrant Phone:+1.6509030800
-</pre>
+```
 
-<p>Как вы видите, нельзя зарегистрировать доменное имя <code>mozilla.org</code> потому что Mozilla Foundation уже зарегистрировало его.</p>
+Как вы видите, нельзя зарегистрировать доменное имя `mozilla.org` потому что Mozilla Foundation уже зарегистрировало его.
 
-<p>Теперь давайте посмотрим, можно ли зарегистрировать доменное имя <code>afunkydomainname.org</code>:</p>
+Теперь давайте посмотрим, можно ли зарегистрировать доменное имя `afunkydomainname.org`:
 
-<pre>$ whois afunkydomainname.org
+```
+$ whois afunkydomainname.org
 NOT FOUND
-</pre>
+```
 
-<p>Как вы видите, домен не существует в базе данных whois (на момент написания этой статьи), соответственно, его можно зарегистрировать.</p>
+Как вы видите, домен не существует в базе данных whois (на момент написания этой статьи), соответственно, его можно зарегистрировать.
 
-<h4 id="Как_получить_доменное_имя">Как получить доменное имя</h4>
+#### Как получить доменное имя
 
-<p>Процедура довольно проста:</p>
+Процедура довольно проста:
 
-<ol>
- <li>Перейдите на веб-сайт регистратора доменных имён.</li>
- <li>Обычно там есть кнопка "Зарегистрировать домен" или что-то подобное. Нажмите её.</li>
- <li>Заполните форму требуемыми данными. Убедитесь, что вы не опечатались в названии доменного имени. Потому что, если вы оплатите его, то будет уже поздно исправлять ошибку!</li>
- <li>Регистратор сообщит вам, когда доменное имя будет корректно зарегистрировано. Через несколько часов все DNS-сервера обновятся и ваш домен начнёт работать.</li>
-</ol>
+1.  Перейдите на веб-сайт регистратора доменных имён.
+2.  Обычно там есть кнопка "Зарегистрировать домен" или что-то подобное. Нажмите её.
+3.  Заполните форму требуемыми данными. Убедитесь, что вы не опечатались в названии доменного имени. Потому что, если вы оплатите его, то будет уже поздно исправлять ошибку!
+4.  Регистратор сообщит вам, когда доменное имя будет корректно зарегистрировано. Через несколько часов все DNS-сервера обновятся и ваш домен начнёт работать.
 
-<div class="note">
-<p><strong>Примечание:</strong> В процессе регистрации регистратор доменов спросит вас ваш реальный домашний или рабочий адрес. Обязательно заполните его корректно, потому что многие национальные регистраторы могут отменить регистрацию домена, если был указан ошибочный адрес.</p>
-</div>
+> **Примечание:** В процессе регистрации регистратор доменов спросит вас ваш реальный домашний или рабочий адрес. Обязательно заполните его корректно, потому что многие национальные регистраторы могут отменить регистрацию домена, если был указан ошибочный адрес.
 
-<h4 id="Обновление_DNS">Обновление DNS</h4>
+#### Обновление DNS
 
-<p>Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или изменённых доменах распространяется по Интернету.</p>
+Базы данных DNS хранятся на каждом DNS-сервере по всему миру и эти серверы обращаются за обновлениями к нескольким серверам, называемым “authoritative name server” или “корневой DNS-сервер”. Когда ваш регистратор создаёт или обновляет информацию о зарегистрированном домене, она должна обновиться во всех DNS-базах. Каждый DNS-сервер хранит информацию о домене фиксированное количество времени, а затем автоматически обновляет её (DNS-сервер запрашивает корневой сервер снова). Соответственно, обновление баз занимает какое-то время, пока информация о новых или изменённых доменах распространяется по Интернету.
 
-<div class="note">
-<p><strong>Примечание:</strong> Это время часто называется <strong>время распространения</strong>. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.</p>
-</div>
+> **Примечание:** Это время часто называется **время распространения**. Тем не менее эта задержка не означает, что за это время доменное имя обновит само себя на всех серверах сверху донизу. Очень часто DNS-сервер, запрашиваемый вашим компьютером не знает конкретного домена и запрашивает о нём корневые DNS-сервера по мере требования.
 
-<h3 id="Как_работает_DNS-запрос">Как работает DNS-запрос?</h3>
+### Как работает DNS-запрос?
 
-<p>Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберём весь процесс:</p>
+Как мы уже увидели, когда вы хотите, чтобы веб-страница отобразилась в вашем браузере, легче напечатать доменное имя, чем IP-адрес. Давайте разберём весь процесс:
 
-<ol>
- <li>Напечатайте <code>mozilla.org</code> в адресной строке вашего браузера.</li>
- <li>Ваш браузер спросит ваш компьютер, знает ли он уже, какому IP-адресу соответствует этот домен (используя локальный DNS-кеш). Если имя есть в кеше, оно транслируется в IP-адрес и браузер направляется к необходимому серверу. И всё.</li>
- <li>Если же ваш компьютер не знает, какой IP-адрес соответствует доменному имени <code>mozilla.org</code>, он запрашивает DNS-сервер, чья задача - сообщить вашему компьютеру какой IP-адрес соответствует запрошенному доменному имени.</li>
- <li>Теперь ваш компьютер знает соответствие и может взаимодействовать с сервером.</li>
-</ol>
+1.  Напечатайте `mozilla.org` в адресной строке вашего браузера.
+2.  Ваш браузер спросит ваш компьютер, знает ли он уже, какому IP-адресу соответствует этот домен (используя локальный DNS-кеш). Если имя есть в кеше, оно транслируется в IP-адрес и браузер направляется к необходимому серверу. И всё.
+3.  Если же ваш компьютер не знает, какой IP-адрес соответствует доменному имени `mozilla.org`, он запрашивает DNS-сервер, чья задача - сообщить вашему компьютеру какой IP-адрес соответствует запрошенному доменному имени.
+4.  Теперь ваш компьютер знает соответствие и может взаимодействовать с сервером.
 
-<p><img alt="Explanation of the steps needed to obtain the result to a DNS request" src="https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png" style="height: 702px; width: 544px;"></p>
+![Explanation of the steps needed to obtain the result to a DNS request](https://mdn.mozillademos.org/files/8961/2014-10-dns-request2.png)
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+## Следующие шаги
 
-<p>Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше.</p>
+Итак, мы поговорили о процессах и архитектуре. Время двигаться дальше.
 
-<ul>
- <li>Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить <a href="/en-US/Learn/Anatomy_of_a_web_page">анатомию веб-страницы</a>.</li>
- <li>Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, <a href="/en-US/docs/Learn/How_much_does_it_cost">сколько стоит создание веб-сайта</a>.</li>
- <li>И ещё вы можете прочитать о <a href="http://en.wikipedia.org/wiki/Domain_name">доменных именах</a> в Wikipedia.</li>
-</ul>
+- Если вы хотите попробовать сделать что-то руками, то самое время разобраться в дизайне и изучить [анатомию веб-страницы](/en-US/Learn/Anatomy_of_a_web_page).
+- Также не стоит забывать, что некоторые аспекты создания сайта стоят денег. Здесь мы рассказываем, [сколько стоит создание веб-сайта](/ru/docs/Learn/How_much_does_it_cost).
+- И ещё вы можете прочитать о [доменных именах](http://en.wikipedia.org/wiki/Domain_name) в Wikipedia.
diff --git a/files/ru/learn/common_questions/what_is_a_url/index.md b/files/ru/learn/common_questions/what_is_a_url/index.md
index 4c5e0db632af93..0aee664755068f 100644
--- a/files/ru/learn/common_questions/what_is_a_url/index.md
+++ b/files/ru/learn/common_questions/what_is_a_url/index.md
@@ -12,148 +12,148 @@ tags:
 translation_of: Learn/Common_questions/What_is_a_URL
 original_slug: Learn/Understanding_URLs
 ---
-<div class="summary">
-<p>Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру. </p>
-</div>
+Данная статья описывает Единый локатор ресурсов или Uniform Resource Locators (URLs), объясняет, что это такое, и описывает его структуру.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительно:</th>
-   <td>Вам нужно узнать <a href="/ru/docs/Learn/How_the_Internet_works">как работает интернет</a>, <a href="/ru/docs/Learn/What_is_a_Web_server">что такое Веб сервер</a> and <a href="/ru/docs/Learn/Understanding_links_on_the_web">что лежит в основе веб ссылок </a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Вы узнаете, что такое URL и как они работают в вебе.</td>
-  </tr>
- </tbody>
-</table>
+| Предварительно: | Вам нужно узнать [как работает интернет](/ru/docs/Learn/How_the_Internet_works), [что такое Веб сервер](/ru/docs/Learn/What_is_a_Web_server) and [что лежит в основе веб ссылок ](/ru/docs/Learn/Understanding_links_on_the_web). |
+| --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:           | Вы узнаете, что такое URL и как они работают в вебе.                                                                                                                                                                              |
 
-<h2 id="Введение">Введение</h2>
+## Введение
 
-<p>Наряду с понятиями <a href="/ru/docs/Glossary/Hypertext">гипертекста</a> и <a href="/ru/docs/Glossary/HTTP">протокола HTTP</a>, понятие <a href="/ru/docs/Glossary/URL">URL</a> является одной из основных концепций Всемирной паутины. Это механизм, используемый <a href="/ru/docs/Glossary/Browser">браузерами</a> для получения любого опубликованного во Всемирной сети ресурса.</p>
+Наряду с понятиями [гипертекста](/ru/docs/Glossary/Hypertext) и [протокола HTTP](/ru/docs/Glossary/HTTP), понятие [URL](/ru/docs/Glossary/URL) является одной из основных концепций Всемирной паутины. Это механизм, используемый [браузерами](/ru/docs/Glossary/Browser) для получения любого опубликованного во Всемирной сети ресурса.
 
-<p><strong>URL</strong> обозначает <em>Uniform Resource Locator</em>. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.</p>
+**URL** обозначает _Uniform Resource Locator_. URL это лишь адрес, который выдан уникальному ресурсу в интернете. В теории, каждый корректный URL ведёт на уникальный ресурс. Такими ресурсами могут быть HTML-страница, CSS-файл, изображение и т.д. На практике, существуют некоторые исключения, когда, например, URL ведёт на ресурс, который больше не существует или который был перемещён. Поскольку ресурс, доступный по URL, а также сам URL обрабатываются веб-сервером, его владелец должен внимательно следить за размещаемыми ресурсами и связанными с ними URL.
 
-<h2 id="Активное_обучение">Активное обучение</h2>
+## Активное обучение
 
-<p><em>Активного обучения пока не существует. <a href="/ru/docs/MDN/Getting_started">Пожалуйста подумайте, возможно вы сможете внести свой вклад</a>.</em></p>
+_Активного обучения пока не существует. [Пожалуйста подумайте, возможно вы сможете внести свой вклад](/ru/docs/MDN/Getting_started)._
 
-<h2 id="Подробная_информация">Подробная информация</h2>
+## Подробная информация
 
-<h3 id="Основы_анатомия_URL">Основы: анатомия URL</h3>
+### Основы: анатомия URL
 
-<p>Вот несколько примеров URL:</p>
+Вот несколько примеров URL:
 
-<pre>https://developer.mozilla.org
+```
+https://developer.mozilla.org
 https://developer.mozilla.org/ru/docs/Learn/
-https://developer.mozilla.org/ru/search?q=URL</pre>
+https://developer.mozilla.org/ru/search?q=URL
+```
 
-<p>Каждый из этих URLs могут быть напечатаны в адресной строке браузера, чтобы заставить его загрузить связанную страницу (ресурс).</p>
+Каждый из этих URLs могут быть напечатаны в адресной строке браузера, чтобы заставить его загрузить связанную страницу (ресурс).
 
-<p>URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - факультативными. Рассмотрим наиболее важные части на примере:</p>
+URL состоит из различных частей, некоторые из которых являются обязательными, а некоторые - факультативными. Рассмотрим наиболее важные части на примере:
 
-<pre>http://www.example.com:80/path/to/myfile.html?key1=value1&amp;key2=value2#SomewhereInTheDocument</pre>
+```
+http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument
+```
 
-<dl>
- <dt><img alt="Protocol" src="https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>http://</code> это протокол. Он отображает, какой протокол браузер должен использовать. Обычно это HTTP-протокол или его безопасная версия - HTTPS. Интернет требует эти 2 протокола, но браузеры часто могут использовать и другие протоколы, например <code>mailto:</code> (чтобы открыть почтовый клиент) или <code>ftp:</code> для запуска передачи файлов, так что не стоит удивляться, если вы вдруг увидите другие протоколы.</dd>
- <dt><img alt="Domaine Name" src="https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>www.example.com</code> это доменное имя. Оно означает, какой веб-сервер должен быть запрошен. В качестве альтернативы может быть использован и {{Glossary("IP address", "IP-адрес")}}, но это делается редко, поскольку запоминать IP сложнее, и это не популярно в интернете.</dd>
- <dt><img alt="Port" src="https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>:80</code> это порт. Он отображает технический параметр, используемый для доступа к ресурсам на веб-сервере. Обычно подразумевается, что веб-сервер использует стандартные порты HTTP-протокола (80 для HTTP и 443 для HTTPS) для доступа к своим ресурсам. В любом случае, порт - это факультативная составная часть URL.</dd>
- <dt><img alt="Path to the file" src="https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>/path/to/myfile.html</code> это адрес ресурса на веб-сервере. В прошлом, адрес отображал местоположение реального файла в реальной директории на веб-сервере. В наши дни это чаще всего абстракция, позволяющая обрабатывать адреса и отображать тот или иной контент из баз данных.</dd>
- <dt><img alt="Parameters" src="https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>?key1=value1&amp;key2=value2</code> это дополнительные параметры, которые браузер сообщает веб-серверу. Эти параметры - список пар ключ/значение, которые разделены символом <code>&amp;</code>. Веб-сервер может использовать эти параметры для исполнения дополнительных команд перед тем как отдать ресурс. Каждый веб-сервер имеет свои собственные правила обработки этих параметров и узнать их можно, только спросив владельца сервера.</dd>
- <dt><img alt="Anchor" src="https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png" style="height: 70px; width: 440px;"></dt>
- <dd><code>#SomewhereInTheDocument</code> это якорь на другую часть того же самого ресурса. Якорь представляет собой вид "закладки" внутри ресурса, которая переадресовывает браузер на "заложенную" часть ресурса. В HTML-документе, например, браузер может переместиться в точку, где установлен якорь; в видео- или аудио-документе браузер может перейти к времени, на которое ссылается якорь. Важно отметить, что часть URL после #, которая также известна как идентификатор фрагмента, никогда не посылается на сервер вместе с запросом.</dd>
-</dl>
+- ![Protocol](https://mdn.mozillademos.org/files/8013/mdn-url-protocol@x2.png)
+  - : `http://` это протокол. Он отображает, какой протокол браузер должен использовать. Обычно это HTTP-протокол или его безопасная версия - HTTPS. Интернет требует эти 2 протокола, но браузеры часто могут использовать и другие протоколы, например `mailto:` (чтобы открыть почтовый клиент) или `ftp:` для запуска передачи файлов, так что не стоит удивляться, если вы вдруг увидите другие протоколы.
+- ![Domaine Name](https://mdn.mozillademos.org/files/8015/mdn-url-domain@x2.png)
+  - : `www.example.com` это доменное имя. Оно означает, какой веб-сервер должен быть запрошен. В качестве альтернативы может быть использован и {{Glossary("IP address", "IP-адрес")}}, но это делается редко, поскольку запоминать IP сложнее, и это не популярно в интернете.
+- ![Port](https://mdn.mozillademos.org/files/8017/mdn-url-port@x2.png)
+  - : `:80` это порт. Он отображает технический параметр, используемый для доступа к ресурсам на веб-сервере. Обычно подразумевается, что веб-сервер использует стандартные порты HTTP-протокола (80 для HTTP и 443 для HTTPS) для доступа к своим ресурсам. В любом случае, порт - это факультативная составная часть URL.
+- ![Path to the file](https://mdn.mozillademos.org/files/8019/mdn-url-path@x2.png)
+  - : `/path/to/myfile.html` это адрес ресурса на веб-сервере. В прошлом, адрес отображал местоположение реального файла в реальной директории на веб-сервере. В наши дни это чаще всего абстракция, позволяющая обрабатывать адреса и отображать тот или иной контент из баз данных.
+- ![Parameters](https://mdn.mozillademos.org/files/8021/mdn-url-parameters@x2.png)
+  - : `?key1=value1&key2=value2` это дополнительные параметры, которые браузер сообщает веб-серверу. Эти параметры - список пар ключ/значение, которые разделены символом `&`. Веб-сервер может использовать эти параметры для исполнения дополнительных команд перед тем как отдать ресурс. Каждый веб-сервер имеет свои собственные правила обработки этих параметров и узнать их можно, только спросив владельца сервера.
+- ![Anchor](https://mdn.mozillademos.org/files/8023/mdn-url-anchor@x2.png)
+  - : `#SomewhereInTheDocument` это якорь на другую часть того же самого ресурса. Якорь представляет собой вид "закладки" внутри ресурса, которая переадресовывает браузер на "заложенную" часть ресурса. В HTML-документе, например, браузер может переместиться в точку, где установлен якорь; в видео- или аудио-документе браузер может перейти к времени, на которое ссылается якорь. Важно отметить, что часть URL после #, которая также известна как идентификатор фрагмента, никогда не посылается на сервер вместе с запросом.
 
-<p>{{Note('Есть и <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">другие составные части и правила</a>, касающиеся URL, но обычно они не используются ни пользователями, ни разработчика. Поэтому не стоит о них беспокоиться, вам не обязательно их знать, чтобы формировать работоспособные URL.')}}</p>
+{{Note('Есть и <a href="http://en.wikipedia.org/wiki/Uniform_Resource_Locator">другие составные части и правила</a>, касающиеся URL, но обычно они не используются ни пользователями, ни разработчика. Поэтому не стоит о них беспокоиться, вам не обязательно их знать, чтобы формировать работоспособные URL.')}}
 
-<p>Вам стоит представлять URL как обычный почтовый адрес: <em>протокол</em> обозначает почтовый транспорт, который вы собираетесь использовать,<em>доменное имя</em> - это город, <em>порт</em> - это почтовый индекс; <em>адрес</em> - это номер дома;<em>параметры</em> представляют собой дополнительную информацию, как, например, номер квартиры; и, наконец, <em>якорь</em> представляет собой конкретного получателя, которому вы адресуете своё письмо.</p>
+Вам стоит представлять URL как обычный почтовый адрес: _протокол_ обозначает почтовый транспорт, который вы собираетесь использовать,_доменное имя_ - это город, _порт_ - это почтовый индекс; _адрес_ - это номер дома;_параметры_ представляют собой дополнительную информацию, как, например, номер квартиры; и, наконец, _якорь_ представляет собой конкретного получателя, которому вы адресуете своё письмо.
 
-<h3 id="Как_использовать_URL">Как использовать URL</h3>
+### Как использовать URL
 
-<p>Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс. Но это только вершина айсберга!</p>
+Каждый URL может быть напечатан напрямую в адресной строке браузера, чтобы сразу получить запрошенный ресурс. Но это только вершина айсберга!
 
-<p>Язык {{Glossary("HTML")}} — <a href="/ru/docs/Learn/HTML/HTML_tags">который будет обсуждать позже</a> — позволяет активно использовать URL для:</p>
+Язык {{Glossary("HTML")}} — [который будет обсуждать позже](/ru/docs/Learn/HTML/HTML_tags) — позволяет активно использовать URL для:
 
-<ul>
- <li>создания ссылок на другие документы с помощью тега {{HTMLElement("a")}};</li>
- <li>связывания документа с его дополнительными файлами, например с помощью тегов {{HTMLElement("link")}} или {{HTMLElement("script")}};</li>
- <li>отображения медиа-элементов, например изображений (с помощью тега {{HTMLElement("img")}}), видео (с помощью тега {{HTMLElement("video")}}), звуков и музыки (с помощью тега {{HTMLElement("audio")}}) и так далее;</li>
- <li>отображения других HTML-документов внутри текущего с помощью тега {{HTMLElement("iframe")}}.</li>
-</ul>
+- создания ссылок на другие документы с помощью тега {{HTMLElement("a")}};
+- связывания документа с его дополнительными файлами, например с помощью тегов {{HTMLElement("link")}} или {{HTMLElement("script")}};
+- отображения медиа-элементов, например изображений (с помощью тега {{HTMLElement("img")}}), видео (с помощью тега {{HTMLElement("video")}}), звуков и музыки (с помощью тега {{HTMLElement("audio")}}) и так далее;
+- отображения других HTML-документов внутри текущего с помощью тега {{HTMLElement("iframe")}}.
 
-<div class="note">
-<p><strong>Примечание:</strong> При указании URL-адресов для загрузки ресурсов как части страницы (например, при использовании <code>&lt;script&gt;</code>, <code>&lt;audio&gt;</code>, <code>&lt;img&gt;</code>, <code>&lt;video&gt;</code>, и т.д.), следует использовать только URL-адреса HTTP и HTTPS. Использование FTP, например, не особенно безопасно и больше не поддерживается многими браузерами.</p>
-</div>
+> **Примечание:** При указании URL-адресов для загрузки ресурсов как части страницы (например, при использовании `<script>`, `<audio>`, `<img>`, `<video>`, и т.д.), следует использовать только URL-адреса HTTP и HTTPS. Использование FTP, например, не особенно безопасно и больше не поддерживается многими браузерами.
 
-<p>Другие технологии, такие как {{Glossary("CSS")}} или {{Glossary("JavaScript")}}, также активно используют URL, так что это реально основа веба.</p>
+Другие технологии, такие как {{Glossary("CSS")}} или {{Glossary("JavaScript")}}, также активно используют URL, так что это реально основа веба.
 
-<h3 id="Абсолютные_и_относительные_URL">Абсолютные и относительные URL</h3>
+### Абсолютные и относительные URL
 
-<p>Все, что мы изучали выше - это <em>абсолютные URL</em>. Но так же существуют и <em>относительные URL</em>. Изучим их.</p>
+Все, что мы изучали выше - это _абсолютные URL_. Но так же существуют и _относительные URL_. Изучим их.
 
-<p>Обязательные части URL во многом зависят от контекста, в котором используется URL. В адресной строке браузера URL не имеет никакого контекста, так что приходится вводить полный (или <em>абсолютный</em>) URL, такие как мы рассматривали выше. Обычно вам не требуется вводить протокол (браузер подставляет HTTP по умолчанию) и порт (который нужен только в том случае, если сервер использует нестандартный порт), но остальные части URL всё равно необходимы.</p>
+Обязательные части URL во многом зависят от контекста, в котором используется URL. В адресной строке браузера URL не имеет никакого контекста, так что приходится вводить полный (или _абсолютный_) URL, такие как мы рассматривали выше. Обычно вам не требуется вводить протокол (браузер подставляет HTTP по умолчанию) и порт (который нужен только в том случае, если сервер использует нестандартный порт), но остальные части URL всё равно необходимы.
 
-<p>Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример <em>относительного</em> URL - указание только <em>адресной части</em> URL. А если адрес в URL начинается с символа <code>"/</code>", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.</p>
+Когда URL используется в документе, например в HTML-странице, ситуация отличается. Потому что браузер уже знает URL текущего документа и он может использовать эти сведения для дополнения недостающих частей любого адреса, указанного в документе. Простейший пример _относительного_ URL - указание только _адресной части_ URL. А если адрес в URL начинается с символа `"/`", браузер запросит ресурс от корня сервера, без отсылки к контексту текущего документа.
 
-<p>Разберём это на примерах.</p>
+Разберём это на примерах.
 
-<h4 id="Примеры_абсолютных_URL">Примеры абсолютных URL</h4>
+#### Примеры абсолютных URL
 
-<dl>
- <dt>Полный URL (такой же, как обсуждали в начале статьи)</dt>
- <dd>
- <pre>https://developer.mozilla.org/ru/docs/Learn</pre>
- </dd>
- <dt>Скрыт протокол</dt>
- <dd>
- <pre>//developer.mozilla.org/ru/docs/Learn</pre>
+- Полный URL (такой же, как обсуждали в начале статьи)
 
- <p>В этом случае браузер использует тот же протокол, что использовался для загрузки текущего документа.</p>
- </dd>
- <dt>Скрыт домен</dt>
- <dd>
- <pre>/ru/docs/Learn</pre>
+  - :&#x20;
 
- <p>Это наиболее частый пример использования абсолютного URL в HTML-документе. Браузер использует тот же протокол и то же доменное имя, как у текущего документа. <strong>Примечание:</strong> <em>не возможно скрыть домен, не скрывая при этом протокол, только вместе</em>.</p>
- </dd>
-</dl>
+    ```
+    https://developer.mozilla.org/ru/docs/Learn
+    ```
 
-<h4 id="Примеры_относительных_URL">Примеры относительных URL</h4>
+- Скрыт протокол
 
-<p>Для лучшего понимания следующих примеров, давайте договоримся, что мы обращаемся к URL из документа, который опубликован по адресу: <code>https://developer.mozilla.org/ru/docs/Learn</code></p>
+  - :&#x20;
 
-<dl>
- <dt>Дочерние ресурсы</dt>
- <dd><pre>Skills/Infrastructure/Understanding_URLs</pre>
- <p>Поскольку URL не начинается с  <code>/</code>, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: <code>https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs</code></p>
- <dt>Назад по дереву папок</dt>
- <dd>
- <pre>../CSS/display</pre>
+    ```
+    //developer.mozilla.org/ru/docs/Learn
+    ```
 
- <p>В этом случае, мы используем команду <code>../</code>  — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: <code>https://developer.mozilla.org/ru/docs/Learn/../CSS/display</code>, который может быть упрощён до вида: <code>https://developer.mozilla.org/ru/docs/CSS/display</code></p>
- </dd>
-</dl>
+    В этом случае браузер использует тот же протокол, что использовался для загрузки текущего документа.
 
-<h3 id="Семантические_URL">Семантические URL</h3>
+- Скрыт домен
 
-<p>Помимо своего технического значения, URL представляют собой человеко-читаемые записи о местоположении документов на веб-ресурсе. Они могут быть запомнены и любой может ввести их в адресную строку своего браузера. Веб создавался для людей и распространённой практикой является принцип записи URL, который называется  <a href="http://en.wikipedia.org/wiki/Semantic_URL"><em>семантические URL</em></a>.  Семантические URL используют в своём составе слова, значение которых может быть понято любым человеком, даже тем, кто не разбирается в технических нюансах.</p>
+  - :&#x20;
 
-<p>Семантика, разумеется, плохо распознаётся компьютерами. Вы наверняка видели URL, которые выглядят как куча случайных символов. Но у семантических URL есть много преимуществ:</p>
+    ```
+    /ru/docs/Learn
+    ```
 
-<ul>
- <li>Ими легче управлять.</li>
- <li>Они дают понять пользователю, что находится по данному URL даже без перехода на страницу.</li>
- <li>Поисковые системы могут использовать семантику для улучшения классификации страниц.</li>
-</ul>
+    Это наиболее частый пример использования абсолютного URL в HTML-документе. Браузер использует тот же протокол и то же доменное имя, как у текущего документа. **Примечание:** _не возможно скрыть домен, не скрывая при этом протокол, только вместе_.
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+#### Примеры относительных URL
 
-<ul>
- <li><a href="/ru/docs/Learn/Understanding_domain_names">Понимание доменных имён</a></li>
-</ul>
+Для лучшего понимания следующих примеров, давайте договоримся, что мы обращаемся к URL из документа, который опубликован по адресу: `https://developer.mozilla.org/ru/docs/Learn`
+
+- Дочерние ресурсы
+
+  - :&#x20;
+
+    ```
+    Skills/Infrastructure/Understanding_URLs
+    ```
+
+    Поскольку URL не начинается с `/`, браузер сделает попытку найти документ в поддиректории относительно текущего документа. В данном примере будет запрошен этот URL: `https://developer.mozilla.org/ru/docs/Learn/Skills/Infrastructure/Understanding_URLs`
+
+- Назад по дереву папок
+
+  - :&#x20;
+
+    ```
+    ../CSS/display
+    ```
+
+    В этом случае, мы используем команду `../` — унаследованную из файловой системы UNIX — чтобы сказать браузеру, что он должен подняться на 1 директорию вверх. Соответственно, здесь мы хотим открыть URL: `https://developer.mozilla.org/ru/docs/Learn/../CSS/display`, который может быть упрощён до вида: `https://developer.mozilla.org/ru/docs/CSS/display`
+
+### Семантические URL
+
+Помимо своего технического значения, URL представляют собой человеко-читаемые записи о местоположении документов на веб-ресурсе. Они могут быть запомнены и любой может ввести их в адресную строку своего браузера. Веб создавался для людей и распространённой практикой является принцип записи URL, который называется [_семантические URL_](http://en.wikipedia.org/wiki/Semantic_URL). Семантические URL используют в своём составе слова, значение которых может быть понято любым человеком, даже тем, кто не разбирается в технических нюансах.
+
+Семантика, разумеется, плохо распознаётся компьютерами. Вы наверняка видели URL, которые выглядят как куча случайных символов. Но у семантических URL есть много преимуществ:
+
+- Ими легче управлять.
+- Они дают понять пользователю, что находится по данному URL даже без перехода на страницу.
+- Поисковые системы могут использовать семантику для улучшения классификации страниц.
+
+## Следующие шаги
+
+- [Понимание доменных имён](/ru/docs/Learn/Understanding_domain_names)
diff --git a/files/ru/learn/common_questions/what_is_a_web_server/index.md b/files/ru/learn/common_questions/what_is_a_web_server/index.md
index 572aa6414f3b2c..b12beca9b8ad60 100644
--- a/files/ru/learn/common_questions/what_is_a_web_server/index.md
+++ b/files/ru/learn/common_questions/what_is_a_web_server/index.md
@@ -9,117 +9,91 @@ tags:
 translation_of: Learn/Common_questions/What_is_a_web_server
 original_slug: Learn/Что_такое_веб_сервер
 ---
-<div class="summary">
-<p>В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.</p>
-</div>
+В этой статье мы узнаем, что из себя представляют веб-серверы, как они работают, и почему они так важны.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые<br>
-    знания:</th>
-   <td>Вы должны уже знать, <a href="/ru/docs/Learn/Common_questions/How_does_the_Internet_work">как работает Интернет</a> и <a href="/en-US/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines">понимать разницу между страницей, сайтом, сервером и поисковой системой.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Вы должны уже знать, [как работает Интернет](/ru/docs/Learn/Common_questions/How_does_the_Internet_work) и [понимать разницу между страницей, сайтом, сервером и поисковой системой.](/ru/docs/Learn/Common_questions/Pages_sites_servers_and_search_engines) |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Вы узнаете, что такое веб-сервер и получите общее представление о том, как он работает.                                                                                                                                                                       |
 
-<h2 id="Введение">Введение</h2>
+## Введение
 
-<p>Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.</p>
+Понятие «веб-сервер» может относиться как к аппаратной начинке, так и к программному обеспечению. Или даже к обеим частям, работающим совместно.
 
-<ol>
- <li>С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное <code>mozilla.org</code>.</li>
- <li>С точки зрения ПО, <cite>веб-сервер</cite> включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это <em><cite>HTTP-сервер</cite></em>. <cite>HTTP-сервер</cite> — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).</li>
-</ol>
+1.  С точки зрения "железа", «веб-сервер» — это компьютер, который хранит файлы сайта (HTML-документы, CSS-стили, JavaScript-файлы, картинки и другие) и доставляет их на устройство конечного пользователя (веб-браузер и т.д.). Он подключён к сети Интернет и может быть доступен через доменное имя, подобное `mozilla.org`.
+2.  С точки зрения ПО, веб-сервер включает в себя несколько компонентов, которые контролируют доступ веб-пользователей к размещённым на сервере файлам, как минимум — это _HTTP-сервер_. HTTP-сервер — это часть ПО, которая понимает {{Glossary("URL","URL-адреса")}} (веб-адреса) и {{Glossary("HTTP")}} (протокол, который ваш браузер использует для просмотра веб-страниц).
 
-<p>На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке <a href="/ru/docs/Web/HTTP/Status/404">404</a>) и отправляет обратно, также через HTTP.</p>
+На самом базовом уровне, когда браузеру нужен файл, размещённый на веб-сервере, браузер запрашивает его через HTTP-протокол. Когда запрос достигает нужного веб-сервера ("железо"), сервер HTTP (ПО) принимает запрос, находит запрашиваемый документ (если нет, то сообщает об ошибке [404](/ru/docs/Web/HTTP/Status/404)) и отправляет обратно, также через HTTP.
 
-<p><img alt="Basic representation of a client/server connection through HTTP" src="web-server.svg"></p>
+![Basic representation of a client/server connection through HTTP](web-server.svg)
 
-<p>Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.</p>
+Чтобы опубликовать веб-сайт, необходим либо статический, либо динамический веб-сервер.
 
-<p><strong>Статический веб-сервер</strong>, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».</p>
+**Статический веб-сервер**, или стек, состоит из компьютера ("железо") с сервером HTTP (ПО). Мы называем это «статикой», потому что сервер посылает размещённые файлы в браузер «как есть».
 
-<p><strong>Динамический веб-сервер</strong> состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего <em>сервера приложения </em>и <em>базы данных</em>. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.</p>
+**Динамический веб-сервер** состоит из статического веб-сервера и дополнительного программного обеспечения, чаще всего _сервера приложения_ и _базы данных_. Мы называем его «динамическим», потому что сервер приложений изменяет исходные файлы перед отправкой в ваш браузер по HTTP.
 
-<p>Например, для получения итоговой страницы, которую вы просматриваете в браузере, сервер приложений может заполнить HTML-шаблон данными из базы данных. Такие сайты, как MDN или Википедия, состоят из тысяч веб-страниц, но они не являются реальными HTML документами — лишь несколько HTML-шаблонов и гигантские базы данных. Эта структура упрощает и ускоряет сопровождение веб-приложений и доставку контента.</p>
+Например, для получения итоговой страницы, которую вы просматриваете в браузере, сервер приложений может заполнить HTML-шаблон данными из базы данных. Такие сайты, как MDN или Википедия, состоят из тысяч веб-страниц, но они не являются реальными HTML документами — лишь несколько HTML-шаблонов и гигантские базы данных. Эта структура упрощает и ускоряет сопровождение веб-приложений и доставку контента.
 
-<h2 id="Активное_изучение">Активное изучение</h2>
+## Активное изучение
 
-<p><em>Активное изучение пока не доступно. <a href="/en-US/docs/MDN/Contribute/Getting_started">Пожалуйста, рассмотрите возможность внести свой вклад</a>.</em></p>
+_Активное изучение пока не доступно. [Пожалуйста, рассмотрите возможность внести свой вклад](/ru/docs/MDN/Contribute/Getting_started)._
 
-<h2 id="Погружаемся_глубже">Погружаемся глубже</h2>
+## Погружаемся глубже
 
-<p>Чтобы загрузить веб-страницу, как мы уже говорили, ваш браузер отправляет запрос к веб-серверу, который приступает к поиску запрашиваемого файла в своём собственном пространстве памяти. Найдя файл, сервер считывает его, обрабатывает как ему это необходимо, и отсылает в браузер. Давайте рассмотрим эти шаги более подробно.</p>
+Чтобы загрузить веб-страницу, как мы уже говорили, ваш браузер отправляет запрос к веб-серверу, который приступает к поиску запрашиваемого файла в своём собственном пространстве памяти. Найдя файл, сервер считывает его, обрабатывает как ему это необходимо, и отсылает в браузер. Давайте рассмотрим эти шаги более подробно.
 
-<h3 id="Хостинг_файлов">Хостинг файлов</h3>
+### Хостинг файлов
 
-<p>Прежде всего, веб-сервер должен содержать файлы веб-сайта, а именно все HTML-документы и связанные с ними ресурсы, включая изображения, CSS-стили, JavaScript-файлы, шрифты и видео.</p>
+Прежде всего, веб-сервер должен содержать файлы веб-сайта, а именно все HTML-документы и связанные с ними ресурсы, включая изображения, CSS-стили, JavaScript-файлы, шрифты и видео.
 
-<p>Технически, вы можете разместить все эти файлы на своём компьютере, но гораздо удобнее хранить их на выделенном веб-сервере, который:</p>
+Технически, вы можете разместить все эти файлы на своём компьютере, но гораздо удобнее хранить их на выделенном веб-сервере, который:
 
-<ul>
- <li>всегда запущен и работает</li>
- <li>всегда подключён к Интернету</li>
- <li>имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения)</li>
- <li>обслуживается третьей, сторонней компанией</li>
-</ul>
+- всегда запущен и работает
+- всегда подключён к Интернету
+- имеет неизменный IP адрес (не все {{Glossary("ISP", "провайдеры")}} предоставляют статический IP-адрес для домашнего подключения)
+- обслуживается третьей, сторонней компанией
 
-<p>По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost#hosting">этой статье.</a></p>
+По всем этим причинам поиск хорошего хостинг-провайдера является ключевой частью создания вашего сайта. Рассмотрите многочисленные предложения компаний и выберите то, что соответствует вашим потребностям и бюджету (предложения варьируются от бесплатных до тысяч долларов в месяц). Вы можете найти подробности в [этой статье.](/ru/docs/Learn/Common_questions/How_much_does_it_cost#hosting)
 
-<p>Как только вы решили проблему с хостингом, вам понадобится только <a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">загрузить свои файлы на ваш веб-сервер</a>.</p>
+Как только вы решили проблему с хостингом, вам понадобится только [загрузить свои файлы на ваш веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server).
 
-<h3 id="Связь_по_HTTP">Связь по HTTP</h3>
+### Связь по HTTP
 
-<p>Во-вторых, веб-сервер обеспечивает поддержку {{Glossary("HTTP")}} (англ. <em><strong>H</strong>yper<strong>t</strong>ext <strong>T</strong>ransfer <strong>P</strong>rotocol - гипертекстовый транспортный протокол</em>). Как следует из названия, HTTP указывает, как передавать гипертекст (т.е. связанные веб-документы) между двумя компьютерами.</p>
+Во-вторых, веб-сервер обеспечивает поддержку {{Glossary("HTTP")}} (англ. _**H**yper**t**ext **T**ransfer **P**rotocol - гипертекстовый транспортный протокол_). Как следует из названия, HTTP указывает, как передавать гипертекст (т.е. связанные веб-документы) между двумя компьютерами.
 
-<p>Протокол представляет собой набор правил для связи между двумя компьютерами. HTTP является текстовым протоколом без сохранения состояния.</p>
+Протокол представляет собой набор правил для связи между двумя компьютерами. HTTP является текстовым протоколом без сохранения состояния.
 
-<dl>
- <dt><strong>Текстовый</strong></dt>
- <dd>Все команды являются простым человекочитаемым текстом.</dd>
- <dt><strong>Не сохраняет состояние</strong></dt>
- <dd>Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введённый вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)</dd>
-</dl>
+- **Текстовый**
+  - : Все команды являются простым человекочитаемым текстом.
+- **Не сохраняет состояние**
+  - : Ни клиент, ни сервер не помнят о предыдущих соединениях. Например, опираясь только на HTTP, сервер не сможет вспомнить введённый вами пароль или на каком шаге транзакции вы находитесь. Для таких задач, вам потребуется сервер приложения. (Мы остановимся на этих технологиях в следующих статьях.)
 
-<p>HTTP задаёт строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в <a href="/ru/docs/Web/HTTP">технической статье</a> немного позднее. Пока достаточно знать об этих правилах:</p>
+HTTP задаёт строгие правила взаимодействия клиента и сервера. Мы рассмотрим сам протокол HTTP в [технической статье](/ru/docs/Web/HTTP) немного позднее. Пока достаточно знать об этих правилах:
 
-<ul>
- <li>Исключительно <em>клиенты</em> могут производить HTTP-запросы, и только на <em>сервера</em>. Сервера способны только отвечать на HTTP-<em>запросы клиента</em>.</li>
- <li>При запросе файла по HTTP, клиент должен сформировать файловый {{Glossary("URL")}}.</li>
- <li>Веб-сервер  <em>должен ответить</em> на каждый HTTP-запрос, по крайней мере сообщением об ошибке.</li>
-</ul>
+- Исключительно _клиенты_ могут производить HTTP-запросы, и только на _сервера_. Сервера способны только отвечать на HTTP-_запросы клиента_.
+- При запросе файла по HTTP, клиент должен сформировать файловый {{Glossary("URL")}}.
+- Веб-сервер _должен ответить_ на каждый HTTP-запрос, по крайней мере сообщением об ошибке.
 
-<p><a href="/en-US/404"><img alt="The MDN 404 page as an example of such error page" src="mdn-404.jpg" style="float: right;"></a>На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.</p>
+[![The MDN 404 page as an example of such error page](mdn-404.jpg)](/en-US/404)На веб-сервере HTTP-сервер отвечает за обработку входящих запросов и ответ на них.
 
-<ol>
- <li>При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.</li>
- <li>Если это так, веб-сервер отправляет содержимое файла обратно в браузер. Если нет, сервер приложения генерирует необходимый ресурс.</li>
- <li>Если ничто из этого не возможно, веб-сервер возвращает сообщение об ошибке в браузер, чаще всего “404 Not Found”. (Это ошибка настолько распространена, что многие веб-дизайнеры тратят большое количество времени на разработку <a href="http://www.404notfound.fr/">404 страниц об ошибках</a>.)</li>
-</ol>
+1.  При получении запроса, HTTP-сервер сначала проверяет, существует ли ресурс по данному URL.
+2.  Если это так, веб-сервер отправляет содержимое файла обратно в браузер. Если нет, сервер приложения генерирует необходимый ресурс.
+3.  Если ничто из этого не возможно, веб-сервер возвращает сообщение об ошибке в браузер, чаще всего “404 Not Found”. (Это ошибка настолько распространена, что многие веб-дизайнеры тратят большое количество времени на разработку [404 страниц об ошибках](http://www.404notfound.fr/).)
 
-<h2 id="Статический_и_Динамический_контент">Статический и Динамический контент</h2>
+## Статический и Динамический контент
 
-<p>Грубо говоря, сервер может отдавать статическое или динамическое содержимое.<strong> </strong>«Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.</p>
+Грубо говоря, сервер может отдавать статическое или динамическое содержимое.\*\* \*\*«Статическое» означает «отдаётся как есть». Статические веб-сайты делаются проще всего, поэтому мы предлагаем вам сделать свой первый сайт статическим.
 
-<p>«Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.</p>
+«Динамическое» означает, что сервер обрабатывает данные или даже генерирует их на лету из базы данных. Это обеспечивает большую гибкость, но технически сложнее в реализации и обслуживании, из-за чего процесс создания сайта очень сильно усложняется.
 
-<p>Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется <a href="/en-US/docs/MDN/Yari">Kuma</a>, написан он на языке программирования <a href="https://www.python.org/">Python</a> (используя фреймворк <a href="https://www.djangoproject.com/">Django</a>). Команда Mozilla создала <cite>Kuma</cite> для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.</p>
+Возьмём для примера страницу, которую вы сейчас читаете. На веб-сервере, где она хостится, есть сервер приложения, который извлекает содержимое статьи из базы данных, форматирует его, добавляет в HTML-шаблоны и отправляет вам результат. В нашем случае, сервер приложения называется [Kuma](/ru/docs/MDN/Yari), написан он на языке программирования [Python](https://www.python.org/) (используя фреймворк [Django](https://www.djangoproject.com/)). Команда Mozilla создала Kuma для конкретных нужд MDN, но есть множество подобных приложений, построенных совершенно на других технологиях.
 
-<p>Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.</p>
+Существует так много серверов приложений, что довольно трудно предложить какой-то один. Некоторые серверы приложений заточены под определённые категории веб-сайтов, такие как блоги, вики-страницы или интернет-магазины; другие, называемые {{Glossary("CMS", "CMSs")}} (системы управления контентом), более универсальны. Если вы создаёте динамический сайт, потратьте немного времени на выбор инструмента, который соответствует вашим потребностям. Если вы не хотите изучать веб-программирование (хотя это увлекательно само по себе!), то вам не нужно создавать свой собственный сервер приложения. Это будет изобретением очередного велосипеда.
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+## Следующие шаги
 
-<p>Теперь, когда вы познакомились с веб-серверами, вы можете:</p>
+Теперь, когда вы познакомились с веб-серверами, вы можете:
 
-<ul>
- <li>прочитать <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">насколько сложно делать что-либо в веб</a></li>
- <li>узнать больше о <a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">разнообразии ПО, которое может пригодиться для создания веб-сайта</a></li>
- <li>двигаться к практике: например, <a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">узнать как загружать файлы на веб-сервер</a>.</li>
-</ul>
+- прочитать [насколько сложно делать что-либо в веб](/ru/docs/Learn/Common_questions/How_much_does_it_cost)
+- узнать больше о [разнообразии ПО, которое может пригодиться для создания веб-сайта](/ru/docs/Learn/Common_questions/What_software_do_I_need)
+- двигаться к практике: например, [узнать как загружать файлы на веб-сервер](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server).
diff --git a/files/ru/learn/common_questions/what_software_do_i_need/index.md b/files/ru/learn/common_questions/what_software_do_i_need/index.md
index 6cab33c577ad5c..754fbd158bc5ec 100644
--- a/files/ru/learn/common_questions/what_software_do_i_need/index.md
+++ b/files/ru/learn/common_questions/what_software_do_i_need/index.md
@@ -3,154 +3,96 @@ title: Какое программное обеспечение необходи
 slug: Learn/Common_questions/What_software_do_I_need
 translation_of: Learn/Common_questions/What_software_do_I_need
 ---
-<div class="summary">
-<p>В этой статье мы изложим какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.</p>
-</div>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Вы должны уже знать <a href="/ru/docs/Learn/Pages_sites_servers_and_search_engines">разницу между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.</td>
-  </tr>
- </tbody>
-</table>
+В этой статье мы изложим какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.
 
-<h2 id="Аннотация">Аннотация</h2>
+| Необходимые знания: | Вы должны уже знать [разницу между веб-страницами, веб-сайтами, веб-серверами и поисковыми системами.](/ru/docs/Learn/Pages_sites_servers_and_search_engines) |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Узнать, какие программные компоненты вам понадобятся при редактировании, загрузке или просмотре веб-сайта.                                                    |
 
-<p>Вы можете бесплатно загрузить большинство программ, необходимых для веб-разработки. Мы предоставим несколько ссылок в этой статье. Вам понадобятся инструменты: 1) создания и редактирования веб-страниц, 2) загружать файлы на ваш веб-сервер, 3) просматривать ваш веб-сайт.</p>
+## Аннотация
 
-<p>Почти все операционные системы по умолчанию включают текстовый редактор и просмоторщик веб-сайтов (называемый браузером). Поэтому обычно вам нужно приобрести лишь программное обеспечение для передачи файлов на ваш веб-сервер.</p>
+Вы можете бесплатно загрузить большинство программ, необходимых для веб-разработки. Мы предоставим несколько ссылок в этой статье. Вам понадобятся инструменты: 1) создания и редактирования веб-страниц, 2) загружать файлы на ваш веб-сервер, 3) просматривать ваш веб-сайт.
 
-<h2 id="Активное_изучение">Активное изучение</h2>
+Почти все операционные системы по умолчанию включают текстовый редактор и просмоторщик веб-сайтов (называемый браузером). Поэтому обычно вам нужно приобрести лишь программное обеспечение для передачи файлов на ваш веб-сервер.
 
-<p><em>Пока нет активного обучения. </em><a href="/ru/docs/MDN/Getting_started">Пожалуйста, подумайте о том, чтобы внести свой вклад.</a></p>
+## Активное изучение
 
-<h2 id="Копай_глубже">Копай глубже</h2>
+_Пока нет активного обучения._ [Пожалуйста, подумайте о том, чтобы внести свой вклад.](/ru/docs/MDN/Getting_started)
 
-<h3 id="Создание_и_редактирование_веб-страниц">Создание и редактирование веб-страниц</h3>
+## Копай глубже
 
-<p>Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как <strong>{{Glossary("RTF")}}</strong>, позволяют добавить форматирование, такое как полужирное или подчёркивание. Эти форматы не подходят для написания веб-страниц.) вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.</p>
+### Создание и редактирование веб-страниц
 
-<p>Все настольные операционные системы поставляются с основным текстовым редактором. Они просты, но не имеют специальных возможностей для кодирования веб-страниц. Если вы хотите что-то более интересное, то доступно много сторонних инструментов. Сторонние редакторы часто поставляются с дополнительными функциями, включая подсветку синтаксиса, автозавершение, сворачиваемые блоки кода и поиск кода. Вот краткий список редакторов:</p>
+Для создания и редактирования веб-страниц необходим текстовый редактор. Тестовые редакторы создают и изменяют неотформатированные текстовые файлы. (Другие форматы, такие как **{{Glossary("RTF")}}**, позволяют добавить форматирование, такое как полужирное или подчёркивание. Эти форматы не подходят для написания веб-страниц.) вам следует выбирать текстовый редактор с умом, так как вы будете активно работать с ним, при создании веб-сайта.
 
-<p> </p>
+Все настольные операционные системы поставляются с основным текстовым редактором. Они просты, но не имеют специальных возможностей для кодирования веб-страниц. Если вы хотите что-то более интересное, то доступно много сторонних инструментов. Сторонние редакторы часто поставляются с дополнительными функциями, включая подсветку синтаксиса, автозавершение, сворачиваемые блоки кода и поиск кода. Вот краткий список редакторов:
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Операционная система</th>
-   <th scope="col">Встроенный редактор</th>
-   <th scope="col">Сторонний редактор</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Windows</td>
-   <td><a href="http://en.wikipedia.org/wiki/Notepad_%28software%29" rel="external">Notepad</a></td>
-   <td>
-    <p><a href="http://notepad-plus-plus.org/">Notepad++</a></p>
-
-    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
-
-    <p><a href="https://www.jetbrains.com/webstorm/">Web Storm</a></p>
-
-    <p><a href="http://brackets.io/">Brackets</a></p>
-   </td>
-  </tr>
-  <tr>
-   <td>Mac OS</td>
-   <td><a href="http://en.wikipedia.org/wiki/TextEdit" rel="external">TextEdit</a></td>
-   <td>
-    <p><a href="http://www.barebones.com/products/textwrangler/">TextWrangler</a></p>
-
-    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
-
-    <p><a href="http://brackets.io/">Brackets</a></p>
-   </td>
-  </tr>
-  <tr>
-   <td>Linux</td>
-   <td><a href="http://en.wikipedia.org/wiki/Vi" rel="external">Vi</a> (All UNIX)<br>
-    <a href="http://en.wikipedia.org/wiki/Gedit" rel="external">GEdit</a> (Gnome)<br>
-    <a href="http://en.wikipedia.org/wiki/Kate_%28text_editor%29" rel="external">Kate</a> (KDE)<br>
-    <a href="http://en.wikipedia.org/wiki/Kate_(text_editor)" rel="external">LeafPad</a> (Xfce)</td>
-   <td>
-    <p><a href="http://www.gnu.org/software/emacs/">Emacs</a><br>
-     <a href="http://www.vim.org/" rel="external">Vim</a></p>
-
-    <p><a href="https://www.visualstudio.com/">Visual Studio Code</a></p>
-
-    <p><a href="http://brackets.io/">Brackets</a></p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Операционная система | Встроенный редактор                                                                                                                                                                                                                        | Сторонний редактор                                                                                                                                                           |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Windows              | [Notepad](http://en.wikipedia.org/wiki/Notepad_%28software%29)                                                                                                                                                                             | [Notepad++](http://notepad-plus-plus.org/)[Visual Studio Code](https://www.visualstudio.com/)[Web Storm](https://www.jetbrains.com/webstorm/)[Brackets](http://brackets.io/) |
+| Mac OS               | [TextEdit](http://en.wikipedia.org/wiki/TextEdit)                                                                                                                                                                                          | [TextWrangler](http://www.barebones.com/products/textwrangler/)[Visual Studio Code](https://www.visualstudio.com/)[Brackets](http://brackets.io/)                            |
+| Linux                | [Vi](http://en.wikipedia.org/wiki/Vi) (All UNIX) [GEdit](http://en.wikipedia.org/wiki/Gedit) (Gnome) [Kate](http://en.wikipedia.org/wiki/Kate_%28text_editor%29) (KDE) [LeafPad](<http://en.wikipedia.org/wiki/Kate_(text_editor)>) (Xfce) | [Emacs](http://www.gnu.org/software/emacs/) [Vim](http://www.vim.org/)[Visual Studio Code](https://www.visualstudio.com/)[Brackets](http://brackets.io/)                     |
 
-<p>Ниже скриншот продвинутого текстового редактора:</p>
+Ниже скриншот продвинутого текстового редактора:
 
-<p><img alt="Screenshot of Notepad++." src="https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png" style="height: 311px; width: 450px;"></p>
+![Screenshot of Notepad++.](https://mdn.mozillademos.org/files/8221/NotepadPlusPlus.png)
 
-<h3 id="Загрузка_файлов_в_Интернете">Загрузка файлов в Интернете</h3>
+### Загрузка файлов в Интернете
 
-<p>Когда ваш сайт будет готов для публичного просмотра, вам придётся загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. <a href="/en-US/docs/Learn/How_much_does_it_cost">Сколько стоит делать что-то в Интернете?</a>). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов).  Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">в отдельной статье</a>. А сейчас, вот краткий список бесплатных базовых FTP-клиентов:</p>
+Когда ваш сайт будет готов для публичного просмотра, вам придётся загрузить свои веб-страницы на веб-сервер. Вы можете купить место на сервере у различных провайдеров (см. [Сколько стоит делать что-то в Интернете?](/ru/docs/Learn/How_much_does_it_cost)). После того, как вы решите, какого провайдера использовать, провайдер отправит вам по электронной почте информацию о доступе к протоколу FTP (протокол передачи файлов). Загрузка файлов на веб-сервер является важным шагом при создании сайта, поэтому мы подробно расскажем об этом [в отдельной статье](/ru/docs/Learn/Upload_files_to_a_web_server). А сейчас, вот краткий список бесплатных базовых FTP-клиентов:
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Операционная система</th>
-   <th colspan="2" rowspan="1" scope="col" style="text-align: center;">Программное обеспечение FTP</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Windows</td>
-   <td>
-    <p><a href="http://winscp.net" rel="external">WinSCP</a></p>
-
-    <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p>
-   </td>
-   <td colspan="1" rowspan="3"><a href="https://filezilla-project.org/">FileZilla</a> (All OS)</td>
-  </tr>
-  <tr>
-   <td>Linux</td>
-   <td><a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a> (Gnome)<br>
-    <a href="http://dolphin.com/" rel="external">Dolphin</a> (KDE)</td>
-  </tr>
-  <tr>
-   <td>Mac OS</td>
-   <td><a href="http://cyberduck.de/">Cyberduck</a></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Операционная система</th>
+      <th colspan="2" rowspan="1" scope="col" style="text-align: center">
+        Программное обеспечение FTP
+      </th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Windows</td>
+      <td>
+        <p><a href="http://winscp.net" rel="external">WinSCP</a></p>
+        <p><a href="http://mobaxterm.mobatek.net/">Moba Xterm</a></p>
+      </td>
+      <td colspan="1" rowspan="3">
+        <a href="https://filezilla-project.org/">FileZilla</a> (All OS)
+      </td>
+    </tr>
+    <tr>
+      <td>Linux</td>
+      <td>
+        <a href="https://live.gnome.org/Nautilus" rel="external">Nautilus</a>
+        (Gnome)<br /><a href="http://dolphin.com/" rel="external">Dolphin</a>
+        (KDE)
+      </td>
+    </tr>
+    <tr>
+      <td>Mac OS</td>
+      <td><a href="http://cyberduck.de/">Cyberduck</a></td>
+    </tr>
+  </tbody>
 </table>
 
-<h3 id="Просмотр_веб-сайтов">Просмотр веб-сайтов</h3>
-
-<p>Как вы уже знаете, вам необходим веб-браузер для просмотра веб-сайтов. Существуют десятки браузеров для вашего личного использования, однако когда вы разрабатываете веб-сайт, вы должны протестировать его, по крайней мере, со следующими основными браузерами, чтобы убедиться, что ваш сайт работает для большинства пользователей:</p>
+### Просмотр веб-сайтов
 
-<ul>
- <li><a href="https://www.mozilla.org/en-US/firefox/new/" rel="external">Mozilla Firefox</a></li>
- <li><a href="https://www.google.fr/chrome/browser/" rel="external">Google Chrome</a></li>
- <li><a href="http://windows.microsoft.com/en-US/internet-explorer/download-ie" rel="external">Microsoft Internet Explorer</a></li>
- <li><a href="http://www.apple.com/safari/" rel="external">Apple Safari</a></li>
-</ul>
+Как вы уже знаете, вам необходим веб-браузер для просмотра веб-сайтов. Существуют десятки браузеров для вашего личного использования, однако когда вы разрабатываете веб-сайт, вы должны протестировать его, по крайней мере, со следующими основными браузерами, чтобы убедиться, что ваш сайт работает для большинства пользователей:
 
-<p>Если вы ориентируетесь на определённую группу (например, техническую платформу или страну), возможно, вам придётся протестировать ваш сайт с помощью дополнительных браузеров, таких как <a href="http://www.opera.com/" rel="external">Opera</a>, <a href="http://www.konqueror.org/">Konqueror</a>, или<a href="http://www.ucweb.com/ucbrowser/" rel="external"> UC Browser</a>.</p>
+- [Mozilla Firefox](https://www.mozilla.org/en-US/firefox/new/)
+- [Google Chrome](https://www.google.fr/chrome/browser/)
+- [Microsoft Internet Explorer](http://windows.microsoft.com/en-US/internet-explorer/download-ie)
+- [Apple Safari](http://www.apple.com/safari/)
 
-<p>Но тестирование усложняется, потому что некоторые браузеры работают только в определённых операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как <a href="http://browsershots.org/" rel="external">Browsershots</a> или <a href="http://www.browserstack.com/" rel="external">Browserstack</a>. Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удалённый доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространённых средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на <a href="https://modern.ie" rel="external">modern.ie</a>.)</p>
+Если вы ориентируетесь на определённую группу (например, техническую платформу или страну), возможно, вам придётся протестировать ваш сайт с помощью дополнительных браузеров, таких как [Opera](http://www.opera.com/), [Konqueror](http://www.konqueror.org/), или[ UC Browser](http://www.ucweb.com/ucbrowser/).
 
-<p>Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств - это новая, развивающаяся технология и менее надёжна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на  <a href="http://opendevicelab.com/" rel="external">Open Device Lab initiative</a>. Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.</p>
+Но тестирование усложняется, потому что некоторые браузеры работают только в определённых операционных системах. Apple Safari работает на iOS и Mac OS, а Internet Explorer работает только в Windows. Поэтому лучше воспользоваться такими сервисами, как [Browsershots](http://browsershots.org/) или [Browserstack](http://www.browserstack.com/). Browsershots предоставляет скриншоты вашего сайта, того как ваш сайт будет выглядеть в различных браузерах. Browserstack фактически предоставляет вам полный удалённый доступ к виртуальным машинам, поэтому вы можете протестировать ваш сайт в наиболее распространённых средах. Кроме того, вы можете настроить свою собственную виртуальную машину, но это требует некоторого опыта. (Если вы следуете этому пути, Microsoft имеет инструменты для разработчиков, включая готовую к использованию виртуальную машину на [modern.ie](https://modern.ie).)
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+Обязательно проведите тестирование на реальном устройстве, особенно на реальных мобильных устройствах. Симуляция мобильных устройств - это новая, развивающаяся технология и менее надёжна, чем симуляция настольных устройств. Разумеется, мобильные устройства стоят денег, поэтому мы предлагаем взглянуть на [Open Device Lab initiative](http://opendevicelab.com/). Вы также можете обмениваться устройствами, если вы хотите протестировать на многих платформах, не тратя слишком много.
 
-<ul>
- <li>Некоторые из перечисленных программ бесплатны, но не все. <a href="/en-US/docs/Learn/Common_questions/How_much_does_it_cost">Узнайте, сколько стоит сделать что-то в Интернете.</a></li>
- <li>Если вы хотите больше узнать о текстовых редакторах, прочитайте нашу статью о том <a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">как выбрать и установить текстовый редактор</a>.</li>
- <li>Если вам интересно, как опубликовать ваш веб-сайт в Интернете, посмотрите статью <a href="/en-US/docs/Learn/Upload_files_to_a_web_server">"Как загрузить файлы на веб-сервер"</a>.</li>
-</ul>
+## Следующие шаги
 
-<p> </p>
+- Некоторые из перечисленных программ бесплатны, но не все. [Узнайте, сколько стоит сделать что-то в Интернете.](/ru/docs/Learn/Common_questions/How_much_does_it_cost)
+- Если вы хотите больше узнать о текстовых редакторах, прочитайте нашу статью о том [как выбрать и установить текстовый редактор](/ru/docs/Learn/Choose,_Install_and_set_up_a_text_editor).
+- Если вам интересно, как опубликовать ваш веб-сайт в Интернете, посмотрите статью ["Как загрузить файлы на веб-сервер"](/ru/docs/Learn/Upload_files_to_a_web_server).
diff --git a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md
index cf9904885a95aa..a7921fb6b6124f 100644
--- a/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md
+++ b/files/ru/learn/css/building_blocks/advanced_styling_effects/index.md
@@ -17,40 +17,34 @@ tags:
   - фильтры
 translation_of: Learn/CSS/Building_blocks/Advanced_styling_effects
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</p>
+В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Основы HTML (изучите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и CSS (статья <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять принцип работы узко используемых эффектов в современных браузерах.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и CSS (статья [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Задача:             | Понять принцип работы узко используемых эффектов в современных браузерах.                                                                                                                  |
 
-<h2 id="Блок-тень">Блок-тень</h2>
+## Блок-тень
 
-<p>{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и <code>text-shadow</code>, <code>box-shadows</code> отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.</p>
+{{cssxref("box-shadow")}} позволяет добавить одну и более тень к контейнеру. Как и `text-shadow`, `box-shadows` отлично поддерживаются браузерами, включая IE9+ и Edge. У пользователей ранних версий IE будет просто копия без тени, поэтому убедитесь, что контент с дизайном разборчив и без теней.
 
-<p>Вы можете найти примеры из стати на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html">box-shadow.html</a> (или в <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html">исходном коде</a>).</p>
+Вы можете найти примеры из стати на [box-shadow.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/box-shadow.html) (или в [исходном коде](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/box-shadow.html)).
 
-<h3 id="Обычная_тень">Обычная тень</h3>
+### Обычная тень
 
-<p>Для начала взглянем на простой пример:</p>
+Для начала взглянем на простой пример:
 
-<pre class="brush: html">&lt;article class="simple"&gt;
-  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
-&lt;/article&gt;</pre>
+```html
+<article class="simple">
+  <p><strong>Предупреждение</strong>: Температура ракетного двигателя достигла критической отметки.</p>
+</article>
+```
 
-<p>А теперь CSS:</p>
+А теперь CSS:
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
 }
 
@@ -63,34 +57,34 @@ article {
 
 .simple {
   box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
-}</pre>
+}
+```
 
-<p>В результате получится вот это:</p>
+В результате получится вот это:
 
-<p>{{ EmbedLiveSample('Обычная_тень', '100%', 100) }}</p>
+{{ EmbedLiveSample('Обычная_тень', '100%', 100) }}
 
-<p>Как видите, у нас четыре значения в свойстве <code>box-shadow</code>:</p>
+Как видите, у нас четыре значения в свойстве `box-shadow`:
 
-<ol>
- <li>Первое значение — <strong>смещение по горизонтали</strong> — расстояние, на которое смещена тень вправо (если значение отрицательное, то влево).</li>
- <li><strong>Смещение по вертикали</strong> — расстояние, на которое смещена тень вниз (или вверх, если значение отрицательное).</li>
- <li>Третье значение — это <strong>радиус размытия</strong> — уровень размытия тени.</li>
- <li>Значение цвета — это <strong>основной цвет</strong> тени.</li>
-</ol>
+1.  Первое значение — **смещение по горизонтали** — расстояние, на которое смещена тень вправо (если значение отрицательное, то влево).
+2.  **Смещение по вертикали** — расстояние, на которое смещена тень вниз (или вверх, если значение отрицательное).
+3.  Третье значение — это **радиус размытия** — уровень размытия тени.
+4.  Значение цвета — это **основной цвет** тени.
 
-<p>Вы можете использовать абсолютно любые значения и цвета, если это необходимо.</p>
+Вы можете использовать абсолютно любые значения и цвета, если это необходимо.
 
-<h3 id="Несколько_теней">Несколько теней</h3>
+### Несколько теней
 
-<p>Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении <code>box-shadow</code>:</p>
+Вы можете определить несколько блок-теней, разделяя их запятыми при объявлении `box-shadow`:
 
-<div class="hidden">
-<pre class="brush: html">&lt;article class="multiple"&gt;
-  &lt;p&gt;&lt;strong&gt;Предупреждение&lt;/strong&gt;: Температура ракетного двигателя достигла критической отметки.&lt;/p&gt;
-&lt;/article&gt;</pre>
-</div>
+```html hidden
+<article class="multiple">
+  <p><strong>Предупреждение</strong>: Температура ракетного двигателя достигла критической отметки.</p>
+</article>
+```
 
-<pre class="brush: css">p {
+```css
+p {
   margin: 0;
 }
 
@@ -108,23 +102,27 @@ article {
               4px 4px 1px red,
               5px 5px 1px black,
               6px 6px 1px black;
-}</pre>
+}
+```
 
-<p>В итоге мы получим:</p>
+В итоге мы получим:
 
-<p>{{ EmbedLiveSample('Несколько_теней', '100%', 100) }}</p>
+{{ EmbedLiveSample('Несколько_теней', '100%', 100) }}
 
-<p>Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.</p>
+Мы сделали контейнер с несколькими ступенчатыми цветными тенями, но вы можете делать, как считаете то нужным, например, чтобы добавить реалистичности, опираясь на какие-нибудь источники света.
 
-<h3 id="Другие_опции_блок-теней">Другие опции блок-теней</h3>
+### Другие опции блок-теней
 
-<p>В отличие от {{cssxref("text-shadow")}}, у свойства {{cssxref("box-shadow")}} есть значение <code>inset</code> — оно добавляет внутреннюю тень. Поясним это на примере.</p>
+В отличие от {{cssxref("text-shadow")}}, у свойства {{cssxref("box-shadow")}} есть значение `inset` — оно добавляет внутреннюю тень. Поясним это на примере.
 
-<p>Для этого примера используем другой HTML-код:</p>
+Для этого примера используем другой HTML-код:
 
-<pre class="brush: html">&lt;button&gt;Нажми на меня!&lt;/button&gt;</pre>
+```html
+<button>Нажми на меня!</button>
+```
 
-<pre class="brush: css">button {
+```css
+button {
   width: 150px;
   font-size: 1.1rem;
   line-height: 2;
@@ -144,67 +142,65 @@ button:active {
   box-shadow: inset 2px 2px 1px black,
               inset 2px 3px 5px rgba(0,0,0,0.3),
               inset -2px -3px 5px rgba(255,255,255,0.5);
-}</pre>
+}
+```
 
-<p>Получим:</p>
+Получим:
 
-<p>{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}</p>
+{{ EmbedLiveSample('Другие_опции_блок-теней', '100%', 70) }}
 
-<p>Мы стилизовали кнопку с помощью состояний <em>focus</em>, <em>hover</em> и <em>active</em>. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.</p>
+Мы стилизовали кнопку с помощью состояний _focus_, _hover_ и _active_. Для кнопки по умолчанию установлены несколько простых чёрных теней плюс пара внутренних теней в противоположном углу кнопки для эстетичности.
 
-<p>При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.</p>
+При нажатии на кнопку первая тень становится внутренней, чтобы создать ощущение нажатия кнопки.
 
-<div class="note">
-<p><strong>Примечание</strong>: Есть ещё одно значение <code>box-shadow</code>, которое устанавливается перед значением свойства, — <strong>радиус разброса</strong>. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания.</p>
-</div>
+> **Примечание:** Есть ещё одно значение `box-shadow`, которое устанавливается перед значением свойства, — **радиус разброса**. При его использовании тень становится больше оригинального контейнера. Свойство не так часто используют, но оно стоит упоминания.
 
-<h2 id="Фильтры">Фильтры</h2>
+## Фильтры
 
-<p>Замечательное свойство, благодаря которому ваш дизайн станет интереснее, — это свойство {{cssxref("filter")}}. Это что-то вроде фильтров Photoshop, но в CSS.</p>
+Замечательное свойство, благодаря которому ваш дизайн станет интереснее, — это свойство {{cssxref("filter")}}. Это что-то вроде фильтров Photoshop, но в CSS.
 
-<p>В примере ниже мы использовали два значения этого свойства: первое — <code>blur()</code> — определяет, насколько изображение размыто.</p>
+В примере ниже мы использовали два значения этого свойства: первое — `blur()` — определяет, насколько изображение размыто.
 
-<p>Второе значение — <code>grayscale()</code>; оно определяет, насколько изображение насыщено.</p>
+Второе значение — `grayscale()`; оно определяет, насколько изображение насыщено.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/filter.html", '100%', 700)}}
 
-<p><strong>Попробуйте изменить значения в примере, чтобы посмотреть на изменения. Вы можете менять значения на другие. Попробуйте добавить <code>contrast(200%)</code>, <code>invert(100%)</code> или <code>hue-rotate(20deg)</code> в примере ниже. Прочтите статью <code><a href="https://developer.mozilla.org/ru/docs/Web/CSS/filter">filter</a></code>, чтобы узнать о многих других значениях этого свойства.</strong></p>
+**Попробуйте изменить значения в примере, чтобы посмотреть на изменения. Вы можете менять значения на другие. Попробуйте добавить `contrast(200%)`, `invert(100%)` или `hue-rotate(20deg)` в примере ниже. Прочтите статью [`filter`](https://developer.mozilla.org/ru/docs/Web/CSS/filter), чтобы узнать о многих других значениях этого свойства.**
 
-<p>Вы можете добавлять фильтры к любым объектам. Некоторые значения свойства работают почти так же, как CSS-свойства, например, <code>drop-shadow()</code> даёт эффект, схожий с <a href="https://developer.mozilla.org/ru/docs/Web/CSS/box-shadow" title="The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas."><code>box-shadow</code></a> или <a href="https://developer.mozilla.org/ru/docs/Web/CSS/text-shadow" title="The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations."><code>text-shadow</code></a>.</p>
+Вы можете добавлять фильтры к любым объектам. Некоторые значения свойства работают почти так же, как CSS-свойства, например, `drop-shadow()` даёт эффект, схожий с [`box-shadow`](/ru/docs/Web/CSS/box-shadow "The box-shadow CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas.") или [`text-shadow`](/ru/docs/Web/CSS/text-shadow "The text-shadow CSS property adds shadows to text. It accepts a comma-separated list of shadows to be applied to the text and any of its decorations.").
 
-<p>В фильтрах замечательно то, что они применяются к каждому элементу контейнера. Ниже мы сравнили фильтр и блок-тень. Как видите, фильтр применился к каждой чёрточке. А блок-тень просто выделила тень, равную размерам контейнера.</p>
+В фильтрах замечательно то, что они применяются к каждому элементу контейнера. Ниже мы сравнили фильтр и блок-тень. Как видите, фильтр применился к каждой чёрточке. А блок-тень просто выделила тень, равную размерам контейнера.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/filter-text.html", '100%', 600)}}
 
-<h2 id="Режимы_смешивания">Режимы смешивания</h2>
+## Режимы смешивания
 
-<p>Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.</p>
+Режимы смешивания CSS позволяют определить смешивание при наложении двух элементов. Смешивание очень знакомо пользователям редакторов вроде Photoshop.
 
-<p>В режимах смешивания CSS два значения:</p>
+В режимах смешивания CSS два значения:
 
-<ul>
- <li>{{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента.</li>
- <li>{{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга.</li>
-</ul>
+- {{cssxref("background-blend-mode")}}, которое смешивает цвет фона и цвета отдельного элемента.
+- {{cssxref("mix-blend-mode")}}, которое смешивает элементы, наложенные друг на друга.
 
-<p>Вы можете найти больше примеров смешивания на странице <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html">blend-modes.html</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html">источник</a>) и на странице {{cssxref("&lt;blend-mode&gt;")}}.</p>
+Вы можете найти больше примеров смешивания на странице [blend-modes.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/blend-modes.html) (смотрите [источник](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/blend-modes.html)) и на странице {{cssxref("&lt;blend-mode&gt;")}}.
 
-<div class="note">
-<p><strong>Примечание</strong>: Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.</p>
-</div>
+> **Примечание:** Смешивание относительно новое свойство, поэтому поддерживается хуже, чем фильтры. Оно совсем не поддерживается на Edge, а Safari поддерживает лишь некоторые значения свойства.
 
-<h3 id="background-blend-mode">background-blend-mode</h3>
+### background-blend-mode
 
-<p>Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы вы сравнили оригинал с редактированной версией:</p>
+Снова обратимся к примеру. Во-первых, {{cssxref("background-blend-mode")}} — мы покажем несколько контейнеров {{htmlelement("div")}}, чтобы вы сравнили оригинал с редактированной версией:
 
-<pre class="brush: html">&lt;div&gt;
-&lt;/div&gt;
-&lt;div class="multiply"&gt;
-&lt;/div&gt;</pre>
+```html
+<div>
+</div>
+<div class="multiply">
+</div>
+```
 
-<p>Воспользуемся CSS — добавим к <code>&lt;div&gt;</code> одно фоновое изображение и зелёный фон:</p>
+Воспользуемся CSS — добавим к `<div>` одно фоновое изображение и зелёный фон:
 
-<pre class="brush: css">div {
+```css
+div {
   width: 250px;
   height: 130px;
   padding: 10px;
@@ -216,37 +212,41 @@ button:active {
 
 .multiply {
   background-blend-mode: multiply;
-}</pre>
+}
+```
 
-<p>Слева вы видите оригинал, справа — изменённое изображение:</p>
+Слева вы видите оригинал, справа — изменённое изображение:
 
-<p>{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}</p>
+{{ EmbedLiveSample('background-blend-mode', '100%', 200) }}
 
-<h3 id="mix-blend-mode">mix-blend-mode</h3>
+### mix-blend-mode
 
-<p>Рассмотрим {{cssxref("mix-blend-mode")}}. Здесь мы также используем несколько <code>&lt;div&gt;</code>, но каждый из них расположен над простым <code>&lt;div&gt;</code> с фиолетовым фоном, чтобы показать, как элементы будут смешаны:</p>
+Рассмотрим {{cssxref("mix-blend-mode")}}. Здесь мы также используем несколько `<div>`, но каждый из них расположен над простым `<div>` с фиолетовым фоном, чтобы показать, как элементы будут смешаны:
 
-<pre class="brush: html">&lt;article&gt;
+```html
+<article>
   Нет режима смешивания
-  &lt;div&gt;
+  <div>
 
-  &lt;/div&gt;
-  &lt;div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;
+  </div>
+  <div>
+  </div>
+</article>
 
-&lt;article&gt;
+<article>
   Множественное смешивание
-  &lt;div class="multiply-mix"&gt;
+  <div class="multiply-mix">
 
-  &lt;/div&gt;
-  &lt;div&gt;
-  &lt;/div&gt;
-&lt;/article&gt;</pre>
+  </div>
+  <div>
+  </div>
+</article>
+```
 
-<p>А здесь CSS:</p>
+А здесь CSS:
 
-<pre class="brush: css">article {
+```css
+article {
   width: 280px;
   height: 180px;
   margin: 10px;
@@ -279,51 +279,48 @@ article div:last-child {
 
 .multiply-mix {
   mix-blend-mode: multiply;
-}</pre>
+}
+```
 
-<p>И это даст нам следующее:</p>
+И это даст нам следующее:
 
-<p>{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}</p>
+{{ EmbedLiveSample('mix-blend-mode', '100%', 200) }}
 
-<p>Как видите, смешались не только фоновые изображения, но и <code>&lt;div&gt;</code> под ними.</p>
+Как видите, смешались не только фоновые изображения, но и `<div>` под ними.
 
-<div class="note">
-<p><strong>Примечание</strong>: Не переживайте, если вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/CSS_layout">CSS Layout</a>.</p>
-</div>
+> **Примечание:** Не переживайте, если вы не знаете такие свойства разметки, как {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("z-index")}} и т. д. Мы детально рассмотрим это в модуле [CSS Layout](/ru/docs/Learn/CSS/CSS_layout).
 
-<h2 id="CSS-фигуры">CSS-фигуры</h2>
+## CSS-фигуры
 
-<p>Мы можем сделать обтекание содержимым непрямоугольных фигур, используя <a href="/ru/docs/Web/CSS/CSS_Shapes">CSS-фигуры</a>.</p>
+Мы можем сделать обтекание содержимым непрямоугольных фигур, используя [CSS-фигуры](/ru/docs/Web/CSS/CSS_Shapes).
 
-<p>В примере ниже мы эффектно округлили воздушный шар. В действительности изображение прямоугольное, но с определением свойства <em>float</em> (по-другому формы не добавляются) и использованием свойства {{cssxref("shape-outside")}} со значением <code>circle(50%)</code>, мы можем создать эффект обтекания текста.</p>
+В примере ниже мы эффектно округлили воздушный шар. В действительности изображение прямоугольное, но с определением свойства _float_ (по-другому формы не добавляются) и использованием свойства {{cssxref("shape-outside")}} со значением `circle(50%)`, мы можем создать эффект обтекания текста.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/shapes.html", '100%', 1000)}}
 
-<p>Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.</p>
+Форма в этом примере не реагирует на содержание изображения. Вместо этого в центре изображения определяется центр окружности, как если бы мы начертили циркулем окружность, вписанную в изображение. Это та окружность, которую обтекает текст.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: В Firefox вы можете использовать <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Инспектор фигур</a>, чтобы редактировать фигуры.</p>
-</div>
+> **Примечание:** В Firefox вы можете использовать [Инспектор фигур](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes), чтобы редактировать фигуры.
 
-<p>Значение <code>circle()</code> — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте <a href="/en-US/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes">Обзор CSS-фигур</a> на MDN.)</p>
+Значение `circle()` — лишь одно из нескольких базовых фигур для этого свойства, но можно и создавать формы. (Читайте [Обзор CSS-фигур](/ru/docs/Web/CSS/CSS_Shapes/Overview_of_CSS_Shapes) на MDN.)
 
-<h2 id="-webkit-background-clip_text">-webkit-background-clip: text</h2>
+## -webkit-background-clip: text
 
-<p>Функция, о которой мы, кажется, упомянули в свойстве <code>text</code> для значения {{cssxref("background-clip")}}. Опция <code>-webkit-text-fill-color: transparent;</code> позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс <code>-webkit-</code> для любых браузеров:</p>
+Функция, о которой мы, кажется, упомянули в свойстве `text` для значения {{cssxref("background-clip")}}. Опция `-webkit-text-fill-color: transparent;` позволяет обрезать фоновые изображения под форму текста. Это неофициальный стандарт, но он был подключён во множестве браузеров. В данном контексте обязательно используется префикс `-webkit-` для любых браузеров:
 
-<pre class="brush: css">.text-clip {
+```css
+.text-clip {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-}</pre>
+}
+```
 
-<p>Так почему остальные браузеры используют префикс <code>-webkit-</code>? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы <code>-webkit-</code>, отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.</p>
+Так почему остальные браузеры используют префикс `-webkit-`? В основном для совместимости — поэтому многие веб-разработчики стали вставлять префиксы `-webkit-`, отчего другие браузеры казались сломанными, когда, по факту, всё было выполнено по всем стандартам. Поэтому были введены некоторые такие функции.
 
-<p>Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.</p>
+Если вы собираетесь использовать подобные опции, проверьте совместимость их с браузерами.
 
-<div class="note">
-<p><strong>Примечание</strong>: Пример с <code>-webkit-background-clip: text</code> смотрите на <a href="http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html">background-clip-text.html</a> (или <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html">источнике</a>).</p>
-</div>
+> **Примечание:** Пример с `-webkit-background-clip: text` смотрите на [background-clip-text.html](http://mdn.github.io/learning-area/css/styling-boxes/advanced_box_effects/background-clip-text.html) (или [источнике](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/advanced_box_effects/background-clip-text.html)).
 
-<h2 id="Итог">Итог</h2>
+## Итог
 
-<p>Надеемся, статья была весёлой — игра с кодами уж точно. Всегда интересно следить за появлением новых узконаправленных свойств в современных браузерах.</p>
+Надеемся, статья была весёлой — игра с кодами уж точно. Всегда интересно следить за появлением новых узконаправленных свойств в современных браузерах.
diff --git a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
index c3de39ef25fd5f..39e4d7aa6d6adf 100644
--- a/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
+++ b/files/ru/learn/css/building_blocks/backgrounds_and_borders/index.md
@@ -13,320 +13,305 @@ tags:
   - Цвет
 translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
 
-<p>В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.</p>
+В этом уроке мы рассмотрим некоторые интересные возможности, которые вы можете сделать с помощью CSS-свойств фона и границ . Благодаря добавлению градиентов, фоновых изображений и закруглённых углов свойства фона и границ ответят на многие вопросы стилизации в CSS.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые умения:</th>
-   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Научиться стилизации фона и границ объектов.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые умения: | Базовая компьютерная грамотность, [основное программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), понимание [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), базовые знания HTML (смотрите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и представление о том, как работает CSS (смотрите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:               | Научиться стилизации фона и границ объектов.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 
-<h2 id="Стилизация_фона_в_CSS">Стилизация фона в CSS</h2>
+## Стилизация фона в CSS
 
-<p>CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство <code>background</code> в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.</p>
+CSS-свойство {{cssxref ("background")}} является сокращением для ряда полных свойств фона, с которыми мы познакомимся в этом уроке. Если вы обнаружите сложное свойство `background` в таблице стилей, это может показаться трудным для понимания, так как одновременно может быть передано так много значений.
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat,
   url(big-star.png) center no-repeat, rebeccapurple;
-} </code>
-</pre>
+}
+```
 
-<p>Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства <code>background</code>.</p>
+Мы вернёмся к тому, как работает сокращение позже, а пока давайте взглянем на различные вещи, которые вы можете делать с фоном в CSS, посмотрев на отдельные свойства `background`.
 
-<h3 id="Фоновый_цвет">Фоновый цвет</h3>
+### Фоновый цвет
 
-<p>Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет <code><a href="/ru/docs/Web/CSS/color_value">&lt;color&gt;</a></code>. <code>background-color</code> распространяется на сам контент и отступы от него (padding).</p>
+Свойство {{cssxref ("background-color")}} определяет цвет фона для любого элемента в CSS. Свойство принимает любой допустимый цвет [`<color>`](/ru/docs/Web/CSS/color_value). `background-color` распространяется на сам контент и отступы от него (padding).
 
-<p>В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.</p>
+В приведённом ниже примере мы использовали различные значения цвета, чтобы добавить цвет фона к блоку, заголовку и элементу {{htmlelement ("span")}}.
 
-<p><strong>Поиграйте с ними, используя любое доступное значение</strong> <strong><a href="/ru/docs/Web/CSS/color_value">&lt;color&gt;</a>.</strong></p>
+**Поиграйте с ними, используя любое доступное значение** **[\<color>](/ru/docs/Web/CSS/color_value).**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 600)}}
 
-<h3 id="Фоновое_изображение">Фоновое изображение</h3>
+### Фоновое изображение
 
-<p>Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.</p>
+Свойство {{cssxref ("background-image")}} позволяет отображать изображение в качестве фона элемента. В приведённом ниже примере у нас есть два блока — в одном фоновое изображение больше, чем размеры блока, а в другом - маленькое изображение звезды.
 
-<p>Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.</p>
+Этот пример демонстрирует две особенности фоновых изображений. По умолчанию большое изображение не масштабируется до размера блока, поэтому мы видим только его небольшой угол, в то время как маленькое изображение повторяется, чтобы заполнить весь блок. В нашем случае фактически было использовано изображение одной маленькой звезды.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 600)}}
 
-<div class="blockIndicator note">
-<p><strong>Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.</strong> Попробуйте добавить свойство <code>background-color</code> в приведённый выше пример, чтобы увидеть это в действии.</p>
-</div>
+> **Примечание:** **Если кроме фонового изображения вы добавили фоновый цвет, то изображение будет отображаться над цветом.** Попробуйте добавить свойство `background-color` в приведённый выше пример, чтобы увидеть это в действии.
 
-<h4 id="Свойство_background-repeat">Свойство  background-repeat</h4>
+#### Свойство background-repeat
 
-<p>Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения. Доступные значения:</p>
+Свойство {{cssxref ("background-repeat")}} используется для управления повторениями фонового изображения. Доступные значения:
 
-<ul>
- <li><code>no-repeat</code> — останавливает повторение фонового изображения во всех направлениях.</li>
- <li><code>repeat-x</code> — повторение фонового изображения по горизонтали.</li>
- <li><code>repeat-y</code> — повторение фонового изображения по вертикали.</li>
- <li><code>repeat</code> — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.</li>
-</ul>
+- `no-repeat` — останавливает повторение фонового изображения во всех направлениях.
+- `repeat-x` — повторение фонового изображения по горизонтали.
+- `repeat-y` — повторение фонового изображения по вертикали.
+- `repeat` — повторение фонового изображения в обоих направлениях. Установлено по умолчанию.
 
-<p><strong>Попробуйте эти значения в примере ниже. Мы установили значение <code>no-repeat</code>, поэтому вы видите только одну звезду. Попробуйте разные значения - </strong> <strong><code>repeat-x</code></strong> <strong> и </strong> <strong><code>repeat-y</code></strong> <strong>—</strong> <strong> чтобы увидеть, какие эффекты они оказывают.</strong></p>
+**Попробуйте эти значения в примере ниже. Мы установили значение `no-repeat`, поэтому вы видите только одну звезду. Попробуйте разные значения -** **`repeat-x`** **и** **`repeat-y`** **—** **чтобы увидеть, какие эффекты они оказывают.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 480)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 480)}}
 
-<h4 id="Изменение_размеров_фонового_изображения">Изменение размеров фонового изображения</h4>
+#### Изменение размеров фонового изображения
 
-<p>В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения <a href="/ru/docs/Web/CSS/размер">длины</a> или в <a href="/ru/docs/Web/CSS/percentage">процентах</a>, чтобы размер изображения соответствовал размеру фона.</p>
+В приведённом выше примере у нас есть большое изображение, которое в конечном итоге было обрезано, так как оно больше, чем элемент, фоном которого оно является. В этом случае мы могли бы использовать свойство {{cssxref ("background-size")}}, которое может принимать значения [длины](/ru/docs/Web/CSS/размер) или в [процентах](/ru/docs/Web/CSS/percentage), чтобы размер изображения соответствовал размеру фона.
 
-<p>Вы также можете использовать ключевые слова:</p>
+Вы также можете использовать ключевые слова:
 
-<ul>
- <li><code>cover</code>  — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.</li>
- <li><code>contain</code> — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.</li>
-</ul>
+- `cover` — браузер сделает изображение достаточно большим, чтобы оно полностью заполнило блок, сохраняя при этом соотношение сторон. В этом случае часть изображения, скорее всего, окажется за пределами блока.
+- `contain` — браузер сделает изображение нужного размера, чтобы поместиться в блоке. В этом случае могут появиться пробелы с обеих сторон или сверху и снизу изображения, если соотношение сторон изображения отличается от соотношения сторон блока.
 
-<p>Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.</p>
+Ниже я применил значения длины к размерам изображения. Глядите, как это исказило изображение.
 
-<p>В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.</p>
+В приведённом ниже примере я использовал большое изображение из ранее рассмотренного примера и указал значения длины, чтобы определить его размер внутри блока. Вы можете посмотреть, как это исказило изображение.
 
-<p>Попробуйте следующее.</p>
+Попробуйте следующее.
 
-<ul>
- <li>Измените значения длины, используемые для изменения размера фона.</li>
- <li>Измените значение длины на <code>background-size: cover</code> или <code>background-size: contain</code>. </li>
- <li>Если ваше изображение меньше размеров блока, вы можете изменить значение свойства <code>background-repeat</code>, чтобы повторить изображение.</li>
-</ul>
+- Измените значения длины, используемые для изменения размера фона.
+- Измените значение длины на `background-size: cover` или `background-size: contain`.
+- Если ваше изображение меньше размеров блока, вы можете изменить значение свойства `background-repeat`, чтобы повторить изображение.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 600)}}
 
-<h4 id="Позиционирование_фонового_изображения">Позиционирование фонового изображения</h4>
+#### Позиционирование фонового изображения
 
-<p>Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой <em>левый верхний угол</em> блока равен <code>(0,0)</code>, а сам блок располагается вдоль горизонтальной (<code>x</code>) и вертикальной (<code>y</code>) осей.</p>
+Свойство {{cssxref ("background-position")}} позволяет вам изменять позицию, в которой фоновое изображение появляется в блоке. При этом используется система координат, в которой _левый верхний угол_ блока равен `(0,0)`, а сам блок располагается вдоль горизонтальной (`x`) и вертикальной (`y`) осей.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: По умолчанию значение <code>background-position</code> равно <code>(0,0)</code>.</p>
-</div>
+> **Примечание:** По умолчанию значение `background-position` равно `(0,0)`.
 
-<p>Обычно свойство <code>background-position</code> задают в виде двух последовательных значений  —  значение по горизонтали, за которым следует значение по вертикали.</p>
+Обычно свойство `background-position` задают в виде двух последовательных значений — значение по горизонтали, за которым следует значение по вертикали.
 
-<p>Вы можете использовать такие ключевые слова, как <code>top</code> и <code>right</code> (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):</p>
+Вы можете использовать такие ключевые слова, как `top` и `right` (с остальными можете ознакомиться на странице {{cssxref ("background-position")}}):
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top center;
-} </code>
-</pre>
+}
+```
 
-<p>Допустимы значения <a href="/ru/docs/Web/CSS/размер">длины</a> и <a href="/ru/docs/Web/CSS/percentage">процентные</a>:</p>
+Допустимы значения [длины](/ru/docs/Web/CSS/размер) и [процентные](/ru/docs/Web/CSS/percentage):
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: 20px 10%;
-} </code>
-</pre>
+}
+```
 
-<p>Вы также можете смешивать значения ключевых слов с длинами или процентами, например:</p>
+Вы также можете смешивать значения ключевых слов с длинами или процентами, например:
 
-<pre class="brush: css">.box {
+```css
+.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px;
-}</pre>
+}
+```
 
-<p>И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:</p>
+И наконец, вы также можете использовать синтаксис с четырьмя значениями, чтобы указать расстояние от определённых краёв блока - единица длины в данном случае представляет собой смещение от значения ключевого слова. Итак, в CSS ниже мы сместили фон на 20 пикселей сверху и на 10 пикселей справа:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   background-image: url(star.png);
   background-repeat: no-repeat;
   background-position: top 20px right 10px;
-} </code></pre>
+}
+```
 
-<p><strong>Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.</strong></p>
+**Используйте приведённый ниже пример, чтобы поэкспериментировать с этими значениями и переместить звезду внутри блока.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 480)}}
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: <code>background-position</code> — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.</p>
-</div>
+> **Примечание:** `background-position` — это сокращение для {{cssxref("background-position-x")}} и {{cssxref("background-position-y")}}, которые позволяют вам устанавливать различные значения положения по оси индивидуально.
 
-<h3 id="Градиент_в_качестве_фона">Градиент в качестве фона</h3>
+### Градиент в качестве фона
 
-<p>Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.</p>
+Градиент - при использовании для фона - действует так же, как изображение, и поэтому задаётся свойством {{cssxref ("background-image")}}.
 
-<p>Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных <code><a href="/en-US/docs/Web/CSS/gradient">&lt;gradient&gt;</a></code>. Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например <a href="https://cssgradient.io/">этот</a>. Вы можете создать градиент, а затем скопировать и вставить его в свой код.</p>
+Вы можете прочитать больше о различных типах градиентов и о том, что вы можете с ними делать на странице MDN для типа данных [`<gradient>`](/en-US/docs/Web/CSS/gradient). Поиграть с градиентами вы можете используя один из многих генераторов градиентов CSS, доступных в Интернете, например [этот](https://cssgradient.io/). Вы можете создать градиент, а затем скопировать и вставить его в свой код.
 
-<p>Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.</p>
+Попробуйте использовать разные градиенты в примере ниже. В двух блоках соответственно у нас есть линейный градиент, растянутый на весь блок, и радиальный градиент с заданным размером, который поэтому повторяется.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 600)}}
 
-<h3 id="Несколько_фоновых_изображений">Несколько фоновых изображений</h3>
+### Несколько фоновых изображений
 
-<p>Также возможно создавать несколько фоновых изображений — просто разделив значения свойства <code>background-image</code> запятыми.</p>
+Также возможно создавать несколько фоновых изображений — просто разделив значения свойства `background-image` запятыми.
 
-<p>Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения. </p>
+Когда вы сделаете это, произойдёт наложение фоновых изображений друг на друга. Фоновые изображения будут наложены слоями, где каждое новое фоновое изображение, перечисленное в коде, будет накладываться поверх ранее указанного изображения.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Градиенты можно легко смешивать с обычными фоновыми изображениями.</p>
-</div>
+> **Примечание:** Градиенты можно легко смешивать с обычными фоновыми изображениями.
 
-<p>Другие свойства <code>background- *</code> также могут иметь значения, разделённые запятыми,  как и <code>background-image</code>:</p>
+Другие свойства `background- *` также могут иметь значения, разделённые запятыми, как и `background-image`:
 
-<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
+```css
+background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
 background-repeat: no-repeat, repeat-x, repeat;
-background-position: 10px 20px,  top right;</pre>
+background-position: 10px 20px,  top right;
+```
 
-<p>Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение <code>background-repeat</code> для <code>image1</code> будет <code>no-repeat</code>. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения <code>background-position</code>. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - <code>image3</code> будет присвоено первое значение позиции, а <code>image4</code> будет присвоено второе значение позиции.</p>
+Каждое значение различных свойств будет соответствовать значениям в той же позиции в других свойствах. Выше, например, значение `background-repeat` для `image1` будет `no-repeat`. Однако, что происходит, когда разные свойства имеют разное количество значений? Ответ заключается в том, что меньшее количество значений будет циклически повторяться - в приведённом выше примере есть четыре фоновых изображения, и только два значения `background-position`. Первые два значения позиции будут применены к первым двум изображениям, затем они снова будут циклически повторяться - `image3` будет присвоено первое значение позиции, а `image4` будет присвоено второе значение позиции.
 
-<p><strong>Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.</strong></p>
+**Поиграем? В приведённом ниже примере я добавил два изображения. Чтобы продемонстрировать порядок наложения, попробуйте поменять порядок фоновых изображений в списке. Или поиграйте с другими свойствами, чтобы изменить положение, размер или повторяемость значений.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 480)}}
 
-<h3 id="Закрепление_фона">Закрепление фона</h3>
+### Закрепление фона
 
-<p>Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:</p>
+Другая опция, которую можно применить к фону, - это указать, как он будет прокручиваться при прокрутке содержимого. Это контролируется с помощью свойства {{cssxref ("background-attachment")}}, которое может принимать следующие значения:
 
-<ul>
- <li><code>scroll</code>: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.</li>
- <li><code>fixed</code>: Фиксирует  элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.</li>
- <li><code>local</code>: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение <code>scroll</code> довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение <code>local</code> фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.  </li>
-</ul>
+- `scroll`: Заставляет элементы фона прокручиваться при прокрутке страницы. Если содержимое элемента прокручивается, фон не перемещается. Фактически, фон фиксируется в той же позиции на странице, поэтому он прокручивается по мере прокрутки страницы.
+- `fixed`: Фиксирует элементы фона в области просмотра, чтобы он не прокручивался при прокрутке страницы или содержимого элемента. Фон всегда будет оставаться на одном и том же месте на экране.
+- `local`: Это значение было добавлено позже (оно поддерживается только в Internet Explorer 9+, тогда как другие поддерживаются в IE4+), потому что значение `scroll` довольно запутанно и во многих случаях действительно не делает то, что вы хотите. Значение `local` фиксирует фон для элемента, к которому он применён, поэтому, когда вы прокручиваете элемент, фон прокручивается вместе с ним.
 
-<p>Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> (также смотри <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">исходный код</a> здесь).</p>
+Свойство {{cssxref ("background-attachment")}} действует только тогда, когда есть контент для прокрутки, поэтому мы сделали пример, чтобы продемонстрировать различия между тремя значениями - взгляните на [background-attachment.html](http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html) (также смотри [исходный код](https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds) здесь).
 
-<h3 id="Использование_сокращённого_свойства_background">Использование сокращённого свойства background</h3>
+### Использование сокращённого свойства background
 
-<p>Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.</p>
+Как я упоминал в начале этого урока, вы часто будете видеть фон, заданный с помощью свойства {{cssxref ("background")}}. Это сокращение позволяет вам одновременно устанавливать все различные свойства.
 
-<p>При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением <code>no-repeat</code> и положением, затем цвет.</p>
+При использовании нескольких фонов необходимо указать все свойства для первого фона, а затем добавить следующий фон после запятой. В приведённом ниже примере у нас есть градиент с размером и положением, затем фоновое изображение со значением `no-repeat` и положением, затем цвет.
 
-<p>При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:</p>
+При записи сокращённых значений фонового изображения необходимо соблюдать несколько правил, например:
 
-<ul>
- <li><code>background-color</code> можно указывать только после последней запятой.</li>
- <li>Значения <code>background-size</code> могут быть включены только сразу после <code>background-position</code>, разделённые символом '/', например: <code>center/80%</code>. </li>
-</ul>
+- `background-color` можно указывать только после последней запятой.
+- Значения `background-size` могут быть включены только сразу после `background-position`, разделённые символом '/', например: `center/80%`.
 
-<p>Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.</p>
+Посетите страницу MDN свойства {{cssref ("background")}}, чтобы увидеть полное описание.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 600)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 600)}}
 
-<h3 id="Доступность_просмотра">Доступность просмотра</h3>
+### Доступность просмотра
 
-<p>Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать <code>background-color</code>, который позволит тексту быть разборчивым, если изображение не загружается.</p>
+Помещая текст поверх фонового изображения или цвета, вы должны позаботиться о том, чтобы у вас было достаточно контраста, чтобы текст был читаемым для посетителей вашего сайта. Если указывается изображение, и текст будет помещён поверх этого изображения, вы также должны указать `background-color`, который позволит тексту быть разборчивым, если изображение не загружается.
 
-<p>Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.</p>
+Программы чтения с экрана не могут анализировать фоновые изображения, поэтому они должны быть чисто декоративными; любой важный контент должен быть частью HTML-страницы, а не находиться в фоне.
 
-<h2 id="Границы">Границы</h2>
+## Границы
 
-<p>Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.</p>
+Изучая Блочную модель, мы обнаружили, как границы влияют на размер нашего блока. В этом уроке мы рассмотрим, как творчески использовать границы. Обычно, когда мы добавляем границы к элементу с помощью CSS, мы используем сокращённое свойство, которое устанавливает цвет, ширину и стиль границы в одной строке CSS.
 
-<p>Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:</p>
+Мы можем установить границу для всех четырёх сторон блока с помощью {{cssxref ("border")}}:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border: 1px solid black;
-} </code></pre>
+}
+```
 
-<p>Или мы можем нацеливаться на один край блока, например:</p>
+Или мы можем нацеливаться на один край блока, например:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border-top: 1px solid black;
-} </code></pre>
+}
+```
 
-<p>Индивидуальные свойства этих сокращений будут следующими:</p>
+Индивидуальные свойства этих сокращений будут следующими:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border-width: 1px;
   border-style: solid;
   border-color: black;
-} </code></pre>
+}
+```
 
-<p>И более детально:</p>
+И более детально:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border-top-width: 1px;
   border-top-style: solid;
   border-top-color: black;
-} </code></pre>
+}
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Свойства границ top, right, bottom, и left также имеют сопоставленные <em>логические</em> свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается <a href="/ru/docs/CSS/Building_blocks/Handling_different_text_directions">работы с разными направлениями текста</a>.</p>
-</div>
+> **Примечание:** Свойства границ top, right, bottom, и left также имеют сопоставленные _логические_ свойства, которые относятся к режиму написания документа (например, текст слева направо, справа налево или сверху вниз). Мы рассмотрим их в следующем уроке, который касается [работы с разными направлениями текста](/ru/docs/CSS/Building_blocks/Handling_different_text_directions).
 
-<p><strong>Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.</strong></p>
+**Есть множество стилей, которые вы можете использовать для границ. В приведённом ниже примере мы использовали разные стили границ для четырёх сторон моего блока. Поиграйте со стилем, шириной и цветом границы, чтобы увидеть, как они работают.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 640)}}
 
-<h3 id="Закруглённые_углы">Закруглённые углы</h3>
+### Закруглённые углы
 
-<p>Закругление углов блока достигается с помощью свойства {{cssxref ("border-radius")}} и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе - вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.</p>
+Закругление углов блока достигается с помощью свойства {{cssxref ("border-radius")}} и связанных свойств, которые относятся к каждому углу блока. В качестве значения могут использоваться два значения длины или процента: первое значение определяет горизонтальный радиус, а второе - вертикальный радиус. Чаще задают только одно значение, которое используется для обоих.
 
-<p>Например, чтобы сделать все четыре угла блока радиусом 10px:</p>
+Например, чтобы сделать все четыре угла блока радиусом 10px:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border-radius: 10px;
-} </code></pre>
+}
+```
 
-<p>Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:</p>
+Или, чтобы верхний правый угол имел горизонтальный радиус 1em и вертикальный радиус 10%:
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   border-top-right-radius: 1em 10%;
-} </code></pre>
+}
+```
 
-<p>В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для {{cssxref("border-radius")}} чтобы увидеть доступные варианты синтаксиса.</p>
+В примере ниже мы установили все четыре угла, а затем изменили значения для верхнего правого угла, чтобы сделать его другим. Вы можете поиграть со значениями, чтобы изменить углы. Взгляните на страницу свойств для {{cssxref("border-radius")}} чтобы увидеть доступные варианты синтаксиса.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 620)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 620)}}
 
-<h2 id="Упражнение_с_границами_и_фоном">Упражнение с границами и фоном</h2>
+## Упражнение с границами и фоном
 
-<p>Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:</p>
+Чтобы проверить свои новые знания, попробуйте создать следующее, используя фон и границы, используя приведённый ниже пример в качестве отправной точки:
 
-<ol>
- <li>Задайте рамку равную 5px black solid,  с закруглёнными углами 10px.</li>
- <li>Добавить фоновое изображение (используйте URL <code>balloons.jpg</code>) и установите размер таким образом, чтобы он покрыл весь блок.</li>
- <li>Задайте для <code>&lt;h2&gt;</code> полупрозрачный чёрный цвет фона и сделайте текст белым.</li>
-</ol>
+1.  Задайте рамку равную 5px black solid, с закруглёнными углами 10px.
+2.  Добавить фоновое изображение (используйте URL `balloons.jpg`) и установите размер таким образом, чтобы он покрыл весь блок.
+3.  Задайте для `<h2>` полупрозрачный чёрный цвет фона и сделайте текст белым.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 555)}}
 
-<div class="blockIndicator note">
-<p><strong>Примечание:</strong> вы можете посмотреть <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">решение</a> здесь — но сначала попробуйте сделать это сами!</p>
-</div>
+> **Примечание:** вы можете посмотреть [решение](https://github.com/mdn/css-examples/blob/master/learn/solutions.md) здесь — но сначала попробуйте сделать это сами!
 
-<h2 id="Итоги">Итоги</h2>
+## Итоги
 
-<p>В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.</p>
+В этой теме мы рассмотрели довольно много, но как вы можете увидеть, возможностей по стилизации фона или границ блока намного больше. Изучите различные страницы свойств, если хотите узнать больше о каких-либо функциях, которые мы обсуждали. На каждой странице MDN есть много примеров использования свойств, с которыми вы можете поиграть и расширить свои знания.
 
-<p>В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?</p>
+В следующем уроке мы узнаем, как Режим написания вашего документа взаимодействует с вашим CSS. Что происходит, если текст не перетекает слева направо?
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы"> </a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors"> </a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a> <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators"> </a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Изображения, формы и прочие медиа-элементы </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></li>
-</ol>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)[](/ru/docs/Learn/CSS/Building_blocks/Селекторы)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)[](/ru/docs/Learn/CSS/Building_blocks/Селекторы/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)[](/ru/docs/Learn/CSS/Building_blocks/Селекторы/Combinators)
+
+3.  [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Изменение направления текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Перекрытие содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения свойств CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Изображения, формы и прочие медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация CSS-кода](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
index 7172bd0f22c84b..e3554a14db6d54 100644
--- a/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
+++ b/files/ru/learn/css/building_blocks/cascade_and_inheritance/index.md
@@ -12,332 +12,245 @@ tags:
   - Специфичность
 translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
 ---
-<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
 
-<p>Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.</p>
+Цель этого урока — углубить ваше понимание некоторых основополагающих концепций CSS — каскадов, спецификаций и наследования, — которые контролируют то, как CSS применяется к HTML и как разрешаются конфликты.
 
-<p>Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.</p>
+Хотя изучение этого урока может показаться менее актуальным и немного более академичным, чем некоторые другие части курса, понимание этих вещей спасёт вас от головной боли в дальнейшем! Мы рекомендуем вам внимательно изучить этот раздел и убедиться, что вы понимаете концепции, перед тем, как двигаться дальше.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить понятие о каскаде и специфичности, и как работает наследование CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Изучить понятие о каскаде и специфичности, и как работает наследование CSS.                                                                                                                                                                                                                                                                                                                                                                                             |
 
-<h2 id="Конфликтующие_правила">Конфликтующие правила</h2>
+## Конфликтующие правила
 
-<p>CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово <em>"каскадные" </em>является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.</p>
+CSS (Cascading Style Sheets) означает Каскадные Таблицы Стилей и первое слово _"каскадные"_ является невероятно важным для понимания: то, как ведёт себя каскад — ключевой момент в понимании CSS.
 
-<p>В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. <strong>Каскад</strong> и тесно связанная концепция <strong>специфичности</strong> —  это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.</p>
+В какой-то момент, работая над проектом, вы обнаружите, что CSS, который, по-вашему, должен быть применён к элементу, не работает. Обычно проблема заключается в том, что вы создали два правила, которые могут потенциально применяться к одному и тому же элементу. **Каскад** и тесно связанная концепция **специфичности** — это механизмы, которые контролируют, какое именно правило применяется, когда имеется такой конфликт. Стиль вашего элемента может определять не то правило, на которое вы рассчитывали, поэтому вам необходимо понимать, как работают эти механизмы.
 
-<p>Также значимой является концепция <strong>наследования, </strong>которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.</p>
+Также значимой является концепция **наследования,** которая заключается в том, что некоторые свойства CSS наследуют по умолчанию значения, установленные для родительского элемента текущего элемента, а некоторые не наследуют. Это также может стать причиной поведения, которое вы, возможно, не ожидаете.
 
-<p>Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий. Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.</p>
+Давайте начнём с краткого обзора ключевых моментов, которых мы касаемся, далее рассмотрим каждый из них по очереди и посмотрим, как они взаимодействуют друг с другом и с вашим CSS. Это может показаться набором сложных для понимания понятий. Однако, когда вы получите больше опыта в написании CSS, для вас станет более очевидным то, как это работает.
 
-<h3 id="Каскад">Каскад</h3>
+### Каскад
 
-<p>Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.</p>
+Каскад таблицы стилей, если говорить упрощённо, означает, что порядок следования правил в CSS имеет значение; когда применимы два правила, имеющие одинаковую специфичность, используется то, которое идёт в CSS последним.
 
-<p>В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.</p>
+В приведённом ниже примере у нас есть два правила, которые могут применяться к h1. В результате h1 окрасится синим цветом — эти правила имеют идентичный селектор и, следовательно, одинаковую специфичность, поэтому побеждает последний в порядке следования.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}}
 
-<h3 id="Специфичность">Специфичность</h3>
+### Специфичность
 
-<p>Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. <em>Различные типы селекторов ( селекторы элементов <code>h1{...}</code>, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность.</em> По существу, это мера того, насколько специфическим будет отбор по селектору:</p>
+Специфичность определяет, как браузер решает, какое именно правило применяется в случае, когда несколько правил имеют разные селекторы, но, тем не менее, могут быть применены к одному и тому же элементу. _Различные типы селекторов ( селекторы элементов `h1{...}`, селекторы классов, селекторы идентификаторов и т.д ) имеют разной степени влияние на элементы страницы. Чем более общее влияние оказывает селектор на элементы страницы тем меньше его специфичность, конкретность._ По существу, это мера того, насколько специфическим будет отбор по селектору:
 
-<ul>
- <li>Селектор элементов ( <em>например <code>h1</code></em> ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.</li>
- <li>Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута <code>class</code> — поэтому получит больше баллов, <em>селектор класса применится после селектора элемента и поэтому перекроет его стили</em>.</li>
-</ul>
+- Селектор элементов ( _например `h1`_ ) менее специфичен — он выберет все элементы этого типа на странице — поэтому получит меньше баллов.
+- Селектор класса более специфичен — он выберет только те элементы на странице, которые имеют конкретное значение атрибута `class` — поэтому получит больше баллов, _селектор класса применится после селектора элемента и поэтому перекроет его стили_.
 
-<p>Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к <code>h1</code>. <code>h1</code> в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.</p>
+Например. Как указано ниже, у нас опять есть два правила, которые могут применяться к `h1`. `h1` в результате будет окрашен красным цветом — селектор класса даёт своему правилу более высокую специфичность, поэтому он будет применён, несмотря на то, что правило для селектора элемента расположено ниже в таблице стилей.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}}
 
-<p>Позже мы объясним, как сделать оценку специфичности, и прочие детали.</p>
+Позже мы объясним, как сделать оценку специфичности, и прочие детали.
 
-<h3 id="Наследование">Наследование</h3>
+### Наследование
 
-<p>Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.</p>
+Наследование также надо понимать в этом контексте — некоторые значения свойства CSS, установленные для родительских элементов наследуются их дочерними элементами, а некоторые нет.
 
-<p>Например, если вы установили значение <code>color</code> и <code>font-family</code> для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.</p>
+Например, если вы установили значение `color` и `font-family` для элемента, то каждый элемент внутри него также будет иметь этот цвет и шрифт, если только вы не применили к ним напрямую стиль с другим цветом и шрифтом.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}}
 
-<p>Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!</p>
+Некоторые свойства не наследуются — например, если вы установили для элемента {{cssxref("width")}} равным 50%, все его дочерние элементы не получат ширину в 50% от ширины своего родительского элемента. Если бы это было так, CSS было бы чрезвычайно трудно использовать!
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: <a href="https://developer.mozilla.org/ru-RU/docs/Web/CSS/color#Specifications">color property Specifications section</a>.</p>
-</div>
+> **Примечание:** На страницах справочника CSS-свойств вы можете найти окно технической информации, обычно в конце раздела спецификации, в котором перечислены некоторые технические данные об этом свойстве, в том числе наследуется оно или нет. Например, здесь: [color property Specifications section](/ru/docs/Web/CSS/color#Specifications).
 
-<h2 id="Понимание_взаимодействия_этих_концепций">Понимание взаимодействия этих концепций</h2>
+## Понимание взаимодействия этих концепций
 
-<p>Эти три концепции вместе определяют, какая CSS применяется и к какому элементу; в следующих разделах мы увидим, как они взаимодействуют. Это может показаться сложным, но вы начнёте лучше понимать их по мере приобретения опыта работы с CSS, и вы всегда можете обратиться к справочной информации, если что-то забыли. Даже опытные разработчики не помнят всех деталей!</p>
+Эти три концепции вместе определяют, какая CSS применяется и к какому элементу; в следующих разделах мы увидим, как они взаимодействуют. Это может показаться сложным, но вы начнёте лучше понимать их по мере приобретения опыта работы с CSS, и вы всегда можете обратиться к справочной информации, если что-то забыли. Даже опытные разработчики не помнят всех деталей!
 
-<p>Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:</p>
+Видео ниже показывает, как вы можете использовать Firefox DevTools для проверки каскада стилей, спецификации, и т.д. на странице:
 
-<p>{{EmbedYouTube("Sp9ZfSvpf7A")}}</p>
+{{EmbedYouTube("Sp9ZfSvpf7A")}}
 
-<h2 id="Понимание_наследования">Понимание наследования</h2>
+## Понимание наследования
 
-<p>Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего <code>&lt;ul&gt;</code> стиль границы, внутренние отступы и цвет шрифта.</p>
+Итак, наследование. В примере ниже мы имеем {{HTMLElement("ul")}} с двумя уровнями неупорядоченных списков, вложенных в него. Мы установили для внешнего `<ul>` стиль границы, внутренние отступы и цвет шрифта.
 
-<p>Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку <code>&lt;li&gt;</code> и к элементам внутри первого вложенного списка. Далее мы добавили класс <code>special</code> ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.</p>
+Цвет шрифта применён к прямому потомку, но также и к непрямому потомку — к прямому потомку `<li>` и к элементам внутри первого вложенного списка. Далее мы добавили класс `special` ко второму вложенному списку и применили к нему другой цвет шрифта. Теперь это свойство наследуется всеми его потомками.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}}
 
-<p>Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!</p>
+Такие свойства, как ширина (как в примере выше), внутренние и внешние отступы и стиль границы не наследуются. Если бы потомки нашего списка наследовали бы границу, то каждый отдельный список и каждая позиция в списке получили бы такую же границу — вряд ли мы хотели бы получить такой эффект!
 
-<p>Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.</p>
+Какие свойства наследуются по умолчанию, а какие нет, чаще всего определяется здравым смыслом.
 
-<h3 id="Контроль_наследования">Контроль наследования</h3>
+### Контроль наследования
 
-<p>CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.</p>
+CSS предоставляет четыре специальных универсальных значения свойства для контроля наследования. Каждое свойство CSS принимает эти значения.
 
-<dl>
- <dt>{{cssxref("inherit")}}</dt>
- <dd>Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".</dd>
- <dt>{{cssxref("initial")}}</dt>
- <dd>Устанавливает значение свойства, применённого к выбранному элементу, равным <a href="/ru-RU/docs/Web/CSS/initial_value">initial value</a> этого свойства (<em>в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)</em></dd>
- <dt>{{cssxref("unset")}}</dt>
- <dd>Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как <code>inherit</code>, иначе оно действует как <code>initial</code>.</dd>
-</dl>
+- {{cssxref("inherit")}}
+  - : Устанавливает значение свойства, применённого к элементу, таким же, как у его родительского элемента. Фактически, это "включает наследование".
+- {{cssxref("initial")}}
+  - : Устанавливает значение свойства, применённого к выбранному элементу, равным [initial value](/ru/docs/Web/CSS/initial_value) этого свойства (_в соответствии с настройками браузера по умолчанию. Если в таблице стилей браузера отсутствует значение этого свойства, оно наследуется естественным образом.)_
+- {{cssxref("unset")}}
+  - : Возвращает свойству его естественное значение, что означает, что если свойство наследуется естественным образом, оно действует как `inherit`, иначе оно действует как `initial`.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами.</p>
-</div>
+> **Примечание:** Существует также более новое значение {{cssxref("revert")}}, которое имеет ограниченную поддержку браузерами.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Смотрите {{SectionOnPage("/ru-RU/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} для более подробной информации о каждом из них, и о том, как они работают.</p>
-</div>
+> **Примечание:** Смотрите {{SectionOnPage("/ru-RU/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} для более подробной информации о каждом из них, и о том, как они работают.
 
-<p>Можно посмотреть список ссылок и изучить, как работают универсальные значения. Пример, следующий ниже, позволяет вам поиграть с CSS и увидеть, что происходит, когда вы вносите изменения. Подобные эксперименты с кодом — лучший способ освоить HTML и CSS.</p>
+Можно посмотреть список ссылок и изучить, как работают универсальные значения. Пример, следующий ниже, позволяет вам поиграть с CSS и увидеть, что происходит, когда вы вносите изменения. Подобные эксперименты с кодом — лучший способ освоить HTML и CSS.
 
-<p>Например:</p>
+Например:
 
-<ol>
- <li>Второй элемент списка имеет класс <code>my-class-1</code>. Таким образом, цвет для следующего вложенного элемента <code>a</code> устанавливается по наследству. Как изменится цвет, если это правило будет удалено?</li>
- <li>Понятно ли, почему третий и четвёртый элементы <code>a</code> имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.</li>
- <li>Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента <code>&lt;a&gt;</code> — например: <code>a { color: red; }</code>?</li>
-</ol>
+1.  Второй элемент списка имеет класс `my-class-1`. Таким образом, цвет для следующего вложенного элемента `a` устанавливается по наследству. Как изменится цвет, если это правило будет удалено?
+2.  Понятно ли, почему третий и четвёртый элементы `a` имеют именно такой цвет? Если нет, перечитайте описание значений, представленное выше.
+3.  Какая из ссылок изменит цвет, если вы зададите новый цвет для элемента `<a>` — например: `a { color: red; }`?
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}}
 
-<h3 id="Возврат_всех_исходных_значений_свойств">Возврат всех исходных значений свойств</h3>
+### Возврат всех исходных значений свойств
 
-<p>Стенографическое свойство CSS <code>all</code> можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (<code>inherit</code>, <code>initial</code>, <code>unset</code>, или <code>revert</code>). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.</p>
+Стенографическое свойство CSS `all` можно использовать для того, чтобы присвоить одно из значений наследования к (почти) всем свойствам одновременно. Это одно из четырёх значений (`inherit`, `initial`, `unset`, или `revert`). Это удобный способ для отмены изменений, внесённых в стили, для того, чтобы вы могли вернуться к стартовой точке перед внесением новых изменений.
 
-<p>В примере ниже имеются два блока <code>&lt;blockquote&gt;</code>. Первый имеет стиль, который применён к самому элементу <code>blockquote</code>, второй имеет класс <code>fix-this</code>, который устанавливает значение <code>all</code> в <code>unset</code>.</p>
+В примере ниже имеются два блока `<blockquote>`. Первый имеет стиль, который применён к самому элементу `blockquote`, второй имеет класс `fix-this`, который устанавливает значение `all` в `unset`.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}}
 
-<p>Попробуйте установить для <code>all</code> ещё одно из доступных значений и исследуйте, в чём заключается разница.</p>
+Попробуйте установить для `all` ещё одно из доступных значений и исследуйте, в чём заключается разница.
 
-<h2 id="Понимание_каскада">Понимание каскада</h2>
+## Понимание каскада
 
-<p>Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS-правил, применяемых в случае влияния на стиль элемента нескольких объектов.</p>
+Теперь мы понимаем, почему параграф, следующий по глубине в структуре HTML документа, имеет тот же цвет, что CSS применяет к body, а вводные уроки дали понимание того, как изменить применение CSS к чему-либо в любой точке документа — или назначить CSS элементу, или создать класс. Теперь рассмотрим подробнее то, как каскад определяет выбор CSS-правил, применяемых в случае влияния на стиль элемента нескольких объектов.
 
-<p>Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.</p>
+Вот три фактора, перечисленные в порядке возрастания важности. Следующий отменяет предыдущий.
 
-<ol>
- <li><strong>Порядок следования</strong></li>
- <li><strong>Специфичность</strong></li>
- <li><strong>Важность</strong></li>
-</ol>
+1.  **Порядок следования**
+2.  **Специфичность**
+3.  **Важность**
 
-<p>Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.</p>
+Мы внимательно изучим их, чтобы увидеть, как именно браузеры определяют, какой CSS следует применить.
 
-<h3 id="Порядок_следования">Порядок следования</h3>
+### Порядок следования
 
-<p>Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент. </p>
+Мы уже видели, какое значение для каскада имеет порядок следования. Если у вас несколько правил, которые имеют одинаковую важность, то побеждает правило, которое идёт последним в CSS. Другими словами, правила, более близкие к самому элементу, переписывают более ранние, пока последнее не победит, оно и стилизует элемент.
 
-<h3 id="Специфичность_2">Специфичность</h3>
+### Специфичность
 
-<p>Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более <strong>высокую специфичность</strong> — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.</p>
+Понимая, что порядок следования правил имеет значение, в какой-то момент вы окажетесь в ситуации, когда вы знаете, что правило появляется позже в таблице стилей, но применяется более раннее, конфликтующее правило. Это связано с тем, что более раннее правило имеет более **высокую специфичность** — оно более специфично и поэтому выбирается браузером как правило, которое должно стилизовать элемент.
 
-<p>Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.</p>
+Как мы видели ранее в этом уроке, селектор класса имеет больший вес, чем селектор элемента, поэтому свойства, определённые в классе, будут переопределять свойства, применённые непосредственно к элементу.
 
-<p>Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.</p>
+Здесь следует отметить, что, хотя мы думаем о селекторах и правилах, применяемых к объекту, который они выбирают, переписывается не всё правило, а только свойства, которые являются одинаковыми.
 
-<p>Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.</p>
+Такое поведение помогает избежать повторения в вашем CSS. Обычной практикой является определение общих стилей для базовых элементов, а затем создание классов для тех, которые отличаются. Например, в таблице стилей ниже мы определяем общие стили для заголовков второго уровня, а затем создаём несколько классов, которые изменяют только некоторые свойства и значения. Определённые вначале значения применяются ко всем заголовкам, затем к заголовкам с классами применяются более конкретные значения.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}}
 
-<p>Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.</p>
+Давайте теперь посмотрим, как браузер будет вычислять специфичность. Мы уже знаем, что селектор элемента имеет низкую специфичность и может быть перезаписан классом. По существу, значение в баллах присуждается различным типам селекторов, и их сложение даёт вам вес этого конкретного селектора, который затем может быть оценён в сравнении с другими потенциальными соперниками.
 
-<p>Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:</p>
+Степень специфичности, которой обладает селектор, измеряется с использованием четырёх различных значений (или компонентов), которые можно представить как тысячи, сотни, десятки и единицы — четыре однозначные цифры в четырёх столбцах:
 
-<ol>
- <li><strong>Тысячи</strong>: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.</li>
- <li><strong>Сотни</strong>: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.</li>
- <li><strong>Десятки</strong>: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.</li>
- <li><strong>Единицы</strong>: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.</li>
-</ol>
+1.  **Тысячи**: поставьте единицу в эту колонку, если объявление стиля находится внутри атрибута {{htmlattrxref("style")}} (встроенные стили). Такие объявления не имеют селекторов, поэтому их специфичность всегда просто 1000.
+2.  **Сотни**: поставьте единицу в эту колонку за каждый селектор ID, содержащийся в общем селекторе.
+3.  **Десятки**: поставьте единицу в эту колонку за каждый селектор класса, селектор атрибута или псевдокласс, содержащийся в общем селекторе.
+4.  **Единицы**: поставьте общее число единиц в эту колонку за каждый селектор элемента или псевдоэлемент, содержащийся в общем селекторе.
 
-<div class="note">
-<p><strong>Примечание:</strong> Универсальный селектор (*), комбинаторы (+, &gt;,  ~, '') и псевдокласс отрицания (:not) не влияют на специфичность.</p>
-</div>
+> **Примечание:** Универсальный селектор (\*), комбинаторы (+, >, \~, '') и псевдокласс отрицания (:not) не влияют на специфичность.
 
-<p>Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в <a href="/ru/docs/Web/CSS/CSS_Селекторы">справочнике селекторов</a> MDN.</p>
+Следующая таблица показывает несколько несвязанных примеров, которые помогут вам разобраться. Посмотрите их все и убедитесь, что вы понимаете, почему они обладают той специфичностью, которую мы им дали. Мы ещё не рассмотрели селекторы детально, но вы можете найти подробную информацию о каждом селекторе в [справочнике селекторов](/ru/docs/Web/CSS/CSS_Селекторы) MDN.
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Тысячи</th>
-   <th scope="col">Сотни</th>
-   <th scope="col">Десятки</th>
-   <th scope="col">Единицы</th>
-   <th scope="col">Специфичность</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>h1</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>1</td>
-   <td>0001</td>
-  </tr>
-  <tr>
-   <td><code>h1 + p::first-letter</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>3</td>
-   <td>0003</td>
-  </tr>
-  <tr>
-   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
-   <td>0</td>
-   <td>0</td>
-   <td>2</td>
-   <td>2</td>
-   <td>0022</td>
-  </tr>
-  <tr>
-   <td><code>#identifier</code></td>
-   <td>0</td>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0100</td>
-  </tr>
-  <tr>
-   <td>Без селектора, с правилом внутри атрибута {{htmlattrxref("style")}} элемента.</td>
-   <td>1</td>
-   <td>0</td>
-   <td>0</td>
-   <td>0</td>
-   <td>1000</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Прежде чем мы продолжим, давайте посмотрим на пример в действии.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
-
-<p>Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.</p>
-
-<ul>
- <li>Первые два правила конкурируют за стилизацию цвета фона ссылки  —  второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.</li>
- <li>Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.</li>
- <li>Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.</li>
-</ul>
-
-<div class="note">
-<p><strong>Примечание</strong>: Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, <em>миллион</em> соединённых селекторов <strong>класса</strong> не способны переписать правила <em>одного</em> селектора <strong>id</strong>.</p>
-
-<p>Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда  оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.</p>
-</div>
-
-<h3 id="!important">!important</h3>
-
-<p>Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — <code>!important</code>. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.</p>
-
-<p>Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
-
-<p>Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:</p>
-
-<ol>
- <li>Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.</li>
- <li>Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.</li>
- <li>Оба элемента имеют {{htmlattrxref("class")}} с названием <code>better</code>, но у второго также есть {{htmlattrxref("id")}} с названием <code>winning</code>. Поскольку ID имеют <em>ещё более высокую</em> специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID <em>очень специфичны</em>, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.</li>
- <li>2-й элемент получил красный цвет фона и отсутствие границы. Почему?  Из-за объявления <code>!important</code> во втором правиле — размещение которого после <code>border: none</code> означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание</strong>: Единственный способ переопределить объявление <code>!important</code> –  это включить другое объявление <code>!important</code> в правило <em>с такой же специфичностью</em> позже или в правило с более высокой специфичностью.</p>
-</div>
-
-<p>Полезно знать о существовании <code>!important</code>, чтобы вы понимали, что это такое, когда встретите в чужом коде. <strong>Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости.</strong> <code>!important</code> меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.</p>
-
-<p>Одна из ситуаций, в которой вам, возможно, придётся это использовать,  —  это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.</p>
-
-<h2 id="Влияние_расположения_CSS">Влияние расположения CSS</h2>
-
-<p>Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.</p>
-
-<h2 id="Подведение_итогов">Подведение итогов</h2>
-
-<p>Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:</p>
-
-<ol>
- <li>Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).</li>
- <li>Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).</li>
- <li>Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).</li>
- <li>Важные объявления в авторских таблицах стилей.</li>
- <li>Важные объявления в пользовательских таблицах стилей.</li>
-</ol>
-
-<p>Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования <code>!important</code> в их правилах.</p>
-
-<h2 id="Проверьте_ваши_навыки">Проверьте ваши навыки</h2>
-
-<p>Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Test your skills: the Cascade</a>.</p>
-
-<h2 id="Что_дальше">Что дальше?</h2>
-
-<p>Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.</p>
-
-<p>Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор  изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.</p>
-
-<p>Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.</p>
-
-<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
+| Селектор                                                                             | Тысячи | Сотни | Десятки | Единицы | Специфичность |
+| ------------------------------------------------------------------------------------ | ------ | ----- | ------- | ------- | ------------- |
+| `h1`                                                                                 | 0      | 0     | 0       | 1       | 0001          |
+| `h1 + p::first-letter`                                                               | 0      | 0     | 0       | 3       | 0003          |
+| `li > a[href*="en-US"] > .inline-warning`                                            | 0      | 0     | 2       | 2       | 0022          |
+| `#identifier`                                                                        | 0      | 1     | 0       | 0       | 0100          |
+| Без селектора, с правилом внутри атрибута {{htmlattrxref("style")}} элемента. | 1      | 0     | 0       | 0       | 1000          |
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+Прежде чем мы продолжим, давайте посмотрим на пример в действии.
+
+{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}}
+
+Так что здесь происходит? Прежде всего, нас интересуют только первые семь правил этого примера, и, как вы заметите, мы включили их значения специфичности в комментарий перед каждым правилом.
+
+- Первые два правила конкурируют за стилизацию цвета фона ссылки — второе выигрывает и делает фоновый цвет синим, потому что у него есть дополнительный селектор ID в цепочке: его специфичность 201 против 101.
+- Третье и четвёртое правило конкурируют за стилизацию цвета текста ссылки — второе выигрывает и делает текст белым, потому что, хотя у него на один селектор элемента меньше, отсутствующий селектор заменяется на селектор класса, который оценивается в десять вместо единицы. Таким образом, приоритетная специфичность составляет 113 против 104.
+- Правила 5–7 соревнуются за определение стиля границы ссылки при наведении курсора. Шестой селектор со специфичностью 23 явно проигрывает пятому со специфичностью 24 — у него в цепочке на один селектор элемента меньше. Седьмой селектор, однако, превосходит как пятый, так и шестой — он имеет то же количество подселекторов в цепочке, что и пятый, но один элемент заменён селектором класса. Таким образом, приоритетная специфичность 33 против 23 и 24.
+
+> **Примечание:** Это был условный пример для более простого усвоения. В действительности, каждый тип селектора имеет собственный уровень специфичности, который не может быть замещён селекторами с более низким уровнем специфичности. Например, _миллион_ соединённых селекторов **класса** не способны переписать правила _одного_ селектора **id**.
+>
+> Более правильный способ вычисления специфичности состоит в индивидуальной оценке уровней специфичности, начиная с наивысшего и продвигаясь к самому нижнему, когда это необходимо. Только когда оценки уровня специфичности совпадают, следует вычислять следующий нижний уровень; в противном случае, вы можете пренебречь селекторами с меньшим уровнем специфичности, поскольку они никогда не смогут преодолеть уровни более высокой специфичности.
+
+### !important
+
+Существует специальный элемент CSS, который вы можете использовать для отмены всех вышеперечисленных вычислений, однако вы должны быть очень осторожны с его использованием — `!important`. Он используется, чтобы сделать конкретное свойство и значение самыми специфичными, таким образом переопределяя нормальные правила каскада.
+
+Взгляните на этот пример, где у нас есть два абзаца, один из которых имеет ID.
+
+{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}}
+
+Давайте пройдёмся по этому примеру, чтобы увидеть, что происходит — попробуйте удалить некоторые свойства, чтобы увидеть, что получится, если вам трудно понять:
+
+1.  Вы увидите, что применены значения {{cssxref("color")}} и {{cssxref("padding")}} третьего правила, но {{cssxref("background-color")}} — нет. Почему? Действительно, все три безусловно должны применяться, потому что правила, более поздние в порядке следования, обычно переопределяют более ранние правила.
+2.  Однако вышеприведённые правила выигрывают, потому что селекторы классов имеют более высокую специфичность, чем селекторы элементов.
+3.  Оба элемента имеют {{htmlattrxref("class")}} с названием `better`, но у второго также есть {{htmlattrxref("id")}} с названием `winning`. Поскольку ID имеют _ещё более высокую_ специфичность, чем классы (у вас может быть только один элемент с каждым уникальным ID на странице, но много элементов с одним и тем же классом — селекторы ID _очень специфичны_, на что они и нацелены), красный цвет фона и однопиксельная чёрная граница должны быть применены ко 2-му элементу, причём первый элемент получает серый фоновый цвет и отсутствие границы, как определено классом.
+4.  2-й элемент получил красный цвет фона и отсутствие границы. Почему? Из-за объявления `!important` во втором правиле — размещение которого после `border: none` означает, что это объявление перевесит значение границы в предыдущем правиле, даже если ID имеет более высокую специфичность.
+
+> **Примечание:** Единственный способ переопределить объявление `!important` – это включить другое объявление `!important` в правило _с такой же специфичностью_ позже или в правило с более высокой специфичностью.
+
+Полезно знать о существовании `!important`, чтобы вы понимали, что это такое, когда встретите в чужом коде. **Тем не менее, мы настоятельно рекомендуем вам никогда не использовать его, если в этом нет острой необходимости.** `!important` меняет обычный порядок работы каскада, поэтому он может серьёзно затруднить отладку проблем CSS, особенно в большой таблице стилей.
+
+Одна из ситуаций, в которой вам, возможно, придётся это использовать, — это когда вы работаете с CMS, где вы не можете редактировать модули CSS ядра, и вы действительно хотите переопределить стиль, который нельзя переопределить другим способом. Но, вообще говоря, не стоит использовать этот элемент, если можно этого избежать.
+
+## Влияние расположения CSS
+
+Наконец, также полезно отметить, что важность объявления CSS зависит от того, в какой таблице стилей оно указано — у пользователя есть возможность установить индивидуальные таблицы стилей для переопределения стилей разработчика, например, пользователь может иметь проблемы со зрением и захочет установить размер шрифта на всех посещаемых им веб-страницах в два раза больше нормального размера, чтобы облегчить чтение.
+
+## Подведение итогов
+
+Конфликтующие объявления будут применяться в следующем порядке, с учётом замены более ранних более поздними:
+
+1.  Объявления в таблицах стилей клиентского приложения (например, стили браузера по умолчанию, используемые, когда не заданы другие стили).
+2.  Обычные объявления в пользовательских таблицах стилей (индивидуальные стили устанавливаются пользователем).
+3.  Обычные объявления в авторских таблицах стилей (это стили, установленные нами, веб-разработчиками).
+4.  Важные объявления в авторских таблицах стилей.
+5.  Важные объявления в пользовательских таблицах стилей.
+
+Для таблиц стилей веб-разработчиков имеет смысл переопределить пользовательские таблицы стилей так, чтобы можно было сохранить запланированный дизайн, но иногда у пользователей есть веские причины для переопределения стилей веб-разработчика, как упомянуто выше — это может быть достигнуто с помощью использования `!important` в их правилах.
+
+## Проверьте ваши навыки
+
+Мы охватили много тем в этой статье. А вы смогли запомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите [Test your skills: the Cascade](/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8).
+
+## Что дальше?
+
+Если вы поняли большую часть этой статьи, отлично — вы начали знакомиться с фундаментальными механизмами CSS. Далее мы рассмотрим селекторы подробно.
+
+Если вы не до конца поняли каскад, специфичность и наследование, не волнуйтесь! Это, безусловно, самая сложная вещь из тех, что мы до сих пор изучали в курсе, и даже профессиональные веб-разработчики иногда считают её коварной. Мы советуем вам вернуться к этой статье несколько раз в ходе изучения курса и продолжать обдумывать эту тему.
+
+Обратитесь сюда, если вы столкнётесь со странными проблемами, когда стили применяются не так, как вы ожидаете. Это может быть проблемой специфичности.
+
+{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}
+
+## В этом модуле
+
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+3.  [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.md b/files/ru/learn/css/building_blocks/cascade_tasks/index.md
index 97435a634f821b..1d6efb5b098469 100644
--- a/files/ru/learn/css/building_blocks/cascade_tasks/index.md
+++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.md
@@ -7,46 +7,36 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Cascade_tasks
 original_slug: Learn/CSS/Building_blocks/Каскад_задачи
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
+Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance).
 
+> **Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код.
+>
+> Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел [Оценка или дальнейшая помощь](#оценка_или_дальнейшая_помощь) внизу этой страницы.
 
-<p>Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке <a href="/ru-RU/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a>.</p>
+## Задание 1
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br>
- <br>
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел <a href="#оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> внизу этой страницы.</p>
-</div>
+В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе [Контроль наследования](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C_%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F), чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.
 
-<h2 id="Задание_1">Задание 1</h2>
+![Barely visible yellow links on a white background.](https://mdn.mozillademos.org/files/17146/mdn-cascade.png)
 
-<p>В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе <a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance#%D0%9A%D0%BE%D0%BD%D1%82%D1%80%D0%BE%D0%BB%D1%8C_%D0%BD%D0%B0%D1%81%D0%BB%D0%B5%D0%B4%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F">Контроль наследования</a>,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.</p>
+Посмотрите, сможете ли вы повторить эту картинку в примере ниже.
 
-<p><img alt="Barely visible yellow links on a white background." src="https://mdn.mozillademos.org/files/17146/mdn-cascade.png" style="height: 234px; width: 1244px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}
 
-<p>Посмотрите, сможете ли вы повторить эту картинку в примере ниже.</p>
+> **Примечание:** Для получения оценки или для дальнейшей работы [загрузите исходный код для этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html) в ваш собственный редактор или в онлайн-редактор.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}</p>
+## Оценка или дальнейшая помощь
 
-<div class="blockIndicator note">
-<p>Для получения оценки или для дальнейшей работы <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/cascade/cascade-download.html">загрузите исходный код для этого задания</a> в ваш собственный редактор или в онлайн-редактор.</p>
-</div>
+Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.
 
-<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:
 
-<p>Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.</p>
+1.  Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/). Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
+2.  Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваше сообщение должно включать:
 
-<p>Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:</p>
-
-<ol>
- <li>Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете сами написать код или использовать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.</li>
- <li>Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать:
-  <ul>
-   <li>Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").</li>
-   <li>Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.</li>
-   <li>Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.</li>
-   <li>Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.</li>
-  </ul>
- </li>
-</ol>
+    - Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
+    - Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
+    - Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
+    - Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
diff --git a/files/ru/learn/css/building_blocks/debugging_css/index.md b/files/ru/learn/css/building_blocks/debugging_css/index.md
index 078ed1281399be..529be67eec614a 100644
--- a/files/ru/learn/css/building_blocks/debugging_css/index.md
+++ b/files/ru/learn/css/building_blocks/debugging_css/index.md
@@ -3,198 +3,180 @@ title: Отладка CSS
 slug: Learn/CSS/Building_blocks/Debugging_CSS
 translation_of: Learn/CSS/Building_blocks/Debugging_CSS
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
 
-<p>Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.</p>
+Порой, при написании CSS, вы будете сталкиваться с проблемой, при которой будет казаться, что CSS не делает того, чего вы ожидаете от него. Возможно, вы считаете, что определённый селектор должен соответствовать элементу, но ничего не происходит, или поле имеет размер, отличный от ожидаемого. Эта статья поможет вам с тем, как отладить CSS проблемы и покажет вам как DevTools (инструменты разработчика), включённые во все современные браузеры, могут помочь разобраться с тем, что происходит.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задачи:</th>
-   <td>
-    <p>Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Basic computer literacy, [basic software installed](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Задачи:             | Изучить основы того, что такое DevTools и как выполнять простую инспекцию и редактирование CSS.                                                                                                                                                                                                                                                                                                                                                                          |
 
-<h2 id="Как_получить_доступ_к_DevTools_браузера">Как получить доступ к DevTools браузера</h2>
+## Как получить доступ к DevTools браузера
 
-<p>Статья <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.</p>
+Статья [What are browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) это обновлённое руководство объясняющее как получить доступ к инструментам разных браузеров и платформ. Хотя вы можете выбрать в основном разрабатывать в конкретном браузере и поэтому инструменты, включённые в этот браузер, будут вам знакомы больше всего, стоит знать, как получать доступ к инструментам и в других браузерах. Это поможет вам если вы наблюдаете разное отображение среди разных браузеров.
 
-<p>Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Grid Layouts</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a>, и <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a>. Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.</p>
+Вы также обнаружите, что браузеры фокусировались на различных областях при создании своих DevTools. Например в Firefox существует несколько замечательных инструментов для визуальной работы с CSS Layout (разметкой), позволяющих вам проводить инспекцию и править [Grid Layouts](/ru/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts), [Flexbox](/ru/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts), и [Shapes](/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes). Тем не менее, все другие браузеры имеют схожие фундаментальные инструменты, например для инспекции свойств и значений применённых к элементам на вашей странице и для выполнения изменений к ним в редакторе.
 
-<p>В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">файл примера</a>. Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.</p>
+В этом уроке мы рассмотрим некоторые полезные функции Firefox DevTools для работы с CSS. Для того чтобы сделать это я буду использовать [файл примера](https://mdn.github.io/css-examples/learn/inspecting/inspecting.html). Загрузите его в новой вкладке если хотите следовать и откройте ваш DevTools как описано в статье, ссылка на которую дана выше.
 
-<h2 id="DOM_vs_View_Source">DOM vs View Source</h2>
+## DOM vs View Source
 
-<p>То, что может сбить с толку новичков в DevTools, —  это разница между тем, что вы видите когда <a href="/en-US/docs/Tools/View_source">просматриваете источник</a> веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML панели</a> DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.</p>
+То, что может сбить с толку новичков в DevTools, — это разница между тем, что вы видите когда [просматриваете источник](/ru/docs/Tools/View_source) веб-страницы или смотрите на HTML файл который поместили на сервер и то что вы видите на [HTML панели](/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane) DevTools. Хотя это выглядит примерно так же, как то, что вы видите через View Source, существуют некоторые отличия.
 
-<p>В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали <code>&lt;h2&gt;</code>, но закрыли <code>&lt;/h3&gt;</code>, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать <code>&lt;h2&gt;</code> с <code>&lt;/h2&gt;</code>. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.</p>
+В визуализированном DOM браузер мог скорректировать некоторый плохо-написанный HTML за вас. Если вы неправильно закрыли элемент, например открывали `<h2>`, но закрыли `</h3>`, браузер поймёт, что вы хотели сделать и HTML в DOM будет правильно закрывать `<h2>` с `</h2>`. Браузер также нормализует весь HTML,а DOM также покажет любые изменения сделанные через JavaScript.
 
-<p>View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML дерево</a> в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.</p>
+View Source же для сравнения — это просто исходный код HTML, хранящийся на сервере. [HTML дерево](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree) в вашем DevTools показывает, что именно браузер отображает в любой момент времени, что даёт вам представление от том, что действительно происходит.
 
-<h2 id="Инспекция_применённого_CSS">Инспекция применённого CSS</h2>
+## Инспекция применённого CSS
 
-<p>Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав <em>Inspect</em>, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом <code>box1</code>; это первый элемент на странице с блоком, ограниченным рамками вокруг него.</p>
+Выбирать элемент на вашей странице можно либо правым/ctrl-кликом по нему и выбрав _Inspect_, либо выбрав его из дерева HTML в левой панели DevTools. Попробуйте выбрать элемент с классом `box1`; это первый элемент на странице с блоком, ограниченным рамками вокруг него.
 
-<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p>
+![The example page for this tutorial with DevTools open.](https://mdn.mozillademos.org/files/16606/inspecting1.png)
 
-<p>Если вы посмотрите на <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу <code>box1</code> и также CSS который наследуется блоком от предков, в этом случае от <code>&lt;body&gt;</code>. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.</p>
+Если вы посмотрите на [Rules view](/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view) справа от вашего HTML, вы должны увидеть свойства и значения CSS применённые к элементу. Вы увидите правила, напрямую применённые к классу `box1` и также CSS который наследуется блоком от предков, в этом случае от `<body>`. Это полезно в случае, если вы видите, что применяется какой-либо CSS, который вы не ожидали. Вполне возможно, что он наследуется от родительского элемента и вам необходимо добавить правило, чтобы переписать его в контексте этого элемента.
 
-<p>Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись <code>margin</code>.</p>
+Также полезна возможность расширения (развёртывания) свойств коротких записей. В нашем примере используется короткая запись `margin`.
 
-<p><strong>Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.</strong></p>
+**Кликните по маленькой стрелке для того, чтобы развернуть вид, показывающий полную запись различных свойств и значений.**
 
-<p><strong>Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.</strong></p>
+**Вы можете переключать значения в Rules view в положение включено или выключено если эта панель активна — если навести на неё курсор мыши, появятся флажки. Снимите флажок правила, например, border-radius, и CSS перестанет применяться.**
 
-<p>Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.</p>
+Вы можете использовать это чтобы делать сравнения по типу A/B, принимая решение если что-то выглядит лучше с применённым правилом или нет, а также это помогает в отладке — например если layout не в порядке и вы пытаетесь разобраться какое свойство является причиной проблемы.
 
-<h2 id="Редактирование_значений">Редактирование значений</h2>
+## Редактирование значений
 
-<p>В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.</p>
+В дополнение к включению и выключению свойств, вы можете редактировать их значения. Возможно, вам захочется посмотреть будет ли другой цвет выглядеть лучше или захотите настроить размер чего-либо. DevTools поможет вам сэкономить кучу времени редактируя таблицу стиля и перезагружая страницу.
 
-<p><strong>Выбрав <code>box1</code>, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени. </strong> <strong>Аналогичным образом вы можете изменить ширину или стиль границ.</strong></p>
+**Выбрав `box1`, кликните на образчик (маленький цветной круг) который показывает цвет, применённый к границе. Откроется панель выбора цвета и сможете попробовать некоторые другие цвета; это действие обновится на странице в режиме реального времени.** **Аналогичным образом вы можете изменить ширину или стиль границ.**
 
-<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p>
+![DevTools Styles Panel with a color picker open.](https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png)
 
-<h2 id="Добавление_нового_свойства">Добавление нового свойства</h2>
+## Добавление нового свойства
 
-<p>Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов <code>&lt;body&gt;</code>, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесёте изменения в ваше CSS файл.</p>
+Используя DevTools вы можете добавлять новые свойства. Возможно, вы осознали, что не хотите, чтобы ваш блок наследовал размер шрифта элементов `<body>`, а хотите установить его собственный конкретный размер. Вы можете попробовать это в DevTools до того, как внесёте изменения в ваше CSS файл.
 
-<p><strong>Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав <code>font-size</code>, вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.</strong></p>
+**Вы можете кликнуть по закрывающей фигурной скобке в правиле чтобы начать вводить новое объявление в нем, с этого момента вы можете начинать вводить новое свойство и DevTools покажет список автозаполнения подходящих свойств. Выбрав `font-size`, вводите значение, которое хотите попробовать. Вы также можете кликнуть на кнопку + чтобы добавить дополнительное правило с тем же селектором и добавить ваши новые правила туда.**
 
-<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p>
+![The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open](https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p>
-</div>
+> **Примечание:** Также существуют другие полезные функции в Rules view, например объявления с не валидными значениями зачёркнуты. Вы можете узнать больше в [Examine and edit CSS](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS).
 
-<h2 id="Понимание_модели_блоков">Понимание модели блоков</h2>
+## Понимание модели блоков
 
-<p>В предыдущем уроке мы обсудили <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">модель блоков</a> и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.</p>
+В предыдущем уроке мы обсудили [модель блоков](/ru/docs/Learn/CSS/Building_blocks/The_box_model) и тот факт, что у нас есть альтернативная модель блоков, которая изменяет способ расчёта размера элементов основываясь на размере который вы им задаёте, плюс padding и границы. DevTools может действительно помочь вам понять, как вычисляется размер элемента.
 
-<p><a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.</p>
+[Layout view](/ru/docs/Tools/Page_Inspector/UI_Tour#Layout_view) показывает вам диаграмму блочной модели выбранного элемента, вместе с описанием свойств и значений, которые изменяют способ расположения элемента. Это включает описание свойств, которые вы могли и не использовать напрямую к элементу, но которые имеют набор начальных значений.
 
-<p>В этой панели одним из детальных свойств является свойство <code>box-sizing</code>, которое контролирует какую блочную модель использует элемент.</p>
+В этой панели одним из детальных свойств является свойство `box-sizing`, которое контролирует какую блочную модель использует элемент.
 
-<p><strong>Сравните два блока с классами <code>box1</code> и <code>box2</code>. Они оба имеют одинаковую ширину (400px) применённую к ним, однако <code>box1</code> визуально шире. В layout panel вы можете увидеть, что он использует <code>content-box</code>. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding </strong><strong>и ширину границ.</strong></p>
+**Сравните два блока с классами `box1` и `box2`. Они оба имеют одинаковую ширину (400px) применённую к ним, однако `box1` визуально шире. В layout panel вы можете увидеть, что он использует `content-box`. Это значение, которое принимает размер, который вы даёте элементу и затем добавляет padding** **и ширину границ.**
 
-<p>Элемент с классом <code>box2</code> использует <code>border-box</code>, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае <code>width: 400px</code>.</p>
+Элемент с классом `box2` использует `border-box`, поэтому здесь padding и граница вычтены из размера, который вы дали элементу. Это означает, что пространство, занимаемое на странице блоком, соответствует указанному вами размеру — в нашем случае `width: 400px`.
 
-<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p>
+![The Layout section of the DevTools](https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Узнать больше на <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p>
-</div>
+> **Примечание:** Узнать больше на [Examining and Inspecting the Box Model](/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model).
 
-<h2 id="Решение_проблем_специфичности">Решение проблем специфичности</h2>
+## Решение проблем специфичности
 
-<p>Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнётесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях - это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.</p>
+Порой во время разработки, в частности когда вам нужно отредактировать CSS на существующем сайте вы, вы столкнётесь с трудностями применения некоторого CSS. Вне зависимости от того, что вы делаете, кажется, что элемент просто не реагирует на CSS. Что же обычно происходит в таких ситуациях - это то, что более специфичный селектор переопределяет ваши изменения и в таких случаях DevTools действительно поможет вам.
 
-<p>В нашем примере два слова обёрнуты в элемент <code>&lt;em&gt;</code>. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:</p>
+В нашем примере два слова обёрнуты в элемент `<em>`. Один отображается оранжевым, а второй ярко-розовым. В CSS мы применили:
 
-<pre class="brush: css">em {
+```css
+em {
   color: hotpink;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Кроме того в таблице стилей есть правило с селектором <code>.special</code>:</p>
+Кроме того в таблице стилей есть правило с селектором `.special`:
 
-<pre class="brush: css">.special {
+```css
+.special {
   color: orange;
-}</pre>
+}
+```
 
-<p>Как вы помните из урока <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">каскад и наследование</a> где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.</p>
+Как вы помните из урока [каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) где мы обсуждали специфичность, селекторы классов являются более специфичными чем селекторы элементов, и поэтому это то значение которое применяется. DevTools может помочь вам найти такие проблемы, особенно если информация закопана где-то в дебрях огромной таблицы стилей.
 
-<p><strong>Проведите инспекцию <code>&lt;em&gt;</code> с классом <code>.special</code> и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство <code>color</code> применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента. </strong></p>
+**Проведите инспекцию `<em>` с классом `.special` и DevTools покажет вам что оранжевый это цвет который применяется, а также отобразит вам свойство `color` применённое к em зачёркнутым. Теперь вы можете видеть, что класс переопределяет селектор элемента.**
 
-<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p>
+![Selecting an em and looking at DevTools to see what is over-riding the color.](https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png)
 
-<h2 id="Узнайте_больше_о_Firefox_DevTools">Узнайте больше о Firefox DevTools</h2>
+## Узнайте больше о Firefox DevTools
 
-<p>На MDN имеется много информации о Firefox DevTools. Взгляните на основной <a href="/en-US/docs/Tools">раздел DevTools</a>, а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p>
+На MDN имеется много информации о Firefox DevTools. Взгляните на основной [раздел DevTools](/ru/docs/Tools), а больше деталей о вещах которые коротко рассмотрели в этом уроке смотрите [The How To Guides](/ru/docs/Tools/Page_Inspector#How_to).
 
-<h2 id="Отладка_проблем_в_CSS">Отладка проблем в CSS</h2>
+## Отладка проблем в CSS
 
-<p>DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.</p>
+DevTools может помочь при решении проблем CSS, итак, когда вы окажетесь в ситуации, где CSS ведёт себя не так, как вы ожидаете, как же вам следует решать эту проблему? Следующие шаги должны помочь.
 
-<h3 id="Сделайте_шаг_назад">Сделайте шаг назад</h3>
+### Сделайте шаг назад
 
-<p>Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаёте думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.</p>
+Любая проблема кодирования может быть неприятной, особенно проблемы CSS, потому что зачастую вы не получаете каких-либо сообщений об ошибках чтобы найти решение в интернете. Если вы начинаете разочаровываться оторвитесь от проблемы на время — прогуляйтесь, попейте, пообщайтесь с коллегами или займите себя чем-нибудь другим на время. Иногда решение появляется магическим образом, когда вы перестаёте думать об этой проблеме, а даже если нет, работать над ней гораздо проще, когда вы чувствуете себя отдохнувшими.
 
-<h3 id="Валидны_ли_ваши_HTML_и_CSS">Валидны ли ваши HTML и CSS?</h3>
+### Валидны ли ваши HTML и CSS?
 
-<p>Браузеры ожидают, что CSS и HTML написаны корректно, однако в это же время браузеры очень снисходительны и сделают всё чтобы отобразить вашу веб-страницу даже если у вас есть ошибки в разметке и таблице стилей. Если у вас есть ошибки в коде, то браузеру нужно угадать что вы имели в виду, и он может принять решение не такое какое было у вас в голове. И дополнительно, два разных браузера могут решать проблему двумя разными способами. Поэтому хорошим первым шагом является запуск вашего HTML и CSS в валидаторе чтобы выявить и исправить ошибки.</p>
+Браузеры ожидают, что CSS и HTML написаны корректно, однако в это же время браузеры очень снисходительны и сделают всё чтобы отобразить вашу веб-страницу даже если у вас есть ошибки в разметке и таблице стилей. Если у вас есть ошибки в коде, то браузеру нужно угадать что вы имели в виду, и он может принять решение не такое какое было у вас в голове. И дополнительно, два разных браузера могут решать проблему двумя разными способами. Поэтому хорошим первым шагом является запуск вашего HTML и CSS в валидаторе чтобы выявить и исправить ошибки.
 
-<ul>
- <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li>
- <li><a href="https://validator.w3.org/">HTML validator</a></li>
-</ul>
+- [CSS Validator](https://jigsaw.w3.org/css-validator/)
+- [HTML validator](https://validator.w3.org/)
 
-<h3 id="Поддерживаются_ли_свойство_и_значение_браузером_в_котором_вы_тестируете">Поддерживаются ли свойство и значение браузером в котором вы тестируете?</h3>
+### Поддерживаются ли свойство и значение браузером в котором вы тестируете?
 
-<p>Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.</p>
+Браузеры попросту игнорируют CSS который они не понимают. Если свойство или значение, которое вы используете не поддерживается браузером, в котором вы тестируете, то ничего не "сломается", кроме того, что тот CSS не будет применён. Обычно DevTools выделяет неподдерживаемые свойства и значения каким-либо образом. На скриншоте ниже браузер не поддерживает значение "подсветки" (subgrid) {{cssxref("grid-template-columns")}}.
 
-<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p>
+![Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported.](https://mdn.mozillademos.org/files/16641/no-support.png)
 
-<p>Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства  {{cssxref("shape-outside")}}.</p>
+Вы также можете смотреть таблицы совместимости браузеров в конце всех страниц свойств MDN. Они показывают, что браузер поддерживает это свойство, часто "ломается", если есть поддержка только для какого-то использования свойства, и нет для других. Таблица ниже показывает данные совместимости свойства {{cssxref("shape-outside")}}.
 
-<p>{{compat("css.shape-outside")}}</p>
+{{compat("css.shape-outside")}}
 
-<h3 id="Не_переопределяется_ли_ваш_CSS_чем-нибудь_ещё">Не переопределяется ли ваш CSS чем-нибудь ещё?</h3>
+### Не переопределяется ли ваш CSS чем-нибудь ещё?
 
-<p>Это тот момент, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.</p>
+Это тот момент, когда изученная вами информация о специфичности придёт вам на помощь. Если у вас имеется что-то более специфичное, что может переписывать то, что вы пытаетесь сделать, то вы можете вступить в очень расстраивающую игру пытаясь выяснить что же именно. Однако, как описано выше, DevTools покажет вам какой CSS применяется, и вы сможете решить, как сделать новый селектор достаточно специфичным чтобы переопределить его.
 
-<h3 id="Сделайте_сокращённый_контрольный_пример_проблемы">Сделайте сокращённый контрольный пример проблемы</h3>
+### Сделайте сокращённый контрольный пример проблемы
 
-<p>Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.</p>
+Если проблема не решена шагами, описанными выше, тогда вам надо будет сделать своего рода расследование. Лучшее что можно сделать в этом случае это создать нечто известное как сокращенный контрольный пример. Возможность "уменьшить проблему" — действительно полезный навык. Он поможет вам найти проблемы как в вашем собственном коде, так в коде ваших коллег, а также позволит вам сообщать об ошибках и более эффективно обращаться за помощью.
 
-<p>Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля.  Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.</p>
+Сокращённый контрольный пример — это пример кода, который демонстрирует проблему самым простым способом с удалением несвязанного окружающего контента и стиля. Это часто будет означать удаление проблемного кода из вашего макета (layout), чтобы сделать небольшой пример, который показывает только этот код или функцию.
 
-<p>Создание сокращённого контрольного примера:</p>
+Создание сокращённого контрольного примера:
 
-<ol>
- <li>Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как <a href="https://codepen.io/">CodePen</a> являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.</li>
- <li>Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript <em>устраняет</em> проблему, тогда удалите столько JavaScript, сколько сможете, оставляя всё что вызывает проблему.</li>
- <li>Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.</li>
- <li>Удалите весь CSS который не влияет на проблему.</li>
-</ol>
+1.  Если ваша разметка генерируется динамически — например через CMS — сделайте статичную версию вывода, которая показывает проблему. Сайты обмена кодами как [CodePen](https://codepen.io/) являются полезными для размещения сокращённых контрольных примеров, так как они доступны онлайн, и вы легко можете поделиться с коллегами. Вы можете начать просматривать страницу во View Source и скопировать HTML в CodePen, затем взять релевантный CSS и JavaScript и включить их тоже. После этого вы можете проверить очевидна ли проблема.
+2.  Если удаление JavaScript не устраняет проблему, то не включайте JavaScript. Если же удаление JavaScript _устраняет_ проблему, тогда удалите столько JavaScript, сколько сможете, оставляя всё что вызывает проблему.
+3.  Удалите весь HTML который не влияет на проблему. Удалите компоненты или даже главные элементы макета. Опять же постарайтесь добиться наименьшего количества кода, который все ещё показывает проблему.
+4.  Удалите весь CSS который не влияет на проблему.
 
-<p>В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.</p>
+В процессе вы можете обнаружить что причиняет проблему или, хотя бы, сможете включать или выключать её путём удаления чего-то конкретного. Стоит добавлять какие-то комментарии к вашему коду по ходу изучения вещей. Если вам надо попросить помощи, то они покажут человеку, помогающему вам что вы уже пытались сделать. Это может дать вам достаточно информации для поиска возможных проблем и обходных путей.
 
-<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p>
+If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.
 
-<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p>
+In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's [bugzilla site](https://bugzilla.mozilla.org)).
 
-<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p>
+As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+1.  [Cascade and inheritance](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Type, class, and ID selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Attribute selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Pseudo-classes and pseudo-elements](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Combinators](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [The box model](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Backgrounds and borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Handling different text directions](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Overflowing content](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Sizing items in CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Images, media, and form elements](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Styling tables](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Debugging CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Organizing your CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
index a54e625db16fc3..7fb724ac4f976e 100644
--- a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
+++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.md
@@ -4,121 +4,91 @@ slug: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension
 original_slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
 
-<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div>
+Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.
 
-<p class="summary">Вы многое прошли в этом модуле, и должно быть вас посетило это прекрасное чувство, что дошли до конца! Последний шаг перед тем, как двигаться дальше, это попытка пройти проверку по материалам модуля — это включает в себя ряд соответствующих упражнений, которые должны быть выполнены для того, чтобы создать заключительный проект — визитка, карточка игрока, профиль в социальной сети.</p>
+| Предварительно: | Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля. |
+| --------------- | ------------------------------------------------------------------------------ |
+| Цель:           | Проверка понимания основной теории, синтаксиса и техник CSS.                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительно:</th>
-   <td>Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Проверка понимания основной теории, синтаксиса и техник CSS.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Отправной_пункт">Отправной пункт</h2>
-
-<p>Чтобы начать проверку, вы должны:</p>
-
-<ul>
- <li>Перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML файл для упражнения</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">связанный файл изображения</a>, сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.</li>
- <li>Скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">текстовый файл с исходным CSS</a> —  в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.</li>
-</ul>
-
-<div class="note">
-<p><strong>Примечание</strong>: Вместо этого вы можете использовать для проверки такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать <a href="https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">этот URL</a> чтобы указать элементу <code>&lt;img&gt;</code> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <code>&lt;style&gt;</code> в заголовке документа.</p>
-</div>
-
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
-
-<p>Вам предоставили некоторый исходный HTML и изображение, и нужно написать необходимые CSS-правила, чтобы стилизовать это в маленькую онлайн-визитку, которая может, возможно, стать картой игрока или профилем в социальных сетях. Следующие разделы описывают, что вам нужно сделать.</p>
-
-<p>Первоначальные настройки:</p>
-
-<ul>
- <li>Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например <code>style.css</code>.</li>
- <li>Подключите ваш CSS к вашему файлу HTML с помощью элемента <code>&lt;link&gt;</code>.</li>
- <li>Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.</li>
- <li>Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.</li>
-</ul>
-
-<p>Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:</p>
-
-<ul>
- <li>Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.</li>
- <li>Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
-  <ul>
-   <li>Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.</li>
-   <li>Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.</li>
-   <li>Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.</li>
-   <li>Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).</li>
-  </ul>
- </li>
- <li>Осторожно! В предоставленных наборах правил есть две ошибки. Используя любую технику, которую вы знаете, отследите их и исправьте, прежде чем двигаться дальше.</li>
-</ul>
-
-<p>Какие новые наборы правил надо написать:</p>
-
-<ul>
- <li>Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в <code>em</code>s.</li>
- <li><code>margin</code> по умолчанию, применяемый браузером к элементам <code>&lt;h2&gt;</code> и <code>&lt;p&gt;</code>, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.</li>
- <li>Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент <code>&lt;article&gt;</code>), нужно задать ему определённую высоту. Установите высоту <code>&lt;article&gt;</code> в 120px, но выраженную в <code>em</code>s. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.</li>
- <li>Напишите набор правил, который задаёт тегу <code>&lt;h2&gt;</code> удобный размер шрифта 20px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.</li>
- <li>Напишите набор правил, который задаёт тегу <code>&lt;p&gt;</code> внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в <code>em</code>s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.</li>
- <li>В качестве последнего штриха задайте параграфу внутри <code>&lt;article&gt;</code> соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом <code>&lt;h2&gt;</code> и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.</li>
-</ul>
-
-<div class="note">
-<p><strong>Примечание</strong>: Имейте в виду, что второй набор правил устанавливает <code>font-size: 10px;</code> для элемента<code>&lt;html&gt;</code> — это означает, что для любых потомков <code>&lt;html&gt;</code> <code>em</code> будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и <code>&lt;html&gt;</code>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).</p>
-</div>
-
-<p>Другие вещи для размышления:</p>
-
-<ul>
- <li>Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.</li>
- <li>Вы должны включить <code>.card</code> в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.</li>
-</ul>
-
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
-
-<ul>
- <li>Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.</li>
- <li>При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (<code>&lt;html&gt;</code>), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение <code>em</code>, по крайней мере, в таком простом случае как этот.</li>
-</ul>
-
-<h2 id="Образец">Образец</h2>
-
-<p>На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:</p>
-
-<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="business-card.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Проверка">Проверка</h2>
-
-<p>Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">теме обсуждения об этом упражнении</a>, или в канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!</p>
-
-<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/ru/docs/Learn/CSS/First_steps">Вступление в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured">Синтаксис CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Введение в селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Простые селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы по атрибутам</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы и множественные селекторы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">CSS значения и единицы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскадность и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Задание: Основы понимания CSS</a></li>
-</ul>
+## Отправной пункт
+
+Чтобы начать проверку, вы должны:
+
+- Перейти и скачать [HTML файл для упражнения](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html) и [связанный файл изображения](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg), сохранить их в новую директорию на локальном компьютере. Если вы хотите использовать свой собственный файл изображения и вписать своё имя, то пожалуйста — только убедитесь, что изображение квадратное.
+- Скачайте [текстовый файл с исходным CSS](https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt) — в нем содержится набор исходных селекторов и наборов правил, которые вы должны изучить и объединить, чтобы пройти часть этой проверки.
+
+> **Примечание:** Вместо этого вы можете использовать для проверки такие сайты как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/). Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать [этот URL](https://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg) чтобы указать элементу `<img>` файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент `<style>` в заголовке документа.
+
+## Краткое описание проекта
+
+Вам предоставили некоторый исходный HTML и изображение, и нужно написать необходимые CSS-правила, чтобы стилизовать это в маленькую онлайн-визитку, которая может, возможно, стать картой игрока или профилем в социальных сетях. Следующие разделы описывают, что вам нужно сделать.
+
+Первоначальные настройки:
+
+- Прежде всего, создайте новый файл в той же директории, что и ваши HTML и файл изображения. Назовите его как-нибудь образно, например `style.css`.
+- Подключите ваш CSS к вашему файлу HTML с помощью элемента `<link>`.
+- Первые два набора правил в исходном файле CSS ваши бесплатно! После того, как вы закончите радоваться своей удаче, скопируйте и вставьте их в верхнюю часть вашего нового файла CSS. Используйте их в качестве теста, чтобы убедиться, что ваш CSS правильно применяется к HTML.
+- Над этими двумя правилами добавьте CSS-комментарий, что это набор общих стилей для всей страницы. "Общие стили страницы" подойдут. Также добавьте ещё три комментария в нижней части CSS-файла, чтобы отметить стили, соответствующие для настройки контейнера карты, стили, соответствующие для верхнего и нижнего колонтитулов, а также стили, соответствующие для основного содержимого визитной карточки. Отныне новые стили, добавленные в таблицу стилей, должны быть размещены в соответствующем месте.
+
+Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:
+
+- Далее мы хотели бы, чтобы вы посмотрели на четыре селектора и рассчитали специфичность для каждого из них. Запишите их где-нибудь, где они могут быть найдены позже, например, в комментарии в верхней части CSS.
+- Теперь пришло время сопоставить правильный селектор и правильный набор правил! У вас есть четыре пары селекторов и набора правил для сопоставления в ваших ресурсах CSS. Сделайте это сейчас и добавьте их в файл CSS. Вам нужно сделать:
+
+  - Задайте основному контейнеру карты фиксированную ширину/высоту, сплошной цвет фона, границу и радиус границы (закруглённые углы!), помимо прочего.
+  - Задайте заголовку градиент фона, который идёт от тёмного к светлому, плюс закруглённые углы, которые вписываются в закруглённые углы, заданные для главного контейнера карты.
+  - Задайте для футера градиент фона, переходящий от светлого к тёмному, а также скруглённые углы, которые вписываются в скруглённые углы контейнера основной карты.
+  - Сместите изображение вправо, чтобы оно прилипло к правой стороне основного содержимого визитной карточки, и придайте ему максимальную высоту 100% (хитрый трюк, который гарантирует, что он будет растягиваться/сжиматься, чтобы оставаться на той же высоте, что и его родительский контейнер, независимо от того, какой высоты он становится).
+
+- Осторожно! В предоставленных наборах правил есть две ошибки. Используя любую технику, которую вы знаете, отследите их и исправьте, прежде чем двигаться дальше.
+
+Какие новые наборы правил надо написать:
+
+- Напишите набор правил, предназначенный как для заголовка, так и для футера карты, задавая им вычисленную общую высоту 50 пикселей (включая высоту содержимого 30 пикселей и внутренние отступы (padding) 10 пикселей со всех сторон.) Но выразите это в `em`s.
+- `margin` по умолчанию, применяемый браузером к элементам `<h2>` и `<p>`, будет мешать нашему дизайну, поэтому напишите правило, которое устанавливает этот параметр для указанных элементов равным 0.
+- Чтобы изображение не вылезало за пределы основного содержимого визитки (элемент `<article>`), нужно задать ему определённую высоту. Установите высоту `<article>` в 120px, но выраженную в `em`s. Также задайте ему полупрозрачный чёрный цвет фона, в результате получится чуть более тёмный оттенок, который позволяет цвету фона немного просвечивать красным цветом.
+- Напишите набор правил, который задаёт тегу `<h2>` удобный размер шрифта 20px (но выраженный в `em`s) и соответствующую высоту строки, чтобы поместить её в центр поля содержимого заголовка. Напомним, что высота окна содержимого (content box) должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
+- Напишите набор правил, который задаёт тегу `<p>` внутри нижнего колонтитула удобный размер шрифта 15px (но выраженный в `em`s) и соответствующую высоту строки, чтобы поместить его в центр окна содержимого нижнего колонтитула. Напомним, что высота окна содержимого должна быть 30px — это даёт вам все числа, необходимые для вычисления высоты строки.
+- В качестве последнего штриха задайте параграфу внутри `<article>` соответствующее значение отступа (padding), чтобы его левый край выровнялся с тегом `<h2>` и нижним параграфом, и установите его цвет достаточно светлым, чтобы его было легко читать.
+
+> **Примечание:** Имейте в виду, что второй набор правил устанавливает `font-size: 10px;` для элемента`<html>` — это означает, что для любых потомков `<html>` `em` будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идёт речь, нет предков, находящихся в иерархии между ними и `<html>`, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).
+
+Другие вещи для размышления:
+
+- Вы получите бонусные баллы, если напишите объявления своего CSS в отдельных строках, чтобы обеспечить максимальную читаемость.
+- Вы должны включить `.card` в начале цепочки селекторов во всех ваших правилах, чтобы эти правила не мешали стилизации каких-либо других элементов, в случае если визитная карточка должна быть помещена на страницу с загрузкой другого контента.
+
+## Советы и подсказки
+
+- Вам не нужно каким-либо образом редактировать HTML, за исключением подключения к нему CSS.
+- При попытке определить значение em вам нужно представить определённую величину в пикселях. Подумайте о том, какой размер базового шрифта имеет корневой элемент (`<html>`), и на сколько его нужно умножить, чтобы получить желаемое значение. Это даст вам значение `em`, по крайней мере, в таком простом случае как этот.
+
+## Образец
+
+На следующем снимке экрана показан образец того, как должен выглядеть готовый дизайн:
+
+![A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.](business-card.png)
+
+## Проверка
+
+Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путём: спросив в [теме обсуждения об этом упражнении](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682), или в канале [#mdn](irc://irc.mozilla.org/mdn) IRC на [Mozilla IRC](https://wiki.mozilla.org/IRC). Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путём обмана!
+
+{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+
+## В этом модуле
+
+- [Вступление в CSS](/ru/docs/Learn/CSS/First_steps)
+- [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+- [Синтаксис CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+- [Введение в селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+- [Простые селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+- [Селекторы по атрибутам](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+- [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+- [Комбинаторы и множественные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+- [CSS значения и единицы](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+- [Каскадность и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+- [Блочная модель](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+- [Отладка CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS)
+- [Задание: Основы понимания CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension)
diff --git a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md
index 179bfbd5e42902..3e089a1b33fc31 100644
--- a/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md
+++ b/files/ru/learn/css/building_blocks/handling_different_text_directions/index.md
@@ -3,145 +3,131 @@ title: Изменение направления текста
 slug: Learn/CSS/Building_blocks/Handling_different_text_directions
 translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
 
-<p>Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаём границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).</p>
+Многие свойства и значения, с которыми мы столкнулись до сих пор при изучении CSS, были привязаны к физическим размерам нашего экрана. Мы создаём границы, например, сверху, справа, снизу и слева от коробки.Эти физические размеры очень точно соответствуют контенту, который просматривается по горизонтали, и по умолчанию Интернет имеет тенденцию поддерживать языки с письмом слева направо (например, английский или французский) лучше, чем языки с письмом справа налево (например, арабский).
 
-<p>Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.</p>
+Однако в последние годы CSS развивался чтобы лучше поддерживать разную направленность контента, включая контент с направлением справа налево, а также контент сверху вниз (например, в японском языке) - эти разные направления называются режимами письма. По мере того, как вы продвигаетесь в обучении и начинаете работать с макетом, понимание режимов письма будет вам очень полезно, поэтому мы сейчас и познакомимся с ними.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять важность режимов письма для современного CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Prerequisites: | Basic computer literacy, [basic software installed](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:          | Понять важность режимов письма для современного CSS.                                                                                                                                                                                                                                                                                                                                                                                                                     |
 
-<h2 id="Какие_бывают_режимы_письма">Какие бывают режимы письма?</h2>
+## Какие бывают режимы письма?
 
-<p>Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.</p>
+Режим письма в CSS определяет, идёт ли текст по горизонтали или по вертикали. Свойство {{cssxref ("writing-mode")}} позволяет нам переключаться из одного режима письма в другой. Для этого вам не обязательно работать на языке, который использует режим вертикального письма - вы также можете изменить режим письма частей вашего макета для творческих целей.
 
-<p>В приведённом ниже примере заголовок отображается с использованием <code>writing-mode: vertical-rl</code>. Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.</p>
+В приведённом ниже примере заголовок отображается с использованием `writing-mode: vertical-rl`. Теперь текст идёт вертикально. Вертикальный текст часто используется в графическом дизайне и может быть способом добавить более интересный вид вашему веб-дизайну.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}
 
-<p>Три возможных значения свойства  <code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code>:</p>
+Три возможных значения свойства [`writing-mode`](/en-US/docs/Web/CSS/writing-mode):
 
-<ul>
- <li><code>horizontal-tb</code>: Направление потока блока сверху вниз. Предложения идут горизонтально.</li>
- <li><code>vertical-rl</code>: Направление потока блоков справа налево. Предложения идут вертикально.</li>
- <li><code>vertical-lr</code>: Направление потока блока слева направо. Предложения идут вертикально.</li>
-</ul>
+- `horizontal-tb`: Направление потока блока сверху вниз. Предложения идут горизонтально.
+- `vertical-rl`: Направление потока блоков справа налево. Предложения идут вертикально.
+- `vertical-lr`: Направление потока блока слева направо. Предложения идут вертикально.
 
-<p>Таким образом, свойство <code>writing-mode</code> на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.</p>
+Таким образом, свойство `writing-mode` на самом деле устанавливает направление, в котором элементы уровня блока отображаются на странице - сверху вниз, справа налево или слева направо. Это затем определяет направление движения текста в предложениях.
 
-<h2 id="Writing_modes_and_block_and_inline_layout">Writing modes and block and inline layout</h2>
+## Writing modes and block and inline layout
 
-<p>We have already discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">block and inline layout</a>, and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.</p>
+We have already discussed [block and inline layout](/ru/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes), and the fact that some things display as block elements and others as inline elements. As we have seen described above, block and inline is tied to the writing mode of the document, and not the physical screen. Blocks are only displayed from the top to the bottom of the page if you are using a writing mode that displays text horizontally, such as English.
 
-<p>If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses <code>writing-mode: horizontal-tb</code>, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses <code>writing-mode: vertical-rl</code>; this is a writing mode that is written vertically and from right to left.</p>
+If we look at an example this will become clearer. In this next example I have two boxes that contain a heading and a paragraph. The first uses `writing-mode: horizontal-tb`, a writing mode that is written horizontally and from the top of the page to the bottom. The second uses `writing-mode: vertical-rl`; this is a writing mode that is written vertically and from right to left.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}
 
-<p>When we switch the writing mode, we are changing which direction is block and which is inline. In a <code>horizontal-tb</code> writing mode the block direction runs from top to bottom; in a <code>vertical-rl</code> writing mode the block direction runs right-to-left horizontally. So the <strong>block dimension</strong> is always the direction blocks are displayed on the page in the writing mode in use. The <strong>inline dimension</strong> is always the direction a sentence flows.</p>
+When we switch the writing mode, we are changing which direction is block and which is inline. In a `horizontal-tb` writing mode the block direction runs from top to bottom; in a `vertical-rl` writing mode the block direction runs right-to-left horizontally. So the **block dimension** is always the direction blocks are displayed on the page in the writing mode in use. The **inline dimension** is always the direction a sentence flows.
 
-<p>This figure shows the two dimensions when in a horizontal writing mode.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p>
+This figure shows the two dimensions when in a horizontal writing mode.![Showing the block and inline axis for a horizontal writing mode.](https://mdn.mozillademos.org/files/16574/horizontal-tb.png)
 
-<p>This figure shows the two dimensions in a vertical writing mode.</p>
+This figure shows the two dimensions in a vertical writing mode.
 
-<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p>
+![Showing the block and inline axis for a vertical writing mode.](https://mdn.mozillademos.org/files/16575/vertical.png)
 
-<p>Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.</p>
+Once you start to look at CSS layout, and in particular the newer layout methods, this idea of block and inline becomes very important. We will revisit it later on.
 
-<h3 id="Direction">Direction</h3>
+### Direction
 
-<p>In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!</p>
+In addition to writing mode we also have text direction. As mentioned above, some languages such as Arabic are written horizontally, but right-to-left. This is not something you are likely to use in a creative sense — if you simply want to line something up on the right there are other ways to do so — however it is important to understand this as part of the nature of CSS. The web is not just for languages that are displayed left-to-right!
 
-<p>Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about <em>start</em> and <em>end</em> along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.</p>
+Due to the fact that writing mode and direction of text can change, newer CSS layout methods do not refer to left and right, and top and bottom. Instead they will talk about _start_ and _end_ along with this idea of inline and block. Don't worry too much about that right now, but keep these ideas in mind as you start to look at layout; you will find it really helpful in your understanding of CSS.
 
-<h2 id="Logical_properties_and_values">Logical properties and values</h2>
+## Logical properties and values
 
-<p>The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.</p>
+The reason to talk about writing modes and direction at this point in your learning however, is because of the fact we have already looked at a lot of properties which are tied to the physical dimensions of the screen, and make most sense when in a horizontal writing mode.
 
-<p>Let's take a look at our two boxes again — one with a <code>horizontal-tb</code> writing mode and one with <code>vertical-rl</code>. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.</p>
+Let's take a look at our two boxes again — one with a `horizontal-tb` writing mode and one with `vertical-rl`. I have given both of these boxes a {{cssxref("width")}}. You can see that when the box is in the vertical writing mode, it still has a width, and this is causing the text to overflow.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}
 
-<p>What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.</p>
+What we really want in this scenario, is to essentially swap height and width along with the writing mode. When we're in a vertical writing mode we want the box to expand in the block dimension just like it does in the horizontal mode.
 
-<p>To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like <code>width</code> and <code>height</code> — with <strong>logical</strong>, or <strong>flow relative</strong> versions.</p>
+To make this easier, CSS has recently developed a set of mapped properties. These essentially replace physical properties — things like `width` and `height` — with **logical**, or **flow relative** versions.
 
-<p>The property mapped to <code>width</code> when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for <code>height</code> is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced <code>width</code> with <code>inline-size</code>.</p>
+The property mapped to `width` when in a horizontal writing mode is called {{cssxref("inline-size")}} — it refers to the size in the inline dimension. The property for `height` is named {{cssxref("block-size")}} and is the size in the block dimension. You can see how this works in the example below where we have replaced `width` with `inline-size`.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}
 
-<h3 id="Logical_margin_border_and_padding_properties">Logical margin, border, and padding properties</h3>
+### Logical margin, border, and padding properties
 
-<p>In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.</p>
+In the last two lessons we have learned about the CSS box model, and CSS borders. In the margin, border, and padding properties you will find many instances of physical properties, for example {{cssxref("margin-top")}}, {{cssxref("padding-left")}}, and {{cssxref("border-bottom")}}. In the same way that we have mappings for width and height there are mappings for these properties.
 
-<p>The <code>margin-top</code> property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.</p>
+The `margin-top` property is mapped to {{cssxref("margin-block-start")}} — this will always refer to the margin at the start of the block dimension.
 
-<p>The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.</p>
+The {{cssxref("padding-left")}} property maps to {{cssxref("padding-inline-start")}}, the padding that is applied to the start of the inline direction. This will be where sentences start in that writing mode. The {{cssxref("border-bottom")}} property maps to {{cssxref("border-block-end")}}, which is the border at the end of the block dimension.
 
-<p>You can see a comparison between physical and logical properties below.</p>
+You can see a comparison between physical and logical properties below.
 
-<p><strong>If you change the writing mode of the boxes by switching the <code>writing-mode</code> property on <code>.box</code> to <code>vertical-rl</code>, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.</strong></p>
+**If you change the writing mode of the boxes by switching the `writing-mode` property on `.box` to `vertical-rl`, you will see how the physical properties stay tied to their physical direction, whereas the logical properties switch with the writing mode.**
 
-<p><strong>You can also see that the {{htmlelement("h2")}} has a black <code>border-bottom</code>. Can you work out how to make that bottom border always go below the text in both writing modes?</strong></p>
+**You can also see that the {{htmlelement("h2")}} has a black `border-bottom`. Can you work out how to make that bottom border always go below the text in both writing modes?**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}
 
-<p>There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">Logical Properties and Values</a>.</p>
+There are a huge number of properties when you consider all of the individual border longhands, and you can see all of the mapped properties on the MDN page for [Logical Properties and Values](/ru/docs/Web/CSS/CSS_Logical_Properties).
 
-<h3 id="Logical_values">Logical values</h3>
+### Logical values
 
-<p>We have so far looked at logical property names. There are also some properties that take physical values of <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. These values also have mappings, to logical values — <code>block-start</code>, <code>inline-end</code>, <code>block-end</code>, and <code>inline-start</code>.</p>
+We have so far looked at logical property names. There are also some properties that take physical values of `top`, `right`, `bottom`, and `left`. These values also have mappings, to logical values — `block-start`, `inline-end`, `block-end`, and `inline-start`.
 
-<p>For example, you can float an image left to cause text to wrap round the image. You could replace <code>left</code> with <code>inline-start</code> as shown in the example below.</p>
+For example, you can float an image left to cause text to wrap round the image. You could replace `left` with `inline-start` as shown in the example below.
 
-<p><strong>Change the writing mode on this example to <code>vertical-rl</code> to see what happens to the image. Change <code>inline-start</code> to <code>inline-end</code> to change the float.</strong></p>
+**Change the writing mode on this example to `vertical-rl` to see what happens to the image. Change `inline-start` to `inline-end` to change the float.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}
 
-<p>Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.</p>
+Here we are also using logical margin values to ensure the margin is in the correct place no matter what the writing mode is.
 
-<h3 id="Should_you_use_physical_or_logical_properties">Should you use physical or logical properties?</h3>
+### Should you use physical or logical properties?
 
-<p>The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.</p>
+The logical properties and values are newer than their physical equivalents, and therefore have only recently been implemented in browsers. You can check any property page on MDN to see how far back the browser support goes. If you are not using multiple writing modes then for now you might prefer to use the physical versions. However, ultimately we expect that people will transition to the logical versions for most things, as they make a lot of sense once you start also dealing with layout methods such as flexbox and grid.
 
-<h2 id="Summary">Summary</h2>
+## Summary
 
-<p>The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.</p>
+The concepts explained in this lesson are becoming increasingly important in CSS. An understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. It will help you in understanding CSS even if you never use a writing mode other than a horizontal one.
 
-<p>In the next module we will take a good look at overflow in CSS.</p>
+In the next module we will take a good look at overflow in CSS.
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+1.  [Cascade and inheritance](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Type, class, and ID selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Attribute selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Pseudo-classes and pseudo-elements](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Combinators](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [The box model](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Backgrounds and borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Handling different text directions](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Overflowing content](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Sizing items in CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Images, media, and form elements](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Styling tables](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Debugging CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Organizing your CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md
index 7cda4e3bdf936e..7264c41d769659 100644
--- a/files/ru/learn/css/building_blocks/images_media_form_elements/index.md
+++ b/files/ru/learn/css/building_blocks/images_media_form_elements/index.md
@@ -1,143 +1,139 @@
 ---
-title: 'Элементы изображений, медиа и форм'
+title: Элементы изображений, медиа и форм
 slug: Learn/CSS/Building_blocks/Images_media_form_elements
 translation_of: Learn/CSS/Building_blocks/Images_media_form_elements
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
 
-<p>В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.</p>
+В этом уроке мы рассмотрим, как обрабатываются определённые специальные элементы в CSS. Элементы изображений, других медиа и форм ведут себя иначе при их стилизации в CSS чем обычные блоки. Понимание того, что возможно, а что нет спасут вас от лишних разочарований и этот урок прольёт свет на некоторые из этих основных вещей, которые вам нужно знать.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To understand the way that some elements behave unusually when styled with CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Prerequisites: | Basic computer literacy, [basic software installed](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Objective:     | To understand the way that some elements behave unusually when styled with CSS.                                                                                                                                                                                                                                                                                                                                                                                          |
 
-<h2 id="Замещаемые_элементы">Замещаемые элементы</h2>
+## Замещаемые элементы
 
-<p>Изображения и видео описываются как <strong><a href="/en-US/docs/Web/CSS/Replaced_element">Замещаемые элементы</a></strong>. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.</p>
+Изображения и видео описываются как **[Замещаемые элементы](/ru/docs/Web/CSS/Replaced_element)**. Это значит, что CSS не может влиять на внутреннюю планировку этих элементов — только на их позицию на странице среди других элементов. Однако, как мы увидим, существуют различные вещи, которые CSS может сделать с изображением.
 
-<p>Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие <strong>соотношение сторон</strong>. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя "родные" размеры файла по умолчанию.</p>
+Конкретные замещаемые элементы, такие как изображения и видео, можно также описать, как элементы имеющие **соотношение сторон**. Это значит, что такой элемент имеет размер как по горизонтали (x) так и по вертикали (y) и будет отображаться используя "родные" размеры файла по умолчанию.
 
-<h2 id="Размер_изображений_калибровка">Размер изображений (калибровка)</h2>
+## Размер изображений (калибровка)
 
-<p>Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.</p>
+Как вы уже знаете из этих уроков, всё в CSS генерирует блоки. Если вы поместите файл изображения внутрь блока, который больше или меньше исходного размера файла изображения в обоих направлениях, то он отобразиться либо в меньшем размере чем блок, либо перекроет его. Вам нужно принять решение с тем, что произойдёт с перекрытием.
 
-<p>В примере ниже у нас два блока, оба имеют размер по 200px:</p>
+В примере ниже у нас два блока, оба имеют размер по 200px:
 
-<ul>
- <li>Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.</li>
- <li>Второй больше 200px и перекрывает блок.</li>
-</ul>
+- Один содержит изображение, которое 200px — оно меньше, чем блок и не растягивается что бы заполнить его.
+- Второй больше 200px и перекрывает блок.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}
 
-<p>Так что же мы можем сделать с проблемой перекрывания?</p>
+Так что же мы можем сделать с проблемой перекрывания?
 
-<p>Как мы учили в <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">нашем предыдущем уроке</a>, распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code> или <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>.</p>
+Как мы учили в [нашем предыдущем уроке](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS), распространённая техника — это сделать {{cssxref("max-width")}} изображения - 100%. Это позволит уменьшить размер изображения по отношению к блоку, но не увеличит его. Такой метод будет работать и с другими замещаемыми элементами такими как [`<video>`](/en-US/docs/Web/HTML/Element/video) или [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe).
 
-<p><strong>Попробуйте добавить <code>max-width: 100%</code> к элементу <code>&lt;img&gt;</code> в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.</strong></p>
+**Попробуйте добавить `max-width: 100%` к элементу `<img>` в примере выше. Вы увидите, что меньшее изображение останется неизмененным, а большее изображение станет меньше, чтобы заполнить блок.**
 
-<p>Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.</p>
+Вы можете сделать другие варианты изображений внутри контейнеров. Например, вы можете захотеть дать изображению такие размеры, чтоб оно полностью покрывало блок.
 
-<p>Здесь вам может помочь свойство {{cssxref("object-fit")}}. Используя <code>object-fit</code>, можно определять размеры замещаемого элемента для заполнения блока различными способами.</p>
+Здесь вам может помочь свойство {{cssxref("object-fit")}}. Используя `object-fit`, можно определять размеры замещаемого элемента для заполнения блока различными способами.
 
-<p>Ниже мы использовали значение <code>cover</code>, которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.</p>
+Ниже мы использовали значение `cover`, которое уменьшает изображение, сохраняя соотношение сторон так, что он аккуратно заполняет блок. Поскольку соотношения сторон сохраняются, некоторые части изображения будут обрезаны блоком.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}
 
-<p>Если мы используем <code>contain</code> в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.</p>
+Если мы используем `contain` в качестве значения, изображение будет уменьшаться до тех пор, пока не станет достаточно маленьким чтобы заполнить блок. Это приведёт к "почтовой упаковке", если оно не будет иметь такого же соотношения сторон, как блок.
 
-<p>Вы также можете попробовать значение <code>fill</code>, которое будет заполнять блок, но при этом не сохранять соотношение сторон.</p>
+Вы также можете попробовать значение `fill`, которое будет заполнять блок, но при этом не сохранять соотношение сторон.
 
-<h2 id="Замещаемые_элементы_в_вёрстке">Замещаемые элементы в вёрстке</h2>
+## Замещаемые элементы в вёрстке
 
-<p>При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.</p>
+При использовании различных методов вёрстки CSS на замещаемых элементах, вы можете обнаружить, что они ведут себя немного иначе, чем другие элементы. Например, во flex или grid layout элементы растягиваются по умолчанию чтобы заполнить всю площадь. Изображения растягиваться не будут, вместо этого они будут выравнены на начало площади flex- или grig-контейнера.
 
-<p>Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все <code>&lt;div&gt;</code> элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.</p>
+Вы можете увидеть, как это происходит в примере ниже, где мы имеем grid-контейнер из двух столбцов и двух строк, который содержит 4 объекта. Все `<div>` элементы имеют цвет фона и растягиваются чтобы заполнить строки и столбцы. Однако, изображение не растягивается.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}
 
-<p>Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.</p>
+Если вы изучаете эти уроки по порядку, тогда вы, возможно, ещё не рассматривали layout. Просто держите в уме, что замещаемые элементы, становясь частью grid- или flex-разметки, ведут себя иначе по умолчанию, главным образом, чтобы избежать их странного растяжения по разметке.
 
-<p>Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:</p>
+Для того чтобы заставить изображение растянуться чтобы заполнить grid-ячейку, вы должны сделать что-то наподобие следующего:
 
-<pre class="brush: css">img {
+```css
+img {
   width: 100%;
   height: 100%;
-}</pre>
+}
+```
 
-<p>Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.</p>
+Это, однако, растянет изображение, и скорее всего это не то чего бы вам хотелось делать.
 
-<h2 id="Элементы_форм">Элементы форм</h2>
+## Элементы форм
 
-<p>Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и <a href="/en-US/docs/Learn/Forms">Web Forms module</a> содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.</p>
+Элементы форм могут быть сложной проблемой когда дело касается их стилизации в CSS, и [Web Forms module](/ru/docs/Learn/Forms) содержит детальные руководства по хитрым аспектам стилизации элементов форм, которые я не буду представлять здесь в полном объёме. В этом разделе статьи стоит выделить несколько ключевых моментов.
 
-<p>Многие элементы управления форм добавляются на вашу страницу с помощью элемента <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code> для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как <code><a href="/en-US/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code> и <code><a href="/en-US/docs/Web/HTML/Element/legend">&lt;legend&gt;</a></code>.</p>
+Многие элементы управления форм добавляются на вашу страницу с помощью элемента [`<input>`](/en-US/docs/Web/HTML/Element/input) — он определяет простые поля формы, такие как ввод текста, и более сложные поля, добавленные в HTML5, такие как средства выбора цвета и даты. Существуют некоторые дополнительные элементы, такие как [`<textarea>`](/en-US/docs/Web/HTML/Element/textarea) для ввода многострочного текста, а также элементы которые содержали части маркировки форм, такие как [`<fieldset>`](/en-US/docs/Web/HTML/Element/fieldset) и [`<legend>`](/en-US/docs/Web/HTML/Element/legend).
 
-<p>HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.</p>
+HTML5 также содержит атрибуты, которые позволяют веб-разработчикам указывать какие поля являются обязательными и даже тип контента, который необходимо вводить. Если пользователь вводит неожидаемые данные или оставляет обязательные поля пустыми, браузер может выдать сообщение об ошибке. Разные браузеры несовместимы в том, сколько стилей и настроек они допускают для таких элементов.
 
-<h3 id="Стилизация_элементов_ввода_текста">Стилизация элементов ввода текста</h3>
+### Стилизация элементов ввода текста
 
-<p>Элементы, позволяющие вводить текст, такие как <code>&lt;input type="text"&gt;</code>, конкретные типы вроде <code>&lt;input type="email"&gt;</code>, и элемент <code>&lt;textarea&gt;</code>, являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.</p>
+Элементы, позволяющие вводить текст, такие как `<input type="text">`, конкретные типы вроде `<input type="email">`, и элемент `<textarea>`, являются довольно простыми в стилизации и как правило ведут себя также, как и другие блоки на вашей странице. Однако, стилизация по умолчанию таких элементов будет отличаться в зависимости от операционной системы и браузера которые использует пользователь, посещая сайт.
 
-<p>В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.</p>
+В примере ниже мы стилизовали несколько вводов текста используя CSS — вы можете увидеть, что такие вещи как borders, margins и padding, все применяются так как вы бы ожидали. Мы используем селекторы атрибутов для выборов различных типов ввода. Попробуйте изменить то, как эти формы выглядят, регулируя границы, добавляя цвет фона полям и изменяя шрифты padding.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}
 
-<div class="blockIndicator warning">
-<p><strong>Важно: </strong> При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.</p>
-</div>
+> **Предупреждение:** **Важно:** При изменении стиля элементов формы следует соблюдать осторожность, чтобы убедиться, что для пользователя все ещё очевидно, что они являются элементами форм. Вы можете создать форму ввода без границ и фона, которая практически неотличима от окружающего контента и это может сделать очень сложно распознаваемой, чтобы заполнить её.
 
-<p>Как объяснено в уроке <a href="/en-US/docs/Learn/Forms/Styling_web_forms">стилизация форм</a> в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.</p>
+Как объяснено в уроке [стилизация форм](/ru/docs/Learn/Forms/Styling_web_forms) в части HTML этого курса, многие из более сложных типов ввода определяются операционной системой и не доступны для стилизации. Поэтому вы всегда должны предполагать, что формы будут выглядеть по-разному для разных пользователей и тестировать сложные формы во многих браузерах.
 
-<h3 id="Наследование_и_элементы_форм">Наследование и элементы форм</h3>
+### Наследование и элементы форм
 
-<p>В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.</p>
+В некоторых браузерах, элементы форм не наследуют стиль шрифтов по умолчанию. Поэтому если вы хотите быть уверенными что ваши поля форм используют шрифт определённый в body или родительском элементе, вы должны добавить это правило в ваш CSS.
 
-<pre class="brush: css"><code>button,
+```css
+button,
 input,
 select,
 textarea {
   font-family : inherit;
   font-size : 100%;
-} </code></pre>
+}
+```
 
-<h3 id="Элементы_форм_и_box-sizing">Элементы форм и box-sizing</h3>
+### Элементы форм и box-sizing
 
-<p>В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство <code>box-sizing</code> в <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">нашем уроке Блоки в CSS</a> и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.</p>
+В разных браузерах элементы формы используют разные правила определения размеров блоков для разных виджетов. вы изучали свойство `box-sizing` в [нашем уроке Блоки в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model) и можете использовать эти знания при стилизации форм для обеспечения единообразия при настройке ширины и высоты элементов форм.
 
-<p>Для единообразия рекомендуется устанавливать margin и padding на <code>0</code> для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.</p>
+Для единообразия рекомендуется устанавливать margin и padding на `0` для всех элементов, а затем добавлять их (margin и padding) при стилизации отдельных элементов.
 
-<pre class="brush: css"><code>button,
+```css
+button,
 input,
 select,
 textarea {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-}</code></pre>
+}
+```
 
-<h3 id="Другие_полезные_настройки">Другие полезные настройки</h3>
+### Другие полезные настройки
 
-<p>В дополнение к правилам отмеченных выше, вы должны также установить <code>overflow: auto</code> для <code>&lt;textarea&gt;</code> чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:</p>
+В дополнение к правилам отмеченных выше, вы должны также установить `overflow: auto` для `<textarea>` чтобы IE не отображал полосу прокрутки, когда в этом нет необходимости:
 
-<pre class="brush: css">textarea {
+```css
+textarea {
   overflow: auto;
-}</pre>
+}
+```
 
-<h3 id="Собираем_все_вместе_в_перезагрузку">Собираем все вместе в "перезагрузку"</h3>
+### Собираем все вместе в "перезагрузку"
 
-<p>В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:</p>
+В качестве последнего шага, мы можем обернуть различные свойства, обсуждаемые выше, в следующую «форму перезагрузки», чтобы обеспечить согласованную основу для работы. Это включает все элементы упомянутые в последних трёх разделах:
 
-<pre class="brush: css"><code>button,
+```css
+button,
 input,
 select,
 textarea {
@@ -149,45 +145,39 @@ textarea {
 
 textarea {
   overflow: auto;
-} </code></pre>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out <a href="http://necolas.github.io/normalize.css/">Normalize.css</a>, which is a very popular stylesheet used as a base by many projects.</p>
-</div>
-
-<p>Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.</p>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling web forms</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
-</ul>
-
-<h2 id="Summary">Summary</h2>
-
-<p>This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we'll look over a few tips you'll find useful when you have to style HTML tables.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+}
+```
+
+> **Примечание:** Normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects. Typically these do similar things to those described above, making sure that anything different across browsers is set to a consistent default before you do your own work on the CSS. They are not as important as they once were, as browsers are typically more consistent than in the past. However if you want to take a look at one example, check out [Normalize.css](http://necolas.github.io/normalize.css/), which is a very popular stylesheet used as a base by many projects.
+
+Для дополнительной информации по стилизации форм, посмотрите две статьи в разделе HTML этого руководства.
+
+- [Styling web forms](/ru/docs/Learn/Forms/Styling_web_forms)
+- [Advanced form styling](/ru/docs/Learn/Forms/Advanced_form_styling)
+
+## Summary
+
+This lesson has highlighted some of the differences you will encounter when working with images, media, and other unusual elements in CSS. In the next article we'll look over a few tips you'll find useful when you have to style HTML tables.
+
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}
+
+## In this module
+
+1.  [Cascade and inheritance](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Type, class, and ID selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Attribute selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Pseudo-classes and pseudo-elements](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Combinators](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [The box model](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Backgrounds and borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Handling different text directions](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Overflowing content](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Sizing items in CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Images, media, and form elements](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Styling tables](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Debugging CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Organizing your CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/index.md b/files/ru/learn/css/building_blocks/index.md
index 3de5d5f3eebffe..242be46ded4d37 100644
--- a/files/ru/learn/css/building_blocks/index.md
+++ b/files/ru/learn/css/building_blocks/index.md
@@ -13,68 +13,61 @@ tags:
   - состоит
 translation_of: Learn/CSS/Building_blocks
 ---
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">Этот модуль — продолжение раздела <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>: вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.</p>
-
-<p class="summary">Наша цель в этом модуле — обеспечить вас необходимым набором инструментов  для написания хорошего CSS-кода, а также помочь вам понять необходимую теорию для перехода к особым дисциплинам, таким как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">размещение элементов с помощью CSS</a>.</p>
-
-<h2 id="Необходимые_умения">Необходимые умения</h2>
-
-<p>Перед изучением этого раздела вы должны иметь:</p>
-
-<ol>
- <li>Стандартную рабочую среду (<a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установке базового программного обеспечения</a>), а также понимание того, как создавать файлы и работать с ними (<a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>).</li>
- <li>Общее представление о HTML (модуль <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</li>
- <li>Общее представление о CSS (модуль <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>).</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Руководства">Руководства</h2>
-
-<p>В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения вы встретите упражнения, позволяющие вам усвоить пройденный материал.</p>
-
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></dt>
- <dd>Цель данного урока — углубить ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">CSS-селекторы</a></dt>
- <dd>Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку:
- <ul>
-  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибутов</a></li>
-  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы</a></li>
-  <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинации селекторов</a></li>
- </ul>
- </dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS</a></dt>
- <dd>Всё в CSS имеет форму блока, и понимание блоков позволяет вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим <em>CSS-блоки.</em></dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></dt>
- <dd>В этом уроке мы рассмотрим всякие интересные вещи, которые вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста</a></dt>
- <dd>Раньше CSS развивался, чтобы лучше поддерживать разные <strong>режимы написания</strong>, включая <em>справа налево</em> или <em>сверху вниз</em> (как в японском языке). Мы рассмотрим их в этой статье.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></dt>
- <dd>В этом уроке мы рассмотрим ещё одну важную концепцию CSS — <strong>overflow</strong>. Переполнение происходит, когда слишком много информации находится в пределах ограниченного блока. В этой статье мы рассмотрим, как это исправить.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS</a></dt>
- <dd>У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></dt>
- <dd>В предыдущих уроках вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></dt>
- <dd>Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что вам нужно знать про эти элементы.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></dt>
- <dd>Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></dt>
- <dt></dt>
- <dd>При написании CSS вы можете столкнуться с тем, что ваш CSS-код работает не так, как вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.</dd>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></dt>
- <dd>Как только вы начнёте работать над большими проектами и таблицами стилей, вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.</dd>
-</dl>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Узконаправленные функции CSS</a></dt>
- <dd>В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.</dd>
-</dl>
+{{LearnSidebar}}
+
+Этот модуль — продолжение раздела [Введение в CSS](/ru/docs/Learn/CSS/First_steps): вы уже знакомы с синтаксисом языка и опробовали основные функции; пришло время углубиться в CSS. В этом модуле рассматриваются каскады и наследование, все доступные типы селекторов, блоков, изменений размеров, фонов, границ, а также отладка и многое другое.
+
+Наша цель в этом модуле — обеспечить вас необходимым набором инструментов для написания хорошего CSS-кода, а также помочь вам понять необходимую теорию для перехода к особым дисциплинам, таким как [стилизация текста](/ru/docs/Learn/CSS/Styling_text) и [размещение элементов с помощью CSS](/ru/docs/Learn/CSS/CSS_layout).
+
+## Необходимые умения
+
+Перед изучением этого раздела вы должны иметь:
+
+1.  Стандартную рабочую среду ([Установке базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)), а также понимание того, как создавать файлы и работать с ними ([Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)).
+2.  Общее представление о HTML (модуль [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)).
+3.  Общее представление о CSS (модуль [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)).
+
+> **Примечание:** Если вы работаете на компьютере/планшете/другом устройстве, где нет возможности создавать файлы, вы можете опробовать примеры (большую часть) на таких онлайн-программах, как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
+
+## Руководства
+
+В этом модуле содержатся следующие статьи, в которых рассказывается об основных составляющих языка. По мере обучения вы встретите упражнения, позволяющие вам усвоить пройденный материал.
+
+- [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+  - : Цель данного урока — углубить ваше понимание основных концепций CSS — каскадов, спецификаций и наследования, — которые контролируют, как CSS добавляется в HTML и как разрешаются конфликты.
+- [CSS-селекторы](/ru/docs/Learn/CSS/Building_blocks/Селекторы)
+
+  - : Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы рассмотрим разные типы в мельчайших подробностях и увидим как они работают. Подстатьи по порядку:
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы, псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинации селекторов](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+- [Блоки в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+  - : Всё в CSS имеет форму блока, и понимание блоков позволяет вам размещать элементы с помощью CSS или согласовывать их друг с другом. В этом уроке мы как следует рассмотрим _CSS-блоки._
+- [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+  - : В этом уроке мы рассмотрим всякие интересные вещи, которые вы можете делать благодаря CSS-фонам и границам, — от добавления градиентов и фоновых изображений до скругления углов, фонов и границ.
+- [Изменение направления текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+  - : Раньше CSS развивался, чтобы лучше поддерживать разные **режимы написания**, включая _справа налево_ или _сверху вниз_ (как в японском языке). Мы рассмотрим их в этой статье.
+- [Перекрытие содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+  - : В этом уроке мы рассмотрим ещё одну важную концепцию CSS — **overflow**. Переполнение происходит, когда слишком много информации находится в пределах ограниченного блока. В этой статье мы рассмотрим, как это исправить.
+- [Значения свойств CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+  - : У каждого CSS-свойства есть значения. В этом уроке мы рассмотрим основные значения и их единицы.
+- [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+  - : В предыдущих уроках вы встречались с различными способами изменения размеров элементов с использованием CSS. В этой статье мы собрали разные способы изменить размер через CSS.
+- [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+  - : Мы рассмотрим, как некоторые элементы относятся к CSS. Изображения, формы и другие медиа-элементы ведут себя по-другому, когда вы стилизуете их через CSS. Некоторые функции могут не работать, поэтому в этой статье мы рассмотрим то, что вам нужно знать про эти элементы.
+- [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+  - : Стилизация HTML таблиц — это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья описывает, как сделать, чтобы Ваши HTML-таблицы выглядели хорошо, и некоторые свойства, подробно рассмотренные в предыдущих статьях.
+- [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+
+  - : При написании CSS вы можете столкнуться с тем, что ваш CSS-код работает не так, как вы того хотели. Вы узнаете, как отлаживать CSS и как с помощью инструментов разработчика понять, где неполадка.
+
+- [Организация CSS-кода](/ru/docs/Learn/CSS/Building_blocks/Organizing)
+  - : Как только вы начнёте работать над большими проектами и таблицами стилей, вы поймёте, что обслуживать такие таблицы не так-то и легко. В статье мы рассмотрим, как лучше писать CSS, чтобы его было легче обслуживать.
+
+## Смотрите также
+
+- [Узконаправленные функции CSS](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects)
+  - : В этой статье описаны некоторые хитрости, которые познакомят вас с такими узкоспециализированными свойствами, как box-shadow, режимы смешивания и фильтры.
diff --git a/files/ru/learn/css/building_blocks/organizing/index.md b/files/ru/learn/css/building_blocks/organizing/index.md
index 9160a383f41c09..4c705ae95489c8 100644
--- a/files/ru/learn/css/building_blocks/organizing/index.md
+++ b/files/ru/learn/css/building_blocks/organizing/index.md
@@ -3,69 +3,67 @@ title: Организация CSS-кода
 slug: Learn/CSS/Building_blocks/Organizing
 translation_of: Learn/CSS/Building_blocks/Organizing
 ---
-<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
 
-<p>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</p>
+As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with CSS organization and team working.</td>
-  </tr>
- </tbody>
-</table>
+| Prerequisites: | Basic computer literacy, [basic software installed](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Objective:     | To learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with CSS organization and team working.                                                                                                                                                                                                                                                                            |
 
-<h2 id="Tips_to_keep_your_CSS_tidy">Tips to keep your CSS tidy</h2>
+## Tips to keep your CSS tidy
 
-<p>Here are some general suggestions for ways to keep your stylesheets organised and tidy.</p>
+Here are some general suggestions for ways to keep your stylesheets organised and tidy.
 
-<h3 id="Does_your_project_have_a_coding_style_guide">Does your project have a coding style guide?</h3>
+### Does your project have a coding style guide?
 
-<p>If you are working with a team on an existing project, the first thing to check is whether the project has an existing style guide for CSS. The team style guide should always win over your own personal preferences. There often isn't a right or wrong way to do things, but consistency is important.</p>
+If you are working with a team on an existing project, the first thing to check is whether the project has an existing style guide for CSS. The team style guide should always win over your own personal preferences. There often isn't a right or wrong way to do things, but consistency is important.
 
-<p>For example, have a look at the <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">CSS guidelines for MDN code examples</a>.</p>
+For example, have a look at the [CSS guidelines for MDN code examples](/ru/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS).
 
-<h3 id="Keep_it_consistent">Keep it consistent</h3>
+### Keep it consistent
 
-<p>If you get to set the rules for the project or are working alone, then the most important thing to do is to keep things consistent. Consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing color, or maintaining consistent formatting (for example will you use tabs or spaces to indent your code? If spaces, how many spaces?)</p>
+If you get to set the rules for the project or are working alone, then the most important thing to do is to keep things consistent. Consistency can be applied in all sorts of ways, such as using the same naming conventions for classes, choosing one method of describing color, or maintaining consistent formatting (for example will you use tabs or spaces to indent your code? If spaces, how many spaces?)
 
-<p>Having a set of rules you always follow reduces the amount of mental overhead needed when writing CSS, as some of the decisions are already made.</p>
+Having a set of rules you always follow reduces the amount of mental overhead needed when writing CSS, as some of the decisions are already made.
 
-<h3 id="Formatting_readable_CSS">Formatting readable CSS</h3>
+### Formatting readable CSS
 
-<p>There are a couple of ways you will see CSS formatted. Some developers put all of the rules onto a single line, like so:</p>
+There are a couple of ways you will see CSS formatted. Some developers put all of the rules onto a single line, like so:
 
-<pre class="brush: css">.box { background-color: #567895; }
-h2 { background-color: black; color: white; }</pre>
+```css
+.box { background-color: #567895; }
+h2 { background-color: black; color: white; }
+```
 
-<p>Other developers prefer to break everything onto a new line:</p>
+Other developers prefer to break everything onto a new line:
 
-<pre class="brush: css">.box {
+```css
+.box {
   background-color: #567895;
 }
 
 h2 {
   background-color: black;
   color: white;
-}</pre>
+}
+```
 
-<p>CSS doesn't mind which one you use. We personally find it is more readable to have each property and value pair on a new line.</p>
+CSS doesn't mind which one you use. We personally find it is more readable to have each property and value pair on a new line.
 
-<h3 id="Comment_your_CSS">Comment your CSS</h3>
+### Comment your CSS
 
-<p>Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.</p>
+Adding comments to your CSS will help any future developer work with your CSS file, but will also help you when you come back to the project after a break.
 
-<pre class="brush: css">/* This is a CSS comment
-It can be broken onto multiple lines. */</pre>
+```css
+/* This is a CSS comment
+It can be broken onto multiple lines. */
+```
 
-<p>A good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the CSS. If you use a string which won't appear in the code you can jump from section to section by searching for it — below we have used <code>||</code>.</p>
+A good tip is to add a block of comments between logical sections in your stylesheet too, to help locate different sections quickly when scanning through, or even give you something to search for to jump right into that part of the CSS. If you use a string which won't appear in the code you can jump from section to section by searching for it — below we have used `||`.
 
-<pre class="brush: css">/* || General styles */
+```css
+/* || General styles */
 
 ...
 
@@ -76,37 +74,36 @@ It can be broken onto multiple lines. */</pre>
 /* || Header and Main Navigation */
 
 ...
+```
 
-</pre>
-
-<p>You don't need to comment every single thing in your CSS, as much of it will be self-explanatory. What you should comment are the things where you made a particular decision for a reason.</p>
+You don't need to comment every single thing in your CSS, as much of it will be self-explanatory. What you should comment are the things where you made a particular decision for a reason.
 
-<p>You may have used a CSS property in a specific way to get around older browser incompatibilities, for example:</p>
+You may have used a CSS property in a specific way to get around older browser incompatibilities, for example:
 
-<pre class="brush: css">.box {
+```css
+.box {
   background-color: red; /* fallback for older browsers that don't support gradients */
   background-image: linear-gradient(to right, #ff0000, #aa0000);
 }
-</pre>
+```
 
-<p>Perhaps you followed a tutorial to achieve something, and the CSS is a little non-obvious. In that case you could add the URL of the tutorial to the comments. You will thank yourself when you come back to this project in a year or so, and can vaguely remember there was a great tutorial about that thing, but where is it?</p>
+Perhaps you followed a tutorial to achieve something, and the CSS is a little non-obvious. In that case you could add the URL of the tutorial to the comments. You will thank yourself when you come back to this project in a year or so, and can vaguely remember there was a great tutorial about that thing, but where is it?
 
-<h3 id="Create_logical_sections_in_your_stylesheet">Create logical sections in your stylesheet</h3>
+### Create logical sections in your stylesheet
 
-<p>It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:</p>
+It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:
 
-<ul>
- <li><code>body</code></li>
- <li><code>p</code></li>
- <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li>
- <li><code>ul</code> and <code>ol</code></li>
- <li>The <code>table</code> properties</li>
- <li>Links</li>
-</ul>
+- `body`
+- `p`
+- `h1`, `h2`, `h3`, `h4`, `h5`
+- `ul` and `ol`
+- The `table` properties
+- Links
 
-<p>In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.</p>
+In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.
 
-<pre class="brush: css">/* || GENERAL STYLES */
+```css
+/* || GENERAL STYLES */
 
 body { ... }
 
@@ -115,11 +112,12 @@ h1, h2, h3, h4 { ... }
 ul { ... }
 
 blockquote { ... }
-</pre>
+```
 
-<p>After this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few things you know you will want to apply to lots of different elements, they can come in this section.</p>
+After this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few things you know you will want to apply to lots of different elements, they can come in this section.
 
-<pre class="brush: css">/* || UTILITIES */
+```css
+/* || UTILITIES */
 
 .nobullets {
   list-style: none;
@@ -128,70 +126,76 @@ blockquote { ... }
 }
 
 ...
+```
 
-</pre>
-
-<p>Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.</p>
+Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.
 
-<pre class="brush: css">/* || SITEWIDE */
+```css
+/* || SITEWIDE */
 
 .main-nav { ... }
 
 .logo { ... }
-</pre>
+```
 
-<p>Finally we will include CSS for specific things, broken down by the context, page or even component in which they are used.</p>
+Finally we will include CSS for specific things, broken down by the context, page or even component in which they are used.
 
-<pre class="brush: css">/* || STORE PAGES */
+```css
+/* || STORE PAGES */
 
 .product-listing { ... }
 
 .product-box { ... }
-</pre>
+```
 
-<p>By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change.</p>
+By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change.
 
-<h3 id="Avoid_overly-specific_selectors">Avoid overly-specific selectors</h3>
+### Avoid overly-specific selectors
 
-<p>If you create very specific selectors you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <code>&lt;p&gt;</code> with a class of <code>box</code> inside an <code>&lt;article&gt;</code> with a class of <code>main</code>.</p>
+If you create very specific selectors you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a `<p>` with a class of `box` inside an `<article>` with a class of `main`.
 
-<pre class="brush: css">article.main p.box {
+```css
+article.main p.box {
   border: 1px solid #ccc;
-}</pre>
+}
+```
 
-<p>If you then wanted to apply the same rules to something outside of <code>main</code>, or to something other than a <code>&lt;p&gt;</code>, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could create a class called <code>box</code> and apply that anywhere.</p>
+If you then wanted to apply the same rules to something outside of `main`, or to something other than a `<p>`, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could create a class called `box` and apply that anywhere.
 
-<pre class="brush: css">.box {
+```css
+.box {
   border: 1px solid #ccc;
-}</pre>
+}
+```
 
-<p>There will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice.</p>
+There will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice.
 
-<h3 id="Break_large_stylesheets_into_multiple_smaller_ones">Break large stylesheets into multiple smaller ones</h3>
+### Break large stylesheets into multiple smaller ones
 
-<p>In particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. You can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier.</p>
+In particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. You can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier.
 
-<p>For example, we might have an online store as part of the site, with a lot of CSS used only for styling the product listings and forms needed for the store. It would make sense to have those things in a different stylesheet, only linked to on store pages.</p>
+For example, we might have an online store as part of the site, with a lot of CSS used only for styling the product listings and forms needed for the store. It would make sense to have those things in a different stylesheet, only linked to on store pages.
 
-<p>This can make it easier to keep your CSS organised, and also means that if multiple people are working on the CSS you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.</p>
+This can make it easier to keep your CSS organised, and also means that if multiple people are working on the CSS you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.
 
-<h2 id="Other_tools_that_can_help">Other tools that can help</h2>
+## Other tools that can help
 
-<p>CSS itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write CSS. The web community has also developed various tools and approaches that can help you to manage larger CSS projects. As they may be helpful for you to investigate, and you are likely to come across these things when working with other people, we've included a short guide to some of these.</p>
+CSS itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write CSS. The web community has also developed various tools and approaches that can help you to manage larger CSS projects. As they may be helpful for you to investigate, and you are likely to come across these things when working with other people, we've included a short guide to some of these.
 
-<h3 id="CSS_methodologies">CSS methodologies</h3>
+### CSS methodologies
 
-<p>Instead of needing to come up with your own rules for writing CSS, you may benefit from adopting one of the approaches already designed by the community and tested across many projects. These methodologies are essentially CSS coding guides that take a very structured approach to writing and organising CSS. Typically they tend to result in more verbose use of CSS than you might have if you wrote and optimised every selector to a custom set of rules for that project.</p>
+Instead of needing to come up with your own rules for writing CSS, you may benefit from adopting one of the approaches already designed by the community and tested across many projects. These methodologies are essentially CSS coding guides that take a very structured approach to writing and organising CSS. Typically they tend to result in more verbose use of CSS than you might have if you wrote and optimised every selector to a custom set of rules for that project.
 
-<p>However, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other developers are more likely to understand the approach you are using and be able to write their CSS in the same way, rather than having to work out your own personal methodology from scratch.</p>
+However, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other developers are more likely to understand the approach you are using and be able to write their CSS in the same way, rather than having to work out your own personal methodology from scratch.
 
-<h4 id="OOCSS">OOCSS</h4>
+#### OOCSS
 
-<p>Most of the approaches that you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by <a href="https://github.com/stubbornella/oocss/wiki">the work of Nicole Sullivan</a>. The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>. This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.</p>
+Most of the approaches that you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by [the work of Nicole Sullivan](https://github.com/stubbornella/oocss/wiki). The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as [The Media Object](/ru/docs/Web/CSS/Layout_cookbook/Media_objects). This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.
 
-<p>If you are not taking an OOCSS approach you might create custom CSS for the different places this pattern is used, for example creating a class called <code>comment</code> with a bunch of rules for the component parts, then a class called <code>list-item</code> with almost the same rules as the <code>comment</code> class except for some tiny differences. The differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.</p>
+If you are not taking an OOCSS approach you might create custom CSS for the different places this pattern is used, for example creating a class called `comment` with a bunch of rules for the component parts, then a class called `list-item` with almost the same rules as the `comment` class except for some tiny differences. The differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.
 
-<pre class="brush: css">.comment {
+```css
+.comment {
   display: grid;
   grid-template-columns: 1fr 3fr;
 }
@@ -212,11 +216,13 @@ blockquote { ... }
 
 .list-item .content {
   font-size: .8rem;
-}</pre>
+}
+```
 
-<p>In OOCSS, you would create one pattern called <code>media</code> that would have all of the common CSS for both patterns — a base class for things that are generally the shape of the media object. Then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways.</p>
+In OOCSS, you would create one pattern called `media` that would have all of the common CSS for both patterns — a base class for things that are generally the shape of the media object. Then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways.
 
-<pre class="brush: css">.media {
+```css
+.media {
   display: grid;
   grid-template-columns: 1fr 3fr;
 }
@@ -231,120 +237,125 @@ blockquote { ... }
 
  .list-item {
   border-bottom: 1px solid grey;
-} </pre>
+}
+```
 
-<p>In your HTML the comment would need both the <code>media</code> and <code>comment</code> classes applied:</p>
+In your HTML the comment would need both the `media` and `comment` classes applied:
 
-<pre class="brush: html">&lt;div class="media comment"&gt;
-  &lt;img /&gt;
-  &lt;div class="content"&gt;&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="media comment">
+  <img />
+  <div class="content"></div>
+</div>
+```
 
-<p>The list-item would have <code>media</code> and <code>list-item</code> applied:</p>
+The list-item would have `media` and `list-item` applied:
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li class="media list-item"&gt;
-    &lt;img /&gt;
-   &lt;div class="content"&gt;&lt;/div&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li class="media list-item">
+    <img />
+   <div class="content"></div>
+  </li>
+</ul>
+```
 
-<p>The work that Nicole Sullivan did in describing this approach and promoting it means that even people who are not strictly following an OOCSS approach today will generally be reusing CSS in this way — it has entered our understanding as a good way to approach things in general.</p>
+The work that Nicole Sullivan did in describing this approach and promoting it means that even people who are not strictly following an OOCSS approach today will generally be reusing CSS in this way — it has entered our understanding as a good way to approach things in general.
 
-<h4 id="BEM">BEM</h4>
+#### BEM
 
-<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p>
+BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about [BEM Naming conventions](http://getbem.com/naming/):
 
-<pre class="brush: html">&lt;form class="form form--theme-xmas form--simple"&gt;
-  &lt;input class="form__input" type="text" /&gt;
-  &lt;input
+```html
+<form class="form form--theme-xmas form--simple">
+  <input class="form__input" type="text" />
+  <input
     class="form__submit form__submit--disabled"
-    type="submit" /&gt;
-&lt;/form&gt;</pre>
+    type="submit" />
+</form>
+```
 
-<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p>
+The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.
 
-<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p>
+BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.
 
-<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p>
+To read more about the system read [BEM 101](https://css-tricks.com/bem-101/) on CSS Tricks.
 
-<h4 id="Other_common_systems">Other common systems</h4>
+#### Other common systems
 
-<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p>
+There are a large number of these systems in use. Other popular approaches include [Scalable and Modular Architecture for CSS (SMACSS)](http://smacss.com/), created by Jonathan Snook, [ITCSS](https://itcss.io/) from Harry Roberts, and [Atomic CSS (ACSS)](https://acss.io/), originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.
 
-<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p>
+The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.
 
-<h3 id="Build_systems_for_CSS">Build systems for CSS</h3>
+### Build systems for CSS
 
-<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p>
+Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as _pre-processors_ and _post-processors_. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.
 
-<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p>
+Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.
 
-<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features.</p>
+The most popular pre-processor is [Sass](https://sass-lang.com/). This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features.
 
-<h4 id="Defining_variables">Defining variables</h4>
+#### Defining variables
 
-<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p>
+CSS now has native [custom properties](/ru/docs/Web/CSS/Using_CSS_custom_properties), making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.
 
-<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p>
+If we created a variable called `$base-color` as in the first line below, we could then use it through the stylesheet anywhere that required that color.
 
-<pre class="brush: css"><code>$base-color: #c6538c;
+```css
+$base-color: #c6538c;
 
 .alert {
   border: 1px solid $base-color;
-}</code></pre>
+}
+```
 
-<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p>
+Once compiled to CSS, you would end up with the following CSS in the final stylesheet.
 
-<pre class="brush: css"><code>.alert {
+```css
+.alert {
   border: 1px solid #c6538c;
-}</code></pre>
+}
+```
 
-<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4>
+#### Compiling component stylesheets
 
-<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p>
+I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.
 
-<p>You can see how one developer approaches the problem in <a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">this blog post</a>.</p>
+You can see how one developer approaches the problem in [this blog post](https://www.lauraleeflores.com/blog/how-to-organize-your-css-files).
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p>
-</div>
+> **Примечание:** A simple way to try out Sass is to use [CodePen](https://codepen.io) — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.
+
+#### Post-processing for optimization
+
+If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unneccessary in the production version. An example of a post-processor solution for doing this would be [cssnano](https://cssnano.co/).
 
-<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4>
+## Wrapping up
 
-<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unneccessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p>
+This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.
 
-<h2 id="Wrapping_up">Wrapping up</h2>
+To learn more about layout in CSS, see the [Learn CSS Layout](/ru/docs/Learn/CSS/CSS_layout) section.
 
-<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p>
+You should also now have the skills to explore the rest of the [MDN CSS](/ru/docs/Web/CSS) material. You can look up properties and values, explore our [CSS Cookbook](/ru/docs/Web/CSS/Layout_cookbook) for patterns to use, and read more in some of the specific guides such as our [Guide to CSS Grid Layout](/ru/docs/Web/CSS/CSS_Grid_Layout).
 
-<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p>
+{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}
 
-<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p>
+## In this module
 
-<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p>
+1.  [Cascade and inheritance](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors)
 
-<h2 id="In_this_module">In this module</h2>
+    - [Type, class, and ID selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Attribute selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Pseudo-classes and pseudo-elements](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Combinators](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
 
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+3.  [The box model](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Backgrounds and borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Handling different text directions](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Overflowing content](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Sizing items in CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Images, media, and form elements](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Styling tables](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Debugging CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Organizing your CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.md b/files/ru/learn/css/building_blocks/overflowing_content/index.md
index d2ffb9feaee460..f1d3ab99b46bf8 100644
--- a/files/ru/learn/css/building_blocks/overflowing_content/index.md
+++ b/files/ru/learn/css/building_blocks/overflowing_content/index.md
@@ -3,123 +3,109 @@ title: Переполнение содержимого
 slug: Learn/CSS/Building_blocks/Overflowing_content
 translation_of: Learn/CSS/Building_blocks/Overflowing_content
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
 
-<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>переполнение</strong>. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p>
+В этом уроке мы рассмотрим другую важную концепцию в CSS — **переполнение**. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="ru/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="ru/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (study <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, что такое переполнение и как с ним работать.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](ru/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](ru/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS (study [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Понять, что такое переполнение и как с ним работать.                                                                                                                                                                                                                                                                                                                                                        |
 
-<h2 id="Что_такое_overflow">Что такое переполнение?</h2>
+## Что такое переполнение?
 
-<p>Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.</p>
+Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.
 
-<h2 id="CSS_пытается_избежать_потери_данных">CSS пытается избежать "потери данных"</h2>
+## CSS пытается избежать "потери данных"
 
-<p>Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.</p>
+Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.
 
-<p>Первый пример — это блок, который был ограничен установленным параметром <code>height</code>. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.</p>
+Первый пример — это блок, который был ограничен установленным параметром `height`. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}
 
-<p>Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.</p>
+Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}
 
-<p>Вы можете задаться вопросом, почему CSS работает так неаккуратно, отображая контент за пределами предназначенного для него блока. Почему бы не скрывать выходящий за пределы контент? Почему бы не масштабировать размер блока, чтобы он соответствовал размеру содержимого?</p>
+Вы можете задаться вопросом, почему CSS работает так неаккуратно, отображая контент за пределами предназначенного для него блока. Почему бы не скрывать выходящий за пределы контент? Почему бы не масштабировать размер блока, чтобы он соответствовал размеру содержимого?
 
-<p>По возможности, CSS не скрывает контент, потому что это может привести к потере данных. Проблема состоит в том, что вы можете не заметить исчезновение данных. Посетители сайта тоже могут не заметить этого. Если кнопка отправки формы исчезнет и никто не может заполнить форму, это может стать большой проблемой! Поэтому, вместо того, чтобы скрывать выходящий за границы блока контент, CSS явно его отображает. Так вы с большей вероятностью увидите проблему при разработке. В худшем случае это заметит посетитель сайта и сообщит вам об этом.</p>
+По возможности, CSS не скрывает контент, потому что это может привести к потере данных. Проблема состоит в том, что вы можете не заметить исчезновение данных. Посетители сайта тоже могут не заметить этого. Если кнопка отправки формы исчезнет и никто не может заполнить форму, это может стать большой проблемой! Поэтому, вместо того, чтобы скрывать выходящий за границы блока контент, CSS явно его отображает. Так вы с большей вероятностью увидите проблему при разработке. В худшем случае это заметит посетитель сайта и сообщит вам об этом.
 
-<p>Если вы ограничиваете поле с помощью параметров <code>width</code> или <code>height</code>, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).</p>
+Если вы ограничиваете поле с помощью параметров `width` или `height`, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).
 
-<p>В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.</p>
+В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.
 
-<h2 id="The_overflow_property">Свойство overflow</h2>
+## Свойство overflow
 
-<p>Свойство {{cssxref("overflow")}} позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – <code>visible</code>, что означает - «показывать контент, когда он выходит за границы блока».</p>
+Свойство {{cssxref("overflow")}} позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – `visible`, что означает - «показывать контент, когда он выходит за границы блока».
 
-<p>Чтобы обрезать контент выходящий за пределы блока, вы можете установить <code>overflow: hidden</code>. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.</p>
+Чтобы обрезать контент выходящий за пределы блока, вы можете установить `overflow: hidden`. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}
 
-<p>Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании <code>overflow: scroll</code> браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.</p>
+Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании `overflow: scroll` браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.
 
-<p><strong>Удалите часть содержимого из поля ниже. Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется.</strong></p>
+**Удалите часть содержимого из поля ниже. Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}
 
-<p>В приведённом выше примере нам нужно прокручивать содержимое только по оси <code>y</code>, однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство {{cssxref("overflow-y")}}, которое позволяет прокручивать содержимое только по оси <code>y</code>.</p>
+В приведённом выше примере нам нужно прокручивать содержимое только по оси `y`, однако мы получаем полосы прокрутки по обеим осям. Вы можете использовать свойство {{cssxref("overflow-y")}}, которое позволяет прокручивать содержимое только по оси `y`.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}
 
-<p>Вы также можете установить прокрутку по оси x с помощью {{cssxref("overflow-x")}}, но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства {{cssxref("word-break")}} или {{cssxref("overflow-wrap")}}. Кроме того, некоторые методы, описанные в разделе <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a>, могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.</p>
+Вы также можете установить прокрутку по оси x с помощью {{cssxref("overflow-x")}}, но это не рекомендуемый способ отображения длинных слов! Если у вас есть длинное слово в маленьком поле, вы можете использовать свойства {{cssxref("word-break")}} или {{cssxref("overflow-wrap")}}. Кроме того, некоторые методы, описанные в разделе [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS), могут помочь вам создавать блоки, которые лучше масштабируются с различным объемом содержимого.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}
 
-<p>Как и в случае со <code>scroll</code>, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.</p>
+Как и в случае со `scroll`, вы получаете полосу прокрутки независимо от того, достаточно ли содержимого для её появления.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете точно задать прокрутку по осям x и y, используя свойство <code>overflow</code>, передав два значения. Первое значение будет относиться к <code>overflow-x</code>, а второе — к <code>overflow-y</code>. Если передать одно значение, то <code>overflow-x</code> и <code>overflow-y</code> получат одинаковые значения. Например, <code>overflow: scroll hidden</code> устанавливает <code>overflow-x</code> в <code>scroll</code> и <code>overflow-y</code> в <code>hidden</code>.</p>
-</div>
+> **Примечание:** вы можете точно задать прокрутку по осям x и y, используя свойство `overflow`, передав два значения. Первое значение будет относиться к `overflow-x`, а второе — к `overflow-y`. Если передать одно значение, то `overflow-x` и `overflow-y` получат одинаковые значения. Например, `overflow: scroll hidden` устанавливает `overflow-x` в `scroll` и `overflow-y` в `hidden`.
 
-<p>Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте <code>overflow: auto</code>. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.</p>
+Если вы хотите, чтобы полосы прокрутки отображались только тогда, когда содержимого больше, чем может поместиться в поле, используйте `overflow: auto`. Это позволяет браузеру автоматически определять, следует ли отображать полосы прокрутки.
 
-<p><strong>В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.</strong></p>
+**В приведённом ниже примере уменьшите количество содержимого так, чтобы оно поместилось в поле. Вы должны увидеть, что полосы прокрутки исчезнут.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}
 
-<h2 id="Overflow_establishes_a_Block_Formatting_Context">Overflow устанавливает контекст форматирования блока</h2>
+## Overflow устанавливает контекст форматирования блока
 
-<p>Когда вы используете значение overflow, такое как <code>scroll</code> или <code>auto</code>, вы создаете <strong>контекст форматирования блока </strong> (BFC). Содержимое блока, для которого вы установили параметр <code>overflow</code> приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.</p>
+Когда вы используете значение overflow, такое как `scroll` или `auto`, вы создаете **контекст форматирования блока** (BFC). Содержимое блока, для которого вы установили параметр `overflow` приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.
 
-<h2 id="Unwanted_overflow_in_web_design">Нежелательное переполнение в веб-разработке</h2>
+## Нежелательное переполнение в веб-разработке
 
-<p>Современные методы раскладки (описанные в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладка</a>) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.</p>
+Современные методы раскладки (описанные в разделе [CSS раскладка](/ru/docs/Learn/CSS/CSS_layout)) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.
 
-<p>Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за переполнения. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.</p>
+Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за переполнения. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.
 
-<p>При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).</p>
+При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).
 
-<h2 id="Test_your_skills!">Проверьте свои навыки!</h2>
+## Проверьте свои навыки!
 
-<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Проверь свои навыки: переполнение</a>.</p>
+В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. [Проверь свои навыки: переполнение](/ru/docs/Learn/CSS/Building_blocks/Overflow_Tasks).
 
-<h2 id="Summary">Заключение</h2>
+## Заключение
 
-<p>В этом уроке была представлена концепция переполнения. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим переполнением, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.</p>
+В этом уроке была представлена концепция переполнения. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим переполнением, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [Блочная модель(The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Размеры в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
index c53f17a093bbbb..1ae4c9146a3476 100644
--- a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.md
@@ -10,152 +10,86 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors
 original_slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
-
-<p>Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, что такое селекторы атрибута и как их использовать.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Селекторы_наличия_и_значения">Селекторы наличия и значения</h2>
-
-<p>Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, <code>href</code>) или на всевозможных разного рода сочетаниях со значением атрибута.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Пример</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>[<em>attr</em>]</code></td>
-   <td><code>a[title]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em> (имя которого  —  это значение в квадратных скобках).</td>
-  </tr>
-  <tr>
-   <td><code>[<em>attr</em>=<em>value</em>]</code></td>
-   <td><code>a[href="https://example.com"]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value</em>  — строке внутри кавычек.</td>
-  </tr>
-  <tr>
-   <td><code>[<em>attr</em>~=<em>value</em>]</code></td>
-   <td><code>p[class~="special"]</code></td>
-   <td>
-    <p>Выбирает элементы с атрибутом <em>attr,</em> значение которого в точности равно <em>value</em> или содержит <em>value</em> в своём (разделённом пробелами) списке значений.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>[<em>attr</em>|=<em>value</em>]</code></td>
-   <td><code>div[lang|="zh"]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого в точности равно <em>value </em>или начинается с <em>value</em>, за которым сразу следует дефис.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>В приведённом ниже примере вы можете увидеть использование этих селекторов.</p>
-
-<ul>
- <li>Используя <code>li[class],</code> мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.</li>
- <li><code>li[class="a"]</code> выбирает селектор с классом <code>a</code>, но не селектор с классом <code>a</code> в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.</li>
- <li><code>li[class~="a"]</code> выберет класс <code>a</code>, а также значение, которое содержит класс <code>a</code> как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}</p>
-
-<h2 id="Селекторы_вхождения_подстроки">Селекторы вхождения подстроки</h2>
-
-<p>Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы <code>box-warning</code> и <code>box-error</code> и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать <code>[class^="box-"]</code>, чтобы выбрать оба класса (или <code>[class|="box"]</code> как описано в предыдущем разделе).</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Пример</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>[<em>attr</em>^=<em>value</em>]</code></td>
-   <td><code>li[class^="box-"]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em> (его имя  —  это значение в квадратных скобках), значение которого начинается с <em>value</em>.</td>
-  </tr>
-  <tr>
-   <td><code>[<em>attr</em>$=<em>value</em>]</code></td>
-   <td><code>li[class$="-box"]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого заканчивается на <em>value</em>.</td>
-  </tr>
-  <tr>
-   <td><code>[<em>attr</em>*=<em> </em>]</code></td>
-   <td><code>li[class*="box"]</code></td>
-   <td>Выбирает элементы с атрибутом <em>attr</em>, значение которого содержит <em>value</em>, независимо от его положения внутри строки.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>(Отступление: возможно, будет полезным заметить, что <code>^</code> и <code>$</code> давно используются как <em>якоря </em>в так называемых <em>регулярных выражениях</em> и обозначают <em>начинается с </em>и <em>заканчивается на</em>.)</p>
-
-<p>Следующий пример показывает, как используются эти селекторы:</p>
-
-<ul>
- <li><code>li[class^="a"]</code> выбирает все значения атрибута, которые начинаются с <code>a</code>, что соответствует первым двум элементам списка.</li>
- <li><code>li[class$="a"]</code> выбирает все значения атрибута, которые заканчиваются на <code>a</code>, что соответствует первому и третьему элементу списка.</li>
- <li><code>li[class*="a"]</code> выбирает все значения атрибута, где появляется <code>a</code>, независимо от положения в строке, что соответствует всем элементам нашего списка.</li>
-</ul>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}</p>
-
-<h2 id="Чувствительность_к_регистру">Чувствительность к регистру</h2>
-
-<p>Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение <code>i</code> перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.</p>
-
-<p>В примере ниже первый селектор выберет значение, начинающееся с <code>a</code> — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Существует также более новое значение <code>s</code>, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.</p>
-</div>
-
-<h2 id="Следующие_шаги">Следующие шаги</h2>
-
-<p>Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдоэлементах</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
+
+Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определёнными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
+
+| Необходимые условия: | Базовая компьютерная грамотность, [установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:              | Узнать, что такое селекторы атрибута и как их использовать.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+
+## Селекторы наличия и значения
+
+Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, `href`) или на всевозможных разного рода сочетаниях со значением атрибута.
+
+| Селектор         | Пример                          | Описание                                                                                                                                               |
+| ---------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `[attr]`         | `a[title]`                      | Выбирает элементы с атрибутом _attr_ (имя которого — это значение в квадратных скобках).                                                               |
+| `[attr=value]`   | `a[href="https://example.com"]` | Выбирает элементы с атрибутом _attr_, значение которого в точности равно _value_ — строке внутри кавычек.                                              |
+| `[attr~=value]`  | `p[class~="special"]`           | Выбирает элементы с атрибутом _attr,_ значение которого в точности равно _value_ или содержит _value_ в своём (разделённом пробелами) списке значений. |
+| `[attr\|=value]` | `div[lang\|="zh"]`              | Выбирает элементы с атрибутом _attr_, значение которого в точности равно _value_ или начинается с _value_, за которым сразу следует дефис.             |
+
+В приведённом ниже примере вы можете увидеть использование этих селекторов.
+
+- Используя `li[class],` мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
+- `li[class="a"]` выбирает селектор с классом `a`, но не селектор с классом `a` в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
+- `li[class~="a"]` выберет класс `a`, а также значение, которое содержит класс `a` как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}
+
+## Селекторы вхождения подстроки
+
+Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы `box-warning` и `box-error` и вы хотите выбрать всё, что начинается со строки "box-", вы можете использовать `[class^="box-"]`, чтобы выбрать оба класса (или `[class|="box"]` как описано в предыдущем разделе).
+
+| Селектор        | Пример              | Описание                                                                                                                    |
+| --------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+| `[attr^=value]` | `li[class^="box-"]` | Выбирает элементы с атрибутом _attr_ (его имя — это значение в квадратных скобках), значение которого начинается с _value_. |
+| `[attr$=value]` | `li[class$="-box"]` | Выбирает элементы с атрибутом _attr_, значение которого заканчивается на _value_.                                           |
+| `[attr*= ]`     | `li[class*="box"]`  | Выбирает элементы с атрибутом _attr_, значение которого содержит _value_, независимо от его положения внутри строки.        |
+
+(Отступление: возможно, будет полезным заметить, что `^` и `$` давно используются как _якоря_ в так называемых _регулярных выражениях_ и обозначают _начинается с_ и _заканчивается на_.)
+
+Следующий пример показывает, как используются эти селекторы:
+
+- `li[class^="a"]` выбирает все значения атрибута, которые начинаются с `a`, что соответствует первым двум элементам списка.
+- `li[class$="a"]` выбирает все значения атрибута, которые заканчиваются на `a`, что соответствует первому и третьему элементу списка.
+- `li[class*="a"]` выбирает все значения атрибута, где появляется `a`, независимо от положения в строке, что соответствует всем элементам нашего списка.
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}
+
+## Чувствительность к регистру
+
+Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение `i` перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.
+
+В примере ниже первый селектор выберет значение, начинающееся с `a` — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}
+
+> **Примечание:** Существует также более новое значение `s`, которое вызывает сопоставление с учётом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.
+
+## Следующие шаги
+
+Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о [псевдоклассах и псевдоэлементах](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements).
+
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}
+
+## В этом модуле
+
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+3.  [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.md b/files/ru/learn/css/building_blocks/selectors/combinators/index.md
index 8f9908d618a89b..9be9a2757d8e1c 100644
--- a/files/ru/learn/css/building_blocks/selectors/combinators/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.md
@@ -8,107 +8,105 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
 original_slug: Learn/CSS/Building_blocks/Селекторы/Combinators
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
 
-<p>Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.</p>
+Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое программное обеспечение</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [установленное базовое программное обеспечение](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:                | Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.                                                                                                                                                                                                                                                                                                                                                                                                                    |
 
-<h2 id="Комбинатор_потомка">Комбинатор потомка</h2>
+## Комбинатор потомка
 
-<p><strong>Селектор потомка</strong> — обычно представляется символом пробела (<code> </code>) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются <dfn>селекторами потомка.</dfn></p>
+**Селектор потомка** — обычно представляется символом пробела (` `) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются _селекторами потомка._
 
-<pre class="brush: css">body article p</pre>
+```css
+body article p
+```
 
-<p>В приведённом ниже примере выбирается только тот элемент &lt;p&gt;, который находится внутри элемента с классом<code>.box</code>.</p>
+В приведённом ниже примере выбирается только тот элемент \<p>, который находится внутри элемента с классом`.box`.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}
 
-<h2 id="Дочерний_комбинатор">Дочерний комбинатор</h2>
+## Дочерний комбинатор
 
-<p><strong>Дочерний комбинатор</strong> (<code>&gt;</code>) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <code>&lt;p&gt;</code>, которые являются дочерними элементами <code>&lt;article&gt;</code>, селектор пишется так:</p>
+**Дочерний комбинатор** (`>`) помещается между двумя селекторами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы `<p>`, которые являются дочерними элементами `<article>`, селектор пишется так:
 
-<pre class="brush: css">article &gt; p</pre>
+```css
+article > p
+```
 
-<p>Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <code>&lt;li&gt;</code>, которые являются прямыми потомками <code>&lt;ul&gt;</code>, и присвоить им верхнюю границу красного цвета.</p>
+Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы `<li>`, которые являются прямыми потомками `<ul>`, и присвоить им верхнюю границу красного цвета.
 
-<p>Если вы уберёте символ <code>&gt;</code>, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <code>&lt;li&gt;</code> получат верхнюю границу красного цвета.</p>
+Если вы уберёте символ `>`, указывающий на то, что это селектор с дочерним комбинатором, селектор превратится в селектор всех потомков (комбинатор - пробел) и все элементы `<li>` получат верхнюю границу красного цвета.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}
 
-<h2 id="Соседний_родственный_комбинатор">Соседний родственный комбинатор</h2>
+## Соседний родственный комбинатор
 
-<p>Соседний родственный селектор (<code>+</code>) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <code>&lt;img&gt;</code> , которые идут сразу после элементов <code>&lt;p&gt;</code> :</p>
+Соседний родственный селектор (`+`) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы `<img>` , которые идут сразу после элементов `<p>` :
 
-<pre class="brush: css">p + img</pre>
+```css
+p + img
+```
 
-<p>Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <code>&lt;h1&gt;</code>, и стилизуем его.</p>
+Распространённый вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к `<h1>`, и стилизуем его.
 
-<p>Если вы вставите какой-то другой элемент, например <code>&lt;h2&gt;</code> между <code>&lt;h1&gt;</code> и <code>&lt;p&gt;</code>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.</p>
+Если вы вставите какой-то другой элемент, например `<h2>` между `<h1>` и `<p>`, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}
 
-<h2 id="Общий_родственный_комбинатор">Общий родственный комбинатор</h2>
+## Общий родственный комбинатор
 
-<p>Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (<code>~</code>). Чтобы выбрать все элементы <code>&lt;img&gt;</code>, которые находятся в <em>любом</em> месте после элементов <code>&lt;p&gt;</code>, надо указать так:</p>
+Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (`~`). Чтобы выбрать все элементы `<img>`, которые находятся в _любом_ месте после элементов `<p>`, надо указать так:
 
-<pre class="brush: css">p ~ img</pre>
+```css
+p ~ img
+```
 
-<p>В приведённом ниже примере мы выбираем все элементы <code>&lt;p&gt;</code>, которые идут после <code>&lt;h1&gt;</code>, и хотя в документе есть также <code>&lt;div&gt;</code>, тем не менее <code>&lt;p&gt;</code>, который идёт после него, будет выбран.</p>
+В приведённом ниже примере мы выбираем все элементы `<p>`, которые идут после `<h1>`, и хотя в документе есть также `<div>`, тем не менее `<p>`, который идёт после него, будет выбран.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}
 
-<h2 id="Использование_комбинаторов">Использование комбинаторов</h2>
+## Использование комбинаторов
 
-<p>Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <code>&lt;ul&gt;</code>, можно использовать следующую комбинацию:</p>
+Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками `<ul>`, можно использовать следующую комбинацию:
 
-<pre class="brush: css">ul &gt; li[class="a"]  {  }</pre>
+```css
+ul > li[class="a"]  {  }
+```
 
-<p>Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.</p>
+Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.
 
-<p>Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.</p>
+Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.
 
-<h2 id="Проверьте_ваши_навыки!">Проверьте ваши навыки!</h2>
+## Проверьте ваши навыки!
 
-<p>Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8">Проверьте ваши навыки: Селекторы</a>.</p>
+Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите [Проверьте ваши навыки: Селекторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B_%D0%97%D0%B0%D0%B4%D0%B0%D1%87%D0%B8).
 
-<h2 id="Двигаемся_дальше">Двигаемся дальше</h2>
+## Двигаемся дальше
 
-<p>Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — <a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">CSS модель коробки</a>.</p>
+Это последний раздел в наших уроках по селекторам. Далее мы перейдём к другой важной части CSS — [CSS модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model).
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+3.  [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/index.md b/files/ru/learn/css/building_blocks/selectors/index.md
index c6a60952c540e7..3817d812cae55b 100644
--- a/files/ru/learn/css/building_blocks/selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/index.md
@@ -16,221 +16,182 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors
 original_slug: Learn/CSS/Building_blocks/Селекторы
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
 
-<p class="summary">В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.</p>
+В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">основное программное обеспечение</a>, понимание <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, базовые знания HTML (смотрите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и представление о том, как работает CSS (смотрите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, как работают CSS-селекторы.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Базовая компьютерная грамотность, [основное программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), понимание [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), базовые знания HTML (смотрите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и представление о том, как работает CSS (смотрите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Узнать, как работают CSS-селекторы.                                                                                                                                                                                                                                                                                                                                                                                                         |
 
-<h2 id="Что_такое_селекторы">Что такое селекторы?</h2>
+## Что такое селекторы?
 
-<p>Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.</p>
+Вы уже встречались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.
 
-<p><img alt="Some code with the h1 highlighted." src="selector.png" style="border: 1px solid #cccccc;"></p>
+![Some code with the h1 highlighted.](selector.png)
 
-<p>Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент <code>h1</code> или класс <code>.special</code>.</p>
+Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент `h1` или класс `.special`.
 
-<p>В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в <a href="https://www.w3.org/TR/selectors-3/">Спецификации селекторов 3 уровня</a>, где вы сможете найти всю информацию о поддержке селекторов в браузерах.</p>
+В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в [Спецификации селекторов 3 уровня](https://www.w3.org/TR/selectors-3/), где вы сможете найти всю информацию о поддержке селекторов в браузерах.
 
-<h2 id="Несколько_селекторов">Несколько селекторов</h2>
+## Несколько селекторов
 
-<p>Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в <em>лист селекторов</em>: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка <code>h1</code> и класса <code>.special</code>; я могу написать их так:</p>
+Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в _лист селекторов_: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка `h1` и класса `.special`; я могу написать их так:
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   color: blue;
 }
 
 .special {
   color: blue;
-} </pre>
+}
+```
 
-<p>А могу написать короче — просто отделив селекторы запятыми:</p>
+А могу написать короче — просто отделив селекторы запятыми:
 
-<pre class="brush: css">h1, .special {
+```css
+h1, .special {
   color: blue;
-} </pre>
+}
+```
 
-<p>Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:</p>
+Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:
 
-<pre class="brush: css">h1,
+```css
+h1,
 .special {
   color: blue;
-} </pre>
+}
+```
 
-<p>В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.</p>
+В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}
 
-<p>При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.</p>
+При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.
 
-<p>В примере ниже правило для селектора класса не будет работать, в то время как <code>h1</code> будет стилизован.</p>
+В примере ниже правило для селектора класса не будет работать, в то время как `h1` будет стилизован.
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   color: blue;
 }
 
 ..special {
   color: blue;
-} </pre>
+}
+```
 
-<p>Но если мы объединим селекторы, правило не применится ни к <code>h1</code>, ни к классу: оно считается недействительным.</p>
+Но если мы объединим селекторы, правило не применится ни к `h1`, ни к классу: оно считается недействительным.
 
-<pre class="brush: css">h1, ..special {
+```css
+h1, ..special {
   color: blue;
-} </pre>
+}
+```
+
+## Типы селекторов
+
+Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.
+
+### Селекторы тегов, классов и идентификаторов
+
+К этой группе относятся селекторы HTML-элементов, таких как `<h1>`.
+
+```css
+h1 { }
+```
+
+К группе относятся и селекторы классов:
+
+```css
+.box { }
+```
+
+или селекторы идентификаторов (ID):
+
+```css
+#unique { }
+```
+
+### Селекторы атрибутов
+
+Эта группа селекторов позволяет выбирать селекторы, основываясь на _наличии_ у них конкретного атрибута элемента:
+
+```css
+a[title] { }
+```
+
+или основываясь на _значении_ атрибута:
+
+```css
+a[href="https://example.com"] { }
+```
+
+### Псевдоклассы, псевдоэлементы
+
+К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс `:hover`, например, применяет правило, только если на элемент наведён курсор мыши
+
+```css
+a:hover { }
+```
+
+К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, `::first-line` всегда выбирает первую строку внутри элемента (абзаца `<p>` в нашем случае), действуя, как если бы тег `<span>` оборачивал первую строку, а затем был стилизован.
+
+```css
+p::first-line { }
+```
+
+### Комбинаторы
+
+И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент `<article>` с помощью комбинатора дочерних элементов (`>`):
+
+```css
+article > p { }
+```
+
+## Продолжение
+
+Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут [селекторы тегов, классов и идентификаторов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors).
+
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
 
-<h2 id="Типы_селекторов">Типы селекторов</h2>
+## Справка о селекторах
 
-<p>Понимание того, какой именно селектор вам нужен, очень помогает подобрать подходящий элемент. Сейчас мы разберём разные виды селекторов.</p>
+В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.
 
-<h3 id="Селекторы_тегов_классов_и_идентификаторов">Селекторы тегов, классов и идентификаторов</h3>
+| Селектор                                                                   | Пример              | Руководство                                                                                                                                                                                                                        |
+| -------------------------------------------------------------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Селектор по типу](/ru/docs/Web/CSS/Type_selectors)                        | `h1 { }`            | [Селектор по типу](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83)                                          |
+| [Универсальный селектор](/ru/docs/Web/CSS/Universal_selectors)             | `* { }`             | [Универсальный селектор](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80) |
+| [Селектор класса](/ru/docs/Web/CSS/Class_selectors)                        | `.box { }`          | [Селекторы классов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2)                                    |
+| [Селектор ID](/ru/docs/Web/CSS/ID_selectors)                               | `#unique { }`       | [Селекторы по ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id)                                                                 |
+| [Селектор атрибутов](/ru/docs/Web/CSS/Attribute_selectors)                 | `a[title] { }`      | [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)                                                                                                                                            |
+| [Селектор псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes)                  | `p:first-child { }` | [Псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81)               |
+| [Селектор псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements)               | `p::first-line { }` | [Псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82) |
+| [Селектор потомков](/ru/docs/Web/CSS/Descendant_combinator)                | `article p`         | [Селектор потомков](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2)                                                    |
+| [Селектор дочерних элементов](/ru/docs/Web/CSS/Child_combinator)           | `article > p`       | [Селектор дочерних элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80)                                                                               |
+| [Смежные селекторы](/ru/docs/Web/CSS/Adjacent_sibling_combinator)          | `h1 + p`            | [Смежные селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b)                                                    |
+| [Селектор братских элементов](/ru/docs/Web/CSS/General_sibling_combinator) | `h1 ~ p`            | [Селектор братских элементов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b)                                          |
 
-<p>К этой группе относятся селекторы HTML-элементов, таких как <code>&lt;h1&gt;</code>.</p>
+## В этом модуле
 
-<pre class="brush: css">h1 { }</pre>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS-селекторы](/ru/docs/Learn/CSS/Building_blocks/Selectors)
 
-<p>К группе относятся и селекторы классов:</p>
+    - [Селекторы по типу, классу и идентификатору](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Псевдоклассы, псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Комбинации селекторов](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
 
-<pre class="brush: css">.box { }</pre>
-
-<p>или селекторы идентификаторов (ID):</p>
-
-<pre class="brush: css">#unique { }</pre>
-
-<h3 id="Селекторы_атрибутов">Селекторы атрибутов</h3>
-
-<p>Эта группа селекторов позволяет выбирать селекторы, основываясь на <em>наличии</em> у них конкретного атрибута элемента:</p>
-
-<pre class="brush: css">a[title] { }</pre>
-
-<p>или основываясь на <em>значении</em> атрибута:</p>
-
-<pre class="brush: css">a[href="https://example.com"] { }</pre>
-
-<h3 id="Псевдоклассы_псевдоэлементы">Псевдоклассы, псевдоэлементы</h3>
-
-<p>К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс <code>:hover</code>, например, применяет правило, только если на элемент наведён курсор мыши</p>
-
-<pre class="brush: css">a:hover { }</pre>
-
-<p>К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, <code>::first-line</code> всегда выбирает первую строку внутри элемента (абзаца <code>&lt;p&gt;</code> в нашем случае), действуя, как если бы тег <code>&lt;span&gt;</code> оборачивал первую строку, а затем был стилизован.</p>
-
-<pre class="brush: css">p::first-line { }</pre>
-
-<h3 id="Комбинаторы">Комбинаторы</h3>
-
-<p>И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <code>&lt;article&gt;</code> с помощью комбинатора дочерних элементов (<code>&gt;</code>):</p>
-
-<pre class="brush: css">article &gt; p { }</pre>
-
-<h2 id="Продолжение">Продолжение</h2>
-
-<p>Ниже можно просмотреть таблицу различных видов селекторов с соответствующими ссылками, или вы можете двинуться дальше: нас ждут <a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">селекторы тегов, классов и идентификаторов</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="Справка_о_селекторах">Справка о селекторах</h2>
-
-<p>В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Пример</th>
-   <th scope="col">Руководство</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Type_selectors">Селектор по типу</a></td>
-   <td><code>h1 {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_%d1%82%d0%b8%d0%bf%d1%83">Селектор по типу</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></td>
-   <td><code>* {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a3%d0%bd%d0%b8%d0%b2%d0%b5%d1%80%d1%81%d0%b0%d0%bb%d1%8c%d0%bd%d1%8b%d0%b9_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80">Универсальный селектор</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Class_selectors">Селектор класса</a></td>
-   <td><code>.box {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%ba%d0%bb%d0%b0%d1%81%d1%81%d0%be%d0%b2">Селекторы классов</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/ID_selectors">Селектор ID</a></td>
-   <td><code>#unique { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b_%d0%bf%d0%be_id">Селекторы по ID</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Attribute_selectors">Селектор атрибутов </a></td>
-   <td><code>a[title] {  }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Pseudo-classes">Селектор псевдоклассов</a></td>
-   <td><code>p:first-child { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d0%ba%d0%bb%d0%b0%d1%81%d1%81">Псевдоклассы</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Pseudo-elements">Селектор псевдоэлементов</a></td>
-   <td><code>p::first-line { }</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#%d0%a7%d1%82%d0%be_%d1%82%d0%b0%d0%ba%d0%be%d0%b5_%d0%bf%d1%81%d0%b5%d0%b2%d0%b4%d0%be%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82">Псевдоэлементы</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Descendant_combinator">Селектор потомков</a></td>
-   <td><code>article p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80_%d0%bf%d0%be%d1%82%d0%be%d0%bc%d0%ba%d0%be%d0%b2">Селектор потомков</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Child_combinator">Селектор дочерних элементов</a></td>
-   <td><code>article &gt; p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%9a%d0%be%d0%bc%d0%b1%d0%b8%d0%bd%d0%b0%d1%82%d0%be%d1%80">Селектор дочерних элементов</a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/Adjacent_sibling_combinator">Смежные селекторы</a></td>
-   <td><code>h1 + p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%a1%d0%bc%d0%b5%d0%b6%d0%bd%d1%8b%d0%b5_%d1%81%d0%b5%d0%bb%d0%b5%d0%ba%d1%82%d0%be%d1%80%d1%8b">Смежные селекторы </a></td>
-  </tr>
-  <tr>
-   <td><a href="/ru/docs/Web/CSS/General_sibling_combinator">Селектор братских элементов</a></td>
-   <td><code>h1 ~ p</code></td>
-   <td><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators#%d0%91%d1%80%d0%b0%d1%82%d1%81%d0%ba%d0%b8%d0%b5_%d1%8d%d0%bb%d0%b5%d0%bc%d0%b5%d0%bd%d1%82%d1%8b">Селектор братских элементов</a></td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">CSS-селекторы </a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы по типу, классу и идентификатору</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибутов </a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы, псевдоэлементы </a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинации селекторов </a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блоки в CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Изменение направления текста </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Перекрытие содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения свойств CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Изображения, формы и прочие медиа-элементы </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация CSS-кода</a></li>
-</ol>
+3.  [Блоки в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Изменение направления текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Перекрытие содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения свойств CSS](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Изображения, формы и прочие медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация CSS-кода](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
index 6d901f554cf25f..d6e78f2287fe30 100644
--- a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.md
@@ -12,405 +12,195 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements
 original_slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
 
-<p>Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.</p>
+Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать о селекторах псевдокласса и псевдоэлемента.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Узнать о селекторах псевдокласса и псевдоэлемента.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-<h2 id="Что_такое_псевдокласс">Что такое псевдокласс?</h2>
+## Что такое псевдокласс?
 
-<p>Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.</p>
+Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
 
-<p>Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:</p>
+Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
 
-<pre>:<em>pseudo-class-name</em></pre>
+```
+:pseudo-class-name
+```
 
-<h3 id="Простой_пример_псевдокласса">Простой пример псевдокласса</h3>
+### Простой пример псевдокласса
 
-<p>Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:</p>
+Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}
 
-<p>Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)</p>
+Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}
 
-<p>Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:</p>
+Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:
 
-<ul>
- <li><code><a href="/ru/docs/Web/CSS/:last-child">:last-child</a></code></li>
- <li><code><a href="/ru/docs/Web/CSS/:only-child">:only-child</a></code></li>
- <li><code><a href="/ru/docs/Web/CSS/:invalid">:invalid</a></code></li>
-</ul>
+- [`:last-child`](/ru/docs/Web/CSS/:last-child)
+- [`:only-child`](/ru/docs/Web/CSS/:only-child)
+- [`:invalid`](/ru/docs/Web/CSS/:invalid)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong> : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать <code>:first-child</code> и правило было бы применено к <em>любому</em> элементу, оказавшемуся первым дочерним для <code>&lt;article&gt;</code>, не только к первому дочернему абзацу — <code>:first-child</code> равнозначно <code>*:first-child</code>. Однако обычно вы хотите б<em>о</em>льшего контроля, поэтому вам нужен более специфичный селектор.</p>
-</div>
+> **Примечание:** : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать `:first-child` и правило было бы применено к _любому_ элементу, оказавшемуся первым дочерним для `<article>`, не только к первому дочернему абзацу — `:first-child` равнозначно `*:first-child`. Однако обычно вы хотите б*о*льшего контроля, поэтому вам нужен более специфичный селектор.
 
-<h3 id="Псевдоклассы_пользовательского_действия">Псевдоклассы пользовательского действия</h3>
+### Псевдоклассы пользовательского действия
 
-<p>Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:</p>
+Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:
 
-<ul>
- <li><code><a href="/en-US/docs/Web/CSS/:hover">:hover</a></code> — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.</li>
- <li><code><a href="/en-US/docs/Web/CSS/:focus">:focus</a></code> — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.</li>
-</ul>
+- [`:hover`](/en-US/docs/Web/CSS/:hover) — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
+- [`:focus`](/en-US/docs/Web/CSS/:focus) — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}
 
-<h2 id="Что_такое_псевдоэлемент">Что такое псевдоэлемент?</h2>
+## Что такое псевдоэлемент?
 
-<p>Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия <code>::</code>.</p>
+Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия `::`.
 
-<pre><em>::pseudo-element-name</em></pre>
+```
+::pseudo-element-name
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.</p>
-</div>
+> **Примечание:** Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
 
-<p>Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в <code>&lt;span&gt;</code> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.</p>
+Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в `<span>` и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.
 
-<p>Селектор псевдоэлемента <code>::first-line</code> сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.</p>
+Селектор псевдоэлемента `::first-line` сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}
 
-<p>Он действует так, как если бы <code>&lt;span&gt;</code> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.</p>
+Он действует так, как если бы `<span>` волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.
 
-<p>Вы можете видеть, что селектор выбирает первую строку обоих абзацев.</p>
+Вы можете видеть, что селектор выбирает первую строку обоих абзацев.
 
-<h2 id="Объединение_псевдоклассов_и_псевдоэлементов">Объединение псевдоклассов и псевдоэлементов</h2>
+## Объединение псевдоклассов и псевдоэлементов
 
-<p>Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы <code>:first-child</code> и <code>::first-line</code>. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <code>&lt;p&gt;,</code> который находится внутри элемента <code>&lt;article&gt;</code>.</p>
+Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы `:first-child` и `::first-line`. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента `<p>,` который находится внутри элемента `<article>`.
 
-<pre class="brush: css"><code>article p:first-child::first-line {
+```css
+article p:first-child::first-line {
   font-size: 120%;
   font-weight: bold;
-}</code></pre>
-
-<h2 id="Генерация_контента_с_помощью_before_и_after">Генерация контента с помощью ::before и ::after</h2>
-
-<p>Существует пара специальных псевдоэлементов, которые используются вместе со свойством <code><a href="/en-US/docs/Web/CSS/content">content</a></code> для вставки содержимого в документ с помощью CSS.</p>
-
-<p>Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент <code>::before</code> на <code>::after</code> и увидите, что текст вставлен в конце элемента, а не в начале.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}</p>
-
-<p>Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.</p>
-
-<p>Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}</p>
-
-<p>Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.</p>
-
-<p>В следующем примере мы добавили пустую строку, используя псевдоэлемент <code>::before.</code> Мы установили <code>display: block</code>, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}</p>
-
-<p>Использование псевдоэлементов <code>::before</code> и <code>::after</code> вместе со свойством <code>content</code> в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт <a href="http://www.cssarrowplease.com/">CSS Arrow Please</a>, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..</p>
-
-<h2 id="Справочный_раздел">Справочный раздел</h2>
-
-<p>Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.</p>
-
-<h3 id="Псевдоклассы">Псевдоклассы</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ Cssxref(":active") }}</td>
-   <td>Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":any-link") }}</td>
-   <td>Соответствует как состоянию <code>:link,</code> так и состоянию<code>:visited</code> ссылки.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":blank") }}</td>
-   <td>Соответствует <a href="/ru/docs/Web/HTML/Element/Input">элементу <code>&lt;input&gt;</code></a>, для которого значение ввода является пустым.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":checked") }}</td>
-   <td>Соответствует переключателю или флажку в выбранном состоянии.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":current") }}</td>
-   <td>Соответствует элементу или предку элемента, который в данный момент отображается.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":default") }}</td>
-   <td>Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (<em>обрабатывают нажатие клавиши enter</em>) в наборе сходных элементов.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":dir") }}</td>
-   <td>Выбирает элемент на основе его направленности (значение атрибута HTML <code><a href="/ru/docs/Web/HTML/Global_attributes/dir">dir</a></code> или свойства CSS <code><a href="/ru/docs/Web/CSS/direction">direction</a></code> ).</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":disabled") }}</td>
-   <td>Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":empty") }}</td>
-   <td>Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":enabled") }}</td>
-   <td>Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":first") }}</td>
-   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует первой странице.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":first-child") }}</td>
-   <td>Соответствует элементу, который является первым среди других дочерних элементов одного предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":first-of-type") }}</td>
-   <td>Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":focus") }}</td>
-   <td>Соответствует элементу, имеющему фокус.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":focus-visible")}}</td>
-   <td>Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":focus-within") }}</td>
-   <td>Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":future") }}</td>
-   <td>Соответствует элементам после текущего элемента.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":hover") }}</td>
-   <td>Соответствует элементу, на который наведён курсор мыши.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":indeterminate") }}</td>
-   <td>Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно <a href="/ru/docs/Web/HTML/Element/Input/checkbox">checkboxes</a>.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":in-range") }}</td>
-   <td>Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":invalid") }}</td>
-   <td>Соответствует элементу, например <code>&lt;input&gt;</code>, в недопустимом состоянии.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":lang") }}</td>
-   <td>Соответствует элементу, основанному на языке (значение атрибута HTML <a href="/ru/docs/Web/HTML/Global_attributes/lang">lang</a>).</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":last-child") }}</td>
-   <td>Соответствует элементу, который является последним среди других дочерних элементов одного предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":last-of-type") }}</td>
-   <td>Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":left") }}</td>
-   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует левосторонним страницам.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":link")}}</td>
-   <td>Соответствует непосещавшимся ссылкам.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":local-link")}}</td>
-   <td>Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":is", ":is()")}}</td>
-   <td>Соответствует любому селектору из полученного списка селекторов.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":not") }}</td>
-   <td>Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":nth-child") }}</td>
-   <td>Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":nth-of-type") }}</td>
-   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы &lt;p&gt;) — дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":nth-last-child") }}</td>
-   <td>Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":nth-last-of-type") }}</td>
-   <td>Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы &lt;p&gt;), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида <em>an+b</em> (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":only-child") }}</td>
-   <td>Соответствует элементу, являющемуся единственным дочерним для своего предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":only-of-type") }}</td>
-   <td>Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":optional") }}</td>
-   <td>Соответствует необязательным элементам формы.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":out-of-range") }}</td>
-   <td>Соответствует элементу с диапазоном, когда его значение находится вне диапазона.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":past") }}</td>
-   <td>Соответствует элементам перед текущим элементом.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":placeholder-shown") }}</td>
-   <td>Соответствует элементу input, который показывает текст-заполнитель.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":playing") }}</td>
-   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":paused") }}</td>
-   <td>Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":read-only") }}</td>
-   <td>Соответствует элементу, который не может быть изменён пользователем.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":read-write") }}</td>
-   <td>Соответствует элементу, который может быть изменён пользователем.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":required") }}</td>
-   <td>Соответствует обязательным элементам формы.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":right") }}</td>
-   <td>В <a href="/ru/docs/Web/CSS/Paged_Media">постраничном носителе</a> соответствует правосторонним страницам.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":root") }}</td>
-   <td>Соответствует элементу, который является корнем документа.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":scope") }}</td>
-   <td>Соответствует любому элементу, который является элементом области видимости.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":valid") }}</td>
-   <td>Соответствует элементу, такому как &lt;input&gt;, в допустимом состоянии.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":target") }}</td>
-   <td>Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему <a href="https://en.wikipedia.org/wiki/Fragment_identifier">URL fragment</a>).</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref(":visited") }}</td>
-   <td>Соответствует посещённым ссылкам.</td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Псевдоэлементы">Псевдоэлементы</h3>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Селектор</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{ Cssxref("::after") }}</td>
-   <td>Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::before") }}</td>
-   <td>Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::first-letter") }}</td>
-   <td>Соответствует первой букве элемента.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::first-line") }}</td>
-   <td>Соответствует первой строке содержимого порождающего элемента.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::grammar-error") }}</td>
-   <td>
-    <p>Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.</p>
-   </td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::marker") }}</td>
-   <td>Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.</td>
-  </tr>
-  <tr>
-   <td>
-    <p>{{ Cssxref("::selection") }}</p>
-   </td>
-   <td>Соответствует части документа, которая была выбрана.</td>
-  </tr>
-  <tr>
-   <td>{{ Cssxref("::spelling-error") }}</td>
-   <td>
-    <p>Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
-</ol>
+}
+```
+
+## Генерация контента с помощью ::before и ::after
+
+Существует пара специальных псевдоэлементов, которые используются вместе со свойством [`content`](/en-US/docs/Web/CSS/content) для вставки содержимого в документ с помощью CSS.
+
+Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент `::before` на `::after` и увидите, что текст вставлен в конце элемента, а не в начале.
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}
+
+Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
+
+Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}
+
+Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.
+
+В следующем примере мы добавили пустую строку, используя псевдоэлемент `::before.` Мы установили `display: block`, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.
+
+{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}
+
+Использование псевдоэлементов `::before` и `::after` вместе со свойством `content` в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт [CSS Arrow Please](http://www.cssarrowplease.com/), который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..
+
+## Справочный раздел
+
+Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.
+
+### Псевдоклассы
+
+| Селектор                                         | Описание                                                                                                                                                                                                                                                                                                                                                                                                          |
+| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{ Cssxref(":active") }}                 | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент.                                                                                                                                                                                                                                                                                                                                        |
+| {{ Cssxref(":any-link") }}             | Соответствует как состоянию `:link,` так и состоянию`:visited` ссылки.                                                                                                                                                                                                                                                                                                                                            |
+| {{ Cssxref(":blank") }}                 | Соответствует [элементу `<input>`](/ru/docs/Web/HTML/Element/Input), для которого значение ввода является пустым.                                                                                                                                                                                                                                                                                                 |
+| {{ Cssxref(":checked") }}                 | Соответствует переключателю или флажку в выбранном состоянии.                                                                                                                                                                                                                                                                                                                                                     |
+| {{ Cssxref(":current") }}                 | Соответствует элементу или предку элемента, который в данный момент отображается.                                                                                                                                                                                                                                                                                                                                 |
+| {{ Cssxref(":default") }}                 | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (_обрабатывают нажатие клавиши enter_) в наборе сходных элементов.                                                                                                                                                                                                                           |
+| {{ Cssxref(":dir") }}                     | Выбирает элемент на основе его направленности (значение атрибута HTML [`dir`](/ru/docs/Web/HTML/Global_attributes/dir) или свойства CSS [`direction`](/ru/docs/Web/CSS/direction) ).                                                                                                                                                                                                                              |
+| {{ Cssxref(":disabled") }}             | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":empty") }}                 | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.                                                                                                                                                                                                                                                                                                                         |
+| {{ Cssxref(":enabled") }}                 | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":first") }}                 | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует первой странице.                                                                                                                                                                                                                                                                                                                            |
+| {{ Cssxref(":first-child") }}         | Соответствует элементу, который является первым среди других дочерних элементов одного предка.                                                                                                                                                                                                                                                                                                                    |
+| {{ Cssxref(":first-of-type") }}         | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка.                                                                                                                                                                                                                                                                                                 |
+| {{ Cssxref(":focus") }}                 | Соответствует элементу, имеющему фокус.                                                                                                                                                                                                                                                                                                                                                                           |
+| {{ Cssxref(":focus-visible")}}         | Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.                                                                                                                                                                                                                                                                                                                            |
+| {{ Cssxref(":focus-within") }}         | Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.                                                                                                                                                                                                                                                                                                                               |
+| {{ Cssxref(":future") }}                 | Соответствует элементам после текущего элемента.                                                                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":hover") }}                 | Соответствует элементу, на который наведён курсор мыши.                                                                                                                                                                                                                                                                                                                                                           |
+| {{ Cssxref(":indeterminate") }}         | Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно [checkboxes](/ru/docs/Web/HTML/Element/Input/checkbox).                                                                                                                                                                                                                                       |
+| {{ Cssxref(":in-range") }}             | Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.                                                                                                                                                                                                                                                                                                                           |
+| {{ Cssxref(":invalid") }}                 | Соответствует элементу, например `<input>`, в недопустимом состоянии.                                                                                                                                                                                                                                                                                                                                             |
+| {{ Cssxref(":lang") }}                     | Соответствует элементу, основанному на языке (значение атрибута HTML [lang](/ru/docs/Web/HTML/Global_attributes/lang)).                                                                                                                                                                                                                                                                                           |
+| {{ Cssxref(":last-child") }}             | Соответствует элементу, который является последним среди других дочерних элементов одного предка.                                                                                                                                                                                                                                                                                                                 |
+| {{ Cssxref(":last-of-type") }}         | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.                                                                                                                                                                                                                                                                                              |
+| {{ Cssxref(":left") }}                     | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует левосторонним страницам.                                                                                                                                                                                                                                                                                                                    |
+| {{ Cssxref(":link")}}                     | Соответствует непосещавшимся ссылкам.                                                                                                                                                                                                                                                                                                                                                                             |
+| {{ Cssxref(":local-link")}}             | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.                                                                                                                                                                                                                                                                                                      |
+| {{ Cssxref(":is", ":is()")}}             | Соответствует любому селектору из полученного списка селекторов.                                                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":not") }}                     | Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.                                                                                                                                                                                                                                                                                                          |
+| {{ Cssxref(":nth-child") }}             | Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида _an+b_ (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)                                                                                                                                                                                                            |
+| {{ Cssxref(":nth-of-type") }}         | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы \<p>) — дочерние элементы подобраны по формуле вида _an+b_ (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.)                                                                                                                                             |
+| {{ Cssxref(":nth-last-child") }}     | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида _an+b_ (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.)                                                                |
+| {{ Cssxref(":nth-last-of-type") }}     | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы \<p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида _an+b_ (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
+| {{ Cssxref(":only-child") }}             | Соответствует элементу, являющемуся единственным дочерним для своего предка.                                                                                                                                                                                                                                                                                                                                      |
+| {{ Cssxref(":only-of-type") }}         | Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.                                                                                                                                                                                                                                                                                                               |
+| {{ Cssxref(":optional") }}             | Соответствует необязательным элементам формы.                                                                                                                                                                                                                                                                                                                                                                     |
+| {{ Cssxref(":out-of-range") }}         | Соответствует элементу с диапазоном, когда его значение находится вне диапазона.                                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":past") }}                     | Соответствует элементам перед текущим элементом.                                                                                                                                                                                                                                                                                                                                                                  |
+| {{ Cssxref(":placeholder-shown") }} | Соответствует элементу input, который показывает текст-заполнитель.                                                                                                                                                                                                                                                                                                                                               |
+| {{ Cssxref(":playing") }}                 | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.                                                                                                                                                                                                                                      |
+| {{ Cssxref(":paused") }}                 | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.                                                                                                                                                                                                                                        |
+| {{ Cssxref(":read-only") }}             | Соответствует элементу, который не может быть изменён пользователем.                                                                                                                                                                                                                                                                                                                                              |
+| {{ Cssxref(":read-write") }}             | Соответствует элементу, который может быть изменён пользователем.                                                                                                                                                                                                                                                                                                                                                 |
+| {{ Cssxref(":required") }}             | Соответствует обязательным элементам формы.                                                                                                                                                                                                                                                                                                                                                                       |
+| {{ Cssxref(":right") }}                 | В [постраничном носителе](/ru/docs/Web/CSS/Paged_Media) соответствует правосторонним страницам.                                                                                                                                                                                                                                                                                                                   |
+| {{ Cssxref(":root") }}                     | Соответствует элементу, который является корнем документа.                                                                                                                                                                                                                                                                                                                                                        |
+| {{ Cssxref(":scope") }}                 | Соответствует любому элементу, который является элементом области видимости.                                                                                                                                                                                                                                                                                                                                      |
+| {{ Cssxref(":valid") }}                 | Соответствует элементу, такому как \<input>, в допустимом состоянии.                                                                                                                                                                                                                                                                                                                                              |
+| {{ Cssxref(":target") }}                 | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему [URL fragment](https://en.wikipedia.org/wiki/Fragment_identifier)).                                                                                                                                                                                                                              |
+| {{ Cssxref(":visited") }}                 | Соответствует посещённым ссылкам.                                                                                                                                                                                                                                                                                                                                                                                 |
+
+### Псевдоэлементы
+
+| Селектор                                     | Описание                                                                                                            |
+| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| {{ Cssxref("::after") }}             | Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента. |
+| {{ Cssxref("::before") }}             | Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.   |
+| {{ Cssxref("::first-letter") }}     | Соответствует первой букве элемента.                                                                                |
+| {{ Cssxref("::first-line") }}     | Соответствует первой строке содержимого порождающего элемента.                                                      |
+| {{ Cssxref("::grammar-error") }} | Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.                              |
+| {{ Cssxref("::marker") }}             | Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.                           |
+| {{ Cssxref("::selection") }}         | Соответствует части документа, которая была выбрана.                                                                |
+| {{ Cssxref("::spelling-error") }} | Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.                             |
+
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}
+
+## В этом модуле
+
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+3.  [Модель коробки](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)[](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md
index e193f2b5859ca5..59e6141958cede 100644
--- a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.md
@@ -7,132 +7,104 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks
 original_slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
+Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.
 
+> **Примечание:** вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/), которые можно использовать для работы над заданием, предварительно загрузив в них код.
+>
+> Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел [Оценка или дальнейшая помощь](/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь) внизу этой страницы.
 
-<p>Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.</p>
+## Selectors One
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>, которые можно использовать для работы над заданием, предварительно загрузив в них код.<br>
- <br>
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%9A%D0%B0%D1%81%D0%BA%D0%B0%D0%B4_%D0%B7%D0%B0%D0%B4%D0%B0%D1%87%D0%B8#Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> внизу этой страницы.</p>
-</div>
+Without changing the HTML, use CSS to do the following things:
 
-<h2 id="Selectors_One">Selectors One</h2>
+- Make h1 headings blue.
+- Give h2 headings a blue background and white text.
+- Cause text wrapped in a span to have a font-size of 200%.
 
-<p>Without changing the HTML, use CSS to do the following things:</p>
+![Text with the CSS applied for the solution to task 1.](https://mdn.mozillademos.org/files/17118/selectors1.jpg)
 
-<ul>
- <li>Make h1 headings blue.</li>
- <li>Give h2 headings a blue background and white text.</li>
- <li>Cause text wrapped in a span to have a font-size of 200%.</li>
-</ul>
+Try updating the live code below to recreate the finished example:
 
-<p><img alt="Text with the CSS applied for the solution to task 1." src="https://mdn.mozillademos.org/files/17118/selectors1.jpg" style="height: 781px; width: 1026px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}
 
-<p>Try updating the live code below to recreate the finished example:</p>
+> **Примечание:** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html) to work in your own editor or in an online editor.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}</p>
+## Selectors Two
 
-<div class="blockIndicator note">
-<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/type-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
+Without changing the HTML, make the following changes to the look of the content in this example:
 
-<h2 id="Selectors_Two">Selectors Two</h2>
+- Give the element with an id of `special` a yellow background.
+- Give the element with a class of `alert` a 1px grey border.
+- If the element with a class of `alert` also has a class of `stop`, make the background red.
+- If the element with a class of `alert` also has a class of `go`, make the background green.
 
-<p>Without changing the HTML, make the following changes to the look of the content in this example:</p>
+![Text with the CSS applied for the solution to task 2.](https://mdn.mozillademos.org/files/17119/selectors2.jpg)
 
-<ul>
- <li>Give the element with an id of <code>special</code> a yellow background.</li>
- <li>Give the element with a class of <code>alert</code> a 1px grey border.</li>
- <li>If the element with a class of <code>alert</code> also has a class of <code>stop</code>, make the background red.</li>
- <li>If the element with a class of <code>alert</code> also has a class of <code>go</code>, make the background green.</li>
-</ul>
+Try updating the live code below to recreate the finished example:
 
-<p><img alt="Text with the CSS applied for the solution to task 2." src="https://mdn.mozillademos.org/files/17119/selectors2.jpg" style="height: 891px; width: 1027px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}
 
-<p>Try updating the live code below to recreate the finished example:</p>
+> **Примечание:** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html) to work in your own editor or in an online editor.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}</p>
+## Selectors Three
 
-<div class="blockIndicator note">
-<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/class-id-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
+In this example, try making the following changes without adding to the HTML.
 
-<h2 id="Selectors_Three">Selectors Three</h2>
+- Style links, making the link-state orange, visited links green, and remove the underline on hover.
+- Make the first element inside the container font-size: 150% and the first line of that element red.
+- Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.
 
-<p>In this example, try making the following changes without adding to the HTML.</p>
+![Text with the CSS applied for the solution to task 3.](https://mdn.mozillademos.org/files/17120/selectors3.jpg)
 
-<ul>
- <li>Style links, making the link-state orange, visited links green, and remove the underline on hover.</li>
- <li>Make the first element inside the container font-size: 150% and the first line of that element red.</li>
- <li>Stripe every other row in the table by selecting these rows and giving them a background color of #333 and foreground of white.</li>
-</ul>
+Try updating the live code below to recreate the finished example:
 
-<p><img alt="Text with the CSS applied for the solution to task 3." src="https://mdn.mozillademos.org/files/17120/selectors3.jpg" style="height: 926px; width: 1227px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}
 
-<p>Try updating the live code below to recreate the finished example:</p>
+> **Примечание:** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html) to work in your own editor or in an online editor.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}</p>
+## Selectors Four
 
-<div class="blockIndicator note">
-<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/pseudo-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
+In this task try the following:
 
-<h2 id="Selectors_Four">Selectors Four</h2>
+- Make any paragraph that directly follows an h2 element red.
+- Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.
 
-<p>In this task try the following:</p>
+![Text with the CSS applied for the solution to task 4.](https://mdn.mozillademos.org/files/17121/selectors4.jpg)
 
-<ul>
- <li>Make any paragraph that directly follows an h2 element red.</li>
- <li>Remove the bullets and add a 1px grey bottom border only to list items that are a direct child of the ul with a class of list.</li>
-</ul>
+Try updating the live code below to recreate the finished example:
 
-<p><img alt="Text with the CSS applied for the solution to task 4." src="https://mdn.mozillademos.org/files/17121/selectors4.jpg" style="height: 788px; width: 1222px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}
 
-<p>Try updating the live code below to recreate the finished example:</p>
+> **Примечание:** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html) to work in your own editor or in an online editor.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}</p>
+## Selectors Five
 
-<div class="blockIndicator note">
-<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/combinators-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
+In this final task add CSS using attribute selectors to do the following:
 
-<h2 id="Selectors_Five">Selectors Five</h2>
+- Target the `<a>` element with a `title` attribute and make the border pink (`border-color: pink`).
+- Target the `<a>` element with an `href` attribute that contains the word `contact` somewhere in its value and make the border orange (`border-color: orange`).
+- Target the `<a>` element with an `href` value starting with `https` and give it a green border (`border-color: green`).
 
-<p>In this final task add CSS using attribute selectors to do the following:</p>
+![Four links with different color borders.](https://mdn.mozillademos.org/files/17147/selectors-attribute.png)
 
-<ul>
- <li>Target the <code>&lt;a&gt;</code> element with a <code>title</code> attribute and make the border pink (<code>border-color: pink</code>).</li>
- <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> attribute that contains the word <code>contact</code> somewhere in its value and make the border orange (<code>border-color: orange</code>).</li>
- <li>Target the <code>&lt;a&gt;</code> element with an <code>href</code> value starting with <code>https</code> and give it a green border (<code>border-color: green</code>).</li>
-</ul>
+Try updating the live code below to recreate the finished example:
 
-<p><img alt="Four links with different color borders." src="https://mdn.mozillademos.org/files/17147/selectors-attribute.png" style="height: 485px; width: 1264px;"></p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}
 
-<p>Try updating the live code below to recreate the finished example:</p>
+> **Примечание:** For assessment or further work purposes, [download the starting point for this task](https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html) to work in your own editor or in an online editor.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}</p>
+## Assessment or further help
 
-<div class="blockIndicator note">
-<p>For assessment or further work purposes, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/selectors/attribute-links-download.html">download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
+You can practice these examples in the Interactive Editors mentioned above.
 
-<h2 id="Assessment_or_further_help">Assessment or further help</h2>
+If you would like your work assessed, or are stuck and want to ask for help:
 
-<p>You can practice these examples in the Interactive Editors mentioned above.</p>
+1.  Put your work into an online shareable editor such as [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/). You can write the code yourself, or use the starting point files linked to in the above sections.
+2.  Write a post asking for assessment and/or help at the [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Your post should include:
 
-<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
-
-<ol>
- <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
- <li>Write a post asking for assessment and/or help at the <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Your post should include:
-  <ul>
-   <li>A descriptive title such as "Assessment wanted for Selectors skill test 1".</li>
-   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
-   <li>A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
-   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
-  </ul>
- </li>
-</ol>
+    - A descriptive title such as "Assessment wanted for Selectors skill test 1".
+    - Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
+    - A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
+    - A link to the actual task or assessment page, so we can find the question you want help with.
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
index d271c13ee520ee..8f2d9698238d1e 100644
--- a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
+++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.md
@@ -11,121 +11,109 @@ tags:
 translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
 original_slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}
 
-<p>В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.</p>
+В этом уроке мы рассмотрим некоторые из базисных селекторов, которые вы, вероятно, будете чаще всего использовать в вашей работе.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания о <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)) и понимание работы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:              | Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
 
-<h2 id="Селекторы_типа">Селекторы типа</h2>
+## Селекторы типа
 
-<p><strong>Селектор типа</strong> иногда называется <em>селектором имени тега</em> или <em>селектором элемента</em>, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.</p>
+**Селектор типа** иногда называется _селектором имени тега_ или _селектором элемента_, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.
 
-<p><strong>Попробуйте добавить CSS-правило, чтобы выбрать элемент <code>&lt;h1&gt;</code> и изменить его цвет на синий.</strong></p>
+**Попробуйте добавить CSS-правило, чтобы выбрать элемент `<h1>` и изменить его цвет на синий.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}
 
-<h2 id="Универсальный_селектор">Универсальный селектор</h2>
+## Универсальный селектор
 
-<p>Универсальный селектор обозначается звёздочкой (<code>*</code>). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.</p>
+Универсальный селектор обозначается звёздочкой (`*`). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}
 
-<p>Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.</p>
+Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.
 
-<h3 id="Использование_универсального_селектора_для_облегчения_чтения_ваших_селекторов">Использование универсального селектора для облегчения чтения ваших селекторов</h3>
+### Использование универсального селектора для облегчения чтения ваших селекторов
 
-<p>Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <code>&lt;article&gt;</code>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <code>&lt;article&gt;</code>, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">псевдоклассах и псевдо-элементах</a>, как селектор-потомок вместе с селектором элемента <code>&lt;article&gt;</code>: </p>
+Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента `<article>`, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого `<article>`, и сделать их шрифт жирным, мы могли бы использовать псевдокласс {{cssxref(":first-child")}}, который мы будем изучать в уроке о [псевдоклассах и псевдо-элементах](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements), как селектор-потомок вместе с селектором элемента `<article>`:
 
-<pre class="brush: css">article :first-child {
+```css
+article :first-child {
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Однако этот селектор можно спутать с <code>article:first-child</code>, который выберет любой элемент <code>&lt;article&gt;</code>, являющийся первым дочерним элементом другого элемента .</p>
+Однако этот селектор можно спутать с `article:first-child`, который выберет любой элемент `<article>`, являющийся первым дочерним элементом другого элемента .
 
-<p>Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс <code>:first-child</code> , чтобы было очевидно, что делает селектор. Он выбирает <em>любой</em> элемент, который является первым дочерним элементом элемента <code>&lt;article&gt;</code> или первым дочерним элементом любого потомка элемента <code>&lt;article&gt;</code>:</p>
+Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдокласс `:first-child` , чтобы было очевидно, что делает селектор. Он выбирает _любой_ элемент, который является первым дочерним элементом элемента `<article>` или первым дочерним элементом любого потомка элемента `<article>`:
 
-<pre class="brush: css">article *:first-child {
+```css
+article *:first-child {
   font-weight: bold;
-} </pre>
+}
+```
 
-<p>Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.</p>
+Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.
 
-<h2 id="Селекторы_класса">Селекторы класса</h2>
+## Селекторы класса
 
-<p>Селектор класса начинается с символа точки (<code>.</code>). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем <code>.highlight</code>, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.</p>
+Селектор класса начинается с символа точки (`.`). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем `.highlight`, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}
 
-<h3 id="Нацеливание_классов_на_отдельные_элементы">Нацеливание классов на отдельные элементы</h3>
+### Нацеливание классов на отдельные элементы
 
-<p>Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <code>&lt;span&gt;</code> с классом <code>highlight</code> иначе, чем заголовок <code>&lt;h1&gt;</code> с классом <code>highlight</code>. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.</p>
+Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим `<span>` с классом `highlight` иначе, чем заголовок `<h1>` с классом `highlight`. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}
 
-<p>Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.</p>
+Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.
 
-<h3 id="Нацеливание_на_элемент_к_которому_применено_более_одного_класса">Нацеливание на элемент, к которому применено более одного класса</h3>
+### Нацеливание на элемент, к которому применено более одного класса
 
-<p>Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.</p>
+Вы можете применить несколько классов к элементу и нацелиться на них по отдельности, или выбрать элемент только если присутствуют все классы селектора. Это может быть полезно при создании компонентов, которые могут сочетаться на вашем сайте разными способами.
 
-<p>В примере ниже у нас есть <code>&lt;div&gt;</code>, содержащий примечание. Серая граница применяется когда блок имеет класс <code>notebox</code>. Если у блока есть также класс <code>warning</code> или <code>danger</code>, мы меняем {{cssxref("border-color")}}.</p>
+В примере ниже у нас есть `<div>`, содержащий примечание. Серая граница применяется когда блок имеет класс `notebox`. Если у блока есть также класс `warning` или `danger`, мы меняем {{cssxref("border-color")}}.
 
-<p>Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними.  Вы увидите, что к последнему <code>&lt;div&gt;</code>  не применён ни один стиль, так как он имеет только класс <code>danger</code>; ему нужен ещё и класс  <code>notebox</code>, чтобы получить какую-нибудь стилизацию.</p>
+Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему `<div>` не применён ни один стиль, так как он имеет только класс `danger`; ему нужен ещё и класс `notebox`, чтобы получить какую-нибудь стилизацию.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}
 
-<h2 id="Селекторы_ID">Селекторы ID</h2>
+## Селекторы ID
 
-<p>Селектор ID начинается с <code>#</code>, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один <code>id</code>. Можно выбрать элемент, которому присвоен  <code>id</code>, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:</p>
+Селектор ID начинается с `#`, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один `id`. Можно выбрать элемент, которому присвоен `id`, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:
 
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}
 
-<div class="blockIndicator warning">
-<p><strong>Предупреждение: </strong>Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.</p>
-</div>
+> **Предупреждение:**Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.
 
-<div class="blockIndicator note">
-<p><strong>Примечание:</strong> Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.</p>
-</div>
+> **Примечание:** Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.
 
-<h2 id="В_следующей_статье">В следующей статье</h2>
+## В следующей статье
 
-<p>Мы продолжим изучение селекторов и рассмотрим <a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">селекторы атрибута</a>.</p>
+Мы продолжим изучение селекторов и рассмотрим [селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors).
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Модель коробки (The box model)</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B/Combinators)
+
+3.  [Модель коробки (The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
index 72913de5e1b1ca..8f0e2c20b0fe79 100644
--- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
+++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.md
@@ -3,131 +3,117 @@ title: Изменение размеров в CSS
 slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
 
-<p>В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.</p>
+В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить различные способы задания размеров объектов в CSS.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Базовая компьютерная грамотность, [Установка базового ПО](https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания [работы с файлами](https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и общее представление о том, как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Изучить различные способы задания размеров объектов в CSS.                                                                                                                                                                                                                                                                                                                                                                                                              |
 
-<h2 id="The_natural_or_intrinsic_size_of_things">Размер по умолчанию или внутренний размер</h2>
+## Размер по умолчанию или внутренний размер
 
-<p>Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — <strong>внутренний размер</strong>, он исходит из самого изображения.</p>
+Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — **внутренний размер**, он исходит из самого изображения.
 
-<p>Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега <code>&lt;img&gt;</code> или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.</p>
+Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега `<img>` или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}
 
-<p>С другой стороны, пустой {{htmlelement("div")}} не имеет собственного размера. Если вы добавите {{htmlelement("div")}} в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.</p>
+С другой стороны, пустой {{htmlelement("div")}} не имеет собственного размера. Если вы добавите {{htmlelement("div")}} в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}
 
-<p>В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого <code>&lt;div&gt;</code> устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.</p>
+В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого `<div>` устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.
 
-<h2 id="Setting_a_specific_size">Присваивание определенного размера</h2>
+## Присваивание определенного размера
 
-<p>Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется <strong>внешним размером</strong>. Возьмите наш <code>&lt;div&gt;</code> из примера выше и установите ему специальные значения {{cssxref("width")}} и {{cssxref("height")}} и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">нашем предыдущем уроке о переполнении</a>, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.</p>
+Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется **внешним размером**. Возьмите наш `<div>` из примера выше и установите ему специальные значения {{cssxref("width")}} и {{cssxref("height")}} и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в [нашем предыдущем уроке о переполнении](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content), заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}
 
-<p>Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длины или процентного соотношения — это то, что нужно делать с большой осторожностью.</p>
+Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длины или процентного соотношения — это то, что нужно делать с большой осторожностью.
 
-<h3 id="Using_percentages">Использование процентного соотношения</h3>
+### Использование процентного соотношения
 
-<p>Во многих отношениях проценты действуют как единицы длины, и, как мы <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">обсуждали в уроке, посвященном значениям и единицам</a>, они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, <em>от чего этот процент рассчитывается</em>. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.</p>
+Во многих отношениях проценты действуют как единицы длины, и, как мы [обсуждали в уроке, посвященном значениям и единицам](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages), они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, _от чего этот процент рассчитывается_. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}
 
-<p>Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш <code>&lt;div&gt;</code> будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.</p>
+Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш `<div>` будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.
 
-<h3 id="Percentage_margins_and_padding">Margins и paddings в процентах</h3>
+### Margins и paddings в процентах
 
-<p>Если вы установите <code>margins</code> и <code>padding</code> в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку {{cssxref("margin")}} 10% и {{cssxref("padding")}} 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.</p>
+Если вы установите `margins` и `padding` в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку {{cssxref("margin")}} 10% и {{cssxref("padding")}} 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}
 
-<p>Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!</p>
+Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!
 
-<p>При использовании margins и padding, заданных в процентах, значение рассчитывается на основе <strong>inline размера</strong> блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.</p>
+При использовании margins и padding, заданных в процентах, значение рассчитывается на основе **inline размера** блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.
 
-<h2 id="min-_and_max-_sizes">Минимальные и максимальные размеры</h2>
+## Минимальные и максимальные размеры
 
-<p>Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство {{cssxref("min-height")}}. Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.</p>
+Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство {{cssxref("min-height")}}. Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.
 
-<p>В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.</p>
+В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}
 
-<p>Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.</p>
+Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.
 
-<p>Часто {{cssxref("max-width")}} применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.</p>
+Часто {{cssxref("max-width")}} применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.
 
-<p>Например, если бы вы установили <code>width: 100%</code> для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.</p>
+Например, если бы вы установили `width: 100%` для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.
 
-<p>Если бы вы вместо этого применили <code>max-width: 100%</code>%, и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.</p>
+Если бы вы вместо этого применили `max-width: 100%`%, и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.
 
-<p>В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано <code>width: 100%</code> и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано <code>max-width: 100%</code>, изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с <code>max-width: 100%</code> в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.</p>
+В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано `width: 100%` и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано `max-width: 100%`, изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с `max-width: 100%` в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}
 
-<p>Этот метод используется для создания <em>отзывчивых</em> изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.</p>
+Этот метод используется для создания _отзывчивых_ изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Узнайте больше о <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">методах создания адаптивных изображений</a>.</p>
-</div>
+> **Примечание:** Узнайте больше о [методах создания адаптивных изображений](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 
-<h2 id="Viewport_units">Единицы вьюпорта</h2>
+## Единицы вьюпорта
 
-<p>Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта  — <code>vw</code> единицы ширины вьюпорта и <code>vh</code> высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.</p>
+Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта — `vw` единицы ширины вьюпорта и `vh` высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.
 
-<p><code>1vh</code> равен 1% от высоты вьюпорта и <code>1vw</code> равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква <code>A</code>, которой присвоено значение {{cssxref("font-size")}} 10vh.</p>
+`1vh` равен 1% от высоты вьюпорта и `1vw` равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква `A`, которой присвоено значение {{cssxref("font-size")}} 10vh.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}
 
-<p><strong>Если вы измените величину <code>vh</code> и <code>vw</code> — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение <code>&lt;iframe&gt;</code>, содержащее показанный выше пример, является его окном просмотра).  <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Откройте пример</a>, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.</strong></p>
+**Если вы измените величину `vh` и `vw` — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение `<iframe>`, содержащее показанный выше пример, является его окном просмотра). [Откройте пример](https://mdn.github.io/css-examples/learn/sizing/vw-vh.html), измените размер окна браузера и посмотрите, что происходит с размером поля и текста.**
 
-<p>Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.</p>
+Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.
 
-<h2 id="Test_your_skills!">Проверьте свои навыки!</h2>
+## Проверьте свои навыки!
 
-<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks">Проверка своих навыков: задание размеров</a>.</p>
+В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. [Проверка своих навыков: задание размеров](/ru/docs/Learn/CSS/Building_blocks/Sizing_tasks).
 
-<h2 id="Summary">Заключение</h2>
+## Заключение
 
-<p>Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладке</a>, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.</p>
+Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к [CSS раскладке](/ru/docs/Learn/CSS/CSS_layout), изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}
 
-<h2 id="In_this_module">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li>
-</ol>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [Блочная модель(The box model)](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и границы](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Размеры в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашей CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/styling_tables/index.md b/files/ru/learn/css/building_blocks/styling_tables/index.md
index 48f22a95e3f29b..c8c5fae018d2d1 100644
--- a/files/ru/learn/css/building_blocks/styling_tables/index.md
+++ b/files/ru/learn/css/building_blocks/styling_tables/index.md
@@ -7,93 +7,85 @@ tags:
   - таблицы
 translation_of: Learn/CSS/Building_blocks/Styling_tables
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}</div>
+Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.
 
-<p class="summary">Стилизация HTML таблиц это не самая гламурная работа в мире, но иногда нам нужно это делать. Эта статья руководство как сделать, чтобы ваши HTML таблицы выглядели хорошо, с некоторыми свойствами подробно рассмотренными в предыдущих статьях.</p>
+| Необходимые знания: | Базовый HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS ([Введение в CSS](/ru/docs/Learn/CSS/First_steps)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Научиться эффективно стилизовать HTML таблицы.                                                                                                                                                                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), HTML таблицы (смотрите раздел HTML таблицы (TBD)), и представление о том как работает CSS (<a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Научиться эффективно стилизовать HTML таблицы.</td>
-  </tr>
- </tbody>
-</table>
+## Типичная HTML таблица
 
-<h2 id="Типичная_HTML_таблица">Типичная HTML таблица</h2>
-
-<p>Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;A summary of the UK's most famous punk bands&lt;/caption&gt;
-  &lt;thead&gt;
-    &lt;tr&gt;
-      &lt;th scope="col"&gt;Band&lt;/th&gt;
-      &lt;th scope="col"&gt;Year formed&lt;/th&gt;
-      &lt;th scope="col"&gt;No. of Albums&lt;/th&gt;
-      &lt;th scope="col"&gt;Most famous song&lt;/th&gt;
-    &lt;/tr&gt;
-  &lt;/thead&gt;
-  &lt;tbody&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;Buzzcocks&lt;/th&gt;
-      &lt;td&gt;1976&lt;/td&gt;
-      &lt;td&gt;9&lt;/td&gt;
-      &lt;td&gt;Ever fallen in love (with someone you shouldn't've)&lt;/td&gt;
-    &lt;/tr&gt;
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;The Clash&lt;/th&gt;
-      &lt;td&gt;1976&lt;/td&gt;
-      &lt;td&gt;6&lt;/td&gt;
-      &lt;td&gt;London Calling&lt;/td&gt;
-    &lt;/tr&gt;
+Давайте начнём с рассмотрения типичной HTML таблицы. Когда мы говорим о примерах типичных HTML таблиц обычно речь идёт о обуви, погоде или сотрудниках; мы решили сделать это более интересным создав таблицу о знаменитых панк группах Великобритании. Разметка выглядит следующим образом:
+
+```html
+<table>
+  <caption>A summary of the UK's most famous punk bands</caption>
+  <thead>
+    <tr>
+      <th scope="col">Band</th>
+      <th scope="col">Year formed</th>
+      <th scope="col">No. of Albums</th>
+      <th scope="col">Most famous song</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">Buzzcocks</th>
+      <td>1976</td>
+      <td>9</td>
+      <td>Ever fallen in love (with someone you shouldn't've)</td>
+    </tr>
+    <tr>
+      <th scope="row">The Clash</th>
+      <td>1976</td>
+      <td>6</td>
+      <td>London Calling</td>
+    </tr>
 
       ... some rows removed for brevity
 
-    &lt;tr&gt;
-      &lt;th scope="row"&gt;The Stranglers&lt;/th&gt;
-      &lt;td&gt;1974&lt;/td&gt;
-      &lt;td&gt;17&lt;/td&gt;
-      &lt;td&gt;No More Heroes&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tbody&gt;
-  &lt;tfoot&gt;
-    &lt;tr&gt;
-      &lt;th scope="row" colspan="2"&gt;Total albums&lt;/th&gt;
-      &lt;td colspan="2"&gt;77&lt;/td&gt;
-    &lt;/tr&gt;
-  &lt;/tfoot&gt;
-&lt;/table&gt;</pre>
+    <tr>
+      <th scope="row">The Stranglers</th>
+      <td>1974</td>
+      <td>17</td>
+      <td>No More Heroes</td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <th scope="row" colspan="2">Total albums</th>
+      <td colspan="2">77</td>
+    </tr>
+  </tfoot>
+</table>
+```
+
+Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь [punk-bands-unstyled.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html)):
 
-<p>Таблица размечена, немного стилизована и понятна, благодаря использованию таких свойств как {{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} и т.д. К сожалению при просмотре в браузере она не очень хорошо выглядит (посмотреть можно здесь <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a>):</p>
+![](table-unstyled.png)
 
-<p><img alt="" src="table-unstyled.png" style="display: block; margin: 0 auto;"></p>
+Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.
 
-<p>Это выглядит достаточно грубо, трудно читаемо и скучно. Нам нужно использовать немного CSS чтобы все исправить.</p>
+## Активное обучение: Стилизация таблицы
 
-<h2 id="Активное_обучение_Стилизация_таблицы">Активное обучение: Стилизация таблицы</h2>
+В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.
 
-<p>В этой части обучения мы будем работать над тем чтобы стилизовать наш пример таблицы.</p>
+1.  В начале необходимо сделать копию [sample markup](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html), загрузить оба изображения ([noise](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png) и [leopardskin](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg)), и вставить эти файлы в отдельную папку на вашем компьютере.
+2.  Следующее, это создать новый файл `style.css` и сохранить его в той же папке вместе с другими файлами.
+3.  Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
 
-<ol>
- <li>В начале необходимо сделать копию <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a>, загрузить оба изображения (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">noise</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">leopardskin</a>), и вставить эти файлы в отдельную папку на вашем компьютере.</li>
- <li>Следующее, это создать новый файл <code>style.css</code> и сохранить его в той же папке вместе с другими файлами.</li>
- <li>Подключить CSS в HTML для этого разместить следующую строку в HTML внутри {{htmlelement("head")}}:
-  <pre class="brush: html">&lt;link href="style.css" rel="stylesheet" type="text/css"&gt;</pre>
- </li>
-</ol>
+    ```html
+    <link href="style.css" rel="stylesheet" type="text/css">
+    ```
 
-<h3 id="Отступы_и_разметка">Отступы и разметка</h3>
+### Отступы и разметка
 
-<p>Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш <code>style.css</code> файл:</p>
+Первое что нам нужно это разобраться с отступами/разметкой, так как по умолчанию стилизация таблцы выглядит неразборчиво! Сделаем это, добавив CSS в ваш `style.css` файл:
 
-<pre class="brush: css">/* spacing */
+```css
+/* spacing */
 
 table {
   table-layout: fixed;
@@ -120,36 +112,39 @@ thead th:nth-child(4) {
 
 th, td {
   padding: 20px;
-}</pre>
+}
+```
 
-<p>Наиболее важные части следующие:</p>
+Наиболее важные части следующие:
 
-<ul>
- <li>Свойство {{cssxref("table-layout")}} со значением <code>fixed</code> как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда <code>table-layout: fixed</code>, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) ("Выберите <em>n-ый</em> дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье <a href="https://css-tricks.com/fixing-tables-long-strings/">Fixed Table Layouts</a>.<br>
-  <br>
-  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).</li>
- <li>Свойство {{cssxref("border-collapse")}} со значением <code>collapse</code> это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: <img alt="" src="no-border-collapse.png" style="display: block; margin: 0 auto;">Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить <code>border-collapse: collapse;</code>  рамки схлопываются в одну и так выглядит намного лучше: <img alt="" src="border-collapse.png" style="display: block; margin: 0 auto;"></li>
- <li>Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.</li>
- <li>Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.</li>
-</ul>
+- Свойство {{cssxref("table-layout")}} со значением `fixed` как правило полезно использовать для вашей таблицы, это делает поведение таблицы немного более предсказуемым, чем значение по умолчанию. Обычно столбцы таблицы имеют размер в зависимости от того сколько в них контента, что приводит иногда к некоторым странным результатам. Когда `table-layout: fixed`, размер ваших столбцов определяется шириной их заголовков и делает их контент соответствующего размера. Вот почему вы выбрали четыре разных заголовка с помощью селектора `thead th:nth-child(n)` ({{cssxref(":nth-child")}}) ("Выберите _n-ый_ дочерний элемент {{htmlelement("th")}} в последовательности, внутри элемента {{htmlelement("thead")}}") и задать им заданную в процентах ширину. Ширина колонки соответствует ширине её заголовка, это правильное решение при определении размеров колонок таблицы. Крис Койер (Chris Coyier) более подробно рассматривает эту технику в статье [Fixed Table Layouts](https://css-tricks.com/fixing-tables-long-strings/).
 
-<p>На этом этапе наша таблица выглядит уже гораздо лучше:</p>
+  Мы также использовали {{cssxref("width")}} 100%, что означает, что таблица заполнит любой контейнер и будет отзывчивой (хотя для этого потребуется ещё некоторая работа для правильного отображения на экранах небольших размеров).
 
-<p><img alt="" src="table-with-spacing.png" style="display: block; margin: 0 auto;"></p>
+- Свойство {{cssxref("border-collapse")}} со значением `collapse` это стандартная практика при стилизации любой таблицы. По умолчанию, когда вы задали рамки для элементов таблицы, все они будут иметь пробелы между собой, как показано на рисунке ниже: ![](no-border-collapse.png)Это не очень хорошо выглядит (хотя может это то что вам нужно, кто знает?). Если установить `border-collapse: collapse;` рамки схлопываются в одну и так выглядит намного лучше: ![](border-collapse.png)
+- Мы установили {{cssxref("border")}} вокруг всей таблицы, это понадобится когда чуть позже мы будет устанавливать рамки вокруг header и footer таблицы — когда по периметру всей таблицы нет рамки и граница заканчивается просто отступом, таблица выглядит странно и разрозненно.
+- Мы установили {{cssxref("padding")}} на элементах {{htmlelement("th")}} и {{htmlelement("td")}} — это создаёт в талице воздух, который позволяет ей дышать, делая её более понятной.
 
-<h3 id="Немного_простой_типографики">Немного простой типографики</h3>
+На этом этапе наша таблица выглядит уже гораздо лучше:
 
-<p>Теперь мы ещё кое-что изменим.</p>
+![](table-with-spacing.png)
 
-<p>Во-первых, мы пойдём и найдём на <a href="https://www.google.com/fonts">Google Fonts</a> шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.</p>
+### Немного простой типографики
 
-<p>Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента <code>&lt;link&gt;</code>:</p>
+Теперь мы ещё кое-что изменим.
 
-<pre class="brush: html">&lt;link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'&gt;</pre>
+Во-первых, мы пойдём и найдём на [Google Fonts](https://www.google.com/fonts) шрифт который подходит в нашей ситуации с таблицей о панк группах. Вы можете можете выбрать для себя другой шрифт если захотят, тогда вам понадобится заменить представленный {{htmlelement("link")}} элемент и изменить объявление {{cssxref("font-family")}} на выбранный вами Google Fonts шрифт.
 
-<p>Затем добавьте следующий CSS в ваш <code>style.css</code> файл, ниже предыдущего кода:</p>
+Добавьте элемент {{htmlelement("link")}} в блок head вашего HTML, на строчку выше существующего элемента `<link>`:
 
-<pre class="brush: css">/* typography */
+```html
+<link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'>
+```
+
+Затем добавьте следующий CSS в ваш `style.css` файл, ниже предыдущего кода:
+
+```css
+/* typography */
 
 html {
   font-family: 'helvetica neue', helvetica, arial, sans-serif;
@@ -173,28 +168,28 @@ tbody td {
 
 tfoot th {
   text-align: right;
-}</pre>
+}
+```
 
-<p>Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:</p>
+Здесь нет ничего специально для таблиц, мы просто настраиваем стилизацию шрифтов, чтобы упростить чтение:
 
-<ul>
- <li>Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов {{htmlelement("thead")}} и {{htmlelement("tfoot")}}, который подходит нам по тематике панков.</li>
- <li>Мы добавили немного {{cssxref("letter-spacing")}} в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.</li>
- <li>Мы выравниваем по центру текст ячейках внутри {{htmlelement("tbody")}} чтобы они совпадали с заголовками. По умолчанию у ячеек свойство {{cssxref("text-align")}} имеет значение <code>left</code>, а заголовки значение <code>center</code>, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.</li>
- <li>Мы выровняли заголовок справа внутри {{htmlelement("tfoot")}} так чтобы он визуально ассоциировался с соответствующими ему данными.</li>
-</ul>
+- Мы установили доступный глобально шрифт sans-serif; это вполне стандартный стилистический выбор. Мы установили выбранный нами шрифт для заголовков внутри элементов {{htmlelement("thead")}} и {{htmlelement("tfoot")}}, который подходит нам по тематике панков.
+- Мы добавили немного {{cssxref("letter-spacing")}} в заголовках и ячейках которым необходимо добавить читаемости. Опять же это основной стилистический приём.
+- Мы выравниваем по центру текст ячейках внутри {{htmlelement("tbody")}} чтобы они совпадали с заголовками. По умолчанию у ячеек свойство {{cssxref("text-align")}} имеет значение `left`, а заголовки значение `center`, но обычно выглядит лучше если они выравниваются в одном стиле. По умолчанию, чтобы внешний вид заголовков отличался у них задан жирный шрифт.
+- Мы выровняли заголовок справа внутри {{htmlelement("tfoot")}} так чтобы он визуально ассоциировался с соответствующими ему данными.
 
-<p>В результате таблица выглядит немного аккуратнее:</p>
+В результате таблица выглядит немного аккуратнее:
 
-<p><img alt="" src="table-with-typography.png" style="display: block; margin: 0 auto;"></p>
+![](table-with-typography.png)
 
-<h3 id="Графика_и_цвета">Графика и цвета</h3>
+### Графика и цвета
 
-<p>И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.</p>
+И наконец-то графика и цвета! Наша таблица заполнена тем что имеет отношение к панкам, поэтому нам нужно придать ей яркий впечатляющий вид. Не беспокойтесь, вам не обязательно делать таблицу слишком кричащей — вы можете выбрать что-то более утончённое и со вкусом.
 
-<p>Следующий шаг это добавить следующий CSS в ваш <code>style.css</code> файл в самом низу:</p>
+Следующий шаг это добавить следующий CSS в ваш `style.css` файл в самом низу:
 
-<pre>thead, tfoot {
+```
+thead, tfoot {
   background: url(leopardskin.jpg);
   color: white;
   text-shadow: 1px 1px 1px black;
@@ -204,19 +199,20 @@ thead th, tfoot th, tfoot td {
   background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
   border: 3px solid purple;
 }
-</pre>
+```
 
-<p>Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.</p>
+Опять же здесь нет ничего конкретно для таблиц, но стоит отметить несколько вещей.
 
-<p>Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.</p>
+Мы добавили {{cssxref("background-image")}} в {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и изменили {{cssxref("color")}} для всего текста внутри header и footer на белый (и ещё {{cssxref("text-shadow")}}) для лучшей читаемости. Вы должны всегда быть уверены что ваш текст хорошо контрастирует с фоном, для обеспечения читаемости.
 
-<p>Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">несколько фоновых изображений</a> и <a href="/en-US/docs/Web/CSS/gradient/linear-gradient()">линейные градиенты</a>.</p>
+Также мы добавили линейный градиент для {{htmlelement("th")}} и {{htmlelement("td")}} элементов внутри header и footer для придания лёгкой приятной текстуры, а также установили этим элементам яркие пурпурные границы. Полезно иметь несколько вложенных элементов, это позволяет накладывать несколько стилей друг на друга. Да, мы могли бы установить и фоновое изображение, и линейный градиент на {{htmlelement("thead")}} и {{htmlelement("tfoot")}} элементы используя множественные фоновые изображения, но мы решили сделать это отдельно для старых браузеров, которые не поддерживают [несколько фоновых изображений](/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds) и [линейные градиенты](</ru/docs/Web/CSS/gradient/linear-gradient()>).
 
-<h4 id="Полосатая_зебра">Полосатая зебра</h4>
+#### Полосатая зебра
 
-<p>Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать <strong>полосы зебры</strong> — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш <code>style.css</code> файл:</p>
+Мы хотели бы посвятить целый раздел, чтобы показать вам как реализовать **полосы зебры** — чередующиеся цветные строки которые упрощают чтение разных строк в вашей таблице. Добавим следующий CSS в ваш `style.css` файл:
 
-<pre class="brush: css">tbody tr:nth-child(odd) {
+```css
+tbody tr:nth-child(odd) {
   background-color: #ff33cc;
 }
 
@@ -230,25 +226,25 @@ tbody tr {
 
 table {
   background-color: #ff33cc;
-}</pre>
+}
+```
 
-<ul>
- <li>Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула <code>2n-1</code> выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула <code>2n</code> выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова <code>odd</code> и <code>even</code>, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.</li>
- <li>Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный <code>.png</code> с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.</li>
- <li>И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор <code>:nth-child</code>.</li>
-</ul>
+- Ранее вы видели как {{cssxref(":nth-child")}} селектор использовался для выбора специфичных дочерних элементов. В качестве параметра также может быть передана формула, тогда он будет выбирать последовательность элементов. Так формула `2n-1` выберет все нечётные дочерние элементы (1, 3, 5 и т.д.), а формула `2n` выберет все чётные (2, 4, 6 и т.д.). Мы использовали в нашем коде ключевые слова `odd` и `even`, которые делают тоже самое что и формулы выше. В данном случае мы устанавливаем чётным и нечётным строкам разные (яркие) цвета.
+- Ещё мы добавили повторяющийся плиткой фон ко всем строкам тела таблицы, который добавляет немного шума (полупрозрачный `.png` с небольшим количеством визуальных искажений на нем), чтобы получилась некоторая текстура.
+- И наконец мы установили для таблицы сплошной цвет фона, который обеспечит фон строкам таблицы в том случае если браузер не поддерживает селектор `:nth-child`.
 
-<p>Этот взрыв цвета выглядит следующим образом:</p>
+Этот взрыв цвета выглядит следующим образом:
 
-<p><img alt="" src="table-with-color.png" style="display: block; margin: 0 auto;"></p>
+![](table-with-color.png)
 
-<p>То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.</p>
+То что получилось может быть не в вашем вкусе, но основная идея была в том, что мы попытались сделать таблицу которая не будет скучной и академической.
 
-<h3 id="Стилизация_заголовка">Стилизация заголовка</h3>
+### Стилизация заголовка
 
-<p>Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл <code>style.css</code>:</p>
+Последнее что мы сделаем с нашей таблицей это стилизация заголовка. Для этого добавим следующие строки в наш файл `style.css`:
 
-<pre class="brush: css">caption {
+```css
+caption {
   font-family: 'Rock Salt', cursive;
   padding: 20px;
   font-style: italic;
@@ -256,47 +252,40 @@ table {
   color: #666;
   text-align: right;
   letter-spacing: 1px;
-}</pre>
-
-<p>Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение <code>bottom</code>. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке <a href="https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a>):</p>
-
-<p><img alt="" src="table-with-caption.png" style="display: block; margin: 0px auto;"></p>
+}
+```
 
-<h2 id="Активное_обучение_Стилизация_вашей_собственной_таблицы">Активное обучение: Стилизация вашей собственной таблицы</h2>
+Здесь нет ничего особенного, кроме свойства {{cssxref("caption-side")}}, которое имеет значение `bottom`. В этом случае заголовок будет размещён внизу таблицы и это вместе со всем остальным обеспечивает нашей таблице окончательный вид (можно посмотреть по ссылке [punk-bands-complete.html](https://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html)):
 
-<p>Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.</p>
+![](table-with-caption.png)
 
-<h2 id="Стилизация_таблицы_быстрые_советы">Стилизация таблицы быстрые советы</h2>
+## Активное обучение: Стилизация вашей собственной таблицы
 
-<p>Короткий список наиболее полезных вещей рассмотренных выше:</p>
+Теперь мы хотим, чтобы вы взяли наш пример таблицы (или использовали собственный!) и сделали что-то значительно более стильное и менее безвкусное чем наша таблица.
 
-<ul>
- <li>Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.</li>
- <li>Используйте {{cssxref("table-layout")}}<code>: fixed</code> для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).</li>
- <li>Используйте {{cssxref("border-collapse")}}<code>: collapse</code>, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.</li>
- <li>Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.</li>
- <li>Используйте полоски зебры, чтобы облегчить чтение между строк.</li>
- <li>Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.</li>
-</ul>
+## Стилизация таблицы быстрые советы
 
-<h2 id="Заключение">Заключение</h2>
+Короткий список наиболее полезных вещей рассмотренных выше:
 
-<p>Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.</p>
+- Сделайте свою разметку простой и гибкой, например, используя для этого проценты, что сделает дизайн более отзывчивым.
+- Используйте {{cssxref("table-layout")}}`: fixed` для более понятного поведения разметки, при этом легко установить ширину столбцов, установив ширину {{cssxref("width")}} для заголовков таблицы ({{htmlelement("th")}}).
+- Используйте {{cssxref("border-collapse")}}`: collapse`, которое схлопнет границы элементов таблицы, что обеспечит аккуратный внешний вид.
+- Используйте {{htmlelement("thead")}}, {{htmlelement("tbody")}} и {{htmlelement("tfoot")}} чтобы разбить вашу таблицу на логические фрагменты и предоставив таким образом дополнительные точки для применения CSS, это даёт возможность накладывать стили друг на друга, если это необходимо.
+- Используйте полоски зебры, чтобы облегчить чтение между строк.
+- Используйте {{cssxref("text-align")}} чтобы выровнять текст в {{htmlelement("th")}} и {{htmlelement("td")}} для более аккуратного и удобного оформления.
 
-<p>{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}</p>
+## Заключение
 
-<p> </p>
+Несмотря на головокружительные успехи достигнутые в стилизации таблиц, у нас есть ещё кое-что чем мы можем занять наше время. В следующей главе мы рассмотрим некоторые продвинутые эффекты, уже устоявшиеся (например, тени box shadows) и те которые только недавно появились в браузерах, такие как режимы наложения blend-mode и фильтры.
 
-<h2 id="В_этом_блоке">В этом блоке</h2>
+{{PreviousMenuNext("Learn/CSS/Styling_boxes/Borders", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Styling_boxes")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">Box model recap</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Borders</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced box effects</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/A_cool_looking_box">A cool looking box</a></li>
-</ul>
+## В этом блоке
 
-<p> </p>
+- [Box model recap](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+- [Backgrounds](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+- [Borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+- [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+- [Advanced box effects](/ru/docs/Learn/CSS/Building_blocks/Advanced_styling_effects)
+- [Creating fancy letterheaded paper](/ru/docs/Learn/CSS/Building_blocks/Creating_fancy_letterheaded_paper)
+- [A cool looking box](/ru/docs/Learn/CSS/Building_blocks/A_cool_looking_box)
diff --git a/files/ru/learn/css/building_blocks/the_box_model/index.md b/files/ru/learn/css/building_blocks/the_box_model/index.md
index dc07ba0597f69e..0ed7702cf5ac6e 100644
--- a/files/ru/learn/css/building_blocks/the_box_model/index.md
+++ b/files/ru/learn/css/building_blocks/the_box_model/index.md
@@ -12,347 +12,306 @@ tags:
   - padding
 translation_of: Learn/CSS/Building_blocks/The_box_model
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}Каждый элемент в CSS заключён в блок, и понимание поведения этих блоков — это ключ к умению задавать раскладку с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы надлежащим образом рассмотрим _блочную модель_ CSS, чтобы вы могли создавать более сложные раскладки, понимая принцип ее работы и терминологию, которая к ней относится.
 
-<div>Каждый элемент в CSS заключён в блок, и понимание поведения этих блоков — это ключ к умению задавать раскладку с помощью CSS, то есть выстраивать одни элементы относительно других элементов. В этом уроке мы надлежащим образом рассмотрим <em>блочную модель</em> CSS, чтобы вы могли создавать более сложные раскладки, понимая принцип ее работы и терминологию, которая к ней относится.</div>
+| Необходимые условия: | Базовая компьютерная грамотность, [установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)) и понимание работы CSS (изучите [Введение в CSS](ru/docs/Learn/CSS/First_steps).) |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.                                                                                                                                                                                                                                                                                                  |
 
+## Блочные и строчные элементы
 
+В CSS мы, говоря упрощённо, имеем два типа элементов — **блочные** и **строчные**. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>
-    <p>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">установка базового ПО</a>, базовые знания о <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, основы HTML (изучите <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>) и понимание работы CSS (изучите <a href="ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Узнать как работает блочная модель CSS, из чего она состоит и как переключиться на альтернативную модель.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+Если элемент определён как блочный, то он будет вести себя следующим образом:
 
-<h2 id="Блочные_и_строчные_элементы">Блочные и строчные элементы</h2>
+- Начнётся с новой строки.
+- Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.
+- Будут применяться свойства {{cssxref("width")}} и {{cssxref("height")}}.
+- Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.
 
-<p>В CSS мы, говоря упрощённо, имеем два типа элементов — <strong>блочные</strong> и <strong>строчные</strong>. Эти характеристики относятся к поведению блоков в контексте потока страницы и относительно других блоков на странице.</p>
+Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, `<h1>`) и `<p>`, все используют `block` как свой внешний тип отображения по умолчанию.
 
-<p>Если элемент определён как блочный, то он будет вести себя следующим образом:</p>
+Если элемент имеет тип отображения `inline` (строчный), то:
 
-<ul>
- <li>Начнётся с новой строки.</li>
- <li>Будет расширяться вдоль строки таким образом, чтобы заполнить всё пространство, доступное в её контейнере. В большинстве случаев это означает, что блок станет такой же ширины, как и его контейнер, заполняя 100% доступного пространства.</li>
- <li>Будут применяться свойства {{cssxref("width")}} и {{cssxref("height")}}.</li>
- <li>Внешние и внутренние отступы, рамка будут отодвигать от него другие элементы.</li>
-</ul>
+- Он не будет начинаться с новой строки.
+- Свойства {{cssxref("width")}} и {{cssxref("height")}} не будут применяться.
+- Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.
+- Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.
 
-<p>Если не изменить намеренно тип отображения на строчный, то такие элементы, как заголовки (например, <code>&lt;h1&gt;</code>) и <code>&lt;p&gt;</code>, все используют <code>block</code> как свой внешний тип отображения по умолчанию.</p>
+Элемент `<a>`, используемый для ссылок, `<span>`, `<em>` и `<strong>` — всё это примеры по умолчанию строчных элементов.
 
-<p>Если элемент имеет тип отображения <code>inline</code> (строчный), то:</p>
+Тип отображения, применяемый к элементу, определяется значениями свойства {{cssxref("display")}}, такими как `block` и `inline`, и относится к **внешнему** значению `display`.
 
-<ul>
- <li>Он не будет начинаться с новой строки.</li>
- <li>Свойства {{cssxref("width")}} и {{cssxref("height")}} не будут применяться.</li>
- <li>Вертикальные внешние и внутренние отступы, рамки будут применяться, но не будут отодвигать другие строчные элементы.</li>
- <li>Горизонтальные внешние и внутренние отступы, рамки будут применяться и будут отодвигать другие строчные элементы.</li>
-</ul>
+## Экскурс: внутренний и внешний типы отображения
 
-<p>Элемент <code>&lt;a&gt;</code>, используемый для ссылок, <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> и <code>&lt;strong&gt;</code> — всё это примеры по умолчанию строчных элементов.</p>
+Здесь следует объяснить, что такое **внутренние** и **внешние** типы отображения. Как уже говорилось выше, каждый блок в CSS имеет _внешний_ тип отображения, который определяет, блочный он или строчный.
 
-<p>Тип отображения, применяемый к элементу, определяется значениями свойства {{cssxref("display")}}, такими как <code>block</code> и <code>inline</code>, и относится к <strong>внешнему</strong> значению <code>display</code>.</p>
+Элементы также имеют _внутренний_ тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в **[нормальном потоке](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)**: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).
 
-<h2 id="Экскурс_внутренний_и_внешний_типы_отображения">Экскурс: внутренний и внешний типы отображения</h2>
+Однако мы можем изменить внутренний тип отображения, используя такие значения `display` как `flex`. Если мы установим `display: flex;` для элемента, внешний тип отображения примет значение `block`, но внутренний тип изменится на `flex`. Любые прямые дочерние элементы этого блока станут _flex_-объектами и будут размещены в соответствии с правилами, изложенными в спецификации [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox), о которой вы узнаете позже.
 
-<p>Здесь следует объяснить, что такое <strong>внутренние</strong> и <strong>внешние</strong> типы отображения. Как уже говорилось выше, каждый блок в CSS имеет <em>внешний</em> тип отображения, который определяет, блочный он или строчный.</p>
+> **Примечание:** Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN [Блочное и срочное расположение](/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow).
 
-<p>Элементы также имеют <em>внутренний</em> тип отображения, который определяет расположение элементов внутри них. По умолчанию элементы внутри блока располагаются в <strong><a href="/ru/docs/Learn/CSS/CSS_layout/Normal_Flow">нормальном потоке</a></strong>: они ведут себя так же, как и любые другие блочные или строчные элементы (как описано выше).</p>
+Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите `flex` и другие внутренние значения, которые могут быть у ваших элементов, например [`grid`](ru/docs/Learn/CSS/CSS_layout/Grids).
 
-<p>Однако мы можем изменить внутренний тип отображения, используя такие значения <code>display</code> как <code>flex</code>. Если мы установим <code>display: flex;</code> для элемента, внешний тип отображения примет значение <code>block</code>, но внутренний тип изменится на <code>flex</code>. Любые прямые дочерние элементы этого блока станут <em>flex</em>-объектами и будут размещены в соответствии с правилами, изложенными в спецификации <a href="/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, о которой вы узнаете позже.</p>
+Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют _нормальным потоком (normal flow)_, потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Чтобы узнать больше о значениях display, и о том, как работают элементы при блочном или строчном расположении, посмотрите руководство MDN <a href="/ru/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">Блочное и срочное расположение</a>.</p>
-</div>
+## Примеры разных типов отображения
 
-<p>Когда вы перейдёте к более подробному изучению CSS вёрстки, вы встретите <code>flex</code> и другие внутренние значения, которые могут быть у ваших элементов, например <code><a href="ru/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>.</p>
+Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения `block`. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.
 
-<p>Тем не менее, блочное и строчное расположение — это поведение web-элементов по умолчанию. Как было сказано выше, это иногда называют <em>нормальным потоком (normal flow)</em>, потому что при отсутствии какой-либо другой инструкции элементы имеют блочное или строчное расположение.</p>
+Второй — это список, который свёрстан с использованием `display: flex`. Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.
 
-<h2 id="Примеры_разных_типов_отображения">Примеры разных типов отображения</h2>
+Ниже у нас есть абзац блочного типа, внутри которого есть два элемента `<span>`. Эти элементы по умолчанию имеют тип `inline`, однако у одного из них задан класс block, для которого мы установили `display: block`.
 
-<p>Давайте продолжим и рассмотрим некоторые примеры. Ниже мы имеем три разных элемента HTML с внешним типом отображения <code>block</code>. Первый — это абзац, который имеет обрамление, указанное в CSS. Браузер отображает его как блочный элемент, поэтому абзац начинается с новой строки и расширяется на всю доступную ему ширину.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}
 
-<p>Второй — это список, который свёрстан с использованием <code>display: flex</code>. Это устанавливает flex-расположение для элементов внутри контейнера, однако сам список — блочный элемент и — как и абзац — расширяется на всю ширину контейнера и начинается с новой строки.</p>
+Мы можем видеть, как строчные элементы (`inline`) ведут себя в следующем примере. Элементы `<span>` в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.
 
-<p>Ниже у нас есть абзац блочного типа, внутри которого есть два элемента <code>&lt;span&gt;</code>. Эти элементы по умолчанию имеют тип <code>inline</code>, однако у одного из них задан класс block, для которого мы установили <code>display: block</code>.</p>
+У нас также есть элемент `<ul>`, для которого установлено `display: inline-flex`, что создаёт строчный элемент вокруг нескольких flex-объектов.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}} </p>
+Наконец, у нас есть два абзаца, для которых установлено `display: inline`. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.
 
-<p>Мы можем видеть, как строчные элементы (<code>inline</code>) ведут себя в следующем примере. Элементы <code>&lt;span&gt;</code> в первом абзаце строчные по умолчанию и поэтому не приводят к переносу строки.</p>
+**В примере вы можете заменить `display: inline` на `display: block` или `display: inline-flex` на `display: flex` для переключения между этими двумя режимами отображения.**
 
-<p>У нас также есть элемент <code>&lt;ul&gt;</code>, для которого установлено <code>display: inline-flex</code>, что создаёт строчный элемент вокруг нескольких flex-объектов.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}
 
-<p>Наконец, у нас есть два абзаца, для которых установлено <code>display: inline</code>. И строчный flex-контейнер, и абзацы располагаются вместе на одной строке, а не начинаются каждый с новой строки, как они отображались бы, будучи блочными элементами.</p>
+Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства `display` может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.
 
-<p><strong>В примере вы можете заменить <code>display: inline</code> на <code>display: block</code> или <code>display: inline-flex</code> на <code>display: flex</code> для переключения между этими двумя режимами отображения.</strong></p>
+В оставшейся части урока мы сосредоточимся на внешнем типе отображения.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}} </p>
+## Что такое блочная модель CSS?
 
-<p>Позже в этих уроках вы встретите такое понятие как flex-раскладка; главное, что нужно запомнить сейчас, это то, что изменение значения свойства <code>display</code> может изменить внешний тип отображения элемента на блочный или строчный, что меняет способ его отображения относительно других элементов в раскладке страницы.</p>
+Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.
 
-<p>В оставшейся части урока мы сосредоточимся на внешнем типе отображения.</p>
+### Составляющие элемента
 
-<h2 id="Что_такое_модель_коробки_CSS">Что такое блочная модель CSS?</h2>
+Составляя блочный элемент в CSS мы имеем:
 
-<p>Полностью блочная модель в CSS применяется к блочным элементам, строчные элементы используют не все свойства, определённые блочной моделью. Модель определяет, как разные части элемента — поля, рамки, отступы и содержимое — работают вместе, чтобы создать объект, который вы можете увидеть на странице. Дополнительная сложность заключается в том, что существуют стандартная и альтернативная блочные модели.</p>
+- **Содержимое**: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как {{cssxref("width")}} и {{cssxref("height")}}.
+- **Внутренний отступ**: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью {{cssxref("padding")}} и связанных свойств.
+- **Рамка**: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью {{cssxref("border")}} и связанных свойств.
+- **Внешний отступ**: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью {{cssxref("margin")}} и связанных свойств.
 
-<h3 id="Составляющие_элемента">Составляющие элемента</h3>
+Рисунок ниже показывает эти слои:
 
-<p>Составляя блочный элемент в CSS мы имеем:</p>
+![Диаграмма блочной модели](box-model.png)
 
-<ul>
- <li><strong>Содержимое</strong>: область, где отображается ваш контент, размер которой можно изменить с помощью таких свойств, как {{cssxref("width")}} и {{cssxref("height")}}.</li>
- <li><strong>Внутренний отступ</strong>: отступы располагаются вокруг содержимого в виде пустого пространства; их размер контролируется с помощью {{cssxref("padding")}} и связанных свойств.</li>
- <li><strong>Рамка</strong>: рамка оборачивает содержимое и внутренние отступы. Её размер и стиль можно контролировать с помощью {{cssxref("border")}} и связанных свойств.</li>
- <li><strong>Внешний отступ</strong>: внешний слой, заключающий в себе содержимое, внутренний отступ и рамки, представляет собой пространство между текущим и другими элементами. Его размер контролируется с помощью {{cssxref("margin")}} и связанных свойств.</li>
-</ul>
+### Стандартная блочная модель CSS
 
-<p>Рисунок ниже показывает эти слои:</p>
+В стандартной блочной модели, если указать элементу атрибуты `width` и `height`, это определит ширину и высоту _содержимого_. Любые отступы и рамки затем добавляются к этой ширине и высоте для получения общего размера элемента. Это показано на изображении ниже.
 
-<p><img alt="Диаграмма блочной модели" src="box-model.png"></p>
+Предположим, что в элементе есть следующий CSS определяющий `width`, `height`, `margin`, `border`, и `padding`:
 
-<h3 id="Стандартная_блочная_модель_CSS">Стандартная блочная модель CSS</h3>
-
-<p>В стандартной блочной модели, если указать элементу атрибуты <code>width</code> и <code>height</code>, это определит ширину и высоту <em>содержимого</em>. Любые отступы и рамки затем добавляются к этой ширине и высоте для получения общего размера элемента. Это показано на изображении ниже.</p>
-
-<p>Предположим, что в элементе есть следующий CSS определяющий <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>:</p>
-
-<pre class="brush: css">.box {
+```css
+.box {
   width: 350px;
   height: 150px;
   margin: 10px;
   padding: 25px;
   border: 5px solid black;
 }
-</pre>
+```
 
-<p>Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.</p>
+Пространство, занимаемое нашим объектом с использованием стандартной блочной модели, на самом деле будет равно 410px в ширину (350 + 25 + 25 + 5 + 5) и 210px в высоту (150 + 25 + 25 + 5 + 5), поскольку отступы и рамки добавляются к размерам поля содержимого.
 
-<p><img alt="Отображения размера элемента при использовании стандартной блочной модели." src="standard-box-model.png"></p>
+![Отображения размера элемента при использовании стандартной блочной модели.](standard-box-model.png)
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.</p>
-</div>
+> **Примечание:** Внешний отступ не считается в фактическом размере объекта. Конечно, он влияет на общее пространство, занимаемое объектом на странице, но только на внешнюю часть. Область элемента заканчивается на рамке — она не распространяется за нее.
 
-<h3 id="Альтернативная_блочная_модель_CSS">Альтернативная блочная модель CSS</h3>
+### Альтернативная блочная модель CSS
 
-<p>Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).</p>
+Вы можете подумать, что довольно неудобно добавлять рамки и отступы, чтобы получить реальный размер элемента, и окажетесь правы! По этой причине, спустя некоторое время после стандартной блочной модели, в CSS была введена альтернативная блочная модель. При использовании альтернативной модели любая ширина — это ширина видимой части элемента на странице, поэтому ширина области содержимого будет равна общей ширине минус ширина рамки и внутреннего отступа. Тот же CSS, который использовался выше, даст следующий результат (ширина = 350px, высота = 150px).
 
-<p><img alt="Отображения размера элемента при использовании альтернативной блочной модели." src="alternate-box-model.png"></p>
+![Отображения размера элемента при использовании альтернативной блочной модели.](alternate-box-model.png)
 
-<p>По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство <code>box-sizing: border-box</code>. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.</p>
+По умолчанию браузеры используют стандартную блочную модель. Если вы хотите использовать альтернативную блочную модель для элемента, установите для него свойство `box-sizing: border-box`. С помощью этого вы говорите браузеру о том, что рамка элемента определяется любыми размерами, которые вы устанавливаете.
 
-<pre class="brush: css"><code>.box {
+```css
+.box {
   box-sizing: border-box;
-} </code></pre>
+}
+```
 
-<p>Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство <code>box-sizing</code> для элемента <code>&lt;html&gt;</code>, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">the CSS Tricks article on box-sizing</a>.</p>
+Если вы хотите, чтобы все ваши элементы использовали альтернативную блочную модель, что является распространённым выбором среди разработчиков, установите свойство `box-sizing` для элемента `<html>`, затем задайте всем элементам наследование этого значения (inherit), как показано в примере ниже. Если вы хотите понять ход мыслей, стоящий за этим решением, читайте статью [the CSS Tricks article on box-sizing](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/).
 
-<pre class="brush: css">html {
+```css
+html {
   box-sizing: border-box;
 }
 *, *::before, *::after {
   box-sizing: inherit;
-}</pre>
+}
+```
+
+> **Примечание:** Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.
+
+## Играем с блочными моделями
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Интересный факт — Internet Explorer по умолчанию использовал альтернативную блочную модель без доступного механизма для переключения.</p>
-</div>
+В примере ниже, вы можете видеть 2 объекта. Оба имеют класс `.box`, который даёт им одинаковые параметры `width`, `height`, `margin`, `border`, и `padding`. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.
 
-<h2 id="Играем_с_блочными_моделями">Играем с блочными моделями</h2>
+**Можете ли вы изменить размер второго объекта (добавляя CSS в класс `.alternate)` чтобы ширина и высота совпали с первым блоком?**
 
-<p>В примере ниже, вы можете видеть 2 объекта. Оба имеют класс <code>.box</code>, который даёт им одинаковые параметры <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, и <code>padding</code>. Единственное различие в том, что второй объект объявлен по альтернативной блочной модели.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}
 
-<p><strong>Можете ли вы изменить размер второго объекта (добавляя CSS в класс <code>.alternate)</code> чтобы ширина и высота совпали с первым блоком?</strong></p>
+> **Примечание:** вы можете найти решение этой задачи [здесь](https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model).
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}} </p>
+### Использование инструментов разработчика в браузере для просмотра блочных моделей
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: вы можете найти решение этой задачи <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">здесь</a>.</p>
-</div>
+[Инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!
 
-<h3 id="Использование_инструментов_разработчика_в_браузере_для_просмотра_блочных_моделей">Использование инструментов разработчика в браузере для просмотра блочных моделей</h3>
+![Проверка блочной модели элемента с использованием инструментов разработчика Firefox](box-model-devtools.png)
 
-<p><a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Инструменты разработчика</a> вашего браузера могут значительно облегчить понимание блочной модели. Если вы проверите элемент в инструментах разработчика Firefox, вы можете увидеть его размер, а также внешний и внутренний отступы и рамку. Проверка элемента таким способом — отличный способ выяснить, действительно ли размер вашего блока такой, какой вы думаете!</p>
+## Внешние, внутренние отступы и рамки
 
-<p><img alt="Проверка блочной модели элемента с использованием инструментов разработчика Firefox" src="box-model-devtools.png"></p>
+Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере. Используемые в этом примере свойства — **сокращённые** и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.
 
-<h2 id="Внешние_внутренние_отступы_и_рамки">Внешние, внутренние отступы и рамки</h2>
+Давайте рассмотрим эти свойства более подробно.
 
-<p>Вы уже видели свойства {{cssxref ("margin")}}, {{cssxref ("padding")}} и {{cssxref ("border")}} в работе в приведённом выше примере. Используемые в этом примере свойства — <strong>сокращённые</strong> и позволяют нам устанавливать все четыре стороны блока одновременно. У них также есть эквивалентные полные свойства, которые позволяют индивидуально управлять разными сторонами блока.</p>
+### Внешний отступ (margin)
 
-<p>Давайте рассмотрим эти свойства более подробно.</p>
+Внешний отступ — это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.
 
-<h3 id="Внешний_отступ_margin">Внешний отступ (margin)</h3>
+Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:
 
-<p>Внешний отступ —  это невидимое пространство вокруг вашего элемента. Оно отталкивает другие элементы от него. Внешний отступ может быть как положительным, так и отрицательным. Негативное значение может привести к перекрытию некоторых элементов страницы. Независимо от того, используете ли вы стандартную или альтернативную блочную модель, внешний отступ всегда добавляется после расчёта размера видимого блока.</p>
+- {{cssxref("margin-top")}}
+- {{cssxref("margin-right")}}
+- {{cssxref("margin-bottom")}}
+- {{cssxref("margin-left")}}
 
-<p>Мы можем контролировать все поля элемента сразу, используя свойство {{cssxref ("margin")}}, или каждую сторону индивидуально, используя эквивалентные полные свойства:</p>
+**В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.**
 
-<ul>
- <li>{{cssxref("margin-top")}}</li>
- <li>{{cssxref("margin-right")}}</li>
- <li>{{cssxref("margin-bottom")}}</li>
- <li>{{cssxref("margin-left")}}</li>
-</ul>
+{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}
 
-<p><strong>В примере ниже, попробуйте изменить значение margin чтобы увидеть как блок смещается, создавая или удаляя пространство (если вводить отрицательные значения margin) между этим элементом и элементом его содержащим.</strong></p>
+#### Схлопывание внешних отступов
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}} </p>
+Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.
 
-<h4 id="Схлопывание_внешних_отступов">Схлопывание внешних отступов</h4>
+В примере ниже есть два абзаца. Первому абзацу задан `margin-bottom` 50 пикселей. У второго абзаца `margin-top` 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.
 
-<p>Ключевой момент, который нужно понимать в отношении внешних отступов (margin), это концепция схлопывания. Если у вас есть два элемента, внешние отступы которых соприкасаются, и оба значения margin положительные, то эти значения будут объединены в одно, равное большему из двух значений. А если одно или оба значения отрицательны, то сумма отрицательных значений будет вычтена из общей суммы.</p>
+**Вы можете проверить это, установив второму абзацу `margin-top` равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в `margin-bottom` первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.**
 
-<p>В примере ниже есть два абзаца. Первому абзацу задан <code>margin-bottom</code> 50 пикселей. У второго абзаца <code>margin-top</code> 30 пикселей. Отступы схлопываются так, что в результате margin между двумя блоками составляет 50 пикселей, а не сумму отдельных значений margin.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}
 
-<p><strong>Вы можете проверить это, установив второму абзацу <code>margin-top</code> равный 0. Видимое расстояние между двумя абзацами не изменится — отступ остаётся равен 50 пикселям, заданным в <code>margin-bottom</code> первого абзаца. Если вы установите значение -10px, то увидите, что margin становится 40px — происходит вычитание из положительного значения 50px у первого абзаца.</strong></p>
+Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. [margin collapsing](/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing). Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}} </p>
+### Рамка
 
-<p>Существует ряд правил, которые определяют, когда внешние отступы схлопываются, а когда нет. Для получения подробной информации см. <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">margin collapsing</a>. Главное, что нужно сейчас помнить, — это то, что схлопывание отступов существует. Если вы создаёте пространство с внешними отступами и не получаете ожидаемого результата, вероятно, именно это и происходит.</p>
+Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям `width` и `height` элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему `width` и `height`.
 
-<h3 id="Рамки">Рамка</h3>
+Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.
 
-<p>Рамка располагается между margin и padding блочного элемента. Если вы используете стандартную блочную модель, размер рамки прибавляется к значениям <code>width</code> и <code>height</code> элемента. Если вы используете альтернативную блочную модель, то размер рамки уменьшает поле контента своего блока, так как значения рамки входят в заданные ему <code>width</code> и <code>height</code>.</p>
+Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство {{cssxref("border")}}.
 
-<p>Для стилизации рамок существует большое количество различных свойств: четыре рамки, и каждая из них имеет свой стиль, ширину и цвет, которыми мы можем манипулировать.</p>
+Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:
 
-<p>Вы можете установить ширину, стиль или цвет всех четырёх рамок сразу, используя свойство {{cssxref("border")}}.</p>
+- {{cssxref("border-top")}}
+- {{cssxref("border-right")}}
+- {{cssxref("border-bottom")}}
+- {{cssxref("border-left")}}
 
-<p>Чтобы установить индивидуальные свойства для каждой из четырёх сторон, вы можете использовать:</p>
+Для установки ширины, стиля или цвета всех рамок используйте:
 
-<ul>
- <li>{{cssxref("border-top")}}</li>
- <li>{{cssxref("border-right")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("border-left")}}</li>
-</ul>
+- {{cssxref("border-width")}}
+- {{cssxref("border-style")}}
+- {{cssxref("border-color")}}
 
-<p>Для установки ширины, стиля или цвета всех рамок используйте:</p>
+Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:
 
-<ul>
- <li>{{cssxref("border-width")}}</li>
- <li>{{cssxref("border-style")}}</li>
- <li>{{cssxref("border-color")}}</li>
-</ul>
+- {{cssxref("border-top-width")}}
+- {{cssxref("border-top-style")}}
+- {{cssxref("border-top-color")}}
+- {{cssxref("border-right-width")}}
+- {{cssxref("border-right-style")}}
+- {{cssxref("border-right-color")}}
+- {{cssxref("border-bottom-width")}}
+- {{cssxref("border-bottom-style")}}
+- {{cssxref("border-bottom-color")}}
+- {{cssxref("border-left-width")}}
+- {{cssxref("border-left-style")}}
+- {{cssxref("border-left-color")}}
 
-<p>Чтобы установить ширину, стиль или цвет для каждой рамки индивидуально, вы можете использовать следующие свойства:</p>
+**В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.**
 
-<ul>
- <li>{{cssxref("border-top-width")}}</li>
- <li>{{cssxref("border-top-style")}}</li>
- <li>{{cssxref("border-top-color")}}</li>
- <li>{{cssxref("border-right-width")}}</li>
- <li>{{cssxref("border-right-style")}}</li>
- <li>{{cssxref("border-right-color")}}</li>
- <li>{{cssxref("border-bottom-width")}}</li>
- <li>{{cssxref("border-bottom-style")}}</li>
- <li>{{cssxref("border-bottom-color")}}</li>
- <li>{{cssxref("border-left-width")}}</li>
- <li>{{cssxref("border-left-style")}}</li>
- <li>{{cssxref("border-left-color")}}</li>
-</ul>
+{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}
 
-<p><strong>В примере ниже мы использовали различные сокращённые и полные способы создания рамок. Поиграйте с различными свойствами, чтобы проверить, как вы поняли принципы их работы. Информацию о различных стилях, которые вы можете использовать, можно найти на страницах MDN о свойствах рамок.</strong></p>
+### Внутренний отступ (padding)
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}} </p>
+Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.
 
-<h3 id="Внутренний_отступ_padding">Внутренний отступ (padding)</h3>
+Вы можете контролировать значение padding для всех сторон элемента, используя свойство {{cssxref("padding")}}, или для каждой стороны индивидуально, используя следующие полные свойства:
 
-<p>Внутренний отступ расположен между рамкой и областью контента блока. В отличии от внешних отступов (margin), вы не можете использовать отрицательные значения для padding: они должны быть положительными или равными 0. Любой применённый к вашим элементам фон будет отображаться под областью padding, поэтому внутренний отступ обычно используется, чтобы отодвинуть контент от рамок.</p>
+- {{cssxref("padding-top")}}
+- {{cssxref("padding-right")}}
+- {{cssxref("padding-bottom")}}
+- {{cssxref("padding-left")}}
 
-<p>Вы можете контролировать значение padding для всех сторон элемента, используя свойство {{cssxref("padding")}}, или для каждой стороны индивидуально, используя следующие полные свойства:</p>
+**Если вы измените значения padding для класса `.box` в примере ниже, то увидите, что это изменяет положение текста внутри элемента.**
 
-<ul>
- <li>{{cssxref("padding-top")}}</li>
- <li>{{cssxref("padding-right")}}</li>
- <li>{{cssxref("padding-bottom")}}</li>
- <li>{{cssxref("padding-left")}}</li>
-</ul>
+**Вы также можете изменить padding для класса `.container`, который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.**
 
-<p><strong>Если вы измените значения padding для класса <code>.box</code> в примере ниже, то увидите, что это изменяет положение текста внутри элемента.</strong></p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}
 
-<p><strong>Вы также можете изменить padding для класса <code>.container</code>, который задаёт отступ между контейнером и блоком. Внутренний отступ может быть изменён для любого элемента и создаст пространство между его рамкой и содержимым.</strong></p>
+## Блочная модель и строчные элементы
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}} </p>
+Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к `<span>`.
 
-<h2 id="Блочная_модель_и_строчные_элементы">Блочная модель и строчные элементы</h2>
+В приведённом ниже примере у нас есть `<span>` внутри абзаца, и мы применили к нему`width`, `height`, `margin`, `border` и `padding`. Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.
 
-<p>Всё, сказанное ранее, полностью применимо к блочным элементам. Некоторые из свойств могут быть также применены и к строчным (inline) элементам, например к <code>&lt;span&gt;</code>.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}
 
-<p>В приведённом ниже примере у нас есть <code>&lt;span&gt;</code> внутри абзаца, и мы применили к нему<code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code> и <code>padding</code>. Вы можете видеть, что ширина и высота игнорируются. Вертикальные внешние и внутренние отступы и рамки применены, но они не изменяют положение других элементов относительно нашего строчного элемента, и поэтому отступы и рамка перекрывают другие слова в абзаце. Горизонтальные внешние и внутренние отступы и рамки применены и заставляют другие элементы отодвинуться от нашего.</p>
+## Использование display: inline-block
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}} </p>
+Существует особое значение `display`, которое представляет собой золотую середину между `inline` и `block`. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял `width` и `height` и избегал перекрытия, показанного выше.
 
-<h2 id="Использование_display_inline-block">Использование display: inline-block</h2>
+Элемент с `display: inline-block` применяет ряд свойств блочного элемента, о которых мы уже знаем:
 
-<p>Существует особое значение <code>display</code>, которое представляет собой золотую середину между <code>inline</code> и <code>block</code>. Это полезно в ситуациях, когда вы не хотите, чтобы элемент переносился на новую строку, но нужно, чтобы он применял <code>width</code> и <code>height</code> и избегал перекрытия, показанного выше.</p>
+- Применяются свойства `width` и `height`.
+- Использование `padding`, `margin` и `border` приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.
 
-<p>Элемент с <code>display: inline-block</code> применяет ряд свойств блочного элемента, о которых мы уже знаем:</p>
+Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства `width` и `height`.
 
-<ul>
- <li>Применяются свойства <code>width</code> и <code>height</code>.</li>
- <li>Использование <code>padding</code>, <code>margin</code> и <code>border</code> приведёт к тому, что другие элементы будут отодвинуты от нашего элемента.</li>
-</ul>
+**В следующем примере мы добавили `display: inline-block` к нашему элементу `<span>`. Попробуйте изменить значение свойства на `display: block` или полностью удалить строку, чтобы увидеть разницу.**
 
-<p>Он не перенесётся на новую строку и станет больше, чем его содержимое, только если вы явно зададите свойства <code>width</code> и <code>height</code>.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}
 
-<p><strong>В следующем примере мы добавили <code>display: inline-block</code> к нашему элементу <code>&lt;span&gt;</code>. Попробуйте изменить значение свойства на <code>display: block</code> или полностью удалить строку, чтобы увидеть разницу.</strong></p>
+Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив `padding`. `<a>` — это строчный элемент, такой же как `<span>`; вы можете использовать `display: inline-block`, чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}} </p>
+Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу `<a>`, потому что хотим, чтобы `background-color` изменялся при наведении курсора на `<a>`. Отступы перекрывают рамку элемента `<ul>`. Это происходит потому, что `<a>` — строчный элемент.
 
-<p>Это может быть полезно, когда вы хотите создать ссылку с большой областью попадания, добавив <code>padding</code>. <code>&lt;a&gt;</code> — это строчный элемент, такой же как <code>&lt;span&gt;</code>; вы можете использовать <code>display: inline-block</code>, чтобы разрешить применение отступов, что упростит пользователю переход по ссылке.</p>
+**Добавьте в правило `display: inline-block` с помощью селектора `.links-list a`, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.**
 
-<p>Довольно часто это можно увидеть в панелях навигации. Приведённая ниже навигация отображается в виде строки с использованием flexbox, и мы добавили отступы к элементу <code>&lt;a&gt;</code>, потому что хотим, чтобы <code>background-color</code> изменялся при наведении курсора на <code>&lt;a&gt;</code>. Отступы перекрывают рамку элемента <code>&lt;ul&gt;</code>. Это происходит потому, что <code>&lt;a&gt;</code> — строчный элемент.</p>
+{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}
 
-<p><strong>Добавьте в правило <code>display: inline-block</code> с помощью селектора <code>.links-list a</code>, и вы увидите, как он решает эту проблему, заставляя другие элементы соблюдать отступы.</strong></p>
+## Проверьте свои навыки!
 
-<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}} </p>
+В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. [Проверка своих навыков: блочная модель](/ru/docs/Learn/CSS/Building_blocks/Box_Model_Tasks).
 
-<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2>
+## Заключение
 
-<p>В этой статье мы многое рассмотрели, но получится ли у вас вспомнить самую важную информацию? Вы можете пройти дополнительные тесты, чтобы убедиться, что вы всё усвоили, прежде чем двигаться дальше — см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Box_Model_Tasks">Проверка своих навыков: блочная модель</a>.</p>
+Это большая часть того, что вам нужно знать о блочной модели. Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько велики блоки в вашей раскладке на странице.
 
-<h2 id="Заключение">Заключение</h2>
+В следующем уроке мы рассмотрим, как можно использовать [фон и рамки](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders), чтобы сделать ваши простые блоки более интересными.
 
-<p>Это большая часть того, что вам нужно знать о блочной модели. Возможно, вы захотите вернуться к этому уроку в будущем, если когда-нибудь обнаружите, что не понимаете, насколько велики блоки в вашей раскладке на странице.</p>
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}
 
-<p>В следующем уроке мы рассмотрим, как можно использовать <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фон и рамки</a>, чтобы сделать ваши простые блоки более интересными.</p>
+## В этом модуле
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p>
+1.  [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [Селекторы CSS](/ru/docs/Learn/CSS/Building_blocks/Selectors)
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+    - [Селекторы типа, класса и ID](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Селекторы атрибута](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Псевдоклассы и псевдоэлементы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Комбинаторы](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a>
-  <ul>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li>
-   <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li>
-  </ul>
- </li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и рамки</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Изменение размеров в CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашего CSS</a><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing"> </a></li>
-</ol>
+3.  [Блочная модель](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Фон и рамки](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Обработка разных направлений текста](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Переполнение содержимого](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Значения и единицы измерения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Изменение размеров в CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Элементы изображений, форм и медиа-элементы](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Организация вашего CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)[](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/building_blocks/values_and_units/index.md b/files/ru/learn/css/building_blocks/values_and_units/index.md
index 3618f7643e575a..557ac2cbb5a82d 100644
--- a/files/ru/learn/css/building_blocks/values_and_units/index.md
+++ b/files/ru/learn/css/building_blocks/values_and_units/index.md
@@ -3,392 +3,267 @@ title: Значения свойств CSS
 slug: Learn/CSS/Building_blocks/Values_and_units
 translation_of: Learn/CSS/Building_blocks/Values_and_units
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
 
-<p>Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.</p>
+Каждое свойство используемое в CSS имеет значение или набор значений которые допустимы для этого свойства, и изучение страниц MDN со свойствами поможет вам понять какие значения валидны для того или иного свойства. В этом уроке мы рассмотрим некоторые наиболее общие значения и единицы в использовании.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Prerequisites:</th>
-   <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Objective:</th>
-   <td>To learn about the different types of values and units used in CSS properties.</td>
-  </tr>
- </tbody>
-</table>
+| Prerequisites: | Basic computer literacy, [basic software installed](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software), basic knowledge of [working with files](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), HTML basics (study [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), and an idea of how CSS works (study [CSS first steps](/ru/docs/Learn/CSS/First_steps).) |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Objective:     | To learn about the different types of values and units used in CSS properties.                                                                                                                                                                                                                                                                                                                                                                                           |
 
-<h2 id="Что_такое_значение_CSS">Что такое значение CSS?</h2>
+## Что такое значение CSS?
 
-<p>В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> или <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code><a href="/en-US/docs/Web/CSS/length">. </a>Если вы видите значение <code>&lt;color&gt;</code> как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code><a href="/en-US/docs/Web/CSS/color_value">.</a></p>
+В спецификациях CSS и на страницах свойств здесь в MDN вы сможете определять (узнавать) значения, потому как они будут заключены в угловые скобки, например [`<color>`](/en-US/docs/Web/CSS/color_value) или [`<length>`](/en-US/docs/Web/CSS/length)[. ](/ru/docs/Web/CSS/length)Если вы видите значение `<color>` как действительное для определённого свойства это значит что вы можете использовать любой валидный цвет в качестве значение для этого свойства, как перечислено на странице [`<color>`](/en-US/docs/Web/CSS/color_value)[.](/ru/docs/Web/CSS/color_value)
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You'll also see CSS values referred to as <em>data types</em>. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.</p>
-</div>
+> **Примечание:** You'll also see CSS values referred to as _data types_. The terms are basically interchangeable — when you see something in CSS referred to as a data type, it is really just a fancy way of saying value.
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the <a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a> data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.</p>
-</div>
+> **Примечание:** Yes, CSS values tend to be denoted using angle brackets, to differentiate them from CSS properties (e.g. the {{cssxref("color")}} property, versus the [\<color>](/ru/docs/Web/CSS/color_value) data type). You might get confused between CSS data types and HTML elements too, as they both use angle brackets, but this is unlikely — they are used in very different contexts.
 
-<p>В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию  <code>rgb()</code>:</p>
+В следующем примере мы установили цвет нашего заголовка используя ключевое слово и фон используя функцию `rgb()`:
 
-<pre class="brush: css"><code>h1 {
+```css
+h1 {
   color: black;
   background-color: rgb(197,93,161);
-} </code>
-</pre>
-
-<p>Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите <code>&lt;color&gt;</code> как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция <code>rgb()</code> и т.д. Вы можете воспользоваться <em>любым </em>доступным значением <code>&lt;color&gt;</code> при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.</p>
-
-<p>Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.</p>
-
-<h2 id="Числа_длины_и_проценты">Числа, длины и проценты</h2>
-
-<p>Существуют различные типы числовых данных, которые вы можете использовать в CSS. Следующие типы классифицируются как числовые:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Тип данных</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code><a href="/en-US/docs/Web/CSS/integer">&lt;integer&gt;</a></code></td>
-   <td><code>&lt;integer&gt;</code> (целое число) — целое число такое как <code>1024</code> или <code>-55</code>.</td>
-  </tr>
-  <tr>
-   <td><code><a href="/en-US/docs/Web/CSS/number">&lt;number&gt;</a></code></td>
-   <td>
-    <p><code>&lt;number&gt;</code> (число) представляет десятичное число — оно может иметь, а может и не иметь десятичную точку с факториальным компонентом, например <code>0.255</code>, <code>128</code>, или <code>-1.2</code>.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>&lt;dimension&gt;</code></td>
-   <td>
-    <p><code>&lt;dimension&gt;</code> (измерение) это — <code>&lt;number&gt;</code> (число) с единицей измерения, прикреплённой к нему, например <code>45deg</code>, <code>5s</code>, или <code>10px</code>. <code>&lt;dimension&gt;</code> — это зонт категорий, включающих в себя типы <code><a href="/en-US/docs/Web/CSS/length">&lt;length&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/angle">&lt;angle&gt;</a></code>, <code><a href="/en-US/docs/Web/CSS/time">&lt;time&gt;</a></code>, и <code><a href="/en-US/docs/Web/CSS/resolution">&lt;resolution&gt;</a></code><a href="/en-US/docs/Web/CSS/resolution"> </a>(длина, угол, время и разрешение)<a href="/en-US/docs/Web/CSS/resolution">. </a></p>
-   </td>
-  </tr>
-  <tr>
-   <td><code><a href="/en-US/docs/Web/CSS/percentage">&lt;percentage&gt;</a></code></td>
-   <td>
-    <p><code>&lt;percentage&gt;</code> (проценты) представляют собой долю некоторого другого значения, например <code>50%</code>. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<h3 id="Длины">Длины</h3>
-
-<p>Числовой тип, с которым вы будете сталкиваться чаще всего это <code>&lt;length&gt;</code> (длина), например <code>10px</code> (пиксели) или <code>30em</code>. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.</p>
-
-<h4 id="Абсолютные_единицы_длины">Абсолютные единицы длины</h4>
-
-<p>Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Единицы</th>
-   <th scope="col">Название</th>
-   <th scope="col">Эквивалент</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>cm</code></td>
-   <td>Centimeters/Сантиметры</td>
-   <td>1cm = 96px/2.54</td>
-  </tr>
-  <tr>
-   <td><code>mm</code></td>
-   <td>Millimeters/Миллиметры</td>
-   <td>1mm = 1/10th of 1cm</td>
-  </tr>
-  <tr>
-   <td><code>Q</code></td>
-   <td>Quarter-millimeters/Четверть-мм</td>
-   <td>1Q = 1/40th of 1cm</td>
-  </tr>
-  <tr>
-   <td><code>in</code></td>
-   <td>Inches/Дюймы</td>
-   <td>1in = 2.54cm = 96px</td>
-  </tr>
-  <tr>
-   <td><code>pc</code></td>
-   <td>Picas/Пики</td>
-   <td>1pc = 1/6th of 1in</td>
-  </tr>
-  <tr>
-   <td><code>pt</code></td>
-   <td>Points/Точки</td>
-   <td>1pt = 1/72th of 1in</td>
-  </tr>
-  <tr>
-   <td><code>px</code></td>
-   <td>Pixels/Пиксели</td>
-   <td>1px = 1/96th of 1in</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем <code>cm</code> (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это <code>px</code> (пиксели).</p>
-
-<h4 id="Единицы_относительной_длины">Единицы относительной длины</h4>
-
-<p>Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Единица</th>
-   <th scope="col">Относительна к</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>em</code></td>
-   <td>Размер шрифта родительского элемента.</td>
-  </tr>
-  <tr>
-   <td><code>ex</code></td>
-   <td>x-высота шрифта элемента.</td>
-  </tr>
-  <tr>
-   <td><code>ch</code></td>
-   <td>Предварительная мера (ширина) глифа "0" шрифта элемента.</td>
-  </tr>
-  <tr>
-   <td><code>rem</code></td>
-   <td>Размер шрифта корневого элемента.</td>
-  </tr>
-  <tr>
-   <td><code>lh</code></td>
-   <td>Высота строки элемента.</td>
-  </tr>
-  <tr>
-   <td><code>vw</code></td>
-   <td>1% от ширины окна просмотра.</td>
-  </tr>
-  <tr>
-   <td><code>vh</code></td>
-   <td>1% от высоты окна просмотра.</td>
-  </tr>
-  <tr>
-   <td><code>vmin</code></td>
-   <td>1% от меньшего измерения ширины окна просмотра.</td>
-  </tr>
-  <tr>
-   <td><code>vmax</code></td>
-   <td>1% от большего измерения ширины окна просмотра.</td>
-  </tr>
- </tbody>
-</table>
+}
+```
 
-<h4 id="Изучение_на_примере">Изучение на примере</h4>
+Значение в CSS это путь определения коллекции допустимых под-значений. То есть если вы видите `<color>` как применённый, то вам не надо озадачиваться какой из разных типов значения цвета может быть использован — ключевое слово, hex значение, функция `rgb()` и т.д. Вы можете воспользоваться _любым_ доступным значением `<color>` при условии, что они поддерживаются вашим браузером. Страницы для всех значений на MDN дадут вам информацию о поддержке браузеров. Например, если вы посмотрите на страницу [`<color>`](/en-US/docs/Web/CSS/color_value) то вы увидите раздел совместимости браузеров в котором перечислены различные типы значений цвета и их поддержка.
 
-<p>В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.</p>
+Давайте посмотрим на некоторые типы значений и единиц с примерами чтобы вы могли опробовать различные возможные значения, с которыми вы можете часто сталкиваться.
 
-<p>Второй блок имеет ширину, установленную в единицах <code>vw</code> (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием <code><a href="/en-US/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>, поэтому это не сработает. Для того чтобы увидеть это в действии вы должны <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">открыть этот пример в отдельной вкладке браузера</a>.</p>
+## Числа, длины и проценты
 
-<p>Третий блок использует единицы <code>em</code>. Они относительны к размеру шрифта. Я установил размер шрифта <code>1em</code> для содержимого {{htmlelement("div")}}, который имеет класс <code>.wrapper</code>. Измените это значение на <code>1.5em</code> и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.</p>
+Существуют различные типы числовых данных, которые вы можете использовать в CSS. Следующие типы классифицируются как числовые:
 
-<p>После выполнения инструкция выше, попробуйте поиграть со значениями и посмотрите, что у вас получится.</p>
+| Тип данных                                       | Описание                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [`<integer>`](/en-US/docs/Web/CSS/integer)       | `<integer>` (целое число) — целое число такое как `1024` или `-55`.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| [`<number>`](/en-US/docs/Web/CSS/number)         | `<number>` (число) представляет десятичное число — оно может иметь, а может и не иметь десятичную точку с факториальным компонентом, например `0.255`, `128`, или `-1.2`.                                                                                                                                                                                                                                                                                                 |
+| `<dimension>`                                    | `<dimension>` (измерение) это — `<number>` (число) с единицей измерения, прикреплённой к нему, например `45deg`, `5s`, или `10px`. `<dimension>` — это зонт категорий, включающих в себя типы [`<length>`](/en-US/docs/Web/CSS/length), [`<angle>`](/en-US/docs/Web/CSS/angle), [`<time>`](/en-US/docs/Web/CSS/time), и [`<resolution>`](/en-US/docs/Web/CSS/resolution)[ ](/ru/docs/Web/CSS/resolution)(длина, угол, время и разрешение)[.](/ru/docs/Web/CSS/resolution) |
+| [`<percentage>`](/en-US/docs/Web/CSS/percentage) | `<percentage>` (проценты) представляют собой долю некоторого другого значения, например `50%`. Процентные значения всегда относительны по отношению к другому количеству, например длина элемента относительна к длине её родительского элемента.                                                                                                                                                                                                                         |
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p>
+### Длины
 
-<h4 id="em_и_rem">em и rem</h4>
+Числовой тип, с которым вы будете сталкиваться чаще всего это `<length>` (длина), например `10px` (пиксели) или `30em`. Существует два типа длин используемых в CSS — относительные и абсолютные. Важно знать разницу для того, чтобы понимать, насколько большими станут вещи.
 
-<p><code>em</code> и <code>rem</code> — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как <a href="/en-US/docs/Learn/CSS/Styling_text">стилизация текста</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout">разметка CSS</a>. Приведённый ниже пример показывает это.</p>
+#### Абсолютные единицы длины
 
-<p>HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс <em>ems, </em>а второй класс <em>rems</em>.</p>
+Ниже приведены все единицы абсолютной длины — они не являются относительными к чему-либо и обычно считаются всегда одинакового размера.
 
-<p>Чтобы начать, мы установили 16px для размера шрифта элемента <code>&lt;html&gt;</code>.</p>
+| Единицы | Название                        | Эквивалент          |
+| ------- | ------------------------------- | ------------------- |
+| `cm`    | Centimeters/Сантиметры          | 1cm = 96px/2.54     |
+| `mm`    | Millimeters/Миллиметры          | 1mm = 1/10th of 1cm |
+| `Q`     | Quarter-millimeters/Четверть-мм | 1Q = 1/40th of 1cm  |
+| `in`    | Inches/Дюймы                    | 1in = 2.54cm = 96px |
+| `pc`    | Picas/Пики                      | 1pc = 1/6th of 1in  |
+| `pt`    | Points/Точки                    | 1pt = 1/72th of 1in |
+| `px`    | Pixels/Пиксели                  | 1px = 1/96th of 1in |
 
-<p><strong>Повторим, единица em означает "размер шрифта родительского элемента"</strong>. Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом <code>ems</code> получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на <code>1.3em</code> — 1.3 раза от размера шрифта родителя.</p>
+Большинство из этих значений больше полезны при использовании печати, чем для вывода на экран. Например, мы обычно не используем `cm` (сантиметры) на экране. Единственное значение которое вы в основном будете использовать это `px` (пиксели).
 
-<p><strong>Повторим, единица rem означает "размер шрифта корневого элемента"</strong> (rem значит "root em". (root - корень)). Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом <code>rems</code> получают свои размеры от корневого элемента (<code>&lt;html&gt;</code>). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.</p>
+#### Единицы относительной длины
 
-<p>Однако, если вы измените <code>font-size</code> (размер шрифта) <code>&lt;html&gt;</code> в CSS, вы увидите что все остальное изменится относительно ему — и <code>rem</code>- и <code>em</code>-размеры текста</p>
+Относительные единицы длин являются относительными к чему-то ещё, возможно к размеру родительского шрифта или к размеру окна просмотра. Преимущество использования относительных единиц состоит в том, что при тщательном планировании вы можете сделать так, чтобы размер текста или других элементов масштабировался относительно всего остального на странице. Некоторые наиболее используемые единицы веб-разработки перечислены в таблице ниже.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p>
+| Единица | Относительна к                                           |
+| ------- | -------------------------------------------------------- |
+| `em`    | Размер шрифта родительского элемента.                    |
+| `ex`    | x-высота шрифта элемента.                                |
+| `ch`    | Предварительная мера (ширина) глифа "0" шрифта элемента. |
+| `rem`   | Размер шрифта корневого элемента.                        |
+| `lh`    | Высота строки элемента.                                  |
+| `vw`    | 1% от ширины окна просмотра.                             |
+| `vh`    | 1% от высоты окна просмотра.                             |
+| `vmin`  | 1% от меньшего измерения ширины окна просмотра.          |
+| `vmax`  | 1% от большего измерения ширины окна просмотра.          |
 
-<h3 id="Проценты">Проценты</h3>
+#### Изучение на примере
 
-<p>Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите <code>font-size</code> элемента как проценты, то это будет процент от <code>font-size</code> родительского элемента. Если вы используете процент для значения <code>width </code>(ширина), то это будет процент от <code>width</code> родителя.</p>
+В примере ниже вы можете увидеть, как некоторые относительные и абсолютные единицы длин ведут себя. Первый блок имеет {{cssxref("width")}} (ширину) установленную в пикселях. Как абсолютная единица эта ширина будет оставаться такой же неважно что ещё измениться.
 
-<p>В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.</p>
+Второй блок имеет ширину, установленную в единицах `vw` (ширина окна просмотра). Это значение относительно к ширине окна просмотра и таким образом 10vw это 10 процентов от ширины окна просмотра. Если вы измените ширину окна вашего браузера, размер блока должен измениться, однако этот пример встроен в страницу с использованием [`<iframe>`](/en-US/docs/Web/HTML/Element/iframe), поэтому это не сработает. Для того чтобы увидеть это в действии вы должны [открыть этот пример в отдельной вкладке браузера](https://mdn.github.io/css-examples/learn/values-units/length.html).
 
-<p>Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.</p>
+Третий блок использует единицы `em`. Они относительны к размеру шрифта. Я установил размер шрифта `1em` для содержимого {{htmlelement("div")}}, который имеет класс `.wrapper`. Измените это значение на `1.5em` и вы увидите что, размер шрифта всех этих элементов увеличится, но только последний объект станет шире, поскольку его ширина относительна к тому размера шрифта.
 
-<p><strong>Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.</strong></p>
+После выполнения инструкция выше, попробуйте поиграть со значениями и посмотрите, что у вас получится.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}
 
-<p>В следующем примере размер шрифта установлен в процентах. Каждый <code>&lt;li&gt;</code> имеет <code>font-size</code> 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.</p>
+#### em и rem
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p>
+`em` и `rem` — две относительные длины, с которыми вы вероятное всего сталкиваетесь чаще при разметке чего-либо от блоков до текста. Стоит понимать как они работают, понимать различия между ними, особенно когда вы начинаете переходить к более сложным темам как [стилизация текста](/ru/docs/Learn/CSS/Styling_text) или [разметка CSS](/ru/docs/Learn/CSS/CSS_layout). Приведённый ниже пример показывает это.
 
-<p>Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают <code><a href="/en-US/docs/Web/CSS/length-percentage">&lt;length-percentage&gt;</a></code>, тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только <code>&lt;length&gt;</code>, то использование процентов невозможно.</p>
+HTML это набор вложенных списков — у нас имеется три списка в общей сложности и оба примера имеют одинаковый HTML. Единственное различие в том, что первый имеет класс _ems,_ а второй класс _rems_.
 
-<h3 id="Числа">Числа</h3>
+Чтобы начать, мы установили 16px для размера шрифта элемента `<html>`.
 
-<p>Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство <code>opacity</code>, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между <code>0</code> (полностью прозрачное) и <code>1</code> (полностью мутное).</p>
+**Повторим, единица em означает "размер шрифта родительского элемента"**. Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом `ems` получают свои размеры от своего родителя. Так, каждый последующий уровень вложения становится прогрессивно больше, так как каждый имеет свой размер шрифта установленный на `1.3em` — 1.3 раза от размера шрифта родителя.
 
-<p><strong>В примере ниже, попробуйте изменить значение </strong><code><strong>opacity</strong></code><strong> на различные десятичные значения между </strong><code><strong>0</strong></code><strong> и </strong><code><strong>1</strong></code><strong> и посмотрите, как блок и его содержимое становится более и/или менее мутными.</strong></p>
+**Повторим, единица rem означает "размер шрифта корневого элемента"** (rem значит "root em". (root - корень)). Элементы {{htmlelement("li")}} внутри {{htmlelement("ul")}} с классом `rems` получают свои размеры от корневого элемента (`<html>`). Это значит, что каждый последующий уровень вложения не продолжает увеличиваться.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p>
+Однако, если вы измените `font-size` (размер шрифта) `<html>` в CSS, вы увидите что все остальное изменится относительно ему — и `rem`- и `em`-размеры текста
 
-<div class="blockIndicator note">
-<p><strong>Внимание</strong>: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.</p>
-</div>
+{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}}
 
-<h2 id="Цвет">Цвет</h2>
+### Проценты
 
-<p>Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо ещё.</p>
+Во многих случаях проценты обрабатываются таким же образом, как и длина. С процентами фишка в том, что они всегда устанавливаются относительно некоторого другого значения. Например, если вы установите `font-size` элемента как проценты, то это будет процент от `font-size` родительского элемента. Если вы используете процент для значения `width `(ширина), то это будет процент от `width` родителя.
 
-<p>Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.</p>
+В примере ниже два блока с размерами в процентах и два с размерами в пикселях имеющих одинаковые имена классов. Оба набора имеют ширину 200px и 40% соответственно.
 
-<div class="blockIndicator note">
-<p><strong>Внимание</strong>: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.</p>
-</div>
+Различие в том, что второй набор блоков находится внутри обёртки которая имеет ширину 400 пикселей. Второй блок шириной в 200px имеет ту же ширину что и первый, но второй 40 процентный блок теперь имеет 40% от 400px — намного уже чем первый.
 
-<h3 id="Ключевые_слова_цвета">Ключевые слова цвета</h3>
+**Попробуйте изменить ширину обёртки (.wrapper) или процентное значение чтобы увидеть, как это работает.**
 
-<p>Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений <code><a href="/en-US/docs/Web/CSS/color_value">&lt;color&gt;</a></code> .</p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}}
 
-<p><strong>Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.</strong></p>
+В следующем примере размер шрифта установлен в процентах. Каждый `<li>` имеет `font-size` 80%, поэтому элементы вложенного списка становятся прогрессивно меньше так как они наследуют свои размеры от родителя.
 
-<h3 id="Шестнадцатеричные_RGB_значения">Шестнадцатеричные RGB значения</h3>
+{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}}
 
-<p>Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть <code>0123456789abcdef</code>. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).</p>
+Обратите внимание, в то время как многие значения принимают как длину, так и проценты, существуют те, которые принимают только длину. Вы можете посмотреть какие значения допустимы на справочной странице свойств MDN. Если допустимые значения включают [`<length-percentage>`](/en-US/docs/Web/CSS/length-percentage), тогда вы можете использовать и длину, и проценты. Если же допустимые значения включают только `<length>`, то использование процентов невозможно.
 
-<p>Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.</p>
+### Числа
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p>
+Некоторые значения принимают числа без каких-либо единиц измерения. Примером свойства принимающего числа без единиц измерения может служить свойство `opacity`, которое контролирует мутность элемента (настолько он прозрачен). Это свойство принимает числа между `0` (полностью прозрачное) и `1` (полностью мутное).
 
-<p><strong>И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.</strong></p>
+**В примере ниже, попробуйте изменить значение** **`opacity`** **на различные десятичные значения между** **`0`** **и** **`1`** **и посмотрите, как блок и его содержимое становится более и/или менее мутными.**
 
-<h3 id="RGB_и_RGBA_значения">RGB и RGBA значения</h3>
+{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}}
 
-<p>Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — <code>rgb()</code> — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.</p>
+> **Примечание:** **Внимание**: Когда вы используете числа в CSS в качестве значений, они не должны быть заключены в кавычки.
 
-<p>Давайте перепишем наш последний пример используя RGB цвета:</p>
+## Цвет
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p>
+Существует много способов определения цвета в CSS, некоторые из которых реализованы довольно-таки недавно по сравнению с другими. Одинаковые значения цвета могут использоваться везде в CSS, определяете ли вы при этом цвет текста, цвет фона или цвет чего-либо ещё.
 
-<p>А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на <code>0</code>, то это сделает цвет полностью прозрачным, тогда как <code>1</code> сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.</p>
+Стандартная система цветов доступная в современных компьютерах — это 24-битная система, которая позволяет отображать около 16.7 миллионов отдельных цветов через комбинацию различных красных, зелёных и синих каналов с 256 различными значениями каждого канала (256 x 256 x 256 = 16,777,216). Давайте взглянем на некоторые способы, с помощью которых мы можем определять цвет в CSS.
 
-<div class="blockIndicator note">
-<p><strong>Внимание</strong>: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.</p>
-</div>
+> **Примечание:** **Внимание**: В этом руководстве мы рассмотрим общие методы определения цвета, которые имеют хорошую поддержку браузерами; существуют и другие методы, но они не имеют столь же хорошей поддержки и являются менее общими.
 
-<p>In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.</p>
+### Ключевые слова цвета
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p>
+Довольно часто в примерах как здесь, так и на других страницах в MDN вы будете видеть использование ключевых слов цвета, поскольку это простой и понятный способ определения цвета. Существует определённое количество этих ключевых слов и некоторые их них имеют довольно занимательные имена! Полный список вы можете посмотреть на странице значений [`<color>`](/en-US/docs/Web/CSS/color_value) .
 
-<p><strong>In this example, try changing the alpha channel values to see how it affects the color output. </strong></p>
+**Попробуйте поиграть с разными значениями цвета на живом примере ниже, чтобы понять больше об идее как они работают.**
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: At some point modern browsers were updated so that <code>rgba()</code> and <code>rgb()</code>, and <code>hsl()</code> and <code>hsla()</code> (see below), became pure aliases of each other and started to behave exactly the same. So for example both <code>rgba()</code> and <code>rgb()</code> accept colors with and without alpha channel values. Try changing the above example's <code>rgba()</code> functions to <code>rgb()</code> and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.</p>
-</div>
+### Шестнадцатеричные RGB значения
 
-<h3 id="HSL_and_HSLA_values">HSL and HSLA values</h3>
+Следующий тип значения цвета, с которым вы сталкиваетесь вероятнее всего — это шестнадцатеричные коды. Каждое hex-значение состоит из символа решётки (#) за которым следуют 6 шестнадцатеричных чисел, каждое из которых может принимать одно из 16 значений от 0 до f (представляющая 15) — то есть `0123456789abcdef`. Каждая пара значений представляет один из каналов — красного, зелёного или синего цветов — и позволяет нам определять любой из 256 доступных значений для каждого (16 x 16 = 256).
 
-<p>Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the <code>hsl()</code> function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:</p>
+Эти значения являются немного более сложными и менее простыми для понимания, но они намного более универсальны чем ключевые слова — вы можете использовать hex-значения чтобы отобразить любой цвет, который вы хотите использовать в своей цветовой схеме.
 
-<ul>
- <li><strong>Hue</strong>: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.</li>
- <li><strong>Saturation</strong>: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation</li>
- <li><strong>Lightness</strong>: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)</li>
-</ul>
+{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}}
 
-<p>We can update the RGB example to use HSL colors like this:</p>
+**И снова, попробуйте изменить значения, чтобы посмотреть, как варьируют цвета.**
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p>
+### RGB и RGBA значения
 
-<p>Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.</p>
+Третья схема, о которой мы здесь поговорим это RGB. Значения RGB это функция — `rgb()` — которой даётся три параметра представляющих каналы красного, зелёного и синего значений цветов, во многом так же, как hex-значения. Отличие с RGB является то, что каждый канал представлен не двумя hex-цифрами, а десятичным числом между 0 и 255 — что отчасти проще в понимании.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p>
+Давайте перепишем наш последний пример используя RGB цвета:
 
-<p>You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!</p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}}
 
-<h2 id="Images">Images</h2>
+А также вы можете использовать цвета RGBA — что работает в точности, как и цвета RGB и то есть вы можете использовать любое значение RGB, однако существует четвёртое значение, которое представляет альфа канал цвета, которое контролирует мутность. Если вы установите это значение на `0`, то это сделает цвет полностью прозрачным, тогда как `1` сделает его полностью мутным. Значения между дают вам разные уровни прозрачности.
 
-<p>The <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type is used wherever an image is a valid value. This can be an actual image file pointed to via a <code>url()</code> function, or a gradient.</p>
+> **Примечание:** **Внимание**: Настройка альфа канала в цвете имеет одно ключевое различие в использовании свойства {{cssxref("opacity")}} которое мы рассматривали ранее. когда вы используете мутность вы делаете элемент и все внутри него мутным, тогда как при использовании цвета RGBA вы делаете мутным только тот цвет который вы специфицируете.
 
-<p>In the example below we have demonstrated an image and a gradient in use as a value for the CSS <code>background-image</code> property.</p>
+In the example below I have added a background image to the containing block of our colored boxes. I have then set the boxes to have different opacity values — notice how the background shows through more when the alpha channel value is smaller.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: there are some other possible values for <code>&lt;image&gt;</code>, however these are newer and currently have poor browser support. Check out the page on MDN for the <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> data type if you want to read about them.</p>
-</div>
+**In this example, try changing the alpha channel values to see how it affects the color output.**
 
-<h2 id="Position">Position</h2>
+> **Примечание:** At some point modern browsers were updated so that `rgba()` and `rgb()`, and `hsl()` and `hsla()` (see below), became pure aliases of each other and started to behave exactly the same. So for example both `rgba()` and `rgb()` accept colors with and without alpha channel values. Try changing the above example's `rgba()` functions to `rgb()` and see if the colors still work! Which style you use is up to you, but separating out non-transparent and transparent color definitions to use the different functions gives (very) slightly better browser support and can act as a visual indicator of where transparent colors are being defined in your code.
 
-<p>The <code><a href="/en-US/docs/Web/CSS/position_value">&lt;position&gt;</a></code> data type represents a set of 2D coordinates, used to position an item such as a background image (via <code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code>). It can take keywords such as <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code>, and <code>center</code> to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.</p>
+### HSL and HSLA values
 
-<p>A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to <code>center</code>.</p>
+Slightly less well-supported than RGB is the HSL color model (not supported on old versions of IE), which was implemented after much interest from designers. Instead of red, green, and blue values, the `hsl()` function accepts hue, saturation, and lightness values, which are used to distinguish between the 16.7 million colors, but in a different way:
 
-<p>In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.</p>
+- **Hue**: The base shade of the color. This takes a value between 0 and 360, representing the angles round a color wheel.
+- **Saturation**: How saturated is the color? This takes a value from 0–100%, where 0 is no color (it will appear as a shade of grey), and 100% is full color saturation
+- **Lightness**: How light or bright is the color? This takes a value from 0–100%, where 0 is no light (it will appear completely black) and 100% is full light (it will appear completely white)
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p>
+We can update the RGB example to use HSL colors like this:
 
-<p><strong>Play around with these values to see how you can push the image around.</strong></p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}}
 
-<h2 id="Strings_and_identifiers">Strings and identifiers</h2>
+Just as RGB has RGBA, HSL has an HSLA equivalent, which gives you the same ability to specify the alpha channel. I've demonstrated this below by changing my RGBA example to use HSLA colors.
 
-<p>Throughout the examples above, we've seen places where keywords are used as a value (for example <code>&lt;color&gt;</code> keywords like <code>red</code>, <code>black</code>, <code>rebeccapurple</code>, and <code>goldenrod</code>). These keywords are more accurately described as <em>identifiers</em>, a special value that CSS understands. As such they are not quoted — they are not treated as strings.</p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}}
 
-<p>There are places where you use strings in CSS, for example <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">when specifying generated content</a>. In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.</p>
+You can use any of these color values in your projects. It is likely that for most projects you will decide on a color palette and then use those colors — and your chosen method of specifying color — throughout the whole project. You can mix and match color models, however for consistency it is usually best if your entire project uses the same one!
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p>
+## Images
 
-<h2 id="Functions">Functions</h2>
+The [`<image>`](/en-US/docs/Web/CSS/image) data type is used wherever an image is a valid value. This can be an actual image file pointed to via a `url()` function, or a gradient.
 
-<p>The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — <code>rgb()</code>, <code>hsl()</code>, etc. The value used to return an image from a file — <code>url()</code> — is also a function.</p>
+In the example below we have demonstrated an image and a gradient in use as a value for the CSS `background-image` property.
 
-<p>A value that behaves more like something you might find in a traditional programming language is the <code>calc()</code> CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.</p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}}
 
-<p>For example, below we are using <code>calc()</code> to make the box <code>20% + 100px</code> wide. The 20% is calculated from the width of the parent container <code>.wrapper</code> and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use <code>calc()</code> to tell the browser to do it for us.</p>
+> **Примечание:** there are some other possible values for `<image>`, however these are newer and currently have poor browser support. Check out the page on MDN for the [`<image>`](/en-US/docs/Web/CSS/image) data type if you want to read about them.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p>
+## Position
 
-<h2 id="Summary">Summary</h2>
+The [`<position>`](/en-US/docs/Web/CSS/position_value) data type represents a set of 2D coordinates, used to position an item such as a background image (via [`background-position`](/en-US/docs/Web/CSS/background-position)). It can take keywords such as `top`, `left`, `bottom`, `right`, and `center` to align items with specific bounds of a 2D box, along with lengths, which represent offsets from the top and left-hand edges of the box.
 
-<p>This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS Values and units</a> reference page; you will encounter many of these in use as you work through these lessons.</p>
+A typical position value consists of two values — the first sets the position horizontally, the second vertically. If you only specify values for one axis the other will default to `center`.
 
-<p>The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.</p>
+In the following example we have positioned a background image 40px from the top and to the right of the container using a keyword.
 
-<p>For example, understanding that <code><a href="/en-US/docs/Web/CSS/image">&lt;image&gt;</a></code> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!</p>
+{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}}
 
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p>
+**Play around with these values to see how you can push the image around.**
 
-<h2 id="In_this_module">In this module</h2>
+## Strings and identifiers
 
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
-  <ul>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
-   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
-  </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
+Throughout the examples above, we've seen places where keywords are used as a value (for example `<color>` keywords like `red`, `black`, `rebeccapurple`, and `goldenrod`). These keywords are more accurately described as _identifiers_, a special value that CSS understands. As such they are not quoted — they are not treated as strings.
+
+There are places where you use strings in CSS, for example [when specifying generated content](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after). In this case the value is quoted to demonstrate that it is a string. In the below example we use unquoted color keywords along with a quoted generated content string.
+
+{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}}
+
+## Functions
+
+The final type of value we will take a look at is the group of values known as functions. In programming, a function is a reusable section of code that can be run multiple times to complete a repetitive task with minimum effort on the part of both the developer and the computer. Functions are usually associated with languages like JavaScript, Python, or C++, but they do exist in CSS too, as property values. We've already seen functions in action in the Colors section — `rgb()`, `hsl()`, etc. The value used to return an image from a file — `url()` — is also a function.
+
+A value that behaves more like something you might find in a traditional programming language is the `calc()` CSS function. This function gives you the ability to do simple calculations inside your CSS. It's particularly useful if you want to work out values that you can't define when writing the CSS for your project, and need the browser to work out for you at runtime.
+
+For example, below we are using `calc()` to make the box `20% + 100px` wide. The 20% is calculated from the width of the parent container `.wrapper` and so will change if that width changes. We can't do this calculation beforehand because we don't know what 20% of the parent will be, so we use `calc()` to tell the browser to do it for us.
+
+{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}
+
+## Summary
+
+This has been a quick run through of the most common types of values and units you might encounter. You can have a look at all of the different types on the [CSS Values and units](/ru/docs/Web/CSS/CSS_Values_and_Units) reference page; you will encounter many of these in use as you work through these lessons.
+
+The key thing to remember is that each property has a defined list of allowed values, and each value has a definition explaining what the sub-values are. You can then look up the specifics here on MDN.
+
+For example, understanding that [`<image>`](/en-US/docs/Web/CSS/image) also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have!
+
+{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}
+
+## In this module
+
+1.  [Cascade and inheritance](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance)
+2.  [CSS selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors)
+
+    - [Type, class, and ID selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors)
+    - [Attribute selectors](/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors)
+    - [Pseudo-classes and pseudo-elements](/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements)
+    - [Combinators](/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators)
+
+3.  [The box model](/ru/docs/Learn/CSS/Building_blocks/The_box_model)
+4.  [Backgrounds and borders](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders)
+5.  [Handling different text directions](/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions)
+6.  [Overflowing content](/ru/docs/Learn/CSS/Building_blocks/Overflowing_content)
+7.  [Values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units)
+8.  [Sizing items in CSS](/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS)
+9.  [Images, media, and form elements](/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements)
+10. [Styling tables](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)
+11. [Debugging CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS)
+12. [Organizing your CSS](/ru/docs/Learn/CSS/Building_blocks/Organizing)
diff --git a/files/ru/learn/css/css_layout/flexbox/index.md b/files/ru/learn/css/css_layout/flexbox/index.md
index b3ef1555373351..2404b2968574ad 100644
--- a/files/ru/learn/css/css_layout/flexbox/index.md
+++ b/files/ru/learn/css/css_layout/flexbox/index.md
@@ -7,267 +7,271 @@ tags:
   - Стилизация
 translation_of: Learn/CSS/CSS_layout/Flexbox
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.
 
-<p class="summary">Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. В этой статье объясняются все основы данной технологии.</p>
+| Необходимые навыки: | HTML основы (изучите [Введение в HTML](ru/docs/Learn/HTML/Введение_в_HTML)), знание того, как работает CSS (изучите [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)). |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.                                                                                           |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>HTML основы (изучите <a href="ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), знание того, как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов.</td>
-  </tr>
- </tbody>
-</table>
+## Почему Flexbox?
 
-<h2 id="Почему_Flexbox">Почему Flexbox?</h2>
+Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.
 
-<p>Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование.</p>
+С их помощью сложно или невозможно достичь следующих простых требований к макету:
 
-<p>С их помощью сложно или невозможно достичь следующих простых требований к макету:</p>
+- Вертикального выравнивания блока внутри родителя.
+- Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.
+- Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.
 
-<ul>
- <li>Вертикального выравнивания блока внутри родителя.</li>
- <li>Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно.</li>
- <li>Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно.</li>
-</ul>
+Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!
 
-<p>Как вы увидите в последующих разделах, flexbox значительно облегчает работу с макетами. Погружаемся!</p>
+## Разберём простой пример
 
-<h2 id="Разберём_простой_пример">Разберём простой пример</h2>
+В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html) с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете [посмотреть его вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html).
 
-<p>В этой статье вы проработаете серию упражнений, которые помогут понять, как работает flexbox. Чтобы начать, скачайте на компьютер стартовый файл — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a> с нашего Github репозитория — загрузите его в современном браузере (Firefox или Chrome), а также в любимом редакторе кода. Также вы можете <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">посмотреть его вживую</a>.</p>
+Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.
 
-<p>Вы увидите элемент {{htmlelement("header")}} с заголовком верхнего уровня внутри, и элемент {{htmlelement("section")}} содержащий три элемента {{htmlelement("article")}}. Мы будем использовать их для создания стандартного трёхколоночного макета.</p>
+![](flexbox-example1.png)
 
-<p><img alt="" src="flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+## Определяем, какие элементы разместить в виде flex блоков
 
-<h2 id="Определяем_какие_элементы_разместить_в_виде_flex_блоков">Определяем, какие элементы разместить в виде flex блоков</h2>
+Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):
 
-<p>Для начала нам нужно выбрать, какие элементы следует выкладывать в виде flex блоков. Для этого мы устанавливаем специальное значение {{cssxref ("display")}} в родительском элементе тех элементов, которые вы хотите оформить. В нашем случае мы хотим расположить элементы {{htmlelement ("article")}}, поэтому мы устанавливаем это значение на {{htmlelement ("section")}} (который становится flex контейнером):</p>
-
-<pre class="brush: css">section {
+```css
+section {
   display: flex;
-}</pre>
+}
+```
 
-<p>В результате у нас получится вот так:</p>
+В результате у нас получится вот так:
 
-<p><img alt="" src="flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p>
+![](flexbox-example2.png)
 
-<p>Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.</p>
+Так, всего одно объявление делает всё, что нам нужно — здорово, правда? Мы получили 3-х колоночный макет с колонками равных размеров по ширине и высоте. Это связано с тем, что значения по умолчанию, заданные для flex элементов (дочерние элементы flex контейнера), настроены для решения основных задач. Подробнее об этом позже.
 
-<p><strong>Примечание</strong>: вы также можете установить значение {{cssxref("display")}} <code>inline-flex, </code>если хотите расставить inline элементы как flex блоки.</p>
+**Примечание**: вы также можете установить значение {{cssxref("display")}} `inline-flex, `если хотите расставить inline элементы как flex блоки.
 
-<h2 id="Внутри_flex_модели">Внутри flex модели</h2>
+## Внутри flex модели
 
-<p>Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:</p>
+Когда элементы выложены как flex блоки, они располагаются вдоль двух осей:
 
-<p><img alt="flex_terms.png" class="default internal" src="flex_terms.png"></p>
+![flex_terms.png](flex_terms.png)
 
-<ul>
- <li><strong>Главная ось (main axis)</strong> проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются <strong>main start</strong> и <strong>main end</strong>.</li>
- <li><strong>Поперечная ось (cross axis)</strong>  проходит перпендикулярно Flex элементам. Начало и конец этой оси называются <strong>cross start</strong> and <strong>cross end</strong>.</li>
- <li>Родительский элемент, на который назначено свойство <code>display: flex ( </code>{{htmlelement("section")}} в нашем примере) называется <strong>flex container</strong>.</li>
- <li>Элементы, размещённые в нём как Flex блоки называются <strong>flex items</strong> (в нашем примере это {{htmlelement("article")}} ).</li>
-</ul>
+- **Главная ось (main axis)** проходит в том направлении, вдоль которого расположены Flex элементы (например, в строку слева направо или вдоль колонок вниз.) Начало и конец этой оси называются **main start** и **main end**.
+- **Поперечная ось (cross axis)** проходит перпендикулярно Flex элементам. Начало и конец этой оси называются **cross start** and **cross end**.
+- Родительский элемент, на который назначено свойство `display: flex ( `{{htmlelement("section")}} в нашем примере) называется **flex container**.
+- Элементы, размещённые в нём как Flex блоки называются **flex items** (в нашем примере это {{htmlelement("article")}} ).
 
-<p>Запомните эти термины, они пригодятся вам в последующих разделах.</p>
+Запомните эти термины, они пригодятся вам в последующих разделах.
 
-<h2 id="Столбцы_или_строки">Столбцы или строки?</h2>
+## Столбцы или строки?
 
-<p>В Flexbox есть свойство под названием {{cssxref("flex-direction")}}, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение <code>row</code>, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).</p>
+В Flexbox есть свойство под названием {{cssxref("flex-direction")}}, которое определяет направление главной оси (в каком направлении располагаются flexbox-дочерние элементы) — по умолчанию ему присваивается значение `row`, т.е. располагать дочерние элементы в ряд слева направо (для большинства языков) или справа налево (для арабских языков).
 
-<p>Попробуйте добавить следующую строчку в ваш файл:</p>
+Попробуйте добавить следующую строчку в ваш файл:
 
-<pre class="brush: css">flex-direction: column</pre>
+```css
+flex-direction: column
+```
 
-<p>Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.</p>
+Вы увидите, что элементы расположились в виде столбцов, также как было до того, как мы добавили CSS код. Прежде чем продолжать, удалите эту строчку из примера.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете также располагать flex элементы в обратном направлении, используя значения <code>row-reverse</code> и <code>column-reverse</code>. Попробуйте их тоже!</p>
-</div>
+> **Примечание:** вы можете также располагать flex элементы в обратном направлении, используя значения `row-reverse` и `column-reverse`. Попробуйте их тоже!
 
-<h2 id="Перенос_строк">Перенос строк</h2>
+## Перенос строк
 
-<p>Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> и <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">посмотрите его вживую</a> (сохраните его себе на компьютер, если хотите изучить этот пример):</p>
+Проблема может быть в том, что, если у вас фиксированная ширина или высота макета, ваши flexbox элементы переполнят контейнер и нарушат макет. Посмотрите на этот пример: [flexbox-wrap0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html) и [посмотрите его вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html) (сохраните его себе на компьютер, если хотите изучить этот пример):
 
-<p><img alt="" src="flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+![](flexbox-example3.png)
 
-<p>Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:</p>
+Мы видим, что дочерние элементы выбиваются из своего родителя-контейнера. Один из способов как это исправить - это добавить следующее свойство:
 
-<pre class="brush: css">flex-wrap: wrap</pre>
+```css
+flex-wrap: wrap
+```
 
-<p>Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:</p>
+Попробуйте, и вы увидите, что так макет стал выглядеть гораздо лучше:
 
-<p><img alt="" src="flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p>
+![](flexbox-example4.png)
 
-<p>Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство <code>flex: 200px</code>, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.</p>
+Теперь у нас в макете несколько рядов— все дети-блоки, которые не помещаются, переносятся на следующую строку, чтобы не было переполнения. Свойство `flex: 200px`, установленное на статьях, означает, что каждый блок должен быть минимум 200 пикселей в ширину. Мы обсудим это свойство более подробно позже. Вы также можете заметить, что несколько дочерних блоков в последней строке стали более широкими, так что вся строка стала заполнена.
 
-<p>Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства {{cssxref("flex-direction")}} на <code>row-reverse</code> — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.</p>
+Но мы можем пойти дальше. Прежде всего, попробуйте изменить значение свойства {{cssxref("flex-direction")}} на `row-reverse` — теперь у вас также макет в несколько строк, но он начинается из противоположного угла окна браузера и теперь выстраивается в обратном порядке.
 
-<h2 id="flex-flow_сокращение">flex-flow сокращение</h2>
+## flex-flow сокращение
 
-<p>На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить</p>
+На этом этапе нужно заметить, что существует сокращение для свойств {{cssxref("flex-direction")}} и {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}. Например, вы можете заменить
 
-<pre class="brush: css">flex-direction: row;
-flex-wrap: wrap;</pre>
+```css
+flex-direction: row;
+flex-wrap: wrap;
+```
 
-<p>на</p>
+на
 
-<pre class="brush: css">flex-flow: row wrap;</pre>
+```css
+flex-flow: row wrap;
+```
 
-<h2 id="Гибкое_изменение_размеров_flex_элементов">Гибкое изменение размеров flex элементов</h2>
+## Гибкое изменение размеров flex элементов
 
-<p>Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>, или скачайте <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">просмотр</a>).</p>
+Теперь давайте вернёмся к нашему первому примеру и посмотрим, как мы можем контролировать, в каких пропорциях flex элементы будут занимать место. Включите свою копию файла [flexbox0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html), или скачайте [flexbox1.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html) ([просмотр](http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html)).
 
-<p>Прежде всего, добавим следующее правило в конец вашего CSS кода:</p>
+Прежде всего, добавим следующее правило в конец вашего CSS кода:
 
-<pre class="brush: css">article {
+```css
+article {
   flex: 1;
-}</pre>
+}
+```
 
-<p>Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу {{htmlelement("article")}} значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.</p>
+Это безразмерное значение пропорции, которое указывает, сколько свободного пространства на главной оси (main axis) каждый flex элемент сможет занять. В этом случае, мы даём каждому элементу {{htmlelement("article")}} значение 1, а это значит, что они будут занимать равное количество свободного места в макете, которое осталось после установки свойств padding и margin.
 
-<p>Теперь добавьте следующее правило в строку после предыдущего:</p>
+Теперь добавьте следующее правило в строку после предыдущего:
 
-<pre class="brush: css">article:nth-of-type(3) {
+```css
+article:nth-of-type(3) {
   flex: 2;
-}</pre>
+}
+```
 
-<p>Обновив страницу, вы увидите, что третий элемент {{htmlelement("article")}} занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).</p>
+Обновив страницу, вы увидите, что третий элемент {{htmlelement("article")}} занимает в два раза больше доступной ширины, чем два других — итого теперь доступно 4 единицы пропорции. Первые два flex элемента имеют по одной единице, поэтому берут 1/4 пространства каждый. А у третьего 2 единицы, так что он берёт 2/4 свободного места (или 1/2).
 
-<p>Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:</p>
+Вы также можете указать минимальный размер внутри значения flex. Попробуйте изменить существующие правила, добавив размеры:
 
-<pre class="brush: css">article {
+```css
+article {
   flex: 1 200px;
 }
 
 article:nth-of-type(3) {
   flex: 2 200px;
-}</pre>
+}
+```
 
-<p>Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.</p>
+Это просто означает, что каждому flex элементу сначала будет дано 200px от свободного места. Потом оставшееся место будет поделено в соответствии с частями пропорций. Обновите страницу, и вы увидите разницу, как пространство поделено теперь.
 
-<p><img alt="" src="flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p>
+![](flexbox-example1.png)
 
-<p>Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.</p>
+Настоящая ценность flexbox можно увидеть в его гибкости/отзывчивости — если изменить размер окна или добавить ещё элемент {{htmlelement("article")}}, макет будет и дальше выглядеть также хорошо.
 
-<h2 id="flex_краткий_код_против_развёрнутого">flex: краткий код против развёрнутого</h2>
+## flex: краткий код против развёрнутого
 
-<p>{{cssxref("flex")}} это сокращённое свойство, в которым можно задать до трёх разных свойств:</p>
+{{cssxref("flex")}} это сокращённое свойство, в которым можно задать до трёх разных свойств:
 
-<ul>
- <li>Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-grow")}}.</li>
- <li>Следующее значение пропорции — {{cssxref("flex-shrink")}} — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.</li>
- <li>Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-basis")}}.</li>
-</ul>
+- Значение пропорции, которое мы обсуждали выше. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-grow")}}.
+- Следующее значение пропорции — {{cssxref("flex-shrink")}} — вступает в роль, когда flex элементы переполняют контейнер. Оно указывает, сколько забирается от размера каждого flex элемента, чтобы он перестал переполнять контейнер. Это продвинутая функция flexbox, и в этом параграфе мы не будем её разбирать.
+- Значение минимального размера, как мы обсуждали ранее. Оно может быть установлено отдельно с помощью свойства {{cssxref("flex-basis")}}.
 
-<p>Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.</p>
+Мы не советуем использовать развёрнутые свойства flex, если вам в действительности это не нужно (например, переопределить ранее установленное). Они приводят к написанию большого количества дополнительного кода и могут запутать кого угодно.
 
-<h2 id="Горизонтальное_и_вертикальное_выравнивание">Горизонтальное и вертикальное выравнивание</h2>
+## Горизонтальное и вертикальное выравнивание
 
-<p>Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">просмотр</a>) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.</p>
+Flexbox также имеет функции для выравнивания flex элементов вдоль основной (main) или поперечной (cross) осей. Рассмотрим их на новом примере — [flex-align0.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html) ([просмотр](http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html)) — который мы превратим в аккуратную, гибкую кнопочную панель инструментов. На данный момент вы видите горизонтальную панель меню, кнопки которой застряли в верхнем левом углу.
 
-<p><img alt="" src="flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p>
+![](flexbox-example5.png)
 
-<p>Сначала сделайте себе копию этого примера.</p>
+Сначала сделайте себе копию этого примера.
 
-<p>Теперь добавьте следующую строку в низ кода CSS:</p>
+Теперь добавьте следующую строку в низ кода CSS:
 
-<pre class="brush: css">div {
+```css
+div {
   display: flex;
   align-items: center;
   justify-content: space-around;
-}</pre>
+}
+```
 
-<p>Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.</p>
+Обновите страницу, и вы увидите, что кнопки теперь хорошо центрированы, горизонтально и вертикально. Мы сделали это с помощью двух новых свойств.
 
-<p>{{cssxref("align-items")}} контролирует, где на поперечной оси находятся flex элементы.</p>
+{{cssxref("align-items")}} контролирует, где на поперечной оси находятся flex элементы.
 
-<ul>
- <li>По умолчанию стоит значение <code>stretch</code>, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.</li>
- <li>Значение <code>center</code> , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.</li>
- <li>Также есть значения <code>flex-start</code> и <code>flex-end</code>, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее {{cssxref("align-items")}}.</li>
-</ul>
+- По умолчанию стоит значение `stretch`, которое растягивает все flex элементы, чтобы заполнить родителя вдоль поперечной (cross axis) оси. Если у родителя нет фиксированной ширины вдоль поперечной оси, все flex элементы примут длину самого длинного flex элемента. Вот почему наш первый пример по умолчанию получил столбцы с одинаковой высотой.
+- Значение `center` , которое мы использовали в коде вверху, заставляет элементы сохранять свои собственные размеры, но центрирует их вдоль поперечной оси. Вот почему кнопки текущего примера центрированы по вертикали.
+- Также есть значения `flex-start` и `flex-end`, которые выравнивают все элементы по началу и концу поперечной оси соответственно. См. подробнее {{cssxref("align-items")}}.
 
-<p>Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:</p>
+Вы можете переопределить {{cssxref("align-items")}} поведение для отдельных flex элементов, применив свойство {{cssxref("align-self")}} к ним. Например, попробуйте добавить эти строки в код:
 
-<pre class="brush: css">button:first-child {
+```css
+button:first-child {
   align-self: flex-end;
-}</pre>
+}
+```
 
-<p>Посмотрите, что произошло и удалите эти строки.</p>
+Посмотрите, что произошло и удалите эти строки.
 
-<p>{{cssxref("justify-content")}} контролирует, где flex элементы располагаются на главной оси.</p>
+{{cssxref("justify-content")}} контролирует, где flex элементы располагаются на главной оси.
 
-<ul>
- <li>По умолчанию стоит значение <code>flex-start</code>, которое располагает все элементы в начале главной оси. </li>
- <li>Также можно использовать <code>flex-end, </code>чтобы расположить их в конце.</li>
- <li><code>center</code> - также одно из значений <code>justify-content</code>, располагает все элементы по центру главной оси.</li>
- <li>Значение, которое мы использовали выше, <code>space-around</code>, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.</li>
- <li>И ещё одно значение, <code>space-between</code>, которое очень похоже на <code>space-around,</code> за исключением того, что оно не оставляет места на обоих концах.</li>
-</ul>
+- По умолчанию стоит значение `flex-start`, которое располагает все элементы в начале главной оси.
+- Также можно использовать `flex-end, `чтобы расположить их в конце.
+- `center` - также одно из значений `justify-content`, располагает все элементы по центру главной оси.
+- Значение, которое мы использовали выше, `space-around`, весьма полезно — оно распределяет все элементы равномерно по главной оси, с небольшим количеством свободного места на обоих концах.
+- И ещё одно значение, `space-between`, которое очень похоже на `space-around,` за исключением того, что оно не оставляет места на обоих концах.
 
-<p>Попробуйте немного поиграть с этими значениями прежде чем продолжить</p>
+Попробуйте немного поиграть с этими значениями прежде чем продолжить
 
-<h2 id="Порядок_элементов_flex">Порядок элементов flex</h2>
+## Порядок элементов flex
 
-<p>В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.</p>
+В Flexbox также есть возможность менять порядок расположения flex элементов, не влияя на исходный порядок. Это ещё одна вещь, которую невозможно сделать традиционными методами CSS.
 
-<p>Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:</p>
+Код здесь простой: попробуйте добавить следующий CSS вниз вашего кода примера:
 
-<pre class="brush: css">button:first-child {
+```css
+button:first-child {
   order: 1;
-}</pre>
+}
+```
 
-<p>и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:</p>
+и теперь вы увидите, что кнопка «Smile» переместилась в конец главной оси. Давайте теперь поговорим подробнее о том, как это работает:
 
-<ul>
- <li>По умолчанию все элементы flex имеют значение {{cssxref ("order")}} равное 0.</li>
- <li>Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.</li>
- <li>Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.</li>
- <li>Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.</li>
-</ul>
+- По умолчанию все элементы flex имеют значение {{cssxref ("order")}} равное 0.
+- Элементы Flex с установленными на них бОльшими значениями будут отображаться позже в порядке отображения, чем элементы с меньшими значениями порядка.
+- Элементы Flex с одинаковым значением порядка будут отображаться в исходном порядке. Так, если у вас есть четыре элемента с порядковыми значениями 2, 1, 1 и 0, установленными на них соответственно, их порядок отображения будет 4-й, 2-й, 3-й, затем 1-й.
+- Третий элемент появляется после второго, потому что он имеет то же значение порядка и находится после него в порядке написания.
 
-<p>Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:</p>
+Вы можете установить отрицательные значения , чтобы элементы отображались раньше, чем элементы с установленным 0. Например, вы можете сделать, чтобы кнопка «Blush» появлялась в начале основной оси, используя следующее правило:
 
-<pre class="brush: css">button:last-child {
+```css
+button:last-child {
   order: -1;
-}</pre>
+}
+```
 
-<h2 id="Вложенные_flex_блоки">Вложенные flex блоки</h2>
+## Вложенные flex блоки
 
-<p>Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a> (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">см. вживую</a>).</p>
+Можно создать несколько довольно сложных макетов с помощью flexbox. Совершенно нормально сделать flex элемент flex контейнером, чтобы его потомки также были flex блоками. Посмотрите на [complex-flexbox.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html) ([см. вживую](http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html)).
 
-<p><img alt="" src="flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![](flexbox-example7.png)
 
-<p>HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.</p>
+HTML для этого довольно простой. У нас есть элемент {{htmlelement ("section")}}, содержащий три {{htmlelement ("article")}}. Третий {{htmlelement ("article")}} содержит ещё три {{htmlelement ("div")}}.
 
-<pre>section - article
+```
+section - article
           article
           article - div - button
                     div   button
                     div   button
                           button
-                          button</pre>
+                          button
+```
 
-<p>Давайте посмотрим на код, который мы использовали для макета.</p>
+Давайте посмотрим на код, который мы использовали для макета.
 
-<p>Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.</p>
+Прежде всего, мы устанавливаем дочерние элементы {{htmlelement ("section")}} в виде flex блоков.
 
-<pre class="brush: css">section {
+```css
+section {
   display: flex;
-}</pre>
+}
+```
 
-<p>Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.</p>
+Затем мы устанавливаем несколько значений на самих {{htmlelement ("article")}}. Обратите внимание на второе правило: мы устанавливаем третий {{htmlelement ("article")}}, чтобы его дети были в макете в виде flex блоков, но на этот раз мы располагаем их как столбец.
 
-<pre class="brush: css">article {
+```css
+article {
   flex: 1 200px;
 }
 
@@ -276,39 +280,43 @@ article:nth-of-type(3) {
   display: flex;
   flex-flow: column;
 }
-</pre>
+```
 
-<p>Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.</p>
+Затем мы берём первый {{htmlelement ("div")}}. Сначала мы пишем flex: 1 100px; чтобы дать ему минимальную высоту 100px, потом мы устанавливаем его дочерние элементы (элементы {{htmlelement ("button")}}) также в виде flex блоков. Им мы назначаем перенос блоков и выравниваем их по центру доступного пространства, как это было в примере с кнопкой.
 
-<pre class="brush: css">article:nth-of-type(3) div:first-child {
+```css
+article:nth-of-type(3) div:first-child {
   flex: 1 100px;
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   justify-content: space-around;
-}</pre>
+}
+```
 
-<p>Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.</p>
+Наконец, мы устанавливаем размер кнопке, мы даём ему значение flex 1. Это даёт очень интересный эффект, который вы увидите, если попытаетесь изменить размер ширины окна браузера. Кнопки занимают столько места, сколько могут, и сидят на одной линии также, сколько могут. Если же они не могут комфортно расположиться на одной линии, они перепрыгнут на новые строки.
 
-<pre class="brush: css">button {
+```css
+button {
   flex: 1;
   margin: 5px;
   font-size: 18px;
   line-height: 1.5;
-}</pre>
+}
+```
 
-<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>
+## Совместимость с браузерами
 
-<p>Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)</p>
+Поддержка Flexbox доступна в большинстве новых браузеров: Firefox, Chrome, Opera, Microsoft Edge и IE 11, более поздних версиях Android / iOS и т. д.. Однако помните, что до сих пор используются более старые браузеры, которые не поддерживают Flexbox ( или поддерживают, но старую версию.)
 
-<p>Пока вы просто учитесь и экспериментируете, это не имеет большого значения. Однако, если вы рассматриваете возможность использования flexbox на реальном веб-сайте, вам необходимо провести тестирование и убедиться, что ваш пользовательский интерфейс по-прежнему приемлем в максимально возможном количестве браузеров.</p>
+Пока вы просто учитесь и экспериментируете, это не имеет большого значения. Однако, если вы рассматриваете возможность использования flexbox на реальном веб-сайте, вам необходимо провести тестирование и убедиться, что ваш пользовательский интерфейс по-прежнему приемлем в максимально возможном количестве браузеров.
 
-<p>Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.</p>
+Flexbox немного сложнее, чем некоторые функции CSS. Например, если в браузере отсутствует поддержка CSS тени, сайт по-прежнему будет можно использовать. А вот неподдерживаемые функции flexbox, возможно, полностью сломают макет, что сделает сайт непригодным.
 
-<p>Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.</p>
+Мы обсудим возможности преодоления проблем поддержки кросс-браузерности в следующем модуле.
 
-<h2 id="Подытожим">Подытожим</h2>
+## Подытожим
 
-<p>Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.</p>
+Мы завершаем нашу статью по основам flexbox. Надеемся, что вам понравилось, и вы хорошо развлечётесь, путешествуя дальше и изучая его. Далее мы рассмотрим ещё один важный аспект макетов CSS - grid-системы.
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Practical_positioning_examples", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}
diff --git a/files/ru/learn/css/css_layout/floats/index.md b/files/ru/learn/css/css_layout/floats/index.md
index 0d4dda3be7fc0e..cd088d7627f7fe 100644
--- a/files/ru/learn/css/css_layout/floats/index.md
+++ b/files/ru/learn/css/css_layout/floats/index.md
@@ -3,54 +3,46 @@ title: Float
 slug: Learn/CSS/CSS_layout/Floats
 translation_of: Learn/CSS/CSS_layout/Floats
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>
+Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.
 
-<p class="summary">Первоначально используемое для "обтекания" картинок текстом, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания макетов из нескольких столбцов на веб-страницах. С появлением flexbox и grid оно снова используется как задумывалось в начале, о чем подробнее в этой статье.</p>
+| Предварительные требования: | Базовое знакомство с HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), а также идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.                                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Базовое знакомство с HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), а также идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научиться как создавать обтекаемые свойства на веб-страницах и как использовать свойство clear и другие методы очистки обтекаемых элементов.</td>
-  </tr>
- </tbody>
-</table>
+## Общие сведения о float
 
-<h2 id="Общие_сведения_о_float">Общие сведения о float</h2>
+Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.
 
-<p>Свойство {{cssxref("float")}} вводилось для того, чтобы разработчики могли включать изображение, с обтеканием текста вокруг него слева или справа, как это часто используется в газетах.</p>
+Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как [drop-caps](https://css-tricks.com/snippets/css/drop-caps/) (буквица).
 
-<p>Но разработчики быстро осознали, что можно обтекать всё что угодно, не только изображения, поэтому использование float расширилось, например для вёрстки забавных эффектов таких как <a href="https://css-tricks.com/snippets/css/drop-caps/">drop-caps</a> (буквица).</p>
+Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как [устаревшей техникой](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
 
-<p>Floats очень часто использовались для создания макетов целых веб-страниц, отображающих несколько колонок информации, обтекаемых так, что колонки располагаются друг за другом (поведение по умолчанию предполагает, что колонки должны располагаются друг за другом, в том же порядке в котором они появляются в источнике). Доступны более новые, лучшие методы и поэтому использование floats для этих целей следует рассматривать как <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшей техникой</a>.</p>
+В этой статье мы сконцентрируемся только на надлежащем использовании floats.
 
-<p>В этой статье мы сконцентрируемся только на надлежащем использовании floats.</p>
+## Простой пример float
 
-<h2 id="Простой_пример_float">Простой пример float</h2>
+Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый `index.html` файл на вашем компьютере, заполнив его [простым шаблоном HTML](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html), и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.
 
-<p>Давайте выясним как использовать floats. Мы начнём с очень простого примера включающего обтекание элемента блоком текста. Вы можете следовать за нами создав новый <code>index.html</code> файл на вашем компьютере, заполнив его <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">простым шаблоном HTML</a>, и вставив код ниже в подходящее место. В конце раздела вы можете увидеть живой пример того, как должен выглядеть финальный код.</p>
+Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:
 
-<p>Во-первых, мы начнём с некоторого простого HTML — добавьте следующее в body вашего HTML, удалив всё что там было до этого:</p>
+```html
+<h1>Simple float example</h1>
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+<div class="box">Float</div>
 
-&lt;div class="box"&gt;Float&lt;/div&gt;
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
 
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. &lt;/p&gt;
+<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;</pre>
+А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл `.css` — на ваше усмотрение):
 
-<p>А теперь примените следующий CSS для вашего HTML (используя элемент {{htmlelement("style")}} или {{htmlelement("link")}} на отдельный файл <code>.css</code> — на ваше усмотрение):</p>
-
-<pre class="brush: css">body {
+```css
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -63,11 +55,13 @@ translation_of: Learn/CSS/CSS_layout/Floats
   border-radius: 5px;
   background-color: rgb(207,232,220);
   padding: 1em;
-}</pre>
+}
+```
 
-<p>Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу <code>.box</code>:</p>
+Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на то, чего ожидаете — блок располагается выше текста, при нормальном потоке. Для того чтобы текст обтекал его вокруг добавьте два свойства к правилу `.box`:
 
-<pre class="brush: css">.box {
+```css
+.box {
   float: left;
   margin-right: 15px;
   width: 150px;
@@ -75,26 +69,25 @@ translation_of: Learn/CSS/CSS_layout/Floats
   border-radius: 5px;
   background-color: rgb(207,232,220);
   padding: 1em;
-}</pre>
-
-<p>Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:</p>
+}
+```
 
-<div id="Float_1">
-<div class="hidden">
-<h6 id="Float_Example_1">Float Example 1</h6>
+Если вы сохраните и обновите сейчас, то вы увидите нечто похожее на следующее:
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+```html hidden
+<h1>Simple float example</h1>
 
-&lt;div class="box"&gt;Float&lt;/div&gt;
+<div class="box">Float</div>
 
-&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
 
-&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-</pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -110,44 +103,42 @@ translation_of: Learn/CSS/CSS_layout/Floats
   background-color: rgb(207,232,220);
   padding: 1em;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>
+{{ EmbedLiveSample('Float_1', '100%', 500) }}
 
-<p>Итак, давайте подумаем над тем, как работает float — элемент с установленным float (элемент {{htmlelement("div")}} в данном случае) изымается из нормального потока документа и крепится с левой стороны от родительского контейнера (элемент {{htmlelement("body")}} в данном случае). Любой контент, который следует ниже за обтекаемым элементом в макете при нормальном потоке теперь будет оборачивать его вокруг, заполняя пространство справа от него начиная на той же высоте что и вершина обтекаемого элемента. Там он остановится.</p>
+Итак, давайте подумаем над тем, как работает float — элемент с установленным float (элемент {{htmlelement("div")}} в данном случае) изымается из нормального потока документа и крепится с левой стороны от родительского контейнера (элемент {{htmlelement("body")}} в данном случае). Любой контент, который следует ниже за обтекаемым элементом в макете при нормальном потоке теперь будет оборачивать его вокруг, заполняя пространство справа от него начиная на той же высоте что и вершина обтекаемого элемента. Там он остановится.
 
-<p>Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на <code>right</code> и замените {{cssxref("margin-right")}} на {{cssxref("margin-left")}} в последнем наборе правил, чтобы увидеть каков результат.</p>
+Обтекание контента справа имеет точно такой же эффект, но наоборот — обтекаемый элемент будет прилипать справа, а контент будет оборачивать вокруг слева. Попробуйте изменить значение на `right` и замените {{cssxref("margin-right")}} на {{cssxref("margin-left")}} в последнем наборе правил, чтобы увидеть каков результат.
 
-<p>В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.</p>
+В то время как мы можем добавлять margin к обтекаемому элементу чтобы оттолкнуть текст от него, мы не можем добавлять margin к тексту чтобы отодвинуть его от обтекаемого элемента. так происходит потому, что обтекаемые элементы изъяты из нормального потока, а следующие за ним блоки фактически располагаются за обтекаемым элементом. Вы можете продемонстрировать это, внеся некоторые изменения в ваш пример.
 
-<p>Добавьте класс <code>special</code> к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.</p>
+Добавьте класс `special` к первому параграфу текста, тот который непосредственно следует за обтекаемым блоком, далее добавьте следующие правила в ваш CSS. Они дадут нашему параграфу цвет фона.
 
-<pre class="brush: css">.special {
+```css
+.special {
   background-color: rgb(79,185,227);
   padding: 10px;
   color: #fff;
 }
-</pre>
-
-<p>Чтобы эффект был лучше виден, измените <code>margin-right</code> обтекаемого объекта на <code>margin</code>, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.</p>
+```
 
-<div id="Float_2">
-<div class="hidden">
-<h6 id="Float_Example_2">Float Example 2</h6>
+Чтобы эффект был лучше виден, измените `margin-right` обтекаемого объекта на `margin`, так вы получите пространство вокруг него. Вы сможете увидеть фон параграфа располагающегося прям под обтекаемым блоком, как на примере ниже.
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+```html hidden
+<h1>Simple float example</h1>
 
-&lt;div class="box"&gt;Float&lt;/div&gt;
+<div class="box">Float</div>
 
-&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
 
-&lt;p&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -169,41 +160,39 @@ translation_of: Learn/CSS/CSS_layout/Floats
   padding: 10px;
   color: #fff;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>
+{{ EmbedLiveSample('Float_2', '100%', 500) }}
 
-<p><a href="/en-US/docs/Web/CSS/Visual_formatting_model#Line_boxes">Линейные блоки</a> нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.</p>
+[Линейные блоки](/ru/docs/Web/CSS/Visual_formatting_model#Line_boxes) нашего последующего элемента были сокращены так что текст располагается вокруг обтекаемого объекта, но из-за того, что обтекаемый объект удаляется из нормального потока блок вокруг параграфа все ещё остаётся в полную ширину.
 
-<h2 id="Очистка_обтекания">Очистка обтекания</h2>
+## Очистка обтекания
 
-<p>Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.</p>
+Мы увидели, что обтекаемый объект удалён из нормального потока и что другие элементы будут располагаться за ним, поэтому если мы хотим остановить перемещение следующего элемента нам необходимо очистить его; что достигается при помощи свойства {{cssxref("clear")}}.
 
-<p>Добавьте класс <code>cleared</code> ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:</p>
+Добавьте класс `cleared` ко второму параграфу после обтекаемого элемента в ваш HTML из предыдущего примера. Далее добавьте следующий CSS:
 
-<pre class="brush: css">.cleared {
+```css
+.cleared {
   clear: left;
 }
-</pre>
+```
 
-<div id="Float_3">
-<div class="hidden">
-<h6 id="Float_Example_3">Float Example 3</h6>
+```html hidden
+<h1>Simple float example</h1>
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+<div class="box">Float</div>
 
-&lt;div class="box"&gt;Float&lt;/div&gt;
+<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
 
-&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
+<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-    </pre>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -229,63 +218,63 @@ translation_of: Learn/CSS/CSS_layout/Floats
 .cleared {
   clear: left;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_3', '100%', 600) }}
 
-<p>Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство <code>clear</code> принимает следующие значения:</p>
+Вы должны увидеть, что следующий параграф очищает float элемента и больше не появляется рядом с ним. Свойство `clear` принимает следующие значения:
 
-<ul>
- <li><code>left</code>: очищает объекты, обтекаемые слева.</li>
- <li><code>right</code>: очищает объекты, обтекаемые справа.</li>
- <li><code>both</code>: очищает любые обтекаемые объекты, слева или справа.</li>
-</ul>
+- `left`: очищает объекты, обтекаемые слева.
+- `right`: очищает объекты, обтекаемые справа.
+- `both`: очищает любые обтекаемые объекты, слева или справа.
 
-<h2 id="Очистка_блоков_обёрнутых_вокруг_обтекаемых_элементов">Очистка блоков обёрнутых вокруг обтекаемых элементов</h2>
+## Очистка блоков обёрнутых вокруг обтекаемых элементов
 
-<p>Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом <code>wrapper</code>.</p>
+Вы теперь знаете, как очистить что-либо следующее за обтекаемым элементом, но давайте посмотрим, что происходит если у вас имеется высокий обтекаемый объект и короткий параграф с блоком, оборачивающим оба элемента. Измените ваш документ так чтоб первый параграф и наш обтекаемый блок были обёрнуты в {{htmlelement("div")}} с классом `wrapper`.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box"&gt;Float&lt;/div&gt;
+```html
+<div class="wrapper">
+  <div class="box">Float</div>
 
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
+</div>
+```
 
-<p>В вашем CSS добавьте следующее правило для класса <code>.wrapper</code> и обновите страницу:</p>
+В вашем CSS добавьте следующее правило для класса `.wrapper` и обновите страницу:
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   background-color: rgb(79,185,227);
   padding: 10px;
   color: #fff;
-}</pre>
+}
+```
 
-<p>В добавок удалите класс <code>.cleared</code>:</p>
+В добавок удалите класс `.cleared`:
 
-<pre class="brush: css" id="ct-0">.cleared {
+```css
+.cleared {
     clear: left;
-}</pre>
-
-<p>Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.</p>
+}
+```
 
-<div id="Float_4">
-<div class="hidden">
-<h6 id="Float_Example_4">Float Example 4</h6>
+Вы увидите, что, точно так же как и в примере где мы устанавливаем цвет фона для параграфа, цвет фона располагается за обтекаемым объектом.
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
-&lt;div class="wrapper"&gt;
-  &lt;div class="box"&gt;Float&lt;/div&gt;
+```html hidden
+<h1>Simple float example</h1>
+<div class="wrapper">
+  <div class="box">Float</div>
 
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
-&lt;/div&gt;
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+</div>
 
-&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -307,43 +296,42 @@ translation_of: Learn/CSS/CSS_layout/Floats
   background-color: rgb(207,232,220);
   padding: 1em;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_4', '100%', 600) }}
 
-<p>И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.</p>
+И ещё раз, так происходит потому, что обтекаемый объект изымается из нормального потока. Очистка следующего элемента не помогает с этой проблемой очистки блока, где вы хотите, чтобы нижняя часть блока обернула обтекаемый объект и оборачивающий контент даже если контент короче. Существует три потенциальных способа разобраться с этой проблемой, два из которых работают во всех браузерах, но при этом немного хитры и третий новый способ, который правильно справляется с этой ситуацией.
 
-<h3 id="Clearfix_hack">Clearfix hack</h3>
+### Clearfix hack
 
-<p>Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.</p>
+Традиционно эта ситуация решалась с помощью так называемого «clearfix hack». Это включает вставку некоторого сгенерированного контента после блока, содержащего обтекаемый объект и обёрточный контент, а также настройки для очистки обоих.
 
-<p>Добавьте следующий CSS в наш пример:</p>
+Добавьте следующий CSS в наш пример:
 
-<pre class="brush: css">.wrapper::after {
+```css
+.wrapper::after {
   content: "";
   clear: both;
   display: block;
-}</pre>
-
-<p>Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как <code>&lt;div&gt;</code> ниже объекта и установили <code>clear: both</code>.</p>
+}
+```
 
-<div id="Float_5">
-<div class="hidden">
-<h6 id="Float_Example_5">Float Example 5</h6>
+Теперь перезагрузите страницу и блок должен быть очищенным. По сути, это то же самое, как если бы вы добавили HTML-элемент такой как `<div>` ниже объекта и установили `clear: both`.
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
-&lt;div class="wrapper"&gt;
-  &lt;div class="box"&gt;Float&lt;/div&gt;
+```html hidden
+<h1>Simple float example</h1>
+<div class="wrapper">
+  <div class="box">Float</div>
 
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
-&lt;/div&gt;
-&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+</div>
+<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;      </pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -371,40 +359,39 @@ translation_of: Learn/CSS/CSS_layout/Floats
   clear: both;
   display: block;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_5', '100%', 600) }}
 
-<h3 id="Использование_overflow">Использование overflow</h3>
+### Использование overflow
 
-<p>Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от <code>visible</code>.</p>
+Альтернативный метод — это задать свойство {{cssxref("overflow")}} для обёртки (wrapper) на значение отличное от `visible`.
 
-<p>Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте <code>overflow: auto</code> к правилу для обёртки. Блок снова должен быть очищен.</p>
+Удалите clearfix CSS который вы добавляли в предыдущей секции и вместо него добавьте `overflow: auto` к правилу для обёртки. Блок снова должен быть очищен.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   background-color: rgb(79,185,227);
   padding: 10px;
   color: #fff;
   overflow: auto;
-}</pre>
-
-<div id="Float_6">
-<div class="hidden">
-<h6 id="Float_Example_6">Float Example 6</h6>
+}
+```
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
-&lt;div class="wrapper"&gt;
-  &lt;div class="box"&gt;Float&lt;/div&gt;
+```html hidden
+<h1>Simple float example</h1>
+<div class="wrapper">
+  <div class="box">Float</div>
 
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
-&lt;/div&gt;
-&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+</div>
+<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -427,40 +414,39 @@ translation_of: Learn/CSS/CSS_layout/Floats
   background-color: rgb(207,232,220);
   padding: 1em;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_6', '100%', 600) }}
 
-<p>Этот пример работает путём создания того, что известно как <strong>Блочный Контекст Форматирования (block formatting context </strong>(BFC)<strong>). </strong>Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.</p>
+Этот пример работает путём создания того, что известно как **Блочный Контекст Форматирования (block formatting context** (BFC)**).** Это как мини макет внутри вашей страницы, внутри которого содержится все, следовательно наш обтекаемый элемент находится внутри BFC и фон располагается за обоими элементами. Обычно это будет срабатывать, однако, в определённых случаях вы можете обнаружить нежелательную полосу прокрутки или обрезанные тени из-за непреднамеренный последствий использования overflow.
 
-<h3 id="display_flow-root">display: flow-root</h3>
+### display: flow-root
 
-<p>Современный способ решения этой проблемы — это использование значения <code>flow-root</code> свойства <code>display</code>. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите <code>overflow: auto</code> из вашего правила <code>.wrapper</code> и добавьте <code>display: flow-root</code>. Если предположить, что у вас <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">поддерживающий браузер</a>, блок будет очищаться.</p>
+Современный способ решения этой проблемы — это использование значения `flow-root` свойства `display`. Он существует только для создания BFC без использования хака — не будет возникать непреднамеренных последствий, когда вы используете его. Удалите `overflow: auto` из вашего правила `.wrapper` и добавьте `display: flow-root`. Если предположить, что у вас [поддерживающий браузер](/ru/docs/Web/CSS/display#Browser_compatibility), блок будет очищаться.
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   background-color: rgb(79,185,227);
   padding: 10px;
   color: #fff;
   display: flow-root;
-}</pre>
-
-<div id="Float_7">
-<div class="hidden">
-<h6 id="Float_Example_7">Float Example 7</h6>
+}
+```
 
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
-&lt;div class="wrapper"&gt;
-  &lt;div class="box"&gt;Float&lt;/div&gt;
+```html hidden
+<h1>Simple float example</h1>
+<div class="wrapper">
+  <div class="box">Float</div>
 
-  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
-&lt;/div&gt;
-&lt;p class="cleared"&gt;Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p>
+</div>
+<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;    </pre>
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
@@ -483,35 +469,31 @@ translation_of: Learn/CSS/CSS_layout/Floats
   background-color: rgb(207,232,220);
   padding: 1em;
 }
-</pre>
-</div>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_7', '100%', 600) }}
 
-<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2>
+## Проверьте свои навыки!
 
-<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию?  Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats_skills">Проверка ваших навыков: Floats</a>.</p>
+Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше — см. [Проверка ваших навыков: Floats](/ru/docs/Learn/CSS/CSS_layout/Floats_skills).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревших методах макета </a>устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.</p>
+Теперь вы знаете все, что нужно знать о float в современной веб-разработке. См. Статью об [устаревших методах макета ](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)устаревших методах макета для получения информации о том, как они использовались раньше, что может быть полезно, если вы работаете над старыми проектами.
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макета</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
-</ul>
+- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
+- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
+- [Устаревшие методы макета](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/floats_skills/index.md b/files/ru/learn/css/css_layout/floats_skills/index.md
index a919227163f155..331b6f8f5c6f33 100644
--- a/files/ru/learn/css/css_layout/floats_skills/index.md
+++ b/files/ru/learn/css/css_layout/floats_skills/index.md
@@ -3,74 +3,60 @@ title: 'Проверка ваших навыков: floats'
 slug: Learn/CSS/CSS_layout/Floats_skills
 translation_of: Learn/CSS/CSS_layout/Floats_skills
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
+Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats). Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
 
+> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания.
+>
+> Если вы застрянете, попросите нас о помощи — см. раздел [Оценка или дальнейшая помощь](#оценка_или_дальнейшая_помощь) в конце страницы
 
-<p>Цель этого задания - чтобы вы поработали со свойствами CSS {{CSSxRef("float")}} и {{CSSxRef("clear")}} которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a>. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.</p>
+## Floats Раз
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.
 
-<p>Если вы застрянете, попросите нас о помощи — см. раздел <a href="#оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> в конце страницы</p>
-</div>
+![Two blocks displaying left and right of some text.](https://mdn.mozillademos.org/files/17073/float-task1.png)
 
-<h2 id="Floats_Раз">Floats Раз</h2>
+Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
 
-<p>В этом задании вам необходимо чтобы два элемента с классами float1 и float2 обтекали слева и справа соответственно. Текст должен появляться между двумя блоками как на изображении ниже.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}}
 
-<p><img alt="Two blocks displaying left and right of some text." src="https://mdn.mozillademos.org/files/17073/float-task1.png" style="height: 425px; width: 1067px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+## Float Два
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float1.html", '100%', 700)}}</p>
+В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+![A box displayed to the left of a line of text, with some more text below.](https://mdn.mozillademos.org/files/17074/float-task2.png)
 
-<h2 id="Float_Два">Float Два</h2>
+Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
 
-<p>В этом примере элемент с классом float должен примыкать к левому краю и обтекаться справа. Далее мы хотим чтобы первая строка текста отображалась рядом с тем элементом, а следующая строка (с классом .below) отображалась под ним. Вы можете посмотреть желаемый результат на этом изображении.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}
 
-<p><img alt="A box displayed to the left of a line of text, with some more text below." src="https://mdn.mozillademos.org/files/17074/float-task2.png" style="height: 522px; width: 1373px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+## Float Три
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float2.html", '100%', 800)}}</p>
+И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+![A block displayed to the right of some text both wrapped by a box with a background color.](https://mdn.mozillademos.org/files/17075/float-task3.png)
 
-<h2 id="Float_Три">Float Три</h2>
+Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
 
-<p>И наконец у нас есть обтекаемый элемент в этом примере. Блок оборачивающий обтекаемый элемент и текст отображается за ними. Используйте самый последний доступный метод чтобы фон тянулся за обтеканием как показано на изображении.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}
 
-<p><img alt="A block displayed to the right of some text both wrapped by a box with a background color." src="https://mdn.mozillademos.org/files/17075/float-task3.png" style="height: 427px; width: 1024px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+## Оценка или дальнейшая помощь
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/float/float3.html", '100%', 800)}}</p>
+Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/float/float3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:
 
-<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+1.  Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/). Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
+2.  Напишите пост с просьбой оценки и/или помощи на [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
 
-<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
-
-<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
-
-<ol>
- <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a class="external external-icon" href="https://codepen.io/" rel="noopener">CodePen</a>, <a class="external external-icon" href="https://jsfiddle.net/" rel="noopener">jsFiddle</a>, или <a class="external external-icon" href="https://glitch.com/" rel="noopener">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
- <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок такой как "Требуется оценка теста по навыкам Float".</li>
-   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
-   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
-   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+    - Описательный заголовок такой как "Требуется оценка теста по навыкам Float".
+    - Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
+    - Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
+    - Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
diff --git a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md
index a4a878c77371b5..7d56d079e8cd89 100644
--- a/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md
+++ b/files/ru/learn/css/css_layout/fundamental_layout_comprehension/index.md
@@ -8,62 +8,49 @@ tags:
   - Раскладка
 translation_of: Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.</p>
+Если вы проработали этот модуль, то уже имеете базовое представление о том, что вам нужно знать, чтобы создавать современную CSS раскладку и работать с более старым CSS. Это задание проверит некоторые из ваших знаний путём разработки раскладки для простой веб-страницы, используя различные техники.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимое условие:</th>
-   <td>Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимое условие: | Прежде чем приступать к этой аттестации, вы должны были уже проработать все статьи в этом модуле. |
+| -------------------- | ------------------------------------------------------------------------------------------------- |
+| Цель:                | Проверить понимание фундаментальных навыков раскладки, освещаемых в этом модуле.                  |
 
-<h2 id="Резюме_проекта">Резюме проекта</h2>
+## Резюме проекта
 
-<p>Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.</p>
+Вам предоставили некоторый html, базовый css и изображения — ваша задача, создать раскладку для дизайна, который должен выглядеть как на изображении ниже.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16076/layout-task-complete.png" style="height: 706px; width: 1000px;"></p>
+![](https://mdn.mozillademos.org/files/16076/layout-task-complete.png)
 
-<h3 id="Базовые_настройки">Базовые настройки</h3>
+### Базовые настройки
 
-<p>Вы можете скачать HTML, CSS, и набор из шести изображений <a href="https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension">тут</a>.</p>
+Вы можете скачать HTML, CSS, и набор из шести изображений [тут](https://github.com/mdn/learning-area/tree/master/css/css-layout/fundamental-layout-comprehension).
 
-<p>Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем <code>images</code>. Открыв <code>index.html</code> файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.</p>
+Сохраните HTML документ и css стили внутри директории на вашем компьютере и добавьте изображения внутрь папки с именем `images`. Открыв `index.html` файл в браузере, вы должны получить страницу с базовой стилизацией, но без раскладки, что должно выглядеть как на изображении ниже.
 
-<p>Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.</p>
+Эта отправная точка и всё содержимое отображается браузером в нормальном потоке.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16075/layout-task-start.png" style="height: 675px; width: 1000px;"></p>
+![](https://mdn.mozillademos.org/files/16075/layout-task-start.png)
 
-<h3 id="Ваши_задачи">Ваши задачи</h3>
+### Ваши задачи
 
-<p>Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:</p>
+Теперь вам нужно реализовать раскладку. Задачи, которые вам необходимо выполнить:
 
-<ol>
- <li>Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.</li>
- <li>Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.</li>
- <li>Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.</li>
- <li>{{htmlelement("article")}} и {{htmlelement("aside")}} элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.</li>
- <li>Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.</li>
-</ol>
+1.  Отобразить пункты навигации в строку, с одинаковым количеством пространства между элементами.
+2.  Панель навигации должна прокручиваться вместе с содержимым страницы и закрепляться вверху видимой области документа в рамках экрана.
+3.  Изображение, которое находится внутри статьи, должно обтекаться текстом вокруг него.
+4.  {{htmlelement("article")}} и {{htmlelement("aside")}} элементы должны отображаться как двухколоночная раскладка. Колонки должны иметь гибкий размер, если окно браузера уменьшится, колонки должны стать более узкими.
+5.  Фотографии должны отображаться как двухколоночная сетка с отступом в 1px между изображениями.
 
-<p>Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:</p>
+Вам нет необходимости изменять HTML для создания этой раскладки и техник, которые вы должны использовать:
 
-<ul>
- <li>Позиционирование</li>
- <li>Раскладка на Float</li>
- <li>Раскладка на Flexbox</li>
- <li>Раскладка на CSS Grid</li>
-</ul>
+- Позиционирование
+- Раскладка на Float
+- Раскладка на Flexbox
+- Раскладка на CSS Grid
 
-<p>Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале.</p>
+Есть множество способов, как выполнить некоторые из этих задач и часто не существует одного правильного или неправильного способа это сделать. Попробуйте несколько разных способов и увидите, какой работает лучше. Делайте заметки о ваших экспериментах и вы всегда сможете обсудить ваш способ в отдельной дискуссии для этого задания или на [#mdn](irc://irc.mozilla.org/mdn) IRC канале.
 
-<h2 id="Оценка_работы">Оценка работы</h2>
+## Оценка работы
 
-<p>Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в <a href="https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982">отдельной дискуссии для этого задания</a> или на <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канале в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!</p>
+Если вы проходите эту аттестацию как часть организованного курса, вы должны быть в состоянии дать свою работу вашему учителю/наставнику для оценки. Если вы занимаетесь самообучением, тогда вы легко можете получить руководство по оценке работы, задавая вопросы в [отдельной дискуссии для этого задания](https://discourse.mozilla.org/t/fundamental-layout-comprehension-assessment/29982) или на [#mdn](irc://irc.mozilla.org/mdn) IRC канале в [Mozilla IRC](https://wiki.mozilla.org/IRC). Сначала попробуйте выполнить упражнение — нет никаких причин для жульничества!
diff --git a/files/ru/learn/css/css_layout/grids/index.md b/files/ru/learn/css/css_layout/grids/index.md
index 023990a28fec7a..58cb6981cec1f9 100644
--- a/files/ru/learn/css/css_layout/grids/index.md
+++ b/files/ru/learn/css/css_layout/grids/index.md
@@ -3,93 +3,81 @@ title: Grids
 slug: Learn/CSS/CSS_layout/Grids
 translation_of: Learn/CSS/CSS_layout/Grids
 ---
-<div>
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div>
-Сетки (grids) являются установленным инструментом проектирования и многие современные макеты веб-сайта основаны на регулярной сетке. В этой статье мы рассмотрим дизайн на основе сетки и увидим как CSS можно использовать для создания сеток — как с помощью современных инструментов, так и с помощью новых технологий, которые только начинают становиться доступными в браузерах.</div>
+| Необходимые навыки: | основы HTML(изучите [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), понимание как работает CSS (изучите [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes).) |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице.                                                                                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>основы HTML(изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), понимание как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a> и <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять основные концепции, лежащие в основе систем компоновки сетки и как реализовать сетку на веб-странице.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое макет сетки (grid layout)?
 
-<h2 id="Что_такое_макет_сетки_grid_layout">Что такое макет сетки (grid layout)?</h2>
+Сетка (grid) - это просто набор горизонтальных и вертикальных линий, создающих шаблон, по которому мы можем выстроить элементы дизайна. Они помогают нам создавать проекты, в которых элементы не прыгают или не меняют ширину при переходе от страницы к странице, обеспечивая большую согласованность на наших сайтах.
 
-<p>Сетка (grid) - это просто набор горизонтальных и вертикальных линий, создающих шаблон, по которому мы можем выстроить элементы дизайна. Они помогают нам создавать проекты, в которых элементы не прыгают или не меняют ширину при переходе от страницы к странице, обеспечивая большую согласованность на наших сайтах.</p>
+В сетке обычно будут **столбцы (columns)**, **строки (rows)**, а затем промежутки между каждой строкой и столбцом, обычно называемые **желобами (gutters)**.
 
-<p>В сетке обычно будут <strong>столбцы (columns)</strong>, <strong>строки (rows)</strong>, а затем промежутки между каждой строкой и столбцом, обычно называемые <strong>желобами (gutters)</strong>.</p>
+![](https://mdn.mozillademos.org/files/13899/grid.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p>
+\[Временная диаграмма; скоро будет заменена лучшей диаграммой.]
 
-<p>[Временная диаграмма; скоро будет заменена лучшей диаграммой.]</p>
+> **Примечание:** Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени.
 
-<div class="note">
-<p><strong>Примечание</strong>: Может показаться удивительным, если кто-нибудь из фона дизайна, что CSS не имеет встроенной сетки, и вместо этого мы, похоже, используем множество субоптимальных методов для создания сетчатых конструкций. Как вы узнаете в последней части этой статьи, это изменится, однако вам, вероятно, понадобятся существующие методы создания гридов в течение некоторого времени.</p>
-</div>
-
-<h2 id="Использование_“grid_system”_в_ваших_проектах">Использование “grid system” в ваших проектах</h2>
+## Использование “grid system” в ваших проектах
 
-<p>Чтобы обеспечить постоянный опыт на вашем сайте или в приложении, основываясь на системе сетки с самого начала, вам не нужно думать о том, насколько широкий элемент имеет отношение к другим элементам. Ваш выбор ограничен «количеством столбцов сетки, которые этот элемент будет охватывать».</p>
+Чтобы обеспечить постоянный опыт на вашем сайте или в приложении, основываясь на системе сетки с самого начала, вам не нужно думать о том, насколько широкий элемент имеет отношение к другим элементам. Ваш выбор ограничен «количеством столбцов сетки, которые этот элемент будет охватывать».
 
-<p>Ваша «сеточная система» может быть просто решением, принятым в процессе проектирования, для использования регулярной сетки. Если ваши проекты начнутся в приложении для редактирования графики, например Photoshop, вы можете создать сетку для ссылки во время этого процесса, как описано в  <a href="http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/">A better Photoshop grid for responsive web design</a> by Elliot Jay Stocks.</p>
+Ваша «сеточная система» может быть просто решением, принятым в процессе проектирования, для использования регулярной сетки. Если ваши проекты начнутся в приложении для редактирования графики, например Photoshop, вы можете создать сетку для ссылки во время этого процесса, как описано в [A better Photoshop grid for responsive web design](http://www.elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/) by Elliot Jay Stocks.
 
-<p>Ваша сетевая система также может быть структурой - либо третьей стороной, либо созданной вами только для вашего проекта, - которую вы используете для обеспечения сетки с помощью CSS.</p>
+Ваша сетевая система также может быть структурой - либо третьей стороной, либо созданной вами только для вашего проекта, - которую вы используете для обеспечения сетки с помощью CSS.
 
-<h2 id="Создание_простых_рамок_сетки">Создание простых рамок сетки</h2>
+## Создание простых рамок сетки
 
-<p>Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.</p>
+Мы начнём с рассмотрения того, как вы можете создать простую сетку для вашего проекта.
 
-<p>В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats"> нашу предыдущую статью о поплавках,</a> вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.</p>
+В настоящее время большинство макетов типа grid создаются с использованием поплавков (floats). Если вы прочитали[ нашу предыдущую статью о поплавках,](/ru/docs/Learn/CSS/CSS_layout/Floats) вы уже видели, как мы можем использовать эту технику для создания раскладки нескольких столбцов, что является сущностью любой сетки, использующей этот метод.
 
-<p>Самый простой тип структуры сетки для создания фиксированной ширины — нам просто нужно выяснить, сколько общей ширины мы хотим для нашего дизайна, сколько столбцов мы хотим и насколько широки должны быть желоба и столбцы. Если бы вместо этого мы решили выложить наш проект на сетке со столбцами, которые растут и сокращаются в соответствии с шириной браузера, нам нужно будет рассчитать процентную ширину для столбцов и желобов между ними.</p>
+Самый простой тип структуры сетки для создания фиксированной ширины — нам просто нужно выяснить, сколько общей ширины мы хотим для нашего дизайна, сколько столбцов мы хотим и насколько широки должны быть желоба и столбцы. Если бы вместо этого мы решили выложить наш проект на сетке со столбцами, которые растут и сокращаются в соответствии с шириной браузера, нам нужно будет рассчитать процентную ширину для столбцов и желобов между ними.
 
-<p>В следующих разделах мы рассмотрим, как создать оба. Мы создадим сетку с 12 столбцами - очень общий выбор, который, как видно, очень адаптируется к различным ситуациям, учитывая, что 12 прекрасно делится на 6, 4, 3 и 2.</p>
+В следующих разделах мы рассмотрим, как создать оба. Мы создадим сетку с 12 столбцами - очень общий выбор, который, как видно, очень адаптируется к различным ситуациям, учитывая, что 12 прекрасно делится на 6, 4, 3 и 2.
 
-<h3 id="Простая_сетка_с_фиксированной_шириной">Простая сетка с фиксированной шириной</h3>
+### Простая сетка с фиксированной шириной
 
-<p>Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.</p>
+Давайте сначала создадим сетку, использующую столбцы фиксированной ширины.
 
-<p>Начните с создания локальной копии нашего образца <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> файла, который содержит следующую разметку в своём теле.</p>
+Начните с создания локальной копии нашего образца [simple-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html) файла, который содержит следующую разметку в своём теле.
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="row"&gt;
-    &lt;div class="col"&gt;1&lt;/div&gt;
-    &lt;div class="col"&gt;2&lt;/div&gt;
-    &lt;div class="col"&gt;3&lt;/div&gt;
-    &lt;div class="col"&gt;4&lt;/div&gt;
-    &lt;div class="col"&gt;5&lt;/div&gt;
-    &lt;div class="col"&gt;6&lt;/div&gt;
-    &lt;div class="col"&gt;7&lt;/div&gt;
-    &lt;div class="col"&gt;8&lt;/div&gt;
-    &lt;div class="col"&gt;9&lt;/div&gt;
-    &lt;div class="col"&gt;10&lt;/div&gt;
-    &lt;div class="col"&gt;11&lt;/div&gt;
-    &lt;div class="col"&gt;12&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="row"&gt;
-    &lt;div class="col span1"&gt;13&lt;/div&gt;
-    &lt;div class="col span6"&gt;14&lt;/div&gt;
-    &lt;div class="col span3"&gt;15&lt;/div&gt;
-    &lt;div class="col span2"&gt;16&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col span1">13</div>
+    <div class="col span6">14</div>
+    <div class="col span3">15</div>
+    <div class="col span2">16</div>
+  </div>
+</div>
+```
 
-<p>Цель состоит в том, чтобы превратить это в демонстрационную сетку из двух рядов на двенадцать столбцов сетки (grid) - верхний ряд, демонстрирующий размер отдельных столбцов, второй ряд - некоторые области разного размера в сетке.</p>
+Цель состоит в том, чтобы превратить это в демонстрационную сетку из двух рядов на двенадцать столбцов сетки (grid) - верхний ряд, демонстрирующий размер отдельных столбцов, второй ряд - некоторые области разного размера в сетке.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p>
+![](https://mdn.mozillademos.org/files/13901/simple-grid-finished.png)
 
-<p>В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">Changing the box model completely</a> для большего объяснения).</p>
+В элементе {{htmlelement ("style")}} добавьте следующий код, который даёт контейнеру ширину 980 пикселей с отступом с правой стороны 20 пикселей. Это даёт нам 960 пикселей для нашей общей ширины столбца/желоба - в этом случае отступы вычитаются из общей ширины содержимого, потому что мы установили {{cssxref ("box-sizing")}} в рамку по всем элементам на сайте (см. [Changing the box model completely](/ru/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely) для большего объяснения).
 
-<pre class="brush: css">* {
+```css
+* {
   box-sizing: border-box;
 }
 
@@ -101,38 +89,42 @@ body {
 
 .wrapper {
   padding-right: 20px;
-}</pre>
+}
+```
 
-<p>Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:</p>
+Теперь используйте контейнер строк, который обёрнут вокруг каждой строки сетки, чтобы очистить одну строку от другой. Добавьте следующее правило ниже предыдущего:
 
-<pre class="brush: css">.row {
+```css
+.row {
   clear: both;
-}</pre>
+}
+```
 
-<p>Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.</p>
+Применение этого клиринга означает, что нам не нужно полностью заполнять каждую строку элементами, составляющими полные двенадцать столбцов. Строки будут разделены и не будут мешать друг другу.
 
-<p>Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.</p>
+Желоба между колоннами шириной 20 пикселей. Мы создаём эти желоба в качестве поля в левой части каждого столбца, включая первый столбец, чтобы сбалансировать 20 пикселей прокладки в правой части контейнера. Таким образом, у нас есть 12 водосточных желобов - 12 x 20 = 240.
 
-<p>Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса <code>.col</code>, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:</p>
+Нам нужно вычесть это из нашей общей ширины 960 пикселей, что даёт нам 720 пикселей для наших столбцов. Если мы разделим это на 12, мы знаем, что каждый столбец должен быть 60 пикселей в ширину. Наш следующий шаг - создать правило для класса `.col`, плавающее влево, предоставив ему {{cssxref ("margin-left")}} из 20 пикселей для формирования желоба и {{cssxref ("width" )}} из 60 пикселей. Добавьте нижеследующее правило в CSS:
 
-<pre class="brush: css">.col {
+```css
+.col {
   float: left;
   margin-left: 20px;
   width: 60px;
   background: rgb(255, 150, 150);
-}</pre>
+}
+```
 
-<p>Верхний ряд отдельных столбцов теперь будет аккуратно размещаться в виде сетки.</p>
+Верхний ряд отдельных столбцов теперь будет аккуратно размещаться в виде сетки.
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы также дали каждому столбцу светло-красный цвет, чтобы вы могли точно видеть, сколько места занимает каждый.</p>
-</div>
+> **Примечание:** Мы также дали каждому столбцу светло-красный цвет, чтобы вы могли точно видеть, сколько места занимает каждый.
 
-<p>В контейнерах макетов, которые мы хотим разместить более одного столбца, нужно предоставить специальные классы, чтобы скорректировать их значения {{cssxref ("width")}} до необходимого количества столбцов (плюс желоба между ними). Нам нужно создать дополнительный класс, чтобы контейнеры могли охватывать от 2 до 12 столбцов. Каждая ширина является результатом сложения ширины столбца этого количества столбцов плюс ширины желоба, который всегда будет набирать номер меньше, чем число столбцов.</p>
+В контейнерах макетов, которые мы хотим разместить более одного столбца, нужно предоставить специальные классы, чтобы скорректировать их значения {{cssxref ("width")}} до необходимого количества столбцов (плюс желоба между ними). Нам нужно создать дополнительный класс, чтобы контейнеры могли охватывать от 2 до 12 столбцов. Каждая ширина является результатом сложения ширины столбца этого количества столбцов плюс ширины желоба, который всегда будет набирать номер меньше, чем число столбцов.
 
-<p>Добавьте нижеследующую часть вашего CSS:</p>
+Добавьте нижеследующую часть вашего CSS:
 
-<pre class="brush: css">/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */
+```css
+/ * Ширина двух колонок (120 пикселей) плюс одна ширина желоба (20 пикселей) */
 .col.span2 { width: 140px; }
 / * Три ширины столбца (180 пикселей) плюс две ширины желоба (40 пикселей) * /
 .col.span3 { width: 220px; }
@@ -145,50 +137,58 @@ body {
 .col.span9 { width: 700px; }
 .col.span10 { width: 780px; }
 .col.span11 { width: 860px; }
-.col.span12 { width: 940px; }</pre>
+.col.span12 { width: 940px; }
+```
 
-<p>С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.</p>
+С помощью этих классов мы можем теперь выкладывать разные столбцы ширины в сетке. Попробуйте сохранить и загрузить страницу в своём браузере, чтобы увидеть эффекты.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">готовой версией</a> на GitHub (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">запуск в режиме реального времени</a>).</p>
-</div>
+> **Примечание:** Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html) на GitHub (см. также [запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html)).
 
-<p>Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:</p>
+Попробуйте изменить классы на своих элементах или даже добавить и удалить некоторые контейнеры, чтобы увидеть, как вы можете изменять макет. Например, вы можете сделать вторую строку следующим образом:
 
-<pre class="brush: css">&lt;div class="row"&gt;
-  &lt;div class="col span8"&gt;13&lt;/div&gt;
-  &lt;div class="col span4"&gt;14&lt;/div&gt;
-&lt;/div&gt;</pre>
+```css
+<div class="row">
+  <div class="col span8">13</div>
+  <div class="col span4">14</div>
+</div>
+```
 
-<p>Теперь у вас работает сетка, вы можете просто определить строки и количество столбцов в каждой строке, а затем заполнить каждый контейнер своим необходимым контентом. Отлично!</p>
+Теперь у вас работает сетка, вы можете просто определить строки и количество столбцов в каждой строке, а затем заполнить каждый контейнер своим необходимым контентом. Отлично!
 
-<h3 id="Создание_fluid_grid">Создание fluid grid</h3>
+### Создание fluid grid
 
-<p>Наша сетка работает красиво, но имеет фиксированную ширину. Нам очень нужна гибкая (жидкая) сетка, которая будет расти и сокращаться с доступным пространством в браузере {{Glossary ("viewport")}}. Для этого мы можем использовать опорные пиксельные ширины и превратить их в проценты</p>
+Наша сетка работает красиво, но имеет фиксированную ширину. Нам очень нужна гибкая (жидкая) сетка, которая будет расти и сокращаться с доступным пространством в браузере {{Glossary ("viewport")}}. Для этого мы можем использовать опорные пиксельные ширины и превратить их в проценты
 
-<p>Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.</p>
+Уравнение, которое превращает фиксированную ширину в гибкую, основанную на процентах, выглядит следующим образом.
 
-<pre>target / context = result</pre>
+```
+target / context = result
+```
 
-<p>Для нашей ширины столбца наша <strong>целевая ширина</strong> составляет 60 пикселей, а наш <strong>контекст</strong>  960 пикселей. Для расчёта процента мы можем использовать следующее.</p>
+Для нашей ширины столбца наша **целевая ширина** составляет 60 пикселей, а наш **контекст** 960 пикселей. Для расчёта процента мы можем использовать следующее.
 
-<pre>60 / 960 = 0.0625</pre>
+```
+60 / 960 = 0.0625
+```
 
-<p>Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.</p>
+Затем мы перемещаем десятичные точки на 2 места, давая нам процент от 6,25%. Таким образом, в нашем CSS мы можем заменить ширину столбца 60 пикселей на 6,25%.
 
-<p>Мы должны сделать то же самое с нашей шириной желоба:</p>
+Мы должны сделать то же самое с нашей шириной желоба:
 
-<pre>20 / 960 = 0.02083333333</pre>
+```
+20 / 960 = 0.02083333333
+```
 
-<p>Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило <code>.col</code>  20 пикселей {{cssxref ("padding-right")}} на <code>.wrapper </code>с 2.08333333%.</p>
+Поэтому нам нужно заменить 20 пикселей {{cssxref ("margin-left")}} на наше правило `.col` 20 пикселей {{cssxref ("padding-right")}} на `.wrapper `с 2.08333333%.
 
-<h4 id="Обновление_нашей_сетки">Обновление нашей сетки</h4>
+#### Обновление нашей сетки
 
-<p>Чтобы начать работу в этом разделе, создайте новую копию предыдущей страницы примера или создайте локальную копию нашего кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>, который будет использоваться в качестве отправной точки.</p>
+Чтобы начать работу в этом разделе, создайте новую копию предыдущей страницы примера или создайте локальную копию нашего кода [simple-grid-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html), который будет использоваться в качестве отправной точки.
 
-<p>Обновите второе правило CSS (с помощью селектора <code>.wrapper</code>) следующим образом:</p>
+Обновите второе правило CSS (с помощью селектора `.wrapper`) следующим образом:
 
-<pre class="brush: css">body {
+```css
+body {
   width: 90%;
   max-width: 980px;
   margin: 0 auto;
@@ -196,24 +196,28 @@ body {
 
 .wrapper {
   padding-right: 2.08333333%;
-}</pre>
+}
+```
 
-<p>Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.</p>
+Мы не только дали нам процент {{cssxref ("width")}}, мы также добавили свойство {{cssxref ("max-width")}}, чтобы остановить распространение макета.
 
-<p>Затем обновите четвёртое правило CSS (с селектором <code>.col</code>) следующим образом:</p>
+Затем обновите четвёртое правило CSS (с селектором `.col`) следующим образом:
 
-<pre class="brush: css">.col {
+```css
+.col {
   float: left;
   margin-left: 2.08333333%;
   width: 6.25%;
   background: rgb(255, 150, 150);
-}</pre>
+}
+```
 
-<p>Теперь идёт немного более трудоёмкая часть - нам нужно обновить все наши правила <code>.col.span</code>, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.</p>
+Теперь идёт немного более трудоёмкая часть - нам нужно обновить все наши правила `.col.span`, чтобы использовать проценты, а не ширину пикселей. Это занимает немного времени с калькулятором; чтобы сэкономить вам немного усилий, мы сделали это для вас ниже.
 
-<p>Обновите нижний блок правил CSS следующим образом:</p>
+Обновите нижний блок правил CSS следующим образом:
 
-<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
+```css
+/* Two column widths (12.5%) plus one gutter width (2.08333333%) */
 .col.span2 { width: 14.58333333%; }
 /* Three column widths (18.75%) plus two gutter widths (4.1666666) */
 .col.span3 { width: 22.91666666%; }
@@ -226,27 +230,29 @@ body {
 .col.span9 { width: 72.91666664%; }
 .col.span10 { width: 81.24999997%; }
 .col.span11 { width: 89.5833333%; }
-.col.span12 { width: 97.91666663%; }</pre>
+.col.span12 { width: 97.91666663%; }
+```
 
-<p>Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!</p>
+Теперь сохраните свой код, загрузите его в браузере и попробуйте изменить ширину видового экрана - вы должны увидеть, что ширины столбцов хорошо меняются. Отлично!
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">готовой версией на GitHub</a> (см. также<a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html"> запуск в режиме реального времени</a>).</p>
-</div>
+> **Примечание:** Если вам не удаётся заставить приведённый выше пример работать, попробуйте сравнить его с нашей [готовой версией на GitHub](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) (см. также[ запуск в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html)).
 
-<h3 id="Более_простые_вычисления_с_использованием_функции_calc">Более простые вычисления с использованием функции calc()</h3>
+### Более простые вычисления с использованием функции calc()
 
-<p>Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">этот пример из учебника API MediaRecorder</a>.</p>
+Вы можете использовать функцию {{cssxref ("calc ()")}} для выполнения математики прямо внутри вашего CSS - это позволяет вставлять простые математические уравнения в ваши значения CSS, чтобы рассчитать, какое значение должно быть. Это особенно полезно, когда необходимо выполнить сложную математику и вы даже можете сделать расчёт, который использует разные единицы, например «Я хочу, чтобы высота этого элемента всегда была на 100% от высоты родителя, минус 50 пикселей». См. [этот пример из учебника API MediaRecorder](</ru/docs/Web/API/MediaStream_Recording_API/Using_the_MediaStream_Recording_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()>).
 
-<p>В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция <code>calc () </code>позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:</p>
+В любом случае, вернёмся к нашим сетям! Любой столбец, который охватывает более одного столбца нашей сетки, имеет общую ширину 6,25%, умноженную на количество столбцов, спаренных плюс 2.08333333%, умноженное на количество желобов (которые всегда будут числом столбцов минус 1). Функция `calc () `позволяет нам делать это вычисление прямо внутри значения ширины, поэтому для любого элемента, охватывающего 4 столбца, мы можем это сделать, например:
 
-<pre class="brush: css">.col.span4 {
+```css
+.col.span4 {
   width: calc((6.25%*4) + (2.08333333%*3));
-}</pre>
+}
+```
 
-<p>Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:</p>
+Попробуйте заменить нижний блок правил следующим, а затем перезагрузите его в браузере, чтобы узнать, получаете ли вы тот же результат:
 
-<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
+```css
+.col.span2 { width: calc((6.25%*2) + 2.08333333%); }
 .col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); }
 .col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); }
 .col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); }
@@ -256,85 +262,87 @@ body {
 .col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); }
 .col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); }
 .col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); }
-.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre>
+.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете увидеть нашу законченную версию в файле <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">liquid-grid-calc.html</a> (также см. её <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">в режиме реального времени</a>).</p>
-</div>
+> **Примечание:** вы можете увидеть нашу законченную версию в файле [liquid-grid-calc.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html) (также см. её [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию <code>calc ()</code>, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9.</p>
-</div>
+> **Примечание:** Если вы не можете заставить это работать, возможно, это связано с тем, что ваш браузер не поддерживает функцию `calc ()`, хотя он довольно хорошо поддерживается в браузерах - ещё в IE9.
 
-<h3 id="Семантические_и_несемантические_сетчатые_системы">Семантические и "несемантические" сетчатые системы</h3>
+### Семантические и "несемантические" сетчатые системы
 
-<p>Добавление классов в вашу разметку для определения макета означает, что ваш контент и разметка привязаны к его визуальному представлению. Иногда вы слышите это использование классов CSS, описанных как «несемантические», - описывая, как выглядит контент, а не семантическое использование классов, описывающих контент. Это относится к классам <code>span2</code>, <code>span3</code> и т. Д.</p>
+Добавление классов в вашу разметку для определения макета означает, что ваш контент и разметка привязаны к его визуальному представлению. Иногда вы слышите это использование классов CSS, описанных как «несемантические», - описывая, как выглядит контент, а не семантическое использование классов, описывающих контент. Это относится к классам `span2`, `span3` и т. Д.
 
-<p>Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом <code>content</code> в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса <code>span8</code>, предоставив вам следующее правило:</p>
+Это не единственный подход. Вместо этого вы можете выбрать свою сетку, а затем добавить информацию о размерах в правила для существующих семантических классов. Например, если у вас есть {{htmlelement ("div")}} с классом `content` в нем, который вы хотите разбить на 8 столбцов, вы можете скопировать по ширине из класса `span8`, предоставив вам следующее правило:
 
-<pre class="brush: css">.content {
+```css
+.content {
   width: calc((6.25%*8) + (2.08333333%*7));
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы использовали препроцессор, такой как <a href="http://sass-lang.com/">Sass</a>, вы могли бы создать простой mixin, чтобы вставить это значение для вас.</p>
-</div>
+> **Примечание:** Если вы использовали препроцессор, такой как [Sass](http://sass-lang.com/), вы могли бы создать простой mixin, чтобы вставить это значение для вас.
 
-<h3 id="Включение_офсетных_контейнеров_в_нашей_сетке">Включение офсетных контейнеров в нашей сетке</h3>
+### Включение офсетных контейнеров в нашей сетке
 
-<p>Сетка, которую мы создали, работает хорошо, пока мы хотим запустить все контейнеры заподлицо с левой стороны сетки. Если бы мы хотели оставить пустое пространство столбца перед первым контейнером - или между контейнерами - нам нужно было бы создать класс смещения, чтобы добавить левое поле на наш сайт, чтобы визуально визуализировать его по сетке. Больше математики!</p>
+Сетка, которую мы создали, работает хорошо, пока мы хотим запустить все контейнеры заподлицо с левой стороны сетки. Если бы мы хотели оставить пустое пространство столбца перед первым контейнером - или между контейнерами - нам нужно было бы создать класс смещения, чтобы добавить левое поле на наш сайт, чтобы визуально визуализировать его по сетке. Больше математики!
 
-<p>Давайте попробуем это.</p>
+Давайте попробуем это.
 
-<p>Начните с предыдущего кода или используйте наш файл <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a> в качестве отправной точки.</p>
+Начните с предыдущего кода или используйте наш файл [fluid-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html) в качестве отправной точки.
 
-<p>Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:</p>
+Давайте создадим класс в нашем CSS, который будет смещать элемент контейнера на одну ширину столбца. Добавьте нижеследующую часть вашего CSS:
 
-<pre class="brush: css">.offset-by-one {
+```css
+.offset-by-one {
   margin-left: calc(6.25% + (2.08333333%*2));
-}</pre>
+}
+```
 
-<p>Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:</p>
+Или если вы предпочитаете самостоятельно рассчитать проценты, используйте это:
 
-<pre class="brush: css">.offset-by-one {
+```css
+.offset-by-one {
   margin-left: 10.41666666%;
-}</pre>
+}
+```
 
-<p>Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:</p>
+Теперь вы можете добавить этот класс в любой контейнер, в котором вы хотите оставить пустое пространство с одним столбцом в левой части окна. Например, если у вас есть это в вашем HTML:
 
-<pre class="brush: html">&lt;div class="col span6"&gt;14&lt;/div&gt;</pre>
+```html
+<div class="col span6">14</div>
+```
 
-<p>Попробуйте заменить его на</p>
+Попробуйте заменить его на
 
-<pre class="brush: html">&lt;div class="col span5 offset-by-one"&gt;14&lt;/div&gt;</pre>
+```html
+<div class="col span5 offset-by-one">14</div>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!</p>
-</div>
+> **Примечание:** Обратите внимание, что вам необходимо уменьшить количество столбцов, чтобы освободить место для смещения!
 
-<p>Попытайтесь загрузить и обновить, чтобы увидеть разницу или посмотрите наш пример <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> (см. <a href="https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">также «live»</a>). Готовый пример должен выглядеть так:</p>
+Попытайтесь загрузить и обновить, чтобы увидеть разницу или посмотрите наш пример [fluid-grid-offset.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html) (см. [также «live»](https://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html)). Готовый пример должен выглядеть так:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p>
+![](https://mdn.mozillademos.org/files/13903/offset-grid-finished.png)
 
-<div class="note">
-<p><strong>Примечание:</strong> В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»?</p>
-</div>
+> **Примечание:** В качестве дополнительного упражнения вы можете реализовать класс «смещение на два»?
 
-<h3 id="Ограничения_с_плавающей_сеткой">Ограничения с плавающей сеткой</h3>
+### Ограничения с плавающей сеткой
 
-<p>При использовании такой системы вам необходимо позаботиться о том, чтобы ваша общая ширина была правильно вставлена и что вы не включаете элементы в строку, которая содержит больше столбцов, чем может содержать строка. Из-за того, как работают поплавки, если количество столбцов сетки становится слишком большим для сетки, элементы на конце будут опускаться до следующей строки, разбивая сетку.</p>
+При использовании такой системы вам необходимо позаботиться о том, чтобы ваша общая ширина была правильно вставлена и что вы не включаете элементы в строку, которая содержит больше столбцов, чем может содержать строка. Из-за того, как работают поплавки, если количество столбцов сетки становится слишком большим для сетки, элементы на конце будут опускаться до следующей строки, разбивая сетку.
 
-<p>Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.</p>
+Также имейте в виду, что если содержимое элементов становится шире, чем занимаемые им строки, оно будет переполняться и выглядит как беспорядок.
 
-<p>Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.</p>
+Самое большое ограничение этой системы состоит в том, что она по существу одномерна. Мы имеем дело со столбцами и охватываем элементы по столбцам, но не по строкам. С помощью этих старых методов компоновки очень сложно контролировать высоту элементов без явной установки высоты, и это тоже очень негибкий подход - он работает только, если вы можете гарантировать, что ваш контент будет определённой высоты.
 
-<h2 id="Flexbox_grids">Flexbox grids?</h2>
+## Flexbox grids?
 
-<p>Если вы прочтёте нашу предыдущую статью о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>, вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.</p>
+Если вы прочтёте нашу предыдущую статью о [flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox), вы можете подумать, что flexbox - идеальное решение для создания сетчатой системы. В настоящее время доступно множество систем gridbox на основе flexbox и flexbox может решить многие из проблем, которые мы уже обнаружили при создании нашей сетки выше.
 
-<p>Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (<code>wrapper</code>), <code>row</code> и <code>col</code> классов:</p>
+Однако flexbox никогда не разрабатывался как сетчатая система и создаёт новый набор проблем при использовании в качестве одного. В качестве простого примера мы можем использовать тот же пример разметки, который мы использовали выше, и использовать следующий CSS для стилей классов-оболочек (`wrapper`), `row` и `col` классов:
 
-<pre class="brush: css">body {
+```css
+body {
   width: 90%;
   max-width: 980px;
   margin: 0 auto;
@@ -355,166 +363,177 @@ body {
   width: 6.25%;
   flex: 1 1 auto;
   background: rgb(255,150,150);
-}</pre>
+}
+```
+
+Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода [flexbox-grid.html ](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html)(см. также [он работает в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html)).
 
-<p>Вы можете попробовать сделать эти замены в своём собственном примере или посмотреть на наш пример кода <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html </a>(см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">он работает в режиме реального времени</a>).</p>
+Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для `display: flex`.
 
-<p>Здесь мы превращаем каждую строку в гибкий контейнер. С сеткой на основе flexbox нам все ещё нужны строки, чтобы мы могли иметь элементы, которые составляют менее 100%. Мы установили этот контейнер для <code>display: flex</code>.</p>
+На `.col `мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - `auto`. Поскольку наш элемент имеет набор {{cssxref ("width")}}, `auto` будет использовать эту ширину в качестве базового значения flex (`flex-basis`).
 
-<p>На <code>.col </code>мы устанавливаем первое значение свойства {{cssxref ("flex")}} ({{cssxref ("flex-grow")}}) до 1, чтобы наши объекты могли расти, второе значение ({{cssxref (" flex-shrink ")}}) до 1, поэтому элементы могут сокращаться, а третье значение ({{cssxref (" flex-basis ")}}) - <code>auto</code>. Поскольку наш элемент имеет набор {{cssxref ("width")}}, <code>auto</code> будет использовать эту ширину в качестве базового значения flex (<code>flex-basis</code>).</p>
+В верхней строке мы получаем двенадцать аккуратных коробок на сетке, и они растут и сжимаются одинаково, когда мы меняем ширину окна просмотра. Однако на следующей строке у нас есть только четыре элемента, и они также растут и сокращаются с 60px. Только с четырьмя из них они могут расти намного больше, чем элементы в строке выше, в результате они все занимают одну и ту же ширину во второй строке.
 
-<p>В верхней строке мы получаем двенадцать аккуратных коробок на сетке, и они растут и сжимаются одинаково, когда мы меняем ширину окна просмотра. Однако на следующей строке у нас есть только четыре элемента, и они также растут и сокращаются с 60px. Только с четырьмя из них они могут расти намного больше, чем элементы в строке выше, в результате они все занимают одну и ту же ширину во второй строке.</p>
+![](https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p>
+Чтобы исправить это, нам всё равно нужно включить наши классы `span`, чтобы обеспечить ширину, которая заменит значение, используемое `flex-basis` для этого элемента.
 
-<p>Чтобы исправить это, нам всё равно нужно включить наши классы <code>span</code>, чтобы обеспечить ширину, которая заменит значение, используемое <code>flex-basis</code> для этого элемента.</p>
+Они также не уважают сетку, используемую выше, потому что они ничего не знают об этом.
 
-<p>Они также не уважают сетку, используемую выше, потому что они ничего не знают об этом.</p>
+Flexbox является **одномерным** по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам всё равно нужно рассчитать проценты, как для плавающего макета.
 
-<p>Flexbox является <strong>одномерным</strong> по дизайну. Он имеет дело с одним измерением - со строкой или столбцом. Мы не можем создать строгую сетку для столбцов и строк, что означает, что если мы будем использовать flexbox для нашей сетки, нам всё равно нужно рассчитать проценты, как для плавающего макета.</p>
+В вашем проекте вы всё равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.
 
-<p>В вашем проекте вы всё равно можете использовать сетку flexbox из-за дополнительных возможностей выравнивания и распределения пространства. Flexbox обеспечивает надплавки. Однако вам следует помнить, что вы все ещё используете инструмент для чего-то другого, кроме того, для чего он предназначен. Таким образом, вы можете почувствовать, что он заставляет вас прыгать через дополнительные обручи, чтобы получить конечный результат, который вы хотите.</p>
+## Системы сторонних сетей
 
-<h2 id="Системы_сторонних_сетей">Системы сторонних сетей</h2>
+Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как [Bootstrap](http://getbootstrap.com/) и [Foundation](https://foundation.zurb.com/), есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.
 
-<p>Теперь, когда мы понимаем математику за нашими расчётами в сетке, мы находимся в хорошем месте, чтобы взглянуть на некоторые из сторонних сетевых систем, которые используются совместно. Если вы ищете «CSS Grid framework» в Интернете, вы найдёте огромный список вариантов на выбор. В популярных структурах, таких как <a href="http://getbootstrap.com/">Bootstrap</a> и <a href="https://foundation.zurb.com/">Foundation</a>, есть сетка. Существуют также автономные сетчатые системы, разработанные с использованием CSS или с использованием препроцессоров.</p>
+Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.
 
-<p>Давайте рассмотрим одну из этих автономных систем, поскольку она демонстрирует общие методы работы с сеткой. Сетка, которую мы будем использовать, является частью Skeleton, простой CSS-структуры.</p>
+Для начала посетите [веб-сайт Skeleton](http://getskeleton.com/) и выберите «Загрузить», чтобы загрузить ZIP-файл. Разархивируйте это и скопируйте файлы skeleton.css и normalize.css в новый каталог.
 
-<p>Для начала посетите <a href="http://getskeleton.com/">веб-сайт Skeleton</a> и выберите «Загрузить», чтобы загрузить ZIP-файл. Разархивируйте это и скопируйте файлы skeleton.css и normalize.css в новый каталог.</p>
+Сделайте копию нашего файла [html-skeleton.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html) и сохраните его в том же каталоге, что и скелет, и нормализовать CSS.
 
-<p>Сделайте копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a> и сохраните его в том же каталоге, что и скелет, и нормализовать CSS.</p>
+Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:
 
-<p>Включите скелет и нормализуйте CSS на странице HTML, добавив следующее в голову:</p>
+```html
+<link href="normalize.css" rel="stylesheet">
+<link href="skeleton.css" rel="stylesheet">
+```
 
-<pre class="brush: html">&lt;link href="normalize.css" rel="stylesheet"&gt;
-&lt;link href="skeleton.css" rel="stylesheet"&gt;</pre>
+Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.
 
-<p>Скелет включает в себя больше, чем сетку - он также содержит CSS для типографики и других элементов страницы, которые вы можете использовать в качестве отправной точки. На данный момент мы оставим их по умолчанию, но именно эта сетка нас действительно интересует.</p>
+> **Примечание:** Нормализация - очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах.
 
-<div class="note">
-<p><strong>Примечание</strong>: Нормализация - очень полезная небольшая библиотека CSS, написанная Николасом Галлахером, которая автоматически делает некоторые полезные основные исправления макета и делает стиль элементов по умолчанию более согласованным в разных браузерах.</p>
+Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col">1</div>
+    <div class="col">2</div>
+    <div class="col">3</div>
+    <div class="col">4</div>
+    <div class="col">5</div>
+    <div class="col">6</div>
+    <div class="col">7</div>
+    <div class="col">8</div>
+    <div class="col">9</div>
+    <div class="col">10</div>
+    <div class="col">11</div>
+    <div class="col">12</div>
+  </div>
+  <div class="row">
+    <div class="col">13</div>
+    <div class="col">14</div>
+    <div class="col">15</div>
+    <div class="col">16</div>
+  </div>
 </div>
+```
+
+Чтобы начать использовать Skeleton, нам нужно предоставить оболочку {{htmlelement ("div")}} класс `container` - это уже включено в наш HTML. Это центрирует контент с максимальной шириной 960 пикселей. Вы можете видеть, как теперь коробки не становятся шире, чем 960 пикселей.
+
+Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. `<div>` центрируется с использованием `auto` левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в `border-box`, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.
 
-<p>Мы будем использовать аналогичный HTML для нашего предыдущего примера. Добавьте в свой HTML-код следующее:</p>
-
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div class="row"&gt;
-    &lt;div class="col"&gt;1&lt;/div&gt;
-    &lt;div class="col"&gt;2&lt;/div&gt;
-    &lt;div class="col"&gt;3&lt;/div&gt;
-    &lt;div class="col"&gt;4&lt;/div&gt;
-    &lt;div class="col"&gt;5&lt;/div&gt;
-    &lt;div class="col"&gt;6&lt;/div&gt;
-    &lt;div class="col"&gt;7&lt;/div&gt;
-    &lt;div class="col"&gt;8&lt;/div&gt;
-    &lt;div class="col"&gt;9&lt;/div&gt;
-    &lt;div class="col"&gt;10&lt;/div&gt;
-    &lt;div class="col"&gt;11&lt;/div&gt;
-    &lt;div class="col"&gt;12&lt;/div&gt;
-  &lt;/div&gt;
-  &lt;div class="row"&gt;
-    &lt;div class="col"&gt;13&lt;/div&gt;
-    &lt;div class="col"&gt;14&lt;/div&gt;
-    &lt;div class="col"&gt;15&lt;/div&gt;
-    &lt;div class="col"&gt;16&lt;/div&gt;
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
-
-<p><br>
- Чтобы начать использовать Skeleton, нам нужно предоставить оболочку {{htmlelement ("div")}} класс <code>container</code> - это уже включено в наш HTML. Это центрирует контент с максимальной шириной 960 пикселей. Вы можете видеть, как теперь коробки не становятся шире, чем 960 пикселей.</p>
-
-<p>Вы можете посмотреть в файле skeleton.css, чтобы увидеть CSS, который используется, когда мы применяем этот класс. <code>&lt;div&gt;</code> центрируется с использованием <code>auto</code> левого и правого полей, а отступы в 20 пикселей применяются слева и справа. Скелет также устанавливает свойство {{cssxref ("box-sizing")}} в <code>border-box</code>, как мы делали это раньше, поэтому дополнение и границы этого элемента будут включены в общую ширину.</p>
-
-<pre class="brush: css">.container {
+```css
+.container {
   position: relative;
   width: 100%;
   max-width: 960px;
   margin: 0 auto;
   padding: 0 20px;
   box-sizing: border-box;
-}</pre>
+}
+```
 
-<p>Элементы могут быть только частью сетки, если они находятся внутри строки, так как в нашем предыдущем примере нам нужен дополнительный <code>&lt;div&gt;</code> или другой элемент с классом строки (<code>row</code>), вложенным между <code>content</code> <code>&lt;div&gt;</code> и нашим контейнером фактического содержимого <code>&lt;div&gt;</code>. Мы уже это сделали.</p>
+Элементы могут быть только частью сетки, если они находятся внутри строки, так как в нашем предыдущем примере нам нужен дополнительный `<div>` или другой элемент с классом строки (`row`), вложенным между `content` `<div>` и нашим контейнером фактического содержимого `<div>`. Мы уже это сделали.
 
-<p>Теперь давайте выложим контейнеры. Скелет основан на сетке из 12 столбцов. В верхних строках нужны классы из <code>one column</code>, чтобы они охватывали один столбец.</p>
+Теперь давайте выложим контейнеры. Скелет основан на сетке из 12 столбцов. В верхних строках нужны классы из `one column`, чтобы они охватывали один столбец.
 
-<p>Добавьте их сейчас, как показано в следующем фрагменте:</p>
+Добавьте их сейчас, как показано в следующем фрагменте:
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;div class="row"&gt;
-    &lt;div class="one column"&gt;1&lt;/div&gt;
-    &lt;div class="one column"&gt;2&lt;/div&gt;
-    &lt;div class="one column"&gt;3&lt;/div&gt;
+```html
+<div class="container">
+  <div class="row">
+    <div class="one column">1</div>
+    <div class="one column">2</div>
+    <div class="one column">3</div>
     /* and so on */
-  &lt;/div&gt;
-&lt;/div&gt;</pre>
+  </div>
+</div>
+```
 
-<p>Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:</p>
+Затем дайте контейнеры во втором классе классов, объясняющие количество столбцов, которые они должны охватывать, например:
 
-<pre class="brush: html">&lt;div class="row"&gt;
-  &lt;div class="one column"&gt;13&lt;/div&gt;
-  &lt;div class="six columns"&gt;14&lt;/div&gt;
-  &lt;div class="three columns"&gt;15&lt;/div&gt;
-  &lt;div class="two columns"&gt;16&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="row">
+  <div class="one column">13</div>
+  <div class="six columns">14</div>
+  <div class="three columns">15</div>
+  <div class="two columns">16</div>
+</div>
+```
 
-<p>Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.</p>
+Попробуйте сохранить свой HTML-файл и загрузить его в свой браузер, чтобы увидеть эффект.
 
-<div class="note">
-<p>Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> - файлом (см. также <a href="https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">в режиме реального времени</a>).</p>
-</div>
+> **Примечание:** Примечание. Если вам не удаётся заставить этот пример работать, попробуйте сравнить его с нашим [html-skeleton-finished.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html) - файлом (см. также [в режиме реального времени](https://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html)).
 
-<p>Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».</p>
+Если вы посмотрите в файле skeleton.css, вы увидите, как это работает. Например, у Skeleton определены следующие элементы стиля с добавленными к ним классами «три столбца».
 
-<pre class="brush: css">.three.columns { width: 22%; }</pre>
+```css
+.three.columns { width: 22%; }
+```
 
-<p>Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.</p>
+Весь Skeleton (или любая другая структура сетки) выполняет настройку предопределённых классов, которые вы можете использовать, добавив их в свою разметку. Это точно так же, как если бы вы сами делали расчёт этих процентов.
 
-<p>Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!</p>
+Как вы можете видеть, нам нужно написать очень мало CSS при использовании Skeleton. Он касается всех плавающих для нас, когда мы добавляем классы в нашу разметку. Именно эта способность нести ответственность за компоновку над чем-то ещё, что делает использование рамки для сетчатой системы неотразимым выбором!
 
-<p>Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.</p>
+Skeleton - это более простая сетка, чем некоторые из структур, с которыми вы можете столкнуться. Сетки в больших рамках, таких как Bootstrap и Foundation, предлагают больше функциональности и дополнительные точки останова для различной ширины экрана. Тем не менее, все они работают аналогичным образом - добавив определённые классы в свою разметку, вы можете контролировать, как элемент выложен с использованием предопределённой сетки.
 
-<h2 id="Родные_CSS_Сетки_с_Grid_Layout">Родные CSS Сетки с Grid Layout</h2>
+## Родные CSS Сетки с Grid Layout
 
-<p>В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout Module</a>).</p>
+В начале этой статьи мы сказали, что CSS ранее не имел реальной системы для создания макетов сетки, но это изменится. Хотя мы ещё не можем использовать встроенную сетевую систему CSS, в следующем году мы увидим поддержку браузера для модуля компоновки сетки CSS ([CSS Grid Layout Module](/ru/docs/Web/CSS/CSS_Grid_Layout)).
 
-<p>В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.</p>
+В настоящее время вы можете использовать только те методы, которые мы покажем вам в браузерах, которые реализуют макет сетки CSS «за флагом» - это означает, что он в настоящее время реализован, но в экспериментальном состоянии, которое вам нужно включить.
 
-<p>В Firefox, например, вам нужно перейти к URL-адресу <code>about: config</code>, выполнить поиск по предпочтению <code>layout.css.grid.enabled</code> и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив <a href="http://gridbyexample.com/browsers">Grid by Example</a>.</p>
+В Firefox, например, вам нужно перейти к URL-адресу `about: config`, выполнить поиск по предпочтению `layout.css.grid.enabled` и дважды щёлкнуть его, чтобы включить CSS-сетки. Вы можете узнать, как использовать его в других браузерах, посетив [Grid by Example](http://gridbyexample.com/browsers).
 
-<p>Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить <code>&lt;div&gt;</code> для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.</p>
+Мы рассмотрели структуру Скелетной сетки выше - как и другие сторонние решётки и даже ручные сетки, для этого требуется добавить `<div>` для формирования строк, а затем указать количество столбцов, которые будут охватывать элементы в этих рядах.
 
-<p>С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.</p>
+С помощью CSS Grid Layout вы можете полностью указать свою сетку в CSS, не добавляя эти вспомогательные классы в разметку вообще. Давайте рассмотрим наш простой пример и посмотрим, как мы будем создавать тот же макет с помощью CSS Grid Layout.
 
-<h3 id="Создание_собственной_сетки">Создание собственной сетки</h3>
+### Создание собственной сетки
 
-<p>Сначала начните с создания локальной копии файла <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html">css-grid.html</a>. Он содержит следующую разметку:</p>
+Сначала начните с создания локальной копии файла [css-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid.html). Он содержит следующую разметку:
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="col"&gt;1&lt;/div&gt;
-  &lt;div class="col"&gt;2&lt;/div&gt;
-  &lt;div class="col"&gt;3&lt;/div&gt;
-  &lt;div class="col"&gt;4&lt;/div&gt;
-  &lt;div class="col"&gt;5&lt;/div&gt;
-  &lt;div class="col"&gt;6&lt;/div&gt;
-  &lt;div class="col"&gt;7&lt;/div&gt;
-  &lt;div class="col"&gt;8&lt;/div&gt;
-  &lt;div class="col"&gt;9&lt;/div&gt;
-  &lt;div class="col"&gt;10&lt;/div&gt;
-  &lt;div class="col"&gt;11&lt;/div&gt;
-  &lt;div class="col"&gt;12&lt;/div&gt;
-  &lt;div class="col"&gt;13&lt;/div&gt;
-  &lt;div class="col span6"&gt;14&lt;/div&gt;
-  &lt;div class="col span3"&gt;15&lt;/div&gt;
-  &lt;div class="col span2"&gt;16&lt;/div&gt;
-&lt;/div&gt;</pre>
+```html
+<div class="wrapper">
+  <div class="col">1</div>
+  <div class="col">2</div>
+  <div class="col">3</div>
+  <div class="col">4</div>
+  <div class="col">5</div>
+  <div class="col">6</div>
+  <div class="col">7</div>
+  <div class="col">8</div>
+  <div class="col">9</div>
+  <div class="col">10</div>
+  <div class="col">11</div>
+  <div class="col">12</div>
+  <div class="col">13</div>
+  <div class="col span6">14</div>
+  <div class="col span3">15</div>
+  <div class="col span2">16</div>
+</div>
+```
 
-<p>На этот раз у нас есть родительский <code>&lt;div&gt;</code> с классом обёртки (<code>wrapper</code>), а затем все дочерние элементы просто появляются непосредственно внутри обёртки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.</p>
+На этот раз у нас есть родительский `<div>` с классом обёртки (`wrapper`), а затем все дочерние элементы просто появляются непосредственно внутри обёртки - никаких элементов строки. Мы добавили класс к элементам, которые должны охватывать более одного столбца.
 
-<p>Теперь добавьте следующее в элемент {{htmlelement ("style")}}:</p>
+Теперь добавьте следующее в элемент {{htmlelement ("style")}}:
 
-<pre class="brush: css">.wrapper {
+```css
+.wrapper {
   width: 90%;
   max-width: 960px;
   margin: 0 auto;
@@ -525,35 +544,41 @@ body {
 
 .col {
   background: rgb(255,150,150);
-}</pre>
+}
+```
 
-<p>Здесь мы устанавливаем правило <code>.wrapper</code>, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.</p>
+Здесь мы устанавливаем правило `.wrapper`, поэтому оно составляет 90% от ширины тела, с центром и имеет {{cssxref ("max-width")}} 960px.
 
-<p>Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение <code>grid</code> свойства {{cssxref ("display")}}, установить жёлоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию <code>repeat()</code> и новую единицу, определённую для макета сетки - блок <code>fr</code>.</p>
+Теперь для свойств сетки CSS. Мы можем объявить сетку, используя значение `grid` свойства {{cssxref ("display")}}, установить жёлоб с свойством {{cssxref ("grid-gap")}}, а затем создать сетку из 12 столбцов равной ширине, используя {{cssxref ("grid-template-columns")}}, новую функцию `repeat()` и новую единицу, определённую для макета сетки - блок `fr`.
 
-<p>Блок <code>fr</code> представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны <code>1fr</code>, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.</p>
+Блок `fr` представляет собой блок фракции - он описывает долю доступного пространства в контейнере сетки. Если все столбцы равны `1fr`, каждый из них занимает равное количество места. Это устраняет необходимость вычислять проценты для создания гибкой сетки.
 
-<p>Создав сетку, правила автоматического размещения сетки немедленно выведут наши коробки в этой сетке, и мы получим гибкую сетку с двенадцатью столбцами.</p>
+Создав сетку, правила автоматического размещения сетки немедленно выведут наши коробки в этой сетке, и мы получим гибкую сетку с двенадцатью столбцами.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13907/css-grid-incomplete.png" style="display: block; height: 70px; margin: 0px auto; width: 971px;"></p>
+![](https://mdn.mozillademos.org/files/13907/css-grid-incomplete.png)
 
-<p>Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:</p>
+Чтобы создать контейнеры, которые охватывают несколько треков столбцов в сетке, мы можем использовать свойство {{cssxref ("grid-column")}}. Чтобы охватить 6 столбцов, например:
 
-<pre class="brush: css">.span6 {
+```css
+.span6 {
   grid-column: auto / span 6;
-}</pre>
+}
+```
 
-<p>И для span 3:</p>
+И для span 3:
 
-<pre class="brush: css">.span3 {
+```css
+.span3 {
   grid-column: auto / span 3;
-}</pre>
+}
+```
 
-<p>Значение перед косой чертой - это начальная строка - в этом случае мы явно не устанавливаем это и не позволяем браузеру размещать элемент на следующей доступной строке. Затем мы можем установить его на 6, 3 или сколько угодно строк.</p>
+Значение перед косой чертой - это начальная строка - в этом случае мы явно не устанавливаем это и не позволяем браузеру размещать элемент на следующей доступной строке. Затем мы можем установить его на 6, 3 или сколько угодно строк.
 
-<p>Добавьте нижеследующую часть вашего CSS:</p>
+Добавьте нижеследующую часть вашего CSS:
 
-<pre class="brush: css">.span2 { grid-column: auto / span 2;}
+```css
+.span2 { grid-column: auto / span 2;}
 .span3 { grid-column: auto / span 3;}
 .span4 { grid-column: auto / span 4;}
 .span5 { grid-column: auto / span 5;}
@@ -563,80 +588,81 @@ body {
 .span9 { grid-column: auto / span 9;}
 .span10 { grid-column: auto / span 10;}
 .span11 { grid-column: auto / span 11;}
-.span12 { grid-column: auto / span 12;}</pre>
+.span12 { grid-column: auto / span 12;}
+```
 
-<p>Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!</p>
+Попробуйте сохранить и обновить, и вы увидите, что контейнеры охватывают несколько столбцов, если это необходимо. Круто!
 
-<p>Сетки CSS являются <strong>двумерными</strong>, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.</p>
+Сетки CSS являются **двумерными**, так как макет растёт и сжимается, элементы остаются выровненными по горизонтали и по вертикали.
 
-<p>Вы можете проверить это, заменив последние 4 col <code>&lt;div&gt;</code> s следующим:</p>
+Вы можете проверить это, заменив последние 4 col `<div>` s следующим:
 
-<pre class="brush: css">&lt;div class="col"&gt;13some&lt;br&gt;content&lt;/div&gt;
-&lt;div class="col span6"&gt;14this&lt;br&gt;is&lt;br&gt;more&lt;br&gt;content&lt;/div&gt;
-&lt;div class="col span3"&gt;15this&lt;br&gt;is&lt;br&gt;less&lt;/div&gt;
-&lt;div class="col span2"&gt;16&lt;/div&gt;</pre>
+```css
+<div class="col">13some<br>content</div>
+<div class="col span6">14this<br>is<br>more<br>content</div>
+<div class="col span3">15this<br>is<br>less</div>
+<div class="col span2">16</div>
+```
 
-<p>Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.</p>
+Здесь мы намеренно добавили некоторые фрагменты строки ({{htmlelement ("br")}}), чтобы заставить некоторые из столбцов стать выше других. Если вы попытаетесь сохранить и обновить, вы увидите, что столбцы регулируют их высоту, как самый высокий контейнер, поэтому все остаётся аккуратным.
 
-<p>Окончательный макет выглядит так:</p>
+Окончательный макет выглядит так:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13909/css-grid-finished.png" style="display: block; height: 130px; margin: 0px auto; width: 972px;"></p>
+![](https://mdn.mozillademos.org/files/13909/css-grid-finished.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html">законченную версию</a> (также смотрите, как она <a href="https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html">работает в прямом эфире</a>).</p>
-</div>
+> **Примечание:** Если вам не удаётся заставить этот пример работать, вы можете проверить свой код на нашу [законченную версию](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-grid-finished.html) (также смотрите, как она [работает в прямом эфире](https://mdn.github.io/learning-area/css/css-layout/grids/css-grid-finished.html)).
 
-<h3 id="Другие_полезные_функции_сетки_CSS">Другие полезные функции сетки CSS</h3>
+### Другие полезные функции сетки CSS
 
-<p>С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:</p>
+С сетками CSS нам не нужно толкать вещи вдоль полей, чтобы их компенсировать. Попробуйте внести эти изменения в свой CSS:
 
-<pre class="brush: css">.content {
+```css
+.content {
   grid-column: 2 / 8;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="col span2 content"&gt;16&lt;/div&gt;</pre>
+```html
+<div class="col span2 content">16</div>
+```
 
-<p>Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.</p>
+Контейнер 16 теперь будет охватывать столбцы с 2 по 8, в следующей доступной строке, где он может поместиться.
 
-<p>Мы можем так же легко группировать строки так же, как и столбцы:</p>
+Мы можем так же легко группировать строки так же, как и столбцы:
 
-<pre class="brush: css">.content {
+```css
+.content {
   grid-column: 2 / 8;
   grid-row: 3 / 5;
-}</pre>
+}
+```
 
-<p>Контейнер 16 теперь будет охватывать строки с 3 по 5, а также столбцы с 2 по 8.</p>
+Контейнер 16 теперь будет охватывать строки с 3 по 5, а также столбцы с 2 по 8.
 
-<p>Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство <code>grid-gap</code>.</p>
+Нам также не нужно использовать маржу для фальшивых желобов или явно рассчитать их ширину - сетка CSS имеет эту функциональность, встроенную прямо в свойство `grid-gap`.
 
-<p>Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.</p>
+Мы просто касаемся поверхности того, что возможно с помощью CSS Grid Layout, но главное, что нужно понять в контексте этой статьи, это то, что вам не нужно создавать сетку с сеткой - она одна. Вы можете написать CSS, который помещает элемент непосредственно в предопределённую сетку. Это первый раз, когда это было возможно с помощью CSS и это улучшится, когда поддержка браузера закрепится.
 
-<h3 id="Активное_обучение_Напишите_свою_собственную_простую_сетку">Активное обучение: Напишите свою собственную простую сетку</h3>
+### Активное обучение: Напишите свою собственную простую сетку
 
-<p>В макете «<a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS</a>» мы включили раздел о <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables">CSS-таблицах</a>, который включал простой пример формы (см. Пример <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html live</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">исходный код</a>). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия:</p>
+В макете «[Введение в CSS](/ru/docs/Learn/CSS/CSS_layout/Introduction)» мы включили раздел о [CSS-таблицах](/ru/docs/Learn/CSS/CSS_layout/Introduction#CSS_tables), который включал простой пример формы (см. Пример [css-tables-example.html live](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) и [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html)). Мы хотели бы, чтобы вы взяли копию этого примера и выполните следующие действия:
 
-<ol>
- <li>Удалите элементы <code>&lt;div&gt;</code> внутри <code>&lt;form&gt;</code> - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас.</li>
- <li>Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке.</li>
-</ol>
+1.  Удалите элементы `<div>` внутри `<form>` - вам больше не нужны эти данные, поскольку CSS-сетки могут обрабатывать размещение содержимого по строкам и столбцам для вас.
+2.  Используйте свойства сетки CSS, чтобы создать макет для вашей формы как можно ближе к оригиналу. Вам нужно будет установить ширину на содержащем элементе и подумать о том, как установить пробелы в столбцах, а также пробелы в строке.
 
-<div class="note">
-<p><strong>Примечание</strong>: Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html">css-tables-as-grid.html</a>. Не обманывайте - сначала попробуйте упражнение!</p>
-</div>
+> **Примечание:** Сначала выполните это и если вы действительно застряли, вы можете проверить свой код на примере [css-tables-as-grid.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/css-tables-as-grid.html). Не обманывайте - сначала попробуйте упражнение!
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.</p>
+Прочитав эту статью, вы должны теперь понять, как grid-схемы и grid-структуры работают в CSS. Вы также заглянули в будущее сетки CSS и теперь должны понимать, что используемые нами grid-сетки - это, по сути, стоп-решение, пока у нас не будет широко распространённого способа достижения этого в CSS.
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
-</ul>
+- [Introduction to CSS layout](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Positioning](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Practical positioning examples](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grids](/ru/docs/Learn/CSS/CSS_layout/Grids)
diff --git a/files/ru/learn/css/css_layout/index.md b/files/ru/learn/css/css_layout/index.md
index e4f9be46d9c077..b86eec491ef869 100644
--- a/files/ru/learn/css/css_layout/index.md
+++ b/files/ru/learn/css/css_layout/index.md
@@ -23,62 +23,52 @@ tags:
   - разметка страницы
 translation_of: Learn/CSS/CSS_layout
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.</p>
+К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение разметки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы разметки, такие как Flexbox и CSS grid, и некоторые традиционные методы разметки, которые все ещё применяются.
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Перед изучением этого раздела вы должны:</p>
+Перед изучением этого раздела вы должны:
 
-<ol>
- <li>Иметь общее представление об HTML, как указано в разделе <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Вступление в HTML</a>.</li>
- <li>Ориентироваться в основах CSS, как указано в разделе <a href="/ru/docs/Learn/CSS/First_steps">Вступление в CSS</a>.</li>
- <li>Понимать, как <a href="/ru/docs/Learn/CSS/Building_blocks">стилизовать блочные элементы</a>.</li>
-</ol>
+1.  Иметь общее представление об HTML, как указано в разделе [Вступление в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML).
+2.  Ориентироваться в основах CSS, как указано в разделе [Вступление в CSS](/ru/docs/Learn/CSS/First_steps).
+3.  Понимать, как [стилизовать блочные элементы](/ru/docs/Learn/CSS/Building_blocks).
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода  <a href="http://jsbin.com/">JSBin</a> и <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** Если вы работаете на компьютере/планшете/других устройствах, где нет возможности создать ваш собственный файл, вы можете попробовать (большую часть) примеры кода в онлайн-программах для написания кода [JSBin](http://jsbin.com/) и [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководство">Руководство</h2>
+## Руководство
 
-<p>Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.</p>
+Эти разделы содержат инструкции по основным инструментам и методам вёрстки, доступным в CSS. На последнем уроке у вас будет возможность оценить понимание пройденного материала посредством вёрстки веб-страницы.
 
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></dt>
- <dd>В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения {{cssxref("display")}}  — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.</dd>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></dt>
- <dd>Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.</dd>
-</dl>
+- [Введение в CSS вёрстку](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+  - : В этом разделе будут описаны некоторые возможности CSS вёрстки, которых мы уже касались в предыдущих модулях - различные значения {{cssxref("display")}} — и представлены некоторые концепции, которые мы рассмотрим в этом модуле.
+- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+  - : Элементы на веб-страницах размещаются в соответствии с нормальным потоком - пока мы не сделаем что-либо, чтобы это изменить. Этот раздел объясняет основы нормального потока как фундамент для изучения влияния на него.
 
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
- <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox">Flexbox</a> - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.</dd>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
- <dd>CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.</dd>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
- <dd>Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.</dd>
-</dl>
+<!---->
 
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></dt>
- <dd>Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.</dd>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Мульти-колоночная вёрстка</a></dt>
- <dd>Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого  в столбцах по аналогии с вёрсткой газет.  Этот раздел объясняет, как использовать эту возможность.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></dt>
- <dd>Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.</dd>
- <dt><a href="en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старыми браузерами</a></dt>
- <dd>
- <p>В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.</p>
- </dd>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальное понятие вёрстки</a></dt>
- <dd>Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.</dd>
-</dl>
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+  - : [Flexbox](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox) - это метод одномерной вёрстки для размещения элементов в строках или столбцах. Элементы растягиваются, чтобы заполнить дополнительное пространство и сжимаются, чтобы поместиться в меньшее пространство. Данный раздел объясняет фундаментальные принципы.
+- [Grids](/ru/docs/Learn/CSS/CSS_layout/Grids)
+  - : CSS Grid Layout - это двумерная система вёрстки для веб. Она позволяет вам размещать контент в строках и столбцах и имеет множество возможностей, которые упрощают построение сложных макетов. Этот раздел даст вам все, что нужно знать для начала работы с макетом страницы.
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+  - : Изначально созданное для плавающих изображений внутри текстовых блоков, свойство {{cssxref("float")}} стало одним из наиболее часто используемых инструментов для создания мульти-колоночной вёрстки веб-страниц. С появлением Flexbox и Grid оно вернулось к первоначальному предназначению, как объясняется в этом разделе.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+<!---->
 
-<dl>
- <dt><a href="/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Практические примеры позиционирования</a></dt>
- <dd>Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.</dd>
-</dl>
+- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+  - : Позиционирование позволяет вам брать элементы из нормального потока и изменять их поведение, например, заставляет находиться друг под другом или всегда оставаться в одном и том же месте внутри окна просмотра браузера. В этом разделе объясняются различные значения {{cssxref("position")}} и способы их применения.
+- [Мульти-колоночная вёрстка](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+  - : Спецификация мульти-колоночной вёрстки даёт вам способ размещения содержимого в столбцах по аналогии с вёрсткой газет. Этот раздел объясняет, как использовать эту возможность.
+- [Устаревшие методы вёрстки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+  - : Grid-системы - это очень распространённая возможность, используемая в CSS layouts, и до CSS Grid Layout они, как правило, реализовывались с помощью floats или других возможностей вёрстки. Вы представляете свою вёрстку в виде заданного числа столбцов (например, 4 или 6), а затем вы помещаете содержимое в эти воображаемые столбцы. В этом разделе мы рассмотрим, как работают эти старые методы, чтобы вы понимали, как они использовались, если столкнётесь со старыми проектами.
+- [Поддержка старыми браузерами](en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+  - : В этом модуле мы рекомендуем использовать Flexbox и Grid как основные методы вёрстки для ваших проектов. Однако, ваш сайт могут посещать со старых браузеров или браузеров, которые не поддерживают данные методы. В сети это будет всегда - по мере появления новых возможностей, для различных браузеров будут приоритетны различные вещи. Этот раздел объясняет, как использовать современные веб-технологии без блокировки пользователей со старыми технологиями.
+- [Фундаментальное понятие вёрстки](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
+  - : Оценка ваших знаний различных методов вёрстки посредством вёрстки веб-страницы.
+
+## Смотрите также
+
+- [Практические примеры позиционирования](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)
+  - : Этот раздел показывает, как построить пример из реальной жизни, чтобы проиллюстрировать, что вы можете сделать при помощи позиционирования.
diff --git a/files/ru/learn/css/css_layout/introduction/index.md b/files/ru/learn/css/css_layout/introduction/index.md
index b9717e4b89cf47..999f50d22b3432 100644
--- a/files/ru/learn/css/css_layout/introduction/index.md
+++ b/files/ru/learn/css/css_layout/introduction/index.md
@@ -3,222 +3,197 @@ title: Введение в CSS вёрстку
 slug: Learn/CSS/CSS_layout/Introduction
 translation_of: Learn/CSS/CSS_layout/Introduction
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
 
-<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div>
+В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье.
 
-<p class="summary">В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства {{cssxref("display")}}, и разберём некоторые концепции, которые будут рассмотрены в этой статье. </p>
+| Требования: | Базовые знания HTML (изучите [введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимание как работает CSS (изучите [введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях.                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">введение в HTML</a>), и понимание как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях. </td>
-  </tr>
- </tbody>
-</table>
+Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.
 
-<p>Методы компоновки страниц CSS позволяют нам использовать элементы, расположенные на веб-странице, и контролировать где они находятся относительно их позиции по умолчанию, других элементов вокруг них, их родителей или главного окна. Методы компоновки страниц, которые мы подробно рассмотрим в этой статье.</p>
+- Нормальный поток
+- Свойство {{cssxref("display")}}
+- Flexbox
+- Grid
+- Floats
+- Позиционирование
+- Макет таблицы
+- Многоколоночный макет
 
-<ul>
- <li>Нормальный поток</li>
- <li>Свойство {{cssxref("display")}}</li>
- <li>Flexbox</li>
- <li>Grid</li>
- <li>Floats</li>
- <li>Позиционирование</li>
- <li>Макет таблицы</li>
- <li>Многоколоночный макет</li>
-</ul>
-
-<p>Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймёте, какой из них лучший инструмент разметки для каждой задачи.</p>
+Каждый метод имеет свои преимущества и недостатки и ни одна техника не предназначена для использования в изоляции от других. Разбирая данные методы, вы поймёте, какой из них лучший инструмент разметки для каждой задачи.
 
-<h2 id="Normal_flow">Normal flow</h2>
+## Normal flow
 
-<p>Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:</p>
+Нормальный поток (Normal flow) это то как ваш браузер отображает по умолчанию, когда вы не меняли расположение элементов на странице. Взглянем на пример:
 
-<pre class="brush: html">&lt;p&gt;I love my cat.&lt;/p&gt;
+```html
+<p>I love my cat.</p>
 
-&lt;ul&gt;
-  &lt;li&gt;Buy cat food&lt;/li&gt;
-  &lt;li&gt;Exercise&lt;/li&gt;
-  &lt;li&gt;Cheer up friend&lt;/li&gt;
-&lt;/ul&gt;
-
-&lt;p&gt;The end!&lt;/p&gt;</pre>
+<ul>
+  <li>Buy cat food</li>
+  <li>Exercise</li>
+  <li>Cheer up friend</li>
+</ul>
 
-<p>По умолчанию ваш браузер выведет этот код следующим образом:</p>
+<p>The end!</p>
+```
 
-<p>{{ EmbedLiveSample('Normal_flow', '100%', 200) }}</p>
+По умолчанию ваш браузер выведет этот код следующим образом:
 
-<p>Заметьте, что HTML-элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.</p>
+{{ EmbedLiveSample('Normal_flow', '100%', 200) }}
 
-<p>Элементы, выводящиеся один <em>под</em> другим, называются <em>блочными</em>, в противоположность <em>строчным</em>, которые выводятся один <em>вслед</em> за другим, как отдельные слова в обычном абзаце текста.</p>
+Заметьте, что HTML-элементы здесь отображаются точно в таком порядке, как и в исходном коде — первый параграф, за ним неупорядоченный список, затем второй параграф.
 
-<div class="note">
-<p><strong>Примечание</strong>: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за  направление отображения строковых элементов (таких как предложение).</p>
-</div>
+Элементы, выводящиеся один _под_ другим, называются _блочными_, в противоположность _строчным_, которые выводятся один _вслед_ за другим, как отдельные слова в обычном абзаце текста.
 
-<p>Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.</p>
+> **Примечание:** Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).
 
-<p>Методы CSS, которыми вы можете управлять разметкой элементов:</p>
+Когда вы используете CSS для создания разметки, вы двигаете элементы относительно их обычного расположения, но для многих элементов на вашей странице их обычное положение - это именно то, что вам подойдёт. Именно поэтому важно начинать вёрстку с создания правильно организованного HTML документа, для того, чтобы базовое расположение элементов впоследствии работало на вас.
 
-<ul>
- <li><strong>Свойство {{cssxref("display")}} </strong>— Стандартные значения  <code>block</code>, <code>inline</code> или <code>inline-block </code>могут изменять поведение элементов в обычном потоке (см.подробнее <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">Types of CSS boxes</a>). Также можно менять сами методы разметки такими значениями свойства <code>display</code>, как <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">CSS Grid</a> или <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</li>
- <li><strong>Floats</strong> — Применение значения {{cssxref("float")}} типа <code>left</code> может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.</li>
- <li><strong>Свойство {{cssxref("position")}} </strong>— Позволяет точно контролировать положение блоков внутри других блоков. <code>static</code> позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.</li>
- <li><strong>Макет Таблицы</strong> — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью <code>display: table</code> и соответствующих свойств.</li>
- <li><strong>Multi-column layout</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">Многоколоночный макет</a> поможет расположить содержимое столбцами, как в газетах.</li>
-</ul>
+Методы CSS, которыми вы можете управлять разметкой элементов:
 
-<h2 id="Свойство_display">Свойство display </h2>
+- **Свойство {{cssxref("display")}}** — Стандартные значения `block`, `inline` или `inline-block `могут изменять поведение элементов в обычном потоке (см.подробнее [Types of CSS boxes](/ru/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)). Также можно менять сами методы разметки такими значениями свойства `display`, как [CSS Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) или [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox).
+- **Floats** — Применение значения {{cssxref("float")}} типа `left` может заставить элемент блочного типа "прилепить" содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.
+- **Свойство {{cssxref("position")}}** — Позволяет точно контролировать положение блоков внутри других блоков. `static` позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.
+- **Макет Таблицы** — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью `display: table` и соответствующих свойств.
+- **Multi-column layout** — [Многоколоночный макет](/ru/docs/Web/CSS/CSS_Columns) поможет расположить содержимое столбцами, как в газетах.
 
-<p>Значения свойства <code>display</code> являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство <code>display</code>, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство  <code>display: block</code>. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство <code>display: inline</code>.</p>
+## Свойство display
 
-<p>Вы можете изменить дефолтное поведение display. К примеру,  {{htmlelement("li")}} отображается как <code>display: block</code> по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на <code>inline</code> они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML-элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.</p>
+Значения свойства `display` являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство `display`, влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство `display: block`. Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента {{htmlelement("a")}} по умолчанию установлено свойство `display: inline`.
 
-<p>В дополнение к возможности менять значение с <code> block</code> на <code>inline</code> и обратно, есть и другие возможности вёрстки с другими значениями  <code>display</code>. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными  для задач вёрстки страниц являются <code>display: flex</code> и <code>display: grid</code>.</p>
+Вы можете изменить дефолтное поведение display. К примеру, {{htmlelement("li")}} отображается как `display: block` по умолчанию, это означает что элементы списка отображаются один за другим в нашем документе.Если мы изменим значение display на `inline` они будут отображаться друг за другом, как это делают слова в предложении. Тот факт, что вы можете изменить значение display для любого элемента означает, что вы можете выбирать HTML-элементы по их семантическому значению, не беспокоясь о том как они будут выглядеть. То как они выглядят это то, что вы можете поменять.
 
-<h2 id="Flexbox">Flexbox</h2>
+В дополнение к возможности менять значение с `block` на `inline` и обратно, есть и другие возможности вёрстки с другими значениями `display`. Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются `display: flex` и `display: grid`.
 
-<p>Flexbox (сокращение от <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout">Flexible Box Layout</a>) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство <code>display: flex</code> для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.</p>
+## Flexbox
 
-<p>Разметка HTML, представленная ниже, состоит из элемента <code>wrapper</code>, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.</p>
+Flexbox (сокращение от [Flexible Box Layout](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout)) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство `display: flex` для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.
 
-<p>Но если мы добавим свойство <code>display: flex</code> родительскому элементу, три дочерних сгруппируются в колонки. Всё это потому что они сами становятся элементами <em>flex </em>и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Они выстраиваются в строку, потому что начальное значение  {{cssxref("flex-direction")}} это <code>row</code>. Высота становится равной высоте самого высокого элемента, потому что начальное значение {{cssxref("align-items")}} установлено как <code>stretch</code>. Это значит, элементы вытягиваются по высоте контейнера, который в этом случае сам принимает высоту самого высокого элемента. Все они группируются в начале контейнера, оставляя пустое пространство в конце строки.</p>
+Разметка HTML, представленная ниже, состоит из элемента `wrapper`, включающего в себя три {{htmlelement("div")}} элемента. По умолчанию все они будут изображаться как блочные, один под другим.
 
-<div id="Flex_1">
-<div class="hidden">
-<h6 id="Flexbox_Example_1">Flexbox Example 1</h6>
+Но если мы добавим свойство `display: flex` родительскому элементу, три дочерних сгруппируются в колонки. Всё это потому что они сами становятся элементами _flex_ и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Они выстраиваются в строку, потому что начальное значение {{cssxref("flex-direction")}} это `row`. Высота становится равной высоте самого высокого элемента, потому что начальное значение {{cssxref("align-items")}} установлено как `stretch`. Это значит, элементы вытягиваются по высоте контейнера, который в этом случае сам принимает высоту самого высокого элемента. Все они группируются в начале контейнера, оставляя пустое пространство в конце строки.
 
-<pre class="brush: css">* {box-sizing: border-box;}
+```css hidden
+* {box-sizing: border-box;}
 
-.wrapper &gt; div {
+.wrapper > div {
     border-radius: 5px;
     background-color: rgb(207,232,220);
     padding: 1em;
 }
-    </pre>
-</div>
 
-<pre class="brush: css">.wrapper {
+```
+
+```css
+.wrapper {
   display: flex;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-  &lt;div class="box1"&gt;One&lt;/div&gt;
-  &lt;div class="box2"&gt;Two&lt;/div&gt;
-  &lt;div class="box3"&gt;Three&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+  <div class="box1">One</div>
+  <div class="box2">Two</div>
+  <div class="box3">Three</div>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Flex_1', '300', '200') }}</p>
+{{ EmbedLiveSample('Flex_1', '300', '200') }}
 
-<p>В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.</p>
+В дополнение к свойствам, применяемым к контейнеру, существуют свойства, применяемые ко вложенным элементам. Эти свойства помимо всего прочего, могут менять размеры элемента, растягивая его и заставляя занимать всё доступное место.
 
-<p>В качестве простого примера, добавим свойство {{cssxref("flex")}}  ко всем дочерним элементам, со значением <code>1</code>. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы  станут меньше, для того, чтобы все они были одного размера.</p>
+В качестве простого примера, добавим свойство {{cssxref("flex")}} ко всем дочерним элементам, со значением `1`. Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится - элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.
 
-<div id="Flex_2">
-<div class="hidden">
-<h6 id="Flexbox_Example_2">Flexbox Example 2</h6>
+```css hidden
+    * {box-sizing: border-box;}
 
-<pre class="brush: css">    * {box-sizing: border-box;}
-
-    .wrapper &gt; div {
+    .wrapper > div {
         border-radius: 5px;
         background-color: rgb(207,232,220);
         padding: 1em;
     }
-    </pre>
-</div>
 
-<pre class="brush: css">.wrapper {
+```
+
+```css
+.wrapper {
     display: flex;
 }
 
-.wrapper &gt; div {
+.wrapper > div {
     flex: 1;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-    &lt;div class="box1"&gt;One&lt;/div&gt;
-    &lt;div class="box2"&gt;Two&lt;/div&gt;
-    &lt;div class="box3"&gt;Three&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Flex_2', '300', '200') }}</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>.</p>
-</div>
+{{ EmbedLiveSample('Flex_2', '300', '200') }}
 
-<h2 id="Grid_Layout">Grid Layout</h2>
+> **Примечание:** Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox).
 
-<p>В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.</p>
+## Grid Layout
 
-<p>Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — <code>display: grid</code>. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по <code>1fr</code> и два ряда по <code>100px</code>. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.</p>
+В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.
 
-<div id="Grid_1">
-<div class="hidden">
-<h6 id="Grid_example_1">Grid example 1</h6>
+Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — `display: grid`. Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства {{cssxref("grid-template-rows")}} и {{cssxref("grid-template-columns")}} соответственно. Мы определили три столбца каждый по `1fr` и два ряда по `100px`. Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.
 
-<pre class="brush: css">    * {box-sizing: border-box;}
+```css hidden
+    * {box-sizing: border-box;}
 
-    .wrapper &gt; div {
+    .wrapper > div {
         border-radius: 5px;
         background-color: rgb(207,232,220);
         padding: 1em;
     }
-    </pre>
-</div>
 
-<pre class="brush: css">.wrapper {
+```
+
+```css
+.wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 100px 100px;
     grid-gap: 10px;
 }
-</pre>
-
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-    &lt;div class="box1"&gt;One&lt;/div&gt;
-    &lt;div class="box2"&gt;Two&lt;/div&gt;
-    &lt;div class="box3"&gt;Three&lt;/div&gt;
-    &lt;div class="box4"&gt;Four&lt;/div&gt;
-    &lt;div class="box5"&gt;Five&lt;/div&gt;
-    &lt;div class="box6"&gt;Six&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```
+
+```html
+<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
+    <div class="box4">Four</div>
+    <div class="box5">Five</div>
+    <div class="box6">Six</div>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Grid_1', '300', '330') }}</p>
-
-<p>Когда у вас есть сетка (grid), мы можете точно размещать на ней свои элементы, а не полагаться на поведение авто-размещения, отмеченного выше. Ниже во втором примере мы задали ту же сетку, но в этот раз с тремя дочерними элементами. Мы задали начало и конец линии каждого элемента используя свойства {{cssxref("grid-column")}} и {{cssxref("grid-row")}}. Это заставляет элементы охватывать несколько дорожек.</p>
+{{ EmbedLiveSample('Grid_1', '300', '330') }}
 
-<div id="Grid_2">
-<div class="hidden">
-<h6 id="Grid_example_2">Grid example 2</h6>
+Когда у вас есть сетка (grid), мы можете точно размещать на ней свои элементы, а не полагаться на поведение авто-размещения, отмеченного выше. Ниже во втором примере мы задали ту же сетку, но в этот раз с тремя дочерними элементами. Мы задали начало и конец линии каждого элемента используя свойства {{cssxref("grid-column")}} и {{cssxref("grid-row")}}. Это заставляет элементы охватывать несколько дорожек.
 
-<pre class="brush: css">    * {box-sizing: border-box;}
+```css hidden
+    * {box-sizing: border-box;}
 
-    .wrapper &gt; div {
+    .wrapper > div {
         border-radius: 5px;
         background-color: rgb(207,232,220);
         padding: 1em;
     }
-    </pre>
-</div>
 
-<pre class="brush: css">.wrapper {
+```
+
+```css
+.wrapper {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     grid-template-rows: 100px 100px;
@@ -239,44 +214,37 @@ translation_of: Learn/CSS/CSS_layout/Introduction
     grid-row: 2;
     grid-column: 3;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="wrapper"&gt;
-    &lt;div class="box1"&gt;One&lt;/div&gt;
-    &lt;div class="box2"&gt;Two&lt;/div&gt;
-    &lt;div class="box3"&gt;Three&lt;/div&gt;
-&lt;/div&gt;
-</pre>
+```html
+<div class="wrapper">
+    <div class="box1">One</div>
+    <div class="box2">Two</div>
+    <div class="box3">Three</div>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Grid_2', '300', '330') }}</p>
+{{ EmbedLiveSample('Grid_2', '300', '330') }}
 
-<div class="note">
-<p><strong>Примечание</strong>: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid Layout</a>.</p>
-</div>
-
-<p>Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но всё равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.</p>
+> **Примечание:** Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью [Grid Layout](/ru/docs/Learn/CSS/CSS_layout/Grids).
 
-<h2 id="Floats">Floats</h2>
+Остальная часть этого руководства освещает другие методы разметок, которые менее важны для основной структуры разметки вашей страницы, но всё равно могут помочь вам в достижении определённых задач. Понимая природу задачи каждой разметки, вы вскоре обнаружите, что, глядя на конкретный компонент вашего дизайна, часто будет ясно какой тип разметки подходит лучше всего.
 
-<p>Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.</p>
+## Floats
 
-<p>Свойство {{cssxref("float")}} имеет четыре возможных значения:</p>
+Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.
 
-<ul>
- <li><code>left</code> — Элемент выравнивается слева и другие элементы обтекают его справа.</li>
- <li><code>right</code> — Элемент выравнивается справа и другие элементы обтекают его слева.</li>
- <li><code>none</code> — Не задаёт float совсем. Это значение по умолчанию.</li>
- <li><code>inherit</code> — Определяет, что значение свойства <code>float</code> должно быть унаследовано от родительского элемента.</li>
-</ul>
+Свойство {{cssxref("float")}} имеет четыре возможных значения:
 
-<p>В примере ниже мы задаём элементу <code>&lt;div&gt;</code> float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.</p>
+- `left` — Элемент выравнивается слева и другие элементы обтекают его справа.
+- `right` — Элемент выравнивается справа и другие элементы обтекают его слева.
+- `none` — Не задаёт float совсем. Это значение по умолчанию.
+- `inherit` — Определяет, что значение свойства `float` должно быть унаследовано от родительского элемента.
 
-<div id="Float_1">
-<div class="hidden">
-<h6 id="Floats_example">Floats example</h6>
+В примере ниже мы задаём элементу `<div>` float - left и даём {{cssxref("margin")}} с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.
 
-<pre class="brush: css">body {
+```css hidden
+body {
     width: 90%;
     max-width: 900px;
     margin: 0 auto;
@@ -293,62 +261,59 @@ p {
     padding: 10px;
     border-radius: 5px;
 }
-</pre>
-</div>
-
-<pre class="brush: html">&lt;h1&gt;Simple float example&lt;/h1&gt;
+```
 
-&lt;div class="box"&gt;Float&lt;/div&gt;
+```html
+<h1>Simple float example</h1>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<div class="box">Float</div>
 
-</pre>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+```
 
-<pre class="brush: css">
+```css
 .box {
     float: left;
     width: 150px;
     height: 150px;
     margin-right: 30px;
 }
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Float_1', '100%', 600) }}</p>
+{{ EmbedLiveSample('Float_1', '100%', 600) }}
 
-<div class="note">
-<p><strong>Примечание</strong>: Float полностью объяснён в нашем уроке по свойствам <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">float и clear</a>. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">устаревшим методам разметки</a>.</p>
-</div>
+> **Примечание:** Float полностью объяснён в нашем уроке по свойствам [float и clear](/ru/docs/Learn/CSS/CSS_layout/Floats). До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по [устаревшим методам разметки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods).
 
-<h2 id="Методы_позиционирования">Методы позиционирования</h2>
+## Методы позиционирования
 
-<p>Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.</p>
+Позиционирование позволяет вам перемещать элементы с места, где бы они располагались при нормальном потоке в другую локацию. Позиционирование не является методом создания основной разметки страницы, это больше об управлении и точной настройке положения определённых элементов на странице.
 
-<p>Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока  и того, что значит вывести элемент из нормального потока.</p>
+Однако, существуют полезные методы точной разметки шаблонов, которые полагаются на свойство {{cssxref("position")}}. Понимание позиционирования также способствует пониманию нормального потока и того, что значит вывести элемент из нормального потока.
 
-<p>Существует пять типов позиционирования о которых вам следует знать:</p>
+Существует пять типов позиционирования о которых вам следует знать:
 
-<ul>
- <li><strong>Static positioning (статическое позиционирование)</strong> — умолчание, которое получают все элементы — это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".</li>
- <li><strong>Relative positioning (относительное позиционирование) </strong>позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.</li>
- <li><strong>Absolute positioning (абсолютное позиционирование) </strong>полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв <code>&lt;html&gt;</code> элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки,  в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.</li>
- <li><strong>Fixed positioning (фиксированное позиционирование) </strong>очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.</li>
- <li><strong>Sticky positioning (липкое позиционирование) </strong>это новый метод позиционирования, который заставляет элемент вести себя как <code>position: static</code> пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как <code>position: fixed</code>.</li>
-</ul>
+- **Static positioning (статическое позиционирование)** — умолчание, которое получают все элементы — это всё лишь значит "поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть".
+- **Relative positioning (относительное позиционирование)** позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.
+- **Absolute positioning (абсолютное позиционирование)** полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв `<html>` элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
+- **Fixed positioning (фиксированное позиционирование)** очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
+- **Sticky positioning (липкое позиционирование)** это новый метод позиционирования, который заставляет элемент вести себя как `position: static` пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как `position: fixed`.
 
-<h3 id="Пример_простого_позиционирования">Пример простого позиционирования</h3>
+### Пример простого позиционирования
 
-<p>Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:</p>
+Для ознакомления с этими методами вёрстки, мы покажем вам пару быстрых примеров. Наши примеры будут иметь одинаковый HTML, который выглядит следующим образом:
 
-<pre class="brush: html">&lt;h1&gt;Positioning&lt;/h1&gt;
+```html
+<h1>Positioning</h1>
 
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;
-&lt;p class="positioned"&gt;I am a basic block level element.&lt;/p&gt;
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+<p>I am a basic block level element.</p>
+<p class="positioned">I am a basic block level element.</p>
+<p>I am a basic block level element.</p>
+```
 
-<p>Этот HTML по умолчанию будет стилизован, используя следующий CSS:</p>
+Этот HTML по умолчанию будет стилизован, используя следующий CSS:
 
-<pre class="brush: css">body {
+```css
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -360,37 +325,38 @@ p {
     margin: 10px;
     border-radius: 5px;
 }
-</pre>
+```
 
-<p>Результат выглядит следующим образом:</p>
+Результат выглядит следующим образом:
 
-<p>{{ EmbedLiveSample('Пример_простого_позиционирования', '100%', 300) }}</p>
+{{ EmbedLiveSample('Пример_простого_позиционирования', '100%', 300) }}
 
-<h3 id="Relative_positioning">Relative positioning</h3>
+### Relative positioning
 
-<p>Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.</p>
+Относительное (Relative) позиционирование позволяет вам смещать элемент относительно положения, которое он бы имел по умолчанию в нормальном потоке. Это значит, что вы можете выполнить такую задачу как перемещение иконки немного вниз, так чтобы он был на одной линии с текстовой меткой. Чтобы сделать это, мы можем добавить следующее правило для добавления относительного позиционирования.
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
   position: relative;
   top: 30px;
   left: 30px;
-}</pre>
-
-<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>relative</code> — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.</p>
+}
+```
 
-<p>Добавление этого кода даст следующий результат:</p>
+Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением `relative` — сам по себе он ничего не делает, поэтому мы также добавляем свойства {{cssxref("top")}} и {{cssxref("left")}}. Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.
 
-<div id="Relative_1">
-<div class="hidden">
-<h6 id="Relative_positioning_example">Relative positioning example</h6>
+Добавление этого кода даст следующий результат:
 
-<pre class="brush: html">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+```html hidden
+<h1>Relative positioning</h1>
 
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;
-&lt;p class="positioned"&gt;This is my relatively positioned element.&lt;/p&gt;
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+<p>I am a basic block level element.</p>
+<p class="positioned">This is my relatively positioned element.</p>
+<p>I am a basic block level element.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -402,45 +368,46 @@ p {
     margin: 10px;
     border-radius: 5px;
 }
-</pre>
-</div>
+```
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
   position: relative;
   background: rgba(255,84,104,.3);
   border: 2px solid rgb(255,84,104);
   top: 30px;
   left: 30px;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Relative_1', '100%', 300) }}</p>
+{{ EmbedLiveSample('Relative_1', '100%', 300) }}
 
-<h3 id="Absolute_positioning">Absolute positioning</h3>
+### Absolute positioning
 
-<p>Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.</p>
+Абсолютное (Absolute) позиционирование используется чтобы полностью удалить элемент из нормального потока и разместить его, используя смещение от краёв содержащего блока.
 
-<p>Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:</p>
+Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
   position: absolute;
   top: 30px;
   left: 30px;
-}</pre>
-
-<p>Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением <code>absolute</code>, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:</p>
+}
+```
 
-<div id="Absolute_1">
-<div class="hidden">
-<h6 id="Absolute_positioning_example">Absolute positioning example</h6>
+Здесь мы даём нашему среднему параграфу {{cssxref("position")}} со значением `absolute`, и все те же свойства {{cssxref("top")}} и {{cssxref("left")}} как ранее. Однако, добавление этого кода даст следующий результат:
 
-<pre class="brush: html">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+```html hidden
+<h1>Absolute positioning</h1>
 
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;
-&lt;p class="positioned"&gt;This is my absolutely positioned element.&lt;/p&gt;
-&lt;p&gt;I am a basic block level element.&lt;/p&gt;</pre>
+<p>I am a basic block level element.</p>
+<p class="positioned">This is my absolutely positioned element.</p>
+<p>I am a basic block level element.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -452,54 +419,52 @@ p {
     margin: 10px;
     border-radius: 5px;
 }
-</pre>
-</div>
+```
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
     position: absolute;
     background: rgba(255,84,104,.3);
     border: 2px solid rgb(255,84,104);
     top: 30px;
     left: 30px;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Absolute_1', '100%', 300) }}</p>
-
-<p>Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">позиционированию</a>.</p>
+}
+```
 
-<h3 id="Fixed_positioning">Fixed positioning</h3>
+{{ EmbedLiveSample('Absolute_1', '100%', 300) }}
 
-<p>Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остаётся зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остаётся зафиксированным пока страница прокручивается под ним.</p>
+Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства {{cssxref("top")}} и {{cssxref("left")}} имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по [позиционированию](/ru/docs/Learn/CSS/CSS_layout/Positioning).
 
-<p>Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим <code>position: fixed</code>.</p>
+### Fixed positioning
 
-<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+Фиксированное (Fixed) позиционирование удаляет наш элемент из потока документа так же, как и абсолютное позиционирование. Однако, вместо смещения применяемого относительно контейнера, оно применяется относительно окна просмотра. Поскольку элемент остаётся зафиксированным относительно окна просмотра, мы можем создавать такие эффекты как меню, которое остаётся зафиксированным пока страница прокручивается под ним.
 
-&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим `position: fixed`.
 
-&lt;p&gt;Paragraph 1.&lt;/p&gt;
-&lt;p&gt;Paragraph 2.&lt;/p&gt;
-&lt;p&gt;Paragraph 3.&lt;/p&gt;
-</pre>
+```html
+<h1>Fixed positioning</h1>
 
-<div id="Fixed_1">
-<div class="hidden">
-<h6 id="Fixed_positioning_example">Fixed positioning example</h6>
+<div class="positioned">Fixed</div>
 
-<pre class="brush: html">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+<p>Paragraph 1.</p>
+<p>Paragraph 2.</p>
+<p>Paragraph 3.</p>
+```
 
-&lt;div class="positioned"&gt;Fixed&lt;/div&gt;
+```html hidden
+<h1>Fixed positioning</h1>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<div class="positioned">Fixed</div>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-</pre>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
     width: 500px;
     margin: 0 auto;
 }
@@ -510,37 +475,37 @@ p {
     padding: 10px;
     margin: 10px;
     border-radius: 5px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
     position: fixed;
     top: 30px;
     left: 30px;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Fixed_1', '100%', 200) }}</p>
+}
+```
 
-<h3 id="Sticky_positioning">Sticky positioning</h3>
+{{ EmbedLiveSample('Fixed_1', '100%', 200) }}
 
-<p>Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет <code>position: sticky</code> он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применён <code>position: fixed</code>.</p>
+### Sticky positioning
 
-<div id="Sticky_1">
-<div class="hidden">
-<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет `position: sticky` он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) "прилипает", как если бы был применён `position: fixed`.
 
-<pre class="brush: html">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+```html hidden
+<h1>Sticky positioning</h1>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+<div class="positioned">Sticky</div>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -551,53 +516,55 @@ p {
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css">.positioned {
+```css
+.positioned {
   position: sticky;
   top: 30px;
   left: 30px;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
+{{ EmbedLiveSample('Sticky_1', '100%', 200) }}
 
-<div class="note">
-<p><strong>Примечание</strong>: чтобы узнать больше о позиционировании, см. нашу статью <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование.</a></p>
-</div>
+> **Примечание:** чтобы узнать больше о позиционировании, см. нашу статью [Позиционирование.](/ru/docs/Learn/CSS/CSS_layout/Positioning)
 
-<h2 id="Макет_таблицы">Макет таблицы</h2>
+## Макет таблицы
 
-<p>HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже базовый CSS надёжно поддерживался в браузерах — веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).</p>
+HTML таблицы хороши для отображения табличных данных, но много лет назад — до того, как даже базовый CSS надёжно поддерживался в браузерах — веб-разработчики также использовали таблицы для разметки всей веб-страницы — размещая свои заголовки, нижние колонтитулы, различные колонки и т.д. в разных строках и столбцах таблиц. Это работало в то время, но оно имеет много проблем — разметка таблиц не гибкая, очень тяжёлая в вёрстке, сложна в отладке, и семантически не верная. (например, пользователи скринридеров имеют проблемы с навигацией в табличном макете).
 
-<p>То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».</p>
+То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».
 
-<p>Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.</p>
+Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.
 
-<p>Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.</p>
+Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в {{htmlelement("div")}}, для целей вёрстки.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;First of all, tell us your name and age.&lt;/p&gt;
-  &lt;div&gt;
-    &lt;label for="fname"&gt;First name:&lt;/label&gt;
-    &lt;input type="text" id="fname"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="lname"&gt;Last name:&lt;/label&gt;
-    &lt;input type="text" id="lname"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="age"&gt;Age:&lt;/label&gt;
-    &lt;input type="text" id="age"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <p>First of all, tell us your name and age.</p>
+  <div>
+    <label for="fname">First name:</label>
+    <input type="text" id="fname">
+  </div>
+  <div>
+    <label for="lname">Last name:</label>
+    <input type="text" id="lname">
+  </div>
+  <div>
+    <label for="age">Age:</label>
+    <input type="text" id="age">
+  </div>
+</form>
+```
 
-<p>А теперь CSS для нашего примера. Большая часть CSS довольно обычна, за исключением использования свойства {{cssxref("display")}}. {{htmlelement("form")}}-е, {{htmlelement("div")}}-ам, а также {{htmlelement("label")}}-ам и {{htmlelement("input")}}-ам было сказано отображать как таблица, табличные строки и табличные ячейки соответственно — в принципе, они будут вести себя как разметка HTML таблицы, заставляя label-ы and input-ы красиво выравниваться по умолчанию. Все что мы должны будем сделать это добавить немного размеров, margin и т.д., чтобы все выглядело красивей, и на этом мы закончили.</p>
+А теперь CSS для нашего примера. Большая часть CSS довольно обычна, за исключением использования свойства {{cssxref("display")}}. {{htmlelement("form")}}-е, {{htmlelement("div")}}-ам, а также {{htmlelement("label")}}-ам и {{htmlelement("input")}}-ам было сказано отображать как таблица, табличные строки и табличные ячейки соответственно — в принципе, они будут вести себя как разметка HTML таблицы, заставляя label-ы and input-ы красиво выравниваться по умолчанию. Все что мы должны будем сделать это добавить немного размеров, margin и т.д., чтобы все выглядело красивей, и на этом мы закончили.
 
-<p>Вы заметите, что параграфу с описанием дано <code>display: table-caption;</code> — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а <code>caption-side: bottom;</code> для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до <code>&lt;input&gt;</code> элементов в источнике. Это обеспечивает гибкостью.</p>
+Вы заметите, что параграфу с описанием дано `display: table-caption;` — что заставляет его вести себя как табличный {{htmlelement("caption")}} — а `caption-side: bottom;` для того чтобы указать описанию располагаться снизу таблицы в целях дизайна, не смотря на то что разметка находится до `<input>` элементов в источнике. Это обеспечивает гибкостью.
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -631,75 +598,75 @@ form p {
   width: 300px;
   color: #999;
   font-style: italic;
-}</pre>
+}
+```
 
-<p>Это даёт нам следующий результат:</p>
+Это даёт нам следующий результат:
 
-<p>{{ EmbedLiveSample('Макет_таблицы', '100%', '170') }}</p>
+{{ EmbedLiveSample('Макет_таблицы', '100%', '170') }}
 
-<p>Также вы можете посмотреть этот живой пример на <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">css-tables-example.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">исходный код</a>.)</p>
+Также вы можете посмотреть этот живой пример на [css-tables-example.html](https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html) (смотрите также [исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html).)
 
-<h2 id="Многоколоночный_макет">Многоколоночный макет</h2>
+## Многоколоночный макет
 
-<p>Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.</p>
+Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.
 
-<p>Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.</p>
+Чтобы превратить блок в многоколоночный контейнер мы используем свойство {{cssxref("column-count")}}, которое говорит браузеру сколько колонок мы хотим иметь, либо свойство {{cssxref("column-width")}}, которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.
 
-<p>В примере ниже мы начинаем с HTML блоком, который содержится в элементе <code>&lt;div&gt;</code> с классом <code>container</code>.</p>
+В примере ниже мы начинаем с HTML блоком, который содержится в элементе `<div>` с классом `container`.
 
-<pre class="brush: html">&lt;div class="container"&gt;
-    &lt;h1&gt;Multi-column layout&lt;/h1&gt;
+```html
+<div class="container">
+    <h1>Multi-column layout</h1>
 
-    &lt;p&gt;Paragraph 1.&lt;/p&gt;
-    &lt;p&gt;Paragraph 2.&lt;/p&gt;
+    <p>Paragraph 1.</p>
+    <p>Paragraph 2.</p>
 
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<p>Мы используем <code>column-width</code> 200 px для этого контейнера, заставляя браузер создавать столько 200 пиксельных столбцов, сколько уместится в этом контейнере и затем разделить оставшееся пространство между созданными столбцами.</p>
+Мы используем `column-width` 200 px для этого контейнера, заставляя браузер создавать столько 200 пиксельных столбцов, сколько уместится в этом контейнере и затем разделить оставшееся пространство между созданными столбцами.
 
-<div id="Multicol_1">
-<div class="hidden">
-<h6 id="Multicol_example">Multicol example</h6>
+```html hidden
+    <div class="container">
+        <h1>Multi-column Layout</h1>
 
-<pre class="brush: html">    &lt;div class="container"&gt;
-        &lt;h1&gt;Multi-column Layout&lt;/h1&gt;
+        <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-        &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
 
+        <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-        &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+    </div>
 
-    &lt;/div&gt;
-        </pre>
+```
 
-<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre>
-</div>
+```css hidden
+body { max-width: 800px; margin: 0 auto; }
+```
 
-<pre class="brush: css">    .container {
+```css
+    .container {
         column-width: 200px;
-    }</pre>
-</div>
+    }
+```
 
-<p>{{ EmbedLiveSample('Multicol_1', '100%', 200) }}</p>
+{{ EmbedLiveSample('Multicol_1', '100%', 200) }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Эта статья предоставила короткое обобщение всех методов макетов о которых вам следует знать. Читайте далее для получения дополнительной информации по каждому методу!</p>
+Эта статья предоставила короткое обобщение всех методов макетов о которых вам следует знать. Читайте далее для получения дополнительной информации по каждому методу!
 
-<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p>
+{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS вёрстку</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Многоколоночный макет</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы вёрстки</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Оценка понимания базовых макетов</a></li>
-</ul>
+- [Введение в CSS вёрстку](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Многоколоночный макет](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Устаревшие методы вёрстки](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Оценка понимания базовых макетов](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/multicol_skills/index.md b/files/ru/learn/css/css_layout/multicol_skills/index.md
index 3a5eb3791ea41c..d3411dc29b0b5f 100644
--- a/files/ru/learn/css/css_layout/multicol_skills/index.md
+++ b/files/ru/learn/css/css_layout/multicol_skills/index.md
@@ -4,76 +4,62 @@ slug: Learn/CSS/CSS_layout/Multicol_skills
 translation_of: Learn/CSS/CSS_layout/Multicol_skills
 original_slug: Learn/CSS/CSS_layout/Навыки_Multicol
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
+Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout). Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.
 
+> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), or [Glitch](https://glitch.com/) чтобы проработать задания.
+>
+> Если вы застрянете, попросите нас о помощи — см. раздел [Оценка и дальнейшая помощь](#оценка_и_дальнейшая_помощь) в конце страницы.
 
-<p>Цель этого задания — чтобы вы поработали с CSS свойствами {{CSSxRef("column-count")}}, {{CSSxRef("column-width")}}, {{CSSxRef("column-gap")}}, {{CSSxRef("column-span")}} и {{CSSxRef("column-rule")}} и со значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>. Вы будете работать над тремя небольшими задачами, использующими различные элементы из пройденного материала.</p>
+## Multicol Раз
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.
 
-<p>Если вы застрянете, попросите нас о помощи — см. раздел <a href="#оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</a> в конце страницы.</p>
-</div>
+![Three columns of text](https://mdn.mozillademos.org/files/17081/multicol-task1.png)
 
-<h2 id="Multicol_Раз">Multicol Раз</h2>
+Попробуйте обновить живой пример ниже для воссоздания законченного примера:
 
-<p>В этом задании вам необходимо создать три столбца с отступом 50px между каждый столбцом.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}
 
-<p><img alt="Three columns of text" src="https://mdn.mozillademos.org/files/17081/multicol-task1.png" style="height: 722px; width: 1226px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой пример ниже для воссоздания законченного примера:</p>
+## Multicol Два
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol1.html", '100%', 1000)}}</p>
+Создайте столбцы с минимальной шириной 200px.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol1-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.
 
-<h2 id="Multicol_Два">Multicol Два</h2>
+![Three columns of text with a grey rule between them.](https://mdn.mozillademos.org/files/17082/multicol-task2.png)
 
-<p>Создайте столбцы с минимальной шириной 200px.</p>
+Попробуйте обновить живой код ниже для воссоздания законченного примера:
 
-<p>Затем добавьте серую линейку 5px между каждым столбцом, убедитесь, что между краями линейки и содержимым столбцов есть пространство 10px.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}
 
-<p><img alt="Three columns of text with a grey rule between them." src="https://mdn.mozillademos.org/files/17082/multicol-task2.png" style="height: 668px; width: 1222px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+## Multicol Три
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol2.html", '100%', 1000)}}</p>
+Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol2-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+![Three columns of text with a heading and subheading spanning all three in the middle.](https://mdn.mozillademos.org/files/17083/multicol-task3.png)
 
-<h2 id="Multicol_Три">Multicol Три</h2>
+Попробуйте обновить живой код ниже для воссоздания законченного примера:
 
-<p>Заставьте элемент содержащий заголовок и подзаголовок растянуться через все столбцы так чтоб это выглядело как на картинке</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}
 
-<p><img alt="Three columns of text with a heading and subheading spanning all three in the middle." src="https://mdn.mozillademos.org/files/17083/multicol-task3.png" style="height: 871px; width: 1222px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html) чтобы работать в вашем собственном или онлайн редакторе.
 
-<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+## Оценка и дальнейшая помощь
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/multicol/multicol3.html", '100%', 1000)}}</p>
+Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/multicol/multicol3-download.html">загрузите отправную точку этого задания</a> чтобы работать в вашем собственном или онлайн редакторе.</p>
-</div>
+Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:
 
-<h2 id="Оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</h2>
+1.  Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/). Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
+2.  Напишите пост с просьбой оценки и/или помощи на [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
 
-<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
-
-<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
-
-<ol>
- <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как  <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
- <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".</li>
-   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
-   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
-   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+    - Описательный заголовок такой как "Требуется оценка проверки навыков по Multicol задание 1".
+    - Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
+    - Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
+    - Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.md b/files/ru/learn/css/css_layout/multiple-column_layout/index.md
index 8089368558f50e..dc33d3e6a0891f 100644
--- a/files/ru/learn/css/css_layout/multiple-column_layout/index.md
+++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.md
@@ -4,156 +4,139 @@ slug: Learn/CSS/CSS_layout/Multiple-column_Layout
 translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout
 original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_столбцами
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div>
+Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.
 
-<p class="summary">Спецификация макет с несколькими столбцами даёт вам метод вёрстки контента по столбцам, точно также как вы можете видеть в газете. Эта статья объясняет, как использовать эту функцию.</p>
+| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.                                                                          |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>
-    <p>Изучить как создавать макет с несколькими столбцами на веб-страницах, такой как вы можете найти в газете.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Базовый пример
 
-<h2 id="Базовый_пример">Базовый пример</h2>
+Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый _multicol._ Вы можете следовать за нами [скачав файл отправной точки multicol](https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html) и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.
 
-<p>Сейчас мы будем изучать как использовать макет с несколькими столбцами, часто называемый <em>multicol. </em>Вы можете следовать за нами <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">скачав файл отправной точки multicol</a> и добавлять CSS в соответствующие места. В конце раздела вы можете посмотреть живой пример того, как конечный код должен выглядеть.</p>
+Наша отправная точка содержит немного очень простого HTML; обёртка с классом `container` внутри которого имеется заголовок и несколько параграфов.
 
-<p>Наша отправная точка содержит немного очень простого HTML; обёртка с классом <code>container</code> внутри которого имеется заголовок и несколько параграфов.</p>
+{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству `column-count` столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:
 
-<p>{{htmlelement("div")}} с классом контейнер станет нашим multicol контейнером. Мы включаем multicol используя одно из двух свойств {{cssxref("column-count")}} или {{cssxref("column-width")}}. Какое значение вы дадите свойству <code>column-count</code> столько столбцов он и создаст, поэтому если вы добавите следующий CSS в ваши стили и перезагрузите страницу, то получите три столбца:</p>
-
-<pre class="brush: css">.container {
+```css
+.container {
   column-count: 3;
 }
-</pre>
-
-<p>Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.</p>
+```
 
-<div id="Multicol_1">
-<div class="hidden">
-<h6 id="column-count_example">column-count example</h6>
+Колонки, которые вы создаёте имеют гибкую ширину — браузер решает какое пространство назначить каждому столбцу.
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: .9em/1.2 Arial, Helvetica, sans-serif;
 }
-    </pre>
-</div>
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+```
+
+```html
+<div class="container">
+  <h1>Simple multicol example</h1>
 
-  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
   Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
   Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
   ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
   elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
   cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-&lt;/div&gt;
-</pre>
+  dis parturient montes, nascetur ridiculus mus.</p>
+</div>
+```
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-count: 3;
 }
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Multicol_1', '100%', 400) }}</p>
+{{ EmbedLiveSample('Multicol_1', '100%', 400) }}
 
-<p>Измените ваш CSS чтобы использовать следующий <code>column-width</code>:</p>
+Измените ваш CSS чтобы использовать следующий `column-width`:
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-width: 200px;
 }
-</pre>
+```
 
-<p>Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.</p>
+Теперь браузер будет давать столько столбцов размером, который вы определили, сколько он сможет; любое оставшееся пространство далее делится между существующими столбцами. Это значит, что вы не получите точную ширину, которую вы задали, только если ваш контейнер не делится точно на эту ширину.
 
-<div id="Multicol_2">
-<div class="hidden">
-<h6 id="column-width_example">column-width example</h6>
-
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: .9em/1.2 Arial, Helvetica, sans-serif;
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+```html hidden
+<div class="container">
+  <h1>Simple multicol example</h1>
 
-  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
   Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
   Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
   ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
   elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
   cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-&lt;/div&gt;</pre>
+  dis parturient montes, nascetur ridiculus mus.</p>
 </div>
+```
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-width: 200px;
 }
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Multicol_2', '100%', 400) }}</p>
+{{ EmbedLiveSample('Multicol_2', '100%', 400) }}
 
-<h2 id="Стилизация_столбцов">Стилизация столбцов</h2>
+## Стилизация столбцов
 
-<p>Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:</p>
+Столбцы, созданные при помощи multicol не могут быть стилизованы по одному. Нет способа сделать один столбец больше, чем другие, или изменить фон или цвет текста одного столбца. У вас есть две возможности изменить способ отображения столбцов:
 
-<ul>
- <li>Изменение размера отступов между столбцами используя {{cssxref("column-gap")}}.</li>
- <li>Добавление линейки между столбцами при помощи {{cssxref("column-rule")}}.</li>
-</ul>
+- Изменение размера отступов между столбцами используя {{cssxref("column-gap")}}.
+- Добавление линейки между столбцами при помощи {{cssxref("column-rule")}}.
 
-<p>Используя ваш пример выше, измените размер отступа добавлением свойства <code>column-gap</code>:</p>
+Используя ваш пример выше, измените размер отступа добавлением свойства `column-gap`:
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-width: 200px;
   column-gap: 20px;
-}</pre>
+}
+```
 
-<p>Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи <code>column-rule</code>. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, <code>column-rule</code> — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и <code>border</code>.</p>
+Вы можете поиграть с разными значениями — свойство принимает любые единицы измерения длины. Теперь добавьте линейку между столбцами при помощи `column-rule`. Таким же способом как и свойство {{cssxref("border")}} с которым вы сталкивались в предыдущих уроках, `column-rule` — это короткая запись {{cssxref("column-rule-color")}}, {{cssxref("column-rule-style")}} и {{cssxref("column-rule-width")}} и принимает те же значения что и `border`.
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-count: 3;
   column-gap: 20px;
   column-rule: 4px dotted rgb(79, 185, 227);
-}</pre>
-
-<p>Попробуйте добавить линейки других стилей и цветов.</p>
+}
+```
 
-<div id="Multicol_3">
-<div class="hidden">
-<h6 id="Styling_the_columns">Styling the columns</h6>
+Попробуйте добавить линейки других стилей и цветов.
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -163,42 +146,38 @@ original_slug: Learn/CSS/CSS_layout/Макет_с_несколькими_сто
  column-count: 3;
  column-gap: 20px;
  column-rule: 4px dotted rgb(79, 185, 227);
-}</pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+```html hidden
+<div class="container">
+  <h1>Simple multicol example</h1>
 
-  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
   Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
   Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
   ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
   elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
   cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-&lt;/div&gt;</pre>
-</div>
+  dis parturient montes, nascetur ridiculus mus.</p>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Multicol_3', '100%', 400) }}</p>
+{{ EmbedLiveSample('Multicol_3', '100%', 400) }}
 
-<p>Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи <code>column-gap</code>. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер <code>column-gap</code>.</p>
+Следует обратить внимание на то, что линейка не занимает никакой ширины. Она располагается в промежутках, которые вы создали при помощи `column-gap`. Чтобы придать больше пространства по обе стороны от линейки, вам нужно увеличить размер `column-gap`.
 
-<h2 id="Свойств_column-span">Свойств column-span</h2>
+## Свойств column-span
 
-<p>Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение <code>all</code>.</p>
+Вы можете заставить элемент растянуться через все столбцы. В этом случае контент разрывается, когда сталкивается со spanning элементом и продолжается ниже, создавая новый набор блоков столбцов. Чтобы растянуть элемент через все столбцы используйте свойство {{cssxref("column-span")}} установленное на значение `all`.
 
-<div class="blockIndicator note">
-<p>Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение <code>none</code> (по умолчанию) либо <code>all</code>.</p>
-</div>
+> **Примечание:** Обратите внимание что невозможно растянуть элемент через несколько столбцов. Это свойство может иметь либо значение `none` (по умолчанию) либо `all`.
 
-<div id="Multicol_Span">
-<div class="hidden">
-<h6 id="Spanning_the_columns">Spanning the columns</h6>
-
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
@@ -215,107 +194,106 @@ h2 {
  color: white;
  padding: .5em;
 }
-</pre>
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-  &lt;h1&gt;Simple multicol example&lt;/h1&gt;
+```html hidden
+<div class="container">
+  <h1>Simple multicol example</h1>
 
-  &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
+  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.
   Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula.
 
-  &lt;h2&gt;Spanning subhead&lt;/h2&gt;
+  <h2>Spanning subhead</h2>
   Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse
   ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit
-  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+  quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-  &lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
+  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique
   elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit
   cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis
-  dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
-&lt;/div&gt;</pre>
-</div>
+  dis parturient montes, nascetur ridiculus mus.</p>
 </div>
+```
 
-<p>{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}</p>
+{{ EmbedLiveSample('Multicol_Span', '100%', 400) }}
 
-<h2 id="Столбцы_и_фрагментация">Столбцы и фрагментация</h2>
+## Столбцы и фрагментация
 
-<p>Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.</p>
+Содержимое макета нескольких столбцов является фрагментированным. По сути, он ведёт себя так же, как контент в постраничных медиа — так же, как когда вы печатаете веб-страницы. Когда вы переводите ваш контент в multicol контейнер он фрагментируется на столбцы и контент разбивается чтобы позволить этому произойти.
 
-<p>Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.</p>
+Порой это разрывание происходит в местах, мешающих чтению. В живом примере ниже, я использовал multicol чтобы разместить несколько блоков, каждый из которых имеет заголовок и немного текста внутри. Заголовок отделяется от текста, если столбцы разделяются между ними.
 
-<div id="Multicol_4">
-<div class="hidden">
-<h6 id="Cards_example">Cards example</h6>
-
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: .9em/1.2 Arial, Helvetica, sans-serif;
-}            </pre>
-</div>
+}
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+```html
+<div class="container">
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vel, viverra egestas ligula.</p>
+    </div>
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-width: 250px;
   column-gap: 20px;
 }
@@ -325,16 +303,17 @@ h2 {
   border: 2px solid rgb(79, 185, 227);
   padding: 10px;
   margin: 0 0 1em 0;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Multicol_4', '100%', 600) }}</p>
+{{ EmbedLiveSample('Multicol_4', '100%', 600) }}
 
-<p>Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментации</a>. Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением <code>avoid</code> к правилам <code>.card</code>. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.</p>
+Для того чтобы управлять этим поведением мы можем использовать свойства из спецификации [CSS Фрагментации](/ru/docs/Web/CSS/CSS_Fragmentation). Эта спецификация даёт нам свойства для управления разрывами контента в multicol и постраничных медиа. Например, добавьте свойство {{cssxref("break-inside")}} со значением `avoid` к правилам `.card`. Это контейнер заголовка и текста и поэтому мы не хотим фрагментировать этот блок.
 
-<p>В настоящее время также стоит добавлять старое свойство <code>page-break-inside: avoid</code> для лучшей поддержки старых браузеров.</p>
+В настоящее время также стоит добавлять старое свойство `page-break-inside: avoid` для лучшей поддержки старых браузеров.
 
-<pre class="brush: css">.card {
+```css
+.card {
   break-inside: avoid;
   page-break-inside: avoid;
   background-color: rgb(207,232,220);
@@ -342,82 +321,81 @@ h2 {
   padding: 10px;
   margin: 0 0 1em 0;
 }
-</pre>
-
-<p>Перезагрузите страницу и ваши блоки должны остаться в целости.</p>
+```
 
-<div id="Multicol_5">
-<div class="hidden">
-<h6 id="Multicol_Fragmentation">Multicol Fragmentation</h6>
+Перезагрузите страницу и ваши блоки должны остаться в целости.
 
-<pre class="brush: css">body {
+```css hidden
+body {
   width: 90%;
   max-width: 900px;
   margin: 2em auto;
   font: .9em/1.2 Arial, Helvetica, sans-serif;
-}              </pre>
+}
+```
 
-<pre class="brush: html">&lt;div class="container"&gt;
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+```html hidden
+<div class="container">
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+                vel, viverra egestas ligula.</p>
+    </div>
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-    &lt;div class="card"&gt;
-      &lt;h2&gt;I am the heading&lt;/h2&gt;
-      &lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
+    <div class="card">
+      <h2>I am the heading</h2>
+      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat
                 vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies
                 tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci
-                vel, viverra egestas ligula.&lt;/p&gt;
-    &lt;/div&gt;
+                vel, viverra egestas ligula.</p>
+    </div>
 
-&lt;/div&gt;
-</pre>
 </div>
+```
 
-<pre class="brush: css">.container {
+```css
+.container {
   column-width: 250px;
   column-gap: 20px;
 }
@@ -429,41 +407,37 @@ h2 {
   border: 2px solid rgb(79, 185, 227);
   padding: 10px;
   margin: 0 0 1em 0;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Multicol_5', '100%', 600) }}</p>
+{{ EmbedLiveSample('Multicol_5', '100%', 600) }}
 
-<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>
+## Проверь свои навыки!
 
-<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills">Поверьте свои навыки: Макет с несколькими столбцами</a>.</p>
+Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшие тесты для проверки того, что вы усвоили эту информацию прежде чем, отправитесь дальше — см. [Поверьте свои навыки: Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multicol_skills).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.</p>
+Вы теперь знаете, как использовать базовые функции макета с несколькими столбцами, ещё один инструмент в вашем распоряжении при выборе метода макета для дизайна который вы строите.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS Фрагментация</a></li>
- <li><a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">Применение макета с несколькими столбцами</a></li>
-</ul>
+- [CSS Фрагментация](/ru/docs/Web/CSS/CSS_Fragmentation)
+- [Применение макета с несколькими столбцами](/ru/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts)
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
-</ul>
+- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
+- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
+- [Устаревшие методы макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/normal_flow/index.md b/files/ru/learn/css/css_layout/normal_flow/index.md
index 1d1f3dd0a220d3..24d4225681a88f 100644
--- a/files/ru/learn/css/css_layout/normal_flow/index.md
+++ b/files/ru/learn/css/css_layout/normal_flow/index.md
@@ -7,55 +7,48 @@ tags:
 translation_of: Learn/CSS/CSS_layout/Normal_Flow
 original_slug: Learn/CSS/CSS_layout/Нормальный_поток
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
 
-<p class="summary">Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.</p>
+Эта статья объясняет нормальный/базовый поток (normal flow) или способ, которым элементы страницы располагаются на веб-странице по умолчанию.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Что нужно знать прежде чем изучать:</th>
-   <td>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и понимания как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения.</td>
-  </tr>
- </tbody>
-</table>
+| Что нужно знать прежде чем изучать: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и понимания как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                               | Объяснить как браузеры размещают элементы на веб-странице по умолчанию, т.е. прежде, чем мы начнём вносить какие-либо изменения.                                                    |
 
-<p>Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.</p>
+Как говорилось ранее, элементы на веб-странице располагаются в нормальном потоке, если вы не применили к ним ни единого CSS для изменения их поведения. И, как мы уже выяснили, вы можете изменить поведение элементов либо путём изменения их положения в этом нормальном потоке, либо удалением этих элементов из этого потока. Хорошо структурированный документ, читабельный в нормальном потоке является лучшим путём начала любой веб-страницы. Это гарантирует, что ваш контент будет читабельным, даже если пользователи используют очень ограниченный браузер или устройство для чтения, которое считывает содержимое страницы. Кроме того, поскольку нормальный поток предназначен для создания читабельного документа, имейте в виду, что вы не сражаетесь с первоначальным видом документа, а работаете с ним.
 
-<p>Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов. </p>
+Прежде чем углубиться в разные способы компоновки, стоит пересмотреть некоторые из вещей, которые вы изучили в предыдущих модулях в отношении нормального потока документов.
 
-<h2 id="Как_элементы_располагаются_по_умолчанию">Как элементы располагаются по умолчанию?</h2>
+## Как элементы располагаются по умолчанию?
 
-<p>Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.</p>
+Прежде всего, индивидуальные боксы элементов располагаются в зависимости от содержимого элементов, затем добавляя какой-нибудь padding, border и margin вокруг них - это опять-таки боксовая модель, которую мы рассмотрели ранее.
 
-<p>По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Строчные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на строчные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер строчного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи <code>display: block;</code> (или даже,  <code>display: inline-block;</code>, который смешивает характеристики обоих.).</p>
+По умолчанию содержимое элемента уровня блока составляет 100% от ширины его родительского элемента и столь же высок, как и его содержимое. Строчные элементы высоки и широки, как их содержимое. Вы не можете установить ширину или высоту на строчные элементы — они просто находятся внутри содержимого элементов блочного уровня. Если вы хотите контролировать размер строчного элемента вам нужно настроить его так, чтобы он себя вёл как элемент блочного уровня при помощи `display: block;` (или даже, `display: inline-block;`, который смешивает характеристики обоих.).
 
-<p>Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.</p>
+Это объясняет отдельные элементы, но как насчёт того, как элементы взаимодействуют друг с другом? Нормальный поток макета (упомянутый в статье введения макета) - это система, посредством которой элементы размещаются внутри окна просмотра браузера. По умолчанию элементы уровня блока выкладываются в направлении, что блокирует отображение в режиме записи документа - каждый из них будет отображаться в новой строке ниже последней строки, и они будут разделены любым полем, установленным на них. Поэтому на английском языке или на любом другом, в котором режим писания горизонтальный, сверху вниз, элементы уровня блока располагаются вертикально.
 
-<p>Строчные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).</p>
+Строчные элементы ведут себя по-другому — они не появляются на новых строках; они располагаются на той же строке, что и другие и любой смежной или завёрнутый текст располагается на всю ширину внутри элемента уровня родительского блока, до тех пор, пока не закончится пространство. Если пространства нет, тогда текст и/или элементы перейдут на новую строку (не с абзаца).
 
-<p>Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.</p>
+Если два смежных элемента имеют заданные для них поля/внешние отступы (margin) и эти поля соприкасаются друг с другом, большее из них остаётся, а меньшее исчезает — это называется схлопывание полей (margin collapsing), и мы рассматривали это ранее.
 
-<p>Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:</p>
+Давайте посмотрим на пример, который объясняет всё из того, что мы рассмотрели в данной статье:
 
-<div id="Normal_Flow">
-<pre class="brush: html">&lt;h1&gt;Базовый поток документа&lt;/h1&gt;
+```html
+<h1>Базовый поток документа</h1>
 
-&lt;p&gt;Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.&lt;/p&gt;
+<p>Я базовый элемент уровня блока. Мои соседние блочные элементы находятся на новой строке подо мной.</p>
 
-&lt;p&gt;По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.&lt;/p&gt;
+<p>По умолчанию мы охватываем 100% ширины нашего родительского элемента, и мы так же высоки, как и наш child-контент. Наша общая ширина и высота - это наш контент + внутренний отступ (padding) + ширина / высота границы.</p>
 
-&lt;p&gt;Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих&lt;/p&gt;
+<p>Мы отделены нашими полями. Из-за схлопывания полей мы отделены шириной одного из наших полей, а не обоих</p>
 
-&lt;p&gt;Строчные элементы &lt;span&gt;такие как этот&lt;/span&gt; и &lt;span&gt;этот&lt;/span&gt; находятся на одной линии с другими, и смежным текстом, если есть пространство. Строчные элементы, что не влезают &lt;span&gt;переходят на новую строку если это возможно (как этот текст)&lt;/span&gt;если же это невозможно, они переходят на новую строку, как это изображение: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>Строчные элементы <span>такие как этот</span> и <span>этот</span> находятся на одной линии с другими, и смежным текстом, если есть пространство. Строчные элементы, что не влезают <span>переходят на новую строку если это возможно (как этот текст)</span>если же это невозможно, они переходят на новую строку, как это изображение: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css">body {
+```css
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -70,28 +63,26 @@ p {
 span {
   background: white;
   border: 1px solid black;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}</p>
+{{ EmbedLiveSample('Normal_Flow', '100%', 500) }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.</p>
+Теперь, когда вы поняли нормальный поток и как браузер выкладывает содержимое по умолчанию, двигаемся дальше, чтобы понять как это изменить для создания макета согласно вашему дизайну.
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Базовый поток</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Сетка(Grid)</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Потоки (Floats)">Поплавки</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование(Positioning)</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Методы устаревших макетов</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Фундаментальная оценка понимания макета</a></li>
-</ul>
+- [Введение в CSS layout](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Базовый поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Сетка(Grid)](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Поплавки](</ru/docs/Learn/CSS/CSS_layout/Потоки (Floats)>)
+- [Позиционирование(Positioning)](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Методы устаревших макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Фундаментальная оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/position_skills/index.md b/files/ru/learn/css/css_layout/position_skills/index.md
index 590cfe6ba04c2a..9eabc1789e2e66 100644
--- a/files/ru/learn/css/css_layout/position_skills/index.md
+++ b/files/ru/learn/css/css_layout/position_skills/index.md
@@ -4,62 +4,50 @@ slug: Learn/CSS/CSS_layout/Position_skills
 translation_of: Learn/CSS/CSS_layout/Position_skills
 original_slug: Learn/CSS/CSS_layout/Навыки_позиционирования
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
+Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning). Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.
 
+> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как[ CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/) чтобы проработать задания.
+>
+> Если вы застрянете, попросите нас о помощи — см. раздел [Оценка и дальнейшая помощь](#оценка_и_дальнейшая_помощь) в конце страницы
 
-<p>Цель этого задания - чтобы вы поработали с CSS свойством {{CSSxRef("position")}} и его значениями которые описаны в нашем уроке <a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a>. Вы будете работать над двумя небольшими задачами, использующими различные элементы из пройденного материала.</p>
+## Позиционирование Раз
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезным загрузить код и использовать онлайн инструменты такие как<a href="https://codepen.io/"> CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a> чтобы проработать задания.</p>
+В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.
 
-<p>Если вы застрянете, попросите нас о помощи — см. раздел <a href="#оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</a> в конце страницы</p>
-</div>
+![The green box is at the top right of a container with a grey border.](https://mdn.mozillademos.org/files/17077/position-task1.png)
 
-<h2 id="Позиционирование_Раз">Позиционирование Раз</h2>
+Попробуйте обновить живой код ниже для воссоздания законченного примера:
 
-<p>В этом задании вам необходимо расположить элементы с классом target в верхнем правом углу контейнера, который имеет серую границу 5px.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}
 
-<p><img alt="The green box is at the top right of a container with a grey border." src="https://mdn.mozillademos.org/files/17077/position-task1.png" style="height: 661px; width: 1033px;"></p>
+В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?
 
-<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html), чтобы работать в вашем собственном или онлайн-редакторе
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position1.html", '100%', 1000)}}</p>
+## Позиционирование Два
 
-<p>В качестве дополнительной задачи, сможете ли вы изменить цель так чтоб она отображалась под текстом?</p>
+В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position1-download.html">загрузите отправную точку этого задания</a>, чтобы работать в вашем собственном или онлайн-редакторе</p>
-</div>
+![The content is scrolled but the sidebar has stayed in place.](https://mdn.mozillademos.org/files/17078/position-task2.png)
 
-<h2 id="Позиционирование_Два">Позиционирование Два</h2>
+Попробуйте обновить живой код ниже для воссоздания законченного примера:
 
-<p>В примере ниже если вы прокрутите блок боковая панель прокручивается вместе с контентом. Измените его так чтобы боковая панель оставалась на месте и прокручивался только контент.</p>
+{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}
 
-<p><img alt="The content is scrolled but the sidebar has stayed in place." src="https://mdn.mozillademos.org/files/17078/position-task2.png" style="height: 827px; width: 1123px;"></p>
+> **Примечание:** Для оценки или дальнейшей работы, [загрузите отправную точку этого задания](https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html), чтобы работать в вашем собственном или онлайн-редакторе
 
-<p>Попробуйте обновить живой код ниже для воссоздания законченного примера:</p>
+## Оценка и дальнейшая помощь
 
-<p>{{EmbedGHLiveSample("css-examples/learn/tasks/position/position2.html", '100%', 1000)}}</p>
+Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.
 
-<div class="blockIndicator note">
-<p>Для оценки или дальнейшей работы, <a href="https://github.com/mdn/css-examples/blob/master/learn/tasks/position/position2-download.html">загрузите отправную точку этого задания</a>, чтобы работать в вашем собственном или онлайн-редакторе</p>
-</div>
+Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:
 
-<h2 id="Оценка_и_дальнейшая_помощь">Оценка и дальнейшая помощь</h2>
+1.  Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/). Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.
+2.  Напишите пост с просьбой оценки и/или помощи на [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
 
-<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах упомянутых выше.</p>
-
-<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
-
-<ol>
- <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы с отправными точками ссылки на которые имеются в разделах выше.</li>
- <li>Напишите пост с просьбой оценки и/или помощи на <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".</li>
-   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
-   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
-   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+    - Описательный заголовок такой как "Требуется оценка проверки навыков по Позиционированияю".
+    - Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
+    - Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
+    - Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
diff --git a/files/ru/learn/css/css_layout/positioning/index.md b/files/ru/learn/css/css_layout/positioning/index.md
index 31a4fced4b0296..e286be1aa3f71a 100644
--- a/files/ru/learn/css/css_layout/positioning/index.md
+++ b/files/ru/learn/css/css_layout/positioning/index.md
@@ -3,89 +3,82 @@ title: Позиционирование
 slug: Learn/CSS/CSS_layout/Positioning
 translation_of: Learn/CSS/CSS_layout/Positioning
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div>
+Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.
 
-<p class="summary">Позиционирование позволяет вам изымать элементы из нормального потока макета документа и заставить их вести себя по-другому; например, располагаться друг на друге или всегда оставаться на одном и том же месте внутри окна просмотра браузера. Эта статья объясняет разные значения {{cssxref("position")}} и как их использовать.</p>
+| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Изучить как работает CSS позиционирование.                                                                                                                                         |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.)</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить как работает CSS позиционирование.</td>
-  </tr>
- </tbody>
-</table>
+Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию [`0_basic-flow.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html) из нашего GitHub репозитория ([исходный код здесь](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html)) и используйте его как отправную точку.
 
-<p>Нам бы хотелось чтобы вы следовали за нами с упражнениями на вашем локальном ПК, если возможно возьмите копию <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> из нашего GitHub репозитория (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">исходный код здесь</a>) и используйте его как отправную точку.</p>
+## Введение в позиционирование
 
-<h2 id="Введение_в_позиционирование">Введение в позиционирование</h2>
+Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.
 
-<p>Вся идея позиционирования заключается в том, чтобы позволить нам переопределять поведение базового потока документа, описанного выше, для того чтобы производить интересные эффекты. Что если вам захочется слегка изменить позицию каких-либо блоков внутри макета относительно их позиции в потоке макета по умолчанию? Ваш инструмент - позиционирование. Или если вы хотите создать элемент пользовательского интерфейса, который плавает над другими частями страницы и/или всегда располагается на одном и том же месте в окне браузера не зависимо от того сколько прокручивалась страница? Позиционирование делает возможным работу таких макетов.</p>
+Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство {{cssxref("position")}}.
 
-<p>Существует несколько разных типов позиционирования, которые вы можете применить к элементам HTML. Для активации специфического типа позиционирования у элемента, мы используем свойство {{cssxref("position")}}.</p>
+### Статическое позиционирование
 
-<h3 id="Статическое_позиционирование">Статическое позиционирование</h3>
+Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит "поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения".
 
-<p>Статическое позиционирование — это умолчание, которое получает каждый элемент, что всего лишь значит "поставить элемент в его нормальное положение в потоке макета документа — ничего особенного для рассмотрения".</p>
+Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте `class` `positioned` ко второму {{htmlelement("p")}} в HTML:
 
-<p>Чтобы продемонстрировать это и настроить ваш образец для будущих разделов, сначала добавьте <code>class</code> <code>positioned</code> ко второму {{htmlelement("p")}} в HTML:</p>
+```html
+<p class="positioned"> ... </p>
+```
 
-<pre class="brush: html  ">&lt;p class="positioned"&gt; ... &lt;/p&gt;</pre>
+А теперь добавьте следующее правило в конец вашего CSS:
 
-<p>А теперь добавьте следующее правило в конец вашего CSS:</p>
-
-<pre class="brush: css  ">.positioned {
+```css
+.positioned {
   position: static;
   background: yellow;
-}</pre>
+}
+```
 
-<p>И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!</p>
+И если вы сейчас сохраните и обновите, то вы не увидите никаких изменений, не считая обновлённого цвета фона 2-го параграфа. Это нормально, как мы и говорили ранее, статическое позиционирование является поведением по умолчанию!
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть живой пример на данном этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">см. исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть живой пример на данном этапе на [`1_static-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html)).
 
-<h3 id="Относительное_позиционирование">Относительное позиционирование</h3>
+### Относительное позиционирование
 
-<p>Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление <code>position</code> в вашем коде:</p>
+Относительное позиционирование первый тип позиции, который мы рассмотрим. Оно очень похоже на статическое позиционирование, за исключением того что вы можете модифицировать окончательное положение позиционируемого объекта занявшего своё место в макете нормального потока, в том числе заставлять его перекрывать другие элементы на странице. Двигайтесь далее и обновите объявление `position` в вашем коде:
 
-<pre class="brush: css  ">position: relative;</pre>
+```css
+position: relative;
+```
 
-<p>Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.</p>
+Если вы сохраните и обновите на данном этапе, в результате вы совсем не увидите изменений. Так как же вам модифицировать положение? Вам необходимо использовать свойства {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} которые мы объясним в следующем разделе.
 
-<h3 id="Введение_в_top_bottom_left_и_right">Введение в top, bottom, left, и right</h3>
+### Введение в top, bottom, left, и right
 
-<p>{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу <code>.positioned</code> в вашем CSS:</p>
+{{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} используются вместе с {{cssxref("position")}} чтобы указать куда именно перемещать позиционируемый элемент. Для того чтобы попробовать, добавьте следующее объявление к правилу `.positioned` в вашем CSS:
 
-<pre class="brush: css  ">top: 30px;
-left: 30px;</pre>
+```css
+top: 30px;
+left: 30px;
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: значения этих свойств могут принимать любые <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">единицы</a> которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.</p>
-</div>
+> **Примечание:** значения этих свойств могут принимать любые [единицы](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units) которые вы ожидаете по логике: пиксели, мм, rems, %, и т.д.
 
-<p>Если вы сейчас сохраните и обновите, вы получите примерно такой результат:</p>
+Если вы сейчас сохраните и обновите, вы получите примерно такой результат:
 
-<div class="hidden">
-<pre class="brush: html  ">&lt;h1&gt;Relative positioning&lt;/h1&gt;
+```html hidden
+<h1>Relative positioning</h1>
 
-&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
 
-&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
 
-&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
 
-&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -107,37 +100,39 @@ span {
   background: yellow;
   top: 30px;
   left: 30px;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Введение_в_top_bottom_left_и_right', '100%', 500) }}</p>
+{{ EmbedLiveSample('Введение_в_top_bottom_left_и_right', '100%', 500) }}
 
-<p>Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали <code>top: 30px;</code>, сила толкает блок, заставляя его перемещаться вниз на 30px.</p>
+Круто, правда? Хорошо, вероятно это не то, чего вы ожидали — почему он переместился вниз и вправо, когда мы указали вверх и влево? Как бы нелогично это ни звучало это всего лишь способ того как работает позиционирование — вам надо думать о невидимой силе толкающей указанную сторону позиционируемого блока, перемещая его в противоположную сторону. Так, например, если вы указали `top: 30px;`, сила толкает блок, заставляя его перемещаться вниз на 30px.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">см. исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть пример на этом этапе на [`2_relative-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html)).
 
-<h3 id="Абсолютное_позиционирование">Абсолютное позиционирование</h3>
+### Абсолютное позиционирование
 
-<p>Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:</p>
+Абсолютное позиционирование даёт совершенно другие результаты. Давайте попробуем изменить объявление позиции в вашем коде как показано ниже:
 
-<pre class="brush: css  ">position: absolute;</pre>
+```css
+position: absolute;
+```
 
-<p>Если вы сохраните и обновите, то вы должны увидеть нечто подобное:</p>
+Если вы сохраните и обновите, то вы должны увидеть нечто подобное:
 
-<div class="hidden">
-<pre class="brush: html  ">&lt;h1&gt;Absolute positioning&lt;/h1&gt;
+```html hidden
+<h1>Absolute positioning</h1>
 
-&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
 
-&lt;p class="positioned"&gt;By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.&lt;/p&gt;
+<p class="positioned">By default we span 100% of the width of our parent element, and we are as tall as our child content. Our total width and height is our content + padding + border width/height.</p>
 
-&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
 
-&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -159,51 +154,49 @@ span {
   background: yellow;
   top: 30px;
   left: 30px;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}</p>
+{{ EmbedLiveSample('Абсолютное_позиционирование', '100%', 420) }}
 
-<p>В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее...</p>
+В первую очередь обратите внимание на то, что интервал там, где должен быть позиционируемый элемент в потоке документа теперь отсутствует — первый и третий элементы сблизились так будто, он больше не существует! Ну, в каком-то смысле это правда. Абсолютно позиционированный элемент больше не существует в нормальном потоке макета документа. Вместо этого он располагается на своём собственном слое отдельно от всего остального. Это очень полезно: это значит, что мы можем создавать изолированные функции пользовательского интерфейса, которые не влияют на макет других элементов страницы. Например, всплывающие информационные блоки и меню управления; опрокидывающиеся панели; функции пользовательского интерфейса, которые можно перетаскивать в любом месте страницы; и так далее...
 
-<p>Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является <strong>исходным содержащим блоком</strong>. См. раздел ниже для дополнительной информации).</p>
+Во-вторых, обратите внимание, что позиция элемента изменилась — это потому, что {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} ведут себя по-другому с абсолютным позиционированием. Вместо того, чтобы позиционировать элемент на основе его относительного положения в обычном потоке макета документа, они определяют расстояние, на котором элемент должен находиться от каждой из сторон содержащего элемента. Поэтому в этом случае мы говорим, что абсолютно позиционированный элемент должен располагаться в 30px от верха "содержащего элемента" и 30px от левого края (В этом случае "содержащий элемент" является **исходным содержащим блоком**. См. раздел ниже для дополнительной информации).
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить <code>top: 0; bottom: 0; left: 0; right: 0;</code> и <code>margin: 0;</code> для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...</p>
-</div>
+> **Примечание:** вы можете использовать {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, и {{cssxref("right")}} для изменения размера элемента если вам надо. Попробуйте установить `top: 0; bottom: 0; left: 0; right: 0;` и `margin: 0;` для вашего позиционируемого элемента и посмотрите, что произойдёт! Потом снова все верните...
 
-<div class="note">
-<p><strong>Примечание</strong>: Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.</p>
-</div>
+> **Примечание:** Да, margin-ы все ещё влияют на позиционируемый элемент. Однако, схлопывания margin не происходит.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">см. исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть пример на этом этапе на [`3_absolute-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html)).
 
-<h3 id="Контекст_позиционирования">Контекст позиционирования</h3>
+### Контекст позиционирования
 
-<p>Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">Определение содержащего блока</a>).</p>
+Какой элемент является "содержащим" относительно абсолютно позиционируемого элемента? Это очень сильно зависит от свойства позиции предка позиционируемого элемента (см. [Определение содержащего блока](/ru/docs/Web/CSS/Containing_block#Identifying_the_containing_block)).
 
-<p>Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в <strong>исходным содержащем блоке</strong>. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.</p>
+Если никакие из элементов предков не имеют конкретно заданного свойства позиции, то по умолчанию все элементы предков будут иметь статическую позицию. В результате этого абсолютно позиционируемый элемент будет содержаться в **исходным содержащем блоке**. Исходный содержащий блок имеет размеры области просмотра, а также является блоком, содержащим элемент {{htmlelement("html")}}. Проще говоря, абсолютно позиционируемый элемент будет отображаться за пределами элемента {{htmlelement("html")}} и будет расположен относительно исходного окна просмотра.
 
-<p>Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить <strong>контекст </strong> <strong>позиционирования </strong>— относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего <code>body</code>:</p>
+Позиционируемый элемент вложен в {{htmlelement ("body")}} в исходном HTML, но в конечном макете он расположен на 30px от верхнего и левого края страницы. Мы можем изменить **контекст** **позиционирования** — относительно какого элемента позиционируется позиционируемый элемент. Это делается путём установки позиционирования на одном из предков элемента — на один из элементов, внутри которого он вложен (вы не можете позиционировать его относительно элемента, внутри которого он НЕ вложен). Чтобы продемонстрировать это, добавьте следующее объявление в правило вашего `body`:
 
-<pre class="brush: css  ">position: relative;</pre>
+```css
+position: relative;
+```
 
-<p>Это должно дать следующий результат:</p>
+Это должно дать следующий результат:
 
-<div class="hidden">
-<pre class="brush: html  ">&lt;h1&gt;Positioning context&lt;/h1&gt;
+```html hidden
+<h1>Positioning context</h1>
 
-&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
 
-&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>
 
-&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
 
-&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
   position: relative;
@@ -226,54 +219,58 @@ span {
   background: yellow;
   top: 30px;
   left: 30px;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Контекст_позиционирования', '100%', 420) }}</p>
+{{ EmbedLiveSample('Контекст_позиционирования', '100%', 420) }}
 
-<p>Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}.</p>
+Позиционируемый элемент теперь располагается относительно элемента {{htmlelement("body")}}.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">см. исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`4_positioning-context.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html)).
 
-<h3 id="Введение_в_z-index">Введение в z-index</h3>
+### Введение в z-index
 
-<p>Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?</p>
+Все это абсолютное позиционирование — хорошее развлечение, но кое-что чего мы ещё не рассмотрели — когда элементы начинают перекрываться, что определяет который из элементов будет появляться поверх другого элемента? В примере, который мы видели все это время, у нас имеется только один позиционируемый элемент в контексте позиционирования, и он появляется сверху поскольку позиционируемые элементы "побеждают" не позиционированные элементы. Что же насчёт того, когда мы имеем более одного?
 
-<p>Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:</p>
+Попробуйте добавить следующий CSS, чтобы сделать первый параграф так же абсолютно позиционированным:
 
-<pre class="brush: css  ">p:nth-of-type(1) {
+```css
+p:nth-of-type(1) {
   position: absolute;
   background: lime;
   top: 10px;
   right: 30px;
-}</pre>
+}
+```
 
-<p>На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом <code>.positioned</code>, где они оба перекрываются. Это потому что параграф <code>.positioned</code> является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.</p>
+На этом этапе вы увидите, что первый параграф окрашенный в лаймовый изъят из потока документа и помещён чуточку выше того места, где он был исходно. А также он расположен под оригинальным параграфом `.positioned`, где они оба перекрываются. Это потому что параграф `.positioned` является вторым параграфом по порядку в источнике и позже позиционируемые элементы в порядке источника выигрывают над ранее позиционируемыми элементами в порядке источника.
 
-<p>Можете ли вы изменить порядок наложения? Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).</p>
+Можете ли вы изменить порядок наложения? Да, можете, используя свойство {{cssxref("z-index")}}. "z-index" это ссылка к z-оси. Вы можете вспомнить из предыдущих этапов в этом курсе, где мы обсуждали использование горизонтальных (x-ось) и вертикальных (y-оси) координат веб-страницами для определения позиции для таких вещей, как фоновые изображения и смещение теней. (0,0) находится наверху слева страницы (или элемента) и оси x- и y- направляются направо и вниз страницы (во всяком случае, для языков, направленных слева на право).
 
-<p>У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют <code>z-index</code> <code>auto</code>, что фактически равно 0.</p>
+У веб-страниц также имеется z-ось: воображаемая линия, которая направляется от поверхности вашего экрана к вашему лицу (или что ещё вам нравится иметь перед экраном). Значения {{cssxref("z-index")}} влияют на то где позиционируемый элемент располагается на этой оси; положительные значения перемещают их выше по наложению, а отрицательные значения перемещают их ниже по наложению. По умолчанию все позиционируемые элементы имеют `z-index` `auto`, что фактически равно 0.
 
-<p>Для того чтобы изменить порядок наложения, попробуйте объявить для вашего <code>p:nth-of-type(1)</code> правила:</p>
+Для того чтобы изменить порядок наложения, попробуйте объявить для вашего `p:nth-of-type(1)` правила:
 
-<pre class="brush: css  ">z-index: 1;</pre>
+```css
+z-index: 1;
+```
 
-<p>Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:</p>
+Теперь вы должны видеть законченный пример, с параграфом лаймового цвета сверху:
 
-<div class="hidden">
-<pre class="brush: html  ">&lt;h1&gt;z-index&lt;/h1&gt;
+```html hidden
+<h1>z-index</h1>
 
-&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
 
-&lt;p class="positioned"&gt;Now I'm absolutely positioned relative to the &lt;code&gt;&amp;lt;body&amp;gt;&lt;/code&gt; element, not the &lt;code&gt;&amp;lt;html&amp;gt;&lt;/code&gt; element!&lt;/p&gt;
+<p class="positioned">Now I'm absolutely positioned relative to the <code>&lt;body&gt;</code> element, not the <code>&lt;html&gt;</code> element!</p>
 
-&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
 
-&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
   position: relative;
@@ -305,64 +302,69 @@ p:nth-of-type(1) {
   right: 30px;
   z-index: 1;
 }
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Введение_в_z-index', '100%', 400) }}</p>
+{{ EmbedLiveSample('Введение_в_z-index', '100%', 400) }}
 
-<p>Обратите внимание что <code>z-index</code> принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.</p>
+Обратите внимание что `z-index` принимает значения индекса только без единиц измерения; вы не можете задавать значения, что хотите, чтобы какой-то элемент был на 23 пикселя выше по z-оси — это так не работает. Более высокие значения будут располагаться над меньшими значениями и от вас зависит какие значения вы используете. Используя 2 и 3, вы получите тот же эффект что и 300 и 40000.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">см. исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`5_z-index.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html)).
 
-<h3 id="Фиксированное_позиционированиее">Фиксированное позиционированиее</h3>
+### Фиксированное позиционированиее
 
-<p>А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), <strong>фиксированное позиционирование </strong><em>обычно </em>фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его <a href="/en-US/docs/Web/CSS/transform">свойству transform </a>отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте,  как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.</p>
+А теперь давайте посмотрим на фиксированное позиционирование. Оно работает точно также как и абсолютное позиционирование, одним ключевым отличием: в то время как абсолютное позиционирование фиксирует элемент в месте относительно его ближайшего позиционированного предка (исходный содержащий блок если нет иного), **фиксированное позиционирование** _обычно_ фиксирует элемент в месте относительно видимой части области просмотра, кроме случаев, когда один из его потомков является фиксированным блоком из-за того, что его [свойству transform ](/ru/docs/Web/CSS/transform)отличается от none. Это значит, что вы можете создать элементы пользовательского интерфейса, которые зафиксированы на месте, как постоянные меню навигации, которые всегда видимы вне зависимости от того сколько прокручивается страница.
 
-<p>Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила <code>p:nth-of-type(1)</code> и <code>.positioned</code> из вашего CSS.</p>
+Давайте составим простой пример, чтобы показать, что мы имеем в виду. Во-первых, удалите существующие правила `p:nth-of-type(1)` и `.positioned` из вашего CSS.
 
-<p>А теперь, обновите правило <code>body</code> удалив объявление <code>position: relative;</code> и добавьте фиксированную высоту как тут:</p>
+А теперь, обновите правило `body` удалив объявление `position: relative;` и добавьте фиксированную высоту как тут:
 
-<pre class="brush: css  ">body {
+```css
+body {
   width: 500px;
   height: 1400px;
   margin: 0 auto;
-}</pre>
+}
+```
 
-<p>Теперь мы собираемся дать элементу {{htmlelement("h1")}} <code>position: fixed;</code>, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:</p>
+Теперь мы собираемся дать элементу {{htmlelement("h1")}} `position: fixed;`, а также заставить его располагаться на верху окна просмотра. Добавьте следующее правило в ваш CSS:
 
-<pre class="brush: css  ">h1 {
+```css
+h1 {
   position: fixed;
   top: 0;
   width: 500px;
   margin-top: 0;
   background: white;
   padding: 10px;
-}</pre>
+}
+```
 
-<p><code>top: 0;</code> необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.</p>
+`top: 0;` необходим чтобы приклеить его к верху экрана. мы дали заголовку ту же ширину что и колонкам с контентом и затем даём ему белый фон и немного padding и margin, чтобы контент не был видимым под ним.
 
-<p>Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:</p>
+Если вы сохраните и обновите сейчас, вы увидите маленький забавный эффект, при котором заголовок останется неизменным, а содержимое будет прокручиваться вверх и исчезать под ним. Но мы можем улучшить это — в данный момент некоторый контент начинается под заголовком. Это из-за того, что позиционируемый заголовок больше не появляется в потоке документа, поэтому остальное содержимое поднимается наверх. Нам надо сдвинуть все это немного вниз; мы можем сделать это установив немного верхнего margin к первому параграфу. Добавьте его сейчас:
 
-<pre class="brush: css  ">p:nth-of-type(1) {
+```css
+p:nth-of-type(1) {
   margin-top: 60px;
-}</pre>
+}
+```
 
-<p>Теперь вы должны видеть законченный пример:</p>
+Теперь вы должны видеть законченный пример:
 
-<div class="hidden">
-<pre class="brush: html  ">&lt;h1&gt;Fixed positioning&lt;/h1&gt;
+```html hidden
+<h1>Fixed positioning</h1>
 
-&lt;p&gt;I am a basic block level element. My adjacent block level elements sit on new lines below me.&lt;/p&gt;
+<p>I am a basic block level element. My adjacent block level elements sit on new lines below me.</p>
 
-&lt;p class="positioned"&gt;I'm not positioned any more...&lt;/p&gt;
+<p class="positioned">I'm not positioned any more...</p>
 
-&lt;p&gt;We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.&lt;/p&gt;
+<p>We are separated by our margins. Because of margin collapsing, we are separated by the width of one of our margins, not both.</p>
 
-&lt;p&gt;inline elements &lt;span&gt;like this one&lt;/span&gt; and &lt;span&gt;this one&lt;/span&gt; sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements &lt;span&gt;wrap onto a new line if possible — like this one containing text&lt;/span&gt;, or just go on to a new line if not, much like this image will do: &lt;img src="https://mdn.mozillademos.org/files/13360/long.jpg"&gt;&lt;/p&gt;</pre>
+<p>inline elements <span>like this one</span> and <span>this one</span> sit on the same line as one another, and adjacent text nodes, if there is space on the same line. Overflowing inline elements <span>wrap onto a new line if possible — like this one containing text</span>, or just go on to a new line if not, much like this image will do: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   height: 1400px;
   margin: 0 auto;
@@ -390,34 +392,31 @@ h1 {
 
 p:nth-of-type(1) {
   margin-top: 60px;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }}</p>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">см. исходный код</a>).</p>
-</div>
+{{ EmbedLiveSample('Фиксированное_позиционированиее', '100%', 400) }}
 
-<h3 id="position_sticky">position: sticky</h3>
+> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`6_fixed-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html)).
 
-<p>Доступно другое значение позиции называемое <code>position: sticky</code>, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным.  Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.</p>
+### position: sticky
 
-<div id="Sticky_1">
-<div class="hidden">
-<h6 id="Sticky_positioning_example">Sticky positioning example</h6>
+Доступно другое значение позиции называемое `position: sticky`, которое несколько новее чем другие. По сути, это гибрид относительной и фиксированной позиции, который позволяет позиционируемому элементу вести себя как будто он относительно позиционирован, до тех пор пока он не будет прокручен до определённой пороговой точки (например, 10px от вершины окна просмотра), после чего он становится фиксированным. Это можно использовать, например, чтобы заставить панель навигации прокручиваться вместе со страницей до определённой точки, а затем задерживать в верхней части страницы.
 
-<pre class="brush: html  ">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
+```html hidden
+<h1>Sticky positioning</h1>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
 
-&lt;div class="positioned"&gt;Sticky&lt;/div&gt;
+<div class="positioned">Sticky</div>
 
-&lt;p&gt;Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.&lt;/p&gt;
+<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
 
-&lt;p&gt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.&lt;/p&gt;       </pre>
+<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
+```
 
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   margin: 0 auto;
 }
@@ -428,54 +427,57 @@ p:nth-of-type(1) {
   padding: 10px;
   margin: 10px;
   border-radius: 5px;
-}</pre>
-</div>
+}
+```
 
-<pre class="brush: css  ">.positioned {
+```css
+.positioned {
   position: sticky;
   top: 30px;
   left: 30px;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Sticky_1', '100%', 200) }}</p>
-
-<p>Интересное и общее использование <code>position: sticky</code> заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:</p>
-
-<pre class="brush: html  ">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
-
-&lt;dl&gt;
-    &lt;dt&gt;A&lt;/dt&gt;
-    &lt;dd&gt;Apple&lt;/dd&gt;
-    &lt;dd&gt;Ant&lt;/dd&gt;
-    &lt;dd&gt;Altimeter&lt;/dd&gt;
-    &lt;dd&gt;Airplane&lt;/dd&gt;
-    &lt;dt&gt;B&lt;/dt&gt;
-    &lt;dd&gt;Bird&lt;/dd&gt;
-    &lt;dd&gt;Buzzard&lt;/dd&gt;
-    &lt;dd&gt;Bee&lt;/dd&gt;
-    &lt;dd&gt;Banana&lt;/dd&gt;
-    &lt;dd&gt;Beanstalk&lt;/dd&gt;
-    &lt;dt&gt;C&lt;/dt&gt;
-    &lt;dd&gt;Calculator&lt;/dd&gt;
-    &lt;dd&gt;Cane&lt;/dd&gt;
-    &lt;dd&gt;Camera&lt;/dd&gt;
-    &lt;dd&gt;Camel&lt;/dd&gt;
-    &lt;dt&gt;D&lt;/dt&gt;
-    &lt;dd&gt;Duck&lt;/dd&gt;
-    &lt;dd&gt;Dime&lt;/dd&gt;
-    &lt;dd&gt;Dipstick&lt;/dd&gt;
-    &lt;dd&gt;Drone&lt;/dd&gt;
-    &lt;dt&gt;E&lt;/dt&gt;
-    &lt;dd&gt;Egg&lt;/dd&gt;
-    &lt;dd&gt;Elephant&lt;/dd&gt;
-    &lt;dd&gt;Egret&lt;/dd&gt;
-&lt;/dl&gt;
-</pre>
-
-<p>CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем <code>position: sticky</code> к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.</p>
-
-<pre class="brush: css  ">dt {
+}
+```
+
+{{ EmbedLiveSample('Sticky_1', '100%', 200) }}
+
+Интересное и общее использование `position: sticky` заключается в создании индексных страниц с прокруткой, где разные заголовки липнут к верху страницы, когда они достигают его. Разметка такого примера может выглядеть так:
+
+```html
+<h1>Sticky positioning</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+```
+
+CSS может выглядеть как показано ниже. В нормальном потоке элементы {{htmlelement("dt")}} будут прокручиваться вместе с контентом. Когда мы добавляем `position: sticky` к элементу {{htmlelement("dt")}}, вместе со значением {{cssxref("top")}} 0, поддерживающие браузеры будут приклеивать заголовки к вершине окна просмотра когда они будут достигать той позиции. каждый последующий заголовок будет затем заменять предыдущий при его прокрутке вверх к той позиции.
+
+```css
+dt {
   background-color: black;
   color: white;
   padding: 10px;
@@ -484,11 +486,10 @@ p:nth-of-type(1) {
   left: 0;
   margin: 1em 0;
 }
-</pre>
+```
 
-<div id="Sticky_2">
-<div class="hidden">
-<pre class="brush: css  ">body {
+```css hidden
+body {
   width: 500px;
   height: 1400px;
   margin: 0 auto;
@@ -503,79 +504,72 @@ dt {
   left: 0;
   margin: 1em 0;
 }
-</pre>
-
-<pre class="brush: html  ">&lt;h1&gt;Sticky positioning&lt;/h1&gt;
-
-&lt;dl&gt;
-    &lt;dt&gt;A&lt;/dt&gt;
-    &lt;dd&gt;Apple&lt;/dd&gt;
-    &lt;dd&gt;Ant&lt;/dd&gt;
-    &lt;dd&gt;Altimeter&lt;/dd&gt;
-    &lt;dd&gt;Airplane&lt;/dd&gt;
-    &lt;dt&gt;B&lt;/dt&gt;
-    &lt;dd&gt;Bird&lt;/dd&gt;
-    &lt;dd&gt;Buzzard&lt;/dd&gt;
-    &lt;dd&gt;Bee&lt;/dd&gt;
-    &lt;dd&gt;Banana&lt;/dd&gt;
-    &lt;dd&gt;Beanstalk&lt;/dd&gt;
-    &lt;dt&gt;C&lt;/dt&gt;
-    &lt;dd&gt;Calculator&lt;/dd&gt;
-    &lt;dd&gt;Cane&lt;/dd&gt;
-    &lt;dd&gt;Camera&lt;/dd&gt;
-    &lt;dd&gt;Camel&lt;/dd&gt;
-    &lt;dt&gt;D&lt;/dt&gt;
-    &lt;dd&gt;Duck&lt;/dd&gt;
-    &lt;dd&gt;Dime&lt;/dd&gt;
-    &lt;dd&gt;Dipstick&lt;/dd&gt;
-    &lt;dd&gt;Drone&lt;/dd&gt;
-    &lt;dt&gt;E&lt;/dt&gt;
-    &lt;dd&gt;Egg&lt;/dd&gt;
-    &lt;dd&gt;Elephant&lt;/dd&gt;
-    &lt;dd&gt;Egret&lt;/dd&gt;
-&lt;/dl&gt;
-</pre>
-</div>
-</div>
-
-<p>{{ EmbedLiveSample('Sticky_2', '100%', 200) }}</p>
-
-<p>Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством <a href="/en-US/docs/Web/CSS/position">позиции</a> его предка.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть живой пример на этом этапе на <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">см. исходный код</a>).</p>
-</div>
-
-<h2 id="Проверь_свои_навыки!">Проверь свои навыки!</h2>
-
-<p>Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. <a href="/en-US/docs/Learn/CSS/CSS_layout/Position_skills">Проверьте свои навыки: Позиционирование</a>.</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li>Справка свойства {{cssxref("position")}}.</li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Примеры практического позиционирования</a>, для дополнительных полезных идей</li>
-</ul>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Введение в CSS макет</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Нормальный поток</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Позиционирование</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Отзывчивый дизайн</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Руководство по медиавыражениям для новичков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревшие методы макетов</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Поддержка старых браузеров</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Базовая оценка понимания макета</a></li>
-</ul>
+```
+
+```html hidden
+<h1>Sticky positioning</h1>
+
+<dl>
+    <dt>A</dt>
+    <dd>Apple</dd>
+    <dd>Ant</dd>
+    <dd>Altimeter</dd>
+    <dd>Airplane</dd>
+    <dt>B</dt>
+    <dd>Bird</dd>
+    <dd>Buzzard</dd>
+    <dd>Bee</dd>
+    <dd>Banana</dd>
+    <dd>Beanstalk</dd>
+    <dt>C</dt>
+    <dd>Calculator</dd>
+    <dd>Cane</dd>
+    <dd>Camera</dd>
+    <dd>Camel</dd>
+    <dt>D</dt>
+    <dd>Duck</dd>
+    <dd>Dime</dd>
+    <dd>Dipstick</dd>
+    <dd>Drone</dd>
+    <dt>E</dt>
+    <dd>Egg</dd>
+    <dd>Elephant</dd>
+    <dd>Egret</dd>
+</dl>
+```
+
+{{ EmbedLiveSample('Sticky_2', '100%', 200) }}
+
+Липкие элементы являются "липкими" относительно ближайшего предка с "прокручивающимся механизмом", который определяется свойством [позиции](/ru/docs/Web/CSS/position) его предка.
+
+> **Примечание:** вы можете посмотреть живой пример на этом этапе на [`7_sticky-positioning.html`](http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html) ([см. исходный код](https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html)).
+
+## Проверь свои навыки!
+
+Вы достигли конца этой статьи, но помните ли вы самую важную информацию? Вы можете найти дальнейшую проверку что вы усвоили эту информацию прежде чем, отправитесь дальше — см. [Проверьте свои навыки: Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Position_skills).
+
+## Заключение
+
+Я уверен, что вы повеселились с основами позиционирования; хотя это не является методом, который вы бы использовали для целого макета, всё же как вы видите, существует много задач, подходящих для него.
+
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}
+
+## Смотрите также
+
+- Справка свойства {{cssxref("position")}}.
+- [Примеры практического позиционирования](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples), для дополнительных полезных идей
+
+## В этом модуле
+
+- [Введение в CSS макет](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Нормальный поток](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Позиционирование](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Отзывчивый дизайн](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
+- [Руководство по медиавыражениям для новичков](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
+- [Устаревшие методы макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Поддержка старых браузеров](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Базовая оценка понимания макета](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md
index 2293133fee7e36..3e974000576c84 100644
--- a/files/ru/learn/css/css_layout/practical_positioning_examples/index.md
+++ b/files/ru/learn/css/css_layout/practical_positioning_examples/index.md
@@ -3,83 +3,71 @@ title: Practical positioning examples
 slug: Learn/CSS/CSS_layout/Practical_positioning_examples
 translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</div>
+Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.
 
-<p class="summary">Основы позиционирования, приведённые в последней статье, мы теперь рассмотрим, как создать некоторые примеры реального мира, чтобы проиллюстрировать, какие вещи вы можете сделать с позиционированием.</p>
+| Предпосылки: | Основы HTML (уроки [Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), и идея о том, как работает CSS (уроки [Introduction to CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).) |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Чтобы получить представление о практичности позиционирования                                                                                                                                |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Основы HTML (уроки <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), и идея о том, как работает CSS (уроки <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Чтобы получить представление о практичности позиционирования</td>
-  </tr>
- </tbody>
-</table>
+## Информационный блок с вкладками
 
-<h2 id="Информационный_блок_с_вкладками">Информационный блок с вкладками</h2>
+Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:
 
-<p>Первый пример, который мы рассмотрим, - это классический информационный блок с вкладками - очень распространённая функция, используемая, когда вы хотите упаковать много информации в небольшую область. Сюда входят информационные приложения, такие как стратегии / военные игры, мобильные версии веб-сайтов, где экран и пространство ограничены и необходимы компактные информационные окна, где вы можете сделать много информации, не заполняя весь пользовательский интерфейс. Наш простой пример будет выглядеть так, как только мы закончим:</p>
+![](https://mdn.mozillademos.org/files/13368/tabbed-info-box.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13368/tabbed-info-box.png" style="display: block; height: 400px; margin: 0px auto; width: 450px;"></p>
+> **Примечание:**Вы можете увидеть, что готовый пример работает в прямом эфире [info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html)). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи.
 
-<div class="note">
-<p><strong>Примечание: </strong>Вы можете увидеть, что готовый пример работает в прямом эфире <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">source code</a>). Проверьте его, чтобы понять, что вы будете строить в этом разделе статьи.</p>
-</div>
+Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.
 
-<p>Возможно, вы думаете: «Почему бы просто не создавать отдельные вкладки в виде отдельных веб-страниц и просто иметь вкладки, переходящие на отдельные страницы, чтобы создать эффект?» Этот код был бы проще, да, но тогда каждый отдельный «просмотр страницы» на самом деле был бы вновь загруженной веб-страницей, что затрудняло бы сохранение информации между представлениями и интеграцию этой функции в более крупный дизайн пользовательского интерфейса. Кроме того, так называемые «одностраничные приложения» становятся очень популярными - особенно для мобильных веб-интерфейсов - потому что все, что обслуживается как один файл, сокращает количество HTTP-запросов, необходимых для просмотра всего содержимого, тем самым повышая производительность.</p>
+> **Примечание:** Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как [XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest). На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.
 
-<div class="note">
-<p><strong>Примечание:</strong> Некоторые веб-разработчики занимаются ещё более быстрыми темпами, имея только одну страницу информации, загружаемую сразу и динамическое изменение информации, отображаемой с помощью функции JavaScript, такой как <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>. На этом этапе вашего обучения мы хотим сохранить все как можно проще. Впоследствии есть JavaScript, но только немного.</p>
-</div>
+Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — [info-box-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html). Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:
 
-<p>Для начала мы хотели бы, чтобы вы создали локальную копию исходного HTML-файла — <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box-start.html">info-box-start.html</a>. Сохраните это где вам удобно на локальном компьютере и откройте его в текстовом редакторе. Давайте посмотрим на HTML, содержащийся в теле:</p>
-
-<pre class="brush: html">&lt;section class="info-box"&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;a href="#" class="active"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
-    &lt;li&gt;&lt;a href="#"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;div class="panels"&gt;
-    &lt;article class="active-panel"&gt;
-      &lt;h2&gt;The first tab&lt;/h2&gt;
+```html
+<section class="info-box">
+  <ul>
+    <li><a href="#" class="active">Tab 1</a></li>
+    <li><a href="#">Tab 2</a></li>
+    <li><a href="#">Tab 3</a></li>
+  </ul>
+  <div class="panels">
+    <article class="active-panel">
+      <h2>The first tab</h2>
 
-      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.&lt;/p&gt;
-    &lt;/article&gt;
-    &lt;article&gt;
-      &lt;h2&gt;The second tab&lt;/h2&gt;
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p>
+    </article>
+    <article>
+      <h2>The second tab</h2>
 
-      &lt;p&gt;This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.&lt;/p&gt;
-    &lt;/article&gt;
-    &lt;article&gt;
-      &lt;h2&gt;The third tab&lt;/h2&gt;
+      <p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p>
+    </article>
+    <article>
+      <h2>The third tab</h2>
 
-      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!&lt;/p&gt;
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p>
 
-      &lt;ol&gt;
-        &lt;li&gt;dui neque eleifend lorem, a auctor libero turpis at sem.&lt;/li&gt;
-        &lt;li&gt;Aliquam ut porttitor urna.&lt;/li&gt;
-        &lt;li&gt;Nulla facilisi&lt;/li&gt;
-      &lt;/ol&gt;
-    &lt;/article&gt;
-  &lt;/div&gt;
-&lt;/section&gt;</pre>
+      <ol>
+        <li>dui neque eleifend lorem, a auctor libero turpis at sem.</li>
+        <li>Aliquam ut porttitor urna.</li>
+        <li>Nulla facilisi</li>
+      </ol>
+    </article>
+  </div>
+</section>
+```
 
-<p>Итак, у нас есть элемент {{htmlelement ("section")}} с <code>классом</code> <code>info-box</code>, который содержит {{htmlelement ("ul")}} и {{htmlelement ("div")}}. Неупорядоченный список содержит три элемента списка со ссылками внутри, которые станут фактическими вкладками для отображения наших панелей контента. <code>div</code> содержит три элемента {{htmlelement ("article")}}, которые будут составлять панели содержимого, соответствующие каждой вкладке. Каждая панель содержит некоторый образец контента.</p>
+Итак, у нас есть элемент {{htmlelement ("section")}} с `классом` `info-box`, который содержит {{htmlelement ("ul")}} и {{htmlelement ("div")}}. Неупорядоченный список содержит три элемента списка со ссылками внутри, которые станут фактическими вкладками для отображения наших панелей контента. `div` содержит три элемента {{htmlelement ("article")}}, которые будут составлять панели содержимого, соответствующие каждой вкладке. Каждая панель содержит некоторый образец контента.
 
-<p>Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создадите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового  <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript</a> как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.</p>
+Идея здесь заключается в том, что мы будем стилизовать вкладки, чтобы они выглядели как стандартное меню горизонтальной навигации и нарисуем панели, чтобы они сидели друг над другом, используя абсолютное позиционирование. Мы также предоставим вам немного JavaScript для включения на вашу страницу, чтобы отобразить соответствующую панель при нажатии вкладки и вы создадите саму вкладку. Вам не нужно будет понимать сам JavaScript на данном этапе, но вы должны подумать об изучении базового [JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics) как можно скорее - чем сложнее ваши функции пользовательского интерфейса, тем больше вероятность того, что вам понадобится JavaScript для реализации желаемую функциональность.
 
-<h3 id="Общая_настройка">Общая настройка</h3>
+### Общая настройка
 
-<p>Для начала добавьте следующее между вашим открытием и закрытием {{HTMLElement ("style")}} tags:</p>
+Для начала добавьте следующее между вашим открытием и закрытием {{HTMLElement ("style")}} tags:
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -89,38 +77,42 @@ translation_of: Learn/CSS/CSS_layout/Practical_positioning_examples
 
 body {
   margin: 0;
-}</pre>
+}
+```
 
-<p>Это всего лишь общая настройка для установки шрифта sans-serif на нашей странице, используйте поле <code>border-box </code>{{cssxref ("box-sizing")}} и избавьтесь от стандартного {{htmlelement ("body") }} поля.</p>
+Это всего лишь общая настройка для установки шрифта sans-serif на нашей странице, используйте поле `border-box `{{cssxref ("box-sizing")}} и избавьтесь от стандартного {{htmlelement ("body") }} поля.
 
-<p>Затем добавьте следующее ниже вашего предыдущего CSS:</p>
+Затем добавьте следующее ниже вашего предыдущего CSS:
 
-<pre class="brush: css">.info-box {
+```css
+.info-box {
   width: 450px;
   height: 400px;
   margin: 0 auto;
-}</pre>
+}
+```
 
-<p>Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого <code>margin: 0 auto </code>трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.</p>
+Это задаёт конкретную ширину и высоту содержимого и центрирует его на экране с использованием старого `margin: 0 auto `трюка. Раньше в курсе мы советовали не устанавливать фиксированную высоту на контейнеры содержимого, если это вообще возможно; это нормально в этом случае, потому что у нас есть фиксированный контент на наших вкладках. Это также выглядит немного раздражающим, чтобы иметь разные вкладки на разных высотах.
 
-<h3 id="Укладка_наших_вкладок">Укладка наших вкладок</h3>
+### Укладка наших вкладок
 
-<p>Теперь мы хотим, чтобы стиль вкладок выглядел как вкладки - в основном это горизонтальное меню навигации, но вместо того, чтобы загружать разные веб-страницы, когда они нажимаются, как мы видели ранее в курсе, они вызывают отображение разных панелей на той же странице. Сначала добавьте следующее правило внизу CSS, чтобы удалить по умолчанию {{cssxref ("padding-left")}} и {{cssxref ("margin-top")}} из неупорядоченного списка:</p>
+Теперь мы хотим, чтобы стиль вкладок выглядел как вкладки - в основном это горизонтальное меню навигации, но вместо того, чтобы загружать разные веб-страницы, когда они нажимаются, как мы видели ранее в курсе, они вызывают отображение разных панелей на той же странице. Сначала добавьте следующее правило внизу CSS, чтобы удалить по умолчанию {{cssxref ("padding-left")}} и {{cssxref ("margin-top")}} из неупорядоченного списка:
 
-<pre class="brush: css">.info-box ul {
+```css
+.info-box ul {
   padding-left: 0;
   margin-top: 0;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы используем селектор-потомки с полем <code>.info-box</code> в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы.</p>
-</div>
+> **Примечание:** Мы используем селектор-потомки с полем `.info-box` в начале цепочки в этом примере - это значит, что мы можем вставить эту функцию на страницу с другим содержимым, уже на ней, не опасаясь вмешиваться в стили, применяемые к другим частям страницы.
 
-<p>Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение <code>none</code>, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на <code>150px</code>, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но всё же быть стильными и  соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.</p>
+Затем мы нарисуем горизонтальные вкладки - все элементы списка будут перемещены влево, чтобы заставить их сидеть в одной строке вместе, их {{cssxref ("list-style-type")}} имеет значение `none`, чтобы избавиться от пули и их {{cssxref ("width")}} установлены на `150px`, чтобы они удобно располагались в информационном окне. Элементы {{htmlelement ("a")}} имеют {{cssxref ("display")}} встроенный блок, поэтому они будут сидеть в строке, но всё же быть стильными и соответствующим образом оформлены для кнопок вкладок, используя множество других свойств.
 
-<p>Добавьте следующий CSS:</p>
+Добавьте следующий CSS:
 
-<pre class="brush: css">.info-box li {
+```css
+.info-box li {
   float: left;
   list-style-type: none;
   width: 150px;
@@ -134,11 +126,13 @@ body {
   background-color: red;
   color: black;
   text-align: center;
-}</pre>
+}
+```
 
-<p>Наконец, для этого раздела мы установим некоторые стили в состояниях ссылок. Во-первых, мы настроим <code>:focus</code> и <code>:hover</code> состояния вкладок, чтобы выглядеть по-другому, когда они сфокусированы / зависают, предоставляя пользователям некоторую визуальную обратную связь. Во-вторых, мы установим правило, которое ставит один и тот же стиль на одной из вкладок, когда на нем присутствует <code>class</code> of <code>active</code>. Мы установим это с помощью JavaScript при нажатии на вкладку. Поместите следующий CSS ниже других стилей:</p>
+Наконец, для этого раздела мы установим некоторые стили в состояниях ссылок. Во-первых, мы настроим `:focus` и `:hover` состояния вкладок, чтобы выглядеть по-другому, когда они сфокусированы / зависают, предоставляя пользователям некоторую визуальную обратную связь. Во-вторых, мы установим правило, которое ставит один и тот же стиль на одной из вкладок, когда на нем присутствует `class` of `active`. Мы установим это с помощью JavaScript при нажатии на вкладку. Поместите следующий CSS ниже других стилей:
 
-<pre class="brush: css">.info-box li a:focus, .info-box li a:hover {
+```css
+.info-box li a:focus, .info-box li a:hover {
   background-color: #a60000;
   color: white;
 }
@@ -146,25 +140,29 @@ body {
 .info-box li a.active {
   background-color: #a60000;
   color: white;
-}</pre>
+}
+```
 
-<h3 id="Styling_the_panels">Styling the panels</h3>
+### Styling the panels
 
-<p>The next job is to style our panels. Let's get going!</p>
+The next job is to style our panels. Let's get going!
 
-<p>First, of all, add the following rule to style the <code>.panels</code> {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} <code>relative</code> to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.</p>
+First, of all, add the following rule to style the `.panels` {{htmlelement("div")}} container. Here we simply set a fixed {{cssxref("height")}} to make sure the panels fit snugly inside the info-box, {{cssxref("position")}} `relative` to set the {{htmlelement("div")}} as the positioning context, so you can then place positioned child elements relative to it and not the {{htmlelement("html")}} element, and finally we {{cssxref("clear")}} the float set in the CSS above so that it doesn't interfere with the remainder of the layout.
 
-<pre class="brush: css">.info-box .panels {
+```css
+.info-box .panels {
   height: 352px;
   position: relative;
   clear: both;
-}</pre>
+}
+```
 
-<p>Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.</p>
+Finally for this section, we will style the individual {{htmlelement("article")}} elements that comprise our panels. The first rule we'll add will absolutely {{cssxref("position")}} the panels, and make them all sit flush to the {{cssxref("top")}} and {{cssxref("left")}} of their {{htmlelement("div")}} container — this part is absolutely key to this whole layout feature, as it makes the panels sit on top of one another. The rule also gives the panels the same set height as the container, and gives the content some padding, a text {{cssxref("color")}}, and a {{cssxref("background-color")}}.
 
-<p>The second rule we'll add here makes it so that a panel with a <code>class</code> of <code>active-panel</code> set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a <code>z-index</code> of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.</p>
+The second rule we'll add here makes it so that a panel with a `class` of `active-panel` set on it will have a {{cssxref("z-index")}} of 1 applied to it, which will make it sit above the other panels (positioned elements have a `z-index` of 0 by default, which would put them below). Again, we'll add this class using JavaScript at the appropriate time.
 
-<pre class="brush: css">.info-box article {
+```css
+.info-box article {
   position: absolute;
   top: 0;
   left: 0;
@@ -176,151 +174,151 @@ body {
 
 .info-box .active-panel {
   z-index: 1;
-}</pre>
+}
+```
 
-<h3 id="Adding_our_JavaScript">Adding our JavaScript</h3>
+### Adding our JavaScript
 
-<p>The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):</p>
+The final step to getting this feature working is to add some JavaScript. Put the following block of code, exactly as written in between your opening and closing {{htmlelement("script")}} tags (you'll find these below the HTML content):
 
-<pre>var tabs = document.querySelectorAll('.info-box li a');
+```
+var tabs = document.querySelectorAll('.info-box li a');
 var panels = document.querySelectorAll('.info-box article');
 
-for(i = 0; i &lt; tabs.length; i++) {
+for(i = 0; i < tabs.length; i++) {
   var tab = tabs[i];
   setTabHandler(tab, i);
 }
 
 function setTabHandler(tab, tabPos) {
   tab.onclick = function() {
-    for(i = 0; i &lt; tabs.length; i++) {
+    for(i = 0; i < tabs.length; i++) {
       tabs[i].className = '';
     }
 
     tab.className = 'active';
 
-    for(i = 0; i &lt; panels.length; i++) {
+    for(i = 0; i < panels.length; i++) {
       panels[i].className = '';
     }
 
     panels[tabPos].className = 'active-panel';
   }
-}</pre>
+}
+```
 
-<p>This code does the following:</p>
+This code does the following:
 
-<ul>
- <li>First we save a reference to all the tabs and all the panels in two variables called <code>tabs</code> and <code>panels</code>, so we can easily do things to them later on.</li>
- <li>Then we use a <code>for</code> loop to cycle through all the tabs and run a function called <code>setTabHandler()</code> on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number <code>i</code> that indentifies the tab's position in the <code>tabs</code> array.</li>
- <li>In the <code>setTabHandler()</code> function, the tab has an <code>onclick</code> event handler set on it, so that when the tab is clicked, the following occurs:
-  <ul>
-   <li>A <code>for</code> loop is used to cycle through all the tabs and remove any classes that are present on them.</li>
-   <li>A <code>class</code> of <code>active</code> is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.</li>
-   <li>A <code>for</code> loop is used to cycle through all the panels and remove any classes that are present on them.</li>
-   <li>A class of <code>active-panel</code> is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.</li>
-  </ul>
- </li>
-</ul>
+- First we save a reference to all the tabs and all the panels in two variables called `tabs` and `panels`, so we can easily do things to them later on.
+- Then we use a `for` loop to cycle through all the tabs and run a function called `setTabHandler()` on each one, which sets up the functionality that should occur when each one is clicked on. When run, the function is passed a reference to the particular tab it is being run for, and an index number `i` that indentifies the tab's position in the `tabs` array.
+- In the `setTabHandler()` function, the tab has an `onclick` event handler set on it, so that when the tab is clicked, the following occurs:
+
+  - A `for` loop is used to cycle through all the tabs and remove any classes that are present on them.
+  - A `class` of `active` is set on the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets the same {{cssxref("color")}} and {{cssxref("background-color")}} on the tab as the panels are styled with.
+  - A `for` loop is used to cycle through all the panels and remove any classes that are present on them.
+  - A class of `active-panel` is set on the panel that corresponds to the tab that was clicked on — remember from earlier that this class has an associated rule in the CSS that sets its {{cssxref("z-index")}} to 1, making it appear over the top of the other panels.
 
-<p>That's it for the first example. Keep your code open, as we'll be adding to it in the second one.</p>
+That's it for the first example. Keep your code open, as we'll be adding to it in the second one.
 
-<h2 id="A_fixed_position_tabbed_info-box">A fixed position tabbed info-box</h2>
+## A fixed position tabbed info-box
 
-<p>In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:</p>
+In our second example, we will take our first example — our info-box — and add it into the context of a full web page. But not only that — we'll give it fixed position so that it stays in the same position in the browser window. When the main content scrolls, the info-box will stay in the same position on the screen. Our finished example will look like this:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13364/fixed-info-box.png" style="border-style: solid; border-width: 1px; display: block; height: 585px; margin: 0px auto; width: 1118px;"></p>
+![](https://mdn.mozillademos.org/files/13364/fixed-info-box.png)
 
-<div class="note">
-<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html">fixed-info-box.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
-</div>
+> **Примечание:** You can see the finished example running live at [fixed-info-box.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article.
 
-<p>As a starting point, you can use your completed example from the first section of the article, or make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html">info-box.html</a> from our Github repo.</p>
+As a starting point, you can use your completed example from the first section of the article, or make a local copy of [info-box.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/info-box.html) from our Github repo.
 
-<h3 id="HTML_additions">HTML additions</h3>
+### HTML additions
 
-<p>First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:</p>
+First of all, we need some additional HTML to represent the web site main content. Add the following {{htmlelement("section")}} just below your opening {{htmlelement("body")}} tag, just before the existing section:
 
-<pre class="brush: html">&lt;section class="fake-content"&gt;
-  &lt;h1&gt;Fake content&lt;/h1&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-  &lt;p&gt;This is fake content. Your main web page contents would probably go here.&lt;/p&gt;
-&lt;/section&gt;</pre>
+```html
+<section class="fake-content">
+  <h1>Fake content</h1>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+  <p>This is fake content. Your main web page contents would probably go here.</p>
+</section>
+```
 
-<div class="note">
-<p><strong>Note</strong>: You can feel free to change the fake content for some real content if you like.</p>
-</div>
+> **Примечание:** You can feel free to change the fake content for some real content if you like.
 
-<h3 id="Changes_to_the_existing_CSS">Changes to the existing CSS</h3>
+### Changes to the existing CSS
 
-<p>Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your <code>.info-box</code> rule to get rid of <code>margin: 0 auto;</code> (we no longer want the info-box centered), add {{cssxref("position")}}<code>: fixed;</code>, and stick it to the {{cssxref("top")}} of the browser viewport.</p>
+Next we need to make some small changes to the existing CSS, to get the info-box placed and positioned. Change your `.info-box` rule to get rid of `margin: 0 auto;` (we no longer want the info-box centered), add {{cssxref("position")}}`: fixed;`, and stick it to the {{cssxref("top")}} of the browser viewport.
 
-<p>It should now look like this:</p>
+It should now look like this:
 
-<pre class="brush: css">.info-box {
+```css
+.info-box {
   width: 450px;
   height: 400px;
   position: fixed;
   top: 0;
-}</pre>
+}
+```
 
-<h3 id="Styling_the_main_content">Styling the main content</h3>
+### Styling the main content
 
-<p>The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:</p>
+The only thing left for this example is to provide the main content with some styling. Add the following rule underneath the rest of your CSS:
 
-<pre class="brush: css">.fake-content {
+```css
+.fake-content {
   background-color: #a60000;
   color: white;
   padding: 10px;
   height: 2000px;
   margin-left: 470px;
-}</pre>
+}
+```
 
-<p>To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.</p>
+To start with, we give the content the same {{cssxref("background-color")}}, {{cssxref("color")}}, and {{cssxref("padding")}} as the info-box panels. We then give it a large {{cssxref("margin-left")}} to move it over to the right, making space for the info-box to sit in, so it is not overlapping anything else.
 
-<p>This marks the end of the second example; we hope you'll find the third just as interesting.</p>
+This marks the end of the second example; we hope you'll find the third just as interesting.
 
-<h2 id="A_sliding_hidden_panel">A sliding hidden panel</h2>
+## A sliding hidden panel
 
-<p>The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.</p>
+The final example we'll present here is a panel that slides on and off the screen at the press of an icon — as mentioned earlier, this is popular for situations like mobile layouts, where the available screen spaces is small, so you don't want to use up most of it by showing a menu or info panel instead of the useful content.
 
-<p>Our finished example will look like this:</p>
+Our finished example will look like this:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 950px;"></p>
+![](https://mdn.mozillademos.org/files/13366/hidden-sliding-panel.png)
 
-<div class="note">
-<p><strong>Note</strong>: You can see the finished example running live at <a href="http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html">hidden-info-panel.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html">source code</a>). Check it out to get an idea of what you will be building in this section of the article.</p>
-</div>
+> **Примечание:** You can see the finished example running live at [hidden-info-panel.html](http://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/hidden-info-panel.html) ([source code](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel.html)). Check it out to get an idea of what you will be building in this section of the article.
 
-<p>As a starting point, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html">hidden-info-panel-start.html</a> from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:</p>
+As a starting point, make a local copy of [hidden-info-panel-start.html](https://github.com/mdn/learning-area/blob/master/css/css-layout/practical-positioning-examples/hidden-info-panel-start.html) from our Github repo. This doesn't follow on from the previous example, so a fresh start file is required. Let's have a look at the HTML in the file:
 
-<pre class="brush: css">&lt;label for="toggle"&gt;❔&lt;/label&gt;
-&lt;input type="checkbox" id="toggle"&gt;
-&lt;aside&gt;
+```css
+<label for="toggle">❔</label>
+<input type="checkbox" id="toggle">
+<aside>
 
   ...
 
-&lt;/aside&gt;</pre>
+</aside>
+```
 
-<p>To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — <code>&lt;label&gt;</code> elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the <code>&lt;input&gt;</code> checkbox using the <code>for</code> and <code>id</code> attributes.</p>
+To start with here we've got a {{htmlelement("label")}} element and an {{htmlelement("input")}} element — `<label>` elements are normally used to associate a text label with a form element for accessibility purposes (allowing a screen user to see what description goes with what form element). Here it is associated with the `<input>` checkbox using the `for` and `id` attributes.
 
-<div class="note">
-<p><strong>Note</strong>: We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.</p>
-</div>
+> **Примечание:** We've put a special question mark character into our HTML to act as our info icon — this represents the button that will be pressed to show/hide the panel.
 
-<p>Here we are going to use these elements for a slightly different purpose — another useful side effect of <code>&lt;label&gt;</code> elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).</p>
+Here we are going to use these elements for a slightly different purpose — another useful side effect of `<label>` elements is that you can click a checkbox's label to check the checkbox, as well as just the checkbox itself. This has led to the well-known [checkbox hack](https://css-tricks.com/the-checkbox-hack/), which provides a JavaScript-free way of controlling an element by toggling a button. The element we'll be controlling is the {{htmlelement("aside")}} element that follows the other two (we've left its contents out of the above code listing for brevity).
 
-<p>In the below sections we'll explain how this all works.</p>
+In the below sections we'll explain how this all works.
 
-<h3 id="Styling_the_form_elements">Styling the form elements</h3>
+### Styling the form elements
 
-<p>First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:</p>
+First let's deal with the form elements — add the following CSS in between your {{htmlelement("style")}} tags:
 
-<pre class="brush: css">label[for="toggle"] {
+```css
+label[for="toggle"] {
   font-size: 3rem;
   position: absolute;
   top: 4px;
@@ -332,24 +330,24 @@ function setTabHandler(tab, tabPos) {
 input[type="checkbox"] {
   position: absolute;
   top: -100px;
-}</pre>
+}
+```
 
-<p>The first rule styles the <code>&lt;label&gt;</code>; here we've:</p>
+The first rule styles the `<label>`; here we've:
 
-<ul>
- <li>Set a large {{cssxref("font-size")}} to make the icon nice and big.</li>
- <li>Set {{cssxref("position")}} <code>absolute</code> on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.</li>
- <li>Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.</li>
- <li>Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.</li>
-</ul>
+- Set a large {{cssxref("font-size")}} to make the icon nice and big.
+- Set {{cssxref("position")}} `absolute` on it, and used {{cssxref("top")}} and {{cssxref("right")}} to position it nicely in the top-right corner.
+- Set a {{cssxref("z-index")}} of 1 on it — this is so that when the info panel is styled and shown, it doesn't cover up the icon; instead the icon will sit on top of it so it can be pressed again to hide the info pane.
+- Used the {{cssxref("cursor")}} property to change the mouse cursor when it is hovering over the icon to a hand pointer (like the one you see when links are hovered over), as an extra visual clue to users that the icon does something interesting.
 
-<p>The second rule sets {{cssxref("position")}} <code>absolute</code> on the actual checkbox <code>&lt;input&gt;</code> element, and hides it off the top of the screen. We don't actually want to see this on our UI.</p>
+The second rule sets {{cssxref("position")}} `absolute` on the actual checkbox `<input>` element, and hides it off the top of the screen. We don't actually want to see this on our UI.
 
-<h3 id="Styling_the_panel">Styling the panel</h3>
+### Styling the panel
 
-<p>Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:</p>
+Now it's time to style the actual sliding panel itself. Add the following rule to the bottom of your CSS:
 
-<pre class="brush: css">aside {
+```css
+aside {
   background-color: #a60000;
   color: white;
 
@@ -362,47 +360,42 @@ input[type="checkbox"] {
   right: -370px;
 
   transition: 0.6s all;
-}</pre>
+}
+```
 
-<p>There's a lot going on here — let's discuss it bit by bit:</p>
+There's a lot going on here — let's discuss it bit by bit:
 
-<ul>
- <li>First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.</li>
- <li>Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.</li>
- <li>We also include some horizontal {{cssxref("padding")}} to space it out a bit.</li>
- <li>Next we set {{cssxref("position")}}<code>: fixed;</code> on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.</li>
- <li>Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the <code>&lt;label&gt;</code> will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...</li>
-</ul>
+- First, we set some simple {{cssxref("background-color")}} and {{cssxref("color")}} on the info box.
+- Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.
+- We also include some horizontal {{cssxref("padding")}} to space it out a bit.
+- Next we set {{cssxref("position")}}`: fixed;` on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.
+- Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the `<label>` will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...
 
-<h3 id="Setting_the_checked_state">Setting the checked state</h3>
+### Setting the checked state
 
-<p>There is one final bit of CSS to add — put the following at the bottom of your CSS:</p>
+There is one final bit of CSS to add — put the following at the bottom of your CSS:
 
-<pre class="brush: css">input[type=checkbox]:checked + aside {
+```css
+input[type=checkbox]:checked + aside {
   right: 0px;
-}</pre>
-
-<p>The selector is pretty complex here — we are selecting the <code>&lt;aside&gt;</code> element adjacent to the <code>&lt;input&gt;</code> element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the <code>&lt;aside&gt;</code> to <code>0px</code>, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.</p>
-
-<p>So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.</p>
+}
+```
 
-<h2 id="Summary">Summary</h2>
+The selector is pretty complex here — we are selecting the `<aside>` element adjacent to the `<input>` element, but only when it is checked (note the use of the {{cssxref(":checked")}} pseudo-class to achieve this). When this is the case, we are setting the {{cssxref("right")}} property of the `<aside>` to `0px`, which causes the panel to appear on the screen again (smoothly due to the transition). Clicking the label again unchecks the checkbox, which hides the panel again.
 
-<p>So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.</p>
+So there you have it — a rather clever JavaScript-free way to create a toggling button effect. This will work in IE9 and above (the smooth transition will work in IE10 and above.) This effect does have some concerns — this is a bit of an abuse of form elements, as they weren't intended for this purpose. In addition, the effect is not great in terms of accessibility; the label is not focusable by default, and the non-semantic use of the form elements could cause issues with screen readers. JavaScript and a link or button might be more appropriate, but it is still fun to experiment with.
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p>
+## Summary
 
-<p> </p>
+So that rounds off our look at positioning — by now, you should have an idea of how the basic mechanics work, as well as understanding how to start applying these to building some interesting UI features. Don't worry if you didn't get this all immediately — positioning is a fairly advanced topic, and you can always work through the articles again to aid your understanding. The next subject we'll turn to is Flexbox.
 
-<h2 id="In_this_module">In this module</h2>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></li>
-</ul>
+## In this module
 
-<p> </p>
+- [Introduction to CSS layout](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Positioning](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Practical positioning examples](/ru/docs/Learn/CSS/CSS_layout/Practical_positioning_examples)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grids](/ru/docs/Learn/CSS/CSS_layout/Grids)
diff --git a/files/ru/learn/css/css_layout/responsive_design/index.md b/files/ru/learn/css/css_layout/responsive_design/index.md
index 5ece4b377b042a..59b2b90927b738 100644
--- a/files/ru/learn/css/css_layout/responsive_design/index.md
+++ b/files/ru/learn/css/css_layout/responsive_design/index.md
@@ -4,208 +4,188 @@ slug: Learn/CSS/CSS_layout/Responsive_Design
 translation_of: Learn/CSS/CSS_layout/Responsive_Design
 original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
 ---
-<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div>
+{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
 
-<p>На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция <em>отзывчивого (адаптивного) веб-дизайна</em> <em>(responsive web design</em> (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.</p>
+На заре веб-дизайна страницы создавались для экрана определённого размера. Если у пользователя был экран большего или меньшего размера чем ожидал дизайнер, то результат мог быть от нежелательных полос прокрутки, до слишком длинной строки и плохого использования пространства. Поскольку становились доступны много различных размеров экранов, появилась концепция _отзывчивого (адаптивного) веб-дизайна_ _(responsive web design_ (RWD)) — набор методов, которые позволяют веб-страницам менять свой макет и внешний вид в соответствии с разной шириной экрана, разрешением и т.д. Это та самая, идея которая изменила подход к дизайну веба для множества устройств, и в этой статье мы поможем вам понять основные методы, которые вам необходимо знать, чтобы освоить его.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), идея о том как работает CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a> и <a href="/en-US/docs/Learn/CSS/Building_blocks">Устройство CSS</a>.)</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>
-    <p>Понять базовые концепции и историю отзывчивого дизайна.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), идея о том как работает CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) и [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks).) |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Понять базовые концепции и историю отзывчивого дизайна.                                                                                                                                                                                   |
 
-<h2 id="Исторические_макеты_сайтов">Исторические макеты сайтов</h2>
+## Исторические макеты сайтов
 
-<p>В какой-то момент истории при разработке веб-сайта у вас было два варианта:</p>
+В какой-то момент истории при разработке веб-сайта у вас было два варианта:
 
-<ul>
- <li>Вы могли создать <em>жидкий </em>сайт, который будет растягиваться чтобы заполнить окно браузера</li>
- <li>или сайт с <em>фиксированной шириной</em>, который будет иметь фиксированный размер в пикселях.</li>
-</ul>
+- Вы могли создать _жидкий_ сайт, который будет растягиваться чтобы заполнить окно браузера
+- или сайт с _фиксированной шириной_, который будет иметь фиксированный размер в пикселях.
 
-<p>Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.</p>
+Эти два подхода, как правило, приводили к тому, что веб-сайт лучше всего выглядел на экране человека, создавшего сайт! Жидкий сайт приводил к раздавленному дизайну на маленьких экранах (как видно ниже) и не читаемо длинным строкам на больших.
 
-<img alt="A layout with two columns squashed into a mobile size viewport." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;">
+![A layout with two columns squashed into a mobile size viewport.](https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Посмотрите этот простой жидкий макет: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">исходный код</a>. При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.</p>
-</div>
+> **Примечание:** Посмотрите этот простой жидкий макет: [пример](https://mdn.github.io/css-examples/learn/rwd/liquid-width.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html). При просмотре примера, растягивайте и сжимайте окно браузера чтобы увидеть, как это выглядит при разных размерах.
 
-<p>Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.</p>
+Сайт с фиксированной шириной рисковал иметь горизонтальную полосу прокрутки на экранах меньших чем ширина сайта (как видно ниже) и много белого пространства на краях дизайна на больших экранах.
 
-<img alt="A layout with a horizontal scrollbar in a mobile viewport." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;">
+![A layout with a horizontal scrollbar in a mobile viewport.](https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Посмотрите этот простой макет с фиксированной шириной: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">исходный код</a>. Снова изучите результат по мере изменения размера окна браузера.</p>
-</div>
+> **Примечание:** Посмотрите этот простой макет с фиксированной шириной: [пример](https://mdn.github.io/css-examples/learn/rwd/fixed-width.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html). Снова изучите результат по мере изменения размера окна браузера.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Скриншоты выше сделаны используя <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a> в Firefox DevTools.</p>
-</div>
+> **Примечание:** Скриншоты выше сделаны используя [Responsive Design Mode](/ru/docs/Tools/Responsive_Design_Mode) в Firefox DevTools.
 
-<p>Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие <em>m.example.com</em> или <em>example.mobi</em>). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.</p>
+Когда мобильный веб стал становиться реальностью с первыми функциональными телефонами, компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (часто что-то наподобие _m.example.com_ или _example.mobi_). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.
 
-<p>Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.</p>
+Кроме того, эти мобильные сайты часто предлагали очень урезанный вариант. Поскольку мобильные гаджеты стали мощнее и способными отображать целые веб-сайты, пользователей мобильных устройств раздражало, что они обнаруживали себя запертыми в мобильной версии сайта, неспособные получить доступ к информации, которая, как они знали, есть в полнофункциональной версии сайта.
 
-<h2 id="Гибкий_макет_до_отзывчивого_дизайна">Гибкий макет до отзывчивого дизайна</h2>
+## Гибкий макет до отзывчивого дизайна
 
-<p>Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">Resolution dependent layout</a>, описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.</p>
+Было разработано несколько подходов чтобы попытаться разрешить недостатки построения веб-сайтов жидким методом или методом с фиксированной шириной. В 2004 году Камерон Адамс написал пост [Resolution dependent layout](http://www.themaninblue.com/writing/perspective/2004/09/21/), описывающий метод создания дизайна который мог бы адаптироваться к разным разрешениям экрана. Этот подход требовал, чтобы JavaScript узнавал разрешение экрана и загружал корректный CSS.
 
-<p>Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.</p>
+Зои Миккели Гилленвотер сыграла важную роль в свой работе описав и формализовав различные способы посредствам которых могут быть созданы гибкие сайты, пытаясь найти золотую середину между заполнением экрана или полностью фиксированным размером.
 
-<h2 id="Отзывчивый_дизайн">Отзывчивый дизайн</h2>
+## Отзывчивый дизайн
 
-<p>Термин адаптивный дизайн был <a href="https://alistapart.com/article/responsive-web-design/">Придуман Итаном Маркоттом в 2010 году</a> и описывал использование трёх методов в сочетании.</p>
+Термин адаптивный дизайн был [Придуман Итаном Маркоттом в 2010 году](https://alistapart.com/article/responsive-web-design/) и описывал использование трёх методов в сочетании.
 
-<ol>
- <li>Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - <a href="https://alistapart.com/article/fluidgrids/">Fluid Grids</a> (опубликовано в 2009 в A List Apart).</li>
- <li>Вторым методом была идея <a href="http://unstoppablerobotninja.com/entry/fluid-images">жидких изображений</a>. Используя очень простой метод настройки свойства <code>max-width</code> на <code>100%</code>, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.</li>
- <li>Третьим ключевым компонентом были <a href="/en-US/docs/Web/CSS/Media_Queries">медиавыражения</a>. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.</li>
-</ol>
+1.  Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - [Fluid Grids](https://alistapart.com/article/fluidgrids/) (опубликовано в 2009 в A List Apart).
+2.  Вторым методом была идея [жидких изображений](http://unstoppablerobotninja.com/entry/fluid-images). Используя очень простой метод настройки свойства `max-width` на `100%`, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
+3.  Третьим ключевым компонентом были [медиавыражения](/ru/docs/Web/CSS/Media_Queries). Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
 
-<p>Очень важно понять, что <strong>адаптивный веб-дизайн </strong>— <strong>это не отдельная технология</strong>, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.</p>
+Очень важно понять, что **адаптивный веб-дизайн** — **это не отдельная технология**, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.
 
-<p>Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.</p>
+Остальная часть этой статьи укажет вам на различные функции веб-платформы, которые вы, возможно, захотите использовать при создании адаптивного сайта.
 
-<h2 id="Медиавыражения">Медиавыражения</h2>
+## Медиавыражения
 
-<p>Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.</p>
+Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.
 
-<p>Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору <code>.container</code> только если эти две вещи истины.</p>
+Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору `.container` только если эти две вещи истины.
 
-<pre class="brush: css"><code>@media screen and (min-width: 800px) {
+```css
+@media screen and (min-width: 800px) {
   .container {
     margin: 1em 2em;
   }
-} </code>
-</pre>
+}
+```
 
-<p>Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так, чтобы наилучшим образом соответствовать разным размерам экрана. Точки, в которых применяются медиавыражения и меняется макет, известны как <em>контрольные точки.</em></p>
+Вы можете добавлять несколько медиавыражений в пределах одной таблицы стилей, подстраивая весь ваш макет или его части так, чтобы наилучшим образом соответствовать разным размерам экрана. Точки, в которых применяются медиавыражения и меняется макет, известны как _контрольные точки._
 
-<p>Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют <strong>mobile first</strong> дизайном.</p>
+Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют **mobile first** дизайном.
 
-<p>Узнать больше о <a href="/en-US/docs/Web/CSS/Media_Queries">медиавыражениях</a> можно в документации MDN.</p>
+Узнать больше о [медиавыражениях](/ru/docs/Web/CSS/Media_Queries) можно в документации MDN.
 
-<h2 id="Гибкие_сетки">Гибкие сетки</h2>
+## Гибкие сетки
 
-<p>Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.</p>
+Отзывчивые сайты не просто меняют свой макет между контрольными точками, они построены на гибких сетках. Гибкая сетка подразумевает что вам не надо заботиться о каждом возможном существующем размере устройства и строить для них идеальный макет в пикселях. Такой подход был бы невозможен имея широкое множество существующих устройств разных размеров, как и факт того, что даже на ПК люди не всегда используют браузер с развёрнутым до максимума окном.
 
-<p>Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.</p>
+Используя гибкую сетку, вам всего лишь надо добавить контрольную точку и изменить дизайн в точке, когда ваш контент начинает выглядеть плохо. Например, если длина строки становится нечитаемо длинной при увеличении размера экрана, или блок становится сдавленным с двумя словами в каждой строке при сужении экрана.
 
-<p>В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a>. Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.</p>
+В первые дни отзывчивого дизайна, нашим единственным вариантом выполнения было использование [floats](/ru/docs/Learn/CSS/CSS_layout/Floats). Гибкий обтекаемый макет достигался путём присвоения каждому элементу процентной ширины удостоверившись, что итоговые значения в макете не превышают 100%. В своей оригинальной статье о плавучих сетках Маркотт подробно описал формулу для преобразования макета, созданного с использованием пикселей, в проценты.
 
-<pre><code>target / context = result </code>
-</pre>
+```
+target / context = result
+```
 
-<p>Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.</p>
+Например, если размер нашего целевого столбца — 60 пикселей, а контекст (или контейнер) в котором он находится — 960 пикселей, то мы делим 60 на 960 чтобы получить значение которое мы можем использовать в нашем CSS, после переноса десятичной точки вправо на 2 цифры.
 
-<pre class="brush: css"><code>.col {
+```css
+.col {
   width: 6.25%; /* 60 / 960 = 0.0625 */
-} </code>
-</pre>
+}
+```
 
-<p>Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Устаревших методов макетов</a>. В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.</p>
+Этот подход сегодня можно найти во многих местах в Интернете и он задокументирован здесь в разделе макетов в нашей статье [Устаревших методов макетов](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods). В вашей работе вероятно, что вы столкнётесь с веб-сайтами, использующими этот подход, поэтому стоит понимать его, даже если вы не будете строить современные сайты используя гибкие сетки основанные на float.
 
-<p>Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:</p>
+Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:
 
-<img alt="A mobile view of the layout with boxes stacked on top of each other vertically." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;">
+![A mobile view of the layout with boxes stacked on top of each other vertically.](https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png)
 
-<p>На более широких экранах они перемещаются в два столбца:</p>
+На более широких экранах они перемещаются в два столбца:
 
-<img alt="A desktop view of a layout with two columns." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;">
+![A desktop view of a layout with two columns.](https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете найти <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">живой пример</a> и <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">исходный код</a> этого примера на GitHub.</p>
-</div>
+> **Примечание:** вы можете найти [живой пример](https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html) и [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html) этого примера на GitHub.
 
-<h2 id="Современные_технологии_макетов">Современные технологии макетов</h2>
+## Современные технологии макетов
 
-<p>Современные методы макетов такие как <a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Макет с несколькими столбцами</a>, <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, и <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a> являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.</p>
+Современные методы макетов такие как [Макет с несколькими столбцами](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout), [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox), и [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids) являются отзывчивыми по умолчанию. Они все предполагают, что вы пытаетесь создать гибкую сетку и дают вам более лёгкий способ сделать так.
 
-<h3 id="Multicol">Multicol</h3>
+### Multicol
 
-<p>Самый старый из этих методов — это multicol, когда вы задаёте <code>column-count</code>, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.</p>
+Самый старый из этих методов — это multicol, когда вы задаёте `column-count`, это отражает то на сколько столбцов вы хотите разбить ваш контент. Далее браузер рассчитывает их размер, размер, который изменится согласно размеру экрана.
 
-<pre class="brush: css"><code>.container {
+```css
+.container {
   column-count: 3;
-} </code>
-</pre>
+}
+```
 
-<p>Если вместо этого вы зададите <code>column-width</code>, то вы определите <em>минимальную </em>ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.</p>
+Если вместо этого вы зададите `column-width`, то вы определите _минимальную_ ширину. Браузер создаст столько столбцов той ширины, сколько будет комфортно умещаться в контейнер, а затем поделит оставшееся пространство между всеми столбцами. Поэтому число столбцов будет меняться согласно тому сколько имеется места.
 
-<pre class="brush: css"><code>.container {
+```css
+.container {
   column-width: 10em;
-} </code>
-</pre>
+}
+```
 
-<h3 id="Flexbox">Flexbox</h3>
+### Flexbox
 
-<p>В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения <code>flex-grow</code> и <code>flex-shrink</code> вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.</p>
+В Flexbox, в качестве исходного поведения, flex элементы будут сжиматься и распределять пространство между элементами в соответствии с пространством в их контейнере. Изменяя значения `flex-grow` и `flex-shrink` вы можете указать, как вы хотите, чтобы предметы вели себя когда они сталкиваются с большим или меньшим пространством вокруг себя.
 
-<p>В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись <code>flex: 1</code> как описано в главе <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items">Flexbox: Гибкое изменение размеров flex элементов</a>.</p>
+В примере ниже каждый flex элемент будет принимать равное количество пространства во flex контейнере используя запись `flex: 1` как описано в главе [Flexbox: Гибкое изменение размеров flex элементов](/ru/docs/Learn/CSS/CSS_layout/Flexbox#Flexible_sizing_of_flex_items).
 
-<pre class="brush: css"><code>.container {
+```css
+.container {
   display: flex;
 }
 
 .item {
   flex: 1;
-} </code>
-</pre>
+}
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">исходный код</a>.</p>
-</div>
+> **Примечание:** В качестве примера мы перестроили простой отзывчивый макет выше, в этот раз используя flexbox. Вы видите что нас больше не надо использовать странные процентные значения для подсчёта размера столбцов: [пример](https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html).
 
-<h3 id="CSS_grid">CSS grid</h3>
+### CSS grid
 
-<p>В макете CSS Grid единицы измерения <code>fr</code> позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером <code>1fr</code>. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit">Гибкие grids с единицами fr</a>.</p>
+В макете CSS Grid единицы измерения `fr` позволяют распределять доступное пространство между дорожками сетки. Следующий пример создаёт grid контейнер с тремя дорожками размером `1fr`. Это создаст три вертикальные дорожки, каждая занимающая одну часть свободного пространства в контейнере. Вы можете узнать больше об этом подходе к созданию сетки в теме Изучение Макета Grid в разделе [Гибкие grids с единицами fr](/ru/docs/Learn/CSS/CSS_layout/Grids#Flexible_grids_with_the_fr_unit).
 
-<pre class="brush: css"><code>.container {
+```css
+.container {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
-} </code>
-</pre>
+}
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">исходный код</a>.</p>
-</div>
+> **Примечание:** версия grid макета ещё проще, поскольку мы можем определить столбцы в .wrapper: [пример](https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html).
 
-<h2 id="Отзывчивые_изображения">Отзывчивые изображения</h2>
+## Отзывчивые изображения
 
-<p>Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:</p>
+Самый простой подход к отзывчивым изображениям был описан в ранних статьях Маркотта по отзывчивому дизайну. По сути, вы берёте изображение максимального размера, которое могло понадобиться, и уменьшаете его. Этот подход до сих пор используется и в большинстве таблиц стилей вы найдёте следующий CSS:
 
-<pre class="brush: css"><code>img {
+```css
+img {
   max-width: 100%;
-} </code>
-</pre>
+}
+```
 
-<p>Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера.  Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.</p>
+Существуют очевидные недостатки к этому подходу. Изображение может быть изображено намного меньше своего исходного размера, что является пустой тратой пропускной способности — пользователь мобильных может загружать изображение, в несколько раз превышающее размер того, что он фактически видит в окне браузера. Кроме того, вам может не понадобиться такое же соотношение сторон изображения на мобильном устройстве, как на компьютере. Либо, учитывая меньший размер изображения на мобильном телефоне, вы можете захотеть показать совсем другое изображение, которое легче понять на маленьком экране. Такие вещи можно достичь, просто уменьшая изображение.
 
-<p>Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты <code>srcset</code> и <code>sizes</code> элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.</p>
+Отзывчивые изображения, используя элемент {{htmlelement("picture")}} и атрибуты `srcset` и `sizes` элемента {{htmlelement("img")}} оба решают эти проблемы. Вы можете указать несколько размеров вместе с «подсказками» (метаданные, описывающие размер экрана и разрешение, для которых изображение лучше всего подходит), и браузер выберет наиболее подходящее изображение для каждого устройства, гарантируя, что пользователь загрузит изображение подходящего размера для устройства, которое они используют.
 
-<p>Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.</p>
+Вы также можете напрямую использовать изображения разных размеров, обеспечивая разное кадрирование или совершенно другое изображение для разных размеров экрана.
 
-<p>Вы можете найти подробное <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">руководство по отзывчивым изображениям в разделе изучения HTML </a>на MDN.</p>
+Вы можете найти подробное [руководство по отзывчивым изображениям в разделе изучения HTML ](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)на MDN.
 
-<h2 id="Отзывчивая_типографика">Отзывчивая типографика</h2>
+## Отзывчивая типографика
 
-<p>Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.</p>
+Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.
 
-<p>В этом примере, мы хотим задать нашему заголовку первого уровня <code>4rem</code>, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум <code>1200px</code>.</p>
+В этом примере, мы хотим задать нашему заголовку первого уровня `4rem`, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум `1200px`.
 
-<pre class="brush: css"><code>html {
+```css
+html {
   font-size: 1em;
 }
 
@@ -217,101 +197,96 @@ h1 {
   h1 {
     font-size: 4rem;
   }
-} </code>
-</pre>
+}
+```
 
-<p>Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.</p>
+Мы отредактировали наш приведённый выше пример отзывчивой сетки grid, чтобы он также включал в себя адаптивный тип, используя описанный метод. Вы можете видеть, как заголовок меняет размеры, когда макет переходит в версию с двумя столбцами.
 
-<p>В мобильных версиях заголовок меньше:</p>
+В мобильных версиях заголовок меньше:
 
-<img alt="A stacked layout with a small heading size." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;">
+![A stacked layout with a small heading size.](https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png)
 
-<p>На компьютерах, однако, мы видим больший размер заголовка:</p>
+На компьютерах, однако, мы видим больший размер заголовка:
 
-<img alt="A two column layout with a large heading." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;">
+![A two column layout with a large heading.](https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png)
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: смотрите этот пример в действии: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">пример</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">исходный код</a>.</p>
-</div>
+> **Примечание:** смотрите этот пример в действии: [пример](https://mdn.github.io/css-examples/learn/rwd/type-rwd.html), [исходный код](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html).
 
-<p>Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.</p>
+Такой подход к типографике показывает, что вам не нужно ограничиваться в использовании медиавыражений только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.
 
-<h3 id="Using_viewport_units_for_responsive_typography">Using viewport units for responsive typography</h3>
+### Using viewport units for responsive typography
 
-<p>An interesting approach is to use the viewport unit <code>vw</code> to enable responsive typography. <code>1vw</code> is equal to one percent of the viewport width, meaning that if you set your font size using <code>vw</code>, it will always relate to the size of the viewport.</p>
+An interesting approach is to use the viewport unit `vw` to enable responsive typography. `1vw` is equal to one percent of the viewport width, meaning that if you set your font size using `vw`, it will always relate to the size of the viewport.
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: 6vw;
-}</pre>
+}
+```
 
-<p>The problem with doing the above is that the user loses the ability to zoom any text set using the <code>vw</code> unit, as that text is always related to the size of the viewport. <strong>Therefore you should never set text using viewport units alone</strong>.</p>
+The problem with doing the above is that the user loses the ability to zoom any text set using the `vw` unit, as that text is always related to the size of the viewport. **Therefore you should never set text using viewport units alone**.
 
-<p>There is a solution, and it involves using <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>. If you add the <code>vw</code> unit to a value set using a fixed size such as <code>em</code>s or <code>rem</code>s then the text will still be zoomable. Essentially, the <code>vw</code> unit adds on top of that zoomed value:</p>
+There is a solution, and it involves using [`calc()`](/en-US/docs/Web/CSS/calc). If you add the `vw` unit to a value set using a fixed size such as `em`s or `rem`s then the text will still be zoomable. Essentially, the `vw` unit adds on top of that zoomed value:
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   font-size: calc(1.5rem + 3vw);
-}</pre>
+}
+```
 
-<p>This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.</p>
+This means that we only need to specify the font size for the heading once, rather than set it up for mobile and redefine it in the media queries. The font then gradually increases as you increase the size of the viewport.
 
-<div class="blockIndicator note">
-<p>See an example of this in action: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">example</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">source code</a>.</p>
-</div>
+> **Примечание:** See an example of this in action: [example](https://mdn.github.io/css-examples/learn/rwd/type-vw.html), [source code](https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html).
 
-<h2 id="The_viewport_meta_tag">The viewport meta tag</h2>
+## The viewport meta tag
 
-<p>If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the <code>&lt;head&gt;</code> of the document.</p>
+If you look at the HTML source of a responsive page, you will usually see the following {{htmlelement("meta")}} tag in the `<head>` of the document.
 
-<pre class="brush: html"><code>&lt;meta name="viewport" content="width=device-width,initial-scale=1"&gt;</code>
-</pre>
+```html
+<meta name="viewport" content="width=device-width,initial-scale=1">
+```
 
-<p>This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.</p>
+This meta tag tells mobile browsers that they should set the width of the viewport to the device width, and scale the document to 100% of its intended size, which shows the document at the mobile-optimized size that you intended.
 
-<p>Why is this needed? Because mobile browsers tend to lie about their viewport width.</p>
+Why is this needed? Because mobile browsers tend to lie about their viewport width.
 
-<p>This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.</p>
+This meta tag exists because when the original iPhone launched and people started to view websites on a small phone screen, most sites were not mobile optimized. The mobile browser would, therefore, set the viewport width to 960 pixels, render the page at that width, and show the result as a zoomed-out version of the desktop layout. Other mobile browsers (e.g. on Google Android) did the same thing. Users could zoom in and pan around the website to view the bits they were interested in, but it looked bad. You will still see this today if you have the misfortune to come across a site that does not have a responsive design.
 
-<p>The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting <code>width=device-width</code> you are overriding Apple's default <code>width=960px</code> with the actual width of the device, so your media queries will work as intended.</p>
+The trouble is that your responsive design with breakpoints and media queries won't work as intended on mobile browsers. If you've got a narrow screen layout that kicks in at 480px viewport width or less, and the viewport is set at 960px, you'll never see your narrow screen layout on mobile. By setting `width=device-width` you are overriding Apple's default `width=960px` with the actual width of the device, so your media queries will work as intended.
 
-<p><strong>So you should <em>always</em> include the above line of HTML in the head of your documents.</strong></p>
+**So you should _always_ include the above line of HTML in the head of your documents.**
 
-<p>There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.</p>
+There are other settings you can use with the viewport meta tag, however in general the above line is what you will want to use.
 
-<ul>
- <li><code>initial-scale</code>: Sets the initial zoom of the page, which we set to 1.</li>
- <li><code>height</code>: Sets a specific height for the viewport.</li>
- <li><code>minimum-scale</code>: Sets the minimum zoom level.</li>
- <li><code>maximum-scale</code>: Sets the maximum zoom level.</li>
- <li><code>user-scalable</code>: Prevents zooming if set to <code>no</code>.</li>
-</ul>
+- `initial-scale`: Sets the initial zoom of the page, which we set to 1.
+- `height`: Sets a specific height for the viewport.
+- `minimum-scale`: Sets the minimum zoom level.
+- `maximum-scale`: Sets the maximum zoom level.
+- `user-scalable`: Prevents zooming if set to `no`.
 
-<p>You should avoid using <code>minimum-scale</code>, <code>maximum-scale</code>, and in particular setting <code>user-scalable</code> to <code>no</code>. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.</p>
+You should avoid using `minimum-scale`, `maximum-scale`, and in particular setting `user-scalable` to `no`. Users should be allowed to zoom as much or as little as they need to; preventing this causes accessibility problems.
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: There is a CSS @ rule designed to replace the viewport meta tag — <a href="/en-US/docs/Web/CSS/@viewport">@viewport</a> — however, it has poor browser support. When both are used the meta tag overrides @viewport.</p>
-</div>
+> **Примечание:** There is a CSS @ rule designed to replace the viewport meta tag — [@viewport](/ru/docs/Web/CSS/@viewport) — however, it has poor browser support. When both are used the meta tag overrides @viewport.
 
-<h2 id="Summary">Summary</h2>
+## Summary
 
-<p>Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.</p>
+Responsive design refers to a site or application design that responds to the environment in which it is viewed. It encompasses a number of CSS and HTML features and techniques and is now essentially just how we build websites by default. Consider the sites that you visit on your phone — it is probably fairly unusual to come across a site that is the desktop version scaled down, or where you need to scroll sideways to find things. This is because the web has moved to this approach of designing responsively.
 
-<p>It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.</p>
+It has also become much easier to achieve responsive designs with the help of the layout methods you have learned in these lessons. If you are new to web development today you have many more tools at your disposal than in the early days of responsive design. It is therefore worth checking the age of any materials you are referencing. While the historical articles are still useful, modern use of CSS and HTML makes it far easier to create elegant and useful designs, no matter what device your visitor views the site with.
 
-<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p>
+{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal flow</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">Responsive design</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
- <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental layout comprehension assessment</a></li>
-</ul>
+- [Introduction to CSS layout](/ru/docs/Learn/CSS/CSS_layout/Introduction)
+- [Normal flow](/ru/docs/Learn/CSS/CSS_layout/Normal_Flow)
+- [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox)
+- [Grid](/ru/docs/Learn/CSS/CSS_layout/Grids)
+- [Floats](/ru/docs/Learn/CSS/CSS_layout/Floats)
+- [Positioning](/ru/docs/Learn/CSS/CSS_layout/Positioning)
+- [Multiple-column layout](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout)
+- [Responsive design](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design)
+- [Beginner's guide to media queries](/ru/docs/Learn/CSS/CSS_layout/Media_queries)
+- [Legacy layout methods](/ru/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods)
+- [Supporting older browsers](/ru/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers)
+- [Fundamental layout comprehension assessment](/ru/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension)
diff --git a/files/ru/learn/css/first_steps/getting_started/index.md b/files/ru/learn/css/first_steps/getting_started/index.md
index 0b1d2ef1586138..52c1cc4584fc13 100644
--- a/files/ru/learn/css/first_steps/getting_started/index.md
+++ b/files/ru/learn/css/first_steps/getting_started/index.md
@@ -11,252 +11,264 @@ tags:
   - Синтаксис
 translation_of: Learn/CSS/First_steps/Getting_started
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div>
+В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
 
-<p class="summary">В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, [Базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания [работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), и базовые знания HTML (смотрите [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML).) |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Базовое программное обеспечение</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, и базовые знания HTML (смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>.)</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять основы связывания CSS-документа с HTML-файлом и уметь выполнять простое форматирование текста с помощью CSS.</td>
-  </tr>
- </tbody>
-</table>
+## Начнём с HTML
 
-<h2 id="Начнём_с_HTML">Начнём с HTML</h2>
+Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как `index.html` в папке на вашем компьютере.
 
-<p>Нашей отправной точкой является HTML-документ. Вы можете скопировать код снизу, если вы хотите работать на своём компьютере. Сохраните приведённый ниже код как <code>index.html</code> в папке на вашем компьютере.</p>
+```html
+<!doctype html>
+<html lang="ru">
+<head>
+    <meta charset="utf-8">
+    <title>Начало работы с CSS</title>
+</head>
 
-<pre class="brush: html">&lt;!doctype html&gt;
-&lt;html lang="ru"&gt;
-&lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Начало работы с CSS&lt;/title&gt;
-&lt;/head&gt;
+<body>
 
-&lt;body&gt;
+    <h1>Я заголовок первого уровня</h1>
 
-    &lt;h1&gt;Я заголовок первого уровня&lt;/h1&gt;
+    <p>Это абзац. В нём есть <span>элемент span</span>,
+а также <a href="http://example.com">ссылка</a>.</p>
 
-    &lt;p&gt;Это абзац. В нём есть &lt;span&gt;элемент span&lt;/span&gt;,
-а также &lt;a href="http://example.com"&gt;ссылка&lt;/a&gt;.&lt;/p&gt;
+    <p>Это второй абзац. Он содержит <em>акцентирующий</em> текст.</p>
 
-    &lt;p&gt;Это второй абзац. Он содержит &lt;em&gt;акцентирующий&lt;/em&gt; текст.&lt;/p&gt;
+    <ul>
+        <li>Элемент один</li>
+        <li>Элемент два</li>
+        <li>Элемент <em>три</em></li>
+    </ul>
 
-    &lt;ul&gt;
-        &lt;li&gt;Элемент один&lt;/li&gt;
-        &lt;li&gt;Элемент два&lt;/li&gt;
-        &lt;li&gt;Элемент &lt;em&gt;три&lt;/em&gt;&lt;/li&gt;
-    &lt;/ul&gt;
+</body>
 
-&lt;/body&gt;
+</html>
+```
 
-&lt;/html&gt;
-</pre>
+> **Примечание:** Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Если вы читаете это на устройстве или в среде, где вы не можете легко создавать файлы, не беспокойтесь — ниже представлены редакторы кода, чтобы вы могли написать код прямо здесь, на странице.</p>
-</div>
+## Добавление CSS в наш документ
 
-<h2 id="Добавление_CSS_в_наш_документ">Добавление CSS в наш документ</h2>
+Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.
 
-<p>Самое первое, что нам нужно сделать, — это сообщить HTML-документу, что у нас есть некоторые правила CSS, которые мы хотим использовать. Существует три различных способа применения CSS к документу HTML, с которым вы обычно сталкиваетесь, однако сейчас мы рассмотрим наиболее обычный и полезный способ сделать это — связать CSS с заголовком вашего документа.</p>
+Создайте файл в той же папке, что и документ HTML, и сохраните его как `styles.css`. Расширение .css показывает, что это файл CSS.
 
-<p>Создайте файл в той же папке, что и документ HTML, и сохраните его как <code>styles.css</code>. Расширение .css показывает, что это файл CSS.</p>
+Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри{{htmlelement("head")}} HTML документа:
 
-<p>Чтобы связать styles.css с index.html, добавьте следующую строку где-то внутри{{htmlelement("head")}} HTML документа:</p>
+```html
+<link rel="stylesheet" href="styles.css">
+```
 
-<pre class="brush: html">&lt;link rel="stylesheet" href="styles.css"&gt;</pre>
+Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут _rel_, и местоположение этой таблицы стилей в качестве значения атрибута _href._ вы можете проверить, работает ли CSS, добавив правило в _styles.css_. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:
 
-<p>Элемент {{htmlelement("link")}} сообщает браузеру, что у нас есть таблица стилей, используя атрибут <em>rel</em>, и местоположение этой таблицы стилей в качестве значения атрибута <em>href.</em> вы можете проверить, работает ли CSS, добавив правило в <em>styles.css</em>. Используя ваш редактор кода, добавьте следующее в ваш файл CSS:</p>
-
-<pre class="brush: css">h1 {
+```css
+h1 {
   color: red;
-}</pre>
+}
+```
 
-<p>Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.</p>
+Сохраните файлы HTML и CSS и перезагрузите страницу в веб-браузере. Заголовок первого уровня в верхней части документа теперь должен быть красным. Если это произойдёт, поздравляю — вы успешно применили CSS к документу HTML. Если этого не произойдёт, внимательно проверьте, правильно ли вы ввели всё.
 
-<p>Вы можете продолжить работу в <code>styles.css</code> локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.</p>
+Вы можете продолжить работу в `styles.css` локально, или вы можете использовать наш интерактивный редактор ниже, чтобы продолжить этот урок. Интерактивный редактор действует так, как если бы CSS на первой панели был связан с документом HTML, как это было в нашем документе выше.
 
-<h2 id="Стилизация_HTML-элементов">Стилизация HTML-элементов</h2>
+## Стилизация HTML-элементов
 
-<p>Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент<em> selector</em> — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор <code>p</code>. Чтобы сделать все абзацы зелёными, вы должны использовать:</p>
+Делая наш заголовок красным, мы уже продемонстрировали, что можем нацеливать и стилизовать элемент HTML. Мы делаем это путём нацеливания на элемент _selector_ — это селектор, который напрямую соответствует имени элемента HTML. Чтобы нацелиться на все абзацы в документе, вы должны использовать селектор `p`. Чтобы сделать все абзацы зелёными, вы должны использовать:
 
-<pre class="brush: css">p {
+```css
+p {
   color: green;
-}</pre>
+}
+```
 
-<p>Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:</p>
+Вы можете выбрать несколько селекторов одновременно, разделив их запятыми. Если я хочу, чтобы все параграфы и все элементы списка были зелёными, моё правило выглядит так:
 
-<pre class="brush: css">p, li {
+```css
+p, li {
     color: green;
-}</pre>
+}
+```
 
-<p>Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.</p>
+Попробуйте это в интерактивном редакторе ниже (отредактируйте поля кода) или в своём локальном документе CSS.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}}
 
-<h2 id="Изменение_поведения_элементов_по_умолчанию">Изменение поведения элементов по умолчанию</h2>
+## Изменение поведения элементов по умолчанию
 
-<p>Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.</p>
+Когда мы смотрим на хорошо размеченный HTML-документ, даже такой простой, как наш пример, мы можем увидеть, как браузер делает HTML читаемым, добавив некоторые стили по умолчанию. Заголовки большие и жирные, в нашем списке есть маркеры. Это происходит потому, что в браузерах есть внутренние таблицы стилей, содержащие стили по умолчанию, которые по умолчанию применяются ко всем страницам; без них весь текст работал бы вместе, и мы должны были бы стилизовать всё с нуля. Все современные браузеры по умолчанию отображают HTML-контент практически одинаково.
 
-<p>Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш <code>&lt;ul&gt;</code> — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:</p>
+Однако вам часто захочется что-то другое, кроме выбора, сделанного браузером. Это можно сделать, просто выбрав элемент HTML, который вы хотите изменить, и используя правило CSS, чтобы изменить его внешний вид. Хорошим примером является наш `<ul>` — неупорядоченный список. Он добавляет маркеры, и если я решу, что я не хочу эти маркеры, я могу удалить их вот так:
 
-<pre class="brush: css">li {
+```css
+li {
   list-style-type: none;
-}</pre>
+}
+```
 
-<p>Попробуйте добавить это в свой CSS сейчас.</p>
+Попробуйте добавить это в свой CSS сейчас.
 
-<p>Свойство <code>list-style-type</code> — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.</p>
+Свойство `list-style-type` — это хорошее свойство, информацию о котором можно найти на MDN, чтобы увидеть, какие значения поддерживаются. Взгляните на страницу для [`list-style-type`](/en-US/docs/Web/CSS/list-style-type) и вы найдёте интерактивный пример в верхней части страницы, чтобы опробовать некоторые другие значения, затем все допустимые значения будут подробно описаны ниже.
 
-<p>Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение <code>square</code>.</p>
+Глядя на эту страницу, вы обнаружите, что помимо удаления маркеров списка вы можете изменить их — попробуйте изменить их на квадратные маркеры, используя значение `square`.
 
-<h2 id="Добавление_класса">Добавление класса</h2>
+## Добавление класса
 
-<p>Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.</p>
+Пока у нас есть стилизованные элементы, основанные на их именах HTML-элементов. Это работает до тех пор, пока вы хотите, чтобы все элементы этого типа в вашем документе выглядели одинаково. В большинстве случаев это не так, и вам нужно будет найти способ выбрать подмножество элементов, не меняя остальные. Самый распространённый способ сделать это — добавить класс к вашему HTML-элементу и нацелиться на этот класс.
 
-<p>В своём HTML-документе добавьте Атрибут <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class">class</a> ко второму пункту списка. Ваш список теперь будет выглядеть так:</p>
+В своём HTML-документе добавьте Атрибут [class](/ru/docs/Web/HTML/Global_attributes/class) ко второму пункту списка. Ваш список теперь будет выглядеть так:
 
-<pre class="brush: html; highlight[3]">&lt;ul&gt;
-  &lt;li&gt;Элемент один&lt;/li&gt;
-  &lt;li <strong>class="special"</strong>&gt;Элемент два&lt;/li&gt;
-  &lt;li&gt;Элемент &lt;em&gt;три&lt;/em&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li>Элемент один</li>
+  <li class="special">Элемент два</li>
+  <li>Элемент <em>три</em></li>
+</ul>
+```
 
-<p>В вашем CSS вы можете выбрать класс <code>special</code> к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:</p>
+В вашем CSS вы можете выбрать класс `special` к любому элементу на странице, чтобы он выглядел так же, как и этот элемент списка. Добавьте следующее в ваш файл CSS:
 
-<pre class="brush: css">.special {
+```css
+.special {
   color: orange;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Сохраните и обновите, чтобы увидеть результат.</p>
+Сохраните и обновите, чтобы увидеть результат.
 
-<p>Вы можете захотеть, чтобы &lt;span&gt; в абзаце также был оранжевым и жирным. Попробуйте добавить класс "<code>special"</code>, затем перезагрузите страницу и посмотрите, что получится.</p>
+Вы можете захотеть, чтобы \<span> в абзаце также был оранжевым и жирным. Попробуйте добавить класс "`special"`, затем перезагрузите страницу и посмотрите, что получится.
 
-<p>Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:</p>
+Иногда вы увидите правила с селектором, который перечисляет селектор HTML-элемента вместе с классом:
 
-<pre class="brush: css">li.special {
+```css
+li.special {
   color: orange;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к <code>&lt;span&gt;</code> или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:</p>
+Этот синтаксис означает «предназначаться для любого элемента li, который имеет класс special». Если бы вы сделали это, вы бы больше не смогли применить класс к `<span>` или другому элементу, просто добавив к нему класс; вы должны добавить этот элемент в список селекторов:
 
-<pre class="brush: css">li.special,
+```css
+li.special,
 span.special {
   color: orange;
   font-weight: bold;
-}</pre>
+}
+```
 
-<p>Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.</p>
+Как вы можете себе представить, некоторые классы могут быть применены ко многим элементам, и вам не нужно постоянно редактировать свой CSS каждый раз, когда что-то новое должно принять этот стиль. Поэтому иногда лучше обойти элемент и просто обратиться к классу, если только вы не знаете, что хотите создать некоторые специальные правила для одного элемента и, возможно, хотите убедиться, что они не применяются к другим элементам.
 
-<h2 id="Стилизация_элементов_на_основе_их_расположения_в_документе">Стилизация элементов на основе их расположения в документе</h2>
+## Стилизация элементов на основе их расположения в документе
 
-<p>Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента <code>&lt;em&gt;</code> — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только <code>&lt;em&gt;</code> который вложен в элемент <code>&lt;li&gt;</code>, я могу использовать селектор под названием <strong>descendant combinator (комбинатор-потомок)</strong>, который просто принимает форму пробела между двумя другими селекторами.</p>
+Есть моменты, когда вы хотите, чтобы что-то выглядело иначе, в зависимости от того, где оно находится в документе. Здесь есть несколько селекторов, которые могут вам помочь, но сейчас мы рассмотрим только пару. В нашем документе два элемента `<em>` — один внутри абзаца, а другой внутри элемента списка. Чтобы выбрать только `<em>` который вложен в элемент `<li>`, я могу использовать селектор под названием **descendant combinator (комбинатор-потомок)**, который просто принимает форму пробела между двумя другими селекторами.
 
-<p>Добавьте следующее правило в таблицу стилей.</p>
+Добавьте следующее правило в таблицу стилей.
 
-<pre class="brush: css">li em {
+```css
+li em {
   color: rebeccapurple;
-}</pre>
+}
+```
 
-<p>Этот селектор выберет любой элемент <code>&lt;em&gt;</code>, который находится внутри (потомка) <code>&lt;li&gt;</code>. Итак, в вашем примере документа вы должны найти, что <code>&lt;em&gt;</code> в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.</p>
+Этот селектор выберет любой элемент `<em>`, который находится внутри (потомка) `<li>`. Итак, в вашем примере документа вы должны найти, что `<em>` в третьем элементе списка теперь фиолетовый, но тот, который находится внутри абзаца, не изменился.
 
-<p>Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите <code>+</code>  (<strong>соседний братский комбинатор</strong>) между селекторами.</p>
+Ещё можно попробовать стилизовать абзац, когда он идёт сразу после заголовка на том же уровне иерархии в HTML. Для этого поместите `+` (**соседний братский комбинатор**) между селекторами.
 
-<p>Попробуйте также добавить это правило в таблицу стилей:</p>
+Попробуйте также добавить это правило в таблицу стилей:
 
-<pre class="brush: css">h1 + p {
+```css
+h1 + p {
   font-size: 200%;
-}</pre>
+}
+```
 
-<p>Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.</p>
+Пример ниже включает в себя два правила выше. Попробуйте добавить правило, чтобы сделать элемент span красный, если он внутри абзаца. Вы узнаете, правильно ли вы это сделали, так как промежуток в первом абзаце будет красным, но цвет в первом элементе списка не изменит цвет.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p>
+{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">Селекторы</a> позже в нашем курсе.</p>
-</div>
+> **Примечание:** Как вы можете видеть, CSS даёт нам несколько способов нацеливания на элементы, и мы пока только слегка изучили его! Мы будем внимательно смотреть на все эти селекторы и многое другое в нашей статье [Селекторы](/ru/docs/Learn/CSS/Building_blocks/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B) позже в нашем курсе.
 
-<h2 id="Стилизация_элементов_на_основе_состояния">Стилизация элементов на основе состояния</h2>
+## Стилизация элементов на основе состояния
 
-<p>Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.</p>
+Последний тип стилей, который мы рассмотрим в этом уроке, — это возможность стилизовать элементы в зависимости от их состояния. Прямым примером этого является стиль ссылок. Когда мы создаём ссылку, мы должны нацелить элемент [`<a>`](/en-US/docs/Web/HTML/Element/a) (якорь). Он имеет различные состояния в зависимости от того, посещается ли он, посещается, находится над ним, фокусируется с помощью клавиатуры или в процессе нажатия (активации). Вы можете использовать CSS для нацеливания на эти разные состояния — CSS-код ниже отображает невидимые ссылки розового цвета и посещённые ссылки зелёного цвета.
 
-<pre class="brush: css">a:link {
+```css
+a:link {
   color: pink;
 }
 
 a:visited {
   color: green;
-}</pre>
+}
+```
 
-<p>Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:</p>
+Вы можете изменить внешний вид ссылки, когда пользователь наводит на неё курсор, например, удалив подчёркивание, что достигается с помощью следующего правила:
 
-<pre class="brush: css">a:hover {
+```css
+a:hover {
   text-decoration: none;
-}</pre>
-
-<p>В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p>
+}
+```
 
-<p>Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.</p>
+В приведённом ниже примере вы можете поиграть с разными значениями для разных состояний ссылки. Я добавил к нему правила, приведённые выше, и теперь понимаю, что розовый цвет довольно лёгкий и трудно читаемый — почему бы не изменить его на лучший цвет? Можете ли вы сделать ссылки жирным шрифтом?
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>:  вы часто будете видеть упоминание о <a href="https://developer.mozilla.org/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C">доступности</a> в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.</p>
+{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}}
 
-<p>Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.</p>
+Мы удалили подчёркивание на нашей ссылке при наведении курсора. Вы можете удалить подчёркивание из всех состояний ссылки. Однако стоит помнить, что на реальном сайте вы хотите, чтобы посетители знали, что ссылка является ссылкой. Оставив подчёркивание на месте, люди могут понять, что на какой-то текст внутри абзаца можно нажимать — к такому поведению они привыкли. Как и всё в CSS, существует возможность сделать документ менее доступным с вашими изменениями — мы постараемся выделить потенциальные подводные камни в соответствующих местах.
 
-<p>Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.</p>
-</div>
+> **Примечание:** вы часто будете видеть упоминание о [доступности](/ru/docs/Learn/%D0%94%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C) в этих уроках и по всей MDN. Когда мы говорим о доступности, мы имеем в виду требование, чтобы наши веб-страницы были понятными и доступными для всех.
+>
+> Ваш посетитель вполне может быть на компьютере с мышью или сенсорной панелью или на телефоне с сенсорным экраном. Либо они могут использовать программу чтения с экрана, которая считывает содержимое документа, либо им может потребоваться использовать текст значительно большего размера, либо перемещаться по сайту только с помощью клавиатуры.
+>
+> Простой HTML-документ, как правило, доступен каждому — когда вы начинаете оформлять этот документ, важно, чтобы вы не сделали его менее доступным.
 
-<h2 id="Сочетание_селекторов_и_комбинаторов">Сочетание селекторов и комбинаторов</h2>
+## Сочетание селекторов и комбинаторов
 
-<p>Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:</p>
+Стоит отметить, что вы можете комбинировать несколько селекторов и комбинаторов вместе. Вот пример:
 
-<pre class="brush: css">/* выбирает любой &lt;span&gt; внутри &lt;p&gt;, который находится внутри &lt;article&gt;  */
+```css
+/* выбирает любой <span> внутри <p>, который находится внутри <article>  */
 article p span { ... }
 
-/* выбирает любой &lt;p&gt;, который идёт сразу после &lt;ul&gt;, который идёт сразу после &lt;h1&gt;  */
-h1 + ul + p { ... }</pre>
+/* выбирает любой <p>, который идёт сразу после <ul>, который идёт сразу после <h1>  */
+h1 + ul + p { ... }
+```
 
-<p>Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:</p>
+Вы также можете комбинировать несколько типов вместе. Попробуйте добавить следующее в ваш код:
 
-<pre class="brush: css">body h1 + p .special {
+```css
+body h1 + p .special {
   color: yellow;
   background-color: black;
   padding: 5px;
-}</pre>
+}
+```
 
-<p>Это будет стиль любого элемента с классом <code>special</code>, который находится внутри <code>&lt;p&gt;</code>, который приходит сразу после <code>&lt;h1&gt;</code>, который находится внутри <code>&lt;body&gt;</code>. Уф!</p>
+Это будет стиль любого элемента с классом `special`, который находится внутри `<p>`, который приходит сразу после `<h1>`, который находится внутри `<body>`. Уф!
 
-<p>В оригинальном HTML, который мы предоставили, единственный элемент в стиле <code>&lt;span class="special"&gt;</code>.</p>
+В оригинальном HTML, который мы предоставили, единственный элемент в стиле `<span class="special">`.
 
-<p>Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.</p>
+Не беспокойтесь, если это покажется сложным — вы скоро начнёте понимать это, когда будете писать больше на CSS.
 
-<h2 id="Завершение">Завершение</h2>
+## Завершение
 
-<p>В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.</p>
+В этом уроке мы рассмотрели несколько способов стилизации документа с использованием CSS. Мы будем развивать эти знания по мере прохождения остальных уроков. Однако вы уже знаете достаточно, чтобы стилизовать текст, применять CSS на основе различных способов нацеливания на элементы в документе и искать свойства и значения в документации MDN.
 
-<p>На следующем уроке мы рассмотрим структуру CSS.</p>
+На следующем уроке мы рассмотрим структуру CSS.
 
-<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p>
+{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Как структурирован CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Используя ваши новые знания</a></li>
-</ol>
+1.  [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
+2.  [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_is_structured)
+4.  [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+5.  [Используя ваши новые знания](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/how_css_is_structured/index.md b/files/ru/learn/css/first_steps/how_css_is_structured/index.md
index 1a9062c93bad4b..1255aec3e4fbf1 100644
--- a/files/ru/learn/css/first_steps/how_css_is_structured/index.md
+++ b/files/ru/learn/css/first_steps/how_css_is_structured/index.md
@@ -17,51 +17,43 @@ tags:
 translation_of: Learn/CSS/First_steps/How_CSS_is_structured
 original_slug: Learn/CSS/First_steps/Как_структурирован_CSS
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div>
+Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.
 
-<p class="summary">Теперь, когда у вас есть представление о том, чем является CSS, и о его основах, настало время посмотреть немного глубже в структуру самого языка. Нам уже встречались многие из обсуждаемых здесь концепций; вы можете вернуться к этому, чтобы разобраться, если вы обнаружите какие-либо более поздние концепции запутанными.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, [Базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания [работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), и базовые знания HTML (статья [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)), и знание о том [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works) |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Подробно узнать основные синтаксические структуры CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Базовое программное обеспечение</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, и базовые знания HTML (статья <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>), и знание о том <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Подробно узнать основные синтаксические структуры CSS.</td>
-  </tr>
- </tbody>
-</table>
+## Применение CSS к вашему HTML
 
-<h2 id="Применение_CSS_к_вашему_HTML">Применение CSS к вашему HTML</h2>
+Первое, что мы рассмотрим, это три метода применения CSS к документу.
 
-<p>Первое, что мы рассмотрим, это три метода применения CSS к документу.</p>
+### Внешняя таблица стилей
 
-<h3 id="Внешняя_таблица_стилей">Внешняя таблица стилей</h3>
+В статье ​[Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started) мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.
 
-<p>В статье ​<a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a> мы связывали внешнюю таблицу стилей с нашей страницей. Это самый распространённый и полезный способ крепления CSS к документу, так вы можете привязать CSS сразу к нескольким страницам, что позволяет стилизовать их всё с той же таблицей стилей. В большинстве случаев различные страницы сайта будут выглядеть почти так же, поэтому вы можете использовать один и тот же набор правил для основного вида.</p>
+Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением `.css`, и ссылка на него из HTML-элемента `<link>`:
 
-<p>Внешняя таблица стилей - это когда у вас есть CSS отдельным файлом с расширением <code>.css</code>, и ссылка на него из HTML-элемента <code>&lt;link&gt;</code>:</p>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+```
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
-    &lt;link rel="stylesheet" href="styles.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Привет!&lt;/h1&gt;
-    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+Файл CSS может выглядеть следующим образом:
 
-<p>Файл CSS может выглядеть следующим образом:</p>
-
-<pre class="brush: css">h1 {
+```css
+h1 {
   color: blue;
   background-color: yellow;
   border: 1px solid black;
@@ -69,33 +61,37 @@ original_slug: Learn/CSS/First_steps/Как_структурирован_CSS
 
 p {
   color: red;
-}</pre>
+}
+```
 
-<p>Атрибут <code>href</code> элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.</p>
+Атрибут `href` элемента {{htmlelement("link")}} должен ссылаться на файл в файловой системе.
 
-<p>В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:</p>
+В приведённом выше примере файл CSS находится в той же папке, что и HTML-документ, но вы можете поместить его куда-нибудь ещё и настроить относительный путь, например:
 
-<pre class="brush: html">&lt;!-- Файл находится внутри под-директории <em>styles</em>, находящейся в текущей директории --&gt;
-&lt;link rel="stylesheet" href="styles/style.css"&gt;
+```html
+<!-- Файл находится внутри под-директории styles, находящейся в текущей директории -->
+<link rel="stylesheet" href="styles/style.css">
 
-&lt;!-- Файл — внутри под-директории <em>styles</em> внутри под-под-директории <em>general</em> и так далее --&gt;
-&lt;link rel="stylesheet" href="styles/general/style.css"&gt;
+<!-- Файл — внутри под-директории styles внутри под-под-директории general и так далее -->
+<link rel="stylesheet" href="styles/general/style.css">
 
-&lt;!-- Вверх на один уровень в директории, затем направиться в под-директорию <em>styles</em> --&gt;
-&lt;link rel="stylesheet" href="../styles/style.css"&gt;</pre>
+<!-- Вверх на один уровень в директории, затем направиться в под-директорию styles -->
+<link rel="stylesheet" href="../styles/style.css">
+```
 
-<h3 id="Внутренняя_таблица_стилей">Внутренняя таблица стилей</h3>
+### Внутренняя таблица стилей
 
-<p>Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.</p>
+Внутренняя таблица стилей, где у вас нет внешнего файла CSS, но вместо этого CSS помещён внутри элемента {{htmlelement("style")}}, содержащейся внутри HTML {{htmlelement("head")}}.
 
-<p>Таким образом, HTML будет выглядеть вот так:</p>
+Таким образом, HTML будет выглядеть вот так:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
-    &lt;style&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <style>
       h1 {
         color: blue;
         background-color: yellow;
@@ -105,79 +101,87 @@ p {
       p {
         color: red;
       }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1&gt;Привет!&lt;/h1&gt;
-    &lt;p&gt;Это мой первый опыт в CSS&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+    </style>
+  </head>
+  <body>
+    <h1>Привет!</h1>
+    <p>Это мой первый опыт в CSS</p>
+  </body>
+</html>
+```
 
-<p>Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.</p>
+Это может быть полезно в некоторых обстоятельствах (возможно, вы работаете с системой управления контентом, где вы не можете изменить CSS-файлы непосредственно), но это менее эффективно, чем внешние таблицы стилей: CSS будет необходимо прописывать отдельно для каждой страницы и изменять, если требуются изменения.
 
-<h3 id="Встроенные_стили">Встроенные стили</h3>
+### Встроенные стили
 
-<p>Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте <code>style</code>:</p>
+Встроенные стили являются правилами CSS, которые влияют только на один элемент, содержащиеся в атрибуте `style`:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;h1 style="color: blue;background-color: yellow;border: 1px solid black;"&gt;Привет!&lt;/h1&gt;
-    &lt;p style="color:red;"&gt;Это мой первый опыт в CSS&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+  </head>
+  <body>
+    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Привет!</h1>
+    <p style="color:red;">Это мой первый опыт в CSS</p>
+  </body>
+</html>
+```
 
-<p><strong>Пожалуйста, не делайте этого! </strong>Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.</p>
+**Пожалуйста, не делайте этого!** Это очень плохо для технического обслуживания (вам, возможно, придётся обновить одну и ту же информацию несколько раз в одном документе), а также смешивает ваши презентационные данные CSS с структурной информацией HTML, что делает код трудным для чтения и понимания. Хранение различных типов кода отделено делает работу гораздо более лёгкой для всех, кто работает над кодом.
 
-<p>Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.</p>
+Есть несколько мест, где встроенные стили являются более распространёнными или даже желательными. Вам, возможно, придётся прибегнуть к использованию их, если ваша рабочая среда сильно ограничена (возможно, ваша CMS позволяет редактировать только HTML-тело). Вы также увидите, как они использовали много в HTML электронной почте, чтобы получить совместимость с таким количеством почтовых клиентов, со скольким это возможно.
 
-<h2 id="Игра_с_CSS_в_этой_статье">Игра с CSS в этой статье</h2>
+## Игра с CSS в этой статье
 
-<p>Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:</p>
+Существует много возможностей, чтобы поиграть с CSS в этой статье. Для этого мы рекомендуем создать новый каталог / папку на вашем компьютере и внутри него создать копии следующих двух файлов:
 
-<p>index.html:</p>
+index.html:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="ru"&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Я пробую писать CSS&lt;/title&gt;
-    &lt;link rel="stylesheet" href="styles.css"&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+```html
+<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <meta charset="utf-8">
+    <title>Я пробую писать CSS</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
 
-    &lt;p&gt;Пишите сюда свой код&lt;/p&gt;
+    <p>Пишите сюда свой код</p>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>styles.css:</p>
+styles.css:
 
-<pre class="brush: css">/* Пишите сюда свой код */
+```css
+/* Пишите сюда свой код */
 
 p {
   color: red;
-}</pre>
+}
+```
 
-<p>Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое <code>&lt;body&gt;</code> HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.</p>
+Затем, когда вы столкнётесь с CSS и захотите поэкспериментировать со стилями, измените содержимое `<body>` HTML-документа и начинайте добавлять CSS-стили внутри вашего файла CSS.
 
-<p>Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.</p>
+Если вы не используете систему, в которой вы можете легко создавать файлы, вы можете вместо этого использовать интерактивный редактор ниже чтобы экспериментировать.
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}}
 
-<p>Читайте дальше и получайте удовольствие!</p>
+Читайте дальше и получайте удовольствие!
 
-<h2 id="Селекторы">Селекторы</h2>
+## Селекторы
 
-<p>Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве <a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a>. Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.</p>
+Говоря о CSS, нельзя не упомянуть о селекторах, о некоторых типах которых мы уже говорили в руководстве [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started). Селектор — это то, как мы обозначаем что-либо в нашем HTML-документе, чтобы стилизовать его. Если стиль не применился, то это, скорее всего, потому, что селектор в таблицах стилей не совпал с тем, что в HTML-документе.
 
-<p>Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:</p>
+Каждое CSS-правило начинается с одного или нескольких селекторов, отделяемых друг от друга запятыми, чтобы дать понять браузеру, к чему применять стили. В следующем примере перечислены стандартные селекторы:
 
-<pre class="brush: css">h1  /* это селектор тегов */
+```css
+h1  /* это селектор тегов */
 a:link  /* это селектор ссылок */
 .manythings  /* это селектор классов (классы применяются тогда, когда необходимо применить правило к нескольким элементам) */
 #onething  /* это селектор идентификаторов (они применяются, когда правило относится к одному элементу) */
@@ -185,98 +189,96 @@ a:link  /* это селектор ссылок */
 .box p  /* селектор потомков */
 .box p:first-child  /* селектор потомков + селектор псевдоклассов */
 h1, h2, .intro  /* перечисление селекторов */
-</pre>
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы узнаете больше о селекторах в руководстве <a href="/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B">CSS-селекторы</a> в следующем модуле.</p>
-</div>
+> **Примечание:** вы узнаете больше о селекторах в руководстве [CSS-селекторы](/ru/docs/Web/CSS/CSS_%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B) в следующем модуле.
 
-<h3 id="Спецификация">Спецификация</h3>
+### Спецификация
 
-<p>Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента <code>p</code> — он будет синим; также я задал класс, который сделает элемент красным:</p>
+Иногда может случаться такое, что два селектора будут относиться к одному и тому же элементу HTML. Смотрите: в примере ниже я задал правило для элемента `p` — он будет синим; также я задал класс, который сделает элемент красным:
 
-<pre class="brush: css">.special {
+```css
+.special {
   color: red;
 }
 
 p {
   color: blue;
-}</pre>
+}
+```
 
-<p>А теперь допустим, что в нашем HTML-коде у нас есть абзац <code>p</code> с классом <code>special</code>. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?</p>
+А теперь допустим, что в нашем HTML-коде у нас есть абзац `p` с классом `special`. Оба правила могут быть добавлены: так какое же одержит верх? Как вы думаете, какого цвета будет надпись?
 
-<pre class="brush: html">&lt;p class="special"&gt;Какого же я цвета?&lt;/p&gt;</pre>
+```html
+<p class="special">Какого же я цвета?</p>
+```
 
-<p>В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются <strong>каскадами</strong>, или <strong>спецификациями</strong>. В примере ниже мы задали два правила для селектора <code>p</code>, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.</p>
+В языке CSS есть правила, которые определяют, какое правило "выиграет" в случае подобного столкновения — они называются **каскадами**, или **спецификациями**. В примере ниже мы задали два правила для селектора `p`, но в итоге текст будет синим: объявление, делающее надпись синей, появилось позже того, которое делает её красной. Это каскад в действии.
 
-<pre class="brush: css">p {
+```css
+p {
   color: red;
 }
 
 p {
   color: blue;
-}</pre>
+}
+```
+
+А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.
 
-<p>А в примере с селектором класса и селектором тега победит селектор класса — даже если он объявлен раньше.</p>
+**Попрактикуйтесь сами — добавьте два правила для параграфа `p { ... }` в вашу таблицу стилей. Затем добавьте класс к одному элементу `p` и попробуйте применить к нему какой-нибудь стиль.**
 
-<p><strong>Попрактикуйтесь сами — добавьте два правила для параграфа <code>p { ... }</code> в вашу таблицу стилей. Затем добавьте класс к одному элементу <code>p</code> и попробуйте применить к нему какой-нибудь стиль.</strong></p>
+Понимание каскадов, или правил, улучшается с практикой. В статье [Каскад и наследование](/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance) я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.
 
-<p>Понимание каскадов, или правил, улучшается с практикой. В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a> я хорошенько объясню, как определить уровень спецификации. А пока что запомните, что иногда CSS не применяется так, как вы того хотели бы, так как у чего-то в таблице стилей больший уровень спецификации.</p>
+## Свойства и значения
 
-<h2 id="Свойства_и_значения">Свойства и значения</h2>
+Если говорить в общем, CSS строится на двух его составляющих:
 
-<p>Если говорить в общем, CSS строится на двух его составляющих:</p>
+- **Свойства**
+  - : Определяют, какую характеристику вы желаете изменить (например, [`font-size`](/en-US/docs/Web/CSS/font-size), [`width`](/en-US/docs/Web/CSS/width), [`background-color`](/en-US/docs/Web/CSS/background-color)).
 
-<dl>
- <dt><strong>Свойства</strong> </dt>
- <dd>Определяют, какую характеристику вы желаете изменить (например, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>).</dd>
-</dl>
+<!---->
 
-<dl>
- <dt>Значения </dt>
- <dd>Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.</dd>
-</dl>
+- Значения
+  - : Это величина свойства, определяющая, как и/или насколько вы желаете изменить свойство.
 
-<p>На изображении внизу выделены свойство и его значение. Здесь свойство — <code>color</code>, а его значение — <code>blue</code>.</p>
+На изображении внизу выделены свойство и его значение. Здесь свойство — `color`, а его значение — `blue`.
 
-<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+![A declaration highlighted in the CSS](https://mdn.mozillademos.org/files/16498/declaration.png)
 
-<p>Свойство вкупе со значением называется <em>CSS-объявлением</em>. CSS-объявления помещаются внутри <em>блока объявлений CSS</em>. Ниже показан наш CSS-код с выделенным блоком объявлений.</p>
+Свойство вкупе со значением называется _CSS-объявлением_. CSS-объявления помещаются внутри _блока объявлений CSS_. Ниже показан наш CSS-код с выделенным блоком объявлений.
 
-<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+![A highlighted declaration block](https://mdn.mozillademos.org/files/16499/declaration-block.png)
 
-<p>Наконец блок объявлений воссоединяется с <em>селекторами</em>, образуя <em>CSS-правила</em>. Наше изображение содержит два правила — одно для селектора <code>h1</code>, другое для селектора <code>p</code>. Правило для <code>h1</code> выделено.</p>
+Наконец блок объявлений воссоединяется с _селекторами_, образуя _CSS-правила_. Наше изображение содержит два правила — одно для селектора `h1`, другое для селектора `p`. Правило для `h1` выделено.
 
-<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p>
+![The rule for h1 highlighted](https://mdn.mozillademos.org/files/16500/rules.png)
 
-<p>Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (<code>:</code>).</p>
+Установление значений для CSS-свойств — вот суть языка CSS. Движок CSS определяет, какие объявления применять к каждому элементу на странице, чтобы соответствующим образом размещать и стилизовать его. Необходимо запомнить, что и свойства, и значения чувствительны к регистру. Пара свойство–значение разделяется двоеточием (`:`).
 
-<p><strong>Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код: </strong></p>
+**Попробуйте подобрать нужные значения к следующим свойствам, а свойства добавить в ваш код:**
 
-<ul>
- <li><strong>{{cssxref("font-size")}}</strong></li>
- <li><strong>{{cssxref("width")}}</strong></li>
- <li><strong>{{cssxref("background-color")}}</strong></li>
- <li><strong>{{cssxref("color")}}</strong></li>
- <li><strong>{{cssxref("border")}}</strong></li>
-</ul>
+- **{{cssxref("font-size")}}**
+- **{{cssxref("width")}}**
+- **{{cssxref("background-color")}}**
+- **{{cssxref("color")}}**
+- **{{cssxref("border")}}**
 
-<div class="warning">
-<p><strong>Важно</strong>: Если свойство или значение не определено, то объявление считается <em>недействительным</em> — и будет попросту проигнорировано.</p>
-</div>
+> **Предупреждение:** **Важно**: Если свойство или значение не определено, то объявление считается _недействительным_ — и будет попросту проигнорировано.
 
-<div class="warning">
-<p><strong>Важно</strong>: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, <code>color</code> надо <em>всегда</em> писать <code>color</code>; британский вариант <code>colour</code> не будет работать.</p>
-</div>
+> **Предупреждение:** **Важно**: В CSS (и прочих веб-стандартах) американское написание является стандартом. Например, `color` надо _всегда_ писать `color`; британский вариант `colour` не будет работать.
 
-<h3 id="Функции">Функции</h3>
+### Функции
 
-<p>Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию <code>calc()</code>. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:</p>
+Чаще всего значения принимают форму числа или ключевого слова; существуют способы создавать функции для значений. Для примера можно взять функцию `calc()`. Она позволяет вам совершать лёгкие математические вычисления внутри CSS, например:
 
-<div id="calc_example">
-<pre class="brush: html">&lt;div class="outer"&gt;&lt;div class="box"&gt;The inner box is 90% - 30px.&lt;/div&gt;&lt;/div&gt;</pre>
+```html
+<div class="outer"><div class="box">The inner box is 90% - 30px.</div></div>
+```
 
-<pre class="brush: css">.outer {
+```css
+.outer {
   border: 5px solid black;
 }
 
@@ -285,52 +287,55 @@ p {
   width: calc(90% - 30px);
   background-color: rebeccapurple;
   color: white;
-}</pre>
-</div>
+}
+```
 
-<p>В результате получим это:</p>
+В результате получим это:
 
-<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p>
+{{EmbedLiveSample('calc_example', '100%', 200)}}
 
-<p>Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!</p>
+Функция состоит из названия и скобок, внутри который помещается выражение с допустимыми для данной функции знаками. В примере выше я задал значение ширины блока равной 90% внешнего блока минус 30px. Не могу же я сказать, чему равны 90% блока?!
 
-<p>В следующем примере будут различные значения для свойства {{cssxref("&lt;transform&gt;")}} <code>rotate()</code>.</p>
+В следующем примере будут различные значения для свойства {{cssxref("&lt;transform&gt;")}} `rotate()`.
 
-<div id="transform_example">
-<pre class="brush: html">&lt;div class="box"&gt;&lt;/div&gt;</pre>
+```html
+<div class="box"></div>
+```
 
-<pre class="brush: css">.box {
+```css
+.box {
   margin: 30px;
   width: 100px;
   height: 100px;
   background-color: rebeccapurple;
   transform: rotate(0.8turn)
-}</pre>
-</div>
+}
+```
 
-<p>Результат этого кода будет:</p>
+Результат этого кода будет:
 
-<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p>
+{{EmbedLiveSample('transform_example', '100%', 200)}}
 
-<p><strong>Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл: </strong></p>
+**Найдите несколько значений для следующих свойств, а свойства добавьте в ваш файл:**
 
-<ul>
- <li><strong>{{cssxref("transform")}}</strong></li>
- <li><strong>{{cssxref("background-image")}}, в частности со значениями градиента</strong></li>
- <li><strong>{{cssxref("color")}},в частности со значениями rgb/rgba/hsl/hsla</strong></li>
-</ul>
+- **{{cssxref("transform")}}**
+- **{{cssxref("background-image")}}, в частности со значениями градиента**
+- **{{cssxref("color")}},в частности со значениями rgb/rgba/hsl/hsla**
 
-<h2 id="правила">@правила</h2>
+## @правила
 
-<p>До сих пор не сталкивались мы с правилами <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> (произносится как <em>эт-рулс</em>, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил <code>@rules</code> простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать <code>@import</code>:</p>
+До сих пор не сталкивались мы с правилами [`@rules`](/en-US/docs/Web/CSS/At-rule) (произносится как _эт-рулс_, от английского "at-rules"). Это особые правила, дающие CSS инструкции, как вести себя. У некоторых правил `@rules` простые названия и значения. Чтобы, к примеру, импортировать ещё одну таблицу стилей в основной CSS-файл, нужно использовать `@import`:
 
-<pre class="brush: css">@import 'styles2.css';</pre>
+```css
+@import 'styles2.css';
+```
 
-<p>Чаще других встречается <code>@rules</code> под названием <code>@media</code>: оно позволяет вам использовать <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries/Using_media_queries">медиавыражения</a>, чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).</p>
+Чаще других встречается `@rules` под названием `@media`: оно позволяет вам использовать [медиавыражения](/ru/docs/Web/CSS/Media_Queries/Using_media_queries), чтобы применять CSS в определённых случаях, только если выполняются те или иные условия (например, при изменении размеров окна или при просмотре сайта с иного типа устройства).
 
-<p>Ниже у нас CSS-файл, в котором значение заднего фона элемента <code>&lt;body&gt;</code> равно <code>pink</code>. Однако после мы добавили правило <code>@media</code>, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.</p>
+Ниже у нас CSS-файл, в котором значение заднего фона элемента `<body>` равно `pink`. Однако после мы добавили правило `@media`, которое делает задний фон элемента синим, при условии если ширина окна не менее 30em.
 
-<pre class="brush: css">body {
+```css
+body {
   background-color: pink;
 }
 
@@ -338,67 +343,76 @@ p {
   body {
     background-color: blue;
   }
-}</pre>
+}
+```
 
-<p>Вы столкнётесь и с другими правилами <code>@rules</code> в продолжение следующих уроков.</p>
+Вы столкнётесь и с другими правилами `@rules` в продолжение следующих уроков.
 
-<p><strong>Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.</strong></p>
+**Добавьте правило, которое изменяет стиль элемента, основываясь на ширине окна. Измените ширину окна, чтобы увидеть результат.**
 
-<h2 id="Стенография">Стенография</h2>
+## Стенография
 
-<p>Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются <em>стенографическими свойствами</em>, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.</p>
+Некоторые свойства вроде {{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} и {{cssxref("margin")}} называются _стенографическими свойствами_, — они позволяют установить несколько значений свойств в одной строке, ускоряя запись и делая её аккуратной.
 
-<p>К примеру, это строка (комментарий не в счёт):</p>
+К примеру, это строка (комментарий не в счёт):
 
-<pre class="brush: css">/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
+```css
+/* В четырёхзначных стенографиях наподобие padding и margin значения добавляются
    в порядке верх–право–низ–лево (по часовой стрелке сверху). В трёхзначных стенограммах
    значения добавляются в порядке верх(низ)–право–лево.
    В двузначных стенограммах значения добавляются
    от верхнего/нижнего края к левому/правому краю */
-padding: 10px 15px 15px 5px;</pre>
+padding: 10px 15px 15px 5px;
+```
 
-<p>делает то же самое, что и эти четыре, вместе взятые:</p>
+делает то же самое, что и эти четыре, вместе взятые:
 
-<pre class="brush: css">padding-top: 10px;
+```css
+padding-top: 10px;
 padding-right: 15px;
 padding-bottom: 15px;
 padding-left: 5px;
-</pre>
+```
 
-<p>или эти:</p>
+или эти:
 
-<pre class="brush: cpp">padding-block-start: 10px
+```cpp
+padding-block-start: 10px
 padding-inline-end: 15px;
 padding-block-end: 15px;
-padding-inline-start: 5px;</pre>
+padding-inline-start: 5px;
+```
 
-<p>в то время как строка:</p>
+в то время как строка:
 
-<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre>
+```css
+background: red url(bg-graphic.png) 10px 10px repeat-x fixed;
+```
 
-<p>делает то же, что и эти строки:</p>
+делает то же, что и эти строки:
 
-<pre class="brush: css">background-color: red;
+```css
+background-color: red;
 background-image: url(bg-graphic.png);
 background-position: 10px 10px;
 background-repeat: repeat-x;
-background-scroll: fixed;</pre>
+background-scroll: fixed;
+```
 
-<p>Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в <a href="/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>.</p>
+Мы не будем проходить это сейчас — вы можете найти эти и многие другие стенографии в [Руководстве по CSS](/ru/docs/Web/CSS/Reference).
 
-<p><strong>Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.</strong></p>
+**Добавьте вышеупомянутые объявления в ваш код. Попробуйте изменить значения и посмотреть на результат.**
 
-<div class="blockIndicator warning">
-<p><strong>Осторожно</strong>: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.</p>
-</div>
+> **Предупреждение:** **Осторожно**: Стенографии позволяют пропускать некоторые величины, и это может отразиться на результате недолжным образом.
 
-<h2 id="Комментарии">Комментарии</h2>
+## Комментарии
 
-<p>Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.</p>
+Как и в HTML, вы можете делать комментарии, чтобы прояснить тот или иной отрывок кода.
 
-<p>Комментарии в CSS начинаются с <code>/*</code> и окачиваются с <code>*/</code>. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.</p>
+Комментарии в CSS начинаются с `/*` и окачиваются с `*/`. В примере ниже я отметил комментариями различные разделы кода. Это очень полезно для навигации — комментарии легче искать.
 
-<pre class="brush: css">/* Работаю над основными элементами */
+```css
+/* Работаю над основными элементами */
 /* -------------------------------------------------------------------------------------------- */
 body {
   font: 1em/150% Helvetica, Arial, sans-serif;
@@ -431,27 +445,31 @@ div p{
 
 div p + p {
   padding-top: 0;
-}</pre>
+}
+```
 
-<p>Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора <code>.special</code>.</p>
+Отделяя комментариями участки кода, не нуждающиеся в проверке, вы можете выискивать ошибку (если такая есть). Ниже я отделил правило для селектора `.special`.
 
-<pre class="brush: css">/*.special {
+```css
+/*.special {
   color: red;
 }*/
 
 p {
   color: blue;
-}</pre>
+}
+```
 
-<p><strong>Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.</strong></p>
+**Добавьте комментарии в ваш CSS-код, чтобы приноровиться к ним.**
 
-<h2 id="Отступы">Отступы</h2>
+## Отступы
 
-<p>Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.</p>
+Под отступами подразумеваются пробелы, табуляция и перенос на новую строку. Как и в HTML, браузер будет стараться игнорировать большие отступы в CSS-коде; к тому же большие отступы пагубны для читаемости кода.
 
-<p>В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:</p>
+В примере ниже каждое объявление (а также начало/окончание правила) находится на своей строке — это, возможно, наилучший вариант написания CSS-кода: он понятен и аккуратен:
 
-<pre class="brush: css">body {
+```css
+body {
   font: 1em/150% Helvetica, Arial, sans-serif;
   padding: 1em;
   margin: 0 auto;
@@ -482,11 +500,12 @@ div p {
 div p + p {
   padding-top: 0;
 }
-</pre>
+```
 
-<p id="Very_compact">То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:</p>
+То же самое вы можете написать, не добавляя большие отступы, — коды идентичны; но я уверен, вы согласитесь, что это очень тяжело прочитать:
 
-<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
+```css
+body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
 @media (min-width: 70em) { body {font-size: 130%;} }
 
 h1 {font-size: 1.5em;}
@@ -494,36 +513,38 @@ h1 {font-size: 1.5em;}
 div p, #id:first-line {background-color: red; background-style: none}
 div p {margin: 0; padding: 1em;}
 div p + p {padding-top: 0;}
-</pre>
+```
 
-<p>Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.</p>
+Как вы будете оформлять код — решать вам; хотя, работая в команде, вы обнаружите, что она придерживается тех правил форматирования, которые в ней утверждены.
 
-<p>Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:</p>
+Внимательно делайте отступы в свойствах и значениях. К примеру, такие объявления будут работать:
 
-<pre class="brush: css">margin: 0 auto;
-padding-left: 10px;</pre>
+```css
+margin: 0 auto;
+padding-left: 10px;
+```
 
-<p>А такие объявления не действительны:</p>
+А такие объявления не действительны:
 
-<pre class="brush: css">margin: <strong>0auto</strong>;
-<strong>padding- left</strong>: 10px;</pre>
+```css
+margin: 0auto;
+padding- left: 10px;
+```
 
-<p>Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.</p>
+Всегда отделяйте друг от друга значения, а свойства пишите без пробелов через дефис.
 
-<p><strong>Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.</strong></p>
+**Добавьте отступы в ваш код и посмотрите, что повлияет на код, а что нет.**
 
-<h2 id="Что_дальше">Что дальше?</h2>
+## Что дальше?
 
-<p>Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a> — мы рассмотрим этот процесс.</p>
+Полезно знать, как браузер делает из HTML и CSS готовую страницу, поэтом следующая ваша статья — [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works) — мы рассмотрим этот процесс.
 
-<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
-</ol>
+1.  [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
+2.  [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
+4.  [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+5.  [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/how_css_works/index.md b/files/ru/learn/css/first_steps/how_css_works/index.md
index 643b746f7e5499..2fd8c86ad5122d 100644
--- a/files/ru/learn/css/first_steps/how_css_works/index.md
+++ b/files/ru/learn/css/first_steps/how_css_works/index.md
@@ -12,64 +12,55 @@ tags:
   - дерево
 translation_of: Learn/CSS/First_steps/How_CSS_works
 ---
-<p>{{LearnSidebar}}<br>
- {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+{{LearnSidebar}}
+{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
 
-<p class="summary">Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.</p>
+Мы уже изучили основы CSS, для чего он нужен и как создавать простые таблицы стилей. В этом уроке мы посмотрим, как браузер обрабатывает CSS и HTML и выводит содержимое на веб-страницу.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Основы компьютерной грамотности, <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">базовое программное обеспечение</a>, умение <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">умение работать с файлами</a> и начальные знания HTML (рекомендуется изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Основы компьютерной грамотности, [базовое программное обеспечение](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения), умение [умение работать с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и начальные знания HTML (рекомендуется изучить [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)). |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Понимать основы того, как браузер анализирует CSS и HTML и что происходит когда браузер встречает неизвестные CSS стили                                                                                                                                                                                                                                                 |
 
-<h2 id="Как_работает_CSS">Как работает CSS?</h2>
+## Как работает CSS?
 
-<p>Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идёт в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощённая версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:</p>
+Когда браузер отображает документ, он должен совместить его содержимое с его стилями. Этот процесс идёт в несколько этапов, о которых мы сейчас поговорим. Держите в уме, что это очень упрощённая версия того как браузер действительно загружает веб-страницу, а также то, что разные браузеры делают это по разному. Но, происходит, грубо говоря, следующее:
 
-<ol>
- <li>Браузер получает HTML-страницу (например, из Интернета)</li>
- <li>Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (<em>Document Object Model</em>). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.</li>
- <li>Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и  стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.</li>
- <li>После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)</li>
- <li>Дерево представления (<em>render tree</em>) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.</li>
- <li>Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)</li>
-</ol>
+1.  Браузер получает HTML-страницу (например, из Интернета)
+2.  Преобразует {{Glossary("HTML")}} в {{Glossary("DOM")}} (_Document Object Model_). DOM (или DOM-дерево) - это представление страницы в памяти компьютера. Подробнее на DOM мы остановимся чуть позже.
+3.  Затем браузер забирает все ресурсы и описания, связанные с HTML-документом, например: встроенные картинки, видео ... и стили CSS! JavaScript присоединяется чуть позже и мы пока не будем говорить об этом, чтобы все не усложнять.
+4.  После этого браузер анализирует полученный CSS код, сортирует описанные там правила в зависимости от их селекторов и раскладывает их в различные «корзины»: элементы, классы, идентификаторы(ID) и т.п. Основываясь на найденных селекторах браузер понимает какие правила относятся к определённым «узлам» в DOM-дереве и применяет их по мере необходимости (этот промежуточный шаг называют «формированием дерева представления» или «формированием дерева рендеринга»)
+5.  Дерево представления (_render tree_) формируется в том порядке, в каком оно затем должно будет отображаться, когда все правила будут применены.
+6.  Затем происходит визуальное отображение контента на странице (этот этап называется «отрисовкой»)
 
-<p>Диаграмма демонстрирует этот процесс.</p>
+Диаграмма демонстрирует этот процесс.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/17080/Browser_simple_rendering_pipeline__ru.png" style="height: 655px; max-width: 635px; width: 1366px;"></p>
+![](https://mdn.mozillademos.org/files/17080/Browser_simple_rendering_pipeline__ru.png)
 
-<h2 id="DOM-дерево">DOM-дерево</h2>
+## DOM-дерево
 
-<p>DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.</p>
+DOM напоминает дерево. Каждый элемент, атрибут, отрывок текста становится {{Glossary("Node/DOM","DOM node")}} в разметке. DOM-узлы определяются их отношением с другими узлами. Некоторые родительские элементы имеют дочерние, а у дочерних элементов есть братские.
 
-<p>Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.</p>
+Понимание DOM позволит вам разрабатывать, отлаживать и поддерживать ваш CSS, потому что именно в DOM-дереве ваши таблицы стилей и код встречаются. Когда вы начнёте работать с браузерным DevTools(инструменты для разработки) вы будете перемещаться по DOM при выборе элементов чтобы увидеть какие правила применяются.
 
-<h2 id="A_real_DOM_representation">Как представлено DOM-дерево</h2>
+## Как представлено DOM-дерево
 
-<p>Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.</p>
+Вместо длинного, нудного объяснения взглянем лучше на пример, чтобы понять, как HTML-код преобразуется в DOM.
 
-<p>Возьмём следующий пример:</p>
+Возьмём следующий пример:
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Let's use:
-  &lt;span&gt;Cascading&lt;/span&gt;
-  &lt;span&gt;Style&lt;/span&gt;
-  &lt;span&gt;Sheets&lt;/span&gt;
-&lt;/p&gt;
-</pre>
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+```
 
-<p>В DOM-дереве узел, соответствующий элементу <code>&lt;p&gt;</code>, — это родительский элемент. Его дочерние элементы — текст и три элемента <code>&lt;span&gt;</code>. Узлы <code>SPAN</code> также будут родителями — с текстом в качестве дочерних элементов:</p>
+В DOM-дереве узел, соответствующий элементу `<p>`, — это родительский элемент. Его дочерние элементы — текст и три элемента `<span>`. Узлы `SPAN` также будут родителями — с текстом в качестве дочерних элементов:
 
-<pre>P
+```
+P
 ├─ "Let's use:"
 ├─ SPAN
 |  └─ "Cascading"
@@ -77,87 +68,93 @@ translation_of: Learn/CSS/First_steps/How_CSS_works
 |  └─ "Style"
 └─ SPAN
    └─ "Sheets"
-</pre>
+```
 
-<p>Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:</p>
+Вот как браузер преобразует HTML-код — он загружает DOM-дерево, и в результате мы получим это:
 
-<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p>
+{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}
 
-<div class="hidden">
-<pre class="brush: css">p {margin:0;}</pre>
-</div>
+```css hidden
+p {margin:0;}
+```
 
-<h2 id="Добавление_CSS_в_DOM">Добавление CSS в DOM</h2>
+## Добавление CSS в DOM
 
-<p>Допустим, мы добавили таблицу стилей к нашему примеру:</p>
+Допустим, мы добавили таблицу стилей к нашему примеру:
 
-<pre class="brush: html">&lt;p&gt;
+```html
+<p>
   Let's use:
-  &lt;span&gt;Cascading&lt;/span&gt;
-  &lt;span&gt;Style&lt;/span&gt;
-  &lt;span&gt;Sheets&lt;/span&gt;
-&lt;/p&gt;</pre>
+  <span>Cascading</span>
+  <span>Style</span>
+  <span>Sheets</span>
+</p>
+```
 
-<p>А вот CSS-код:</p>
+А вот CSS-код:
 
-<pre class="brush: css">span {
+```css
+span {
   border: 1px solid black;
   background-color: lime;
-}</pre>
+}
+```
 
-<p>Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило,  браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов <code>&lt;span&gt;</code>. После этого информация будет отображена на экране.</p>
+Браузер загрузит HTML-код, преобразует его в DOM и только потом загрузит CSS. Так как у нас всего одно правило, браузер загрузит CSS очень быстро! Это правило будет добавлено к каждому из трёх элементов `<span>`. После этого информация будет отображена на экране.
 
-<p>Новый результат:</p>
+Новый результат:
 
-<p>{{EmbedLiveSample('Добавление_CSS_в_DOM', '100%', 55)}}</p>
+{{EmbedLiveSample('Добавление_CSS_в_DOM', '100%', 55)}}
 
-<p>В статье <a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a> мы будем использовать браузер DevTools для отладки CSS.</p>
+В статье [Отладка CSS](/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS) мы будем использовать браузер DevTools для отладки CSS.
 
-<h2 id="Что_происходит_когда_браузер_не_понимает_CSS">Что происходит, когда браузер не понимает CSS?</h2>
+## Что происходит, когда браузер не понимает CSS?
 
-<p><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера">В предыдущем уроке</a> я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?</p>
+[В предыдущем уроке](/ru/docs/Learn/CSS/First_steps/Что_такое_CSS#Поддержка_браузера) я упомянул, что некоторые браузеры могут не поддерживать новые функции CSS. Вдобавок не все используют новейшие версии браузеров. Зная, что CSS разрабатывается всё время, вы можете поразиться и крайне ужаснуться тому, что происходит, если браузер не распознаёт объявление или селектор. Что же произойдёт?
 
-<p>— Да ничего: браузер просто пропустит это!</p>
+— Да ничего: браузер просто пропустит это!
 
-<p>Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.</p>
+Если браузер встретит свойство, которое он не понимает, он просто-напросто проигнорирует его и двинется дальше. Он сделает так, если вы допустите опечатку или ошибку в свойстве или значении или если он не поддерживает какое-либо свойство или значение.
 
-<p>Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.</p>
+Если же браузер встретит селектор, который он не распознаёт, то он просто пропустит данное правило и двинется дальше.
 
-<p>Ниже я использовал британское написание слова <em>color</em>, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.</p>
+Ниже я использовал британское написание слова _color_, что делает свойство некорректным. Поэтому текст не будет синим. Однако всё остальное будет работать; пропущено только недействительное свойство.
 
-<div id="Skipping_example">
-<pre class="brush: html">&lt;p&gt; I want this text to be large, bold and blue.&lt;/p&gt;</pre>
+```html
+<p> I want this text to be large, bold and blue.</p>
+```
 
-<pre class="brush: css">p {
+```css
+p {
   font-weight: bold;
   colour: blue; /* некорректное написание свойства цвета */
   font-size: 200%;
-}</pre>
-</div>
+}
+```
 
-<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p>
+{{EmbedLiveSample('Skipping_example', '100%', 200)}}
 
-<p>Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.</p>
+Такое поведение можно использовать, например, при добавлении новых функций CSS в качестве дополнения, причём вы будете уверены, что ничего не сломается, если браузер не распознает элемент. Вы можете использовать два правила с одинаковыми уровнями спецификации: одно — в качестве альтернативы для случая, если браузер не поддерживает нововведение.
 
-<p>Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают <code>calc()</code> как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции <code>calc()</code>, равной <code>100% - 50px</code>. Старые браузеры используют пиксельное значение, потому что не распознают <code>calc()</code>. Новые браузеры используют <code>calc()</code> так как эта строка появляется позже в каскаде.</p>
+Это хорошо применяется, если вы хотите использовать величину, не использующуюся везде в документе. К примеру, некоторые старые браузеры не поддерживают `calc()` как значение. Я добавлю резерв — значение в px, затем задам ширину с помощью функции `calc()`, равной `100% - 50px`. Старые браузеры используют пиксельное значение, потому что не распознают `calc()`. Новые браузеры используют `calc()` так как эта строка появляется позже в каскаде.
 
-<pre class="brush: css">.box {
+```css
+.box {
   width: 500px;
   width: calc(100% - 50px);
-}</pre>
+}
+```
 
-<h2 id="Завершение">Завершение</h2>
+## Завершение
 
-<p>Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в <a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">использовании ваших новых знаний</a>.</p>
+Вы почти закончили модуль; осталось только одно. В следующей статье вы попрактикуетесь в [использовании ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge).
 
-<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p>
+{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="/ru/docs/Learn/CSS/First_steps/Что_такое_CSS">Что такое CSS?</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS </a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
-</ol>
+1.  [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/Что_такое_CSS)
+2.  [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
+4.  [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+5.  [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/first_steps/index.md b/files/ru/learn/css/first_steps/index.md
index 1ade06701f11e1..f6681c08b6ed55 100644
--- a/files/ru/learn/css/first_steps/index.md
+++ b/files/ru/learn/css/first_steps/index.md
@@ -11,44 +11,36 @@ tags:
   - Начинающий
 translation_of: Learn/CSS/First_steps
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц - например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</p>
+CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц - например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Перед запуском этого модуля вы должны иметь:</p>
+Перед запуском этого модуля вы должны иметь:
 
-<ol>
- <li>Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).</li>
- <li>Базовая рабочая среда, описанная в разделе <a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a>, и понимание того, как создавать файлы и управлять ими, подробно описано в разделе <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>.</li>
- <li>Основное знакомство с HTML, как описано в модуле <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>.</li>
-</ol>
+1.  Базовое знакомство с использованием компьютеров и пассивным использованием Интернета (то есть, просматривая его, потребляя контент).
+2.  Базовая рабочая среда, описанная в разделе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), и понимание того, как создавать файлы и управлять ими, подробно описано в разделе [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files).
+3.  Основное знакомство с HTML, как описано в модуле [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML).
 
-<div class="note">
-<p><strong>Примечание:</strong> Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.</p>
-</div>
+> **Примечание:** Если вы работаете на компьютере / планшете / другом устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете опробовать (большую часть) примеры кода в онлайн-программах кодирования, таких как JSBin или Thimble.
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<p>Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.</p>
+Этот модуль содержит следующие статьи, в которых вы ознакомитесь со всеми основными теориями CSS и сможете проверить некоторые навыки.
 
-<dl>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></dt>
- <dd><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</dd>
- <dt><a href="/ru/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></dt>
- <dd>В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></dt>
- <dd>Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></dt>
- <dd>Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></dt>
- <dd>С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.</dd>
-</dl>
+- [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
+  - : **{{Glossary("CSS")}}** (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
+- [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
+  - : В этой статье мы возьмём простой HTML-документ и применим к нему CSS, изучая некоторые практические вещи о языке.
+- [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
+  - : Теперь, когда у вас есть представление о том, что такое CSS и как его использовать, пришло время немного углубиться в структуру самого языка. Мы уже встречали множество концепций, обсуждаемых здесь; вы можете вернуться к этому, чтобы повторить, если вы находите какие-либо более поздние концепции запутанными.
+- [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+  - : Мы изучили основы CSS — для чего он нужен и как писать простые таблицы стилей. В этом уроке мы рассмотрим, как браузер берёт CSS и HTML и превращает их в веб-страницу.
+- [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
+  - : С учётом того, что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам шанс сделать это.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
- <dd>Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле <em>Введение в CSS</em>. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.</dd>
-</dl>
+- [Intermediate Web Literacy 1: Intro to CSS](https://teach.mozilla.org/activities/intermediate-web-lit/)
+  - : Отличный базовый курс от Mozilla, в котором рассматриваются и тестируются многие навыки, о которых говорилось в модуле _Введение в CSS_. Узнайте о стилях элементов HTML на веб-странице, селекторах CSS, атрибутах и значениях.
diff --git a/files/ru/learn/css/first_steps/styling_a_biography_page/index.md b/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
index 6483b6c21eb3fb..a796274e133bb2 100644
--- a/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
+++ b/files/ru/learn/css/first_steps/styling_a_biography_page/index.md
@@ -11,93 +11,72 @@ tags:
 translation_of: Learn/CSS/First_steps/Using_your_new_knowledge
 original_slug: Learn/CSS/First_steps/Using_your_new_knowledge
 ---
-<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
-<p>С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.</p>
+С учётом того что вы узнали за последние несколько уроков, вы должны обнаружить, что вы можете форматировать простые текстовые документы с использованием CSS, чтобы добавить к ним свой собственный стиль. Эта статья даёт вам возможность сделать это.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Попрактиковать использование CSS с вашими новыми знаниями.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | Перед тем как начать, вы должны разобраться в основах CSS и HTML (смотрите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)). |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Попрактиковать использование CSS с вашими новыми знаниями.                                                                               |
 
-<h2 id="Перед_началом">Перед началом</h2>
+## Перед началом
 
-<p>Вы можете писать код в редакторе ниже или <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">скачать исходный код</a>, чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</p>
+Вы можете писать код в редакторе ниже или [скачать исходный код](https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/), чтобы работать в вашем собственном редакторе. Это страница с кодом HTML и CSS внутри него. Если вам так удобнее, вы можете переместить CSS в отдельный файл на вашем компьютере. Или вы можете использовать онлайн-редакторы, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/).
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Если у вас не получается, попросите о помощи — читайте раздел <a href="#помощь">Помощь</a> с кодом ниже.</p>
-</div>
+> **Примечание:** Если у вас не получается, попросите о помощи — читайте раздел [Помощь](#помощь) с кодом ниже.
 
-<h2 id="Работа_с_CSS">Работа с CSS</h2>
+## Работа с CSS
 
-<p>В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.</p>
+В следующем примере демонстрируется биография, стилизованная с помощью CSS. Каждое использованное мной свойство CSS — ссылка на соответствующую страницу MDN.
 
-<ul>
- <li>{{cssxref("font-family")}}</li>
- <li>{{cssxref("color")}}</li>
- <li>{{cssxref("border-bottom")}}</li>
- <li>{{cssxref("font-weight")}}</li>
- <li>{{cssxref("font-size")}}</li>
- <li>{{cssxref("text-decoration")}}</li>
-</ul>
+- {{cssxref("font-family")}}
+- {{cssxref("color")}}
+- {{cssxref("border-bottom")}}
+- {{cssxref("font-weight")}}
+- {{cssxref("font-size")}}
+- {{cssxref("text-decoration")}}
 
-<p>Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.</p>
+Я использовал разные селекторы, такие как h1 и h2, а также создал класс для названия профессии для его стилизации.
 
-<p>Измените значения свойств CSS, чтобы поменять внешний вид биографии.</p>
+Измените значения свойств CSS, чтобы поменять внешний вид биографии.
 
-<ol>
- <li>Сделайте заголовок розовым, используя CSS-цвет <code>hotpink</code>.</li>
- <li>Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет <code>purple</code>.</li>
- <li>Примените к подзаголовку <code>&lt;h2&gt;</code> курсив.</li>
- <li>Установите цвет <code>#eeeeee</code> для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.</li>
- <li>Сделайте ссылки <code>зелёными</code> при наведении.</li>
-</ol>
+1.  Сделайте заголовок розовым, используя CSS-цвет `hotpink`.
+2.  Значение свойства заголовка {{cssxref("border-bottom")}} сделайте пунктирным (10px dotted) и добавьте цвет `purple`.
+3.  Примените к подзаголовку `<h2>` курсив.
+4.  Установите цвет `#eeeeee` для фона {{cssxref("background-color")}} маркированного списка с контактными данными и значение 5px solid purple для {{cssxref("border")}}. Используйте {{cssxref("padding")}}, чтобы отделить содержимое блока от границы.
+5.  Сделайте ссылки `зелёными` при наведении.
 
-<p>У вас должно получиться примерно как-то так:</p>
+У вас должно получиться примерно как-то так:
 
-<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p>
+![Screenshot of how the example should look after completing the assessment.](https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png)
 
-<p>После этого попробуйте использовать селекторы, не указанные здесь, но описанные в <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference">Руководстве по CSS</a>. Не бойтесь ошибок — практикуйтесь!</p>
+После этого попробуйте использовать селекторы, не указанные здесь, но описанные в [Руководстве по CSS](/ru/docs/Web/CSS/Reference). Не бойтесь ошибок — практикуйтесь!
 
-<p>Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!</p>
+Помните: тут нет неверного решения — сейчас вы предоставлены сами себе; развлекайтесь!
 
-<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p>
+{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}}
 
-<h2 id="Помощь">Помощь</h2>
+## Помощь
 
-<p>Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:</p>
+Если вы хотите, чтобы вашу работу оценили, или вы не справляетесь, и вам нужна помощь:
 
-<ol>
- <li>Загрузите ваш код на <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> или <a href="https://glitch.com/" rel="noopener">Glitch</a>.</li>
- <li>Напишите пост с просьбой о помощи и / или оценке на <a href="https://discourse.mozilla.org/c/mdn">форуме MDN</a>. Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть:
-  <ul>
-   <li>Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".</li>
-   <li>Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.</li>
-   <li>Ссылка на ваш код в онлайн-редакторе.</li>
-   <li>Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.</li>
-  </ul>
- </li>
-</ol>
+1.  Загрузите ваш код на [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/).
+2.  Напишите пост с просьбой о помощи и / или оценке на [форуме MDN](https://discourse.mozilla.org/c/mdn). Добавьте тег "learning" к вашему посту, чтобы нам легче было его найти. В вашем посте должны быть:
 
-<h2 id="Что_дальше">Что дальше?</h2>
+    - Заголовок с описанием наподобие "Assessment wanted for CSS First Steps".
+    - Описание того, что вам нужно, — к примеру, что вы уже пробовали, что у вас не получается и вам нужна помощь.
+    - Ссылка на ваш код в онлайн-редакторе.
+    - Ссылка на страницу о помощи, чтобы мы смогли помочь вам с вашим вопросом.
 
-<p>Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, <a href="/ru/docs/Learn/CSS/Building_blocks">Как устроен CSS</a>, мы глубже разберёмся в некоторых аспектах языка.</p>
+## Что дальше?
 
-<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p>
+Поздравляем вас с завершением первого модуля! Теперь вы неплохо разбираетесь в CSS и можете разобраться в таблицах стилей. В следующем модуле, [Как устроен CSS](/ru/docs/Learn/CSS/Building_blocks), мы глубже разберёмся в некоторых аспектах языка.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}
 
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Что такое CSS?</a></li>
- <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Начало работы с CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как структурирован CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
-</ol>
+## В этом модуле
+
+1.  [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/What_is_CSS)
+2.  [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started)
+3.  [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+4.  [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
diff --git a/files/ru/learn/css/first_steps/what_is_css/index.md b/files/ru/learn/css/first_steps/what_is_css/index.md
index 44405da5990cb0..8db48f4b865262 100644
--- a/files/ru/learn/css/first_steps/what_is_css/index.md
+++ b/files/ru/learn/css/first_steps/what_is_css/index.md
@@ -13,119 +13,106 @@ tags:
 translation_of: Learn/CSS/First_steps/What_is_CSS
 original_slug: Learn/CSS/First_steps/Что_такое_CSS
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}
 
-<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First steps")}}</div>
+**{{Glossary("CSS")}}** (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.
 
-<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадные таблицы стилей) позволяет создавать великолепно выглядящие веб-страницы, но как же это работает? Эта статья объясняет, что такое CSS, с помощью простого примера синтаксиса, а также охватывает некоторые ключевые термины о языке.</p>
+| Требуемые знания: | Базовые компьютерные знания, [установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания [работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и базовые знания HTML ([Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)). |
+| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:           | Узнать, что такое CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требуемые знания:</th>
-   <td>Базовые компьютерные знания, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового программного обеспечения</a>, базовые знания <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a> и базовые знания HTML  (<a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, что такое CSS.</td>
-  </tr>
- </tbody>
-</table>
+В модуле [Основы HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.
 
-<p>В модуле <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Основы HTML</a> мы рассмотрели, что такое HTML и как он используется для разметки документов. Эти документы будут доступны для чтения в веб-браузере. Заголовки будут выглядеть больше, чем обычный текст, абзацы разбиваются на новую строку и будут иметь пространство между друг другом. Ссылки выделены цветом и подчёркнуты, чтобы отличить их от остального текста. То, что вы видите, — это стили браузера по умолчанию — самые основные стили, которые браузер применяет к HTML, чтобы гарантировать, что он будет в основном читабельным, даже если автор страницы не указал явный стиль.</p>
+![](https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/17072/Basic_styling__ru.png" style="border: 1px solid #cccccc; height: 678px; width: 1385px;"></p>
+Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся вам дизайн.
 
-<p>Тем не менее, интернет был бы скучным, если бы все сайты выглядели так. Используя CSS, вы можете до мелочей контролировать, как элементы HTML выглядят в браузере, представляя вашу разметку, используя любой понравившийся вам дизайн.</p>
+## Для чего нужен CSS?
 
-<h2 id="Для_чего_нужен_CSS">Для чего нужен CSS?</h2>
+Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.
 
-<p>Как мы уже упоминали ранее, CSS — это язык для определения того, как документы представляются пользователям — как они оформляются, размещаются и т. д.</p>
+**Документ** обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.
 
-<p><strong>Документ</strong> обычно представляет собой текстовый файл, структурированный с использованием языка разметки: {{Glossary("HTML")}} — самый распространённый язык разметки, но вы также можете встретить другие языки разметки, такие как {{Glossary("SVG")}} или {{Glossary("XML")}}.</p>
+**Представление** документа пользователю означает преобразование его в форму, используемую вашей аудиторией**.** {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.
 
-<p><strong>Представление</strong> документа пользователю означает преобразование его в форму, используемую вашей аудиторией<strong>.</strong> {{Glossary("browser","Browsers")}}, такие как {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} или {{Glossary("Microsoft Edge","Edge")}} , предназначены для визуального представления документов, например, на экране компьютера, проектора или принтера.</p>
+> **Примечание:** Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Браузер иногда называют {{Glossary("User agent","user agent")}}, что в основном означает компьютерную программу, которая представляет человека внутри компьютерной системы. Браузеры — это основной тип пользовательского агента, о котором мы думаем, когда говорим о CSS, но он не единственный. Доступны и другие пользовательские агенты, например, те, которые преобразуют документы HTML и CSS в файлы PDF для печати.</p>
-</div>
+CSS может использоваться для очень простой стилизации текста документа, например, изменение [цвета](/ru/docs/Web/CSS/color_value) и [размера](/ru/docs/Web/CSS/font-size) заголовков и ссылок. Он может быть использован для создания макета, например, [превращение одного столбца текста в макет](/ru/docs/Web/CSS/Layout_cookbook/Column_layouts) с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как [анимация](/ru/docs/Web/CSS/CSS_Animations). Посмотрите на ссылки в этом параграфе для конкретных примеров.
 
-<p>CSS может использоваться для очень простой стилизации текста документа, например, изменение <a href="https://developer.mozilla.org/ru/docs/Web/CSS/color_value">цвета</a> и <a href="https://developer.mozilla.org/ru/docs/Web/CSS/font-size">размера</a> заголовков и ссылок. Он может быть использован для создания макета, например, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">превращение одного столбца текста в макет</a> с основной областью контента и боковой панелью для соответствующей информации. Это может даже использоваться для эффектов, таких как <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Animations">анимация</a>. Посмотрите на ссылки в этом параграфе для конкретных примеров.</p>
+## Синтаксис CSS
 
-<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
+CSS — это язык на основе правил: вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на вашей веб-странице. Например:
 
-<p>CSS — это язык на основе правил: вы задаёте правила, определяющие группы стилей, которые должны применяться к определённым элементам или группам элементов на вашей веб-странице. Например:</p>
+«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».
 
-<p>«Я хочу, чтобы основной заголовок на моей странице отображался крупным красным текстом».</p>
+В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:
 
-<p>В следующем коде показано очень простое правило CSS, которое будет соответствовать стилю, описанному выше:</p>
-
-<pre class="brush: css">h1 {
+```css
+h1 {
     color: red;
     font-size: 5em;
-}</pre>
+}
+```
 
-<p>Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).</p>
+Правило открывается с помощью {{Glossary("CSS Selector", "селектора")}} . Этот селектор выбирает HTML-элемент, который мы собираемся стилизовать. В этом случае мы используем заголовки первого уровня — ({{htmlelement("h1")}}).
 
-<p>Затем у нас есть набор фигурных скобок <code>{ }</code>. Внутри них будет один или несколько <strong>объявлений</strong>, которые принимают форму пары <strong>свойства</strong> и его <strong>значения</strong>. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.</p>
+Затем у нас есть набор фигурных скобок `{ }`. Внутри них будет один или несколько **объявлений**, которые принимают форму пары **свойства** и его **значения**. Каждая пара указывает свойство элемента(-ов), который(-е) мы выбираем, а затем значение, которое мы хотели бы присвоить свойству.
 
-<p>Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство <code>color</code>, которое может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">цветовые значения</a>. У нас также есть свойство <code>font-size</code>. Это свойство может принимать различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">значения размера</a>, как и свойства.</p>
+Перед двоеточием у нас есть свойство, а после двоеточия — значение. CSS-{{Glossary("property/CSS","свойства")}} имеют разные допустимые значения в зависимости от того, какое свойство указывается. В нашем примере мы имеем свойство `color`, которое может принимать различные [цветовые значения](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Color). У нас также есть свойство `font-size`. Это свойство может принимать различные [значения размера](/ru/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages), как и свойства.
 
-<p>Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.</p>
+Таблица стилей CSS будет содержать много таких правил, написанных одно за другим.
 
-<pre class="brush: css">h1 {
+```css
+h1 {
     color: red;
     font-size: 5em;
 }
 
 p {
     color: black;
-}</pre>
+}
+```
 
-<p>Вы обнаружите, что вы быстро изучаете некоторые значения, тогда как другие вам нужно искать. Страницы отдельных свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забыли или хотите узнать, что ещё вы можете использовать в качестве значения.</p>
+Вы обнаружите, что вы быстро изучаете некоторые значения, тогда как другие вам нужно искать. Страницы отдельных свойств в MDN дают вам быстрый способ поиска свойств и их значений, когда вы забыли или хотите узнать, что ещё вы можете использовать в качестве значения.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN <a href="/en-US/docs/Web/CSS/Reference">Руководстве по CSS</a>. Кроме того, вы должны привыкнуть к поиску "MDN <em>css-feature-name</em>" в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!</p>
-</div>
+> **Примечание:** вы можете найти ссылки на все страницы свойств CSS (вместе с другими функциями CSS), перечисленные в MDN [Руководстве по CSS](/ru/docs/Web/CSS/Reference). Кроме того, вы должны привыкнуть к поиску "MDN _css-feature-name_" в вашем браузере, когда вам нужно узнать больше информации о функции CSS. Например, попробуйте поискать «mdn color» и «mdn font-size»!
 
-<h2 id="CSS-модули">CSS-модули</h2>
+## CSS-модули
 
-<p>Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">Свойства фона и границ</a>, чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).</p>
+Поскольку существует множество вещей, которые можно стилизовать с помощью CSS, язык разбит на модули. По мере изучения MDN вы увидите ссылки на эти модули, а многие страницы документации организованы вокруг определённого модуля. Например, вы можете взглянуть на ссылку MDN в модуле [Свойства фона и границ](/ru/docs/Web/CSS/CSS_Backgrounds_and_Borders), чтобы узнать, какова его цель и какие различные свойства и другие функции он содержит. Вы также найдёте ссылки на спецификацию CSS, которая определяет технологию (см. ниже).
 
-<p>На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.</p>
+На этом этапе вам не нужно слишком беспокоиться о том, как структурирован CSS, однако это может упростить поиск информации, если, например, вы знаете, что определённое свойство может быть найдено среди других похожих вещей, и поэтому, вероятно, в той же спецификации.
 
-<p>Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> и <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code>, которые будут определены в этом модуле. И Вы правы.</p>
+Для конкретного примера давайте вернёмся к модулю Свойства фона и границ — вы можете подумать, что это логично для свойств [`background-color`](/en-US/docs/Web/CSS/background-color) и [`border-color`](/en-US/docs/Web/CSS/border-color), которые будут определены в этом модуле. И Вы правы.
 
-<h3 id="Технические_характеристики_CSS">Технические характеристики CSS</h3>
+### Технические характеристики CSS
 
-<p>Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.</p>
+Все технологии веб-стандартов (HTML, CSS, JavaScript и т. д.) определены в гигантских документах, называемых спецификациями, которые публикуются организациями по стандартизации (такие как {{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} или {{glossary("Khronos")}}) и определяют, как эти технологии должны вести себя.
 
-<p>CSS ничем не отличается — он разработан группой в W3C, которая называется <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a>. Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.</p>
+CSS ничем не отличается — он разработан группой в W3C, которая называется [CSS Working Group](https://www.w3.org/Style/CSS/). Эта группа состоит из представителей производителей браузеров и других компаний, которые заинтересованы в CSS. Есть также другие люди, известные как приглашённые эксперты, которые выступают как независимые голоса; они не связаны с членами организации.
 
-<p>Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!</p>
+Новые функции CSS разрабатываются или определяются рабочей группой CSS. Иногда потому, что конкретный браузер заинтересован в том, чтобы иметь какие-то возможности, иногда потому, что веб-дизайнеры и разработчики запрашивают функцию, а иногда потому, что сама рабочая группа определила требование. CSS постоянно развивается, появляются новые функции. Тем не менее, ключевым моментом в CSS является то, что все работают очень усердно, чтобы никогда не менять вещи таким образом, чтобы это сломало старые сайты. Веб-сайт, созданный в 2000 году, с использованием ограниченного CSS, доступного в то время, должен всё ещё использоваться в браузере сегодня!
 
-<p>Как новичок в CSS, вполне вероятно, что вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.</p>
+Как новичок в CSS, вполне вероятно, что вы найдёте CSS-спецификации ошеломляющими — они предназначены для инженеров, чтобы использовать их для реализации поддержки функций в пользовательских агентах, а не для веб-разработчиков, чтобы читать, чтобы понимать CSS. Многие опытные разработчики предпочитают обращаться к документации MDN или другим учебникам. Однако стоит знать, что они существуют, понимать взаимосвязь между используемым CSS, поддержкой браузера (см. ниже) и спецификациями.
 
-<h2 id="Поддержка_браузера">Поддержка браузера</h2>
+## Поддержка браузера
 
-<p>После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a><a href="/ru/docs/">.</a> Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте.</p>
+После того как CSS был указан, он будет полезен для разработки веб-страниц, только если один или несколько браузеров его реализовали. Это означает, что код был написан для превращения инструкции в нашем CSS-файле во что-то, что может быть выведено на экран. Мы рассмотрим этот процесс подробнее на уроке [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)[.](/ru/docs/) Это необычно для всех браузеров, чтобы реализовать функцию одновременно, и поэтому обычно есть пробел, где вы можете использовать некоторую часть CSS в одних браузерах, а не в других. По этой причине полезно проверять состояние реализации. На каждой странице свойств в MDN вы можете видеть статус интересующего вас свойства, чтобы вы могли определить, сможете ли вы использовать её на веб-сайте.
 
-<p>Ниже приведена диаграмма данных для CSS свойства <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code>:</p>
+Ниже приведена диаграмма данных для CSS свойства [`font-family`](/en-US/docs/Web/CSS/font-family):
 
-<p>{{Compat("css.properties.font-family")}}</p>
+{{Compat("css.properties.font-family")}}
 
-<h2 id="Что_дальше">Что дальше?</h2>
+## Что дальше?
 
-<p>Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к <a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Getting_started">Началу работы с CSS</a>, где вы можете начать писать CSS самостоятельно.</p>
+Теперь, когда у вас есть некоторое представление о том, что такое CSS, давайте перейдём к [Началу работы с CSS](/ru/docs/Learn/CSS/First_steps/Getting_started), где вы можете начать писать CSS самостоятельно.
 
-<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ol>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS">Что такое CSS?</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps">Начало работы с CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS">Как структурирован CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/How_CSS_works">Как работает CSS</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Использование ваших новых знаний</a></li>
-</ol>
+1.  [Что такое CSS?](/ru/docs/Learn/CSS/First_steps/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_CSS)
+2.  [Начало работы с CSS](/ru/docs/Learn/CSS/First_steps)
+3.  [Как структурирован CSS](/ru/docs/Learn/CSS/First_steps/%D0%9A%D0%B0%D0%BA_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD_CSS)
+4.  [Как работает CSS](/ru/docs/Learn/CSS/First_steps/How_CSS_works)
+5.  [Использование ваших новых знаний](/ru/docs/Learn/CSS/First_steps/Using_your_new_knowledge)
diff --git a/files/ru/learn/css/howto/css_faq/index.md b/files/ru/learn/css/howto/css_faq/index.md
index 5671e885a79602..6838b0c4d2b571 100644
--- a/files/ru/learn/css/howto/css_faq/index.md
+++ b/files/ru/learn/css/howto/css_faq/index.md
@@ -4,180 +4,186 @@ slug: Learn/CSS/Howto/CSS_FAQ
 translation_of: Learn/CSS/Howto/CSS_FAQ
 original_slug: Web/CSS/Common_CSS_Questions
 ---
-<h2 id="Why_doesn't_my_CSS_which_is_valid_render_correctly">Why doesn't my CSS, which is valid, render correctly?</h2>
+## Why doesn't my CSS, which is valid, render correctly?
 
-<p>Браузер использует декларацию <code>DOCTYPE</code> чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме,  которую будут поддерживать старые браузеры. Правильное использование декларации <code>DOCTYPE</code> в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.</p>
+Браузер использует декларацию `DOCTYPE` чтобы выбрать, как именно отображать документ - в форме, более совместимой с современными стандартами или в форме, которую будут поддерживать старые браузеры. Правильное использование декларации `DOCTYPE` в начале вашего HTML кода повлияет на совместимость с современными стандартами веб браузеров.
 
-<p>У современных браузеров есть два режима отображения веб-страниц:</p>
+У современных браузеров есть два режима отображения веб-страниц:
 
-<ul>
- <li><em>Индивидуальный</em>: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы  с неполной, некорректной или отсутствующий <code>DOCTYPE</code> декларацией или с тем видом <code>DOCTYPE</code>, который использовался до 2001 года, будет отображён в индивидуальном режиме.</li>
- <li><em>Стандартный</em>: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным  <code>DOCTYPE</code> отображаются уже в стандартом режиме.</li>
-</ul>
+- _Индивидуальный_: его также называют backwards-compatibility mode, даёт возможность устаревшим страницам отображаться так, как планировал автор, следуя уже не стандартным правилам отображения, которые использовались ещё старыми браузерами. Документы с неполной, некорректной или отсутствующий `DOCTYPE` декларацией или с тем видом `DOCTYPE`, который использовался до 2001 года, будет отображён в индивидуальном режиме.
+- _Стандартный_: в этом режиме браузер старается строго следовать стандартам W3C. Ожидается, что современные HTML страницы разработаны для браузеров, следуемых стандартам, и в результате, страницы с современным `DOCTYPE` отображаются уже в стандартом режиме.
 
-<p>Gecko-based browsers, have a third <em><a href="/en-US/docs/Gecko's_&quot;Almost_Standards&quot;_Mode" title="Gecko's_&quot;Almost_Standards&quot;_Mode">Almost Standards Mode</a></em> that has only a few minor quirks.</p>
+Gecko-based browsers, have a third _[Almost Standards Mode](/ru/docs/Gecko's_"Almost*Standards"\_Mode "Gecko's*\"Almost*Standards\"\_Mode")* that has only a few minor quirks.
 
-<p>This is a list of the most commonly used <code>DOCTYPE</code> declarations that will trigger Standards or Almost Standards mode:</p>
+This is a list of the most commonly used `DOCTYPE` declarations that will trigger Standards or Almost Standards mode:
 
-<pre>&lt;!DOCTYPE html&gt; /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
+```
+<!DOCTYPE html> /* This is the HTML5 doctype. Given that each modern browser uses an HTML5
                    parser, this is the recommended doctype */
 
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
-"http://www.w3.org/TR/html4/loose.dtd"&gt;
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
+"http://www.w3.org/TR/html4/loose.dtd">
 
-&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-"http://www.w3.org/TR/html4/strict.dtd"&gt;
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+"http://www.w3.org/TR/html4/strict.dtd">
 
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
-&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
-</pre>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+```
 
-<h2 id="My_CSS_is_valid.2C_but_not_correctly_rendered">Why doesn't my CSS, which is valid, render at all?</h2>
+## Why doesn't my CSS, which is valid, render at all?
 
-<p>To be applied, a CSS stylesheet must be served with a <code>text/css</code> MIME type. If the Web server doesn't serve it with this type, it won't be applied.</p>
+To be applied, a CSS stylesheet must be served with a `text/css` MIME type. If the Web server doesn't serve it with this type, it won't be applied.
 
-<h2 id="Difference_between_id_and_class">What is the difference between <code>id</code> and <code>class</code>?</h2>
+## What is the difference between `id` and `class`?
 
-<p>HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.<br>
- <br>
- Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.<br>
- <br>
- Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.</p>
+HTML elements can have an id and/or class attribute. The id attribute assigns a name to the element it is applied to, and for valid markup, there can be only one element with that name. The class attribute assigns a class name to the element, and that name can be used on many elements within the page. CSS allows you to apply styles to particular id and/or class names.
 
-<p>Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).</p>
+Use an id-specific style when you want to restrict the applied styling rules to one specific block or element. This style will only be used by the element with that particular id.
 
-<p>See <a href="/en-US/docs/CSS/Getting_Started/Selectors" title="CSS/Getting_Started/Selectors"> CSS selectors</a></p>
+Use a class-specific style when you want to apply the styling rules to many blocks and elements within the page.
 
-<h2 id="Restoring_the_default_property_value">How do I restore the default value of a property?</h2>
+Stylesheets with fewer rules are usually more performant. It is therefore recommended to use classes as much as possible, and to reserve the use of id for specific uses (like to connect label and form elements or for styling elements that must be semantically unique).
 
-<p>Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.</p>
+See [CSS selectors](/ru/docs/CSS/Getting_Started/Selectors "CSS/Getting_Started/Selectors")
 
-<p>This has changed with CSS 2; the keyword <a href="/es/CSS/initial" title="initial">initial</a> is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.</p>
+## How do I restore the default value of a property?
 
-<h2 id="Derived_styles">How do I derive one style from another?</h2>
+Initially CSS didn't provide a "default" keyword and the only way to restore the default value of a property is to explicitly re-declare that property.
 
-<p>CSS does not allow one style to be defined in terms of another. (See <a href="http://archivist.incutio.com/viewlist/css-discuss/2685">Eric Meyer's note about the Working Group's stance</a>). However, assigning multiple classes to a single element can provide the same effect.</p>
+This has changed with CSS 2; the keyword [initial](/es/CSS/initial "initial") is now a valid value for a CSS property. It resets it to its default value, which is defined in the CSS specification of the given property.
 
-<h2 id="Assigning_multiple_classes">How do I assign multiple classes to an element?</h2>
+## How do I derive one style from another?
 
-<p>HTML elements can be assigned multiple classes by listing the classes in the <code>class</code> attribute, with a blank space to separate them.</p>
+CSS does not allow one style to be defined in terms of another. (See [Eric Meyer's note about the Working Group's stance](http://archivist.incutio.com/viewlist/css-discuss/2685)). However, assigning multiple classes to a single element can provide the same effect.
 
-<pre>&lt;style type="text/css"&gt;
+## How do I assign multiple classes to an element?
+
+HTML elements can be assigned multiple classes by listing the classes in the `class` attribute, with a blank space to separate them.
+
+```
+<style type="text/css">
 .news { background: black; color: white; }
 .today { font-weight: bold; }
-&lt;/style&gt;
+</style>
 
-&lt;div class="news today"&gt;
+<div class="news today">
 ... content of today's news ...
-&lt;/div&gt;
-</pre>
+</div>
+```
 
-<p>If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the <code>class</code> attribute is not relevant.</p>
+If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations. The order of classes in the `class` attribute is not relevant.
 
-<h2 id="Style_rules_that_don.27t_work">Why don't my style rules work properly?</h2>
+## Why don't my style rules work properly?
 
-<p>Style rules that are syntactically correct may not apply in certain situations. You can use <a href="/en-US/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a>'s <em>CSS Style Rules</em> view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.</p>
+Style rules that are syntactically correct may not apply in certain situations. You can use [DOM Inspector](/ru/docs/DOM_Inspector "DOM_Inspector")'s _CSS Style Rules_ view to debug problems of this kind, but the most frequent instances of ignored style rules are listed below.
 
-<h3 id="HTML_elements_hierarchy">HTML elements hierarchy</h3>
+### HTML elements hierarchy
 
-<p>The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.</p>
+The way CSS styles are applied to HTML elements depends also on the elements hierarchy. It is important to remember that a rule applied to a descendent overrides the style of the parent, in spite of any specificity or priority of CSS rules.
 
-<pre>.news { color: black; }
+```
+.news { color: black; }
 .corpName { font-weight: bold; color: red; }
 
-&lt;!-- news item text is black, but corporate name is red and in bold --&gt;
-&lt;div class="news"&gt;
-   (Reuters) &lt;span class="corpName"&gt;General Electric&lt;/span&gt; (GE.NYS) announced on Thursday...
-&lt;/div&gt;
-</pre>
+<!-- news item text is black, but corporate name is red and in bold -->
+<div class="news">
+   (Reuters) <span class="corpName">General Electric</span> (GE.NYS) announced on Thursday...
+</div>
+```
 
-<p>In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.</p>
+In case of complex HTML hierarchies, if a rule seems to be ignored, check if the element is inside another element with a different style.
 
-<h3 id="Explicitly_re-defined_style_rule">Explicitly re-defined style rule</h3>
+### Explicitly re-defined style rule
 
-<p>In CSS stylesheets, order <strong>is</strong> important. If you define a rule and then you re-define the same rule, the last definition is used.</p>
+In CSS stylesheets, order **is** important. If you define a rule and then you re-define the same rule, the last definition is used.
 
-<pre>#stockTicker { font-weight: bold; }
+```
+#stockTicker { font-weight: bold; }
 .stockSymbol { color: red; }
 /*  other rules             */
 /*  other rules             */
 /*  other rules             */
 .stockSymbol { font-weight: normal; }
 
-&lt;!-- most text is in bold, except "GE", which is red and not bold --&gt;
-&lt;div id="stockTicker"&gt;
-   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
+<!-- most text is in bold, except "GE", which is red and not bold -->
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+```
 
-<p>To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.</p>
+To avoid this kind of error, try to define rules only once for a certain selector, and group all rules belonging to that selector.
 
-<h3 id="Use_of_a_shorthand_property">Use of a shorthand property</h3>
+### Use of a shorthand property
 
-<p>Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.</p>
+Using shorthand properties for defining style rules is good because it uses a very compact syntax. Using shorthand with only some attributes is possible and correct, but it must be remembered that undeclared attributes are automatically reset to default. This means that a previous rule for a single attribute could be implicitly overridden.
 
-<pre>#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
+```
+#stockTicker { font-size: 12px; font-family: Verdana; font-weight: bold; }
 .stockSymbol { font: 14px Arial; color: red; }
 
-&lt;div id="stockTicker"&gt;
-   NYS: &lt;span class="stockSymbol"&gt;GE&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
+<div id="stockTicker">
+   NYS: <span class="stockSymbol">GE</span> +1.0 ...
+</div>
+```
 
-<p>In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order <strong>is</strong> important.</p>
+In the previous example the problem occurred on rules belonging to different elements, but it could happen also for the same element, because rule order **is** important.
 
-<pre>#stockTicker {
+```
+#stockTicker {
    font-weight: bold;
    font: 12px Verdana;  /* font-weight is now normal */
 }
-</pre>
+```
 
-<h3 id="Use_of_the_.2A_selector">Use of the <code>*</code> selector</h3>
+### Use of the `*` selector
 
-<p>The <code>*</code> wildcard selector refers to any element, and it has to be used with particular care.</p>
+The `*` wildcard selector refers to any element, and it has to be used with particular care.
 
-<pre>body * { font-weight: normal; }
+```
+body * { font-weight: normal; }
 #stockTicker { font: 12px Verdana; }
 .corpName { font-weight: bold; }
 .stockUp { color: red; }
 
-&lt;div id="section"&gt;
-   NYS: &lt;span class="corpName"&gt;&lt;span class="stockUp"&gt;GE&lt;/span&gt;&lt;/span&gt; +1.0 ...
-&lt;/div&gt;
-</pre>
+<div id="section">
+   NYS: <span class="corpName"><span class="stockUp">GE</span></span> +1.0 ...
+</div>
+```
 
-<p>In this example the <code>body *</code> selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So <code>font-weight: bold;</code> applied to the .corpName class is overridden by <code>font-weight: normal;</code> applied to all elements in the body.</p>
+In this example the `body *` selector applies the rule to all elements inside body, at any hierarchy level, including the .stockUp class. So `font-weight: bold;` applied to the .corpName class is overridden by `font-weight: normal;` applied to all elements in the body.
 
-<p>The use of the * selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.</p>
+The use of the \* selector should be minimized as it is a slow selector, especially when not used as the first element of a selector. Its use should be avoided as much as possible.
 
-<h3 id="Specificity_in_CSS">Specificity in CSS</h3>
+### Specificity in CSS
 
-<p>When multiples rules apply to a certain element, the rule chosen depends on its style <a href="/en-US/docs/CSS/Specificity" title="Specificity">specificity</a>. Inline style (in HTML <code>style</code> attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.</p>
+When multiples rules apply to a certain element, the rule chosen depends on its style [specificity](/ru/docs/CSS/Specificity "Specificity"). Inline style (in HTML `style` attributes) comes first, followed by ID selectors, then class selectors and eventually element-name selectors.
 
-<pre>div { color: black; }
+```
+div { color: black; }
 #orange { color: orange; }
 .green { color: green; }
 
-&lt;div id="orange" class="green" style="color: red;"&gt;This is red&lt;/div&gt;
-</pre>
+<div id="orange" class="green" style="color: red;">This is red</div>
+```
 
-<p>The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the <a href="http://www.w3.org/TR/CSS21/cascade.html#specificity">CSS 2.1 Specification chapter 6.4.3</a>.</p>
+The rules are more complicated when the selector has multiple parts. More detailed information about how selector specificity is calculated can be found in the [CSS 2.1 Specification chapter 6.4.3](http://www.w3.org/TR/CSS21/cascade.html#specificity).
 
-<h2 id="What_do_the_-moz-.2A_properties_do.3F">What do the -moz-*, -ms-*, -webkit-*, -o-* and -khtml-* properties do?</h2>
+## What do the -moz-\*, -ms-\*, -webkit-\*, -o-\* and -khtml-\* properties do?
 
-<p>These properties, called <em>prefixed properties</em>, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.</p>
+These properties, called _prefixed properties_, are extensions to the CSS standard. They are used to use experimental and non-standard features without polluting the regular namespace, preventing future incompatibilities to arise when the standard is extended.
 
-<p>The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.</p>
+The use of such properties on production websites is not recommended. If nevertheless needed, you are hinted to make a plan for the website evolution: these prefixed properties can be modified or even suppressed when the standard evolves.
 
-<p>Please see the <a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="CSS Reference/Mozilla Extensions">Mozilla CSS Extensions</a> page for more information on the Mozilla-prefixed CSS properties.</p>
+Please see the [Mozilla CSS Extensions](/ru/docs/CSS/CSS_Reference/Mozilla_Extensions "CSS Reference/Mozilla Extensions") page for more information on the Mozilla-prefixed CSS properties.
 
-<h2 id="How_does_z-index_relate_to_positioning">How does z-index relate to positioning?</h2>
+## How does z-index relate to positioning?
 
-<p>The z-index property specifies the stack order of elements.</p>
+The z-index property specifies the stack order of elements.
 
-<p>An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.</p>
+An element with a higher z-index/stack order is always in front of an element with a lower z-index/stack order.
 
-<p>Z-index will only work on elements that have a specified position (<code>position:absolute</code>, <code>position:relative</code>, or <code>position:fixed</code>).</p>
+Z-index will only work on elements that have a specified position (`position:absolute`, `position:relative`, or `position:fixed`).
diff --git a/files/ru/learn/css/howto/index.md b/files/ru/learn/css/howto/index.md
index 6f1ef6fa98e0f3..65b439c0238512 100644
--- a/files/ru/learn/css/howto/index.md
+++ b/files/ru/learn/css/howto/index.md
@@ -4,84 +4,64 @@ slug: Learn/CSS/Howto
 translation_of: Learn/CSS/Howto
 original_slug: Learn/CSS/Как
 ---
-<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.</p>
-
-<h2 id="Примеры_и_использование">Примеры и использование</h2>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Основы">Основы</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Как применить CSS к HTML</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">Как использовать пробелы в CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">Как писать комментарии в CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">Как выбрать элементы через имя элемента, класс или ID</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">Как выбрать элементы через имя атрибута и содержания</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">Как использовать псевдоклассы</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">Как использовать псевдо-элементы</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">Как применить несколько селекторов к тому же правилу</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">Как определить цвета в CSS</a></li>
- <li>
-  <p><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">Как отлаживать CSS в браузере</a></p>
- </li>
-</ul>
-
-<h3 id="CSS_и_текст">CSS и текст</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Как стилизовать текст</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">Как стилизовать ссылки</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Блоки_и_разметка">Блоки и разметка</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Необычное_или_передовые_технологии">Необычное или передовые технологии</h2>
-
-<p>Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.</p>
-
-<h3 id="Общие">Общие</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li>
- <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li>
-</ul>
-
-<h3 id="Дополнительные_эффекты">Дополнительные эффекты</h3>
-
-<ul>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li>
-</ul>
-
-<h3 id="Разметка">Разметка</h3>
-
-<ul>
- <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li>
- <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li>
-</ul>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.</p>
+Следующие ссылки указывают на решения общих повседневных проблем, вам придётся решать их с помощью CSS.
+
+## Примеры и использование
+
+### Основы
+
+- [Как применить CSS к HTML](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML)
+- [Как использовать пробелы в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space)
+- [Как писать комментарии в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments)
+- [Как выбрать элементы через имя элемента, класс или ID](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors)
+- [Как выбрать элементы через имя атрибута и содержания](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors)
+- [Как использовать псевдоклассы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes)
+- [Как использовать псевдо-элементы](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements)
+- [Как применить несколько селекторов к тому же правилу](/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule)
+- [Как определить цвета в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors)
+- [Как отлаживать CSS в браузере](/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS)
+
+### CSS и текст
+
+- [Как стилизовать текст](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+- [How to customize a list of elements](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Как стилизовать ссылки](/en-US/Learn/CSS/Styling_text/Styling_links)
+- [How to add shadows to text](/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows)
+
+### Блоки и разметка
+
+- [How to size CSS boxes](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties)
+- [How to control overflowing content](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow)
+- [How to control the part of a CSS box that the background is drawn under](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip)
+- [How do I define inline, block, and inline-block?](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes)
+- [How to create fancy boxes](/ru/docs/Learn/CSS/Howto/create_fancy_boxes) (also see the [Styling boxes](/ru/docs/Learn/CSS/Styling_boxes) module, generally).
+- [How to use `background-clip` to control how much of the box your background image covers](/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip).
+- [How to change the box model completely using `box-sizing`](/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely)
+- [How to control backgrounds](/en-US/Learn/CSS/Styling_boxes/Backgrounds)
+- [How to control borders](/en-US/Learn/CSS/Styling_boxes/Borders)
+- [How to style an HTML table](/en-US/Learn/CSS/Styling_boxes/Styling_tables)
+- [How to add shadows to boxes](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows)
+
+## Необычное или передовые технологии
+
+Beyond the basics, CSS is allows very advanced design techniques. These articles help you tackle the hardest use cases you may face.
+
+### Общие
+
+- [How to calculate specificity of a CSS selector](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity)
+- [How to control inheritance in CSS](/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance)
+
+### Дополнительные эффекты
+
+- [How to use filters in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters)
+- [How to use blend modes in CSS](/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes)
+
+### Разметка
+
+- [Using CSS flexible boxes](/ru/docs/Web/Guide/CSS/Flexible_boxes)
+- [Using CSS multi-column layouts](/ru/docs/Web/Guide/CSS/Using_multi-column_layouts)
+- [Using CSS generated content](/ru/docs/Web/Guide/CSS/Getting_started/Content)
+
+## Смотрите также
+
+[CSS FAQ](/ru/docs/Learn/CSS/Howto/CSS_FAQ) — A collection of smaller bits of information, covering a variety of topics from debugging to selector usage.
diff --git a/files/ru/learn/css/index.md b/files/ru/learn/css/index.md
index 290cee77a5ceca..9eaa868b38d95e 100644
--- a/files/ru/learn/css/index.md
+++ b/files/ru/learn/css/index.md
@@ -15,61 +15,50 @@ translation_of: Learn/CSS
 ---
 {{LearnSidebar}}
 
-<p class="summary">Каскадные таблицы стилей — или {{glossary("CSS")}} — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.</p>
+Каскадные таблицы стилей — или {{glossary("CSS")}} — это технология, которую следует изучать непосредственно после HTML. В отличие от HTML, который служит для определения структуры и семантики содержимого, CSS отвечает за его внешний вид и отображение. К примеру, с помощью CSS можно изменять шрифт, цвет, размер, межстрочный интервал, разделять содержимое на колонки, а также добавлять анимацию и другие декоративные элементы.
 
-<div class="callout">
-  <h4 id="Looking_to_become_a_front-end_web_developer">Хотите стать frontend-разработчиком?</h4>
+> **Сноска:** #### Хотите стать frontend-разработчиком?Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.[**Начать изучение курса**](/ru/docs/Learn/Front-end_web_developer)
 
-  <p>Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.</p>
+## Необходимые условия
 
-  <p><a href="/ru/docs/Learn/Front-end_web_developer"><strong>Начать изучение курса</strong></a></p>
+Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)
 
-</div>
+После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье [Установка рабочего пространства](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software) подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), которая включена в полное руководство для новичка [Основы веб](/ru/docs/Learn/Getting_started_with_the_web).
 
-<p>Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль <a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a></p>
+Перед тем как начинать данный раздел, мы рекомендуем пройти руководство [Основы веб](/ru/docs/Learn/Getting_started_with_the_web), хотя это вовсе не обязательно — большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе [Введение в CSS](/ru/docs/Learn/CSS/First_steps), хотя и более детально.
 
-<p>После того как вы разберётесь с основами HTML, мы рекомендуем продолжать изучение HTML и CSS одновременно, переключаясь между темами. HTML гораздо интереснее в сочетании с CSS, и вы не можете по настоящему изучить CSS не зная HTML</p>
+## Модули
 
-<p>В данном разделе содержится информация, которая требует базового знакомства с компьютером и интернетом. В статье <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Установка рабочего пространства</a> подробно описано необходимое ПО и способы его установки, необходимо также будет уметь создавать и управлять файлами, в чём поможет статья <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>, которая включена в полное руководство для новичка <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>.</p>
+Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.
 
-<p>Перед тем как начинать данный раздел, мы рекомендуем пройти руководство <a href="/ru/docs/Learn/Getting_started_with_the_web">Основы веб</a>, хотя это вовсе не обязательно — большая часть того, что вы найдёте в статье об основах CSS также встречается в разделе <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>, хотя и более детально.</p>
+- [Введение в CSS](/ru/docs/Learn/CSS/First_steps)
+  - : CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.
+- [Устройство CSS](/ru/docs/Learn/CSS/Building_blocks)
 
-<h2 id="Модули">Модули</h2>
+  - : Этот модуль продолжается с того места, где закончился модуль [введение в CSS](/ru/docs/Learn/CSS/First_steps) — теперь, после того как вы познакомились с языком и получили опыт его использования, пришло время погрузится немного глубже. В этот модуле рассказывается про каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и рамок, отладку, и многое другое.
 
-<p>Этот раздел содержит модули в порядке, наиболее подходящем для работы с ними. Лучше всего начать с самого первого.</p>
+    Цель этого модуля — предоставить вам инструментарий для написания компетентного CSS, перед переходом к более специфичным дисциплинам, как [стилизация текста](/ru/docs/Learn/CSS/Styling_text) и [CSS раскладки](/ru/docs/Learn/CSS/CSS_layout).
 
-<dl>
-  <dt><a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a></dt>
-  <dd>CSS (каскадные таблицы стилей) используется для стилизации и компоновки веб-страниц — например, для изменения шрифта, цвета, размера и интервала содержимого, разделения его на несколько столбцов или добавления анимации и других декоративных элементов. Этот модуль обеспечивает хорошее начало вашего пути к освоению CSS с основами того, как он работает, как выглядит синтаксис и как вы можете начать использовать его для добавления стилей в HTML.</dd>
-  <dt><a href="/ru/docs/Learn/CSS/Building_blocks">Устройство CSS</a></dt>
-  <dd>
-  <p class="summary">Этот модуль продолжается с того места, где закончился модуль <a href="/ru/docs/Learn/CSS/First_steps">введение в CSS</a> — теперь, после того как вы познакомились с языком и получили опыт его использования, пришло время погрузится немного глубже. В этот модуле рассказывается про каскад и наследование, все доступные типы селекторов, единицы измерения, размеры, стилизацию фона и рамок, отладку, и многое другое.</p>
+- [Стилизация текста](/ru/docs/Learn/CSS/Styling_text)
+  - : После изучения основ, следующая тема, которую стоит изучить — стилизация текста. Это одна из самых распространенных вещей, для которых используется CSS. В этом модуле мы рассмотрим основы стилизации текста, включая установку шрифта, жирность, курсив, межстрочный и межбуквенный интервалы, тени и другие особенности оформления. В завершении модуля мы рассмотрим подключение пользовательских шрифтов на странице, а так же стилизацию списков и ссылок
+- [CSS раскладки](/ru/docs/Learn/CSS/CSS_layout)
+  - : К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.
 
-  <p class="summary">Цель этого модуля — предоставить вам инструментарий для написания компетентного CSS, перед переходом к более специфичным дисциплинам, как <a href="/ru/docs/Learn/CSS/Styling_text">стилизация текста</a> и <a href="/ru/docs/Learn/CSS/CSS_layout">CSS раскладки</a>.</p>
-  </dd>
-  <dt><a href="/ru/docs/Learn/CSS/Styling_text">Стилизация текста</a></dt>
-  <dd>После изучения основ, следующая тема, которую стоит изучить — стилизация текста. Это одна из самых распространенных вещей, для которых используется CSS. В этом модуле мы рассмотрим основы стилизации текста, включая установку шрифта, жирность, курсив, межстрочный и межбуквенный интервалы, тени и другие особенности оформления. В завершении модуля мы рассмотрим подключение пользовательских шрифтов на странице, а так же стилизацию списков и ссылок</dd>
-  <dt><a href="/ru/docs/Learn/CSS/CSS_layout">CSS раскладки</a></dt>
-  <dd>К текущему моменту мы познакомились с основами CSS. Мы знаем, как оформлять текст, как оформлять и изменять блоки, в которых находится ваш контент. Пришло время узнать, как разместить ваши блоки в нужных местах в зависимости от области просмотра и тому подобного. Мы уже знаем достаточно, чтобы погрузиться в изучение раскладки с помощью CSS, в то, как изменять отображение в зависимости от особенностей экрана, как использовать современные методы раскладки, такие как Flexbox и CSS grid, и некоторые традиционные методы раскладки, которые все ещё применяются.</dd>
-</dl>
+## Решаем часто встречающиеся проблемы в CSS
 
-<h2 id="Решаем_часто_встречающиеся_проблемы_в_CSS">Решаем часто встречающиеся проблемы в CSS</h2>
+В разделе **[Использование CSS для решения общих проблем](/ru/docs/Learn/CSS/Howto)** даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.
 
-<p>В разделе <strong><a href="/ru/docs/Learn/CSS/Howto">Использование CSS для решения общих проблем</a></strong> даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.</p>
+В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.
 
-<p>В самом начале вы будете применять цвет к тексту и фону HTML-элементов, изменять их размер, форму, местоположение, добавлять и стилизовать границы. Однако с углублённым знанием даже основ CSS вы сможете сделать практически что угодно. Одним из плюсов изучения CSS является то, что вы быстро начнёте понимать, можно или нельзя что-то сделать средствами CSS, даже если вы ещё не уверены, как это сделать.</p>
+## "CSS странный"
 
-<h2 id="CSS_странный">"CSS странный"</h2>
+CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:
 
-<p>CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:</p>
+{{EmbedYouTube("aHUtMbJw8iA")}}
 
-<p>{{EmbedYouTube("aHUtMbJw8iA")}}</p>
+## Смотрите также
 
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<dl>
-  <dt><a href="/ru/docs/Web/CSS">CSS на MDN</a></dt>
-  <dd>Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда</dd>
-</dl>
+- [CSS на MDN](/ru/docs/Web/CSS)
+  - : Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда
diff --git a/files/ru/learn/css/styling_text/fundamentals/index.md b/files/ru/learn/css/styling_text/fundamentals/index.md
index 2e71fbb4903310..73fa29292043fa 100644
--- a/files/ru/learn/css/styling_text/fundamentals/index.md
+++ b/files/ru/learn/css/styling_text/fundamentals/index.md
@@ -3,283 +3,208 @@ title: Основы стилизирования текста и шрифта
 slug: Learn/CSS/Styling_text/Fundamentals
 translation_of: Learn/CSS/Styling_text/Fundamentals
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
 
-<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div>
+В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.
 
-<p class="summary">В данной статье мы начнём путь к овладению стилизацией текста при помощи {{glossary("CSS")}}. Мы подробно изучим основы стилизации текста и шрифта, такие как толщина, начертание, семейство, стенография, выравнивание текста и другие эффекты, а также рассмотрим междустрочный и межбуквенный интервалы.</p>
+| Необходимые знания: | Базовые компьютерные знания, Основы HTML (раздел [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)), основы CSS (раздел [Введение в CSS](/ru/docs/Learn/CSS/First_steps)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах.                                                                                        |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовые компьютерные знания, Основы HTML (раздел <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>), основы  CSS (раздел <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить основные свойства и техники, необходимые для стилизации текста на веб-страницах.</td>
-  </tr>
- </tbody>
-</table>
+## Что участвует в стилизации текста в CSS?
 
-<h2 id="Что_участвует_в_стилизации_текста_в_CSS">Что участвует в стилизации текста в CSS?</h2>
+Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течёт к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведёт себя как ряд встроенных элементов, размещённых на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.
 
-<p>Как вы уже проверили в своей работе с HTML и CSS, текст внутри элемента выкладывается в поле содержимого элемента. Он начинается в левом верхнем углу области содержимого (или в правом верхнем углу, в случае содержимого языка RTL) и течёт к концу строки. Как только он достигает конца, он переходит к следующей строке и продолжает, затем к следующей строке, пока все содержимое не будет помещено в коробку. Текстовое содержимое эффективно ведёт себя как ряд встроенных элементов, размещённых на соседних строках и не создающих разрывы строк до тех пор, пока не будет достигнут конец строки, или если вы не принудите разрыв строки вручную с помощью элемента {{htmlelement("br")}}.</p>
+> **Примечание:** если приведённый выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.
 
-<div class="note">
-<p><strong>Примечание:</strong> если приведённый выше абзац оставляет вас в замешательстве, то не имеет значения — вернитесь и просмотрите нашу статью о модели коробки, чтобы освежить теорию модели коробки, прежде чем продолжить.</p>
-</div>
-
-<p>Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:</p>
+Свойства CSS, используемые для стилизации текста, обычно делятся на две категории, которые мы рассмотрим отдельно в этой статье:
 
-<ul>
- <li><strong>Font styles</strong>: Свойства, влияющие на шрифт, применяемый к тексту, влияющие на то, какой шрифт применяется, насколько он велик, является ли он полужирным, курсивным и т. д.</li>
- <li><strong>Text layout styles</strong>: Свойства, влияющие на интервал и другие особенности компоновки текста, позволяющие манипулировать, например, пространством между строками и буквами, а также тем, как текст выравнивается в поле содержимого.</li>
-</ul>
+- **Font styles**: Свойства, влияющие на шрифт, применяемый к тексту, влияющие на то, какой шрифт применяется, насколько он велик, является ли он полужирным, курсивным и т. д.
+- **Text layout styles**: Свойства, влияющие на интервал и другие особенности компоновки текста, позволяющие манипулировать, например, пространством между строками и буквами, а также тем, как текст выравнивается в поле содержимого.
 
-<div class="note">
-<p><strong>Примечание:</strong> имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернёте их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)</p>
-</div>
+> **Примечание:** имейте в виду, что текст внутри элемента все затронуты как одна единая сущность. Вы не можете выбирать и стилизовать подразделы текста, если вы не обернёте их в соответствующий элемент (например, {{htmlelement ("span")}} или {{htmlelement ("strong")}}), или использовать текстовый псевдоэлемент, такой как ::first-letter (выделяет первую букву текста элемента),:: first-line (выделяет первую строку текста элемента) или ::selection (выделяет текст, выделенный в данный момент курсором.)
 
-<h2 id="Шрифты">Шрифты</h2>
+## Шрифты
 
-<p>Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:</p>
+Давайте сразу перейдём к рассмотрению свойств для стилизации шрифтов. В этом примере мы применим некоторые различные свойства CSS к одному и тому же образцу HTML, который выглядит следующим образом:
 
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;</pre>
+occasion such as this that he did.</p>
+```
 
-<p>You can find the <a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">finished example on GitHub</a> (see also <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">the source code</a>.)</p>
+You can find the [finished example on GitHub](http://mdn.github.io/learning-area/css/styling-text/fundamentals/) (see also [the source code](https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html).)
 
-<h3 id="Color">Color</h3>
+### Color
 
-<p>The {{cssxref("color")}} property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the {{cssxref("text-decoration")}} property).</p>
+The {{cssxref("color")}} property sets the color of the foreground content of the selected elements (which is usually the text, but can also include a couple of other things, such as an underline or overline placed on text using the {{cssxref("text-decoration")}} property).
 
-<p><code>color</code> can accept any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>, for example:</p>
+`color` can accept any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors), for example:
 
-<pre class="brush: css">p {
+```css
+p {
   color: red;
-}</pre>
+}
+```
 
-<p>This will cause the paragraphs to become red, rather than the standard browser default black, like so:</p>
+This will cause the paragraphs to become red, rather than the standard browser default black, like so:
 
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;</pre>
-</div>
+occasion such as this that he did.</p>
+```
 
-<p>{{ EmbedLiveSample('Color', '100%', 230) }}</p>
+{{ EmbedLiveSample('Color', '100%', 230) }}
 
-<h3 id="Font_families">Font families</h3>
+### Font families
 
-<p>To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser <a href="#default_fonts">default font</a>. A simple example looks like so:</p>
+To set a different font on your text, you use the {{cssxref("font-family")}} property — this allows you to specify a font (or list of fonts) for the browser to apply to the selected elements. The browser will only apply a font if it is available on the machine the website is being accessed on; if not, it will just use a browser [default font](#default_fonts). A simple example looks like so:
 
-<pre class="brush: css">p {
+```css
+p {
   font-family: arial;
-}</pre>
-
-<p>This would make all paragraphs on a page adopt the arial font, which is found on any computer.</p>
-
-<h4 id="Web_safe_fonts">Web safe fonts</h4>
-
-<p>Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called <strong>web safe fonts</strong>.</p>
-
-<p>Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).</p>
-
-<p>The list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core fonts for the Web</a></em> initiative in the late 90s and early 2000s):</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Name</th>
-   <th scope="col" style="white-space: nowrap;">Generic type</th>
-   <th scope="col">Notes</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Arial</td>
-   <td>sans-serif</td>
-   <td>It's often considered best practice to also add <em>Helvetica</em> as a preferred alternative to <em>Arial</em> as, although their font faces are almost identical, <em>Helvetica</em> is considered to have a nicer shape, even if <em>Arial</em> is more broadly available.</td>
-  </tr>
-  <tr>
-   <td>Courier New</td>
-   <td>monospace</td>
-   <td>Some OSes have an alternative (possibly older) version of the <em>Courier New</em> font called <em>Courier</em>. It's considered best practice to use both with <em>Courier New</em> as the preferred alternative.</td>
-  </tr>
-  <tr>
-   <td style="white-space: nowrap;">Georgia</td>
-   <td>serif</td>
-   <td></td>
-  </tr>
-  <tr>
-   <td style="white-space: nowrap;">Times New Roman</td>
-   <td>serif</td>
-   <td>Some OSes have an alternative (possibly older) version of the <em>Times New Roman</em> font called <em>Times</em>. It's considered best practice to use both with <em>Times New Roman</em> as the preferred alternative.</td>
-  </tr>
-  <tr>
-   <td>Trebuchet MS</td>
-   <td>sans-serif</td>
-   <td>You should be careful with using this font — it isn't widely available on mobile OSes.</td>
-  </tr>
-  <tr>
-   <td>Verdana</td>
-   <td>sans-serif</td>
-   <td></td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Note</strong>: Among various resources, the <a href="http://www.cssfontstack.com/">cssfontstack.com</a> website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.</p>
-</div>
+}
+```
 
-<div class="note">
-<p><strong>Note</strong>: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: <strong>web fonts</strong>. This is a little bit more complex, and we will be discussing this in a <a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">separate article</a> later on in the module.</p>
-</div>
+This would make all paragraphs on a page adopt the arial font, which is found on any computer.
+
+#### Web safe fonts
+
+Speaking of font availability, there are only a certain number of fonts that are generally available across all systems and can therefore be used without much worry. These are the so-called **web safe fonts**.
+
+Most of the time, as web developers we want to have more specific control over the fonts used to display our text content. The problem is to find a way to know which font is available on the computer used to see our web pages. There is no way to know this in every case, but the web safe fonts are known to be available on nearly all instances of the most used operating systems (Windows, macOS, the most common Linux distributions, Android, and iOS).
+
+The list of actual web safe fonts will change as operating systems evolve, but it's reasonable to consider the following fonts web safe, at least for now (many of them have been popularized thanks to the Microsoft _[Core fonts for the Web](https://en.wikipedia.org/wiki/Core_fonts_for_the_Web)_ initiative in the late 90s and early 2000s):
+
+| Name            | Generic type | Notes                                                                                                                                                                                                                                             |
+| --------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Arial           | sans-serif   | It's often considered best practice to also add _Helvetica_ as a preferred alternative to _Arial_ as, although their font faces are almost identical, _Helvetica_ is considered to have a nicer shape, even if _Arial_ is more broadly available. |
+| Courier New     | monospace    | Some OSes have an alternative (possibly older) version of the _Courier New_ font called _Courier_. It's considered best practice to use both with _Courier New_ as the preferred alternative.                                                     |
+| Georgia         | serif        |                                                                                                                                                                                                                                                   |
+| Times New Roman | serif        | Some OSes have an alternative (possibly older) version of the _Times New Roman_ font called _Times_. It's considered best practice to use both with _Times New Roman_ as the preferred alternative.                                               |
+| Trebuchet MS    | sans-serif   | You should be careful with using this font — it isn't widely available on mobile OSes.                                                                                                                                                            |
+| Verdana         | sans-serif   |                                                                                                                                                                                                                                                   |
+
+> **Примечание:** Among various resources, the [cssfontstack.com](http://www.cssfontstack.com/) website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.
+
+> **Примечание:** There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: **web fonts**. This is a little bit more complex, and we will be discussing this in a [separate article](/ru/docs/Learn/CSS/Styling_text/Web_fonts) later on in the module.
 
-<h4 id="Default_fonts">Default fonts</h4>
-
-<p>CSS defines five generic names for fonts:  <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> and <code>fantasy</code>. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a <em>worst case scenario</em> where the browser will try to do its best to provide at least a font that looks appropriate. <code>serif</code>, <code>sans-serif</code> and <code>monospace</code> are quite predictable and should provide something reasonable. On the other hand, <code>cursive</code> and <code>fantasy</code> are less predictable and we recommend using them very carefully, testing as you go.</p>
-
-<p>The five names are defined as follows:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Term</th>
-   <th scope="col">Definition</th>
-   <th scope="col">Example</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>serif</code></td>
-   <td>Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces)</td>
-   <td>My big red elephant</td>
-  </tr>
-  <tr>
-   <td><code>sans-serif</code></td>
-   <td>Fonts that don't have serifs.</td>
-   <td>My big red elephant</td>
-  </tr>
-  <tr>
-   <td><code>monospace</code></td>
-   <td>Fonts where every character has the same width, typically used in code listings.</td>
-   <td>My big red elephant</td>
-  </tr>
-  <tr>
-   <td><code>cursive</code></td>
-   <td>Fonts that are intended to emulate handwriting, with flowing, connected strokes.</td>
-   <td>My big red elephant</td>
-  </tr>
-  <tr>
-   <td><code>fantasy</code></td>
-   <td>Fonts that are intended to be decorative.</td>
-   <td>My big red elephant</td>
-  </tr>
- </tbody>
-</table>
-
-<h4 id="Font_stacks">Font stacks</h4>
-
-<p>Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font <em>could</em> fail for some reason), you can supply a <strong>font stack</strong> so that the browser has multiple fonts it can choose from. This simply involves a <code>font-family</code> value consisting of multiple font names separated by commas, e.g.</p>
-
-<pre class="brush: css">p {
+#### Default fonts
+
+CSS defines five generic names for fonts: `serif`, `sans-serif`, `monospace`, `cursive` and `fantasy`. Those are very generic and the exact font face used when using those generic names is up to each browser and can vary for each operating system they are running on. It represents a _worst case scenario_ where the browser will try to do its best to provide at least a font that looks appropriate. `serif`, `sans-serif` and `monospace` are quite predictable and should provide something reasonable. On the other hand, `cursive` and `fantasy` are less predictable and we recommend using them very carefully, testing as you go.
+
+The five names are defined as follows:
+
+| Term         | Definition                                                                                                           | Example             |
+| ------------ | -------------------------------------------------------------------------------------------------------------------- | ------------------- |
+| `serif`      | Fonts that have serifs (the flourishes and other small details you see at the ends of the strokes in some typefaces) | My big red elephant |
+| `sans-serif` | Fonts that don't have serifs.                                                                                        | My big red elephant |
+| `monospace`  | Fonts where every character has the same width, typically used in code listings.                                     | My big red elephant |
+| `cursive`    | Fonts that are intended to emulate handwriting, with flowing, connected strokes.                                     | My big red elephant |
+| `fantasy`    | Fonts that are intended to be decorative.                                                                            | My big red elephant |
+
+#### Font stacks
+
+Since you can't guarantee the availability of the fonts you want to use on your webpages (even a web font _could_ fail for some reason), you can supply a **font stack** so that the browser has multiple fonts it can choose from. This simply involves a `font-family` value consisting of multiple font names separated by commas, e.g.
+
+```css
+p {
   font-family: "Trebuchet MS", Verdana, sans-serif;
-}</pre>
+}
+```
 
-<p>In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.</p>
+In such a case, the browser starts at the beginning of the list and looks to see if that font is available on the machine. If it is, it applies that font to the selected elements. If not, it moves on to the next font, and so on.
 
-<p>It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!</p>
+It is a good idea to provide a suitable generic font name at the end of the stack so that if none of the listed fonts are available, the browser can at least provide something approximately suitable. To emphasise this point, paragraphs are given the browser's default serif font if no other option is available — which is usually Times New Roman — this is no good for a sans-serif font!
 
-<div class="note">
-<p><strong>Note</strong>: Font names that have more than one word — like <code>Trebuchet MS</code> — need to be surrounded by quotes, for example <code>"Trebuchet MS"</code>.</p>
-</div>
+> **Примечание:** Font names that have more than one word — like `Trebuchet MS` — need to be surrounded by quotes, for example `"Trebuchet MS"`.
 
-<h4 id="A_font-family_example">A font-family example</h4>
+#### A font-family example
 
-<p>Let's add to our previous example, giving the paragraphs a sans-serif font:</p>
+Let's add to our previous example, giving the paragraphs a sans-serif font:
 
-<pre class="brush: css">p {
+```css
+p {
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}</pre>
+}
+```
 
-<p>This gives us the following result:</p>
+This gives us the following result:
 
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;</pre>
-</div>
+occasion such as this that he did.</p>
+```
 
-<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p>
+{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}
 
-<h3 id="Font_size">Font size</h3>
+### Font size
 
-<p>In our previous module's <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a> article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>), however the most common units you'll use to size text are:</p>
+In our previous module's [CSS values and units](/ru/docs/Learn/CSS/Building_blocks/Values_and_units) article, we reviewed length and size units. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as [percentages](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages)), however the most common units you'll use to size text are:
 
-<ul>
- <li><code>px</code> (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.</li>
- <li><code>em</code>s: 1 <code>em</code> is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use <code>em</code> to size everything, not just text. You can have an entire website sized using <code>em</code>, which makes maintenance easy.</li>
- <li><code>rem</code>s: These work just like <code>em</code>, except that 1 <code>rem</code> is equal to the font size set on the root element of the document (i.e. {{htmlelement("html")}}), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — <code>rem</code> is not supported in Internet Explorer 8 and below.</li>
-</ul>
+- `px` (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.
+- `em`s: 1 `em` is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use `em` to size everything, not just text. You can have an entire website sized using `em`, which makes maintenance easy.
+- `rem`s: These work just like `em`, except that 1 `rem` is equal to the font size set on the root element of the document (i.e. {{htmlelement("html")}}), not the parent element. This makes doing the maths to work out your font sizes much easier, although if you want to support really old browsers, you might struggle — `rem` is not supported in Internet Explorer 8 and below.
 
-<p>The <code>font-size</code> of an element is inherited from that element's parent element. This all starts with the root element of the entire document — {{htmlelement("html")}} — the <code>font-size</code> of which is set to 16<code>px</code> as standard across browsers. Any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16 <code>px</code>. Other elements may have different default sizes, for example an {{htmlelement("h1")}} element has a size of 2 <code>em</code> set by default, so it will have a final size of 32 <code>px</code>.</p>
+The `font-size` of an element is inherited from that element's parent element. This all starts with the root element of the entire document — {{htmlelement("html")}} — the `font-size` of which is set to 16`px` as standard across browsers. Any paragraph (or another element that doesn't have a different size set by the browser) inside the root element will have a final size of 16 `px`. Other elements may have different default sizes, for example an {{htmlelement("h1")}} element has a size of 2 `em` set by default, so it will have a final size of 32 `px`.
 
-<p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its <code>font-size</code> to 1.5 <code>em</code> (which would compute to 24 <code>px</code> final size), and then wanted the paragraphs inside the <code>&lt;article&gt;</code> elements to have a computed font size of 20 <code>px</code>, what <code>em</code> value would you use?</p>
+Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its `font-size` to 1.5 `em` (which would compute to 24 `px` final size), and then wanted the paragraphs inside the `<article>` elements to have a computed font size of 20 `px`, what `em` value would you use?
 
-<pre class="brush: html">&lt;!-- document base font-size is 16px --&gt;
-&lt;article&gt; &lt;!-- If my font-size is 1.5em --&gt;
-  &lt;p&gt;My paragraph&lt;/p&gt; &lt;!-- How do I compute to 20px font-size? --&gt;
-&lt;/article&gt;</pre>
+```html
+<!-- document base font-size is 16px -->
+<article> <!-- If my font-size is 1.5em -->
+  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
+</article>
+```
 
-<p>You would need to set its <code>em</code> value to 20/24, or 0.83333333 <code>em</code>. The maths can be complicated, so you need to be careful about how you style things. It is best to use <code>rem</code> where you can, to keep things simple, and avoid setting the <code>font-size</code> of container elements where possible.</p>
+You would need to set its `em` value to 20/24, or 0.83333333 `em`. The maths can be complicated, so you need to be careful about how you style things. It is best to use `rem` where you can, to keep things simple, and avoid setting the `font-size` of container elements where possible.
 
-<h4 id="A_simple_sizing_example">A simple sizing example</h4>
+#### A simple sizing example
 
-<p>When sizing your text, it is usually a good idea to set the base <code>font-size</code> of the document to 10 <code>px</code>, so that then the maths is a lot easier to work out — required <code>(r)em</code> values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your <code>font-size</code> rulesets in a designated area in your stylesheet, so they are easy to find.</p>
+When sizing your text, it is usually a good idea to set the base `font-size` of the document to 10 `px`, so that then the maths is a lot easier to work out — required `(r)em` values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your `font-size` rulesets in a designated area in your stylesheet, so they are easy to find.
 
-<p>Our new result is like so:</p>
+Our new result is like so:
 
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
-</div>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css
+html {
   font-size: 10px;
 }
 
@@ -291,67 +216,63 @@ p {
   font-size: 1.5rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}</pre>
-
-<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}</p>
-
-<h3 id="Font_style_font_weight_text_transform_and_text_decoration">Font style, font weight, text transform, and text decoration</h3>
-
-<p>CSS provides four common properties to alter the visual weight/emphasis of text:</p>
-
-<ul>
- <li>{{cssxref("font-style")}}: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
-  <ul>
-   <li><code>normal</code>: Sets the text to the normal font (turns existing italics off.)</li>
-   <li><code>italic</code>: Sets the text to use the <em>italic version of the font</em> if available; if not available, it will simulate italics with oblique instead.</li>
-   <li><code>oblique</code>: Sets the text to use a simulated version of an italic font, created by slanting the normal version.</li>
-  </ul>
- </li>
- <li>{{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), but realistically you'll rarely use any of them except for <code>normal</code> and <code>bold</code>:
-  <ul>
-   <li><code>normal</code>, <code>bold</code>: Normal and <strong style="font-weight: bold;">bold</strong> font weight</li>
-   <li><code>lighter</code>, <code>bolder</code>: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.</li>
-   <li><code>100</code>–<code>900</code>: Numeric boldness values that provide finer grained control than the above keywords, if needed. </li>
-  </ul>
- </li>
- <li>{{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include:
-  <ul>
-   <li><code>none</code>: Prevents any transformation.</li>
-   <li><code>uppercase</code>: Transforms all text to capitals.</li>
-   <li><code>lowercase</code>: Transforms all text to lower case.</li>
-   <li><code>capitalize</code>: Transforms all words to have the first letter capitalized.</li>
-   <li><code>full-width</code>: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).</li>
-  </ul>
- </li>
- <li>{{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
-  <ul>
-   <li><code>none</code>: Unsets any text decorations already present.</li>
-   <li><code>underline</code>: <u>Underlines the text</u>.</li>
-   <li><code>overline</code>: Gives the text an overline.</li>
-   <li><code>line-through</code>: Puts a <s style="text-decoration: line-through;">strikethrough over the text</s>.</li>
-  </ul>
-  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example <code>text-decoration: underline overline</code>. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example <code>text-decoration: line-through red wavy</code>.</li>
-</ul>
-
-<p>Let's look at adding a couple of these properties to our example:</p>
-
-<p>Our new result is like so:</p>
-
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
-
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
-
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+}
+```
+
+{{ EmbedLiveSample('A_simple_sizing_example', '100%', 260) }}
+
+### Font style, font weight, text transform, and text decoration
+
+CSS provides four common properties to alter the visual weight/emphasis of text:
+
+- {{cssxref("font-style")}}: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason):
+
+  - `normal`: Sets the text to the normal font (turns existing italics off.)
+  - `italic`: Sets the text to use the _italic version of the font_ if available; if not available, it will simulate italics with oblique instead.
+  - `oblique`: Sets the text to use a simulated version of an italic font, created by slanting the normal version.
+
+- {{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), but realistically you'll rarely use any of them except for `normal` and `bold`:
+
+  - `normal`, `bold`: Normal and **bold** font weight
+  - `lighter`, `bolder`: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.
+  - `100`–`900`: Numeric boldness values that provide finer grained control than the above keywords, if needed.
+
+- {{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include:
+
+  - `none`: Prevents any transformation.
+  - `uppercase`: Transforms all text to capitals.
+  - `lowercase`: Transforms all text to lower case.
+  - `capitalize`: Transforms all words to have the first letter capitalized.
+  - `full-width`: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. Latin characters along with Asian language glyphs (like Chinese, Japanese, Korean).
+
+- {{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are:
+
+  - `none`: Unsets any text decorations already present.
+  - `underline`: **Underlines the text**.
+  - `overline`: Gives the text an overline.
+  - `line-through`: Puts a ~~strikethrough over the text~~.
+
+  You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example `text-decoration: underline overline`. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example `text-decoration: line-through red wavy`.
+
+Let's look at adding a couple of these properties to our example:
+
+Our new result is like so:
+
+```html hidden
+<h1>Tommy the cat</h1>
+
+<p>Well I remember it as though it were a meal ago...</p>
+
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
-</div>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css
+html {
   font-size: 10px;
 }
 
@@ -368,50 +289,52 @@ p {
   font-size: 1.5rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}</pre>
-
-<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}</p>
+}
+```
 
-<h3 id="Text_drop_shadows">Text drop shadows</h3>
+{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 260) }}
 
-<p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p>
+### Text drop shadows
 
-<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre>
+You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:
 
-<p>The four properties are as follows:</p>
+```css
+text-shadow: 4px 4px 5px red;
+```
 
-<ol>
- <li>The horizontal offset of the shadow from the original text — this can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but you'll most commonly use <code>px</code>; positive values move the shadow right, and negative values left. This value has to be included.</li>
- <li>The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.</li>
- <li>The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li>
- <li>The base color of the shadow, which can take any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. If not included, it defaults to <code>black</code>.</li>
-</ol>
+The four properties are as follows:
 
-<h4 id="Multiple_shadows">Multiple shadows</h4>
+1.  The horizontal offset of the shadow from the original text — this can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but you'll most commonly use `px`; positive values move the shadow right, and negative values left. This value has to be included.
+2.  The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
+3.  The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size).
+4.  The base color of the shadow, which can take any [CSS color unit](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors). If not included, it defaults to `black`.
 
-<p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p>
+#### Multiple shadows
 
-<pre class="brush: css">text-shadow: 1px 1px 1px red,
-             2px 2px 1px red;</pre>
+You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:
 
-<p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p>
+```css
+text-shadow: 1px 1px 1px red,
+             2px 2px 1px red;
+```
 
-<div class="hidden">
-<h5 id="Hidden_example1">Hidden example1</h5>
+If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:
 
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-size: 10px;
 }
 
@@ -430,46 +353,43 @@ p {
   font-size: 1.5rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}</p>
+{{ EmbedLiveSample('Hidden_example1', '100%', 260) }}
 
-<div class="note">
-<p><strong>Note</strong>: You can see more interesting examples of <code>text-shadow</code> usage in the Sitepoint article <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p>
-</div>
+> **Примечание:** You can see more interesting examples of `text-shadow` usage in the Sitepoint article [Moonlighting with CSS text-shadow](http://www.sitepoint.com/moonlighting-css-text-shadow/).
 
-<h2 id="Text_layout">Text layout</h2>
+## Text layout
 
-<p>With basic font properties out the way, let's now have a look at properties we can use to affect text layout.</p>
+With basic font properties out the way, let's now have a look at properties we can use to affect text layout.
 
-<h3 id="Text_alignment">Text alignment</h3>
+### Text alignment
 
-<p>The {{cssxref("text-align")}} property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:</p>
+The {{cssxref("text-align")}} property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:
 
-<ul>
- <li><code>left</code>: Left-justifies the text.</li>
- <li><code>right</code>: Right-justifies the text.</li>
- <li><code>center</code>: Centers the text.</li>
- <li><code>justify</code>: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as {{cssxref("hyphens")}}, to break some of the longer words across lines.</li>
-</ul>
+- `left`: Left-justifies the text.
+- `right`: Right-justifies the text.
+- `center`: Centers the text.
+- `justify`: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as {{cssxref("hyphens")}}, to break some of the longer words across lines.
 
-<p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p>
+If we applied `text-align: center;` to the {{htmlelement("h1")}} in our example, we'd end up with this:
 
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-size: 10px;
 }
 
@@ -489,35 +409,36 @@ p {
   font-size: 1.5rem;
   color: red;
   font-family: Helvetica, Arial, sans-serif;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Text_alignment', '100%', 260) }}</p>
+}
+```
 
-<h3 id="Line_height">Line height</h3>
+{{ EmbedLiveSample('Text_alignment', '100%', 260) }}
 
-<p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:</p>
+### Line height
 
-<pre class="brush: css">line-height: 1.6;</pre>
+The {{cssxref("line-height")}} property sets the height of each line of text — this can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size), but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the `line-height`. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5 – 2 (double spaced.) So to set our lines of text to 1.6 times the height of the font, you'd use this:
 
-<p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p>
+```css
+line-height: 1.6;
+```
 
-<div class="hidden">
-<h5 id="Hidden_example2">Hidden example2</h5>
+Applying this to the {{htmlelement("p")}} elements in our example would give us this result:
 
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-size: 10px;
 }
 
@@ -538,38 +459,41 @@ p {
   color: red;
   font-family: Helvetica, Arial, sans-serif;
   line-height: 1.6;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}</p>
+{{ EmbedLiveSample('Hidden_example2', '100%', 300) }}
 
-<h3 id="Letter_and_word_spacing">Letter and word spacing</h3>
+### Letter and word spacing
 
-<p>The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p>
+The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most [length and size units](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size).
 
-<p>So as an example, we could apply some word- and letter-spacing to the first line of each  {{htmlelement("p")}} element in our example:</p>
+So as an example, we could apply some word- and letter-spacing to the first line of each {{htmlelement("p")}} element in our example:
 
-<pre class="brush: css">p::first-line {
+```css
+p::first-line {
   letter-spacing: 4px;
   word-spacing: 4px;
-}</pre>
+}
+```
 
-<p>Let's add some to our example, like so:</p>
+Let's add some to our example, like so:
 
-<div class="hidden">
-<pre class="brush: html">&lt;h1&gt;Tommy the cat&lt;/h1&gt;
+```html hidden
+<h1>Tommy the cat</h1>
 
-&lt;p&gt;Well I remember it as though it were a meal ago...&lt;/p&gt;
+<p>Well I remember it as though it were a meal ago...</p>
 
-&lt;p&gt;Said Tommy the Cat as he reeled back to clear whatever foreign matter
+<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
  may have nestled its way into his mighty throat. Many a fat alley rat
 had met its demise while staring point blank down the cavernous barrel of
  this awesome prowling machine. Truly a wonder of nature this urban
 predator — Tommy the cat had many a story to tell. But it was a rare
-occasion such as this that he did.&lt;/p&gt;
-</pre>
+occasion such as this that he did.</p>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-size: 10px;
 }
 
@@ -597,92 +521,89 @@ p {
   font-family: Helvetica, Arial, sans-serif;
   line-height: 1.6;
   letter-spacing: 1px;
-}</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}</p>
+}
+```
 
-<h3 id="Other_properties_worth_looking_at">Other properties worth looking at</h3>
+{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 330) }}
 
-<p>The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:</p>
+### Other properties worth looking at
 
-<p>Font styles:</p>
+The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:
 
-<ul>
- <li>{{cssxref("font-variant")}}: Switch between small caps and normal font alternatives.</li>
- <li>{{cssxref("font-kerning")}}: Switch font kerning options on and off.</li>
- <li>{{cssxref("font-feature-settings")}}: Switch various <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> font features on and off.</li>
- <li>{{cssxref("font-variant-alternates")}}: Control the use of alternate glyphs for a given font-face.</li>
- <li>{{cssxref("font-variant-caps")}}: Control the use of alternate capital glyphs.</li>
- <li>{{cssxref("font-variant-east-asian")}}: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.</li>
- <li>{{cssxref("font-variant-ligatures")}}: Control which ligatures and contextual forms are used in text.</li>
- <li>{{cssxref("font-variant-numeric")}}: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.</li>
- <li>{{cssxref("font-variant-position")}}: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.</li>
- <li>{{cssxref("font-size-adjust")}}: Adjust the visual size of the font independently of its actual font size.</li>
- <li>{{cssxref("font-stretch")}}: Switch between possible alternative stretched versions of a given font.</li>
- <li>{{cssxref("text-underline-position")}}: Specify the position of underlines set using the <code>text-decoration-line</code> property <code>underline</code> value.</li>
- <li>{{cssxref("text-rendering")}}: Try to perform some text rendering optimization.</li>
-</ul>
+Font styles:
 
-<p>Text layout styles:</p>
+- {{cssxref("font-variant")}}: Switch between small caps and normal font alternatives.
+- {{cssxref("font-kerning")}}: Switch font kerning options on and off.
+- {{cssxref("font-feature-settings")}}: Switch various [OpenType](https://en.wikipedia.org/wiki/OpenType) font features on and off.
+- {{cssxref("font-variant-alternates")}}: Control the use of alternate glyphs for a given font-face.
+- {{cssxref("font-variant-caps")}}: Control the use of alternate capital glyphs.
+- {{cssxref("font-variant-east-asian")}}: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.
+- {{cssxref("font-variant-ligatures")}}: Control which ligatures and contextual forms are used in text.
+- {{cssxref("font-variant-numeric")}}: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.
+- {{cssxref("font-variant-position")}}: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.
+- {{cssxref("font-size-adjust")}}: Adjust the visual size of the font independently of its actual font size.
+- {{cssxref("font-stretch")}}: Switch between possible alternative stretched versions of a given font.
+- {{cssxref("text-underline-position")}}: Specify the position of underlines set using the `text-decoration-line` property `underline` value.
+- {{cssxref("text-rendering")}}: Try to perform some text rendering optimization.
 
-<ul>
- <li>{{cssxref("text-indent")}}: Specify how much horizontal space should be left before the beginning of the first line of the text content.</li>
- <li>{{cssxref("text-overflow")}}: Define how overflowed content that is not displayed is signaled to users.</li>
- <li>{{cssxref("white-space")}}: Define how whitespace and associated line breaks inside the element are handled.</li>
- <li>{{cssxref("word-break")}}: Specify whether to break lines within words.</li>
- <li>{{cssxref("direction")}}: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)</li>
- <li>{{cssxref("hyphens")}}: Switch on and off hyphenation for supported languages.</li>
- <li>{{cssxref("line-break")}}: Relax or strengthen line breaking for Asian languages.</li>
- <li>{{cssxref("text-align-last")}}: Define how the last line of a block or a line, right before a forced line break, is aligned.</li>
- <li>{{cssxref("text-orientation")}}: Define the orientation of the text in a line.</li>
- <li>{{cssxref("overflow-wrap")}}: Specify whether or not the browser may break lines within words in order to prevent overflow.</li>
- <li>{{cssxref("writing-mode")}}: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.</li>
-</ul>
+Text layout styles:
 
-<h2 id="Font_shorthand">Font shorthand</h2>
+- {{cssxref("text-indent")}}: Specify how much horizontal space should be left before the beginning of the first line of the text content.
+- {{cssxref("text-overflow")}}: Define how overflowed content that is not displayed is signaled to users.
+- {{cssxref("white-space")}}: Define how whitespace and associated line breaks inside the element are handled.
+- {{cssxref("word-break")}}: Specify whether to break lines within words.
+- {{cssxref("direction")}}: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)
+- {{cssxref("hyphens")}}: Switch on and off hyphenation for supported languages.
+- {{cssxref("line-break")}}: Relax or strengthen line breaking for Asian languages.
+- {{cssxref("text-align-last")}}: Define how the last line of a block or a line, right before a forced line break, is aligned.
+- {{cssxref("text-orientation")}}: Define the orientation of the text in a line.
+- {{cssxref("overflow-wrap")}}: Specify whether or not the browser may break lines within words in order to prevent overflow.
+- {{cssxref("writing-mode")}}: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.
 
-<p>Many font properties can also be set through the shorthand property {{cssxref("font")}}. These are written in the following order:  {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p>
+## Font shorthand
 
-<p>Among all those properties, only <code>font-size</code> and <code>font-family</code> are required when using the <code>font</code> shorthand property.</p>
+Many font properties can also be set through the shorthand property {{cssxref("font")}}. These are written in the following order: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.
 
-<p>A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssxref("line-height")}} properties.</p>
+Among all those properties, only `font-size` and `font-family` are required when using the `font` shorthand property.
 
-<p>A full example would look like this:</p>
+A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssxref("line-height")}} properties.
 
-<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre>
+A full example would look like this:
 
-<h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2>
+```css
+font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;
+```
 
-<p>In this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.</p>
+## Active learning: Playing with styling text
 
-<p>If you make a mistake, you can always reset it using the <em>Reset</em> button.</p>
+In this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+If you make a mistake, you can always reset it using the _Reset_ button.
 
-<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
-  &lt;h2&gt;HTML Input&lt;/h2&gt;
-  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
-&lt;p&gt;Some sample text for your delight&lt;/p&gt;
-  &lt;/textarea&gt;
+```html hidden
+<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+  <h2>HTML Input</h2>
+  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
+<p>Some sample text for your delight</p>
+  </textarea>
 
-  &lt;h2&gt;CSS Input&lt;/h2&gt;
-  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;
+  <h2>CSS Input</h2>
+  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">
 p {
 
 }
-&lt;/textarea&gt;
+</textarea>
 
-  &lt;h2&gt;Output&lt;/h2&gt;
-  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
-  &lt;div class="controls"&gt;
-    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  <h2>Output</h2>
+  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
+  <div class="controls">
+    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+  </div>
+</div>
+```
 
-<pre class="brush: js">const htmlInput = document.querySelector(".html-input");
+```js hidden
+const htmlInput = document.querySelector(".html-input");
 const cssInput = document.querySelector(".css-input");
 const reset = document.getElementById("reset");
 let htmlCode = htmlInput.value;
@@ -707,29 +628,26 @@ reset.addEventListener("click", function() {
 htmlInput.addEventListener("input", drawOutput);
 cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 800) }}
 
-<h2 id="Test_your_skills!">Test your skills!</h2>
+## Test your skills!
 
-<p>You've reached the end of this article, and already did some skill testing in our Active Learning section, but can you remember the most important information going forward? You can find an assessment to verify that you've retained this information at the end of the module — see <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a>.</p>
+You've reached the end of this article, and already did some skill testing in our Active Learning section, but can you remember the most important information going forward? You can find an assessment to verify that you've retained this information at the end of the module — see [Typesetting a community school homepage](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage).
 
-<p>This assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it.</p>
+This assessment tests all the knowledge discussed in this module, so you might want to read the other articles before moving on to it.
 
-<h2 id="Summary">Summary</h2>
+## Summary
 
-<p>We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.</p>
+We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.
 
-<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p>
+{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
-</ul>
+- [Fundamental text and font styling](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+- [Styling lists](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Styling links](/ru/docs/Learn/CSS/Styling_text/Styling_links)
+- [Web fonts](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Typesetting a community school homepage](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/css/styling_text/index.md b/files/ru/learn/css/styling_text/index.md
index 5f18e2efd9c3c3..b49171fe649de5 100644
--- a/files/ru/learn/css/styling_text/index.md
+++ b/files/ru/learn/css/styling_text/index.md
@@ -22,39 +22,33 @@ tags:
   - шрифт
 translation_of: Learn/CSS/Styling_text
 ---
-<p id="Перед_стартом"> {{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<p>Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространённых вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок</p>
+Разобравшись с основами синтаксиса CSS, следующей темой над которой вам следует сосредоточиться, это стилизация текста — одна из наиболее распространённых вещей, которые вы будете делать с помощью CSS. В этой теме мы рассмотрим основные принципы оформления, включая выбор и определение шрифтов, использование курсива и жирного шрифта, отступов, теней и других средств придания уникальности вашему тексту. В завершение темы мы рассмотрим использование на вашей странице пользовательских шрифтов, а также оформление списков и ссылок
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Перед началом работы с этим модулем, вы должны уже иметь базовые знания HTML, как это описано во <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>, и с основами CSS, как описано в <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>.</p>
+Перед началом работы с этим модулем, вы должны уже иметь базовые знания HTML, как это описано во [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML), и с основами CSS, как описано в [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS).
 
-<div class="note">
-<p><strong>Замечание</strong>: В случае, если вы работаете на компьютере, планшете или ином устройстве, на котором у вас нет возможности создавать свои собственные файлы,  вы можете попробовать выполнить примеры кода (по крайней мере, большинство из них) в специальных онлайн-программах, таких как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** **Замечание**: В случае, если вы работаете на компьютере, планшете или ином устройстве, на котором у вас нет возможности создавать свои собственные файлы, вы можете попробовать выполнить примеры кода (по крайней мере, большинство из них) в специальных онлайн-программах, таких как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководство">Руководство</h2>
+## Руководство
 
-<p>Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.</p>
+Данный модуль состоит из следующих далее статей, которые дадут вам всё необходимое для оформления текстового HTML-контента.
 
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизации текста и шрифта</a></dt>
- <dd>В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></dt>
- <dd>Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS-свойства о которых нужно знать, и<br>
- некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></dt>
- <dd>При стилизации ссылок важно понимать, как эффективно использовать псевдоклассы для стилизации состояний ссылок, и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как навигационные меню и вкладки. Мы рассмотрим все эти темы в этой статье.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></dt>
- <dd>Здесь мы подробно рассмотрим веб-шрифты — они позволяют загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.</dd>
-</dl>
+- [Основы стилизации текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+  - : В этой статье мы детально изучим стилизацию текста и шрифтов, включая параметры weight, family, style, font shorthand, text alignment и прочие эффекты, а также line и letter spacing.
+- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+  - : Списки, по большей части, ведут себе так же, как и любой другой текст, но они имеют некоторые особые CSS-свойства о которых нужно знать, и
+    некоторые методы которые стоит принять во внимание. Эта статья все разъясняет.
+- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
+  - : При стилизации ссылок важно понимать, как эффективно использовать псевдоклассы для стилизации состояний ссылок, и как стилизовать ссылки для использования в общих разнообразных функциях интерфейса, таких как навигационные меню и вкладки. Мы рассмотрим все эти темы в этой статье.
+- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
+  - : Здесь мы подробно рассмотрим веб-шрифты — они позволяют загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.
 
-<h2 id="Проверка">Проверка</h2>
+## Проверка
 
-<p>Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.</p>
+Следующие задания проверят ваше понимание методов стилизации текста, описанных в вышеприведённых руководствах.
 
-<dl>
- <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы муниципальной школы</a></dt>
- <dd>В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.</dd>
-</dl>
+- [Вёрстка домашней страницы муниципальной школы](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage)
+  - : В этом задании мы проверим ваше понимание стилизации текста, заставив вас оформить текст для домашней страницы общеобразовательной школы.
diff --git a/files/ru/learn/css/styling_text/styling_links/index.md b/files/ru/learn/css/styling_text/styling_links/index.md
index 5924f85cddaeb5..00801a2c996c9a 100644
--- a/files/ru/learn/css/styling_text/styling_links/index.md
+++ b/files/ru/learn/css/styling_text/styling_links/index.md
@@ -3,92 +3,89 @@ title: Стилизация ссылок
 slug: Learn/CSS/Styling_text/Styling_links
 translation_of: Learn/CSS/Styling_text/Styling_links
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+При стилизации ссылок, важно понимать как использовать псевдоклассы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.
 
-<p class="summary">При стилизации ссылок, важно понимать как использовать псевдоклассы, чтобы стилизировать состояния ссылок эффективно, и как стилизировать ссылки для использования в общих разнообразных функциях интерфейса: таких как например навигационное меню и вкладки. Мы рассмотрим все эти темы в этой статье.</p>
+| Для изучения вам потребуется: | Основы компьютерной грамотности, базовые знания HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)), [базовые знания о текстах и шрифтах CSS](/ru/docs/Learn/CSS/Styling_text/Fundamentals). |
+| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Вы узнаете:                   | Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.                                                                                                                                         |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Для изучения вам потребуется:</th>
-   <td>Основы компьютерной грамотности, базовые знания HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">базовые знания о текстах и шрифтах CSS</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Вы узнаете:</th>
-   <td>Изучите как стилизуются ссылки и как использовать ссылки эффективно в общих задачах UI (пользовательских интерфейсах), например, в меню навигации.</td>
-  </tr>
- </tbody>
-</table>
+## Давайте посмотрим на некоторые ссылки
 
-<h2 id="Давайте_посмотрим_на_некоторые_ссылки">Давайте посмотрим на некоторые ссылки</h2>
+Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в [Создании гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA). В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.
 
-<p>Мы рассматривали как реализуются ссылки в вашем HTML в соответствии с лучшими практиками в <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создании гиперссылок</a>. В этой статье мы будем опираться на эти знания, показывая вам лучшие практики по оформлению ссылок.</p>
+### Состояния ссылок
 
-<h3 id="Состояния_ссылок">Состояния ссылок</h3>
+Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные [псевдоклассы](/ru/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes):
 
-<p>Первое, что нужно понять, это концепция состояний ссылок — разные состояния в которых могут существовать ссылки, которые могут быть стилизованы используя различные <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#pseudo-classes">псевдоклассы</a>:</p>
+- **Link (не посещённая)**: Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.
+- **Visited**: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.
+- **Hover**: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}
+- **Focus**: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу&#x20;
 
-<ul>
- <li><strong>Link (не посещённая)</strong>: Состояние по умолчанию, в котором находится ссылка, когда она не находится в каком-либо другом состоянии. Она может быть специфически стилизована используя псевдокласс {{cssxref(":link")}}.</li>
- <li><strong>Visited</strong>: Ссылка, когда она уже была посещена (существует в истории браузера), стилизуется используя псевдокласс {{cssxref(":visited")}}.</li>
- <li><strong>Hover</strong>: Ссылка, когда на неё наведён курсор мыши, стилизуется используя псевдокласс {{cssxref(":hover")}}</li>
- <li><strong>Focus</strong>: Ссылка, когда она была сфокусирована (например когда пользователь переместился на неё используя клавишу <kbd>Tab</kbd> или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.</li>
- <li><strong>Active</strong>: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}</li>
-</ul>
+  <kbd>Tab</kbd>
+
+  &#x20;или наподобие или программно сфокусирована используя {{domxref("HTMLElement.focus()")}}) — стилизуется используя псевдокласс {{cssxref(":focus")}}.
 
-<h3 id="Default_styles">Стили по умолчанию</h3>
+- **Active**: Ссылка, когда она активируется (например при клике по ней), стилизуется используя псевдокласс {{cssxref(":active")}}
 
-<p>Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).</p>
+### Стили по умолчанию
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://mozilla.org"&gt;A link to the Mozilla homepage&lt;/a&gt;&lt;/p&gt;
-</pre>
+Следующий пример показывает, как будет вести себя ссылка по умолчанию (CSS просто увеличивает и центрирует текст чтоб больше выделить его).
 
-<pre class="brush: css">p {
+```html
+<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
+```
+
+```css
+p {
   font-size: 2rem;
   text-align: center;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Default_styles', '100%', 120) }}</p>
+{{ EmbedLiveSample('Default_styles', '100%', 120) }}
 
-<p>Вы заметите несколько вещей при изучении стилей по умолчанию:</p>
+Вы заметите несколько вещей при изучении стилей по умолчанию:
 
-<ul>
- <li>Ссылки подчёркнуты.</li>
- <li>Не посещённые ссылки синие.</li>
- <li>Посещённые ссылки фиолетовые</li>
- <li>Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.</li>
- <li>Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию <em>Full Keyboard Access: All controls </em>нажав <kbd>Ctrl</kbd> + <kbd>F7</kbd>, прежде чем это будет работать).</li>
- <li>Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).</li>
-</ul>
+- Ссылки подчёркнуты.
+- Не посещённые ссылки синие.
+- Посещённые ссылки фиолетовые
+- Наведение курсора мыши на ссылку меняют указатель мыши на иконку маленькой руки.
+- Сфокусированные ссылки имеют контур вокруг себя — вы можете сфокусироваться на ссылках на этой странице с помощью клавиатуры, нажав клавишу табуляции (на Mac, вам может понадобиться включить опцию _Full Keyboard Access: All controls_ нажав&#x20;
 
-<p>Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы не должны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:</p>
+  <kbd>Ctrl</kbd>
 
-<ul>
- <li>Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.</li>
- <li>Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.</li>
-</ul>
+  &#x20;\+&#x20;
 
-<p>Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:</p>
+  <kbd>F7</kbd>
 
-<ul>
- <li>{{cssxref("color")}} для цвета текста.</li>
- <li>{{cssxref("cursor")}} для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.</li>
- <li>{{cssxref("outline")}} для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.</li>
-</ul>
+  , прежде чем это будет работать).
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся.  Просто постарайтесь не сходить с ума слишком сильно!</p>
-</div>
+- Активные ссылки красные (попробуйте удерживать кнопку мыши на ссылке, когда вы кликните по ней).
+
+Довольно интересно, что эти стили по умолчанию приблизительно такие же какими они были в первые дни браузеров в середине 1990-ых. Это потому, что пользователи знают и привыкли ожидать такого поведения — если бы ссылки были стилизованы по-разному, это бы путало много людей. Это не значит, что вы не должны стилизовать ссылки совсем, просто вы не должны уходить слишком далеко от ожидаемого поведения. По крайней мере вы должны:
 
-<h3 id="Styling_some_links">Стилизация некоторых ссылок</h3>
+- Использовать нижнее подчёркивание для ссылок, но не для других вещей. Если вы не хотите подчёркивать ссылки, то хотя бы выделите их каким-либо другим путём.
+- Сделать так чтобы они как-нибудь реагировали на наведение/фокусировку на них и немного отличались после активации.
 
-<p>Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.</p>
+Стили по умолчанию могут быть выключены/изменены, используя следующие свойства CSS:
 
-<p>Чтобы начать, мы выпишем наши пустые наборы правил:</p>
+- {{cssxref("color")}} для цвета текста.
+- {{cssxref("cursor")}} для стиля курсора мыши — вы не должны отключать эту опцию только если у вас нет на это веской причины.
+- {{cssxref("outline")}} для контура текста (контур схож с границей, единственное отличие — это то, что границы занимают место в блоке, а контур — нет; он просто располагается поверх фона). Контур является полезным вспомогательным средством, так что подумайте хорошо, прежде чем отключать его; по крайней мере вы должны удвоить стили, заданные для состояния hover, а также состояния фокусировки.
 
-<pre class="brush: css">a {
+> **Примечание:** **Обратите внимание**: вы не ограничены только перечисленными выше свойствами чтобы стилизовать ссылки — вы можете использовать любые свойства, которые вам нравятся. Просто постарайтесь не сходить с ума слишком сильно!
+
+### Стилизация некоторых ссылок
+
+Мы уже рассмотрели состояния по умолчанию в некоторых деталях, давайте взглянем на типичный набор стилей ссылок.
+
+Чтобы начать, мы выпишем наши пустые наборы правил:
+
+```css
+a {
 
 }
 
@@ -111,13 +108,15 @@ a:hover {
 
 a:active {
 
-}</pre>
+}
+```
 
-<p>Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p>
+Этот порядок важен так как стили ссылок опираются друг на друга, например стили в первом правиле будут применяться ко всем последующим правилам и когда ссылка будет активирована, она также будет находиться под "наведением" (hover). Если вы введёте их в неправильном порядке, стили не будут работать правильно. Чтобы запомнить этот порядок вы можете попробовать использовать мнемонику типа **L**o**V**e **F**ears **HA**te.
 
-<p>А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:</p>
+А теперь давайте добавим ещё немного информации чтобы правильно оформить этот стиль:
 
-<pre class="brush: css">body {
+```css
+body {
   width: 300px;
   margin: 0 auto;
   font-size: 1.2rem;
@@ -155,50 +154,48 @@ a:hover {
 a:active {
   background: #265301;
   color: #CDFEAA;
-}</pre>
+}
+```
 
-<p>Также мы дадим некий пример HTML к которому применяется CSS:</p>
+Также мы дадим некий пример HTML к которому применяется CSS:
 
-<pre class="brush: html">&lt;p&gt;There are several browsers available, such as &lt;a href="https://www.mozilla.org/en-US/firefox/"&gt;Mozilla
-Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Google Chrome&lt;/a&gt;, and
-&lt;a href="https://www.microsoft.com/en-us/windows/microsoft-edge"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;</pre>
+```html
+<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
+Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>
+```
 
-<p>Объединение этих двух даёт нам такой результат:</p>
+Объединение этих двух даёт нам такой результат:
 
-<p>{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}</p>
+{{ EmbedLiveSample('Styling_some_links', '100%', 150) }}
 
-<p>Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:</p>
+Итак, что мы сделали тут? Это определённо выглядит иначе чем стилизация по умолчанию, но все ещё даёт достаточно знакомый опыт для пользователей, чтобы знать, что происходит:
 
-<ul>
- <li>Первые два правила не так интересны в этом обсуждении.</li>
- <li>Третье правило использует селектор <code>a</code> чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.</li>
- <li>Далее, мы используем селекторы <code>a:link</code> и <code>a:visited</code> чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.</li>
- <li>Следующие два правила используют <code>a:focus</code> и <code>a:hover</code> настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
-  <ul>
-   <li>Нижнее подчёркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как "р" и "у").</li>
-   <li>Значение {{cssxref("border-bottom")}} установлено на <code>1px solid</code>, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.</li>
-  </ul>
- </li>
- <li>Наконец, <code>a:active</code> используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!</li>
-</ul>
+- Первые два правила не так интересны в этом обсуждении.
+- Третье правило использует селектор `a` чтобы избавиться от подчёркивания текста и контура фокуса по умолчанию (которые всё равно варьируют в зависимости от браузера), а также добавляет малое количество padding к каждой ссылке — все это станет ясно позже.
+- Далее, мы используем селекторы `a:link` и `a:visited` чтобы настроить пару цветовых вариаций не посещённых и посещённых ссылок, так чтоб они отличались.
+- Следующие два правила используют `a:focus` и `a:hover` настраивают сфокусированные и наведённые (hovered) ссылки таким образом чтобы они имели разные фоновые цвета, плюс нижнее подчёркивание чтобы ссылка выделялась ещё больше. Два пункта на которые надо обратить внимание:
 
-<h3 id="Активное_изучение_Стилизуйте_ссылки_самостоятельно">Активное изучение: Стилизуйте ссылки самостоятельно</h3>
+  - Нижнее подчёркивание создано используя {{cssxref("border-bottom")}}, а не {{cssxref("text-decoration")}} — некоторые люди предпочитают это потому что первый имеет лучшие варианты стилизации, чем второй, и отрисован немного ниже, так что не срезает нижние элементы слов будучи подчёркнутыми (например хвосты у букв как "р" и "у").
+  - Значение {{cssxref("border-bottom")}} установлено на `1px solid`, без определённого цвета. Это позволяет границам принимать тот же цвет что и элементы текста, что полезно в случае как этом, где текст имеет разные цвета в каждом случае.
 
-<p>В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.</p>
+- Наконец, `a:active` используется чтобы дать ссылкам инвертированную цветовую схему в то время когда они активированы, чтобы было ясно что происходит что то важное!
 
-<p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы действительно застряли нажмите кнопку <em>Show solution</em> чтобы вставить пример, который мы показали выше.</p>
+### Активное изучение: Стилизуйте ссылки самостоятельно
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+В этой секции активного изучения, мы бы хотели, чтобы взяли наш набор пустых правил и добавили ваши собственные объявления так чтобы ссылки выглядели действительно круто. Используйте своё воображение, не сковывайтесь. Мы уверены, что вы можете придумать что-то более крутое и все ещё так же функциональное, как и наш пример выше.
 
-<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
-  &lt;h2&gt;HTML Input&lt;/h2&gt;
-  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="https://www.mozilla.org/en-US/firefox/"&gt;Mozilla
- Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Google Chrome&lt;/a&gt;, and
-&lt;a href="https://www.microsoft.com/en-us/windows/microsoft-edge"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;
+Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку _Reset_. Если вы действительно застряли нажмите кнопку _Show solution_ чтобы вставить пример, который мы показали выше.
 
-  &lt;h2&gt;CSS Input&lt;/h2&gt;
-  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {
+```html hidden
+<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+  <h2>HTML Input</h2>
+  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
+ Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
+<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p></textarea>
+
+  <h2>CSS Input</h2>
+  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a {
 
 }
 
@@ -220,18 +217,19 @@ a:hover {
 
 a:active {
 
-}&lt;/textarea&gt;
+}</textarea>
 
-  &lt;h2&gt;Output&lt;/h2&gt;
-  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
-  &lt;div class="controls"&gt;
-    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
-    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
+  <h2>Output</h2>
+  <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div>
+  <div class="controls">
+    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
+  </div>
+</div>
+```
 
-<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+```js hidden
+var htmlInput = document.querySelector(".html-input");
 var cssInput = document.querySelector(".css-input");
 var reset = document.getElementById("reset");
 var htmlCode = htmlInput.value;
@@ -263,24 +261,26 @@ solution.addEventListener("click", function() {
 htmlInput.addEventListener("input", drawOutput);
 cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 800) }}
 
-<h2 id="Including_icons_on_links">Добавление иконок в ссылки</h2>
+## Добавление иконок в ссылки
 
-<p>Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать <a href="https://icons8.com/web-app/741/external-link">этот отличный образец с сайта icons8.com</a>.</p>
+Обычной практикой является добавление иконок в ссылки, чтобы предоставить больше индикатора того, на какой контент указывает ссылка. Давайте рассмотрим очень простой пример, который добавляет иконку к внешним ссылкам (ссылки, которые ведут на другие сайты). Такая ссылка обычно выглядит как маленькая стрела торчащая из коробочки — например, мы будем использовать [этот отличный образец с сайта icons8.com](https://icons8.com/web-app/741/external-link).
 
-<p>Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:</p>
+Давайте взглянем на HTML и CSS которые дадут нам эффект, который мы хотим. Во-первых, немного простого HTML который будет стилизован:
 
-<pre class="brush: html">&lt;p&gt;For more information on the weather, visit our &lt;a href="weather.html"&gt;weather page&lt;/a&gt;,
-look at &lt;a href="https://en.wikipedia.org/wiki/Weather"&gt;weather on Wikipedia&lt;/a&gt;, or check
-out &lt;a href="http://www.extremescience.com/weather.htm"&gt;weather on Extreme Science&lt;/a&gt;.&lt;/p&gt;</pre>
+```html
+<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
+look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
+out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
+```
 
-<p>Далее, CSS:</p>
+Далее, CSS:
 
-<pre class="brush: css">body {
+```css
+body {
   width: 300px;
   margin: 0 auto;
   font-family: sans-serif;
@@ -316,39 +316,41 @@ a[href*="http"] {
   background: url('external-link-52.png') no-repeat 100% 0;
   background-size: 16px 16px;
   padding-right: 19px;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}</p>
+{{ EmbedLiveSample('Including_icons_on_links', '100%', 150) }}
 
-<p>Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали <a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image">пользовательские маркеры для пунктов списка</a> в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем <code>no-repeat</code> чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.</p>
+Итак, что же тут происходит? Мы пропустим большую часть CSS так как это та же информация, которую вы рассматривали ранее. Однако, последнее правило интересное — тут мы вставляем пользовательское фоновое изображение во внешнюю ссылку схожим способом как мы делали [пользовательские маркеры для пунктов списка](/ru/docs/Learn/CSS/Styling_text/Styling_lists#using_a_custom_bullet_image) в последней статье — в этот раз, однако, мы используем короткую запись {{cssxref("background")}} вместо индивидуальных свойств. Мы задаём путь к изображению, которое хотим вставить, устанавливаем `no-repeat` чтобы мы получили только одну копию вставленного и затем устанавливаем позицию на 100% до правого края изображения и 0 пикселей от верхнего края.
 
-<p>Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.</p>
+Также мы используем {{cssxref("background-size")}} для того чтобы указать размер в котором бы хотим чтобы было показано фоновое изображение — полезно иметь иконку большего размера и далее менять его размер так, как нужно для адаптивного (отзывчивого) веб-дизайна. Однако это работает только в IE9 и следующих версиях так что, если вам нужна поддержка тех старых браузеров вам просто придётся менять размер изображения и вставлять его как есть.
 
-<p>Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.</p>
+Наконец, мы задаём некоторый {{cssxref("padding-right")}} для ссылки чтобы добавить пространство в котором появляется фоновое изображение, таким образом, чтобы мы не накладывали его на текст.
 
-<p>И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">HTML ссылки</a> правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors">селектора атрибутов</a>: <code>a[href*="http"]</code> выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.</p>
+И последнее слово — как мы выбрали только внешние ссылки? Ну, если вы пишете свои [HTML ссылки](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks) правильно, то вы должны были использовать только абсолютные URL для внешних ссылок — гораздо эффективнее использовать относительные ссылки для связи с другими частями вашего сайта. Текст "http" таким образом должен появляться только во внешних ссылках и можем выбрать его при помощи [селектора атрибутов](/ru/docs/Learn/CSS/Building_blocks/Selectors#attribute_selectors): `a[href*="http"]` выбирает элементы {{htmlelement("a")}}, но только если они имеют атрибут {{htmlattrxref("href","a")}} со значением содержащим "http" где-то внутри него.
 
-<p>Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!</p>
+Ну вот и все — попробуйте посетить секцию активного изучения выше и испытайте этот новый метод!
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: Не переживайте если вы ещё не знакомы с <a href="/en-US/docs/Learn/CSS/Building_blocks">фоном </a>и <a href="/en-US/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks">адаптивным (отзывчивым) веб-дизайном</a>; это объяснено в других местах</p>
-</div>
+> **Примечание:** **Обратите внимание**: Не переживайте если вы ещё не знакомы с [фоном ](/ru/docs/Learn/CSS/Building_blocks)и [адаптивным (отзывчивым) веб-дизайном](/ru/docs/Web/Progressive_web_apps/Responsive/responsive_design_building_blocks); это объяснено в других местах
 
-<h2 id="Styling_links_as_buttons">Стилизация ссылок в виде кнопок</h2>
+## Стилизация ссылок в виде кнопок
 
-<p>Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.</p>
+Инструменты, которые вы исследовали в этой статье также могут быть использованы другим способом. Например, такие состояния как hover могут быть использованы для стилизации множества различных элементов, не только ссылок — вы можете захотеть стилизовать состояние hover параграфов, элементов списка или других вещей.
 
-<p>Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.</p>
+Дополнительно, ссылки очень часто стилизуют так, чтоб они выглядели и вели себя как кнопки при определённых обстоятельствах — навигационное меню веб-сайтов обычно размечено как список, содержащий ссылки, который легко может быть стилизован так чтоб выглядел как набор кнопок управления или вкладок которые обеспечивают пользователя доступом к другим частям сайта. Давайте изучим как.
 
-<p>Для начала HTML:</p>
+Для начала HTML:
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
+</ul>
+```
 
-<p>А теперь наш CSS:</p>
+А теперь наш CSS:
 
-<pre class="brush: css">body,html {
+```css
+body,html {
   margin: 0;
   font-family: sans-serif;
 }
@@ -388,33 +390,28 @@ a:hover {
 a:active {
   background: red;
   color: white;
-}</pre>
+}
+```
 
-<p>Что даёт нам следующий результат:</p>
+Что даёт нам следующий результат:
 
-<p>{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}</p>
+{{ EmbedLiveSample('Styling_links_as_buttons', '100%', 100) }}
 
-<p>Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:</p>
+Давайте объясним, что тут происходит, фокусируясь на самых интересных частях:
 
-<ul>
- <li>Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).</li>
- <li>Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes">типы блоков CSS</a> чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.</li>
- <li>четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом:
-  <ul>
-   <li>как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.</li>
-   <li>Далее мы устанавливаем {{cssxref("display")}} на <code>inline-block</code> — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением <code>block</code>, мы хотим иметь возможность менять их размер. <code>inline-block</code> позволяет нам делать это.</li>
-   <li>Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет <code>&lt;ul&gt;</code> и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний <code>&lt;a&gt;</code> в списке и удаляет его margin. Сделано!</li>
-   <li>Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.</li>
-  </ul>
- </li>
-</ul>
+- Наше второе правило удаляет заданный по умолчанию {{cssxref("padding")}} у элемента {{htmlelement("ul")}} и устанавливает его ширину так, чтобы охватить 100% внешнего контейнера (в этом случае {{htmlelement("body")}}).
+- Элементы {{htmlelement("li")}} по умолчанию в норме являются блочными (см. [типы блоков CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model#types_of_css_boxes) чтобы вспомнить), что значит что они будут располагаться на своих собственных строках. В этом случае мы создаём горизонтальный список ссылок, поэтому в третьем правиле задаём свойству {{cssxref("display")}} значение inline, что приводит к тому, что элементы списка располагаются в одной строке друг с другом — теперь они ведут себя как строчные элементы.
+- четвёртое правило — которое стилизует элемент {{htmlelement("a")}} — самое сложное; давайте пройдёмся по нему шаг за шагом:
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
-</div>
+  - как в предыдущем примере, мы начинаем отключать настройки по умолчанию для {{cssxref("text-decoration")}} и {{cssxref("outline")}} — мы не хотим, чтоб они портили нам вид.
+  - Далее мы устанавливаем {{cssxref("display")}} на `inline-block` — элементы {{htmlelement("a")}} являются строчными по умолчанию и, поскольку мы не хотим чтобы они вываливались на свои собственные строки как если бы это получалось со значением `block`, мы хотим иметь возможность менять их размер. `inline-block` позволяет нам делать это.
+  - Теперь только изменение размера! Мы хотим заполнить всю ширину элемента {{htmlelement("ul")}}, оставить немного margin между каждой кнопкой (не без зазора с правого края) и мы имеем 5 кнопок, которые надо разместить и которые должны иметь одинаковый размер. Для того чтобы это сделать мы задаём {{cssxref("width")}} на 19.5%, а {{cssxref("margin-right")}} на 0.625%. Вы заметите что вся эта эта ширина составляет 100.625%, что может сделать так что последняя кнопка перекроет `<ul>` и выпадет вниз на следующую строку. Тем не менее, мы возвращаемся к 100%, используя следующее правило, которое выбирает только последний `<a>` в списке и удаляет его margin. Сделано!
+  - Последние три объявления довольно просты и в основном просто для косметических целей. Мы центрируем текст внутри каждой ссылки, задаём {{cssxref("line-height")}} на 3 чтобы кнопки имели некую высоту (что также имеет преимущество в центрировании текста по вертикали) и задаём для текста чёрный цвет.
+
+> **Примечание:** **Обратите внимание**: вы могли заметить что элементы списка в HTML все находятся на одной строке друг с другом — так сделано потому, что это сделано потому, что пробелы/разрывы строк между элементами встроенного блока создают пробелы на странице, точно также как пробелы между словами и такие пробелы могли бы нарушить расположение нашего горизонтального меню навигации. Вы можете найти больше информации об этой проблеме (и решения) на [Fighting the space between inline block elements](https://css-tricks.com/fighting-the-space-between-inline-block-elements/).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.</p>
+Мы надеемся эта статья снабдила вас всем что вам надо знать о ссылках — на данный момент! Последняя статья в нашем модуле стилизации текста детализирует как использовать пользовательские шрифты на вашем веб-сайте или как они больше известны веб-шрифты.
 
-<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
diff --git a/files/ru/learn/css/styling_text/styling_lists/index.md b/files/ru/learn/css/styling_text/styling_lists/index.md
index ce9c76a9b67554..63bd398f3e2727 100644
--- a/files/ru/learn/css/styling_text/styling_lists/index.md
+++ b/files/ru/learn/css/styling_text/styling_lists/index.md
@@ -4,90 +4,78 @@ slug: Learn/CSS/Styling_text/Styling_lists
 translation_of: Learn/CSS/Styling_text/Styling_lists
 original_slug: Learn/CSS/Styling_text/Стилизация_списков
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+[Списки](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists), по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.
 
-<p class="summary"><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#lists">Списки</a>, по-большому счету, ведут себя также как любой другой текст, но существуют некоторые специфичные настройки CSS, о которых вы должны знать. В этой статье они все описываются.</p>
+| Требования: | Базовая компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/First_steps)), [CSS основы по тексту и шрифтам.](/ru/docs/Learn/CSS/Styling_text/Fundamentals) |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Познакомиться с лучшими практиками и свойствами по стилизации списков.                                                                                                                                                                                                      |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>
-    <p>Базовая компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/First_steps">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS основы по тексту и шрифтам.</a></p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Познакомиться с лучшими практиками и свойствами по стилизации списков.</td>
-  </tr>
- </tbody>
-</table>
+## Пример простого списка
 
-<h2 id="Пример_простого_списка">Пример простого списка</h2>
+Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример [доступен на Github](https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html) (проверьте также [источник кода](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html).)
 
-<p>Для начала, давайте взглянем на пример простого списка. В данной статье мы рассмотрим ненумерованный, нумерованный и описательный списки  — все они имеют аналогичные свойства стилизации, но некоторые имеют свои специальные свойства. Не стилизованный пример <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступен на Github</a> (проверьте также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">источник кода</a>.)</p>
+HTML для нашего примера списка представлен ниже:
 
-<p>HTML для нашего примера списка представлен ниже:</p>
+```html
+<h2>Shopping (unordered) list</h2>
 
-<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
 
-&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
-
-&lt;ul&gt;
-  &lt;li&gt;Hummus&lt;/li&gt;
-  &lt;li&gt;Pita&lt;/li&gt;
-  &lt;li&gt;Green salad&lt;/li&gt;
-  &lt;li&gt;Halloumi&lt;/li&gt;
-&lt;/ul&gt;
+<ul>
+  <li>Hummus</li>
+  <li>Pita</li>
+  <li>Green salad</li>
+  <li>Halloumi</li>
+</ul>
 
-&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+<h2>Recipe (ordered) list</h2>
 
-&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
 
-&lt;ol&gt;
-  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
-  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
-  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
-  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
-&lt;/ol&gt;
+<ol>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
 
-&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+<h2>Ingredient description list</h2>
 
-&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
-paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+<p>Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.</p>
 
-&lt;dl&gt;
-  &lt;dt&gt;Hummus&lt;/dt&gt;
-  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
-  &lt;dt&gt;Pita&lt;/dt&gt;
-  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
-  &lt;dt&gt;Halloumi&lt;/dt&gt;
-  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
-  &lt;dt&gt;Green salad&lt;/dt&gt;
-  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
-&lt;/dl&gt;</pre>
+<dl>
+  <dt>Hummus</dt>
+  <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd>
+  <dt>Pita</dt>
+  <dd>A soft, slightly leavened flatbread.</dd>
+  <dt>Halloumi</dt>
+  <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd>
+  <dt>Green salad</dt>
+  <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd>
+</dl>
+```
 
-<p>Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика браузера</a>, то вы заметите несколько стилей установленных по умолчанию:</p>
+Если вы перейдёте к живому примеру прямо сейчас и изучите элемент списка используя [инструменты разработчика браузера](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), то вы заметите несколько стилей установленных по умолчанию:
 
-<ul>
- <li>Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>) и {{cssxref("padding-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
- <li>Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов.</li>
- <li>Элемент {{htmlelement("dl")}} имеет верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), но padding не задан.</li>
- <li>Элементы {{htmlelement("dd")}} имеют {{cssxref("margin-left")}} <code>40px</code> (<code>2.5em</code>.)</li>
- <li>Элементы {{htmlelement("p")}} которые мы включили для ссылок (сноски) имеют верхний и нижний {{cssxref("margin")}} по <code>16px</code> (<code>1em</code>), точно так же, как и различные типы списков.</li>
-</ul>
+- Элементы {{htmlelement("ul")}} и {{htmlelement("ol")}} имеют верхний и нижний {{cssxref("margin")}} по `16px` (`1em`) и {{cssxref("padding-left")}} `40px` (`2.5em`.)
+- Объекты списка (элементы {{htmlelement("li")}}) не имеют заданных значений по умолчанию для интервалов.
+- Элемент {{htmlelement("dl")}} имеет верхний и нижний {{cssxref("margin")}} по `16px` (`1em`), но padding не задан.
+- Элементы {{htmlelement("dd")}} имеют {{cssxref("margin-left")}} `40px` (`2.5em`.)
+- Элементы {{htmlelement("p")}} которые мы включили для ссылок (сноски) имеют верхний и нижний {{cssxref("margin")}} по `16px` (`1em`), точно так же, как и различные типы списков.
 
-<h2 id="Управление_интервалами_списков">Управление интервалами списков</h2>
+## Управление интервалами списков
 
-<p>При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть <a href="https://mdn.github.io/learning-area/css/styling-text/styling-lists/">законченный стилизированный пример</a> на Github, а также <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">найти исходный код</a>.)</p>
+При оформлении списков, вам необходимо настроить их стили так, чтоб они сохраняли то же вертикальное расстояние, что и окружающие их элементы (такие как параграфы и изображения; иногда называемые вертикальным ритмом) и то же расстояние по горизонтали как и между собой (посмотреть [законченный стилизированный пример](https://mdn.github.io/learning-area/css/styling-text/styling-lists/) на Github, а также [найти исходный код](https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html).)
 
-<p>CSS, используемый для оформления текста и интервалов, выглядит следующим образом:</p>
+CSS, используемый для оформления текста и интервалов, выглядит следующим образом:
 
-<pre class="brush: css">/* General styles */
+```css
+/* General styles */
 
 html {
   font-family: Helvetica, Arial, sans-serif;
@@ -119,65 +107,69 @@ dt {
 
 dd {
   margin-bottom: 1.5rem;
-}</pre>
+}
+```
 
-<ul>
- <li>Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.</li>
- <li>Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.</li>
- <li>Правило 4 задаёт одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.</li>
- <li>Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту <code>line-height</code> между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.  </li>
-</ul>
+- Первое правило устанавливает шрифт сайта и основной размер шрифта 10px. Они наследуются всеми на этой странице.
+- Правила 2 и 3 задают относительные размеры шрифтов заголовков, различных типов списков (их наследуют дочерние элементы списков) и параграфов. Это значит, что каждый параграф и список будут иметь одинаковый размер шрифта, а также верхний и нижний интервалы, помогая сохранить согласованность вертикального ритма.
+- Правило 4 задаёт одинаковую высоту {{cssxref("line-height")}} в параграфах и пунктах списка — так, что параграфы и каждый отдельный пункт списка будут иметь те же интервалы между строками. Это также поможет сохранить согласованность вертикального ритма.
+- Правила 5 и 6 применяются к списку описаний — мы задаём одинаковую высоту `line-height` между терминами и описаниями списке описаний как мы это делали с параграфами и пунктами списка. И снова, согласованность хорошая! Мы также делаем описание терминов жирным шрифтом, чтобы они визуально выделялись легче.
 
-<h2 id="Стили_специфичные_для_списков">Стили специфичные для списков</h2>
+## Стили специфичные для списков
 
-<p>Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:</p>
+Теперь, рассмотрев общие методы интервалов для списков, давайте изучим некоторые специфичные спискам свойства. Существует три свойства, с которых вам надо начать знакомство, которые могут быть установлены для элементов {{htmlelement("ul")}} или {{htmlelement("ol")}}:
 
-<ul>
- <li>{{cssxref("list-style-type")}}: задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.</li>
- <li>{{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.</li>
- <li>{{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.</li>
-</ul>
+- {{cssxref("list-style-type")}}: задаёт тип маркеров для использования в списке, например, квадратные или круглые маркеры для неупорядоченного списка, или цифры, буквы или римские цифры для упорядоченного списка.
+- {{cssxref("list-style-position")}}: управляет будет ли маркер появляется внутри пунктов списка или вне их перед началом каждого элемента.
+- {{cssxref("list-style-image")}}: позволяет вам использовать пользовательские изображения в качестве маркеров, а не просто квадрат или круг.
 
-<h3 id="Стили_маркеров">Стили маркеров</h3>
+### Стили маркеров
 
-<p>Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:</p>
+Как указано выше, свойство {{cssxref("list-style-type")}} позволяет вам устанавливать какой тип маркера использовать в качестве точек маркера. В нашем примере мы установили использование заглавных римских цифр в упорядоченном списке:
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: upper-roman;
-}</pre>
+}
+```
 
-<p>Это даёт нам следующий вид:</p>
+Это даёт нам следующий вид:
 
-<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![an ordered list with the bullet points set to appear outside the list item text.](outer-bullets.png)
 
-<p>Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.</p>
+Вы можете найти гораздо больше опций, заглянув на справочную страницу {{cssxref ("list-style-type")}}.
 
-<h3 id="Позиция_маркера">Позиция маркера</h3>
+### Позиция маркера
 
-<p>Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — <code>outside</code>, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.</p>
+Свойство {{cssxref("list-style-position")}} устанавливает будет ли появляться маркер внутри пунктов списка или снаружи перед началом каждого пункта. Значение по умолчанию — `outside`, которое заставляет маркеры находится снаружи пунктов списка, как видно выше.
 
-<p>Если вы установите значение на <code>inside</code>, то маркеры будут находиться внутри строк:</p>
+Если вы установите значение на `inside`, то маркеры будут находиться внутри строк:
 
-<pre class="brush: css">ol {
+```css
+ol {
   list-style-type: upper-roman;
   list-style-position: inside;
-}</pre>
+}
+```
 
-<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![an ordered list with the bullet points set to appear inside the list item text.](inner-bullets.png)
 
-<h3 id="Использование_пользовательского_изображения_как_маркер">Использование пользовательского изображения как маркер</h3>
+### Использование пользовательского изображения как маркер
 
-<p>Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:</p>
+Свойство {{cssxref("list-style-image")}} позволяет вам использовать пользовательское изображение в качестве вашего маркера. Синтаксис довольно прост:
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style-image: url(star.svg);
-}</pre>
+}
+```
 
-<p>Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле <a href="/en-US/docs/Learn/CSS/Building_blocks">Styling boxes</a>. А пока вот вам образец для дегустации!</p>
+Однако это свойство немного ограничено с точки зрения управления позициями, размерами (и т.д.) маркеров. Вам лучше использовать семейство свойств {{cssxref ("background")}}, о которых вы узнаете намного больше в модуле [Styling boxes](/ru/docs/Learn/CSS/Building_blocks). А пока вот вам образец для дегустации!
 
-<p>В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):</p>
+В нашем законченном примере мы оформили неупорядоченный список следующим образом (поверх того, что вы уже видели выше):
 
-<pre class="brush: css">ul {
+```css
+ul {
   padding-left: 2rem;
   list-style-type: none;
 }
@@ -188,145 +180,145 @@ ul li {
   background-position: 0 0;
   background-size: 1.6rem 1.6rem;
   background-repeat: no-repeat;
-}</pre>
+}
+```
 
-<p>Мы сделали следующее:</p>
+Мы сделали следующее:
 
-<ul>
- <li>Установили {{cssxref("padding-left")}} элемента {{htmlelement("ul")}} с <code>40px</code> по умолчанию на <code>20px</code>, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.</li>
- <li>Установили {{cssxref("list-style-type")}} на <code>none</code>, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства {{cssxref("background")}} для управления маркерами.</li>
- <li>Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
-  <ul>
-   <li>{{cssxref("background-image")}}: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.</li>
-   <li>{{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим <code>0 0</code>, что значит что маркер будет появляться в самом верху слева каждого пункта списка.</li>
-   <li>{{cssxref("background-size")}}: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер <code>1.6rem</code> (<code>16px</code>), что очень хорошо сочетается с отступом (padding) <code>20px</code>, который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.</li>
-   <li>{{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение <code>no-repeat</code>.</li>
-  </ul>
- </li>
-</ul>
+- Установили {{cssxref("padding-left")}} элемента {{htmlelement("ul")}} с `40px` по умолчанию на `20px`, затем установили то же самое количество в пунктах списка. Это для того, чтобы все пункты списка продолжали выравниваться с порядком пунктов списка и описаний списка описаний, но пункты списка имеют некоторый padding для фоновых изображений чтобы сидеть внутри. Если бы мы не сделали этого, то фоновые изображения накладывались бы с текстом пунктов списка, что выглядело бы неряшливо.
+- Установили {{cssxref("list-style-type")}} на `none`, для того чтобы маркеры не появлялись по умолчанию. Мы собираемся использовать свойства {{cssxref("background")}} для управления маркерами.
+- Вставили маркер в каждый пункт неупорядоченного списка. Соответствующие свойства, следующие:
 
-<p>Это даёт нам следующий результат:</p>
+  - {{cssxref("background-image")}}: Указывает путь к файлу изображения, который вы хотите использовать в качестве маркера.
+  - {{cssxref("background-position")}}: Определяет где в фоне выбранного элемента появится изображение — в данном случае мы говорим `0 0`, что значит что маркер будет появляться в самом верху слева каждого пункта списка.
+  - {{cssxref("background-size")}}: Задаёт размер фонового изображения. В идеале мы хотим, чтоб маркеры были того же размера что и пункты списка (или самую малость меньше или крупнее). Мы используем размер `1.6rem` (`16px`), что очень хорошо сочетается с отступом (padding) `20px`, который мы позволили разместить внутри маркера — 16px плюс 4px интервала между маркером и текстом пункта списка работают хорошо.
+  - {{cssxref("background-repeat")}}: По умолчанию, фоновые изображения повторяются пока не заполнят доступное фоновое пространство. Мы хотим всего лишь одну копию вставленного изображения в каждом случае, поэтому мы установили значение `no-repeat`.
 
-<p><img alt="an unordered list with the bullet points set as little star images" src="list_formatting.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+Это даёт нам следующий результат:
 
-<h3 id="короткая_запись_list-style">короткая запись list-style</h3>
+![an unordered list with the bullet points set as little star images](list_formatting.png)
 
-<p>Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:</p>
+### короткая запись list-style
 
-<pre class="brush: css">ul {
+Эти три свойства упомянутые выше могут все быть заданы, используя лишь одну короткую запись свойства, {{cssxref("list-style")}}. Например, следующий CSS:
+
+```css
+ul {
   list-style-type: square;
   list-style-image: url(example.png);
   list-style-position: inside;
-}</pre>
+}
+```
 
-<p>Может быть заменён этим:</p>
+Может быть заменён этим:
 
-<pre class="brush: css">ul {
+```css
+ul {
   list-style: square url(example.png) inside;
-}</pre>
+}
+```
 
-<p>Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — <code>disc</code>, <code>none</code>, и <code>outside</code>). Если указаны и <code>type</code> и <code>image</code>, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.</p>
+Значения могут быть перечислены в любом порядке, и вы можете использовать одно, два и все три (значения по умолчанию, использованные для свойств, которые не включены — `disc`, `none`, и `outside`). Если указаны и `type` и `image`, тип используется в качестве запасного варианта, если изображение по какой-либо причине не может быть загружено.
 
-<h2 id="Контроль_счета_списка">Контроль счета списка</h2>
+## Контроль счета списка
 
-<p>Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.</p>
+Иногда вам может понадобиться вести счёт в упорядоченном списке по-другому — например начинать с цифры отличной от 1, или считать в обратном порядке, или вести счёт с шагом больше 1. HTML и CSS имеют несколько инструментов которые помогут с этим.
 
-<h3 id="start">start</h3>
+### start
 
-<p>Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счёт списка с цифры отличной от 1. Например:</p>
+Атрибут {{htmlattrxref("start","ol")}} позволит вам начать счёт списка с цифры отличной от 1. Например:
 
-<pre class="brush: html">&lt;ol start="4"&gt;
-  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
-  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
-  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
-  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol start="4">
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+```
 
-<p>что даст вам такой результат:</p>
+что даст вам такой результат:
 
-<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+{{ EmbedLiveSample('start', '100%', 150) }}
 
-<h3 id="reversed">reversed</h3>
+### reversed
 
-<p>Атрибут {{htmlattrxref("reversed","ol")}} начнёт отсчёт по убыванию вместо возрастания. Например:</p>
+Атрибут {{htmlattrxref("reversed","ol")}} начнёт отсчёт по убыванию вместо возрастания. Например:
 
-<pre class="brush: html">&lt;ol start="4" reversed&gt;
-  &lt;li&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
-  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
-  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
-  &lt;li&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol start="4" reversed>
+  <li>Toast pita, leave to cool, then slice down the edge.</li>
+  <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li>Wash and chop the salad.</li>
+  <li>Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+```
 
-<p>что даст вам такой результат:</p>
+что даст вам такой результат:
 
-<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+{{ EmbedLiveSample('reversed', '100%', 150) }}
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: Если пунктов в списке в обратном списке больше, чем значение атрибута <code>start</code>, счёт продолжится до нуля и далее отрицательные значения.</p>
-</div>
+> **Примечание:** **Обратите внимание**: Если пунктов в списке в обратном списке больше, чем значение атрибута `start`, счёт продолжится до нуля и далее отрицательные значения.
+
+### value
 
-<h3 id="value">value</h3>
+Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:
 
-<p>Атрибут {{htmlattrxref("value","ol")}} позволит вам установить специфичные цифровые значения к пунктам списка. Например:</p>
+```html
+<ol>
+  <li value="2">Toast pita, leave to cool, then slice down the edge.</li>
+  <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
+  <li value="6">Wash and chop the salad.</li>
+  <li value="8">Fill pita with salad, hummus, and fried halloumi.</li>
+</ol>
+```
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li value="2"&gt;Toast pita, leave to cool, then slice down the edge.&lt;/li&gt;
-  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
-  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
-  &lt;li value="8"&gt;Fill pita with salad, hummus, and fried halloumi.&lt;/li&gt;
-&lt;/ol&gt;</pre>
+что даст вам такой результат:
 
-<p>что даст вам такой результат:</p>
+{{ EmbedLiveSample('value', '100%', 150) }}
 
-<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+> **Примечание:** **Обратите внимание**: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам всё равно надо использовать эквивалентное цифровое значение в атрибуте `value`.
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: Даже если вы используете нечисловой {{cssxref("list-style-type")}}, вам всё равно надо использовать эквивалентное цифровое значение в атрибуте <code>value</code>.</p>
-</div>
+## Активное изучение: Стилизация вложенного списка
 
-<h2 id="Активное_изучение_Стилизация_вложенного_списка">Активное изучение: Стилизация вложенного списка</h2>
+В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:
 
-<p>В этой сессии активного изучения, мы хотим, чтобы вы взяли всё что вы выучили выше и попробовали стилизовать вложенный список. Мы предоставили вам HTML и хотим, чтобы вы:</p>
+1.  Задали неупорядоченному списку квадратные маркеры.
+2.  Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.
+3.  Задали упорядоченному списку маркеры в виде строчных букв.
+4.  Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.
 
-<ol>
- <li>Задали неупорядоченному списку квадратные маркеры.</li>
- <li>Задали пунктам неупорядоченного и упорядоченного списка 1,5 межстрочный интервал их размера шрифта.</li>
- <li>Задали упорядоченному списку маркеры в виде строчных букв.</li>
- <li>Не стесняйтесь играться с примерами списков столько сколько вам нравится, экспериментируя с типами маркеров, интервалами или со всем что вы найдёте.</li>
-</ol>
+Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку _Reset_. Если вы застрянете, нажмите кнопку _Show solution_ чтобы посмотреть возможный ответ.
 
-<p>Если вы допустите ошибку, вы всегда можете сделать сброс используя кнопку <em>Reset</em>. Если вы застрянете, нажмите кнопку <em>Show solution </em>чтобы посмотреть возможный ответ.</p>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
-  &lt;h2&gt;HTML Input&lt;/h2&gt;
-  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
-  &lt;li&gt;First, light the candle.&lt;/li&gt;
-  &lt;li&gt;Next, open the box.&lt;/li&gt;
-  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
-    &lt;ol&gt;
-      &lt;li&gt;The book of spells&lt;/li&gt;
-      &lt;li&gt;The shiny rod&lt;/li&gt;
-      &lt;li&gt;The goblin statue&lt;/li&gt;
-    &lt;/ol&gt;
-  &lt;/li&gt;
-&lt;/ul&gt;&lt;/textarea&gt;
-
-  &lt;h2&gt;CSS Input&lt;/h2&gt;
-  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
-
-  &lt;h2&gt;Output&lt;/h2&gt;
-  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
-  &lt;div class="controls"&gt;
-    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
-    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
-  &lt;/div&gt;
-&lt;/div&gt;
-</pre>
-
-<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+```html hidden
+<div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;">
+  <h2>HTML Input</h2>
+  <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul>
+  <li>First, light the candle.</li>
+  <li>Next, open the box.</li>
+  <li>Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    <ol>
+      <li>The book of spells</li>
+      <li>The shiny rod</li>
+      <li>The goblin statue</li>
+    </ol>
+  </li>
+</ul></textarea>
+
+  <h2>CSS Input</h2>
+  <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea>
+
+  <h2>Output</h2>
+  <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div>
+  <div class="controls">
+    <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;">
+    <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;">
+  </div>
+</div>
+```
+
+```js hidden
+var htmlInput = document.querySelector(".html-input");
 var cssInput = document.querySelector(".css-input");
 var reset = document.getElementById("reset");
 var htmlCode = htmlInput.value;
@@ -358,33 +350,28 @@ solution.addEventListener("click", function() {
 htmlInput.addEventListener("input", drawOutput);
 cssInput.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 800) }}
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<p>Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:</p>
+Счётчики CSS предоставляют расширенные инструменты для настройки счета и оформления списков, но они довольно сложные. Мы рекомендуем изучить это, если вы захотите размяться. Смотрите:
 
-<ul>
- <li>{{cssxref("@counter-style")}}</li>
- <li>{{cssxref("counter-increment")}}</li>
- <li>{{cssxref("counter-reset")}}</li>
-</ul>
+- {{cssxref("@counter-style")}}
+- {{cssxref("counter-increment")}}
+- {{cssxref("counter-reset")}}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.</p>
+В плане стилизации списки сравнительно легко освоить, как только вы освоите несколько связанных базовых принципов и специфичные свойства. В следующей статье мы перейдём к методам стилизации ссылок.
 
-<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы стилизации текста и шрифта</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Вёрстка домашней страницы общественной школы</a></li>
-</ul>
+- [Основы стилизации текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
+- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Вёрстка домашней страницы общественной школы](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
index faffe04172fdc9..e2a036e9a68990 100644
--- a/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
+++ b/files/ru/learn/css/styling_text/typesetting_a_homepage/index.md
@@ -4,124 +4,91 @@ slug: Learn/CSS/Styling_text/Typesetting_a_homepage
 translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
 original_slug: Learn/CSS/Styling_text/Задание:_Стилизирование_школьного_сайта
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
-<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>
+В этой оценке мы проверим ваше понимание всех методов стилизации текста, которые мы рассмотрели в этом модуле дав вам задание стилизовать текст домашней страницы общественной школы. Вы можете просто развлечься, выполняя задание.
 
-<p class="summary">В этой оценке мы проверим ваше понимание всех методов стилизации текста, которые мы рассмотрели в этом модуле дав вам задание стилизовать текст домашней страницы общественной школы. Вы можете просто развлечься, выполняя задание.</p>
+| Предварительные требования: | Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке. |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| Задача:                     | Проверить понимание методов CSS по стилизации текста.                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Проверить понимание методов CSS по стилизации текста.</td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Чтобы начать эту оценку, вам необходимо:
 
-<p>Чтобы начать эту оценку, вам необходимо:</p>
+- Перейти и взять файлы [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) и [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) для упражнения, а также предоставленную [иконку внешней ссылки](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png).
+- Сделайте их копии на вашем компьютере.
 
-<ul>
- <li>Перейти и взять файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> для упражнения, а также предоставленную <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">иконку внешней ссылки</a>.</li>
- <li>Сделайте их копии на вашем компьютере.</li>
-</ul>
+В качестве альтернативы, вы можете пользоваться сайтами как [JSBin](http://jsbin.com/) или [Glitch](https://glitch.com/) чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать [этот URL](https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png) чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент `<style>` в head документа.
 
-<p>В качестве альтернативы, вы можете пользоваться сайтами как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a> чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать <a href="https://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">этот URL</a> чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <code>&lt;style&gt;</code> в head документа.</p>
+> **Примечание:** **Обратите внимание**: Если вы застрянете, то попросите помощи — см. секцию [Оценка или дальнейшая помощь](#оценка_или_дальнейшая_помощь) в конце этой страницы.
 
-<div class="blockIndicator note">
-<p><strong>Обратите внимание</strong>: Если вы застрянете, то попросите помощи — см. секцию <a href="#оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</a> в конце этой страницы.</p>
-</div>
+## Краткое описание проекта
 
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает ещё каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.
 
-<p>Вам предоставлен некоторый "сырой" HTML для домашней страницы воображаемого общественного колледжа, плюс немного CSS который стилизует страницу в макет с тремя колонками и обеспечивает ещё каким-то другим элементарным стилем. Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.</p>
+Шрифты:
 
-<p>Шрифты:</p>
+- Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.
+- Используйте подходящий сервис для генерации пуленепробиваемого `@font-face` кода для этих двух шрифтов.
+- Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.
 
-<ul>
- <li>Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.</li>
- <li>Используйте подходящий сервис для генерации пуленепробиваемого <code>@font-face</code> кода для этих двух шрифтов.</li>
- <li>Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.</li>
-</ul>
+Общая стилизация текста:
 
-<p>Общая стилизация текста:</p>
+- Дайте всей странице `font-size` `10px`.
+- Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответствующие относительные единицы.
+- Дайте основному тексту подходящую `line-height`.
+- Отцентрируйте ваш заголовок верхнего уровня на странице.
+- Дайте вашим заголовкам немного `letter-spacing` чтобы они не были слишком сжатыми, позвольте буквам немного дышать.
+- Дайте основному тексту немного `letter-spacing` и `word-spacing`, при необходимости.
+- Дайте первым параграфам после каждого заголовка в `<section>` немного отступа, скажем 20px.
 
-<ul>
- <li>Дайте всей странице <code>font-size</code> <code>10px</code>.</li>
- <li>Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответствующие относительные единицы.</li>
- <li>Дайте основному тексту подходящую <code>line-height</code>.</li>
- <li>Отцентрируйте ваш заголовок верхнего уровня на странице.</li>
- <li>Дайте вашим заголовкам немного <code>letter-spacing</code> чтобы они не были слишком сжатыми, позвольте буквам немного дышать.</li>
- <li>Дайте основному тексту немного <code>letter-spacing</code> и <code>word-spacing</code>, при необходимости.</li>
- <li>Дайте первым параграфам после каждого заголовка в <code>&lt;section&gt;</code> немного отступа, скажем 20px.</li>
-</ul>
+Ссылки:
 
-<p>Ссылки:</p>
+- Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.
+- Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.
+- Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.
+- Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.
+- Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.
 
-<ul>
- <li>Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.</li>
- <li>Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.</li>
- <li>Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.</li>
- <li>Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.</li>
- <li>Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.</li>
-</ul>
+Списки:
 
-<p>Списки:</p>
+- Убедитесь, что интервалы ваших списков и пунктов списка совпадают со стилизацией всей страницы. Все элементы списка должны иметь ту же `line-height` что и строки параграфов, и каждый список должен иметь те же интервалы сверху и снизу которые имеются между параграфами.
+- Дайте элементам списка симпатичные маркеры, соответствующие дизайну страницы. Выберете ли вы пользовательские изображения для маркеров или что-то другое — зависит от вас.
 
-<ul>
- <li>Убедитесь, что интервалы ваших списков и пунктов списка совпадают со стилизацией всей страницы. Все элементы списка должны иметь ту же <code>line-height</code> что и строки параграфов, и каждый список должен иметь те же интервалы сверху и снизу которые имеются между параграфами.</li>
- <li>Дайте элементам списка симпатичные маркеры, соответствующие дизайну страницы. Выберете ли вы пользовательские изображения для маркеров или что-то другое — зависит от вас.</li>
-</ul>
+Меню навигации:
 
-<p>Меню навигации:</p>
+- Стилизуйте ваше меню навигации так чтоб оно соответствовало внешнему виду страницы.
 
-<ul>
- <li>Стилизуйте ваше меню навигации так чтоб оно соответствовало внешнему виду страницы.</li>
-</ul>
+## Советы и подсказки
 
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+- Вам не надо как-либо редактировать HTML в этом упражнении.
+- Вам не надо обязательно делать меню навигации в виде кнопок, но надо чтоб они были более-менее высокими, чтобы они не выглядели глупо на краю страницы; также помните, что вам надо сделать его вертикальным меню навигации.
 
-<ul>
- <li>Вам не надо как-либо редактировать HTML в этом упражнении.</li>
- <li>Вам не надо обязательно делать меню навигации в виде кнопок, но надо чтоб они были более-менее высокими, чтобы они не выглядели глупо на краю страницы; также помните, что вам надо сделать его вертикальным меню навигации.</li>
-</ul>
+## Пример
 
-<h2 id="Пример">Пример</h2>
+Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.
 
-<p>Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.</p>
+![](example2.png)
 
-<p><img alt="" src="example2.png" style="display: block; margin: 0px auto;"></p>
+## Оценка или дальнейшая помощь
 
-<h2 id="Оценка_или_дальнейшая_помощь">Оценка или дальнейшая помощь</h2>
+Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:
 
-<p>Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:</p>
+1.  Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), или [Glitch](https://glitch.com/).
+2.  Напишите пост с просьбой оценки и/или помощи на [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
 
-<ol>
- <li>Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, или <a href="https://glitch.com/">Glitch</a>.</li>
- <li>Напишите пост с просьбой оценки и/или помощи на <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок такой как "Требуется оценка вёрстки домашней страницы общественный школы".</li>
-   <li>Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.</li>
-   <li>Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.</li>
-   <li>Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+    - Описательный заголовок такой как "Требуется оценка вёрстки домашней страницы общественный школы".
+    - Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
+    - Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
+    - Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.
 
-<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>
+{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальная стилизация текста и шрифта</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задании: Стилизация школьного сайта</a></li>
-</ul>
+- [Фундаментальная стилизация текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
+- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Задании: Стилизация школьного сайта](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/css/styling_text/web_fonts/index.md b/files/ru/learn/css/styling_text/web_fonts/index.md
index 77486483f471eb..6ed0c54dd2a06f 100644
--- a/files/ru/learn/css/styling_text/web_fonts/index.md
+++ b/files/ru/learn/css/styling_text/web_fonts/index.md
@@ -4,158 +4,134 @@ slug: Learn/CSS/Styling_text/Web_fonts
 translation_of: Learn/CSS/Styling_text/Web_fonts
 original_slug: Learn/CSS/Styling_text/Веб_шрифты
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
 
-<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div>
+В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.
 
-<p class="summary">В первой статье модуля, мы изучали основные функции CSS доступные для стилизации шрифтов и текста. В этой статье мы продвинемся дальше изучая веб-шрифты в деталях — они позволяют вам загружать пользовательские шрифты вместе с вашей веб-страницей, чтобы обеспечить более разнообразный, индивидуальный стиль текста.</p>
+| Предварительные требования: | Основная компьютерная грамотность, основы HTML (изучите [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)), основы CSS (изучите [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)), [Основы CSS текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals). |
+| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.                                                                                                                                                                    |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Основная компьютерная грамотность, основы HTML (изучите <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), основы CSS (изучите <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основы CSS текста и шрифта</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>
-    <p>Изучить как применять веб-шрифты к веб-странице, использовать сторонний сервис или писать код самостоятельно.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Краткое повторение семейств шрифтов
 
-<h2 id="Краткое_повторение_семейств_шрифтов">Краткое повторение семейств шрифтов</h2>
+Как мы рассматривали в [Фундаментальной стилизации текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals), шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:
 
-<p>Как мы рассматривали в <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальной стилизации текста и шрифта</a>, шрифты применённые к вашему HTML могут контролироваться при помощи свойства {{cssxref("font-family")}}. Оно принимает одно и более имён семейств шрифтов и браузер следует по списку пока не найдёт тот шрифт, который является доступным в системе, под управлением которой он работает:</p>
-
-<pre class="brush: css">p {
+```css
+p {
   font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
-}</pre>
+}
+```
 
-<p>Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые <a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts">Безопасные веб-шрифты</a>. Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.</p>
+Эта система работает хорошо, но традиционно выбор шрифтов веб-разработчиков была ограниченной. Существует только горсть шрифтов которые вы можете гарантировать, что они являются доступными во всех распространённых системах — так называемые [Безопасные веб-шрифты](/en-US/Learn/CSS/Styling_text/Fundamentals#Web_safe_fonts). Вы можете использовать стек шрифта для указания предпочтительных шрифтов, за которыми следует веб-безопасные альтернативы, за которыми следует системный шрифт по умолчанию, но это добавляет дополнительной работы с точки зрения тестирования, чтобы убедиться, что ваш дизайн выглядит хорошо с каждым из шрифтов и т. д.
 
-<h2 id="Веб-шрифты">Веб-шрифты</h2>
+## Веб-шрифты
 
-<p>Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:</p>
+Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своём распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:
 
-<p>Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:</p>
+Во-первых, у вас есть блок {{cssxref("@font-face")}} в начале CSS, который указывает файл(-ы) шрифтов для загрузки:
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: "myFont";
   src: url("myFont.woff");
-}</pre>
+}
+```
 
-<p>Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:</p>
+Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:
 
-<pre class="brush: css">html {
+```css
+html {
   font-family: "myFont", "Bitstream Vera Serif", serif;
-}</pre>
+}
+```
 
-<p>Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.</p>
+Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.
 
-<p>Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:</p>
+Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:
 
-<ol>
- <li>Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.</li>
- <li>В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.</li>
-</ol>
+1.  Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
+2.  В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!</p>
-</div>
+> **Примечание:** **Обратите внимание**: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!
 
-<h2 id="Активное_изучение_пример_веб-шрифта">Активное изучение: пример веб-шрифта</h2>
+## Активное изучение: пример веб-шрифта
 
-<p>Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса</p>
+Имея это в виду, давайте создадим базовый пример веб-шрифта из первых принципов. Сложно продемонстрировать это на встроенном живом примере, поэтому вместо, мы бы хотели, чтобы следовали детальным шагам в секциях ниже, чтобы понять идею процесса
 
-<p>Вы должны использовать файлы <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> как отправную точку добавляя в них ваш код (см. <a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">живой пример</a>). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле <code>web-font-start.css</code> вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.</p>
+Вы должны использовать файлы [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) и [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) как отправную точку добавляя в них ваш код (см. [живой пример](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html)). Сейчас сделайте копию этих файлов в новой директории на вашем компьютере. В файле `web-font-start.css` вы найдёте некоторый минимальный CSS для работы с базовым макетом и вёрсткой примера.
 
-<h3 id="Поиск_шрифтов">Поиск шрифтов</h3>
+### Поиск шрифтов
 
-<p>В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:</p>
+В этом примере мы будем использовать два веб-шрифта, один для заголовков, и другой для основного текста. Для того чтобы начать нам необходимо найти файлы шрифтов, которые содержат эти шрифты. Шрифты созданы шрифтовыми "цехами" и хранятся в разных форматах фалов. Как правило существует три типа сайтов, где вы можете получить шрифты:
 
-<ul>
- <li>Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a>, и <a href="https://everythingfonts.com/">Everything Fonts</a>.</li>
- <li>Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например <a href="http://www.fonts.com/">fonts.com</a> или <a href="http://www.myfonts.com/">myfonts.com</a>. Также вы можете купить шрифты напрямую у производителя шрифтов, например <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a>, или <a href="http://www.exljbris.com/">Exljbris</a>.</li>
- <li>Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел <a href="#использование_онлайн-сервиса_шрифтов">Использование онлайн-сервиса шрифтов</a> для более подробной информации.</li>
-</ul>
+- Бесплатный дистрибьютер шрифтов: это сайт, который предоставляет бесплатные шрифты для скачивания (могут существовать некоторые условия лицензии, например, указание создателя шрифта). Примеры включают [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/), и [Everything Fonts](https://everythingfonts.com/).
+- Платный дистрибьютер шрифтов: это сайт, который предоставляет шрифты за плату, например [fonts.com](http://www.fonts.com/) или [myfonts.com](http://www.myfonts.com/). Также вы можете купить шрифты напрямую у производителя шрифтов, например [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com), или [Exljbris](http://www.exljbris.com/).
+- Сервис онлайн шрифтов: это сайт, который предоставляет вам шрифты, делая весь процесс проще. Смотрите раздел [Использование онлайн-сервиса шрифтов](#использование_онлайн-сервиса_шрифтов) для более подробной информации.
 
-<p>Давайте найдём какие-нибудь шрифты! Отправляйтесь на <a href="https://www.fontsquirrel.com/">Font Squirrel</a> и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).</p>
+Давайте найдём какие-нибудь шрифты! Отправляйтесь на [Font Squirrel](https://www.fontsquirrel.com/) и выберите два шрифта — симпатичный интересный шрифт для заголовков (может быть симпатично выглядящий или шрифт с засечками) и немного менее кричащий и более читабельный шрифт для параграфов. Когда вы найдёте каждый шрифт, нажмите на кнопку загрузки и сохраните файлы в той же директории, где ранее вы сохранили файлы HTML и CSS. Не имеет значения являются ли они TTF (True Type Fonts) или OTF (Open Type Fonts).
 
-<p>В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.</p>
+В любом случае распакуйте архив со шрифтом (веб-шрифты обычно распространяются в ZIP файлах, содержащих файл(-ы) шрифта и лицензионную информацию). Вы можете обнаружить несколько файлов шрифтов в упаковке (архиве) — некоторые шрифты распространяются как семейство с различными доступными вариантами, например тонкий, средний, жирный, курсив, тонкий курсив и т.д. В этом примере мы просто хотим, чтобы вы позаботились о едином файле шрифта для каждого варианта.
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.</p>
-</div>
+> **Примечание:** **Обратите внимание**: В разделе "Find fonts" в колонке справа, вы можете кликать по различным тегам и классификациям чтобы отфильтровать отображаемые варианты для выбора.
 
-<h3 id="Генерация_требуемого_кода">Генерация требуемого кода</h3>
+### Генерация требуемого кода
 
-<p>Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.</p>
+Теперь вам надо будет сгенерировать требуемый код (и форматы шрифтов). Для каждого шрифта проделайте следующие шаги.
 
-<ol>
- <li>Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.</li>
- <li>Перейдите на Fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li>
- <li>Выгрузите два ваших файла шрифтов используя кнопку <em>Upload Fonts.</em></li>
- <li>Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".</li>
- <li>Кликните по <em>Download your kit</em>.</li>
-</ol>
+1.  Убедитесь, что вы выполнили все лицензионные требования если вы собираетесь использовать это в коммерческих и/или веб проектах.
+2.  Перейдите на Fontsquirrel [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
+3.  Выгрузите два ваших файла шрифтов используя кнопку _Upload Fonts._
+4.  Поставьте галочку отмеченную "Yes, the fonts I'm uploading are legally eligible for web embedding".
+5.  Кликните по _Download your kit_.
 
-<p>После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.</p>
+После того как генератор закончит обработку, вы должны получить ZIP файл к загрузке — сохраните его в той же директории что и ваши HTML и CSS.
 
-<h3 id="Реализация_кода_в_вашем_демо">Реализация кода в вашем демо</h3>
+### Реализация кода в вашем демо
 
-<p>Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:</p>
+Теперь распакуйте набор веб-шрифта, который вы только что сгенерировали. Внутри распакованной папки вы увидите три полезных элемента:
 
-<ul>
- <li>несколько версий каждого шрифта (например <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code> и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.</li>
- <li>Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.</li>
- <li>Файл <code>stylesheet.css</code>, который содержит сгенерированный @font-face код который вам нужен.</li>
-</ul>
+- несколько версий каждого шрифта (например `.ttf`, `.woff`, `.woff2` и т.д.; предоставленные шрифты будут обновляться со временем по мере изменения требований поддержки браузера). Как упомянуто выше, несколько шрифтов нужны для кросс-браузерной поддержки — это метод Fontsquirrel быть уверенными что вы получили всё что вам надо.
+- Демо файл HTML для каждого шрифта — загрузите их в ваш браузер чтобы посмотреть, как будет выглядеть шрифт в разных контекстах использования.
+- Файл `stylesheet.css`, который содержит сгенерированный @font-face код который вам нужен.
 
-<p>Для внедрения их в ваше демо следуйте следующим шагам:</p>
+Для внедрения их в ваше демо следуйте следующим шагам:
 
-<ol>
- <li>Переименуйте распакованную папку на что-нибудь лёгкое и простое, например <code>fonts</code>.</li>
- <li>Откройте файл <code>stylesheet.css</code> и скопируйте содержимое обоих <code>@font-face</code> блоков в ваш файл <code>web-font-start.css</code> — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.</li>
- <li>Каждый из функций <code>url()</code> указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте <code>fonts/</code> в начало каждого пути (настройте так как необходимо).</li>
- <li>Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:</li>
-</ol>
+1.  Переименуйте распакованную папку на что-нибудь лёгкое и простое, например `fonts`.
+2.  Откройте файл `stylesheet.css` и скопируйте содержимое обоих `@font-face` блоков в ваш файл `web-font-start.css` — вам надо вставить их в самый верх, до любого вашего CSS, так как шрифты должны быть импортированы до того, как вы сможете использовать их на вашем сайте.
+3.  Каждый из функций `url()` указывает на файл шрифта который мы хотим импортировать в наш CSS — мы должны убедиться в том, что пути к файлам верные, поэтому добавьте `fonts/` в начало каждого пути (настройте так как необходимо).
+4.  Теперь вы можете использовать эти шрифты в ваших стеках шрифтов, как и любой веб-безопасный или по умолчанию системный шрифт. Например:
 
-<pre class="brush: css">font-family: 'zantrokeregular', serif;</pre>
+```css
+font-family: 'zantrokeregular', serif;
+```
 
-<p>Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.</p>
+Вы должны получить демо-страницу с какими-то реализованными симпатичными шрифтами. Поскольку различные шрифты создаются в разных размерах, вам может понадобиться настроить размер, интервалы и т.д., чтобы отладить внешний вид.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![](https://mdn.mozillademos.org/files/12984/web-font-example.png)
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">run the finished example live</a>).</p>
-</div>
+> **Примечание:** **Обратите внимание**: Если у вас возникли какие-либо проблемы с тем что что-то не работает, смело сравнивайте файлы вашей версии с нашей законченной — см. [web-font-finished.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html) и [web-font-finished.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css) ([run the finished example live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html)).
 
-<h2 id="Использование_онлайн-сервиса_шрифтов">Использование онлайн-сервиса шрифтов</h2>
+## Использование онлайн-сервиса шрифтов
 
-<p>Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании <code>@font-face</code> кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают <a href="https://fonts.adobe.com/">Adobe Fonts</a> и <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. Большинство из этих услуг на основе подписки, за исключением <a href="https://www.google.com/fonts">Google Fonts</a>, полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.</p>
+Онлайн-сервисы шрифтов обычно хранят и обслуживают шрифты для вас, поэтому вам не надо переживать о написании `@font-face` кода и обычно необходимо просто вставить строчку или две простого кода в ваш сайт для того чтобы все работало. Примеры включают [Adobe Fonts](https://fonts.adobe.com/) и [Cloud.typography](http://www.typography.com/cloud/welcome/). Большинство из этих услуг на основе подписки, за исключением [Google Fonts](https://www.google.com/fonts), полезный бесплатный сервис, особенно для быстрого тестирования работы и написания демо.
 
-<p>Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии <code>web-font-start.html</code> и <code>web-font-start.css</code> в качестве отправной точки.</p>
+Большинство из этих сервисов легки в использовании, поэтому мы не будем освещать их в деталях. Давайте кратко рассмотрим Google fonts, чтобы вы понимали идею. И снова, используйте копии `web-font-start.html` и `web-font-start.css` в качестве отправной точки.
 
-<ol>
- <li>Отправляйтесь на <a href="https://www.google.com/fonts">Google Fonts</a>.</li>
- <li>Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.</li>
- <li>Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.</li>
- <li>Когда вы выбрали семейства шрифтов, нажмите на панель <em>[Number] Families Selected</em> в низу страницы.</li>
- <li>На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.</li>
- <li>Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.</li>
-</ol>
+1.  Отправляйтесь на [Google Fonts](https://www.google.com/fonts).
+2.  Используйте фильтры с правой стороны чтобы отобразить типы шрифтов, которые вы хотите выбрать и выберите пару шрифтов, которые вам понравятся.
+3.  Для выбора семейства шрифтов нажмите на кнопку ⊕ рядом с ним.
+4.  Когда вы выбрали семейства шрифтов, нажмите на панель _\[Number] Families Selected_ в низу страницы.
+5.  На полученном экране, сначала вам надо скопировать строку показанного HTML кода и вставить её в head вашего HTML файла. Вставьте его выше существующего {{htmlelement("link")}} элемента для того, чтоб шрифт импортировался до того, как вы начнёте пользоваться им в вашем CSS.
+6.  Далее вам надо скопировать CSS-объявления, перечисленные в вашем CSS, чтобы применить пользовательские шрифты к вашему HTML.
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: вы можете найти законченные версии <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, если вам необходимо сверить вашу работу с нашей (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">см. live</a>).</p>
-</div>
+> **Примечание:** **Обратите внимание**: вы можете найти законченные версии [google-font.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html) и [google-font.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css), если вам необходимо сверить вашу работу с нашей ([см. live](http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html)).
 
-<h2 id="font-face_более_детально">@font-face более детально</h2>
+## @font-face более детально
 
-<p>Давайте исследуем тот <code>@font-face</code> синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:</p>
+Давайте исследуем тот `@font-face` синтаксис, который fontsquirrel сгенерировал для вас. Это то, как выглядит один из этих блоков:
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
   font-family: 'ciclefina';
   src: url('fonts/cicle_fina-webfont.eot');
   src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
@@ -165,40 +141,35 @@ original_slug: Learn/CSS/Styling_text/Веб_шрифты
          url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
   font-weight: normal;
   font-style: normal;
-}</pre>
+}
+```
 
-<p>Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда <code>@font-face</code> начал получать популярность (<a href="https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:</p>
+Это называется "пуленепробиваемым @font-face синтаксисом", после публикации Пола Айриша (Paul Irish), с самого начала, когда `@font-face` начал получать популярность ([Bulletproof @font-face Syntax](https://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Давайте пройдёмся по нему, чтобы посмотреть, что он делает:
 
-<ul>
- <li><code>font-family</code>: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.</li>
- <li><code>src</code>: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (<code>url</code> путь) и формат каждого файла шрифта (<code>format</code> часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.</li>
- <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым</a> от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.</li>
-</ul>
+- `font-family`: В этой строке указывается имя, которое вы хотите использовать для обозначения шрифта. Вы можете указать его как угодно, если вы используете его последовательно в вашем CSS.
+- `src`: В этой строке указывается путь к файлам шрифтов которые будут импортированы в ваш CSS (`url` путь) и формат каждого файла шрифта (`format` часть). Последняя часть в каждом случае опциональна, но полезно объявлять его, потому что это позволяет браузерам быстрее находить шрифт, который они могут использовать. Могут быть перечислены несколько объявлений, разделённых запятыми — браузер будет искать среди них и использовать первый который найдёт и тот который он понимает — поэтому лучше всего ставить новые, лучшие форматы такие как WOFF2 в начало, а старые, не такие хорошие форматы как TTF в конец. Единственное исключение это EOT шрифты — они размещены первыми чтобы исправить пару багов в старых версиях IE который постарается использовать первую вещь, которую найдёт, даже если он не умеет использовать этот шрифт.
+- {{cssxref("font-weight")}}/{{cssxref("font-style")}}: В этих строках указывается какую толщину имеет шрифт и является ли он курсивом или нет. Если вы импортируете несколько значений толщины одного и того же шрифта вы можете указать какая у них толщина/стиль и затем использовать разные значения {{cssxref("font-weight")}}/{{cssxref("font-style")}} для выбора между ними, вместо того, чтобы называть всех разных членов семейства шрифтов разными именами. [@font-face совет: установите font-weight и font-style так чтобы ваш CSS был простым](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) от Роджера Джонсона (Roger Johansson) покажет, что делать более детально.
 
-<div class="note">
-<p><strong>Обратите внимание</strong>: вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a> от Drew McLellan предоставляет некоторые полезные идеи того как это использовать</p>
-</div>
+> **Примечание:** **Обратите внимание**: вы также можете указать определённые значения {{cssxref("font-variant")}} и {{cssxref("font-stretch")}} для ваших веб-шрифтов. В новых браузерах вы также можете указать значение {{cssxref("unicode-range")}}, который является конкретным диапазоном символов, которые вы хотите использовать из веб-шрифта — в поддерживающих браузерах, будут загружены только указанные символы, сохраняя от ненужной загрузки. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) от Drew McLellan предоставляет некоторые полезные идеи того как это использовать
 
-<h2 id="Переменные_шрифты">Переменные шрифты</h2>
+## Переменные шрифты
 
-<p>В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Руководство по переменным шрифтам</a>.</p>
+В браузерах доступна новая технология, называемая переменными шрифтами — это шрифты, которые позволяют включить в единственный файл много разных вариантов дизайнов шрифтов, вместо того чтобы иметь отдельные файлы шрифтов для каждой ширины, толщины или стиля. Они несколько продвинуты для нашего курса для начинающих, но если вы хотите расширить свои знания и посмотреть на них, прочитайте наше [Руководство по переменным шрифтам](/ru/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide).
 
-<h2 id="Испытайте_свои_навыки!">Испытайте свои навыки!</h2>
+## Испытайте свои навыки!
 
-<p>Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. <a href="/en-US/docs/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: стилизация школьного сайта</a>.</p>
+Вы достигли конца этой статьи и уже испытали некоторые навыки в наших разделах активного изучения, но сможете ли вы вспомнить самую важную информацию продвигаясь дальше? Вы можете найти задание для проверки того что вы усвоили информацию к конце модуля — см. [Задание: стилизация школьного сайта](/ru/docs/Learn/CSS/Styling_text/Typesetting_a_homepage).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».</p>
+Теперь, когда вы ознакомились с нашими статьями об основах стилизации текста, пришло время проверить ваше понимание нашей оценкой модуля «Задание: стилизация школьного сайта».
 
-<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p>
+{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Фундаментальная стилизация текста и шрифта</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Стилизация списков</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Стилизация ссылок</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Веб-шрифты</a></li>
- <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Задание: Стилизация школьного сайта</a></li>
-</ul>
+- [Фундаментальная стилизация текста и шрифта](/ru/docs/Learn/CSS/Styling_text/Fundamentals)
+- [Стилизация списков](/ru/docs/Learn/CSS/Styling_text/Styling_lists)
+- [Стилизация ссылок](/ru/docs/Learn/CSS/Styling_text/Styling_links)
+- [Веб-шрифты](/ru/docs/Learn/CSS/Styling_text/Web_fonts)
+- [Задание: Стилизация школьного сайта](/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage)
diff --git a/files/ru/learn/forms/basic_native_form_controls/index.md b/files/ru/learn/forms/basic_native_form_controls/index.md
index c9fb46b2800a21..cbe8041e7825f8 100644
--- a/files/ru/learn/forms/basic_native_form_controls/index.md
+++ b/files/ru/learn/forms/basic_native_form_controls/index.md
@@ -4,688 +4,634 @@ slug: Learn/Forms/Basic_native_form_controls
 translation_of: Learn/Forms/Basic_native_form_controls
 original_slug: Learn/HTML/Forms/Стандартные_виджеты_форм
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
-
-<p class="summary">Сейчас мы детально изучим возможности различных виджетов форм, посмотрим, какие функции доступны для получения информации в различных представлениях. Это исчерпывающая статья, описывающая все доступные стандартные виджеты форм.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Базовая компьютерная грамотность, базовое <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, какие типы стандартных виджетов форм доступны в браузерах для сбора информации, как внедрять их, используя HTML.</td>
-  </tr>
- </tbody>
-</table>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
 
-<p>Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаются несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм - прочтите статью <a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">Как создать собственную форму</a> позже в данном модуле для более подробного изучения.</p>
+Сейчас мы детально изучим возможности различных виджетов форм, посмотрим, какие функции доступны для получения информации в различных представлениях. Это исчерпывающая статья, описывающая все доступные стандартные виджеты форм.
 
-<div class="note">
-<p><strong>Note</strong>: Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к <a href="/en-US/docs/Web/HTML/Element#forms">HTML forms element reference, </a>и в частости к нашей обширной ссылке <a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt; types.</a></p>
-</div>
+| Требования: | Базовая компьютерная грамотность, базовое [понимание HTML](/ru/docs/Learn/HTML/Introduction_to_HTML).                    |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------ |
+| Цель:       | Понять, какие типы стандартных виджетов форм доступны в браузерах для сбора информации, как внедрять их, используя HTML. |
 
-<h2 id="Стандартные_атрибуты">Стандартные атрибуты</h2>
+Сейчас мы сосредоточимся на виджетах форм, встроенных в браузеры, но поскольку формы HTML остаются несколько ограниченными и особенности их реализации различаются для разных браузеров, веб-разработчики иногда создают собственные виджеты форм - прочтите статью [Как создать собственную форму](/ru/docs/Learn/Forms/How_to_build_custom_form_controls "/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets") позже в данном модуле для более подробного изучения.
 
-<p>Многие элементы, используемые для определения виджетов форм, имеют собственные атрибуты. Однако, существует набор атрибутов, общих для всех элементов формы, которые предоставляют вам контроль над их виджетами. Вот список этих общих атрибутов:</p>
+> **Примечание:** Большая часть признаков обсуждаемых в этой статье имеют широкую поддержку в браузерах; мы отметим исключения из этого правила. Если вы хотите больше точных сведений, вам следует обратиться к [HTML forms element reference, ](/ru/docs/Web/HTML/Element#forms)и в частости к нашей обширной ссылке [\<input> types.](/ru/docs/Web/HTML/Element/input)
 
-<table>
- <thead>
-  <tr>
-   <th scope="col">Attribute name</th>
-   <th scope="col">Default value</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>autofocus</code></td>
-   <td>(<em>false</em>)</td>
-   <td>Этот атрибут логического типа позволяет вам определить, должен ли элемент автоматически попадать в фокус при загрузке страницы, пока пользователь не изменит это, например, печатая в другом виджете. Этот атрибут может явно определяться только для одного элемента в документе, ассоциированного с формой.</td>
-  </tr>
-  <tr>
-   <td><code>disabled</code></td>
-   <td>(<em>false</em>)</td>
-   <td>Этот атрибут логического типа определяет, может ли пользователь взаимодействовать с элементом. Если этот атрибут не определён, то элемент наследует его значение от элемента-родителя. Если атрибут не определён, то по умолчанию пользователь может взаимодействовать с элементом.</td>
-  </tr>
-  <tr>
-   <td><code>form</code></td>
-   <td></td>
-   <td>Элемент формы, с которым ассоциирован виджет. Значением данного атрибута должен быть атрибут <code>id</code> элемента {{HTMLElement("form")}}  в том же документе. Теоретически, это позволяет вам помещать определение виджета за рамками элемента {{HTMLElement("form")}}. На практике, однако, не существует браузеров, поддерживающих данную функцию.</td>
-  </tr>
-  <tr>
-   <td><code>name</code></td>
-   <td></td>
-   <td>Название элемента; передаётся вместе с данными формы.</td>
-  </tr>
-  <tr>
-   <td><code>value</code></td>
-   <td></td>
-   <td>Начальное значение элемента.</td>
-  </tr>
- </tbody>
-</table>
+## Стандартные атрибуты
 
-<h2 id="Поля_ввода_текста">Поля ввода текста</h2>
+Многие элементы, используемые для определения виджетов форм, имеют собственные атрибуты. Однако, существует набор атрибутов, общих для всех элементов формы, которые предоставляют вам контроль над их виджетами. Вот список этих общих атрибутов:
 
-<p>Текстовые поля {{htmlelement("input")}}  являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели несколько простых примеров.</p>
+| Attribute name | Default value | Description                                                                                                                                                                                                                                                                                                                                                     |
+| -------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `autofocus`    | (_false_)     | Этот атрибут логического типа позволяет вам определить, должен ли элемент автоматически попадать в фокус при загрузке страницы, пока пользователь не изменит это, например, печатая в другом виджете. Этот атрибут может явно определяться только для одного элемента в документе, ассоциированного с формой.                                                   |
+| `disabled`     | (_false_)     | Этот атрибут логического типа определяет, может ли пользователь взаимодействовать с элементом. Если этот атрибут не определён, то элемент наследует его значение от элемента-родителя. Если атрибут не определён, то по умолчанию пользователь может взаимодействовать с элементом.                                                                             |
+| `form`         |               | Элемент формы, с которым ассоциирован виджет. Значением данного атрибута должен быть атрибут `id` элемента {{HTMLElement("form")}} в том же документе. Теоретически, это позволяет вам помещать определение виджета за рамками элемента {{HTMLElement("form")}}. На практике, однако, не существует браузеров, поддерживающих данную функцию. |
+| `name`         |               | Название элемента; передаётся вместе с данными формы.                                                                                                                                                                                                                                                                                                           |
+| `value`        |               | Начальное значение элемента.                                                                                                                                                                                                                                                                                                                                    |
 
-<div class="note">
-<p><strong>Note</strong>: HTML form text fields are simple plain text input controls. This means that you cannot use them to perform <a href="/en-US/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla" title="/en-US/docs/Rich-Text_Editing_in_Mozilla">rich editing</a> (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.</p>
-</div>
+## Поля ввода текста
 
-<p>Все текстовые поля имеют общие атрибуты:</p>
+Текстовые поля {{htmlelement("input")}} являются самыми базовыми виджетами форм. Эти поля наиболее удобны для пользовательского ввода различной информации. Однако, некоторые текстовые поля отличаются от данного и используются для специфических нужд. Мы уже видели несколько простых примеров.
 
-<ul>
- <li>Они могут быть помечены как {{htmlattrxref("readonly","input")}} (пользователь не может изменять начальное значение) или даже {{htmlattrxref("disabled","input")}} начальное значение никогда не посылается вместе с остальными данными формами).</li>
- <li>Они могут иметь атрибут {{htmlattrxref("placeholder","input")}}; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.</li>
- <li>Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и <a href="/en-US/docs/Web/HTML/Element/input#attr-maxlength" title="/en-US/docs/HTML/Element/input#attr-maxlength">длину</a> (максимальное количество символов, которые может ввести пользователь).</li>
- <li>Они могут быть определены с помощью <a href="/en-US/docs/Web/HTML/Element/input#attr-spellcheck" title="/en-US/docs/HTML/Element/input#attr-spellcheck">spell checking</a>, если браузер поддерживает данную функцию.</li>
-</ul>
+> **Примечание:** HTML form text fields are simple plain text input controls. This means that you cannot use them to perform [rich editing](/ru/docs/Web/Guide/HTML/Editable_content/Rich-Text_Editing_in_Mozilla "/en-US/docs/Rich-Text_Editing_in_Mozilla") (bold, italic, etc.). All rich text editors you'll encounter out there are custom widgets created with HTML, CSS, and JavaScript.
 
-<div class="note">
-<p><strong>Note</strong>: The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its <code>type</code> attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.</p>
-</div>
+Все текстовые поля имеют общие атрибуты:
 
-<h3 id="Однострочные_текстовые_поля">Однострочные текстовые поля</h3>
+- Они могут быть помечены как {{htmlattrxref("readonly","input")}} (пользователь не может изменять начальное значение) или даже {{htmlattrxref("disabled","input")}} начальное значение никогда не посылается вместе с остальными данными формами).
+- Они могут иметь атрибут {{htmlattrxref("placeholder","input")}}; это текст, который появляется внутри теста поля формы и кратко описывает, для чего используется данная форма.
+- Существуют общие характеристики {{htmlattrxref("size","input")}} (физический размер поля) и [длину](/ru/docs/Web/HTML/Element/input#attr-maxlength "/en-US/docs/HTML/Element/input#attr-maxlength") (максимальное количество символов, которые может ввести пользователь).
+- Они могут быть определены с помощью [spell checking](/ru/docs/Web/HTML/Element/input#attr-spellcheck "/en-US/docs/HTML/Element/input#attr-spellcheck"), если браузер поддерживает данную функцию.
 
-<p>Однострочные текстовые поля создаются с использованием элемента {{HTMLElement("input")}}  чей атрибут {{htmlattrxref("type","input")}} имеет значение <code>text</code> (если вы не поставите другое значение атрибута {{htmlattrxref("type","input")}}, <code>text</code> является значением по умолчанию). Значение <code>text</code> для этого атрибута является возвратным, если значение которое вы определили для {{htmlattrxref("type","input")}} неизвестно браузеру (например, если вы определили <code>type="date"</code> а браузер не поддерживает выбор даты).</p>
+> **Примечание:** The {{htmlelement("input")}} element is special because it can be almost anything. By simply setting its `type` attribute, it can change radically, and it is used for creating most types of form widget including single line text fields, controls without text input, time and date controls, and buttons. However, there are some exceptions, like {{htmlelement("textarea")}} for multi-line inputs. Take careful note of these as you read the article.
 
-<div class="note">
-<p><strong>Note</strong>: вы можете найти примеры всех типов однострочных текстовых полей на GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html">single-line-text-fields.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html">see it live also</a>).</p>
-</div>
+### Однострочные текстовые поля
 
-<p>Пример базового одностраничного текстового поля:</p>
+Однострочные текстовые поля создаются с использованием элемента {{HTMLElement("input")}} чей атрибут {{htmlattrxref("type","input")}} имеет значение `text` (если вы не поставите другое значение атрибута {{htmlattrxref("type","input")}}, `text` является значением по умолчанию). Значение `text` для этого атрибута является возвратным, если значение которое вы определили для {{htmlattrxref("type","input")}} неизвестно браузеру (например, если вы определили `type="date"` а браузер не поддерживает выбор даты).
 
-<pre class="brush: html">&lt;input type="text" id="comment" name="comment" value="I'm a text field"&gt;</pre>
+> **Примечание:** вы можете найти примеры всех типов однострочных текстовых полей на GitHub at [single-line-text-fields.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/single-line-text-fields.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/single-line-text-fields.html)).
 
-<p>Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.</p>
+Пример базового одностраничного текстового поля:
 
-<p><img alt="Screenshots of single line text fields on several platforms." src="all-single-line-text-field.png"></p>
+```html
+<input type="text" id="comment" name="comment" value="I'm a text field">
+```
 
-<p>HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.</p>
+Однострочное текстовое поле имеет только одно настоящее ограничение: если вы вводите текст с разрывами строки, браузер удаляет эти разрывы строк перед отправкой данных.
 
-<h4 id="E-mail_address_field">E-mail address field</h4>
+![Screenshots of single line text fields on several platforms.](all-single-line-text-field.png)
 
-<p>Этот тип поля устанавливается со значением <code>email</code> для атрибута {{htmlattrxref("type","input")}}:</p>
+HTML5 enhances the basic single line text field by adding special values for the {{htmlattrxref("type","input")}} attribute. Those values still turn an {{HTMLElement("input")}} element into a single line text field but they add a few extra constraints and features to the field.
 
-<pre class="brush: html">&lt;input type="email" id="email" name="email" multiple&gt;</pre>
+#### E-mail address field
 
-<p>Когда используется этот <code>type</code>, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:</p>
+Этот тип поля устанавливается со значением `email` для атрибута {{htmlattrxref("type","input")}}:
 
-<p><img alt="An invalid email input showing the message Please enter an email address." src="email-invalid.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+```html
+<input type="email" id="email" name="email" multiple>
+```
 
-<p>It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.</p>
+Когда используется этот `type`, пользователь должен ввести в поле валидный адрес электронной почты; любое другое содержание будет отображено браузером при отправке формы как ошибка. Заметьте, что это проверка ошибок на стороне клиента, выполняемая браузером:
 
-<p>On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.</p>
+![An invalid email input showing the message Please enter an email address.](email-invalid.png)
 
-<div class="note">
-<p><strong>Note</strong>: You can find out more about form validation in the article <a href="/en-US/docs/Learn/Forms/Form_validation">Form data validation</a>.</p>
-</div>
+It's also possible to let the user type several e-mail addresses into the same input (separated by commas) by including the {{htmlattrxref("multiple","input")}} attribute.
 
-<h4 id="Password_field">Password field</h4>
+On some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering email addresses.
 
-<p>This type of field is set using the value <code>password</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+> **Примечание:** You can find out more about form validation in the article [Form data validation](/ru/docs/Learn/Forms/Form_validation).
 
-<pre class="brush: html">&lt;input type="password" id="pwd" name="pwd"&gt;</pre>
+#### Password field
 
-<p>It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.</p>
+This type of field is set using the value `password` for the {{htmlattrxref("type","input")}} attribute:
 
-<p>Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https:// ... address), so the data is encrypted before it is sent.</p>
+```html
+<input type="password" id="pwd" name="pwd">
+```
 
-<p>Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see <a href="/en-US/docs/Web/Security/Insecure_passwords">Insecure passwords</a>.</p>
+It doesn't add any special constraints to the entered text, but it does obscure the value entered into the field (e.g. with dots or asterisks) so it can't be read by others.
 
-<h4 id="Search_field">Search field</h4>
+Keep in mind this is just a user interface feature; unless you submit your form securely, it will get sent in plain text, which is bad for security — a malicious party could intercept your data and steal passwords, credit card details, or whatever else you've submitted. The best way to protect users from this is to host any pages involving forms over a secure connection (i.e. at an https\:// ... address), so the data is encrypted before it is sent.
 
-<p>This type of field is set by using the value <code>search</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+Modern browsers recognize the security implications of sending form data over an insecure connection, and have implemented warnings to deter users from using insecure forms. For more information on what Firefox implements, see [Insecure passwords](/ru/docs/Web/Security/Insecure_passwords).
 
-<pre class="brush: html">&lt;input type="search" id="search" name="search"&gt;</pre>
+#### Search field
 
-<p>The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.</p>
+This type of field is set by using the value `search` for the {{htmlattrxref("type","input")}} attribute:
 
-<p><img alt="Screenshots of search fields on several platforms." src="all-search-field.png"></p>
+```html
+<input type="search" id="search" name="search">
+```
 
-<h4 id="Phone_number_field">Phone number field</h4>
+The main difference between a text field and a search field is how the browser styles it — often, search fields are rendered with rounded corners, and/or given an "x" to press to clear the entered value. However, there is another added feature worth noting: their values can be automatically saved to be auto completed across multiple pages on the same site.
 
-<p>This type of field is set using <code>tel</code> as the value of the {{htmlattrxref("type","input")}} attribute:</p>
+![Screenshots of search fields on several platforms.](all-search-field.png)
 
-<pre class="brush: html">&lt;input type="tel" id="tel" name="tel"&gt;</pre>
+#### Phone number field
 
-<p>Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.</p>
+This type of field is set using `tel` as the value of the {{htmlattrxref("type","input")}} attribute:
 
-<h4 id="URL_field">URL field</h4>
+```html
+<input type="tel" id="tel" name="tel">
+```
 
-<p>This type of field is set using the value <code>url</code> for the {{htmlattrxref("type","input")}} attribute:</p>
+Due to the wide variety of phone number formats around the world, this type of field does not enforce any constraints on the value entered by a user (this can include letters, etc.). This is primarily a semantic difference, although on some devices (especially on mobile), a different virtual keypad might be presented that is more suitable for entering phone numbers.
 
-<pre class="brush: html">&lt;input type="url" id="url" name="url"&gt;</pre>
+#### URL field
 
-<p>It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.</p>
+This type of field is set using the value `url` for the {{htmlattrxref("type","input")}} attribute:
 
-<div class="note"><strong>Note:</strong> Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.</div>
+```html
+<input type="url" id="url" name="url">
+```
 
-<div class="note">
-<p><strong>Note</strong>: Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: <a href="/en-US/docs/Learn/Forms/Form_validation" title="/en-US/docs/HTML/Forms/Data_form_validation">Data form validation</a>.</p>
-</div>
+It adds special validation constraints to the field, with the browser reporting an error if invalid URLs are entered.
 
-<h3 id="Multi-line_text_fields">Multi-line text fields</h3>
+> **Примечание:** Just because the URL is well-formed doesn't necessarily mean that it refers to a location that actually exists.
 
-<p>A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.</p>
+> **Примечание:** Fields that have special constraints and are in error prevent the form from being sent; in addition, they can be styled so as to make the error clear. We will discuss this in detail in the article: [Data form validation](/ru/docs/Learn/Forms/Form_validation "/en-US/docs/HTML/Forms/Data_form_validation").
 
-<pre class="brush: html">&lt;textarea cols="30" rows="10"&gt;&lt;/textarea&gt;</pre>
+### Multi-line text fields
 
-<p>The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).</p>
+A multi-line text field is specified using a {{HTMLElement("textarea")}} element, rather than using the {{HTMLElement("input")}} element.
 
-<p><img alt="Screenshots of multi-lines text fields on several platforms." src="all-multi-lines-text-field.png"></p>
+```html
+<textarea cols="30" rows="10"></textarea>
+```
 
-<div class="note">
-<p><strong>Note</strong>: You can find an example of a multi-line text field on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html">multi-line-text-field.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html">see it live also</a>). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to <code>none</code> using <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
-</div>
+The main difference between a textarea and a regular single line text field is that users are allowed to type text that includes hard line breaks (i.e. pressing return).
 
-<p>{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):</p>
+![Screenshots of multi-lines text fields on several platforms.](all-multi-lines-text-field.png)
 
-<table>
- <caption>Attributes for the {{HTMLElement("textarea")}} element</caption>
- <thead>
-  <tr>
-   <th scope="col">Attribute name</th>
-   <th scope="col">Default value</th>
-   <th scope="col">Description</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{htmlattrxref("cols","textarea")}}</td>
-   <td><code>20</code></td>
-   <td>The visible width of the text control, in average character widths.</td>
-  </tr>
-  <tr>
-   <td>{{htmlattrxref("rows","textarea")}}</td>
-   <td></td>
-   <td>The number of visible text lines for the control.</td>
-  </tr>
-  <tr>
-   <td>{{htmlattrxref("wrap","textarea")}}</td>
-   <td><code>soft</code></td>
-   <td>Indicates how the control wraps text. Possible values are: <code>hard</code> or <code>soft</code></td>
-  </tr>
- </tbody>
-</table>
+> **Примечание:** You can find an example of a multi-line text field on GitHub at [multi-line-text-field.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/multi-line-text-field.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/multi-line-text-field.html)). Have a look at it, and notice how in most browsers, the text area is given a drag handle on the bottom right to allow the user to resize it. This resizing ability can be turned off by setting the text area's {{cssxref("resize")}} property to `none` using [CSS](/ru/docs/Learn/CSS).
 
-<p>Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.</p>
+{{htmlelement("textarea")}} also accepts a few extra attributes to control its rendering across several lines (in addition to several others):
 
-<p>There are two key related points to note here:</p>
+| Attribute name                                   | Default value | Description                                                                 |
+| ------------------------------------------------ | ------------- | --------------------------------------------------------------------------- |
+| {{htmlattrxref("cols","textarea")}} | `20`          | The visible width of the text control, in average character widths.         |
+| {{htmlattrxref("rows","textarea")}} |               | The number of visible text lines for the control.                           |
+| {{htmlattrxref("wrap","textarea")}} | `soft`        | Indicates how the control wraps text. Possible values are: `hard` or `soft` |
 
-<ul>
- <li>If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the <code>value</code> attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.</li>
- <li>Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.</li>
-</ul>
+Note that the {{HTMLElement("textarea")}} element is written a bit differently from the {{HTMLElement("input")}} element. The {{HTMLElement("input")}} element is an empty element, which means that it cannot contain any child elements. On the other hand, the {{HTMLElement("textarea")}} element is a regular element that can contain text content children.
 
-<h2 id="Drop-down_content">Drop-down content</h2>
+There are two key related points to note here:
 
-<p>Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the <strong>select box</strong>, and <strong>autocomplete box</strong>. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.</p>
+- If you want to define a default value for an {{HTMLElement("input")}} element, you have to use the `value` attribute; for a {{HTMLElement("textarea")}} element on the other hand you put the default text between the starting tag and the closing tag of the {{HTMLElement("textarea")}}.
+- Because of its nature, the {{HTMLElement("textarea")}} element only accepts text content; this means that any HTML content put inside a {{HTMLElement("textarea")}} is rendered as if it was plain text content.
 
-<div class="note">
-<p>Note: You can find examples of all the drop-down box types on GitHub at <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html">drop-down-content.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html">see it live also</a>).</p>
-</div>
+## Drop-down content
 
-<h3 id="Select_box">Select box</h3>
+Drop-down widgets are a simple way to let users select one of many options without taking up much space in the user interface. HTML has two forms of drop down content: the **select box**, and **autocomplete box**. In both cases the interaction is the same — once the control is activated, the browser displays a list of values the user can select between.
 
-<p>A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.</p>
+> **Примечание:** Note: You can find examples of all the drop-down box types on GitHub at [drop-down-content.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/drop-down-content.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/drop-down-content.html)).
 
-<pre class="brush: html">&lt;select id="simple" name="simple"&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Cherry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-&lt;/select&gt;</pre>
+### Select box
 
-<p>If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:</p>
+A select box is created with a {{HTMLElement("select")}} element with one or more {{HTMLElement("option")}} elements as its children, each of which specifies one of its possible values.
 
-<pre class="brush: html">&lt;select id="groups" name="groups"&gt;
-  &lt;optgroup label="fruits"&gt;
-    &lt;option&gt;Banana&lt;/option&gt;
-    &lt;option selected&gt;Cherry&lt;/option&gt;
-    &lt;option&gt;Lemon&lt;/option&gt;
-  &lt;/optgroup&gt;
-  &lt;optgroup label="vegetables"&gt;
-    &lt;option&gt;Carrot&lt;/option&gt;
-    &lt;option&gt;Eggplant&lt;/option&gt;
-    &lt;option&gt;Potato&lt;/option&gt;
-  &lt;/optgroup&gt;
-&lt;/select&gt;</pre>
+```html
+<select id="simple" name="simple">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+```
 
-<p><img alt="Screenshots of single line select box on several platforms." src="all-select.png"></p>
+If required, the default value for the select box can be set using the {{htmlattrxref("selected","option")}} attribute on the desired {{HTMLElement("option")}} element — this option is then preselected when the page loads. The {{HTMLElement("option")}} elements can also be nested inside {{HTMLElement("optgroup")}} elements to create visually associated groups of values:
 
-<p>If an {{HTMLElement("option")}} element is set with a <code>value</code> attribute, that attribute's value is sent when the form is submitted. If the <code>value</code> attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.</p>
+```html
+<select id="groups" name="groups">
+  <optgroup label="fruits">
+    <option>Banana</option>
+    <option selected>Cherry</option>
+    <option>Lemon</option>
+  </optgroup>
+  <optgroup label="vegetables">
+    <option>Carrot</option>
+    <option>Eggplant</option>
+    <option>Potato</option>
+  </optgroup>
+</select>
+```
 
-<p>On the {{HTMLElement("optgroup")}} element, the <code>label</code> attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.</p>
+![Screenshots of single line select box on several platforms.](all-select.png)
 
-<h3 id="Multiple_choice_select_box">Multiple choice select box</h3>
+If an {{HTMLElement("option")}} element is set with a `value` attribute, that attribute's value is sent when the form is submitted. If the `value` attribute is omitted, the content of the {{HTMLElement("option")}} element is used as the select box's value.
 
-<p>By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).</p>
+On the {{HTMLElement("optgroup")}} element, the `label` attribute is displayed before the values, but even if it looks somewhat like an option, it is not selectable.
 
-<p>Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.</p>
+### Multiple choice select box
 
-<pre class="brush: html">&lt;select multiple id="multi" name="multi"&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Cherry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-&lt;/select&gt;</pre>
+By default, a select box only lets the user select a single value. By adding the {{htmlattrxref("multiple","select")}} attribute to the {{HTMLElement("select")}} element, you can allow users to select several values, by using the default mechanism provided by the operating system (e.g. holding down <kbd>Cmd</kbd>/<kbd>Ctrl</kbd> and clicking multiple values).
 
-<p><img alt="Screenshots of multi-lines select box on several platforms." src="all-multi-lines-select.png"></p>
+Note: In the case of multiple choice select boxes, the select box no longer displays the values as drop-down content — instead, they are all displayed at once in a list.
 
-<div class="note"><strong>Note:</strong> All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.</div>
+```html
+<select multiple id="multi" name="multi">
+  <option>Banana</option>
+  <option>Cherry</option>
+  <option>Lemon</option>
+</select>
+```
 
-<h3 id="Autocomplete_box">Autocomplete box</h3>
+![Screenshots of multi-lines select box on several platforms.](all-multi-lines-select.png)
 
-<p>You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.</p>
+> **Примечание:** All browsers that support the {{HTMLElement("select")}} element also support the {{htmlattrxref("multiple","select")}} attribute on it.
 
-<p>The data list is then bound to a text field (usually an <code>&lt;input&gt;</code> element) using the {{htmlattrxref("list","input")}} attribute.</p>
+### Autocomplete box
 
-<p>Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.</p>
+You can provide suggested, automatically-completed values for form widgets using the {{HTMLElement("datalist")}} element with some child {{HTMLElement("option")}} elements to specify the values to display.
 
-<pre class="brush: html">&lt;label for="myFruit"&gt;What's your favorite fruit?&lt;/label&gt;
-&lt;input type="text" name="myFruit" id="myFruit" list="mySuggestion"&gt;
-&lt;datalist id="mySuggestion"&gt;
-  &lt;option&gt;Apple&lt;/option&gt;
-  &lt;option&gt;Banana&lt;/option&gt;
-  &lt;option&gt;Blackberry&lt;/option&gt;
-  &lt;option&gt;Blueberry&lt;/option&gt;
-  &lt;option&gt;Lemon&lt;/option&gt;
-  &lt;option&gt;Lychee&lt;/option&gt;
-  &lt;option&gt;Peach&lt;/option&gt;
-  &lt;option&gt;Pear&lt;/option&gt;
-&lt;/datalist&gt;</pre>
+The data list is then bound to a text field (usually an `<input>` element) using the {{htmlattrxref("list","input")}} attribute.
 
-<div class="note"><strong>Note:</strong> According to <a href="https://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list" rel="external">the HTML specification</a>, the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.</div>
+Once a data list is affiliated with a form widget, its options are used to auto-complete text entered by the user; typically, this is presented to the user as a drop-down box listing possible matches for what they've typed into the input.
 
-<div><img alt="Screenshots of datalist on several platforms." src="all-datalist.png"></div>
+```html
+<label for="myFruit">What's your favorite fruit?</label>
+<input type="text" name="myFruit" id="myFruit" list="mySuggestion">
+<datalist id="mySuggestion">
+  <option>Apple</option>
+  <option>Banana</option>
+  <option>Blackberry</option>
+  <option>Blueberry</option>
+  <option>Lemon</option>
+  <option>Lychee</option>
+  <option>Peach</option>
+  <option>Pear</option>
+</datalist>
+```
 
+> **Примечание:** According to [the HTML specification](https://www.w3.org/TR/html5/common-input-element-attributes.html#attr-input-list), the {{htmlattrxref("list","input")}} attribute and the {{HTMLElement("datalist")}} element can be used with any kind of widget requiring a user input. However, it is unclear how it should work with controls other than text (color or date for example), and different browsers behave differently from case to case. Because of that, be cautious using this feature with anything but text fields.
 
+![Screenshots of datalist on several platforms.](all-datalist.png)
 
-<h4 id="Datalist_support_and_fallbacks">Datalist support and fallbacks</h4>
+#### Datalist support and fallbacks
 
-<p>The  {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.</p>
+The {{HTMLElement("datalist")}} element is a very recent addition to HTML forms, so browser support is a bit more limited than what we saw earlier. Most notably, it isn't supported in IE versions below 10, and Safari still doesn't support it at the time of writing.
 
-<p>To handle this, here is a little trick to provide a nice fallback for those browsers:</p>
+To handle this, here is a little trick to provide a nice fallback for those browsers:
 
-<pre class="brush:html;">&lt;label for="myFruit"&gt;What is your favorite fruit? (With fallback)&lt;/label&gt;
-&lt;input type="text" id="myFruit" name="fruit" list="fruitList"&gt;
+```html
+<label for="myFruit">What is your favorite fruit? (With fallback)</label>
+<input type="text" id="myFruit" name="fruit" list="fruitList">
 
-&lt;datalist id="fruitList"&gt;
-  &lt;label for="suggestion"&gt;or pick a fruit&lt;/label&gt;
-  &lt;select id="suggestion" name="altFruit"&gt;
-    &lt;option&gt;Apple&lt;/option&gt;
-    &lt;option&gt;Banana&lt;/option&gt;
-    &lt;option&gt;Blackberry&lt;/option&gt;
-    &lt;option&gt;Blueberry&lt;/option&gt;
-    &lt;option&gt;Lemon&lt;/option&gt;
-    &lt;option&gt;Lychee&lt;/option&gt;
-    &lt;option&gt;Peach&lt;/option&gt;
-    &lt;option&gt;Pear&lt;/option&gt;
-  &lt;/select&gt;
-&lt;/datalist&gt;
-</pre>
+<datalist id="fruitList">
+  <label for="suggestion">or pick a fruit</label>
+  <select id="suggestion" name="altFruit">
+    <option>Apple</option>
+    <option>Banana</option>
+    <option>Blackberry</option>
+    <option>Blueberry</option>
+    <option>Lemon</option>
+    <option>Lychee</option>
+    <option>Peach</option>
+    <option>Pear</option>
+  </select>
+</datalist>
+```
 
-<p>Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).</p>
+Browsers that support the {{HTMLElement("datalist")}} element will ignore all the elements that are not {{HTMLElement("option")}} elements and will work as expected. On the other hand, browsers that do not support the {{HTMLElement("datalist")}} element will display the label and the select box. Of course, there are other ways to handle the lack of support for the {{HTMLElement("datalist")}} element, but this is the simplest (others tend to require JavaScript).
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Safari 6</th>
-   <td><img alt="Screenshot of the datalist element fallback with Safari on Mac OS" src="datalist-safari.png"></td>
-  </tr>
-  <tr>
-   <th scope="row">Firefox 18</th>
-   <td><img alt="Screenshot of the datalist element with Firefox on Mac OS" src="datalist-firefox-macos.png"></td>
-  </tr>
- </tbody>
-</table>
+| Safari 6   | ![Screenshot of the datalist element fallback with Safari on Mac OS](datalist-safari.png) |
+| ---------- | ----------------------------------------------------------------------------------------- |
+| Firefox 18 | ![Screenshot of the datalist element with Firefox on Mac OS](datalist-firefox-macos.png)  |
 
-<h2 id="Checkable_items">Checkable items</h2>
+## Checkable items
 
-<p>Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.</p>
+Checkable items are widgets whose state you can change by clicking on them. There are two kinds of checkable item: the check box and the radio button. Both use the {{htmlattrxref("checked","input")}} attribute to indicate whether the widget is checked by default or not.
 
-<p>It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.</p>
+It's worth noting that these widgets do not behave exactly like other form widgets. For most form widgets, once the form is submitted all widgets that have a {{htmlattrxref("name","input")}} attribute are sent, even if no value has been filled out. In the case of checkable items, their values are sent only if they are checked. If they are not checked, nothing is sent, not even their name.
 
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html">checkable-items.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html">see it live also</a>).</p>
-</div>
+> **Примечание:** You can find the examples from this section on GitHub as [checkable-items.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/checkable-items.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/checkable-items.html)).
 
-<p>For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list.  Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples. </p>
+For maximum usability/accessibility, you are advised to surround each list of related items in a {{htmlelement("fieldset")}}, with a {{htmlelement("legend")}} providing an overall description of the list. Each individual pair of {{htmlelement("label")}}/{{htmlelement("input")}} elements should be contained in its own list item (or similar). This is shown in the examples.
 
-<p>You also need to provide values for these kinds of inputs inside the <code>value</code> attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of <code>on</code>.</p>
+You also need to provide values for these kinds of inputs inside the `value` attribute if you want them to be meaningful — if no value is provided, check boxes and radio buttons are given a value of `on`.
 
-<h3 id="Check_box">Check box</h3>
+### Check box
 
-<p>A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>checkbox</code>.</p>
+A check box is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `checkbox`.
 
-<pre class="brush: html">&lt;input type="checkbox" checked id="carrots" name="carrots" value="carrots"&gt;
-</pre>
+```html
+<input type="checkbox" checked id="carrots" name="carrots" value="carrots">
+```
 
-<p>Including the <code>checked</code> attribute makes the checkbox checked automatically when the page loads.</p>
+Including the `checked` attribute makes the checkbox checked automatically when the page loads.
 
-<p><img alt="Screenshots of check boxes on several platforms." src="all-checkbox.png"></p>
+![Screenshots of check boxes on several platforms.](all-checkbox.png)
 
-<h3 id="Radio_button">Radio button</h3>
+### Radio button
 
-<p>A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>radio</code>.</p>
+A radio button is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `radio`.
 
-<pre class="brush: html">&lt;input type="radio" checked id="soup" name="meal"&gt;</pre>
+```html
+<input type="radio" checked id="soup" name="meal">
+```
 
-<p>Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.</p>
+Several radio buttons can be tied together. If they share the same value for their {{htmlattrxref("name","input")}} attribute, they will be considered to be in the same group of buttons. Only one button in a given group may be checked at the same time; this means that when one of them is checked all the others automatically get unchecked. When the form is sent, only the value of the checked radio button is sent. If none of them are checked, the whole pool of radio buttons is considered to be in an unknown state and no value is sent with the form.
 
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;What is your favorite meal?&lt;/legend&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;label for="soup"&gt;Soup&lt;/label&gt;
-      &lt;input type="radio" checked id="soup" name="meal" value="soup"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;label for="curry"&gt;Curry&lt;/label&gt;
-      &lt;input type="radio" id="curry" name="meal" value="curry"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
-      &lt;label for="pizza"&gt;Pizza&lt;/label&gt;
-      &lt;input type="radio" id="pizza" name="meal" value="pizza"&gt;
-    &lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/fieldset&gt;</pre>
+```html
+<fieldset>
+  <legend>What is your favorite meal?</legend>
+  <ul>
+    <li>
+      <label for="soup">Soup</label>
+      <input type="radio" checked id="soup" name="meal" value="soup">
+    </li>
+    <li>
+      <label for="curry">Curry</label>
+      <input type="radio" id="curry" name="meal" value="curry">
+    </li>
+    <li>
+      <label for="pizza">Pizza</label>
+      <input type="radio" id="pizza" name="meal" value="pizza">
+    </li>
+  </ul>
+</fieldset>
+```
 
-<p><img alt="Screenshots of radio buttons on several platforms." src="all-radio.png"></p>
+![Screenshots of radio buttons on several platforms.](all-radio.png)
 
-<h2 id="Buttons">Buttons</h2>
+## Buttons
 
-<p>Within HTML forms, there are three kinds of button:</p>
+Within HTML forms, there are three kinds of button:
 
-<dl>
- <dt>Submit</dt>
- <dd>Sends the form data to the server.</dd>
- <dt>Reset</dt>
- <dd>Resets all form widgets to their default values.</dd>
- <dt>Anonymous</dt>
- <dd>Buttons that have no automatic effect but can be customized using JavaScript code. If you omit the <code>type</code> attribute, this is the default value.</dd>
-</dl>
+- Submit
+  - : Sends the form data to the server.
+- Reset
+  - : Resets all form widgets to their default values.
+- Anonymous
+  - : Buttons that have no automatic effect but can be customized using JavaScript code. If you omit the `type` attribute, this is the default value.
 
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html">button-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html">see it live also</a>).</p>
-</div>
+> **Примечание:** You can find the examples from this section on GitHub as [button-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/button-examples.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/button-examples.html)).
 
-<p>A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:</p>
+A button is created using a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. It's the value of the {{htmlattrxref("type","input")}} attribute that specifies what kind of button is displayed:
 
-<h3 id="submit">submit</h3>
+### submit
 
-<pre class="brush: html">&lt;button type="submit"&gt;
-    This a &lt;br&gt;&lt;strong&gt;submit button&lt;/strong&gt;
-&lt;/button&gt;
+```html
+<button type="submit">
+    This a <br><strong>submit button</strong>
+</button>
 
-&lt;input type="submit" value="This is a submit button"&gt;</pre>
+<input type="submit" value="This is a submit button">
+```
 
-<h3 id="reset">reset</h3>
+### reset
 
-<pre class="brush: html">&lt;button type="reset"&gt;
-    This a &lt;br&gt;&lt;strong&gt;reset button&lt;/strong&gt;
-&lt;/button&gt;
+```html
+<button type="reset">
+    This a <br><strong>reset button</strong>
+</button>
 
-&lt;input type="reset" value="This is a reset button"&gt;</pre>
+<input type="reset" value="This is a reset button">
+```
 
-<h3 id="anonymous">anonymous</h3>
+### anonymous
 
-<pre class="brush: html">&lt;button type="button"&gt;
-    This an &lt;br&gt;&lt;strong&gt;anonymous button&lt;/strong&gt;
-&lt;/button&gt;
+```html
+<button type="button">
+    This an <br><strong>anonymous button</strong>
+</button>
 
-&lt;input type="button" value="This is an anonymous button"&gt;</pre>
+<input type="button" value="This is an anonymous button">
+```
 
-<p>Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:</p>
+Buttons always behave the same whether you use a {{HTMLElement("button")}} element or an {{HTMLElement("input")}} element. There are, however, some notable differences:
 
-<ul>
- <li>As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing <code>&lt;button&gt;</code> tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside <code>value</code> attributes, and therefore only accept plain text content.</li>
- <li>With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a <code>value</code> attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.</li>
-</ul>
+- As you can see from the examples, {{HTMLElement("button")}} elements let you use HTML content in their labels, which are inserted inside the opening and closing `<button>` tags. {{HTMLElement("input")}} elements on the other hand are empty elements; their labels are inserted inside `value` attributes, and therefore only accept plain text content.
+- With {{HTMLElement("button")}} elements, it's possible to have a value different than the button's label (by setting it inside a `value` attribute). This isn't reliable in versions of Internet Explorer prior to IE 8.
 
-<p><img alt="Screenshots of buttons on several platforms." src="all-buttons.png"></p>
+![Screenshots of buttons on several platforms.](all-buttons.png)
 
-<p>Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.</p>
+Technically speaking, there is almost no difference between a button defined with the {{HTMLElement("button")}} element or the {{HTMLElement("input")}} element. The only noticeable difference is the label of the button itself. Within an {{HTMLElement("input")}} element, the label can only be character data, whereas in a {{HTMLElement("button")}} element, the label can be HTML, so it can be styled accordingly.
 
-<h2 id="Advanced_form_widgets">Advanced form widgets</h2>
+## Advanced form widgets
 
-<p>In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.</p>
+In this section we cover those widgets that let users input complex or unusual data. This includes exact or approximate numbers, dates and times, or colors.
 
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html">advanced-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html">see it live also</a>).</p>
-</div>
+> **Примечание:** You can find the examples from this section on GitHub as [advanced-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/advanced-examples.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/advanced-examples.html)).
 
-<h3 id="Numbers">Numbers</h3>
+### Numbers
 
-<p>Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value <code>number</code>. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.</p>
+Widgets for numbers are created with the {{HTMLElement("input")}} element, with its {{htmlattrxref("type","input")}} attribute set to the value `number`. This control looks like a text field but allows only floating-point numbers, and usually provides some buttons to increase or decrease the value of the widget.
 
-<p>It's also possible to:</p>
+It's also possible to:
 
-<ul>
- <li>Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</li>
- <li>Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.</li>
-</ul>
+- Constrain the value by setting the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.
+- Specify the amount by which the increase and decrease buttons change the widget's value by setting the {{htmlattrxref("step","input")}} attribute.
 
-<h4 id="Example">Example</h4>
+#### Example
 
-<pre class="brush: html">&lt;input type="number" name="age" id="age" min="1" max="10" step="2"&gt;</pre>
+```html
+<input type="number" name="age" id="age" min="1" max="10" step="2">
+```
 
-<p>This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.</p>
+This creates a number widget whose value is restricted to any value between 1 and 10, and whose increase and decrease buttons change its value by 2.
 
-<p><code>number</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+`number` inputs are not supported in versions of Internet Explorer below 10.
 
-<h3 id="Sliders">Sliders</h3>
+### Sliders
 
-<p>Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.</p>
+Another way to pick a number is to use a slider. Visually speaking, sliders are less accurate than text fields, therefore they are used to pick a number whose exact value is not necessarily important.
 
-<p>A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>range</code>. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.</p>
+A slider is created by using the {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value `range`. It's important to properly configure your slider; to that end, it's highly recommended that you set the {{htmlattrxref("min","input")}}, {{htmlattrxref("max","input")}}, and {{htmlattrxref("step","input")}} attributes.
 
-<h4 id="Example_2">Example</h4>
+#### Example
 
-<pre class="brush: html">&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;</pre>
+```html
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+```
 
-<p>This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.</p>
+This example creates a slider whose value may range between 0 and 500, and whose increment/decrement buttons change the value by +10 and -10.
 
-<p>One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.</p>
+One problem with sliders is that they don't offer any kind of visual feedback as to what the current value is. You need to add this yourself with JavaScript, but this is relatively easy to do. In this example we add an empty {{htmlelement("span")}} element, in which we will write the current value of the slider, updating it as it is changed.
 
-<pre class="brush: html">&lt;label for="beans"&gt;How many beans can you eat?&lt;/label&gt;
-&lt;input type="range" name="beans" id="beans" min="0" max="500" step="10"&gt;
-&lt;span class="beancount"&gt;&lt;/span&gt;</pre>
+```html
+<label for="beans">How many beans can you eat?</label>
+<input type="range" name="beans" id="beans" min="0" max="500" step="10">
+<span class="beancount"></span>
+```
 
-<p>This can be implemented using some simple JavaScript:</p>
+This can be implemented using some simple JavaScript:
 
-<pre class="brush: js">var beans = document.querySelector('#beans');
+```js
+var beans = document.querySelector('#beans');
 var count = document.querySelector('.beancount');
 
 count.textContent = beans.value;
 
 beans.oninput = function() {
   count.textContent = beans.value;
-}</pre>
+}
+```
 
-<p>Here we store references to the range input and the span in two variables, then we immediately set the span's <code><a href="/en-US/docs/Web/API/Node/textContent">textContent</a></code> to the current <code>value</code> of the input. Finally, we set up an <code>oninput</code> event handler so that every time the range slider is moved, the span <code>textContent</code> is updated to the new input value.</p>
+Here we store references to the range input and the span in two variables, then we immediately set the span's [`textContent`](/en-US/docs/Web/API/Node/textContent) to the current `value` of the input. Finally, we set up an `oninput` event handler so that every time the range slider is moved, the span `textContent` is updated to the new input value.
 
-<p><code>range</code> inputs are not supported in versions of Internet Explorer below 10.</p>
+`range` inputs are not supported in versions of Internet Explorer below 10.
 
-<h3 id="Date_and_time_picker">Date and time picker</h3>
+### Date and time picker
 
-<p>Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.</p>
+Gathering date and time values has traditionally been a nightmare for web developers. HTML5 brings some enhancements here by providing a special control to handle this specific kind of data.
 
-<p>A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.</p>
+A date and time control is created using the {{HTMLElement("input")}} element and an appropriate value for the {{htmlattrxref("type","input")}} attribute, depending on whether you wish to collect dates, times, or both.
 
-<h4 id="datetime-local"><code>datetime-local</code></h4>
+#### `datetime-local`
 
-<p>This creates a widget to display and pick a date with time, but without any specific time zone information.</p>
+This creates a widget to display and pick a date with time, but without any specific time zone information.
 
-<pre class="brush: html">&lt;input type="datetime-local" name="datetime" id="datetime"&gt;</pre>
+```html
+<input type="datetime-local" name="datetime" id="datetime">
+```
 
-<h4 id="month"><code>month</code></h4>
+#### `month`
 
-<p>This creates a widget to display and pick a month with a year.</p>
+This creates a widget to display and pick a month with a year.
 
-<pre class="brush: html">&lt;input type="month" name="month" id="month"&gt;</pre>
+```html
+<input type="month" name="month" id="month">
+```
 
-<h4 id="time"><code>time</code></h4>
+#### `time`
 
-<p>This creates a widget to display and pick a time value.</p>
+This creates a widget to display and pick a time value.
 
-<pre class="brush: html">&lt;input type="time" name="time" id="time"&gt;</pre>
+```html
+<input type="time" name="time" id="time">
+```
 
-<h4 id="week"><code>week</code></h4>
+#### `week`
 
-<p>This creates a widget to display and pick a week number and its year.</p>
+This creates a widget to display and pick a week number and its year.
 
-<pre class="brush: html">&lt;input type="week" name="week" id="week"&gt;</pre>
+```html
+<input type="week" name="week" id="week">
+```
 
-<p>All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.</p>
+All date and time control can be constrained using the {{htmlattrxref("min","input")}} and {{htmlattrxref("max","input")}} attributes.
 
-<pre class="brush: html">&lt;label for="myDate"&gt;When are you available this summer?&lt;/label&gt;
-&lt;input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate"&gt;</pre>
+```html
+<label for="myDate">When are you available this summer?</label>
+<input type="date" name="myDate" min="2013-06-01" max="2013-08-31" id="myDate">
+```
 
-<p>Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.</p>
+Warning — The date and time widgets don't have the deepest support. At the moment, Chrome, Edge, Firefox, and Opera support them well, but there is no support in Internet Explorer and Safari has patchy support.
 
-<h3 id="Color_picker">Color picker</h3>
+### Color picker
 
-<p>Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.</p>
+Colors are always a bit difficult to handle. There are many ways to express them: RGB values (decimal or hexadecimal), HSL values, keywords, etc. The color widget lets users pick a color in both textual and visual ways.
 
-<p>A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>color</code>.</p>
+A color widget is created using the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `color`.
 
-<pre class="brush: html">&lt;input type="color" name="color" id="color"&gt;</pre>
+```html
+<input type="color" name="color" id="color">
+```
 
-<p>Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.</p>
+Warning — Color widget support it currently not very good. There is no support in Internet Explorer, and Safari currently doesn't support it either. The other major browsers do support it.
 
-<h2 id="Other_widgets">Other widgets</h2>
+## Other widgets
 
-<p>There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.</p>
+There are a few other widgets that cannot be easily classified due to their very specific behaviors, but which are still very useful.
 
-<div class="note">
-<p><strong>Note</strong>: You can find the examples from this section on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html">other-examples.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html">see it live also</a>).</p>
-</div>
+> **Примечание:** You can find the examples from this section on GitHub as [other-examples.html](https://github.com/mdn/learning-area/blob/master/html/forms/native-form-widgets/other-examples.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/native-form-widgets/other-examples.html)).
 
-<h3 id="File_picker">File picker</h3>
+### File picker
 
-<p>HTML forms are able to send files to a server; this specific action is detailed in the article <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a>. The file picker widget is how the user can choose one or more files to send.</p>
+HTML forms are able to send files to a server; this specific action is detailed in the article [Sending and retrieving form data](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data "/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data"). The file picker widget is how the user can choose one or more files to send.
 
-<p>To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to <code>file</code>. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.</p>
+To create a file picker widget, you use the {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to `file`. The types of files that are accepted can be constrained using the {{htmlattrxref("accept","input")}} attribute. In addition, if you want to let the user pick more than one file, you can do so by adding the {{htmlattrxref("multiple","input")}} attribute.
 
-<h4 id="Example_3">Example</h4>
+#### Example
 
-<p>In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.</p>
+In this example, a file picker is created that requests graphic image files. The user is allowed to select multiple files in this case.
 
-<pre class="brush: html">&lt;input type="file" name="file" id="file" accept="image/*" multiple&gt;</pre>
+```html
+<input type="file" name="file" id="file" accept="image/*" multiple>
+```
 
-<h3 id="Hidden_content">Hidden content</h3>
+### Hidden content
 
-<p>It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value <code>hidden</code>.</p>
+It's sometimes convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user. To do this, you can add an invisible element in your form. Use an {{HTMLElement("input")}} with its {{htmlattrxref("type","input")}} attribute set to the value `hidden`.
 
-<p>If you create such an element, it's required to set its <code>name</code> and <code>value</code> attributes:</p>
+If you create such an element, it's required to set its `name` and `value` attributes:
 
-<pre class="brush: html">&lt;input type="hidden" id="timestamp" name="timestamp" value="1286705410"&gt;</pre>
+```html
+<input type="hidden" id="timestamp" name="timestamp" value="1286705410">
+```
 
-<h3 id="Image_button">Image button</h3>
+### Image button
 
-<p>The <strong>image button</strong> control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).</p>
+The **image button** control is one which is displayed exactly like an {{HTMLElement("img")}} element, except that when the user clicks on it, it behaves like a submit button (see above).
 
-<p>An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value <code>image</code>. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.</p>
+An image button is created using an {{HTMLElement("input")}} element with its {{htmlattrxref("type","input")}} attribute set to the value `image`. This element supports exactly the same set of attributes as the {{HTMLElement("img")}} element, plus all the attributes supported by other form buttons.
 
-<pre class="brush: html">&lt;input type="image" alt="Click me!" src="my-img.png" width="80" height="30" /&gt;</pre>
+```html
+<input type="image" alt="Click me!" src="my-img.png" width="80" height="30" />
+```
 
-<p>If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:</p>
+If the image button is used to submit the form, this widget doesn't submit its value; instead the X and Y coordinates of the click on the image are submitted (the coordinates are relative to the image, meaning that the upper-left corner of the image represents the coordinate 0, 0). The coordinates are sent as two key/value pairs:
 
-<ul>
- <li>The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.x</em>".</li>
- <li>The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "<em>.y</em>".</li>
-</ul>
+- The X value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "_.x_".
+- The Y value key is the value of the {{htmlattrxref("name","input")}} attribute followed by the string "_.y_".
 
-<p>So for example when you click on the image of this widget, you are sent to a URL like the following:</p>
+So for example when you click on the image of this widget, you are sent to a URL like the following:
 
-<pre>http://foo.com?pos.x=123&amp;pos.y=456</pre>
+```
+http://foo.com?pos.x=123&pos.y=456
+```
 
-<p>This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the <a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data" title="/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data">Sending and retrieving form data</a> article.</p>
+This is a very convenient way to build a "hot map". How these values are sent and retrieved is detailed in the [Sending and retrieving form data](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data "/en-US/docs/HTML/Forms/Sending_and_retrieving_form_data") article.
 
-<h3 id="Meters_and_progress_bars">Meters and progress bars</h3>
+### Meters and progress bars
 
-<p>Meters and progress bars are visual representations of numeric values.</p>
+Meters and progress bars are visual representations of numeric values.
 
-<h4 id="Progress">Progress</h4>
+#### Progress
 
-<p>A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.</p>
+A progress bar represents a value that changes over time up to a maximum value specified by the {{htmlattrxref("max","progress")}} attribute. Such a bar is created using a {{ HTMLElement("progress")}} element.
 
-<pre class="brush: html">&lt;progress max="100" value="75"&gt;75/100&lt;/progress&gt;</pre>
+```html
+<progress max="100" value="75">75/100</progress>
+```
 
-<p>This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.</p>
+This is for implementing anything requiring progress reporting, such as the percentage of total files downloaded, or the number of questions filled in on a questionnaire.
 
-<p>The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+The content inside the {{HTMLElement("progress")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.
 
-<h4 id="Meter">Meter</h4>
+#### Meter
 
-<p>A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:</p>
+A meter bar represents a fixed value in a range delimited by a {{htmlattrxref("min","meter")}} and a {{htmlattrxref("max","meter")}} value. This value is visualy rendered as a bar, and to know how this bar looks, we compare the value to some other set values:
 
-<ul>
- <li>The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
-  <ul>
-   <li>The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).</li>
-   <li>The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).</li>
-   <li>The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).</li>
-  </ul>
- </li>
- <li>The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
-  <ul>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.</li>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.</li>
-   <li>If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.</li>
-  </ul>
- </li>
-</ul>
+- The {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values divide the range in three parts:
+
+  - The lower part of the range is between the {{htmlattrxref("min","meter")}} and {{htmlattrxref("low","meter")}} values (including those values).
+  - The medium part of the range is between the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} values (excluding those values).
+  - The higher part of the range is between the {{htmlattrxref("high","meter")}} and {{htmlattrxref("max","meter")}} values (including those values).
+
+- The {{htmlattrxref("optimum","meter")}} value defines the optimum value for the {{HTMLElement("meter")}} element. In conjuction with the {{htmlattrxref("low","meter")}} and {{htmlattrxref("high","meter")}} value, it defines which part of the range is prefered:
+
+  - If the {{htmlattrxref("optimum","meter")}} value is in the lower part of the range, the lower range is considered to be the prefered part, the medium range is considered to be the average part and the higher range is considered to be the worst part.
+  - If the {{htmlattrxref("optimum","meter")}} value is in the medium part of the range, the lower range is considered to be an average part, the medium range is considered to be the prefered part and the higher range is considered to be average as well.
+  - If the {{htmlattrxref("optimum","meter")}} value is in the higher part of the range, the lower range is considered to be the worst part, the medium range is considered to be the average part and the higher range is considered to be the prefered part.
 
-<p>All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:</p>
+All browsers that implement the {{HTMLElement("meter")}} element use those values to change the color of the meter bar:
 
-<ul>
- <li>If the current value is in the prefered part of the range, the bar is green.</li>
- <li>If the current value is in the average part of the range, the bar is yellow.</li>
- <li>If the current value is in the worst part of the range, the bar is red.</li>
-</ul>
+- If the current value is in the prefered part of the range, the bar is green.
+- If the current value is in the average part of the range, the bar is yellow.
+- If the current value is in the worst part of the range, the bar is red.
 
-<p>Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.</p>
+Such a bar is created using a {{HTMLElement("meter")}} element. This is for implementing any kind of meter, for example a bar showing total space used on a disk, which turns red when it starts to get full.
 
-<pre class="brush: html">&lt;meter min="0" max="100" value="75" low="33" high="66" optimum="50"&gt;75&lt;/meter&gt;</pre>
+```html
+<meter min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
+```
 
-<p>The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.</p>
+The content inside the {{HTMLElement("meter")}} element is a fallback for browsers that don't support the element and for assistive technologies to vocalize it.
 
-<p>Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.</p>
+Support for progress and meter is fairly good — there is no support in Internet Explorer, but other browsers support it well.
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.</p>
+As you'll have seen above, there are a lot of different types of available form elements — you don't need to remember all of these details at once, and can return to this article as often as you like to check up on details.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<p>To dig into the different form widgets, there are some useful external resources you should check out:</p>
+To dig into the different form widgets, there are some useful external resources you should check out:
 
-<ul>
- <li><a href="http://wufoo.com/html5/" rel="external">The Current State of HTML5 Forms</a> by Wufoo</li>
- <li><a href="https://www.quirksmode.org/html5/inputs.html" rel="external">HTML5 Tests - inputs</a> on Quirksmode (also <a href="https://www.quirksmode.org/html5/inputs_mobile.html" rel="external">available for mobile</a> browsers)</li>
-</ul>
+- [The Current State of HTML5 Forms](http://wufoo.com/html5/) by Wufoo
+- [HTML5 Tests - inputs](https://www.quirksmode.org/html5/inputs.html) on Quirksmode (also [available for mobile](https://www.quirksmode.org/html5/inputs_mobile.html) browsers)
 
-<p>{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+{{PreviousMenuNext("Learn/HTML/Forms/How_to_structure_an_HTML_form", "Learn/HTML/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Property compatibility table for form widgets</a></li>
-</ul>
+- [Your first HTML form](/ru/docs/Learn/Forms/Your_first_form)
+- [How to structure an HTML form](/ru/docs/Learn/Forms/How_to_structure_a_web_form)
+- [The native form widgets](/ru/docs/Learn/Forms/Basic_native_form_controls)
+- [Sending form data](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data)
+- [Form data validation](/ru/docs/Learn/Forms/Form_validation)
+- [How to build custom form widgets](/ru/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [Sending forms through JavaScript](/ru/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [HTML forms in legacy browsers](/ru/docs/Learn/Forms/HTML_forms_in_legacy_browsers)
+- [Styling HTML forms](/ru/docs/Learn/Forms/Styling_web_forms)
+- [Advanced styling for HTML forms](/ru/docs/Learn/Forms/Advanced_form_styling)
+- [Property compatibility table for form widgets](/ru/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ru/learn/forms/form_validation/index.md b/files/ru/learn/forms/form_validation/index.md
index 91aeba923424fb..44a048b77e04a6 100644
--- a/files/ru/learn/forms/form_validation/index.md
+++ b/files/ru/learn/forms/form_validation/index.md
@@ -12,135 +12,117 @@ tags:
   - Web
   - regex
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
 
-<div>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</div>
+Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется **валидацией на стороне клиента** и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.
 
-<p>Перед отправкой данных на сервер важно убедиться, что все обязательные поля формы заполнены данными в корректном формате. Это называется <strong>валидацией на стороне клиента</strong> и помогает убедиться, что данные, введённые в каждый элемент формы, соответствуют требованиям. Данная статья проведёт вас через основные концепци и примеры валидации на стороне клиента.</p>
+| Начальные требования: | Владение компьютером, достаточное понимание [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript). |
+| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                 | Понять, что такое валидация на стороне клиента, почему это важно и как применять различные техники для её реализации.                          |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Начальные требования:</th>
-   <td>Владение компьютером, достаточное понимание <a href="/ru/docs/Learn/HTML">HTML</a>, <a href="/ru/docs/Learn/CSS">CSS</a>, и <a href="/ru/docs/Learn/JavaScript">JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, что такое валидация на стороне клиента, почему это важно и как применять различные техники для её реализации.</td>
-  </tr>
- </tbody>
-</table>
+Валидация на стороне клиента — это первичная проверка введённых данных, которая существенно улучшает удобство взаимодействия с интерфейсом; обнаружение некорректных данных на стороне клиента позволяет пользователю немедленно их исправить. Если же проверка происходит только на сервере, процесс заполнения может быть более трудоёмким, так как требует повторения одних и тех же действий отправки данных на сервер для получения обратного ответа с сообщением о том, что нужно исправить.
 
-<p>Валидация на стороне клиента — это первичная проверка введённых данных, которая существенно улучшает удобство взаимодействия с интерфейсом; обнаружение некорректных данных на стороне клиента позволяет пользователю немедленно их исправить. Если же проверка происходит только на сервере, процесс заполнения может быть более трудоёмким, так как требует повторения одних и тех же действий отправки данных на сервер для получения обратного ответа с сообщением о том, что нужно исправить.</p>
+Однако, _не следует рассматривать_ валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо _дополнительно_ проверять на безопасность и _на стороне сервера_, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом [Безопасность вебсайтов](/ru/docs/Learn/Server-side/First_steps/Website_security); валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.
 
-<p>Однако, <em>не следует рассматривать</em> валидацию на стороне клиента как достаточную меру безопасности! Любые данные, отправляемые через форму, необходимо <em>дополнительно</em> проверять на безопасность и <em>на стороне сервера</em>, поскольку валидацию на стороне клиента достаточно просто обойти и она может не остановить злоумышленников. Чтобы лучше понимать потенциальные угрозы, рекомендуем ознакомиться с разделом <a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность вебсайтов</a>; валидация на стороне сервера выходит за рамки этого модуля, но о ней следует помнить.</p>
+## Что такое валидация формы?
 
-<h2 id="What_is_form_validation">Что такое валидация формы?</h2>
+Зайдите на любой популярный сайт, имеющий форму регистрации. Вы заметите, что при вводе данных в неправильном формате, пользователя сразу уведомляют о наличии проблемы. Вы получите примерно такое сообщение:
 
-<p>Зайдите на любой популярный сайт, имеющий форму регистрации. Вы заметите, что при вводе данных в неправильном формате, пользователя сразу уведомляют о наличии проблемы. Вы получите примерно такое сообщение:</p>
+- "Обязательное поле" (Вы не можете оставить поле пустым).
+- "Пожалуйста, введите номер телефона в формате xxx-xxxx" (Чтобы данные считались корректными, их необходимо указать в определённом формате).
+- "Пожалуйста, введите корректный email-адрес" (вы ввели данные в неправильном формате).
+- "Длина пароля должна быть от 8 до 30 символов и включать одну заглавную букву, один символ, и одну цифру." (Требования к формату данных достаточно конкретные).
 
-<ul>
- <li>"Обязательное поле" (Вы не можете оставить поле пустым).</li>
- <li>"Пожалуйста, введите номер телефона в формате xxx-xxxx" (Чтобы данные считались корректными, их необходимо указать в определённом формате).</li>
- <li>"Пожалуйста, введите корректный email-адрес" (вы ввели данные в неправильном формате).</li>
- <li>"Длина пароля должна быть от 8 до 30 символов и включать одну заглавную букву, один символ, и одну цифру." (Требования к формату данных достаточно конкретные).</li>
-</ul>
+Это называется **валидацией формы**. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется **валидацией на стороне клиента**, а выполняемая на сервере — **валидацией на стороне сервера**. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента.
 
-<p>Это называется <strong>валидацией формы</strong>. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется <strong>валидацией на стороне клиента</strong>, а выполняемая на сервере — <strong>валидацией на стороне сервера</strong>. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента.
+Если формат корректен, приложение позволяет отправить данные на сервер и (обычно) сохранить в базу данных; в противном случае выводится сообщение с описанием того, что нужно исправить, позволяя ввести данные снова.
 
-<p>Если формат корректен, приложение позволяет отправить данные на сервер и (обычно) сохранить в базу данных; в противном случае выводится сообщение с описанием того, что нужно исправить, позволяя ввести данные снова.</p>
+Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:
 
-<p>Мы хотим максимально упростить заполнение веб-форм. Тогда почему мы настаиваем валидации данных? На это есть три основные причины:</p>
+- **Мы хотим получать правильные данные в правильном формате.** Наши приложения не будут работать должным образом, если данные от пользователей хранятся в неправильном формате, некорректны сами по себе или вовсе пропущены.
+- **Мы хотим защитить данные пользователей**. Принуждение пользователей вводить надёжные пароли облегчает защиту их аккаунтов.
+- **Мы хотим защитить себя**. Существует множество способов, позволяющих злоумышленникам с помощью незащищённых форм навредить приложению (смотрите [Безопасность вебсайтов](/ru/docs/Learn/Server-side/First_steps/Website_security)).
+  {{warning("Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос.")}}
 
-<ul>
- <li><strong>Мы хотим получать правильные данные в правильном формате.</strong> Наши приложения не будут работать должным образом, если данные от пользователей хранятся в неправильном формате, некорректны сами по себе или вовсе пропущены.</li>
- <li><strong>Мы хотим защитить данные пользователей</strong>. Принуждение пользователей вводить надёжные пароли облегчает защиту их аккаунтов.</li>
- <li><strong>Мы хотим защитить себя</strong>. Существует множество способов, позволяющих злоумышленникам с помощью незащищённых форм навредить приложению (смотрите <a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность вебсайтов</a>).<br>
-  {{warning("Никогда не доверяйте данным, передаваемым на сервер клиентской программой. Даже если ваша форма правильно валидируется и не допустит введение потенциально вредоносных данных на стороне клиента, злоумышленники по-прежнему могут изменить сетевой запрос.")}}</li>
-</ul>
+## Типы валидации на стороне клиента
 
-<h2 id="Different_types_of_client-side_validation">Типы валидации на стороне клиента</h2>
+Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:
 
-<p>Существует два типа валидации на стороне клиента, с которыми вы столкнётесь в Интернете:</p>
+- **Встроенная валидация форм** использует функционал валидации HTML5, который мы неоднократно обсуждали в этом модуле. HTML5-валидация обычно не требует большого количества JavaScript-кода и демонстрирует лучшую производительность, но не настолько настраиваема, как валидация с помощью JavaScript.
+- **JavaScript-валидация** кодируется с помощью JavaScript. Она полностью настраиваема, но требует программирования всей логики (или использования библиотеки).
 
-<ul>
- <li><strong>Встроенная валидация форм</strong> использует функционал валидации HTML5, который мы неоднократно обсуждали в этом модуле. HTML5-валидация обычно не требует большого количества JavaScript-кода и демонстрирует лучшую производительность, но не настолько настраиваема, как валидация с помощью JavaScript.</li>
- <li><strong>JavaScript-валидация</strong> кодируется с помощью JavaScript. Она полностью настраиваема, но требует программирования всей логики (или использования библиотеки).</li>
-</ul>
+## Использование встроенной валидации форм
 
-<h2 id="Using_built-in_form_validation">Использование встроенной валидации форм</h2>
+Одной из самых важных функций [элементов форм HTML5](/ru/docs/Learn/Forms/HTML5_input_types) является способность валидировать бóльшую часть пользовательских данных без использования JavaScript. Это выполняется с помощью атрибутов валидации у элементов формы. Многие из них мы уже рассмотрели в этом курсе:
 
-<p>Одной из самых важных функций <a href="/en-US/docs/Learn/Forms/HTML5_input_types">элементов форм HTML5</a> является способность валидировать бóльшую часть пользовательских данных без использования JavaScript. Это выполняется с помощью атрибутов валидации у элементов формы. Многие из них мы уже рассмотрели в этом курсе:</p>
+- [`required`](/en-US/docs/Web/HTML/Attributes/required): Определяет, что для отправки формы данное поле предварительно должно быть заполнено.
+- [`minlength`](/en-US/docs/Web/HTML/Attributes/minlength) и [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength): Задаёт минимальную и максимальную длину текстовых данных (строк)
+- [`min`](/en-US/docs/Web/HTML/Attributes/min) и [`max`](/en-US/docs/Web/HTML/Attributes/max): Задаёт минимальное и максимальное значение для поля, расчитанного на числовой тип данных
+- `type`: Определяет тип данных, на который рассчитано поле: число, email-адрес или какой-то другой предустановленный тип
+- [`pattern`](/ru/docs/Web/HTML/Attributes/pattern): С помощью [регулярного выражения](/ru/docs/Web/JavaScript/Guide/Regular_Expressions), определяет шаблон, которому должны соответствовать вводимые данные.
 
-<ul>
- <li><code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>: Определяет, что для отправки формы данное поле предварительно должно быть заполнено.</li>
- <li><code><a href="/en-US/docs/Web/HTML/Attributes/minlength">minlength</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>: Задаёт минимальную и максимальную длину текстовых данных (строк)</li>
- <li><code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>: Задаёт минимальное и максимальное значение для поля, расчитанного на числовой тип данных</li>
- <li><code>type</code>: Определяет тип данных, на который рассчитано поле: число, email-адрес или какой-то другой предустановленный тип</li>
- <li><code><a href="/ru/docs/Web/HTML/Attributes/pattern">pattern</a></code>: С помощью <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">регулярного выражения</a>, определяет шаблон, которому должны соответствовать вводимые данные.</li>
-</ul>
+Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными
 
-<p>Если данные, введённые в поле формы, соответствуют правилам перечисленных выше атрибутов, они считаются валидными, если нет — не валидными</p>
+Когда элемент валиден, справедливы следующие утверждения:
 
-<p>Когда элемент валиден, справедливы следующие утверждения:</p>
+- Элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}, позволяющему стилизовать только валидные элементы.
+- Если пользователь пытается отправить данные, браузер отправит форму при условии, что ничто другое (например, JavaScript) не помешает ему это сделать
 
-<ul>
- <li>Элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}, позволяющему стилизовать только валидные элементы.</li>
- <li>Если пользователь пытается отправить данные, браузер отправит форму при условии, что ничто другое (например, JavaScript) не помешает ему это сделать</li>
-</ul>
+Когда элемент не валиден, справедливы следующие утверждения:
 
-<p>Когда элемент не валиден, справедливы следующие утверждения:</p>
+- Элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} или, в зависимости от ошибки, другим псевдоклассам (например, {{cssxref(":out-of-range")}}), которые позволяют применять определённые стили к элементам, не являющимся валидными.
+- Если пользователь пытается отправить данные, браузер заблокирует форму и выведет сообщение об ошибке.
 
-<ul>
- <li>Элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} или, в зависимости от ошибки, другим псевдоклассам (например, {{cssxref(":out-of-range")}}), которые позволяют применять определённые стили к элементам, не являющимся валидными.</li>
- <li>Если пользователь пытается отправить данные, браузер заблокирует форму и выведет сообщение об ошибке.</li>
-</ul>
+> **Примечание:** Существует ошибки, которые не позволяют отправлять форму, в частности {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} или {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} или {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, или {{domxref('validityState.customError','customError')}}.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Существует ошибки, которые не позволяют отправлять форму, в частности {{domxref('validityState.badInput', 'badInput')}}, {{domxref('validityState.patternMismatch','patternMismatch')}}, {{domxref('validityState.rangeOverflow','rangeOverflow')}} или {{domxref('validityState.rangeUnderflow','rangeUnderflow')}}, {{domxref('validityState.stepMismatch','stepMismatch')}}, {{domxref('validityState.tooLong','tooLong')}} или {{domxref('validityState.tooShort','tooShort')}}, {{domxref('validityState.typeMismatch','typeMismatch')}}, {{domxref('validityState.valueMissing','valueMissing')}}, или {{domxref('validityState.customError','customError')}}.</p>
-</div>
+## Примеры встроенной валидации форм
 
-<h2 id="Built-in_form_validation_examples">Примеры встроенной валидации форм</h2>
+В этом разделе мы протестируем некоторые из атрибутов, которые обсуждали выше.
 
-<p>В этом разделе мы протестируем некоторые из атрибутов, которые обсуждали выше.</p>
+### Простой начальный файл
 
-<h3 id="Simple_start_file">Простой начальный файл</h3>
+Давайте начнём с простого примера: поле, позволяющее указать своё предпочтение — банан или вишня. Этот пример включает обычное текстовое поле {{HTMLElement("input")}}, связанный с ним элемент {{htmlelement("label")}} и кнопку отправки формы {{htmlelement("button")}}. Исходный код можно найти на GitHub по адресу [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html), а ниже приведён рабочий пример.
 
-<p>Давайте начнём с простого примера: поле, позволяющее указать своё предпочтение — банан или вишня. Этот пример включает обычное текстовое поле {{HTMLElement("input")}}, связанный с ним элемент {{htmlelement("label")}} и кнопку отправки формы {{htmlelement("button")}}. Исходный код можно найти на GitHub по адресу <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, а ниже приведён рабочий пример.</p>
+```html
+<form>
+  <label for="choose">Would you prefer a banana or cherry?</label>
+  <input id="choose" name="i_like">
+  <button>Submit</button>
+</form>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or cherry?&lt;/label&gt;
-  &lt;input id="choose" name="i_like"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
-
-<pre class="brush: css">input:invalid {
+```css
+input:invalid {
   border: 2px dashed red;
 }
 
 input:valid {
   border: 2px solid black;
-}</pre>
+}
+```
 
-<p>{{EmbedLiveSample("Simple_start_file", "100%", 80)}}</p>
+{{EmbedLiveSample("Simple_start_file", "100%", 80)}}
 
-<p>Для начала скопируйте файл <code>fruit-start.html</code> в новую папку на вашем жёстком диске.</p>
+Для начала скопируйте файл `fruit-start.html` в новую папку на вашем жёстком диске.
 
-<h3 id="The_required_attribute">Атрибут required</h3>
+### Атрибут required
 
-<p>Самым простым в HTML5-валидации является атрибут <code><a href="/en-US/docs/Web/HTML/Attributes/required">required</a></code>. Добавьте его к элементу, чтобы сделать заполнение обязательным. Элемент с данным атрибутом соответствует CSS-псевдоклассу {{cssxref(':required')}}, а если поле ввода пустое, вместо отправки формы отобразится сообщение об ошибке. Пока поле пустое, оно также будет соответствовать CSS-псевдоклассу {{cssxref(':invalid')}}.</p>
+Самым простым в HTML5-валидации является атрибут [`required`](/en-US/docs/Web/HTML/Attributes/required). Добавьте его к элементу, чтобы сделать заполнение обязательным. Элемент с данным атрибутом соответствует CSS-псевдоклассу {{cssxref(':required')}}, а если поле ввода пустое, вместо отправки формы отобразится сообщение об ошибке. Пока поле пустое, оно также будет соответствовать CSS-псевдоклассу {{cssxref(':invalid')}}.
 
-<p>Добавьте к полю атрибут <code>required</code>, как показано ниже.</p>
+Добавьте к полю атрибут `required`, как показано ниже.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or cherry? (required)&lt;/label&gt;
-  &lt;input id="choose" name="i_like" required&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="choose">Would you prefer a banana or cherry? (required)</label>
+  <input id="choose" name="i_like" required>
+  <button>Submit</button>
+</form>
+```
 
-<p>Обратите внимание на CSS, который включён в файл примера:</p>
+Обратите внимание на CSS, который включён в файл примера:
 
-<pre class="brush: css">input:invalid {
+```css
+input:invalid {
   border: 2px dashed red;
 }
 
@@ -150,117 +132,107 @@ input:invalid:required {
 
 input:valid {
   border: 2px solid black;
-}</pre>
+}
+```
 
-<p>Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:</p>
+Данный CSS задаёт полю красную пунктирную рамку, когда оно не валидно, а когда валидно — сплошную чёрную. Мы также добавили фоновый градиент для обязательных не валидных полей. Проверьте новое поведение в примере ниже:
 
-<p>{{EmbedLiveSample("The_required_attribute", "100%", 80)}}</p>
+{{EmbedLiveSample("The_required_attribute", "100%", 80)}}
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html">fruit-validation.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html">исходный код</a>.)</p>
-</div>
+> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-required.html) (отдельно можно найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-required.html).)
 
-<p>Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке ("Заполните это поле") и блокируется отправка формы.</p>
+Попробуйте отправить форму без введения значения. Обратите внимание, что не валидное поле получает фокус, появляется сообщение об ошибке ("Заполните это поле") и блокируется отправка формы.
 
-<p>Наличие атрибута <code>required</code> у любого элемента, который его поддерживает, означает, что элемент соответствует CSS-псевдоклассу {{cssxref(':required')}}, независимо от того, имеет он значение или нет. Если элемент {{HTMLElement("input")}} не содержит значение, он будет соответствовать псевдоклассу {{cssxref(':invalid')}}.</p>
+Наличие атрибута `required` у любого элемента, который его поддерживает, означает, что элемент соответствует CSS-псевдоклассу {{cssxref(':required')}}, независимо от того, имеет он значение или нет. Если элемент {{HTMLElement("input")}} не содержит значение, он будет соответствовать псевдоклассу {{cssxref(':invalid')}}.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению <a href="/ru/docs/Learn/Accessibility">доступности</a> WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?</p>
-</div>
+> **Примечание:** Для повышения удобства взаимодействия указывайте пользователям, какие поля являются обязательными. К тому же, этого требует руководство по обеспечению [доступности](/ru/docs/Learn/Accessibility) WCAG. Требуйте обязательного ввода только тех данных, которые вам действительно нужны: например, так ли важно знать пол или должность пользователя?
 
-<h3 id="Validating_against_a_regular_expression">Валидация с помощью регулярного выражения</h3>
+### Валидация с помощью регулярного выражения
 
-<p>Ещё одной полезной функцией валидации является атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>, который в виде значения принимает <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярное выражение</a>. Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript.</p>
+Ещё одной полезной функцией валидации является атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern), который в виде значения принимает [Регулярное выражение](/ru/docs/Web/JavaScript/Guide/Regular_Expressions). Регулярное выражение (regex) — это шаблон, который может быть использован для сопоставления набора символов в текстовой строке, поэтому они идеально подходят для валидации формы и используются для множества других целей в JavaScript.
 
-<p>Регулярные выражения достаточно сложны, и мы не будем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают.</p>
+Регулярные выражения достаточно сложны, и мы не будем подробно рассматривать эту тему в данной статье. Ниже приведены несколько примеров, чтобы дать вам представление о том, как они работают.
 
-<ul>
- <li><code>a</code> — Соответствует одному символу <code>a</code> (не <code>b</code>, не <code>aa</code>, и так далее).</li>
- <li><code>abc</code> — Соответствует символу <code>a</code>, за которой следует <code>b</code>, за которой следует <code>c</code>.</li>
- <li><code>ab?c</code> — Соответствует символу <code>a</code>, за которым опционально может следовать <code>b</code>, за которым следует <code>c</code>. ( <code>ac</code> или <code>abc</code>)</li>
- <li><code>ab*c</code> — Соответствует символу <code>a</code>, за которым опционально может следовать любое количество символов <code>b</code>, за которыми следует <code>c</code>. ( <code>ac</code> , <code>abc</code>, <code>abbbbbc</code>, и так далее).</li>
- <li><code>a|b</code> — Соответствует символу <code>a</code> или <code>b</code>.</li>
- <li><code>abc|xyz</code> — Соответствует в точности <code>abc</code> или в точности <code>xyz</code> (но не <code>abcxyz</code> или <code>a</code> или <code>y</code>, и так далее).</li>
-</ul>
+- `a` — Соответствует одному символу `a` (не `b`, не `aa`, и так далее).
+- `abc` — Соответствует символу `a`, за которой следует `b`, за которой следует `c`.
+- `ab?c` — Соответствует символу `a`, за которым опционально может следовать `b`, за которым следует `c`. ( `ac` или `abc`)
+- `ab*c` — Соответствует символу `a`, за которым опционально может следовать любое количество символов `b`, за которыми следует `c`. ( `ac` , `abc`, `abbbbbc`, и так далее).
+- `a|b` — Соответствует символу `a` или `b`.
+- `abc|xyz` — Соответствует в точности `abc` или в точности `xyz` (но не `abcxyz` или `a` или `y`, и так далее).
 
-<p>Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по <a href="/ru/docs/Web/JavaScript/Guide/Regular_Expressions">Регулярным выражениям</a></p>
+Есть еще много возможностей, которые мы не упомянули. Полный список со множеством примеров можно найти в документации по [Регулярным выражениям](/ru/docs/Web/JavaScript/Guide/Regular_Expressions)
 
-<p>Давайте рассмотрим пример. Добавьте в атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> следующий шаблон:</p>
+Давайте рассмотрим пример. Добавьте в атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern) следующий шаблон:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
-  &lt;input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <label for="choose">Would you prefer a banana or a cherry?</label>
+  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
+  <button>Submit</button>
+</form>
+```
 
-<div class="hidden">
-<pre class="brush: css">input:invalid {
+```css hidden
+input:invalid {
   border: 2px dashed red;
 }
 
 input:valid {
   border: 2px solid black;
-}</pre>
-</div>
+}
+```
 
-<p>Это даёт нам следующее обновление — опробуйте его:</p>
+Это даёт нам следующее обновление — опробуйте его:
 
-<p>{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}</p>
+{{EmbedLiveSample("Validating_against_a_regular_expression", "100%", 80)}}
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html">fruit-pattern.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html">исходный код</a>.)</p>
-</div>
+> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-pattern.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-pattern.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-pattern.html).)
 
-<p>В этом примере элемент {{HTMLElement("input")}} принимает одно из четырёх возможных значений: строку "banana", "Banana", "cherry", или "Cherry". Регулярные выражения чувствительны к регистру, но с помощью шаблона "Aa", вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.</p>
+В этом примере элемент {{HTMLElement("input")}} принимает одно из четырёх возможных значений: строку "banana", "Banana", "cherry", или "Cherry". Регулярные выражения чувствительны к регистру, но с помощью шаблона "Aa", вложенного в квадратные скобки, мы сделали поддержку написания слова как с большой, так и с маленькой буквы.
 
-<p>Подставьте в атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a> приведённые выше примеры регулярных выражений, и посмотрите, как это повлияет на валидацию введённого в поле значения. Попробуйте написать свои шаблоны проверки и посмотрите, что получится. По возможности, делайте их связанными с фруктами, чтобы примеры имели смысл.</p>
+Подставьте в атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern) приведённые выше примеры регулярных выражений, и посмотрите, как это повлияет на валидацию введённого в поле значения. Попробуйте написать свои шаблоны проверки и посмотрите, что получится. По возможности, делайте их связанными с фруктами, чтобы примеры имели смысл.
 
-<p>Если не пустое значение элемента {{HTMLElement("input")}} не соответствует шаблону регулярного выражения, <code>input</code> будет соответствовать псевдоклассу {{cssxref(':invalid')}}.</p>
+Если не пустое значение элемента {{HTMLElement("input")}} не соответствует шаблону регулярного выражения, `input` будет соответствовать псевдоклассу {{cssxref(':invalid')}}.
 
-<div class="notecard note">
-<p><strong>Примечание:</strong> Некоторым типам элементов {{HTMLElement("input")}} для валидации с помощью регулярного выражения не требуется атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>. Например, поле с типом <code>email</code> валидирует значение по шаблону одного email-адреса или, если присутствует атрибут <a href="/en-US/docs/Web/HTML/Attributes/multiple"><code>multiple</code></a>, шаблону списка email-адресов, разделённых запятыми.</p>
-</div>
+> **Примечание:** Некоторым типам элементов {{HTMLElement("input")}} для валидации с помощью регулярного выражения не требуется атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern). Например, поле с типом `email` валидирует значение по шаблону одного email-адреса или, если присутствует атрибут [`multiple`](/ru/docs/Web/HTML/Attributes/multiple), шаблону списка email-адресов, разделённых запятыми.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Элемент {{HTMLElement("textarea")}} не поддерживает атрибут <a href="/ru/docs/Web/HTML/Attributes/pattern"><code>pattern</code></a>.</p>
-</div>
+> **Примечание:** Элемент {{HTMLElement("textarea")}} не поддерживает атрибут [`pattern`](/ru/docs/Web/HTML/Attributes/pattern).
 
-<h3 id="Constraining_the_length_of_your_entries">Ограничение длины вводимых значений</h3>
+### Ограничение длины вводимых значений
 
-<p>Можно ограничить максимально допустимое количество символов для текстовых полей {{HTMLElement("input")}} или {{HTMLElement("textarea")}} используя атрибуты <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> и <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>. Поле будет не валидным, если количество символов его содержимого будет меньше <a href="/en-US/docs/Web/HTML/Attributes/minlength"><code>minlength</code></a> или больше <code><a href="/en-US/docs/Web/HTML/Attributes/maxlength">maxlength</a></code>.</p>
+Можно ограничить максимально допустимое количество символов для текстовых полей {{HTMLElement("input")}} или {{HTMLElement("textarea")}} используя атрибуты [`minlength`](/ru/docs/Web/HTML/Attributes/minlength) и [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength). Поле будет не валидным, если количество символов его содержимого будет меньше [`minlength`](/ru/docs/Web/HTML/Attributes/minlength) или больше [`maxlength`](/en-US/docs/Web/HTML/Attributes/maxlength).
 
-<p>Зачастую браузеры не позволяют пользователям вводить в текстовое поле значение, длина которого превышает максимально допустимую. Можно существенно повысить удобство использования, если помимо ограничения в атрибуте <code>maxlength</code> добавить доступный индикатор, отображающий текущее и максимально допустимое количество символов, что даст пользователю возможность уместить содержимое в заданные рамки. Хорошим примером является окно написания твита в Twitter. Для реализации такого функционала можно использовать JavaScript, включая <a href="https://github.com/mimo84/bootstrap-maxlength">решения, использующие <code>maxlength</code></a>.</p>
+Зачастую браузеры не позволяют пользователям вводить в текстовое поле значение, длина которого превышает максимально допустимую. Можно существенно повысить удобство использования, если помимо ограничения в атрибуте `maxlength` добавить доступный индикатор, отображающий текущее и максимально допустимое количество символов, что даст пользователю возможность уместить содержимое в заданные рамки. Хорошим примером является окно написания твита в Twitter. Для реализации такого функционала можно использовать JavaScript, включая [решения, использующие `maxlength`](https://github.com/mimo84/bootstrap-maxlength).
 
-<h3 id="Constraining_the_values_of_your_entries">Ограничение допустимых значений</h3>
+### Ограничение допустимых значений
 
-<p>В полях, предназначенных для ввода чисел (например, <code><a href="/ru/docs/Web/HTML/Element/input/number">&lt;input type="number"&gt;</a></code>), диапазон допустимых значений можно определить с помощью атрибутов <code><a href="/en-US/docs/Web/HTML/Attributes/min">min</a></code> и <code><a href="/en-US/docs/Web/HTML/Attributes/max">max</a></code>. Если поле содержит значение за пределами данного диапазона, оно будет не валидным.</p>
+В полях, предназначенных для ввода чисел (например, [`<input type="number">`](/ru/docs/Web/HTML/Element/input/number)), диапазон допустимых значений можно определить с помощью атрибутов [`min`](/en-US/docs/Web/HTML/Attributes/min) и [`max`](/en-US/docs/Web/HTML/Attributes/max). Если поле содержит значение за пределами данного диапазона, оно будет не валидным.
 
-<p>Давайте рассмотрим другой пример. Создайте новую копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>.</p>
+Давайте рассмотрим другой пример. Создайте новую копию файла [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html).
 
-<p>Содержимое элемента <code>&lt;body&gt;</code> замените на:</p>
+Содержимое элемента `<body>` замените на:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="choose"&gt;Would you prefer a banana or a cherry?&lt;/label&gt;
-    &lt;input type="text" id="choose" name="i_like" required minlength="6" maxlength="6"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="number"&gt;How many would you like?&lt;/label&gt;
-    &lt;input type="number" id="number" name="amount" value="1" min="1" max="10"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Submit&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <div>
+    <label for="choose">Would you prefer a banana or a cherry?</label>
+    <input type="text" id="choose" name="i_like" required minlength="6" maxlength="6">
+  </div>
+  <div>
+    <label for="number">How many would you like?</label>
+    <input type="number" id="number" name="amount" value="1" min="1" max="10">
+  </div>
+  <div>
+    <button>Submit</button>
+  </div>
+</form>
+```
 
-<ul>
- <li>Здесь мы в поле с типом <code>text</code> атрибутам <code>minlength</code> и <code>maxlength</code>, задали одинаковое значение 6, что соответствует количеству символов в словах banana и cherry.</li>
- <li>В поле с типом <code>number</code> атрибуту <code>min</code> мы задали значение 1, а атрибуту <code>max</code> значение 10. При вводе чисел за пределами данного диапазона, поле будет становиться не валидным; с помощью стрелок увеличения/уменьшения пользователи не смогут выйти за границы диапазона. Текущее поле не является обязательным для заполнения, поэтому даже после очистки будет оставаться валидным.</li>
-</ul>
+- Здесь мы в поле с типом `text` атрибутам `minlength` и `maxlength`, задали одинаковое значение 6, что соответствует количеству символов в словах banana и cherry.
+- В поле с типом `number` атрибуту `min` мы задали значение 1, а атрибуту `max` значение 10. При вводе чисел за пределами данного диапазона, поле будет становиться не валидным; с помощью стрелок увеличения/уменьшения пользователи не смогут выйти за границы диапазона. Текущее поле не является обязательным для заполнения, поэтому даже после очистки будет оставаться валидным.
 
-<div class="hidden">
-<pre class="brush: css">input:invalid {
+```css hidden
+input:invalid {
   border: 2px dashed red;
 }
 
@@ -270,80 +242,79 @@ input:valid {
 
 div {
   margin-bottom: 10px;
-}</pre>
-</div>
+}
+```
 
-<p>Демонстрационный пример:</p>
+Демонстрационный пример:
 
-<p>{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}</p>
+{{EmbedLiveSample("Constraining_the_values_of_your_entries", "100%", 100)}}
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html">fruit-length.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html">исходный код</a>.)</p>
-</div>
+> **Примечание:** Рабочий пример можно найти на GitHub по адресу [fruit-length.html](https://mdn.github.io/learning-area/html/forms/form-validation/fruit-length.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-length.html).)
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: <code>&lt;input type="number"&gt;</code> (и другие типы, такие как <code>range</code> и <code>date</code>) могут также принимать атрибут <a href="/en-US/docs/Web/HTML/Attributes/step"><code>step</code></a>, который задаёт шаг увеличения или уменьшения значения при использовании кнопок вверх и вниз. В примере выше мы явно не указывали атрибут <code>step</code>, поэтому он получает значение по умолчанию, равное <code>1</code>. Это значит, что дробные числа, такие как 3.2, будут не валидными.</p>
-</div>
+> **Примечание:** `<input type="number">` (и другие типы, такие как `range` и `date`) могут также принимать атрибут [`step`](/ru/docs/Web/HTML/Attributes/step), который задаёт шаг увеличения или уменьшения значения при использовании кнопок вверх и вниз. В примере выше мы явно не указывали атрибут `step`, поэтому он получает значение по умолчанию, равное `1`. Это значит, что дробные числа, такие как 3.2, будут не валидными.
 
-<h3 id="Full_example">Полный пример</h3>
+### Полный пример
 
-<p>Ниже представлен полный пример, демонстрирующий использование встроенного функционала валидации. Сначала немного HTML:</p>
+Ниже представлен полный пример, демонстрирующий использование встроенного функционала валидации. Сначала немного HTML:
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;
-    &lt;fieldset&gt;
-      &lt;legend&gt;Do you have a driver's license?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/legend&gt;
-      &lt;!-- Так как в группе радио-кнопок, имеющих одинаковое имя, выбранной может быть
+```html
+<form>
+  <p>
+    <fieldset>
+      <legend>Do you have a driver's license?<abbr title="This field is mandatory" aria-label="required">*</abbr></legend>
+      <!-- Так как в группе радио-кнопок, имеющих одинаковое имя, выбранной может быть
           только одна, то и атрибут "required" достаточно задать хотя бы одной кнопке,
-          чтобы сделать всю группу обязательной для заполнения --&gt;
-      &lt;input type="radio" required name="driver" id="r1" value="yes"&gt;&lt;label for="r1"&gt;Yes&lt;/label&gt;
-      &lt;input type="radio" required name="driver" id="r2" value="no"&gt;&lt;label for="r2"&gt;No&lt;/label&gt;
-    &lt;/fieldset&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="n1"&gt;How old are you?&lt;/label&gt;
-    &lt;!-- Атрибут "pattern" может выступать фолбэком для браузеров, которые
+          чтобы сделать всю группу обязательной для заполнения -->
+      <input type="radio" required name="driver" id="r1" value="yes"><label for="r1">Yes</label>
+      <input type="radio" required name="driver" id="r2" value="no"><label for="r2">No</label>
+    </fieldset>
+  </p>
+  <p>
+    <label for="n1">How old are you?</label>
+    <!-- Атрибут "pattern" может выступать фолбэком для браузеров, которые
         не поддерживают поля ввода c числовым типом данных. Те браузеры,
         которые такие поля поддерживают, будут просто игнорировать его.
         Как раз, ниже атрибут "pattern" выполняет роль фолбека.
-     --&gt;
-    &lt;input type="number" min="12" max="120" step="1" id="n1" name="age"
-           pattern="\d+"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t1"&gt;What's your favorite fruit?&lt;abbr title="This field is mandatory" aria-label="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-    &lt;input type="text" id="t1" name="fruit" list="l1" required
-           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range"&gt;
-    &lt;datalist id="l1"&gt;
-      &lt;option&gt;Banana&lt;/option&gt;
-      &lt;option&gt;Cherry&lt;/option&gt;
-      &lt;option&gt;Apple&lt;/option&gt;
-      &lt;option&gt;Strawberry&lt;/option&gt;
-      &lt;option&gt;Lemon&lt;/option&gt;
-      &lt;option&gt;Orange&lt;/option&gt;
-    &lt;/datalist&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t2"&gt;What's your e-mail address?&lt;/label&gt;
-    &lt;input type="email" id="t2" name="email"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="t3"&gt;Leave a short message&lt;/label&gt;
-    &lt;textarea id="t3" name="msg" maxlength="140" rows="5"&gt;&lt;/textarea&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;button&gt;Submit&lt;/button&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
-
-<p>И немного CSS для стилизации HTML:</p>
-
-<pre class="brush: css">form {
+     -->
+    <input type="number" min="12" max="120" step="1" id="n1" name="age"
+           pattern="\d+">
+  </p>
+  <p>
+    <label for="t1">What's your favorite fruit?<abbr title="This field is mandatory" aria-label="required">*</abbr></label>
+    <input type="text" id="t1" name="fruit" list="l1" required
+           pattern="[Bb]anana|[Cc]herry|[Aa]pple|[Ss]trawberry|[Ll]emon|[Oo]range">
+    <datalist id="l1">
+      <option>Banana</option>
+      <option>Cherry</option>
+      <option>Apple</option>
+      <option>Strawberry</option>
+      <option>Lemon</option>
+      <option>Orange</option>
+    </datalist>
+  </p>
+  <p>
+    <label for="t2">What's your e-mail address?</label>
+    <input type="email" id="t2" name="email">
+  </p>
+  <p>
+    <label for="t3">Leave a short message</label>
+    <textarea id="t3" name="msg" maxlength="140" rows="5"></textarea>
+  </p>
+  <p>
+    <button>Submit</button>
+  </p>
+</form>
+```
+
+И немного CSS для стилизации HTML:
+
+```css
+form {
   font: 1em sans-serif;
   max-width: 320px;
 }
 
-p &gt; label {
+p > label {
   display: block;
 }
 
@@ -363,87 +334,80 @@ input:invalid {
 
 input:focus:invalid {
   box-shadow: none;
-}</pre>
+}
+```
+
+Получим следующее:
+
+{{EmbedLiveSample("Full_example", "100%", 420)}}
 
-<p>Получим следующее:</p>
+В статье [Атрибуты валидации](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation#validation-related_attributes) можно найти полный список атрибутов, которые можно использовать для ограничения допустимых значений ввода и типов полей `input`, которые их поддерживают.
 
-<p>{{EmbedLiveSample("Full_example", "100%", 420)}}</p>
+> **Примечание:** Рабочий пример можно найти на GitHub по адресу [full-example.html](https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html) ([исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html).)
 
-<p>В статье <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation#validation-related_attributes">Атрибуты валидации</a> можно найти полный список атрибутов, которые можно использовать для ограничения допустимых значений ввода и типов полей <code>input</code>, которые их поддерживают.</p>
+## Валидация форм с помощью JavaScript
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/full-example.html">full-example.html</a> (<a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/full-example.html">исходный код</a>.)</p>
-</div>
+Если нужно управлять внешним видом встроенных сообщений об ошибке или работать с устаревшими браузерами, которые не поддерживают встроенную валидацию форм HTML, вам следует использовать JavaScript. В данном разделе мы рассмотрим различные способы делать это.
 
-<h2 id="Validating_forms_using_JavaScript">Валидация форм с помощью JavaScript</h2>
+### Constraint Validation API
 
-<p>Если нужно управлять внешним видом встроенных сообщений об ошибке или работать с устаревшими браузерами, которые не поддерживают встроенную валидацию форм HTML, вам следует использовать JavaScript. В данном разделе мы рассмотрим различные способы делать это.</p>
+Большинство браузеров поддерживают [Constraint Validation API](/ru/docs/Web/API/Constraint_validation), который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:
 
-<h3 id="The_Constraint_Validation_API">Constraint Validation API</h3>
+- [`HTMLButtonElement`](/ru/docs/Web/API/HTMLButtonElement) (представляет элемент [`<button>`](/ru/docs/Web/HTML/Element/button))
+- [`HTMLFieldSetElement`](/en-US/docs/Web/API/HTMLFieldSetElement) (представляет элемент [`<fieldset>`](/ru/docs/Web/HTML/Element/fieldset))
+- [`HTMLInputElement`](/ru/docs/Web/API/HTMLInputElement) (представляет элемент [`<input>`](/ru/docs/Web/HTML/Element/input))
+- [`HTMLOutputElement`](/en-US/docs/Web/API/HTMLOutputElement) (представляет элемент [`<output>`](/ru/docs/Web/HTML/Element/output))
+- [`HTMLSelectElement`](/ru/docs/Web/API/HTMLSelectElement) (представляет элемент [`<select>`](/ru/docs/Web/HTML/Element/select))
+- [`HTMLTextAreaElement`](/en-US/docs/Web/API/HTMLTextAreaElement) (представляет элемент [`<textarea>`](/en-US/docs/Web/HTML/Element/textarea))
 
-<p>Большинство браузеров поддерживают <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>, который состоит из набора свойств и методов, доступных на DOM-интерфейсах следующих элементов форм:</p>
+Для перечисленных выше элементов Constraint Validation API делает доступными следующие свойства.
 
-<ul>
- <li><code><a href="/ru/docs/Web/API/HTMLButtonElement">HTMLButtonElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/button">&lt;button&gt;</a></code>)</li>
- <li><code><a href="/en-US/docs/Web/API/HTMLFieldSetElement">HTMLFieldSetElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/fieldset">&lt;fieldset&gt;</a></code>)</li>
- <li><code><a href="/ru/docs/Web/API/HTMLInputElement">HTMLInputElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/input">&lt;input&gt;</a></code>)</li>
- <li><code><a href="/en-US/docs/Web/API/HTMLOutputElement">HTMLOutputElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/output">&lt;output&gt;</a></code>)</li>
- <li><code><a href="/ru/docs/Web/API/HTMLSelectElement">HTMLSelectElement</a></code> (представляет элемент <code><a href="/ru/docs/Web/HTML/Element/select">&lt;select&gt;</a></code>)</li>
- <li><code><a href="/en-US/docs/Web/API/HTMLTextAreaElement">HTMLTextAreaElement</a></code> (представляет элемент <code><a href="/en-US/docs/Web/HTML/Element/textarea">&lt;textarea&gt;</a></code>)</li>
-</ul>
+- `validationMessage`: Возвращает локализованное сообщение, описывающее ограничения валидации (если таковые имеются), которым не удовлетворяет определённый элемент. Если элемент не участвует в валидации (`willValidate` установлено в `false`) или значение элемента удовлетворяет установленным ограничениям (является валидным), будет возвращена пустая строка.
+- `validity`: Возвращает объект `ValidityState`, который содержит несколько свойств, описывающих состояние валидности элемента. Подробное описание всех свойств доступности можно найти на странице справочника {{domxref("ValidityState")}}; ниже приведён список наиболее используемых:
 
-<p id="Constraint_validation_API_properties">Для перечисленных выше элементов Constraint Validation API  делает доступными следующие свойства.</p>
+  - {{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Возвращает `true`, если значение не соответствует шаблону, указанному в атрибуте {{htmlattrxref("pattern", "input")}}, и `false` если соответствует. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
+  - {{domxref("ValidityState.tooLong", "tooLong")}}: Возвращает `true`, если значение длиннее максимальной длины, указанной в атрибуте {{htmlattrxref("maxlength", "input")}}, и `false` если оно короче или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
+  - {{domxref("ValidityState.tooShort", "tooShort")}}: Возвращает `true`, если значение короче минимальной длины, указанной в атрибуте {{htmlattrxref("minlength", "input")}}, и `false` если оно длинее или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
+  - {{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Возвращает `true`, если значение больше указанного в атрибуте {{htmlattrxref("max", "input")}} максимума, и `false` если меньше или равно ему. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}
+  - {{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Возвращает `true`, если значение меньше указанного в атрибуте {{htmlattrxref("min", "input")}}, и `false` если больше или равно ему. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.
+  - {{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Возвращает `true`, если значение не соответствует требуемому синтаксису (когда для {{htmlattrxref("type", "input")}} задано значение `email` или `url`), и `false` если синтаксис корректный. Если `true`, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
+  - `valid`: Возвращает `true`, если элемент соответствует всем ограничениям валидации — следовательно, считается валидным, и `false` если не соответствует какому-то ограничению. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}; иначе {{cssxref(":invalid")}}.
+  - `valueMissing`: Возвращает `true`, если у элемента есть атрибут {{htmlattrxref("required", "input")}}, но не введено значенение, иначе возвращает `false`. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.
 
-<ul>
- <li><code>validationMessage</code>: Возвращает локализованное сообщение, описывающее ограничения валидации (если таковые имеются), которым не удовлетворяет определённый элемент. Если элемент не участвует в валидации (<code>willValidate</code> установлено в <code>false</code>) или значение элемента удовлетворяет установленным ограничениям (является валидным), будет возвращена пустая строка.</li>
- <li><code>validity</code>: Возвращает объект <code>ValidityState</code>, который содержит несколько свойств, описывающих состояние валидности элемента. Подробное описание всех свойств доступности можно найти на странице справочника {{domxref("ValidityState")}}; ниже приведён список наиболее используемых:
-  <ul>
-   <li>{{domxref("ValidityState.patternMismatch", "patternMismatch")}}: Возвращает <code>true</code>, если значение не соответствует шаблону, указанному в атрибуте {{htmlattrxref("pattern", "input")}}, и <code>false</code> если соответствует. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li>
-   <li>{{domxref("ValidityState.tooLong", "tooLong")}}: Возвращает <code>true</code>, если значение длиннее максимальной длины, указанной в атрибуте {{htmlattrxref("maxlength", "input")}}, и <code>false</code> если оно короче или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li>
-   <li>{{domxref("ValidityState.tooShort", "tooShort")}}: Возвращает <code>true</code>, если значение короче минимальной длины, указанной в атрибуте {{htmlattrxref("minlength", "input")}}, и <code>false</code> если оно длинее или равно ей. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li>
-   <li>{{domxref("ValidityState.rangeOverflow", "rangeOverflow")}}: Возвращает <code>true</code>, если значение больше указанного в атрибуте {{htmlattrxref("max", "input")}} максимума, и <code>false</code> если меньше или равно ему. Если true, элемент соответствует CSS-псевдоклассам {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}</li>
-   <li>{{domxref("ValidityState.rangeUnderflow", "rangeUnderflow")}}: Возвращает <code>true</code>, если значение меньше указанного в атрибуте {{htmlattrxref("min", "input")}}, и <code>false</code> если больше или равно ему. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}} и {{cssxref(":out-of-range")}}.</li>
-   <li>{{domxref("ValidityState.typeMismatch", "typeMismatch")}}: Возвращает <code>true</code>, если значение не соответствует требуемому синтаксису (когда для {{htmlattrxref("type", "input")}} задано значение <code>email</code> или <code>url</code>), и <code>false</code> если синтаксис корректный. Если <code>true</code>, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li>
-   <li><code>valid</code>: Возвращает <code>true</code>, если элемент соответствует всем ограничениям валидации — следовательно, считается валидным, и <code>false</code> если не соответствует какому-то ограничению. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":valid")}}; иначе {{cssxref(":invalid")}}.</li>
-   <li><code>valueMissing</code>: Возвращает <code>true</code>, если у элемента есть атрибут {{htmlattrxref("required", "input")}}, но не введено значенение, иначе возвращает <code>false</code>. Если true, элемент соответствует CSS-псевдоклассу {{cssxref(":invalid")}}.</li>
-  </ul>
- </li>
- <li><code>willValidate</code>: Возвращает <code>true</code>, если элемент будет участвовать в валидации при отправке формы; иначе возвращает <code>false</code>.</li>
-</ul>
+- `willValidate`: Возвращает `true`, если элемент будет участвовать в валидации при отправке формы; иначе возвращает `false`.
 
-<p id="Constraint_validation_API_methods">Также для перечисленных выше элементов Constraint Validation API  делает доступными следующие методы.</p>
+Также для перечисленных выше элементов Constraint Validation API делает доступными следующие методы.
 
-<ul>
- <li><code>checkValidity()</code>: Возвращает <code>true</code>, если значение элемента проходит валидацию, иначе возвращает <code>false</code>. Если элемент не валиден, данный метод также запускает на нём событие <a href="/ru/docs/Web/API/HTMLInputElement/invalid_event"><code>invalid</code></a>.</li>
- <li><code>setCustomValidity(<em>message</em>)</code>: Позволяет добавить в элемент кастомное сообщение об ошибке; при этом элемент будет считаться не валидным и отобразится указанная ошибка. Это позволяет использовать JavaScript-код, чтобы представить ошибку валидации иначе, чем это предусмотрено стандартными средствами валидации HTML5. При сообщении об ошибке данное кастомное сообщение показывается пользователю.</li>
-</ul>
+- `checkValidity()`: Возвращает `true`, если значение элемента проходит валидацию, иначе возвращает `false`. Если элемент не валиден, данный метод также запускает на нём событие [`invalid`](/ru/docs/Web/API/HTMLInputElement/invalid_event).
+- `setCustomValidity(message)`: Позволяет добавить в элемент кастомное сообщение об ошибке; при этом элемент будет считаться не валидным и отобразится указанная ошибка. Это позволяет использовать JavaScript-код, чтобы представить ошибку валидации иначе, чем это предусмотрено стандартными средствами валидации HTML5. При сообщении об ошибке данное кастомное сообщение показывается пользователю.
 
-<h4 id="Implementing_a_customized_error_message">Реализация кастомного сообщения об ошибке</h4>
+#### Реализация кастомного сообщения об ошибке
 
-<p>Как вы видели в примерах HTML5-валидации выше, каждый раз, когда пользователь пытается отправить не валидную форму, браузер отображает сообщение об ошибке. Способ отображения сообщения зависит от браузера.</p>
+Как вы видели в примерах HTML5-валидации выше, каждый раз, когда пользователь пытается отправить не валидную форму, браузер отображает сообщение об ошибке. Способ отображения сообщения зависит от браузера.
 
-<p>У этих автоматических сообщений есть два недостатка:</p>
+У этих автоматических сообщений есть два недостатка:
 
-<ul>
- <li>Не существует стандартного способа их стилизации с помощью CSS.</li>
- <li>Они зависят от локали браузера, из-за чего страница может быть на одном языке, а сообщение об ошибке — на другом, как показано на следующем скриншоте браузера Firefox.</li>
-</ul>
+- Не существует стандартного способа их стилизации с помощью CSS.
+- Они зависят от локали браузера, из-за чего страница может быть на одном языке, а сообщение об ошибке — на другом, как показано на следующем скриншоте браузера Firefox.
 
-<p><img alt="Пример сообщения об ошибке на англоязычной странице в браузере Firefox с настроенным французским языком" src="error-firefox-win7.png"></p>
+![Пример сообщения об ошибке на англоязычной странице в браузере Firefox с настроенным французским языком](error-firefox-win7.png)
 
-<p>Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования <a href="/en-US/docs/Web/API/Constraint_validation" rel="external">Constraint Validation API</a>. Давайте рассмотрим простой пример, как это делается.</p>
+Настройка таких сообщений об ошибках является одной из наиболее распространённых причин использования [Constraint Validation API](/ru/docs/Web/API/Constraint_validation). Давайте рассмотрим простой пример, как это делается.
 
-<p>Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html">fruit-start.html</a>, если хотите):</p>
+Начнём с простого HTML (Не стесняйтесь поместить это в пустой HTML-файл. Вы можете взять за основу свежую копию [fruit-start.html](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/fruit-start.html), если хотите):
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;label for="mail"&gt;I would like you to provide me with an e-mail address:&lt;/label&gt;
-  &lt;input type="email" id="mail" name="mail"&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <label for="mail">I would like you to provide me with an e-mail address:</label>
+  <input type="email" id="mail" name="mail">
+  <button>Submit</button>
+</form>
+```
 
-<p>Добавьте на страницу следующий JavaScript:</p>
+Добавьте на страницу следующий JavaScript:
 
-<pre class="brush: js">const email = document.getElementById("mail");
+```js
+const email = document.getElementById("mail");
 
 email.addEventListener("input", function (event) {
   if (email.validity.typeMismatch) {
@@ -451,52 +415,52 @@ email.addEventListener("input", function (event) {
   } else {
     email.setCustomValidity("");
   }
-});</pre>
+});
+```
 
-<p>Здесь мы сохраняем ссылку на поле email, а затем добавляем к нему обработчик события, который запускает код обработчика каждый раз, когда в поле меняется значение.</p>
+Здесь мы сохраняем ссылку на поле email, а затем добавляем к нему обработчик события, который запускает код обработчика каждый раз, когда в поле меняется значение.
 
-<p>В коде обработчика мы проверяем, возвращает ли свойство поля email <code>validity.typeMismatch</code> значение <code>true</code>, что значит, что содержащееся значение не соответствует шаблону корректного email-адреса. Если возвращается <code>true</code>, мы вызываем метод {{domxref("HTMLInputElement.setCustomValidity()","setCustomValidity()")}} с кастомным сообщением. Это делает поле не валидным, поэтому попытка отправить форму приводит к ошибке и отображается кастомное сообщение об ошибке.</p>
+В коде обработчика мы проверяем, возвращает ли свойство поля email `validity.typeMismatch` значение `true`, что значит, что содержащееся значение не соответствует шаблону корректного email-адреса. Если возвращается `true`, мы вызываем метод {{domxref("HTMLInputElement.setCustomValidity()","setCustomValidity()")}} с кастомным сообщением. Это делает поле не валидным, поэтому попытка отправить форму приводит к ошибке и отображается кастомное сообщение об ошибке.
 
-<p>Если свойство <code>validity.typeMismatch</code> возвращает <code>false</code>, мы вызываем метод <code>setCustomValidity()</code> с пустой строкой. Это делает поле валидным, поэтому форма может быть успешно отправлена.</p>
+Если свойство `validity.typeMismatch` возвращает `false`, мы вызываем метод `setCustomValidity()` с пустой строкой. Это делает поле валидным, поэтому форма может быть успешно отправлена.
 
-<p>Попробовать пример можно ниже:</p>
+Попробовать пример можно ниже:
 
-<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}</p>
+{{EmbedGHLiveSample("learning-area/html/forms/form-validation/custom-error-message.html", '100%', 80)}}
 
-<div class="notecard note">
-<p><strong>Примечание:</strong>: Данный пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html">custom-error-message.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html">исходный код</a>.)</p>
-</div>
+> **Примечание:**: Данный пример можно найти на GitHub по адресу [custom-error-message.html](https://mdn.github.io/learning-area/html/forms/form-validation/custom-error-message.html) (отдельно можно найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/custom-error-message.html).)
 
-<h4 id="A_more_detailed_example">Более подробный пример</h4>
+#### Более подробный пример
 
-<p>Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.</p>
+Теперь, когда мы разобрали простой пример, давайте посмотрим, как можно использовать данный API для создания более сложной валидацию.
 
-<p>Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:</p>
+Во-первых, HTML. Опять же, не стесняйтесь писать его вместе с нами:
 
-<pre class="brush: html">&lt;form novalidate&gt;
-  &lt;p&gt;
-    &lt;label for="mail"&gt;
-      &lt;span&gt;Please enter an email address:&lt;/span&gt;
-      &lt;input type="email" id="mail" name="mail" required minlength="8"&gt;
-      &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
-    &lt;/label&gt;
-  &lt;/p&gt;
-  &lt;button&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
+```html
+<form novalidate>
+  <p>
+    <label for="mail">
+      <span>Please enter an email address:</span>
+      <input type="email" id="mail" name="mail" required minlength="8">
+      <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <button>Submit</button>
+</form>
+```
 
-<p>Эта простая форма использует атрибут <code><a href="/en-US/docs/Web/HTML/Attributes/novalidate">novalidate</a></code>, который отключает автоматическую валидацию браузером; это позволяет нашему скрипту взять управление валидацией на себя. Однако, это не отменяет поддержку Constraint Validation API или псевдоклассов, таких как {{cssxref(":valid")}} или ему подобных. Это значит, что хотя браузер автоматически и не проверяет валидность формы перед отправкой данных, вы можете сделать это самостоятельно и соответствующим образом стилизовать форму.</p>
+Эта простая форма использует атрибут [`novalidate`](/en-US/docs/Web/HTML/Attributes/novalidate), который отключает автоматическую валидацию браузером; это позволяет нашему скрипту взять управление валидацией на себя. Однако, это не отменяет поддержку Constraint Validation API или псевдоклассов, таких как {{cssxref(":valid")}} или ему подобных. Это значит, что хотя браузер автоматически и не проверяет валидность формы перед отправкой данных, вы можете сделать это самостоятельно и соответствующим образом стилизовать форму.
 
-<p>Объектом валидации является обязательный для заполнения <code><a href="/en-US/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code>, длина которого не должна быть меньше 8 символов. Давайте напишем код, проверяющий эти критерии, и покажем кастомное сообщение об ошибке в случае несоблюдения какого-то из них.</p>
+Объектом валидации является обязательный для заполнения [`<input type="email">`](/en-US/docs/Web/HTML/Element/input/email), длина которого не должна быть меньше 8 символов. Давайте напишем код, проверяющий эти критерии, и покажем кастомное сообщение об ошибке в случае несоблюдения какого-то из них.
 
-<p>Мы хотим показывать сообщение об ошибке внутри элемента <code>&lt;span&gt;</code>. Данному элементу задан атрибут <a href="/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions"><code>aria-live</code></a>, чтобы гарантировать, что наше кастомное сообщение об ошибке будет доступно всем, включая пользователей скринридеров.</p>
+Мы хотим показывать сообщение об ошибке внутри элемента `<span>`. Данному элементу задан атрибут [`aria-live`](/ru/docs/Web/Accessibility/ARIA/ARIA_Live_Regions), чтобы гарантировать, что наше кастомное сообщение об ошибке будет доступно всем, включая пользователей скринридеров.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Ключевым моментом здесь является то, что добавление к форме атрибута <code>novalidate</code> отключает отображение встроенных сообщений об ошибке и позволяет вместо этого добавлять в DOM кастомные сообщения.</p>
-</div>
+> **Примечание:** Ключевым моментом здесь является то, что добавление к форме атрибута `novalidate` отключает отображение встроенных сообщений об ошибке и позволяет вместо этого добавлять в DOM кастомные сообщения.
 
-<p>Перейдём к базовому CSS, чтобы немного улучшить внешний вид формы и обеспечить визуальную обратную связь при введении не валидных данных:</p>
+Перейдём к базовому CSS, чтобы немного улучшить внешний вид формы и обеспечить визуальную обратную связь при введении не валидных данных:
 
-<pre class="brush: css">body {
+```css
+body {
   font: 1em sans-serif;
   width: 200px;
   padding: 0;
@@ -546,11 +510,12 @@ input:focus:invalid {
 
 .error.active {
   padding: 0.3em;
-}</pre>
+}
+```
 
-<p>Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.</p>
+Теперь давайте рассмотрим JavaScript, который реализует кастомную валидацию.
 
-<pre class="brush: js">
+```js
 // Существуют разные способы получить DOM-узел; здесь мы определяем саму форму и
 // поле ввода email и элемент span, в который поместим сообщение об ошибке
 const form  = document.getElementsByTagName('form')[0];
@@ -601,74 +566,69 @@ function showError() {
 
   // Задаём соответствующую стилизацию
   emailError.className = 'error active';
-}</pre>
+}
+```
+
+Комментарии объясняют логику хорошо, но кратко:
+
+- При каждом изменении значения поля, мы производим его валидацию. Если данные валидны, удаляем ранее отображаемые сообщения об ошибках. Если данные не валдны, запускаем `showError()`, чтобы показать соответствующую ошибку.
+- При каждой попытке отправить форму, мы снова производим валидацию. Если данные валидны, позволяем отправку формы. Если данные не валидны, запускам `showError()`, чтобы показать соответствующее сообщение об ошибке, а также предотвращаем отправку формы с помощью [`preventDefault()`](/ru/docs/Web/API/Event/preventDefault).
+- Функция `showError()` использует различные свойства объекта `validity` поля ввода, чтобы определить тип ошибки и отобразить соответсвущее сообщение.
 
-<p>Комментарии объясняют логику хорошо, но кратко:</p>
+Рабочий пример:
 
-<ul>
- <li>При каждом изменении значения поля, мы производим его валидацию. Если данные валидны, удаляем ранее отображаемые сообщения об ошибках. Если данные не валдны, запускаем <code>showError()</code>, чтобы показать соответствующую ошибку.</li>
- <li>При каждой попытке отправить форму, мы снова производим валидацию. Если данные валидны, позволяем отправку формы. Если данные не валидны, запускам <code>showError()</code>, чтобы показать соответствующее сообщение об ошибке, а также предотвращаем отправку формы с помощью <code><a href="/ru/docs/Web/API/Event/preventDefault">preventDefault()</a></code>.</li>
- <li>Функция <code>showError()</code> использует различные свойства объекта <code>validity</code> поля ввода, чтобы определить тип ошибки и отобразить соответсвущее сообщение.</li>
-</ul>
+{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}
 
-<p>Рабочий пример:</p>
+> **Примечание:** Рабочий пример можно найти на GitHub по адресу [detailed-custom-validation.html](https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html) (отдельно можно найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html).)
 
-<p>{{EmbedGHLiveSample("learning-area/html/forms/form-validation/detailed-custom-validation.html", '100%', 150)}}</p>
+Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Рабочий пример можно найти на GitHub по адресу <a href="https://mdn.github.io/learning-area/html/forms/form-validation/detailed-custom-validation.html">detailed-custom-validation.html</a> (отдельно можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/forms/form-validation/detailed-custom-validation.html">исходный код</a>.)</p>
-</div>
+> **Примечание:** Для получения дополнительной информации смотрите руководства [Constraint validation guide](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation) и [Constraint Validation API](/ru/docs/Web/API/Constraint_validation).
 
-<p>Constraint Validation API явяется мощным инструментом валидации форм, позволяющим получить контроль над пользовательским интерфейсом, существенно превосходящий возможности HTML и CSS.</p>
+### Проверка форм без встроенного API
 
-<div class="notecard note">
-<p><strong>Примечание</strong>: Для получения дополнительной информации смотрите руководства <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">Constraint validation guide</a> и <a href="/en-US/docs/Web/API/Constraint_validation">Constraint Validation API</a>.</p>
-</div>
+В некоторых случаях, например, при необходимости поддержки устаревших браузеров или [кастомных элементов формы](/ru/docs/Learn/Forms/How_to_build_custom_form_controls), вы не сможете или не захотите использовать Constraint Validation API. Вы по-прежнему сможете использовать JavaScript для валидации форм, но для этого всё нужно будет писать самостоятельно.
 
-<h3 id="Validating_forms_without_a_built-in_API">Проверка форм без встроенного API</h3>
+Для создания своего валидатора формы, задайте себе несколько вопросов:
 
-<p>В некоторых случаях, например, при необходимости поддержки устаревших браузеров или <a href="/ru/docs/Learn/Forms/How_to_build_custom_form_controls">кастомных элементов формы</a>, вы не сможете или не захотите использовать Constraint Validation API. Вы по-прежнему сможете использовать JavaScript для валидации форм, но для этого всё нужно будет писать самостоятельно.</p>
+- Какую тип валидации я должен выполнить?
+  - : Вам нужно определить, как данные будут валидироваться: с помощью строковых операций, преобразования типов, регулярных выражений и так далее. Решать вам.
+- Что мне нужно делать, если форма не проходит валидацию?
+  - : Это явно вопрос пользовательского интерфейса. Вы должны решить, как в этом случае будет себя вести форма. Будет ли она в любом случае отправлять данные? Нужно ли выделять поля, содержащие ошибки? Нужно ли отображать сообщения об ошибках?
+- Как я могу помочь пользователю исправить не валидные данные?
 
-<p>Для создания своего валидатора формы, задайте себе несколько вопросов:</p>
+  - : Чтобы снизить степень разочарования пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь исправить данные, которые он ввёл неправильно. Нужно предложить правильные варианты, чтобы дать понять, какие данные вы ожидаете от него получить, а также сообщение, чётко описывающее ошибку. Если вы хотите подробнее ознакомиться с требованиями к пользовательскому интрефейсу при валидации форм, предлагаем прочитать следующие статьи:
 
-<dl>
- <dt>Какую тип валидации я должен выполнить?</dt>
- <dd>Вам нужно определить, как данные будут валидироваться: с помощью строковых операций, преобразования типов, регулярных выражений и так далее. Решать вам.</dd>
- <dt>Что мне нужно делать, если форма не проходит валидацию?</dt>
- <dd>Это явно вопрос пользовательского интерфейса. Вы должны решить, как в этом случае будет себя вести форма. Будет ли она  в любом случае отправлять данные? Нужно ли выделять поля, содержащие ошибки? Нужно ли отображать сообщения об ошибках?</dd>
- <dt>Как я могу помочь пользователю исправить не валидные данные?</dt>
- <dd>Чтобы снизить степень разочарования пользователя, очень важно предоставить как можно больше полезной информации, чтобы помочь исправить данные, которые он ввёл неправильно. Нужно предложить правильные варианты, чтобы дать понять, какие данные вы ожидаете от него получить, а также сообщение, чётко описывающее ошибку. Если вы хотите подробнее ознакомиться с требованиями к пользовательскому интрефейсу при валидации форм, предлагаем прочитать следующие статьи:
- <ul>
-  <li>SmashingMagazine: <a href="https://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/" rel="external">Form-Field Validation: The Errors-Only Approach</a></li>
-  <li>SmashingMagazine: <a href="https://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/" rel="external">Web Form Validation: Best Practices and Tutorials</a></li>
-  <li>WebFX: <a href="https://www.webfx.com/blog/web-design/10-tips-for-optimizing-web-form-submission-usability/" rel="external">10 Tips for Optimizing Web Form Submission Usability</a></li>
-  <li>A List Apart: <a href="https://www.alistapart.com/articles/inline-validation-in-web-forms/" rel="external">Inline Validation in Web Forms</a></li>
- </ul>
- </dd>
-</dl>
+    - SmashingMagazine: [Form-Field Validation: The Errors-Only Approach](https://uxdesign.smashingmagazine.com/2012/06/27/form-field-validation-errors-only-approach/)
+    - SmashingMagazine: [Web Form Validation: Best Practices and Tutorials](https://www.smashingmagazine.com/2009/07/07/web-form-validation-best-practices-and-tutorials/)
+    - WebFX: [10 Tips for Optimizing Web Form Submission Usability](https://www.webfx.com/blog/web-design/10-tips-for-optimizing-web-form-submission-usability/)
+    - A List Apart: [Inline Validation in Web Forms](https://www.alistapart.com/articles/inline-validation-in-web-forms/)
 
-<h4 id="An_example_that_doesnt_use_the_constraint_validation_API">Пример без использования Constraint Validation API</h4>
+#### Пример без использования Constraint Validation API
 
-<p>Чтобы проиллюстрировать это дальше приводится упрощённая версия предыдущего примера, которая работает с устаревшими браузерами.</p>
+Чтобы проиллюстрировать это дальше приводится упрощённая версия предыдущего примера, которая работает с устаревшими браузерами.
 
-<p>HTML почти тот такой же; мы только удалили функционал валидации HTML5.</p>
+HTML почти тот такой же; мы только удалили функционал валидации HTML5.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;p&gt;
-    &lt;label for="mail"&gt;
-        &lt;span&gt;Please enter an email address:&lt;/span&gt;
-        &lt;input type="text" id="mail" name="mail"&gt;
-        &lt;span class="error" aria-live="polite"&gt;&lt;/span&gt;
-    &lt;/label&gt;
-  &lt;/p&gt;
-  &lt;!-- Для некоторых устаревших браузеров элементу `button` нужно добавлять
-       атрибут `type` с явно заданным значением `submit` --&gt;
-  &lt;button type="submit"&gt;Submit&lt;/button&gt;
-&lt;/form&gt;</pre>
+```html
+<form>
+  <p>
+    <label for="mail">
+        <span>Please enter an email address:</span>
+        <input type="text" id="mail" name="mail">
+        <span class="error" aria-live="polite"></span>
+    </label>
+  </p>
+  <!-- Для некоторых устаревших браузеров элементу `button` нужно добавлять
+       атрибут `type` с явно заданным значением `submit` -->
+  <button type="submit">Submit</button>
+</form>
+```
 
-<p>CSS также не требует особых изменений; мы только заменили CSS-псевдокласс {{cssxref(":invalid")}} на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.</p>
+CSS также не требует особых изменений; мы только заменили CSS-псевдокласс {{cssxref(":invalid")}} на реальный класс и не использовали селектор по атрибутам, так как он не работает в Internet Explorer 6.
 
-<pre class="brush: css">body {
+```css
+body {
   font: 1em sans-serif;
   width: 200px;
   padding: 0;
@@ -720,11 +680,12 @@ input:focus.invalid {
 
 .error.active {
   padding: 0.3em;
-}</pre>
+}
+```
 
-<p>Существенно изменился только JavaScript-код, который теперь должен выполнять гораздо больше работы.</p>
+Существенно изменился только JavaScript-код, который теперь должен выполнять гораздо больше работы.
 
-<pre class="brush: js">
+```js
 // Устаревшие браузеры поддерживают несколько способов получения DOM-узла
 const form  = document.getElementsByTagName('form')[0];
 const email = document.getElementById('mail');
@@ -736,7 +697,7 @@ let error = email;
 while ((error = error.nextSibling).nodeType != 1);
 
 // Согласно спецификации HTML5
-const emailRegExp = /^[a-zA-Z0-9.!#$%&amp;'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
+const emailRegExp = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
 
 // Многие устаревшие браузеры не поддерживают метод `addEventListener`
 // Есть простой способ заменить его; и далеко не единственный
@@ -795,51 +756,46 @@ addEvent(form, "submit", function () {
     error.textContent = "";
     error.className = "error";
   }
-});</pre>
+});
+```
 
-<p>Результат выглядит следующим образом:</p>
+Результат выглядит следующим образом:
 
-<p>{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}</p>
+{{EmbedLiveSample("An_example_that_doesnt_use_the_constraint_validation_API", "100%", 130)}}
 
-<p>Как вы можете видеть, сделать собственную валидацию не так уж и сложно. Сложность состоит лишь в том, чтобы сделать его кроссплатформенным и работающим с любой формой, которую можно создать. Для проверки формы доступно множество библиотек, например <a href="https://rickharrison.github.io/validate.js/" rel="external">Validate.js</a>.</p>
+Как вы можете видеть, сделать собственную валидацию не так уж и сложно. Сложность состоит лишь в том, чтобы сделать его кроссплатформенным и работающим с любой формой, которую можно создать. Для проверки формы доступно множество библиотек, например [Validate.js](https://rickharrison.github.io/validate.js/).
 
-<h2 id="Test_your_skills!">Проверьте свои навыки!</h2>
+## Проверьте свои навыки!
 
-<p>Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_validation">Test your skills: Form validation</a>.</p>
+Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше — [Test your skills: Form validation](/ru/docs/Learn/Forms/Test_your_skills:_Form_validation).
 
-<h2 id="Summary">Заключение</h2>
+## Заключение
 
-<p>Для проверки формы на стороне клиента иногда требуется JavaScript, если вы хотите настроить стилизацию и сообщения об ошибках, но это всегда требует от вас внимательного отношения к пользователю. Всегда помните о необходимости помогать пользователям исправлять данные, которые они вводят. Для этого обязательно нужно:</p>
+Для проверки формы на стороне клиента иногда требуется JavaScript, если вы хотите настроить стилизацию и сообщения об ошибках, но это всегда требует от вас внимательного отношения к пользователю. Всегда помните о необходимости помогать пользователям исправлять данные, которые они вводят. Для этого обязательно нужно:
 
-<ul>
- <li>Отображать явные сообщения об ошибках.</li>
- <li>Снисходительно относиться к формату ввода.</li>
- <li>Указывать, где именно возникла ошибка. Особенно в больших формах.</li>
-</ul>
+- Отображать явные сообщения об ошибках.
+- Снисходительно относиться к формату ввода.
+- Указывать, где именно возникла ошибка. Особенно в больших формах.
 
-<p>После того, как вы убедились, что форма заполнена правильно, ее можно отправлять. Дальше мы рассмотрим <a href="/ru/docs/Learn/Forms/Sending_and_retrieving_form_data">отправку данных формы</a>.</p>
+После того, как вы убедились, что форма заполнена правильно, ее можно отправлять. Дальше мы рассмотрим [отправку данных формы](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data).
 
-<p>{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}</p>
+{{PreviousMenuNext("Learn/Forms/UI_pseudo-classes", "Learn/Forms/Sending_and_retrieving_form_data", "Learn/HTML/Forms")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/ru/docs/Learn/Forms/Your_first_form">Ваша первая форма</a></li>
- <li><a href="/ru/docs/Learn/Forms/How_to_structure_a_web_form">Как структурировать веб-формы</a></li>
- <li><a href="/ru/docs/Learn/Forms/Basic_native_form_controls">Основные встроенные элементы формы</a></li>
- <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">Типы полей ввода в HTML5</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Другие элементы формы</a></li>
- <li><a href="/ru/docs/Learn/Forms/Styling_web_forms">Стилизация веб-форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Продвинутая стилизация форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI псевдоклассы</a></li>
- <li><a href="/ru/docs/Learn/Forms/Form_validation">Валидация форм на стороне клиента</a></li>
- <li><a href="/ru/docs/Learn/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li>
-</ul>
+- [Ваша первая форма](/ru/docs/Learn/Forms/Your_first_form)
+- [Как структурировать веб-формы](/ru/docs/Learn/Forms/How_to_structure_a_web_form)
+- [Основные встроенные элементы формы](/ru/docs/Learn/Forms/Basic_native_form_controls)
+- [Типы полей ввода в HTML5](/ru/docs/Learn/Forms/HTML5_input_types)
+- [Другие элементы формы](/ru/docs/Learn/Forms/Other_form_controls)
+- [Стилизация веб-форм](/ru/docs/Learn/Forms/Styling_web_forms)
+- [Продвинутая стилизация форм](/ru/docs/Learn/Forms/Advanced_form_styling)
+- [UI псевдоклассы](/ru/docs/Learn/Forms/UI_pseudo-classes)
+- [Валидация форм на стороне клиента](/ru/docs/Learn/Forms/Form_validation)
+- [Отправка данных формы](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data)
 
-<h3 id="Advanced_Topics">Продвинутые темы</h3>
+### Продвинутые темы
 
-<ul>
- <li><a href="/ru/docs/Learn/Forms/How_to_build_custom_form_controls">Как создавать кастомные элементы формы</a></li>
- <li><a href="/ru/docs/Learn/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Таблица совместимости CSS-свойств для элементов формы</a></li>
-</ul>
+- [Как создавать кастомные элементы формы](/ru/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [Отправка форм с помощью JavaScript](/ru/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [Таблица совместимости CSS-свойств для элементов формы](/ru/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ru/learn/forms/how_to_build_custom_form_controls/index.md b/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
index 7ac9bfa5b9c5ad..efee01fbf12e63 100644
--- a/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
+++ b/files/ru/learn/forms/how_to_build_custom_form_controls/index.md
@@ -11,151 +11,142 @@ tags:
 translation_of: Learn/Forms/How_to_build_custom_form_controls
 original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
 
-<p class="summary">Существует много случаев, когда возможностей <a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">стандартных виджетов HTML форм</a> недостаточно. Если вы хотите <a href="/en-US/docs/Advanced_styling_for_HTML_forms">придать лучший вид</a> каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.</p>
+Существует много случаев, когда возможностей [стандартных виджетов HTML форм](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC) недостаточно. Если вы хотите [придать лучший вид](/ru/docs/Advanced_styling_for_HTML_forms) каким-либо виджетам как, например, {{HTMLElement("select")}}, или вы хотите создать особое поведение виджета, то у вас нет другого выбора, кроме как создать собственные виджеты.
 
-<p>В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .</p>
+В этой статье мы рассмотрим как создать такой виджет. Для этого мы возьмём пример: переделка элемента {{HTMLElement("select")}} .
 
-<div class="note">
-<p><strong>Замечание:</strong> Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код  универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript-код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.</p>
-</div>
+> **Примечание:** **Замечание:** Мы сфокусируемся на создании виджетов, а не на том чтобы сделать код универсальным и многоразовым; поэтому будут использоваться некоторый нетривиальный JavaScript-код и манипуляции DOM в неизвестном контексте, что выходит за рамки этой статьи.
 
-<h2 id="Дизайн_структура_и_семантика">Дизайн, структура и семантика</h2>
-
-<p>В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно чётко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.</p>
-
-<p>В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:</p>
-
-<p><img alt="The three states of a select box" src="/files/4481/custom-select.png" style="height: 135px; width: 366px;"></p>
-
-<p>Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развёрнутое состояние (справа).</p>
-
-<p>С точки зрения реакций нужно чтобы наш виджет взаимодействовал как с мышью, так и с клавиатурой, так же как и стандартный виджет. Давайте сначала определим, как виджет приходит в каждое состояние:</p>
-
-<dl>
- <dt>Виджет в нормальном состоянии когда:</dt>
- <dd>
- <ul>
-  <li>страница загружается</li>
-  <li>виджет был активным и пользователь кликает где-то вне виджета</li>
-  <li>виджет был активным и пользователь перемещает фокус на другой виджет при помощи клавиатуры</li>
- </ul>
-
- <div class="note">
- <p><strong>Замечание:</strong> Перемещение фокуса по странице обычно осуществляется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по умолчанию <a href="http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/">комбинацией Option+Tab</a>.</p>
- </div>
- </dd>
- <dt>Виджет в активном состоянии когда:</dt>
- <dd>
- <ul>
-  <li>пользователь кликает на него</li>
-  <li>пользователь нажимает клавишу Tab, и он получает фокус</li>
-  <li>виджет был в развёрнутом состоянии и пользователь кликает на виджет.</li>
- </ul>
- </dd>
- <dt>Виджет в развёрнутом состоянии:</dt>
- <dd>
- <ul>
-  <li>виджет в любом другом состоянии и пользователь кликает на него</li>
- </ul>
- </dd>
-</dl>
-
-<p>Теперь, когда мы знаем, как изменяются состояния, важно определить, как изменить значение виджета:</p>
-
-<dl>
- <dt>Значение изменяется когда:</dt>
- <dd>
- <ul>
-  <li>пользователь кликает на один-из-вариантов когда виджет в развёрнутом состоянии</li>
-  <li>пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии</li>
- </ul>
- </dd>
-</dl>
-
-<p>Наконец, давайте определим, как будут вести себя варианты виджета:</p>
-
-<ul>
- <li>когда виджет развернут, выбранный вариант подсвечен</li>
- <li>когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние</li>
-</ul>
-
-<p>Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдёт если пользователь нажмёт клавишу "tab" когда виджет в развёрнутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.</p>
-
-<p>Другой забавный пример: что произойдёт, если пользователь нажмёт клавишу вверх или вниз когда виджет находится в развёрнутом состоянии? Это немного сложнее. Если вы предположите, что активное и развёрнутое состояние полностью различны, то ответом снова будет "ничего не произойдёт" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развёрнутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развёрнутом состоянии (мы определили только то, что произойдёт, когда виджет развернётся, но ничего более).</p>
-
-<p>В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять её, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет,  не стесняйтесь <a href="https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">выполнять пользовательские тесты</a>. Этот процесс называется UX Design (<a href="https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC">Дизайн взаимодействия с пользователем</a>). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:</p>
-
-<ul>
- <li><a href="http://www.uxmatters.com/" rel="external">UXMatters.com</a></li>
- <li><a href="http://uxdesign.com/" rel="external">UXDesign.com</a></li>
- <li><a href="http://uxdesign.smashingmagazine.com/" rel="external">The UX Design section of SmashingMagazine</a></li>
-</ul>
-
-<div class="note">
-<p><strong>Замечание:  </strong>Также, в большинстве систем, есть способ развернуть элемент {{HTMLElement("select")}} чтобы посмотреть все доступные варианты (это то-же что кликнуть мышью элемент {{HTMLElement("select")}} ).  Это возможно комбинацией Alt+Стрелка вниз для Windows и не реализовано в нашем примере —но это будет просто сделать, так как механизм уже реализован дл события <code>click</code>.</p>
-</div>
+## Дизайн, структура и семантика
 
-<h3 id="Определение_структуры_и_семантики_HTML">Определение структуры и семантики HTML</h3>
+В начале создания пользовательского виджета необходимо обрисовать что именно вы хотите. Это сэкономит драгоценное время. Особенно важно чётко определить все состояния вашего виджета. Чтобы это сделать, лучше начать с существующего виджета, состояния и реакции которого хорошо известны, так что вы сможете просто подражать им насколько это возможно.
 
-<p>Теперь, когда основная функциональность виджета определена, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот всё что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:</p>
+В нашем примере мы будем переделывать элемент {{HTMLElement("select")}}. Вот такой результат мы хотим достичь:
 
-<pre class="brush: html">&lt;!-- Это основной контейнер для нашего виджета.
-     Атрибут tabindex позволяет пользователю переместить фокус на виджет.
-     Позже мы увидим, что лучше его установить через JavaScript. --&gt;
-&lt;div class="select" tabindex="0"&gt;
+![The three states of a select box](/files/4481/custom-select.png)
+
+Этот скриншот показывает три основных состояния нашего виджета: нормальное состояние (слева); активное состояние (посередине) и развёрнутое состояние (справа).
+
+С точки зрения реакций нужно чтобы наш виджет взаимодействовал как с мышью, так и с клавиатурой, так же как и стандартный виджет. Давайте сначала определим, как виджет приходит в каждое состояние:
+
+- Виджет в нормальном состоянии когда:
+
+  - :&#x20;
+
+    - страница загружается
+    - виджет был активным и пользователь кликает где-то вне виджета
+    - виджет был активным и пользователь перемещает фокус на другой виджет при помощи клавиатуры
+
+    > **Примечание:** **Замечание:** Перемещение фокуса по странице обычно осуществляется клавишей "tab", но не везде. Например в Safari циклический переход между ссылками на странице осуществляется по умолчанию [комбинацией Option+Tab](http://www.456bereastreet.com/archive/200906/enabling_keyboard_navigation_in_mac_os_x_web_browsers/).
+
+- Виджет в активном состоянии когда:
+
+  - :&#x20;
+
+    - пользователь кликает на него
+    - пользователь нажимает клавишу Tab, и он получает фокус
+    - виджет был в развёрнутом состоянии и пользователь кликает на виджет.
+
+- Виджет в развёрнутом состоянии:
+
+  - :&#x20;
 
-  &lt;!-- Этот контейнер послужит для отображения текущего значения виджета --&gt;
-  &lt;span class="value"&gt;Cherry&lt;/span&gt;
+    - виджет в любом другом состоянии и пользователь кликает на него
 
-  &lt;!-- Этот контейнер содержит все варинты. доступные для нашего виджета.
-       Так как это список, то есть смысл использовать элемент ul. --&gt;
-  &lt;ul class="optList"&gt;
-    &lt;!-- Каждый вариант содержит то значение, которое будет отображено, позже мы увидим
-         как получить то значение, которое будет отппралено вместе с данными формы --&gt;
-    &lt;li class="option"&gt;Cherry&lt;/li&gt;
-    &lt;li class="option"&gt;Lemon&lt;/li&gt;
-    &lt;li class="option"&gt;Banana&lt;/li&gt;
-    &lt;li class="option"&gt;Strawberry&lt;/li&gt;
-    &lt;li class="option"&gt;Apple&lt;/li&gt;
-  &lt;/ul&gt;
+Теперь, когда мы знаем, как изменяются состояния, важно определить, как изменить значение виджета:
 
-&lt;/div&gt;</pre>
+- Значение изменяется когда:
 
-<p>Обратите внимание на использование имён классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придётся жёстко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.</p>
+  - :&#x20;
+
+    - пользователь кликает на один-из-вариантов когда виджет в развёрнутом состоянии
+    - пользователь нажимает клавиши стрелка вверх или вниз когда виджет в активном состоянии
+
+Наконец, давайте определим, как будут вести себя варианты виджета:
+
+- когда виджет развернут, выбранный вариант подсвечен
+- когда курсор мыши находится над вариантом, он подсвечен и ранее подсвеченный вариант возвращается в его обычное состояние
+
+Для нашего примера остановимся на этом; но, если вы внимательный читатель, вы заметите, что некоторые реакции отсутствуют. Например, как вы думаете, что произойдёт если пользователь нажмёт клавишу "tab" когда виджет в развёрнутом состоянии? Ответом будет... ничего. OK, правильная реакция кажется очевидной, но поскольку она не определена в наших спецификациях, то очень легко пропустить реализацию этой реакции. Это особенно верно для командной работы, когда те, кто определяет какими должны быть реакции виджета сами не реализуют их.
+
+Другой забавный пример: что произойдёт, если пользователь нажмёт клавишу вверх или вниз когда виджет находится в развёрнутом состоянии? Это немного сложнее. Если вы предположите, что активное и развёрнутое состояние полностью различны, то ответом снова будет "ничего не произойдёт" , потому что мы не определили никаких взаимодействий с клавиатурой в открытом состоянии. С другой стороны, если вы предположите, что активное и развёрнутое состояние немного похожи, значение может изменится, но выбранный вариант точно не будет соответственно подсвечен, опять же потому, что мы не определили никаких действий с клавиатуры над вариантами когда виджет находится в развёрнутом состоянии (мы определили только то, что произойдёт, когда виджет развернётся, но ничего более).
+
+В нашем примере пропущенные спецификации очевидны, так что мы с ними справимся, но это может стать реальной проблемой для новых экзотических виджетов, когда никто не имеет ни малейшего представления о том как они должны реагировать. Всегда лучше потратить время на этом этапе дизайна, потому что если вы плохо определите, или забудете определить реакцию виджета, то будет очень сложно изменять её, когда пользователи уже привыкнут. Если у вас есть сомнения - спросите мнения у окружающих, и, если позволяет бюджет, не стесняйтесь [выполнять пользовательские тесты](https://ru.wikipedia.org/wiki/%D0%AE%D0%B7%D0%B0%D0%B1%D0%B8%D0%BB%D0%B8%D1%82%D0%B8-%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5). Этот процесс называется UX Design ([Дизайн взаимодействия с пользователем](https://ru.wikipedia.org/wiki/%D0%94%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F_%D1%81_%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D0%B5%D0%BB%D0%B5%D0%BC)). Если вы хотите узнать больше об этой теме, вам следует посетить следующие полезные ресурсы:
+
+- [UXMatters.com](http://www.uxmatters.com/)
+- [UXDesign.com](http://uxdesign.com/)
+- [The UX Design section of SmashingMagazine](http://uxdesign.smashingmagazine.com/)
+
+> **Примечание:** **Замечание:** Также, в большинстве систем, есть способ развернуть элемент {{HTMLElement("select")}} чтобы посмотреть все доступные варианты (это то-же что кликнуть мышью элемент {{HTMLElement("select")}} ). Это возможно комбинацией Alt+Стрелка вниз для Windows и не реализовано в нашем примере —но это будет просто сделать, так как механизм уже реализован дл события `click`.
+
+### Определение структуры и семантики HTML
+
+Теперь, когда основная функциональность виджета определена, пора начать создание виджета. Первым делом определим его HTML структуру и придадим основную семантику. Вот всё что нам нужно чтобы переделать элемент {{HTMLElement("select")}}:
+
+```html
+<!-- Это основной контейнер для нашего виджета.
+     Атрибут tabindex позволяет пользователю переместить фокус на виджет.
+     Позже мы увидим, что лучше его установить через JavaScript. -->
+<div class="select" tabindex="0">
+
+  <!-- Этот контейнер послужит для отображения текущего значения виджета -->
+  <span class="value">Cherry</span>
+
+  <!-- Этот контейнер содержит все варинты. доступные для нашего виджета.
+       Так как это список, то есть смысл использовать элемент ul. -->
+  <ul class="optList">
+    <!-- Каждый вариант содержит то значение, которое будет отображено, позже мы увидим
+         как получить то значение, которое будет отппралено вместе с данными формы -->
+    <li class="option">Cherry</li>
+    <li class="option">Lemon</li>
+    <li class="option">Banana</li>
+    <li class="option">Strawberry</li>
+    <li class="option">Apple</li>
+  </ul>
+
+</div>
+```
 
-<h3 id="Создание_внешнего_вида_с_помощью_CSS">Создание внешнего вида с помощью CSS</h3>
+Обратите внимание на использование имён классов: они описывают каждый соответствующий элемент независимо от фактически используемых базовых элементов HTML. Важно быть уверенными что нам не придётся жёстко привязывать наши CSS и JavaScript к HTML структуре,тогда мы сможем позже вносить изменения не нарушая код виджета. Например, если вы захотите создать эквивалент элемента {{HTMLElement("optgroup")}}.
 
-<p>Теперь у нас есть структура и мы можем заняться дизайном нашего виджета. Весь смысл создания нашего собственного виджета в том, чтобы мы могли придать ему такой внешний вид, как мы захотим. Поэтому мы разделим нашу работу с CSS на две части: в первой части будут правила CSS абсолютно необходимые чтобы реакции нашего виджета были как у элемента {{HTMLElement("select")}} , а вторая чать будет состоять из красивеньких рюшечек, чтобы виджет выглядел так, как нам нравится.</p>
+### Создание внешнего вида с помощью CSS
 
-<h4 id="Обязательные_стили">Обязательные стили</h4>
+Теперь у нас есть структура и мы можем заняться дизайном нашего виджета. Весь смысл создания нашего собственного виджета в том, чтобы мы могли придать ему такой внешний вид, как мы захотим. Поэтому мы разделим нашу работу с CSS на две части: в первой части будут правила CSS абсолютно необходимые чтобы реакции нашего виджета были как у элемента {{HTMLElement("select")}} , а вторая чать будет состоять из красивеньких рюшечек, чтобы виджет выглядел так, как нам нравится.
 
-<p>Обязательные стили - это те, которые необходимы для обработки трёх состояний нашего виджета..</p>
+#### Обязательные стили
 
-<pre class="brush: css">.select {
+Обязательные стили - это те, которые необходимы для обработки трёх состояний нашего виджета..
+
+```css
+.select {
   /* Это создаст контекст позиционирования для списка вариантов */
   position: relative;
 
   /* Это сделает наш виджет частью текстового потока и одновременно сделает его
      изменяемого размера */
   display : inline-block;
-}</pre>
+}
+```
 
-<p>Ещё нам нужен дополнительный класс <code>active,</code> чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль ещё и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.</p>
+Ещё нам нужен дополнительный класс `active,` чтобы определить, как будет выглядеть наш виджет в активном состоянии. Так как наш виджет может находится в фокусе, то мы укажем этот стиль ещё и для псевдокласса {{cssxref(":focus")}} чтобы быть уверенными, что виджет будет вести себя одинаково.
 
-<pre class="brush: css">.select .active,
+```css
+.select .active,
 .select:focus {
   outline: none;
 
   /* Это свойство - box-shadow - необязательно, однако нам важно видеть активное состояние
     т.к. мы используем его по умолчанию. Можете спокойно его переопределить. */
   box-shadow: 0 0 3px 1px #227755;
-}</pre>
+}
+```
 
-<p>Теперь давайте стилизуем список опций:</p>
+Теперь давайте стилизуем список опций:
 
-<pre class="brush: css">/* Селектор .select здесь применён для удобства (<a href="https://ru.wikipedia.org/wiki/%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%81%D0%B0%D1%85%D0%B0%D1%80">синтаксический сахар</a>), чтобы быть уверенными,
+```css
+/* Селектор .select здесь применён для удобства (синтаксический сахар), чтобы быть уверенными,
    что определяемые классы находятся в нашем виджете. */
 .select .optList {
 /* Это позволит нам быть уверенными, что список вариантов будет показан ниже значения
@@ -163,22 +154,26 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
   position : absolute;
   top      : 100%;
   left     : 0;
-}</pre>
+}
+```
 
-<p>Ещё нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развёрнутого состояния, т.к. они не совсем совпадают.</p>
+Ещё нам нужен дополнительный класс, для обращения к списку вариантов, когда он скрыт. Это необходимо чтобы справиться с различиями активного и развёрнутого состояния, т.к. они не совсем совпадают.
 
-<pre class="brush: css">.select .optList.hidden {
+```css
+.select .optList.hidden {
   /* Это самый простой из доступных способов путь скрыть список,
      а о доступности мы ещё поговорим в конце */
   max-height: 0;
   visibility: hidden;
-}</pre>
+}
+```
 
-<h4 id="Украшательства">Украшательства</h4>
+#### Украшательства
 
-<p>Теперь, когда основная функциональность на месте, можем начинать развлекаться. То, что мы сделаем дальше, является всего лишь примером того, что возможно, и будет соответствовать скриншоту в начале этой статьи. Но вы можете свободно экспериментировать и посмотреть на что вы способны.</p>
+Теперь, когда основная функциональность на месте, можем начинать развлекаться. То, что мы сделаем дальше, является всего лишь примером того, что возможно, и будет соответствовать скриншоту в начале этой статьи. Но вы можете свободно экспериментировать и посмотреть на что вы способны.
 
-<pre class="brush: css">.select {
+```css
+.select {
   /* Все размеры будут выражены в em по соображениям удобства
      (чтобы быть уверенными, что виджет будет изменять размер если пользователь будет
      использовать увеличение в текстовом режиме браузера). Вычисления сделаны из расчёта что
@@ -219,11 +214,13 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
   /* И, если содержимое слишком длинное, лучше иметь красивенькие точечки. */
   white-space  : nowrap;
   text-overflow: ellipsis;
-}</pre>
+}
+```
 
-<p>Нам не нужен дополнительный элемент, чтобы создать стрелку вниз; вместо этого мы используем псевдоэлемент {{cssxref(":after")}}. Также её можно создать при помощи простого фонового изображения в классе <code>select</code>.</p>
+Нам не нужен дополнительный элемент, чтобы создать стрелку вниз; вместо этого мы используем псевдоэлемент {{cssxref(":after")}}. Также её можно создать при помощи простого фонового изображения в классе `select`.
 
-<pre class="brush: css">.select:after {
+```css
+.select:after {
   content : "▼"; /* Мы используем Unicode символ U+25BC; смотрите http://www.utf8-chartable.de */
   position: absolute;
   z-index : 1; /* Важно чтобы стрелка не перекрывала элементы списка */
@@ -243,11 +240,13 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
   background-color : #000;
   color : #FFF;
   text-align : center;
-}</pre>
+}
+```
 
-<p>Далее стилизуем список вариантов:</p>
+Далее стилизуем список вариантов:
 
-<pre class="brush: css">.select .optList {
+```css
+.select .optList {
   z-index : 2; /* Мы явно сказали, что список вариантов всегда будет перекрывать стрелку вниз */
 
   /* это сбросит значения стиля по умолчанию для элемента ul */
@@ -276,99 +275,111 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
 
   box-shadow: 0 .2em .4em rgba(0,0,0,.4); /* 0 2px 4px */
   background: #f0f0f0;
-}</pre>
+}
+```
 
-<p>Для вариантов нам нужно добавить класс <code>highlight</code> чтобы сделать возможным идентифицировать значение которе пользователь выберет (или выбрал).</p>
+Для вариантов нам нужно добавить класс `highlight` чтобы сделать возможным идентифицировать значение которе пользователь выберет (или выбрал).
 
-<pre class="brush: css">.select .option {
+```css
+.select .option {
   padding: .2em .3em; /* 2px 3px */
 }
 
 .select .highlight {
   background: #000;
   color: #FFFFFF;
-}</pre>
+}
+```
 
-<p>Итак, вот результат с нашими тремя состояниями:</p>
+Итак, вот результат с нашими тремя состояниями:
 
 <table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Основное состояние</th>
-   <th scope="col" style="text-align: center;">Активное состояние</th>
-   <th scope="col" style="text-align: center;">Развёрнутое состояние</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-   <td>{{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-   <td>{{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}</td>
-  </tr>
-  <tr>
-   <td colspan="3" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1">Посмотреть исходный код</a></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col" style="text-align: center">Основное состояние</th>
+      <th scope="col" style="text-align: center">Активное состояние</th>
+      <th scope="col" style="text-align: center">Развёрнутое состояние</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{EmbedLiveSample("Basic_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
+      </td>
+      <td>
+        {{EmbedLiveSample("Active_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
+      </td>
+      <td>
+        {{EmbedLiveSample("Open_state",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_1")}}
+      </td>
+    </tr>
+    <tr>
+      <td colspan="3" style="text-align: center">
+        <a
+          href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1"
+          title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_1"
+          >Посмотреть исходный код</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="Оживи_свой_виджет_с_JavaScript">Оживи свой виджет с JavaScript</h2>
+## Оживи свой виджет с JavaScript
 
-<p>Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.</p>
+Теперь, когда наш дизайн и структура готовы, мы можем написать код на JavaScript чтобы виджет действительно заработал.
 
-<div class="warning">
-<p><strong>Предупреждение:</strong> Следующий код представлен в образовательных целях и не может быть использован как-есть. Помимо прочего, как мы убедимся, он не пригоден для дальнейшего развития и не будет работать в устаревших браузерах. В нем также есть избыточность которую необходимо оптимизировать использования в рабочем режиме.</p>
-</div>
+> **Предупреждение:** Следующий код представлен в образовательных целях и не может быть использован как-есть. Помимо прочего, как мы убедимся, он не пригоден для дальнейшего развития и не будет работать в устаревших браузерах. В нем также есть избыточность которую необходимо оптимизировать использования в рабочем режиме.
 
-<div class="note">
-<p><strong>Замечание:</strong> Создание многократно используемых виджетов может быть немного сложнее. <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html" rel="external">W3C Web Component draft</a> является одним из ответов на этот конкретный вопрос. <a href="http://x-tags.org/" rel="external">The X-Tag project</a> попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.</p>
-</div>
+> **Примечание:** **Замечание:** Создание многократно используемых виджетов может быть немного сложнее. [W3C Web Component draft](http://dvcs.w3.org/hg/webcomponents/raw-file/tip/explainer/index.html) является одним из ответов на этот конкретный вопрос. [The X-Tag project](http://x-tags.org/) попытка реализовать эту спецификацию; пожалуйста, посмотрите этот проект.
 
-<h3 id="Почему_он_не_работает">Почему он не работает?</h3>
+### Почему он не работает?
 
-<p>Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере <strong>это ненадёжная технология</strong>. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях  JavaScript невозможно запустить в браузере:</p>
+Прежде чем мы начнём, запомните одну важную вещь о JavaScript: в браузере **это ненадёжная технология**. Когда вы создаёте пользовательские виджеты, вы будете полагаться на JavaScript потому что это необходимое звено для связки. Однако во многих случаях JavaScript невозможно запустить в браузере:
 
-<ul>
- <li>Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.</li>
- <li>Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надёжная.</li>
- <li>Скрипт глючит.Вы должны всегда учитывать эту возможность.</li>
- <li>Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.</li>
- <li>Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение <a href="https://addons.mozilla.org/fr/firefox/addon/noscript/" rel="external">NoScript</a> в Firefox, или расширение <a href="https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn" rel="external">NotScripts</a> в Chrome).</li>
- <li>Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.</li>
-</ul>
+- Пользователь отключил JavaScript: Это самый редкий случай; сейчас очень мало людей отключают JavaScript.
+- Скрипт не загружается. Это один из самых распространённых случаев, особенно в мобильном мире, где сеть не очень надёжная.
+- Скрипт глючит.Вы должны всегда учитывать эту возможность.
+- Скрипт конфликтует со сторонним скриптом. Это может случиться со скриптами отслеживания или любыми букмарклетами (bookmarklets), которые использует пользователь.
+- Скрипт конфликтует с расширением браузера или зависит от него (такими как расширение [NoScript](https://addons.mozilla.org/fr/firefox/addon/noscript/) в Firefox, или расширение [NotScripts](https://chrome.google.com/webstore/detail/notscripts/odjhifogjcknibkahlpidmdajjpkkcfn) в Chrome).
+- Пользователь использует устаревший браузер, и одна из требуемых функций не поддерживается. Это часто случается, когда вы используете передовые API.
 
-<p>Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.</p>
+Из-за этого очень важно серьёзно подумать о том, что произойдёт, если JavaScript не сработает. Детальное рассмотрение этой проблемы выходит за рамки данной статьи, поскольку эта проблема тесно связана с тем, насколько универсальным и многократно используемым вы хотите сделать свой сценарий, но мы рассмотрим основы этого в нашем примере.
 
-<p>В нашем примере, если наш JavaScript-код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.</p>
+В нашем примере, если наш JavaScript-код не работает, мы используем стандартный элемент {{HTMLElement("select")}}. Для этого, нам нужны две вещи.
 
-<p>Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.</p>
+Во-первых нам нужно добавить стандартный элемент {{HTMLElement("select")}} перед каждым использованием нашего пользовательского виджета. Это также необходимо, чтобы отправить данные из нашего пользовательского виджета вместе с остальными данными формы; подробнее рассмотрим это позже.
 
-<pre class="brush: html">&lt;body class="no-widget"&gt;
-  &lt;form&gt;
-    &lt;select name="myFruit"&gt;
-      &lt;option&gt;Cherry&lt;/option&gt;
-      &lt;option&gt;Lemon&lt;/option&gt;
-      &lt;option&gt;Banana&lt;/option&gt;
-      &lt;option&gt;Strawberry&lt;/option&gt;
-      &lt;option&gt;Apple&lt;/option&gt;
-    &lt;/select&gt;
+```html
+<body class="no-widget">
+  <form>
+    <select name="myFruit">
+      <option>Cherry</option>
+      <option>Lemon</option>
+      <option>Banana</option>
+      <option>Strawberry</option>
+      <option>Apple</option>
+    </select>
 
-    &lt;div class="select"&gt;
-      &lt;span class="value"&gt;Cherry&lt;/span&gt;
-      &lt;ul class="optList hidden"&gt;
-        &lt;li class="option"&gt;Cherry&lt;/li&gt;
-        &lt;li class="option"&gt;Lemon&lt;/li&gt;
-        &lt;li class="option"&gt;Banana&lt;/li&gt;
-        &lt;li class="option"&gt;Strawberry&lt;/li&gt;
-        &lt;li class="option"&gt;Apple&lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/div&gt;
-  &lt;/form&gt;
+    <div class="select">
+      <span class="value">Cherry</span>
+      <ul class="optList hidden">
+        <li class="option">Cherry</li>
+        <li class="option">Lemon</li>
+        <li class="option">Banana</li>
+        <li class="option">Strawberry</li>
+        <li class="option">Apple</li>
+      </ul>
+    </div>
+  </form>
 
-&lt;/body&gt;</pre>
+</body>
+```
 
-<p>Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть  "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.</p>
+Во-вторых нам нужно два новых класса, чтобы скрыть ненужные элементы (то есть "настоящие" элементы {{HTMLElement("select")}}, если скрипт запустился, или наш пользовательский виджет, если скрипт не запустился). По умолчанию наш HTML код скрывает наш пользовательский виджет.
 
-<pre class="brush: css">.widget select,
+```css
+.widget select,
 .no-widget .select {
   /* Этот CSS селектор значит:
      - или мы присваиваем классу body значение "widget" и таким образом мы скрываем элемент {{HTMLElement("select")}}
@@ -378,65 +389,77 @@ original_slug: Learn/HTML/Forms/How_to_build_custom_form_widgets
   left     : -5000em;
   height   : 0;
   overflow : hidden;
-}</pre>
+}
+```
 
-<p>Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс <code>no-widget</code> и добавит класс <code>widget</code>, чем поменяет видимость элемента  {{HTMLElement("select")}} и нашего пользовательского виджета.</p>
+Теперь нам нужен модуль JavaScript, чтобы определить, запущен скрипт или нет. Этот модуль очень простой: если наш скрипт запустится во время загрузки страницы, то он удалит класс класс `no-widget` и добавит класс `widget`, чем поменяет видимость элемента {{HTMLElement("select")}} и нашего пользовательского виджета.
 
-<pre class="brush: js">window.addEventListener("load", function () {
+```js
+window.addEventListener("load", function () {
   document.body.classList.remove("no-widget");
   document.body.classList.add("widget");
-});</pre>
+});
+```
 
 <table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Без JS</th>
-   <th scope="col" style="text-align: center;">С JS</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
-   <td>{{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}</td>
-  </tr>
-  <tr>
-   <td colspan="2" style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Посмотреть исходный код</a></td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col" style="text-align: center">Без JS</th>
+      <th scope="col" style="text-align: center">С JS</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        {{EmbedLiveSample("No_JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
+      </td>
+      <td>
+        {{EmbedLiveSample("JS",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_2")}}
+      </td>
+    </tr>
+    <tr>
+      <td colspan="2" style="text-align: center">
+        <a
+          href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2"
+          title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2"
+          >Посмотреть исходный код</a
+        >
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<div class="note">
-<p><strong>Замечание:</strong> Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.</p>
-</div>
+> **Примечание:** **Замечание:** Если вы действительно хотите сделать свой код универсальным и многоразовым, то вместо переключения классов гораздо лучше просто добавить класс элементам {{HTMLElement("select")}} чтобы их скрыть, и динамически добавлять дерево DOM представляющее пользовательский виджет после каждого элемента {{HTMLElement("select")}} на странице.
 
-<h3 id="Облегчение_работы">Облегчение работы</h3>
+### Облегчение работы
 
-<p>В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами  (особенно со старым добрым Internet Explorer).</p>
+В коде который мы собираемся написать, для выполнения всех необходимых действий мы будем использовать стандартный DOM API. Однако, хотя поддержка DOM API в браузерах стала гораздо лучше, все ещё есть нюансы с устраевшеними браузерами (особенно со старым добрым Internet Explorer).
 
-<p>Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как <a href="http://jquery.com/" rel="external">jQuery</a>, <a href="https://github.com/julienw/dollardom" rel="external">$dom</a>, <a href="http://prototypejs.org/" rel="external">prototype</a>, <a href="http://dojotoolkit.org/" rel="external">Dojo</a>, <a href="http://yuilibrary.com/" rel="external">YUI</a>, и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку <a href="http://yepnopejs.com/" rel="external">yepnope</a>).</p>
+Чтобы избежать неприятностей с устаревшими браузерами есть два способа: использовать отдельный фреймворк такой как [jQuery](http://jquery.com/), [$dom](https://github.com/julienw/dollardom), [prototype](http://prototypejs.org/), [Dojo](http://dojotoolkit.org/), [YUI](http://yuilibrary.com/), и т.п., или самостоятельно реализовать недостающие функции которые вам нужны (что можно легко сделать через условную загрузку, например используя библиотеку [yepnope](http://yepnopejs.com/)).
 
-<p>Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):</p>
+Мы планируем использовать следующие функции (от самых рискованных до самых безопасных):
 
-<ol>
- <li>{{domxref("element.classList","classList")}}</li>
- <li>{{domxref("EventTarget.addEventListener","addEventListener")}}</li>
- <li><code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code> (This is not DOM but modern JavaScript)</li>
- <li>{{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}</li>
-</ol>
+1.  {{domxref("element.classList","classList")}}
+2.  {{domxref("EventTarget.addEventListener","addEventListener")}}
+3.  [`forEach`](/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach") (This is not DOM but modern JavaScript)
+4.  {{domxref("element.querySelector","querySelector")}} and {{domxref("element.querySelectorAll","querySelectorAll")}}
 
-<p>Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array">Array</a></code>. Это важно потому, что объекты  <code>Array</code> поддерживают функцию <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach" title="/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach">forEach</a></code>, а {{domxref("NodeList")}} не поддерживает. Так как  {{domxref("NodeList")}} очень похож на <code>Array</code> и нам очень удобно использовать <code>forEach</code>, мы можем просто добавить <code>forEach</code> к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:</p>
+Помимо доступности этих специфических функций, остаётся ещё одна проблема чтобы начать. Объект возвращаемый функцией {{domxref("element.querySelectorAll","querySelectorAll()")}} имеет тип {{domxref("NodeList")}} что отличается от [`Array`](/en-US/docs/JavaScript/Reference/Global_Objects/Array "/en-US/docs/JavaScript/Reference/Global_Objects/Array"). Это важно потому, что объекты `Array` поддерживают функцию [`forEach`](/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach "/en-US/docs/JavaScript/Reference/Global_Objects/Array/forEach"), а {{domxref("NodeList")}} не поддерживает. Так как {{domxref("NodeList")}} очень похож на `Array` и нам очень удобно использовать `forEach`, мы можем просто добавить `forEach` к объекту {{domxref("NodeList")}} чтобы облегчить нам жизнь, например так:
 
-<pre class="brush: js">NodeList.prototype.forEach = function (callback) {
+```js
+NodeList.prototype.forEach = function (callback) {
   Array.prototype.forEach.call(this, callback);
-}</pre>
+}
+```
 
-<p>Мы не шутили, когда сказали, что это легко сделать.</p>
+Мы не шутили, когда сказали, что это легко сделать.
 
-<h3 id="Создание_процедур_обработки_событий">Создание процедур обработки событий</h3>
+### Создание процедур обработки событий
 
-<p>Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.</p>
+Итак, начало положено, и мы можем приступить к функциям, которые будут использоваться для взаимодействия с пользователем.
 
-<pre class="brush: js">// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован
+```js
+// Эта функция будет вызываться каждый раз, когда наш виджет будет деактивирован
 // Ей передаётся один параметр
 // select : DOM нода класса `select` который должен быть деактивирован
 function deactivateSelect(select) {
@@ -500,13 +523,15 @@ function highlightOption(select, option) {
 
   // Подсвечиваем нужный вариант
   option.classList.add('highlight');
-};</pre>
+};
+```
 
-<p>Это все, что вам нужно для обработки различных состояний пользовательского виджета.</p>
+Это все, что вам нужно для обработки различных состояний пользовательского виджета.
 
-<p>Далее мы связываем эти функции с соответствующими событиями:</p>
+Далее мы связываем эти функции с соответствующими событиями:
 
-<pre class="brush: js">// Мы обрабатываем событие при загрузке документа.
+```js
+// Мы обрабатываем событие при загрузке документа.
 window.addEventListener('load', function () {
   var selectList = document.querySelectorAll('.select');
 
@@ -554,35 +579,26 @@ window.addEventListener('load', function () {
       deactivateSelect(select);
     });
   });
-});</pre>
+});
+```
 
-<p>В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.</p>
+В этот момент наш виджет будет изменять состояние в соответствии с нашим дизайном, но не будет обновлять его значение. С этим мы разберёмся дальше.
 
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3">Посмотреть исходный код</a></td>
-  </tr>
- </tbody>
-</table>
+| Пример                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_3")}} |
+| [Посмотреть исходный код](/ru/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_3)                                                    |
 
-<h3 id="Обработка_значения_виджета">Обработка значения виджета</h3>
+### Обработка значения виджета
 
-<p>Теперь, когда наш виджет работает, мы должны добавить код, чтобы обновить его значение в соответствии с выбором пользователя и сделать возможным отправку этого значения вместе с данными формы.</p>
+Теперь, когда наш виджет работает, мы должны добавить код, чтобы обновить его значение в соответствии с выбором пользователя и сделать возможным отправку этого значения вместе с данными формы.
 
-<p>Самый простой способ сделать это - использовать встроенный виджет который также есть в нашей форме. Такой виджет будет отслеживать значение со всеми встроенными элементами управления, предоставленными браузером, и значение будет отправлено, как обычно, при отправке формы. Нет смысла заново изобретать велосипед, когда все это уже сделано за нас.</p>
+Самый простой способ сделать это - использовать встроенный виджет который также есть в нашей форме. Такой виджет будет отслеживать значение со всеми встроенными элементами управления, предоставленными браузером, и значение будет отправлено, как обычно, при отправке формы. Нет смысла заново изобретать велосипед, когда все это уже сделано за нас.
 
-<p>Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственным виджетом:</p>
+Как было показано ранее, у нас есть стандартный виджет {{HTMLElement("select")}} в качестве запасного варианта для повышения доступности; поэтому мы просто синхронизируем его значение с нашим собственным виджетом:
 
-<pre class="brush: js">// Эта функция обновляет отображённое значение и синхронизирует его со стандартным виджетом
+```js
+// Эта функция обновляет отображённое значение и синхронизирует его со стандартным виджетом
 // Ей передаётся два параметра:
 // select : DOM нода класса `select` содержащая значение которое будет обновлено
 // index  : индекс выбранного значения
@@ -617,11 +633,13 @@ function getIndex(select) {
   var nativeWidget = select.previousElementSibling;
 
   return nativeWidget.selectedIndex;
-};</pre>
+};
+```
 
-<p>Используя эти две функции мы можем связать стандартный виджет с пользовательским:</p>
+Используя эти две функции мы можем связать стандартный виджет с пользовательским:
 
-<pre class="brush: js">// Мы обрабатываем привязку события при загрузке документа.
+```js
+// Мы обрабатываем привязку события при загрузке документа.
 window.addEventListener('load', function () {
   var selectList = document.querySelectorAll('.select');
 
@@ -653,77 +671,68 @@ window.addEventListener('load', function () {
           index  = getIndex(select);
 
       // Когда пользователь нажимает стрелку вниз, мы переходим на следующий вариант
-      if (event.keyCode === 40 &amp;&amp; index &lt; length - 1) { index++; }
+      if (event.keyCode === 40 && index < length - 1) { index++; }
 
       // Когда пользователь нажимает стрелку вверх, мы переходим на предыдущий вариант
-      if (event.keyCode === 38 &amp;&amp; index &gt; 0) { index--; }
+      if (event.keyCode === 38 && index > 0) { index--; }
 
       updateValue(select, index);
     });
   });
-});</pre>
+});
+```
 
-<p>В приведённом выше коде стоить отметить свойство <code><a href="/en-US/docs/Web/API/HTMLElement/tabIndex" title="/en-US/docs/Web/API/HTMLElement/tabIndex">tabIndex</a></code>. Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.</p>
+В приведённом выше коде стоить отметить свойство [`tabIndex`](/en-US/docs/Web/API/HTMLElement/tabIndex "/en-US/docs/Web/API/HTMLElement/tabIndex"). Использование этого свойства необходимо чтобы стандартный виджет никогда не получил фокус, и чтобы убедиться, что наш пользовательский виджет получает фокус когда пользователь использует клавиатуру или мышь.
 
-<p>С этим мы закончили! Вот результат:</p>
+С этим мы закончили! Вот результат:
 
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4">Посмотреть исходный код</a></td>
-  </tr>
- </tbody>
-</table>
+| Пример                                                                                                                                       |
+| -------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_4")}} |
+| [Посмотреть исходный код](/ru/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_4)                                                    |
 
-<p>Но секундочку, мы точно закончили?</p>
+Но секундочку, мы точно закончили?
 
-<h2 id="Делаем_доступным">Делаем доступным</h2>
+## Делаем доступным
 
-<p>Мы создали нечто работающее, и, хотя это далеко от полнофункционального выпадающего списка, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как раскрывающейся список, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это он и есть. Короче говоря, этот хорошенький список для выбора фруктов не является доступным для людей с ограниченными возможностями!</p>
+Мы создали нечто работающее, и, хотя это далеко от полнофункционального выпадающего списка, работает это хорошо. Однако то, что мы сделали, это не более, чем возня с DOM. У него нет настоящей семантики, и хотя оно выглядит как раскрывающейся список, с точки зрения браузера - это не так, поэтому вспомогательные технологии не смогут понять что это он и есть. Короче говоря, этот хорошенький список для выбора фруктов не является доступным для людей с ограниченными возможностями!
 
-<p>К счастью существует решение, и оно называется <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a>. ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой <a href="http://www.w3.org/TR/wai-aria/" rel="external">W3C спецификацию</a> специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.</p>
+К счастью существует решение, и оно называется [ARIA](/ru/docs/Accessibility/ARIA). ARIA - аббревиатура для "Accessible Rich Internet Application" (Доступное всем интернет приложение), и представляет собой [W3C спецификацию](http://www.w3.org/TR/wai-aria/) специально разработанную для того, что мы здесь делаем: делаем веб приложения и пользовательские виджеты ассистивными (доступными для людей с ограниченными возможностями). В основном, это набор атрибутов, которые расширяют HTML, чтобы мы смогли лучше описать роли, состояния и свойства, так что только что изобретённый элемент выглядит как будто он был тем стандартным, за которого он себя выдаёт. Использовать эти атрибуты очень просто, поэтому давайте сделаем это.
 
-<h3 id="Атрибут_role">Атрибут <code>role</code></h3>
+### Атрибут `role`
 
-<p>Ключевой атрибут используемый в <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> - это <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a>. Атрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code>. Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью <code>option</code>).</p>
+Ключевой атрибут используемый в [ARIA](/ru/docs/Accessibility/ARIA) - это [`role`](/ru/docs/Accessibility/ARIA/ARIA_Techniques). Атрибут [`role`](/ru/docs/Accessibility/ARIA/ARIA_Techniques) принимает значение, определяющее для чего используется элемент. Каждая роль определяет свои собственные требования и поведение. В нашем примере мы используем роль [`listbox`](/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role"). Это "составная роль" ("composite role"), т.е. элементы такой роли имеют потомков, у каждого из которых есть отдельная роль (в данном случае, как минимум один дочерний элемент с ролью `option`).
 
-<p>Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли <code>grid</code>, а элемент {{HTMLElement("ul")}} соответствует роли <code>list</code>. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль <code>listbox</code> нашего виджета заменит роль <code>list</code> элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль <code>presentation</code>. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элементу {{HTMLElement("ul")}}.</p>
+Стоит также отметить что ARIA определяет роли, которые по умолчанию применяются к стандартной разметке HTML. Например, элемент {{HTMLElement("table")}} соответствует роли `grid`, а элемент {{HTMLElement("ul")}} соответствует роли `list`. Так как мы используем элемент {{HTMLElement("ul")}}, то нам необходимо убедиться что роль `listbox` нашего виджета заменит роль `list` элемента {{HTMLElement("ul")}}. С этой целью, мы будем использовать роль `presentation`. Эта роль разработана чтобы можно было отметить, что элемент не имеет особого значения, а используется исключительно чтобы представить информацию. Мы применим его к нашему элементу {{HTMLElement("ul")}}.
 
-<p>Чтобы ввести роль <code><a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role">listbox</a></code> нам нужно просто внести следующие изменения в HTML:</p>
+Чтобы ввести роль [`listbox`](/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role "/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_listbox_role") нам нужно просто внести следующие изменения в HTML:
 
-<pre class="brush: html">&lt;!-- Мы добавили атрибут role="listbox" в наш элемент верхнего уровня --&gt;
-&lt;div class="select" role="listbox"&gt;
-  &lt;span class="value"&gt;Cherry&lt;/span&gt;
-  &lt;!-- Также мы добавили атрибут role="presentation" в элемент ul --&gt;
-  &lt;ul class="optList" role="presentation"&gt;
-    &lt;!-- И мы добавили атрибут role="option" во все элементы li --&gt;
-    &lt;li role="option" class="option"&gt;Cherry&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Lemon&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Banana&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Strawberry&lt;/li&gt;
-    &lt;li role="option" class="option"&gt;Apple&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;</pre>
-
-<div class="note">
-<p><strong>Замечание:</strong> Включение как атрибута <code>role</code> так и атрибута <code>class</code> необходимо только если вы хотите обеспечить поддержку устаревших браузеров, которые не поддерживают  <a href="/en-US/docs/CSS/Attribute_selectors">селекторы атрибутов CSS</a>.</p>
+```html
+<!-- Мы добавили атрибут role="listbox" в наш элемент верхнего уровня -->
+<div class="select" role="listbox">
+  <span class="value">Cherry</span>
+  <!-- Также мы добавили атрибут role="presentation" в элемент ul -->
+  <ul class="optList" role="presentation">
+    <!-- И мы добавили атрибут role="option" во все элементы li -->
+    <li role="option" class="option">Cherry</li>
+    <li role="option" class="option">Lemon</li>
+    <li role="option" class="option">Banana</li>
+    <li role="option" class="option">Strawberry</li>
+    <li role="option" class="option">Apple</li>
+  </ul>
 </div>
+```
+
+> **Примечание:** **Замечание:** Включение как атрибута `role` так и атрибута `class` необходимо только если вы хотите обеспечить поддержку устаревших браузеров, которые не поддерживают [селекторы атрибутов CSS](/ru/docs/CSS/Attribute_selectors).
 
-<h3 id="Атрибут_aria-selected">Атрибут <code>aria-selected</code> </h3>
+### Атрибут `aria-selected`
 
-<p>Использовать только атрибут <a href="/en-US/docs/Accessibility/ARIA/ARIA_Techniques" title="/en-US/docs/Accessibility/ARIA/ARIA_Techniques"><code>role</code></a> недостаточно. <a href="/en-US/docs/Accessibility/ARIA" title="/en-US/docs/Accessibility/ARIA">ARIA</a> также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного атрибута: <code>aria-selected</code>.</p>
+Использовать только атрибут [`role`](/ru/docs/Accessibility/ARIA/ARIA_Techniques) недостаточно. [ARIA](/ru/docs/Accessibility/ARIA) также предоставляет множество атрибутов состояний и свойств. Чем больше и уместнее вы их используете, тем ваш виджет будет более понятен для вспомогательных технологий. В нашем случае мы ограничимся использованием одного атрибута: `aria-selected`.
 
-<p>Атрибут <code>aria-selected</code> используется для отметки текущего выбранного варианта; это позволяет ассистивным технологиям информировать пользователя о текущем выборе. Мы будем используя JavaScript динамически отмечать выбранный вариант каждый раз, когда пользователь его выбирает. С этой целью нам нужно пересмотреть нашу функцию <code>updateValue()</code>:</p>
+Атрибут `aria-selected` используется для отметки текущего выбранного варианта; это позволяет ассистивным технологиям информировать пользователя о текущем выборе. Мы будем используя JavaScript динамически отмечать выбранный вариант каждый раз, когда пользователь его выбирает. С этой целью нам нужно пересмотреть нашу функцию `updateValue()`:
 
-<pre class="brush: js">function updateValue(select, index) {
+```js
+function updateValue(select, index) {
   var nativeWidget = select.previousElementSibling;
   var value = select.querySelector('.value');
   var optionList = select.querySelectorAll('.option');
@@ -739,55 +748,41 @@ window.addEventListener('load', function () {
   nativeWidget.selectedIndex = index;
   value.innerHTML = optionList[index].innerHTML;
   highlightOption(select, optionList[index]);
-};</pre>
+};
+```
 
-<p>Вот окончательный результат всех этих изменений (вы сможете это лучше прочувствовать если испробуете это со вспомогательными технологиями, такими как <a href="http://www.nvda-project.org/" rel="external">NVDA</a> или <a href="http://www.apple.com/accessibility/voiceover/" rel="external">VoiceOver</a>):</p>
+Вот окончательный результат всех этих изменений (вы сможете это лучше прочувствовать если испробуете это со вспомогательными технологиями, такими как [NVDA](http://www.nvda-project.org/) или [VoiceOver](http://www.apple.com/accessibility/voiceover/)):
 
-<table>
- <thead>
-  <tr>
-   <th scope="col" style="text-align: center;">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}</td>
-  </tr>
-  <tr>
-   <td style="text-align: center;"><a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2">Посмотреть исходный код</a></td>
-  </tr>
- </tbody>
-</table>
+| Пример                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{EmbedLiveSample("Change_states",120,130, "", "HTML/Forms/How_to_build_custom_form_widgets/Example_5")}}                  |
+| [Посмотреть исходный код](/ru/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_5 "/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets/Example_2") |
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Мы рассмотрели все основы создания пользовательского виджета формы, и это, как вы видите, нетривиальная задача, и часто проще и лучше положиться на сторонние библиотеки, чем писать их самому с нуля (если, конечно, ваша цель - не создать такую библиотеку).</p>
+Мы рассмотрели все основы создания пользовательского виджета формы, и это, как вы видите, нетривиальная задача, и часто проще и лучше положиться на сторонние библиотеки, чем писать их самому с нуля (если, конечно, ваша цель - не создать такую библиотеку).
 
-<p>Вот несколько библиотек, которые вам стоит рассмотреть перед тем как создавать собственную:</p>
+Вот несколько библиотек, которые вам стоит рассмотреть перед тем как создавать собственную:
 
-<ul>
- <li><a href="http://jqueryui.com/" rel="external">jQuery UI</a></li>
- <li><a href="https://github.com/marghoobsuleman/ms-Dropdown" rel="external">msDropDown</a></li>
- <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external">Nice Forms</a></li>
- <li><a href="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a" rel="external" title="https://www.google.fr/search?q=HTML+custom+form+controls&amp;ie=utf-8&amp;oe=utf-8&amp;aq=t&amp;rls=org.mozilla:fr:official&amp;client=firefox-a">и многие другие…</a></li>
-</ul>
+- [jQuery UI](http://jqueryui.com/)
+- [msDropDown](https://github.com/marghoobsuleman/ms-Dropdown)
+- [Nice Forms](http://www.emblematiq.com/lab/niceforms/)
+- [и многие другие…](https://www.google.fr/search?q=HTML+custom+form+controls&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:fr:official&client=firefox-a)
 
-<p>Если вы хотите двигаться далее, то код в этом примере нуждается в некотором улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья совместимость с  Web стандартами  очень отличается. Повеселись!</p>
+Если вы хотите двигаться далее, то код в этом примере нуждается в некотором улучшении прежде чем станет универсальным и многоразовым. Это упражнение, которое вы можете попробовать выполнить. Две подсказки, которые помогут вам в этом: первый аргумент всех наших функций одинаков, это значит что эти функции должны быть в одном контексте. Было бы разумным создать объект для совместного использования этого контекста. Также вам нужно сделать его функциональным; это значит, что ему необходимо одинаково хорошо работать с различными браузерами, чья совместимость с Web стандартами очень отличается. Повеселись!
 
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}</p>
+{{PreviousMenuNext("Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms/Sending_forms_through_JavaScript", "Learn/HTML/Forms")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Ваша первая HTML форма</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML форму</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">The native form widgets</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных формы</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Проверка данных формы</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
+- [Ваша первая HTML форма](/ru/docs/Learn/HTML/Forms/Your_first_HTML_form)
+- [Как структурировать HTML форму](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+- [The native form widgets](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC)
+- [Отправка данных формы](/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B)
+- [Проверка данных формы](/ru/docs/Learn/HTML/Forms/Form_validation)
+- [Как создавать пользовательские виджеты форм](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
+- [Sending forms through JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
+- [HTML forms in legacy browsers](/ru/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers)
+- [Styling HTML forms](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
+- [Advanced styling for HTML forms](/ru/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)
+- [Property compatibility table for form widgets](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/ru/learn/forms/how_to_structure_a_web_form/index.md b/files/ru/learn/forms/how_to_structure_a_web_form/index.md
index 5b566b231710c2..c12dcb8aa7d4f1 100644
--- a/files/ru/learn/forms/how_to_structure_a_web_form/index.md
+++ b/files/ru/learn/forms/how_to_structure_a_web_form/index.md
@@ -11,311 +11,307 @@ tags:
 translation_of: Learn/Forms/How_to_structure_a_web_form
 original_slug: Learn/HTML/Forms/How_to_structure_an_HTML_form
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}</div>
+Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.
 
-<p class="summary">Получив базовые знания, теперь мы более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям форм.</p>
+| Уровень подготовки: | Основы компьютерной грамотности, и базовые [знания HTML](/ru/docs/Learn/HTML/Introduction_to_HTML).                            |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:               | Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Уровень подготовки:</th>
-   <td>Основы компьютерной грамотности, и базовые <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">знания HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Разобраться как структурировать HTML формы и задавать им семантику для того, чтобы они были удобны и доступны в использовании.</td>
-  </tr>
- </tbody>
-</table>
+Гибкость HTML форм делает их одной из самых сложных структур в [HTML](/ru/docs/Learn/HTML "/en-US/docs/HTML"); вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и [доступность](/ru/docs/Learn/Accessibility).
 
-<p>Гибкость HTML форм делает их одной из самых сложных структур в <a href="/en-US/docs/Learn/HTML" title="/en-US/docs/HTML">HTML</a>; вы можете создать любую форму, используя элементы и атрибуты форм. Использование правильной структуры, при создании HTML форм, поможет гарантировать их удобство и <a href="/en-US/docs/Learn/Accessibility">доступность</a>.</p>
+## Элемент \<form>
 
-<h2 id="Элемент_&lt;form>">Элемент &lt;form&gt;</h2>
+Элемент {{HTMLElement("form")}} формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента {{HTMLElement("form")}}, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы {{HTMLElement("form")}} и реализовывать специальные хуки, чтобы их было проще использовать.
 
-<p>Элемент {{HTMLElement("form")}} формально определяет форму и атрибуты, которые определяют поведение этой формы. Каждый раз, когда вы хотите создать HTML-форму, вам нужно начать с создания элемента {{HTMLElement("form")}}, поместив внутрь него всё содержимое. Многие вспомогательные технологии или браузерные плагины могут обнаруживать элементы {{HTMLElement("form")}} и реализовывать специальные хуки, чтобы их было проще использовать.</p>
+Мы уже встречались с этим в предыдущей статье.
 
-<p>Мы уже встречались с этим в предыдущей статье.</p>
+> **Предупреждение:** **Внимание:** Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера.
 
-<div class="blockIndicator warning">
-<p><strong>Внимание:</strong> Строго запрещается размещать форму внутри другой формы. Такое размещение может привести к непредсказуемому поведению форм, в зависимости от браузера. </p>
-</div>
-
-<p>Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута <code>form</code>. В HTML5 был представлен атрибут <code>form</code> для элементов HTML форм, который позволяет  явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.</p>
-
-<h2 id="Элементы_&lt;fieldset>_и_&lt;legend>">Элементы &lt;fieldset&gt; и &lt;legend&gt;</h2>
-
-<p>Элемент {{HTMLElement("fieldset")}} - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок {{HTMLElement("fieldset")}}, добавив элемент {{HTMLElement("legend")}} сразу после открывающего тега {{HTMLElement("fieldset")}}. Текст элемента {{HTMLElement("legend")}} формально описывает назначение содержимого {{HTMLElement("fieldset")}}.</p>
-
-<p>Различные вспомогательные технологии будут использовать {{HTMLElement("legend")}} как часть метки <code>label</code> всех элементов внутри {{HTMLElement("fieldset")}}. Например, такие экранные дикторы как <a href="http://www.freedomscientific.com/products/fs/jaws-product-page.asp" rel="external">Jaws</a> или <a href="http://www.nvda-project.org/" rel="external">NVDA</a> произносят заголовок формы {{HTMLElement("legend")}} перед произношением названия меток элементов.</p>
+Стоит учесть, что всегда можно использовать элементы формы вне {{HTMLElement("form")}}. Тогда по умолчанию этот элемент формы не имеет ничего общего со всеми формами. Вы можете связать его с формой с помощью атрибута `form`. В HTML5 был представлен атрибут `form` для элементов HTML форм, который позволяет явно связать элемент с формой, даже если он не заключён внутри {{ HTMLElement("form") }}.
 
-<p>Небольшой пример:</p>
+## Элементы \<fieldset> и \<legend>
 
-<pre class="brush:html;">&lt;form&gt;
-  &lt;fieldset&gt;
-    &lt;legend&gt;Fruit juice size&lt;/legend&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_1" value="small"&gt;
-      &lt;label for="size_1"&gt;Small&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_2" value="medium"&gt;
-      &lt;label for="size_2"&gt;Medium&lt;/label&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;input type="radio" name="size" id="size_3" value="large"&gt;
-      &lt;label for="size_3"&gt;Large&lt;/label&gt;
-    &lt;/p&gt;
-  &lt;/fieldset&gt;
-&lt;/form&gt;</pre>
+Элемент {{HTMLElement("fieldset")}} - это удобный способ стилистической и семантической группировки элементов формы. Вы можете установить заголовок {{HTMLElement("fieldset")}}, добавив элемент {{HTMLElement("legend")}} сразу после открывающего тега {{HTMLElement("fieldset")}}. Текст элемента {{HTMLElement("legend")}} формально описывает назначение содержимого {{HTMLElement("fieldset")}}.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот пример в <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html">fieldset-legend.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html">также посмотрите на результат</a>).</p>
-</div>
-
-<p>Читая эту форму, экранный диктор произнесёт "Fruit juice size small" для первого элемента, "Fruit juice size medium" - для второго, "Fruit juice size large" - для третьего.</p>
+Различные вспомогательные технологии будут использовать {{HTMLElement("legend")}} как часть метки `label` всех элементов внутри {{HTMLElement("fieldset")}}. Например, такие экранные дикторы как [Jaws](http://www.freedomscientific.com/products/fs/jaws-product-page.asp) или [NVDA](http://www.nvda-project.org/) произносят заголовок формы {{HTMLElement("legend")}} перед произношением названия меток элементов.
 
-<p>Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри {{HTMLElement("fieldset")}}. Также {{HTMLElement("fieldset")}} можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные {{HTMLElement("fieldset")}} может повысить удобство использования.</p>
+Небольшой пример:
 
-<p>Из-за своего влияния на вспомогательные технологии элемент {{HTMLElement("fieldset")}} является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как <a href="https://www.nvaccess.org/download/">экранный диктор</a> интерпретирует вашу форму. </p>
+```html
+<form>
+  <fieldset>
+    <legend>Fruit juice size</legend>
+    <p>
+      <input type="radio" name="size" id="size_1" value="small">
+      <label for="size_1">Small</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_2" value="medium">
+      <label for="size_2">Medium</label>
+    </p>
+    <p>
+      <input type="radio" name="size" id="size_3" value="large">
+      <label for="size_3">Large</label>
+    </p>
+  </fieldset>
+</form>
+```
 
-<h2 id="Элемент_&lt;label>">Элемент &lt;label&gt;</h2>
+> **Примечание:** вы можете найти этот пример в [fieldset-legend.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/fieldset-legend.html) ([также посмотрите на результат](https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html)).
 
-<p>В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:</p>
+Читая эту форму, экранный диктор произнесёт "Fruit juice size small" для первого элемента, "Fruit juice size medium" - для второго, "Fruit juice size large" - для третьего.
 
-<pre class="brush: html">&lt;label for="name"&gt;Name:&lt;/label&gt; &lt;input type="text" id="name" name="user_name"&gt;</pre>
+Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри {{HTMLElement("fieldset")}}. Также {{HTMLElement("fieldset")}} можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные {{HTMLElement("fieldset")}} может повысить удобство использования.
 
-<p>При правильно связанном элементе <code>&lt;label&gt;</code> с элементом <code>&lt;input&gt;</code> через атрибуты <code>for</code> и <code>id</code> соответственно (атрибут <code>for</code> ссылается на атрибут <code>id</code> соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие "Name, edit text".</p>
+Из-за своего влияния на вспомогательные технологии элемент {{HTMLElement("fieldset")}} является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как [экранный диктор](https://www.nvaccess.org/download/) интерпретирует вашу форму.
 
-<p>Если <code>&lt;label&gt;</code> не правильно установлен, скринридер прочитает это как "Edit text blank", что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.</p>
+## Элемент \<label>
 
-<p>Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:</p>
+В предыдущей статье мы увидели, что элемент {{HTMLElement("label")}} принято использовать для указания текстов-подсказок (лейблов) в HTML-формах. Это самый важный элемент для построения доступных форм — при правильной реализации скринридеры будут озвучивать текст-подсказку вместе со связанными элементами. Посмотрите на этот пример из предыдущей статьи:
 
-<pre class="brush: html">&lt;label for="name"&gt;
-  Name: &lt;input type="text" id="name" name="user_name"&gt;
-&lt;/label&gt;</pre>
+```html
+<label for="name">Name:</label> <input type="text" id="name" name="user_name">
+```
 
-<p>Однако даже в таких случаях лучше всё равно указывать атрибут <code>for</code>, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.</p>
+При правильно связанном элементе `<label>` с элементом `<input>` через атрибуты `for` и `id` соответственно (атрибут `for` ссылается на атрибут `id` соответствующего виджета формы), скринридер прочтёт вслух что-то наподобие "Name, edit text".
 
-<h3 id="Лейблы_тоже_кликабельны!">Лейблы тоже кликабельны!</h3>
+Если `<label>` не правильно установлен, скринридер прочитает это как "Edit text blank", что не несёт в себе никакой уточняющей информации, позволяющей понять предназначение данного текстового поля.
 
-<p>Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.</p>
+Обратите внимание на то, что виджет формы может быть вложен в элемент {{HTMLElement("label")}}, как на примере:
 
-<p>Например:</p>
+```html
+<label for="name">
+  Name: <input type="text" id="name" name="user_name">
+</label>
+```
 
-<pre class="brush:html;">&lt;form&gt;
-  &lt;p&gt;
-    &lt;label for="taste_1"&gt;I like cherry&lt;/label&gt;
-    &lt;input type="checkbox" id="taste_1" name="taste_cherry" value="1"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="taste_2"&gt;I like banana&lt;/label&gt;
-    &lt;input type="checkbox" id="taste_2" name="taste_banana" value="2"&gt;
-  &lt;/p&gt;
-&lt;/form&gt;</pre>
+Однако даже в таких случаях лучше всё равно указывать атрибут `for`, так как некоторые вспомогательные технологии не распознают неявную связь между текстами-подсказками и виджетами.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете посмотреть этот пример тут <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html">checkbox-label.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html">также можно посмотреть код вживую</a>).</p>
-</div>
+### Лейблы тоже кликабельны!
 
-<h3 id="Несколько_лейблов">Несколько лейблов</h3>
+Ещё одно преимущество при правильно установленных текстах-подсказках заключается в том, что по ним можно кликнуть для активации связанных с ними виджетов. Это поддерживается во всех браузерах. Это удобно как для текстовых полей ввода, в которых устанавливается фокус при клике на текст-подсказку, так и для радио-кнопок и чекбоксов — область попадания такого элемента управления может быть очень маленькой, поэтому полезно сделать её как можно больше.
 
-<p>На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента {{htmlelement("label")}}. </p>
+Например:
 
-<p>Рассмотрим этот пример:</p>
+```html
+<form>
+  <p>
+    <label for="taste_1">I like cherry</label>
+    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
+  </p>
+  <p>
+    <label for="taste_2">I like banana</label>
+    <input type="checkbox" id="taste_2" name="taste_banana" value="2">
+  </p>
+</form>
+```
 
-<pre class="brush: html">&lt;p&gt;Required fields are followed by &lt;abbr title="required"&gt;*&lt;/abbr&gt;.&lt;/p&gt;
+> **Примечание:** вы можете посмотреть этот пример тут [checkbox-label.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/checkbox-label.html) ([также можно посмотреть код вживую](https://mdn.github.io/learning-area/html/forms/html-form-structure/checkbox-label.html)).
 
-&lt;!-- Тогда это: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;Name:&lt;/label&gt;
-  &lt;input type="text" name="username"&gt;
-  &lt;label for="username"&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-&lt;/div&gt;
+### Несколько лейблов
 
-&lt;!-- лучше сделать таким образом: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;
-    &lt;span&gt;Name:&lt;/span&gt;
-    &lt;input id="username" type="text" name="username"&gt;
-    &lt;abbr title="required"&gt;*&lt;/abbr&gt;
-  &lt;/label&gt;
-&lt;/div&gt;
+На самом деле вы можете добавить несколько текстов-подсказок на один виджет формы, но это не очень хорошая идея, так как у некоторых вспомогательных технологий могут возникнуть проблемы с обработкой такой структуры. Вместо использования нескольких лейблов, лучше вложить виджет формы внутрь одного элемента {{htmlelement("label")}}.
 
-&lt;!-- Но этот вариант лучше всего: --&gt;
-&lt;div&gt;
-  &lt;label for="username"&gt;Name: &lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/label&gt;
-  &lt;input id="username" type="text" name="username"&gt;
-&lt;/div&gt;</pre>
+Рассмотрим этот пример:
 
-<p>{{EmbedLiveSample("Несколько_лейблов", 120, 120)}}</p>
+```html
+<p>Required fields are followed by <abbr title="required">*</abbr>.</p>
 
-<p>Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.</p>
-
-<ul>
- <li>В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы <code>&lt;label&gt;</code> могут быть неправильно интерпретированы программой чтения с экрана.</li>
- <li>Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как "name star name edit text", однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.</li>
- <li>Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как "name star edit text".</li>
-</ul>
+<!-- Тогда это: -->
+<div>
+  <label for="username">Name:</label>
+  <input type="text" name="username">
+  <label for="username"><abbr title="required">*</abbr></label>
+</div>
 
-<div class="note">
-<p><strong>Примечание</strong>: В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.</p>
+<!-- лучше сделать таким образом: -->
+<div>
+  <label for="username">
+    <span>Name:</span>
+    <input id="username" type="text" name="username">
+    <abbr title="required">*</abbr>
+  </label>
 </div>
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот пример на GitHub <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html">required-labels.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html">также можно посмотреть вживую</a>). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!</p>
+<!-- Но этот вариант лучше всего: -->
+<div>
+  <label for="username">Name: <abbr title="required">*</abbr></label>
+  <input id="username" type="text" name="username">
 </div>
+```
 
-<h2 id="Часто используемые_с_формами_HTML-структуры">Часто используемые с формами HTML-структуры</h2>
-
-<p>Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.</p>
-
-<p>Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент {{HTMLElement("div")}} — это общепринятая практика. Элемент {{HTMLElement("p")}} также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).</p>
-
-<p>В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для структурирования сложных форм.</p>
-
-<p>Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.</p>
-
-<p>Каждый отдельный раздел функциональности содержится в элементах {{HTMLElement ("section")}} и {{HTMLElement ("fieldset")}}, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе {{HTMLElement ("section")}} с элементами {{HTMLElement ("fieldset")}}, содержащими переключатели.</p>
-
-<h3 id="Активное_обучение_построение_структуры_формы">Активное обучение: построение структуры формы</h3>
-
-<p>Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье (<a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">Основные нативные элементы управления формами</a>). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.</p>
-
-<ol>
- <li>Для начала сделайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">пустого шаблона</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css">CSS для нашей платёжной формы</a> в новой директории на вашем компьютере.</li>
- <li>Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента {{htmlelement("head")}}:
-  <pre class="brush: html">&lt;link href="payment-form.css" rel="stylesheet"&gt;</pre>
- </li>
- <li>Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}:
-  <pre class="brush: html">&lt;form&gt;
-
-&lt;/form&gt;</pre>
- </li>
- <li>Внутри тега <code>&lt;form&gt;</code>, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:
-  <pre class="brush: html">&lt;h1&gt;Payment form&lt;/h1&gt;
-&lt;p&gt;Required fields are followed by &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
- </li>
- <li>Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму:
-  <pre class="brush: html">&lt;section&gt;
-    &lt;h2&gt;Contact information&lt;/h2&gt;
-    &lt;fieldset&gt;
-      &lt;legend&gt;Title&lt;/legend&gt;
-      &lt;ul&gt;
-          &lt;li&gt;
-            &lt;label for="title_1"&gt;
-              &lt;input type="radio" id="title_1" name="title" value="M." &gt;
-              Mister
-            &lt;/label&gt;
-          &lt;/li&gt;
-          &lt;li&gt;
-            &lt;label for="title_2"&gt;
-              &lt;input type="radio" id="title_2" name="title" value="Ms."&gt;
-              Miss
-            &lt;/label&gt;
-          &lt;/li&gt;
-      &lt;/ul&gt;
-    &lt;/fieldset&gt;
-    &lt;p&gt;
-      &lt;label for="name"&gt;
-        &lt;span&gt;Name: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="text" id="name" name="username"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="mail"&gt;
-        &lt;span&gt;E-mail: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="email" id="mail" name="usermail"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="pwd"&gt;
-        &lt;span&gt;Password: &lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="password" id="pwd" name="password"&gt;
-    &lt;/p&gt;
-&lt;/section&gt;</pre>
- </li>
- <li>Сейчас мы перейдём к второму разделу <code>&lt;section&gt;</code> нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега <code>&lt;p&gt;</code>. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент <code>&lt;input&gt;</code> с типом <code>number</code> для ввода номера карты. Последний виджет — это элемент <code>&lt;input&gt;</code> с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье <a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a>.<br>
-  <br>
-  Вставьте следующий код под предыдущим разделом:
-  <pre class="brush: html">&lt;section&gt;
-    &lt;h2&gt;Payment information&lt;/h2&gt;
-    &lt;p&gt;
-      &lt;label for="card"&gt;
-        &lt;span&gt;Card type:&lt;/span&gt;
-      &lt;/label&gt;
-      &lt;select id="card" name="usercard"&gt;
-        &lt;option value="visa"&gt;Visa&lt;/option&gt;
-        &lt;option value="mc"&gt;Mastercard&lt;/option&gt;
-        &lt;option value="amex"&gt;American Express&lt;/option&gt;
-      &lt;/select&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="number"&gt;
-        &lt;span&gt;Card number:&lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-      &lt;/label&gt;
-      &lt;input type="number" id="number" name="cardnumber"&gt;
-    &lt;/p&gt;
-    &lt;p&gt;
-      &lt;label for="date"&gt;
-        &lt;span&gt;Expiration date:&lt;/span&gt;
-        &lt;strong&gt;&lt;abbr title="required"&gt;*&lt;/abbr&gt;&lt;/strong&gt;
-        &lt;em&gt;formatted as mm/yy&lt;/em&gt;
-      &lt;/label&gt;
-      &lt;input type="date" id="date" name="expiration"&gt;
-    &lt;/p&gt;
-&lt;/section&gt;</pre>
- </li>
- <li>Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом <code>submit</code>, для отправки данных. Добавьте этот код в конец вашей формы:
-  <pre class="brush: html">&lt;p&gt; &lt;button type="submit"&gt;Validate the payment&lt;/button&gt; &lt;/p&gt;</pre>
- </li>
-</ol>
-
-<p>Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html">payment-form.html</a> и <a href="https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html">живой пример</a>):</p>
-
-<p>{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}</p>
-
-<h2 id="Протестируйте_себя!">Протестируйте себя!</h2>
-
-<p>Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите <a href="/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure">Test your skills: Form structure</a>.</p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="http://www.alistapart.com/articles/sensibleforms/" rel="external">A List Apart: <em>Sensible Forms: A Form Usability Checklist</em></a></li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}</p>
-
-<h2 id="В_этом_разделе">В этом разделе</h2>
-
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML форма</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-формы</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">Стандартные виджеты форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/HTML5_input_types">The HTML5 input types</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Other_form_controls">Other form controls</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/Styling_HTML_forms">Стили HTML-форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Advanced form styling</a></li>
- <li><a href="/en-US/docs/Learn/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/Валидация_формы">Проверка данных формы</a></li>
- <li><a href="/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы">Отправка данных формы</a></li>
-</ul>
-
-<h3 id="Дополнительные_темы">Дополнительные темы</h3>
-
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать пользовательские виджеты форм</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
+{{EmbedLiveSample("Несколько_лейблов", 120, 120)}}
+
+Параграф на первой строке примера описывает правило для обязательных элементов. Вначале необходимо убедиться, что вспомогательные технологии, такие как программы чтения с экрана, отображают или озвучивают их пользователю, прежде чем он найдёт требуемый элемент. Таким образом они будут знать, что означает звёздочка. Программа чтения с экрана будет произносить звёздочку как «звёздочку» или «обязательно», в зависимости от настроек программы чтения с экрана — в любом случае, первый абзац даёт понимание того, что будет означать звёздочка далее в форме.
+
+- В первом примере лейбл не будет прочитан вместе с текстовым полем — получится лишь "edit text blank" и отдельно читаемые тексты-подсказки. Множественные элементы `<label>` могут быть неправильно интерпретированы программой чтения с экрана.
+- Второй пример немного лучше — лейбл будет прочитан вместе с текстовым полем и будет звучать как "name star name edit text", однако тексты-подсказки всё ещё разделены. Это всё ещё немного сбивает с толку, но на этот раз ситуация немного лучше, потому что с текстовое поле связано с текстом-подсказкой.
+- Третий пример — лучший, так как весь лейбл будет связан с текстовым полем и озвучен целиком, а при чтении текст будет звучать как "name star edit text".
+
+> **Примечание:** В зависимости от программы для чтения с экрана результаты могут немного отличаться. В данной статье для тестирования использовался VoiceOver (NVDA ведёт себя аналогично). Также мы были бы рады, если бы вы поделились своим опытом.
+
+> **Примечание:** вы можете найти этот пример на GitHub [required-labels.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/required-labels.html) ([также можно посмотреть вживую](https://mdn.github.io/learning-area/html/forms/html-form-structure/required-labels.html)). Запускайте пример, закомментировав остальные, иначе скриридеры не смогут правильно распознать контент, если у вас будет несколько лейблов и несколько текстовых полей с одинаковым ID!
+
+## Часто используемые с формами HTML-структуры
+
+Помимо структур, характерных только для HTML-форм, хорошо помнить, что формы — это просто HTML. Это означает, что вы можете использовать всю мощь HTML для структурирования HTML-формы.
+
+Как вы можете заметить в примерах, оборачивать лейбл и виджет формы в элемент {{HTMLElement("div")}} — это общепринятая практика. Элемент {{HTMLElement("p")}} также часто используется, как и HTML-списки (последние часто используются для структурирования множественных чекбоксом или радио-кнопок).
+
+В добавок к элементу {{HTMLElement("fieldset")}} часто используют HTML-заголовки (например, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}) и секционирование (например, {{HTMLElement("section")}}) для структурирования сложных форм.
+
+Прежде всего, вам нужно найти стиль, который будет удобен именно вам для программирования и который также позволит создавать доступные и удобные формы.
+
+Каждый отдельный раздел функциональности содержится в элементах {{HTMLElement ("section")}} и {{HTMLElement ("fieldset")}}, содержащий переключатели. Каждый отдельный раздел функциональности должен находиться в отдельном элементе {{HTMLElement ("section")}} с элементами {{HTMLElement ("fieldset")}}, содержащими переключатели.
+
+### Активное обучение: построение структуры формы
+
+Давайте применим эти идеи на практике и построим более сложноструктурируемую форму — формы оплаты. Форма будет содержать некоторые типы виджетов формы, которые вы можете пока не понять — не переживайте об этом, вы найдёте информацию в следующей статье ([Основные нативные элементы управления формами](/ru/docs/Learn/HTML/Forms/The_native_form_widgets)). А пока внимательно прочитайте описание, следуя приведённым ниже инструкциям, и начинайте формировать представление о том, какие элементы обёртки мы используем для структурирования формы и почему.
+
+1.  Для начала сделайте локальную копию [пустого шаблона](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) и [CSS для нашей платёжной формы](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.css) в новой директории на вашем компьютере.
+2.  Сначала подключите CSS к HTML, добавив следующую строку кода внутрь HTML-элемента {{htmlelement("head")}}:
+
+    ```html
+    <link href="payment-form.css" rel="stylesheet">
+    ```
+
+3.  Далее начните создавать свою форму с добавления внешнего элемента {{htmlelement("form")}}:
+
+    ```html
+    <form>
+
+    </form>
+    ```
+
+4.  Внутри тега `<form>`, добавьте заголовок и параграф, информирующий пользователей о том, как помечены поля, обязательные для заполнения:
+
+    ```html
+    <h1>Payment form</h1>
+    <p>Required fields are followed by <strong><abbr title="required">*</abbr></strong>.</p>
+    ```
+
+5.  Далее нам надо добавить более крупный кусок кода под нашей предыдущей записью. Здесь вы можете увидеть, что мы оборачиваем поля с контактной информацией в отдельный элемент {{htmlelement("section")}}. Более того, у нас есть набор из двух радио-кнопок, каждую из которых мы помещаем в отдельный элемент списка ({{htmlelement("li")}}). Наконец, у нас есть два текстовых поля {{htmlelement("input")}} и связанные с ними элементы {{htmlelement("label")}}, которые находятся внутри элементов {{htmlelement("p")}}, а также поле для ввода пароля. Добавьте этот код в вашу форму:
+
+    ```html
+    <section>
+        <h2>Contact information</h2>
+        <fieldset>
+          <legend>Title</legend>
+          <ul>
+              <li>
+                <label for="title_1">
+                  <input type="radio" id="title_1" name="title" value="M." >
+                  Mister
+                </label>
+              </li>
+              <li>
+                <label for="title_2">
+                  <input type="radio" id="title_2" name="title" value="Ms.">
+                  Miss
+                </label>
+              </li>
+          </ul>
+        </fieldset>
+        <p>
+          <label for="name">
+            <span>Name: </span>
+            <strong><abbr title="required">*</abbr></strong>
+          </label>
+          <input type="text" id="name" name="username">
+        </p>
+        <p>
+          <label for="mail">
+            <span>E-mail: </span>
+            <strong><abbr title="required">*</abbr></strong>
+          </label>
+          <input type="email" id="mail" name="usermail">
+        </p>
+        <p>
+          <label for="pwd">
+            <span>Password: </span>
+            <strong><abbr title="required">*</abbr></strong>
+          </label>
+          <input type="password" id="pwd" name="password">
+        </p>
+    </section>
+    ```
+
+6.  Сейчас мы перейдём к второму разделу `<section>` нашей формы — платёжной информации. В этом разделе у нас есть три отдельных виджета формы со связанными с ними лейблами, находящимися внутри тега `<p>`. Первый — это выпадающее меню ({{htmlelement("select")}}) для выбора типа кредитной карты. Второй — это элемент `<input>` с типом `number` для ввода номера карты. Последний виджет — это элемент `<input>` с типом date для указания даты окончания действия карты (должен будет появиться виджет с выбором даты или обычное текстовое поле в браузерах, не поддерживающих данные тип). Более новые типы полей описаны в статье [The HTML5 input types](/ru/docs/Learn/Forms/HTML5_input_types).
+
+    Вставьте следующий код под предыдущим разделом:
+
+    ```html
+    <section>
+        <h2>Payment information</h2>
+        <p>
+          <label for="card">
+            <span>Card type:</span>
+          </label>
+          <select id="card" name="usercard">
+            <option value="visa">Visa</option>
+            <option value="mc">Mastercard</option>
+            <option value="amex">American Express</option>
+          </select>
+        </p>
+        <p>
+          <label for="number">
+            <span>Card number:</span>
+            <strong><abbr title="required">*</abbr></strong>
+          </label>
+          <input type="number" id="number" name="cardnumber">
+        </p>
+        <p>
+          <label for="date">
+            <span>Expiration date:</span>
+            <strong><abbr title="required">*</abbr></strong>
+            <em>formatted as mm/yy</em>
+          </label>
+          <input type="date" id="date" name="expiration">
+        </p>
+    </section>
+    ```
+
+7.  Последняя секция, которую мы добавим выглядит намного проще и содержит в себе только элемент {{htmlelement("button")}} с типом `submit`, для отправки данных. Добавьте этот код в конец вашей формы:
+
+    ```html
+    <p> <button type="submit">Validate the payment</button> </p>
+    ```
+
+Вы можете увидеть законченную форму в действии ниже (также её можно найти на GitHub — посмотрите [payment-form.html](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html) и [живой пример](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)):
+
+{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/HTML/Forms/How_to_structure_an_HTML_form/Example")}}
+
+## Протестируйте себя!
+
+Вы дошли до конца статьи, но можете ли вспомнить самую важную информацию? Далее вы можете найти тест, который поможет убедиться, что вы усвоили знания прежде чем двигаться дальше — посмотрите [Test your skills: Form structure](/ru/docs/Learn/Forms/Test_your_skills:_Form_structure).
+
+## Заключение
+
+Теперь у вас есть все необходимые знания для того, чтобы правильно структурировать вашу HTML-форму. Мы подробнее раскроем затронутые здесь темы в нескольких последующих статьях. В следующей же статье мы изучим все возможные типы виджетов форм, которые могут понадобиться для сбора информации от ваших пользователей.
+
+## Смотрите также
+
+- [A List Apart: _Sensible Forms: A Form Usability Checklist_](http://www.alistapart.com/articles/sensibleforms/)
+
+{{PreviousMenuNext("Learn/HTML/Forms/Ваша_первая_HTML_форма", "Learn/HTML/Forms/Стандартные_виджеты_форм", "Learn/HTML/Forms")}}
+
+## В этом разделе
+
+- [Ваша первая HTML форма](/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма)
+- [Как структурировать HTML-формы](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+- [Стандартные виджеты форм](/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм)
+- [The HTML5 input types](/ru/docs/Learn/Forms/HTML5_input_types)
+- [Other form controls](/ru/docs/Learn/Forms/Other_form_controls)
+- [Стили HTML-форм](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
+- [Advanced form styling](/ru/docs/Learn/Forms/Advanced_form_styling)
+- [UI pseudo-classes](/ru/docs/Learn/Forms/UI_pseudo-classes)
+- [Проверка данных формы](/ru/docs/Learn/HTML/Forms/Валидация_формы)
+- [Отправка данных формы](/ru/docs/Learn/HTML/Forms/Отправка_и_Получение_данных_формы)
+
+### Дополнительные темы
+
+- [Как создавать пользовательские виджеты форм](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
+- [Sending forms through JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
+- [Property compatibility table for form widgets](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/ru/learn/forms/index.md b/files/ru/learn/forms/index.md
index 2be2061add58d6..3d6fb262b39e15 100644
--- a/files/ru/learn/forms/index.md
+++ b/files/ru/learn/forms/index.md
@@ -10,70 +10,56 @@ tags:
 translation_of: Learn/Forms
 original_slug: Learn/HTML/Forms
 ---
-<p>{{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<p>Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!</p>
+Данное руководство представляет собой серию статей, которые помогут вам освоить HTML-формы. HTML формы являются очень мощным инструментом для взаимодействия с пользователями; однако, в силу исторических и технических причин, не всегда очевидно, как использовать их в полной мере. В этом руководстве мы рассмотрим все аспекты HTML-форм, от структуры к стилизации, от обработки данных до пользовательских виджетов. Вы научитесь пользоваться Великой силой, которую они предлагают!
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Перед началом этого модуля вам следует изучить хотя бы <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>. На данный момент у вас не должно возникнуть сложностей с пониманием <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B0_2">Основных руководств</a> и использованием нашего руководства по <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартным виджетам форм</a>.</p>
+Перед началом этого модуля вам следует изучить хотя бы [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML). На данный момент у вас не должно возникнуть сложностей с пониманием [Основных руководств](/ru/docs/Learn/HTML/Forms#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5_%D1%80%D1%83%D0%BA%D0%BE%D0%B2%D0%BE%D0%B4%D1%81%D1%82%D0%B2%D0%B0_2) и использованием нашего руководства по [Стандартным виджетам форм](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC).
 
-<p>Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.</p>
+Остальные части модуля немного сложнее — легко поместить виджет формы на страницу, но вы не сможете много сделать без использования продвинутых особенностей форм, CSS и JavaScript. Поэтому, перед тем как вы перейдёте к другим частям модуля, мы рекомендуем изучить немного CSS и JavaScript.
 
-<div class="blockIndicator note">
-<p><strong>Примечание:</strong>Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:**Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Основные_руководства_2"> Основные руководства<a id="Основные_руководства"></a></h2>
+## Основные руководства
 
-<dl>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма">Ваша первая HTML-форма</a></dt>
- <dd>Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">Как структурировать HTML-форму</a></dt>
- <dd>Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.</dd>
-</dl>
+- [Ваша первая HTML-форма](/ru/docs/Learn/HTML/Forms/Ваша_первая_HTML_форма)
+  - : Первая статья в серии даёт вам начальный опыт в создании HTML-форм, включая разработку простой формы, её реализация при помощи элементов HTML, стилизация при помощи CSS и то, как данные отправляются на сервер.
+- [Как структурировать HTML-форму](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+  - : Изучив основы, рассмотрим более подробно элементы, используемые для структурирования и придания смысла различным частям HTML-форм.
 
-<h2 id="Какие_виджеты_форм_доступны">Какие виджеты форм доступны?</h2>
+## Какие виджеты форм доступны?
 
-<dl>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC">Стандартные виджеты форм</a></dt>
- <dd>Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.</dd>
-</dl>
+- [Стандартные виджеты форм](/ru/docs/Learn/HTML/Forms/%D0%A1%D1%82%D0%B0%D0%BD%D0%B4%D0%B0%D1%80%D1%82%D0%BD%D1%8B%D0%B5_%D0%B2%D0%B8%D0%B4%D0%B6%D0%B5%D1%82%D1%8B_%D1%84%D0%BE%D1%80%D0%BC)
+  - : Рассмотрим подробнее функционал различных виджетов форм; какие варианты доступны для сбора различных типов данных.
 
-<h2 id="Валидация_и_подтверждение_данных_форм">Валидация и подтверждение данных форм</h2>
+## Валидация и подтверждение данных форм
 
-<dl>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Отправка данных форм </a></dt>
- <dd>Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B">Валидация данных форм</a></dt>
- <dd>Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.</dd>
-</dl>
+- [Отправка данных форм](/ru/docs/Learn/HTML/Forms/%D0%9E%D1%82%D0%BF%D1%80%D0%B0%D0%B2%D0%BA%D0%B0_%D0%B8_%D0%9F%D0%BE%D0%BB%D1%83%D1%87%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B4%D0%B0%D0%BD%D0%BD%D1%8B%D1%85_%D1%84%D0%BE%D1%80%D0%BC%D1%8B)
+  - : Данная статья рассматривает что происходит, когда пользователь подтверждает форму — куда отправляются данные и как мы их там обрабатываем. Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
+- [Валидация данных форм](/ru/docs/Learn/HTML/Forms/%D0%92%D0%B0%D0%BB%D0%B8%D0%B4%D0%B0%D1%86%D0%B8%D1%8F_%D1%84%D0%BE%D1%80%D0%BC%D1%8B)
+  - : Одной отправки данных не достаточно — нам нужно убедиться что данные, введённые пользователем в формы, в правильном формате и не испортят наши приложения. Мы также хотим помочь пользователям правильно заполнить формы и не разочароваться при использовании наших приложений. Валидация форм поможет нам в достижении этих целей — эта статья расскажет вам всё, что нужно знать.
 
-<h2 id="Продвинутые_руководства"> Продвинутые руководства</h2>
+## Продвинутые руководства
 
-<dl>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">Как создавать собственные виджеты форм</a></dt>
- <dd>В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Отправка форм при помощи JavaScript</a></dt>
- <dd>В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых браузерах</a></dt>
- <dd>Статья раскрывает особенности обнаружения и т.д. (см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Кросс-браузерное тестирование</a> для более глубокого понимания)</dd>
-</dl>
+- [Как создавать собственные виджеты форм](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
+  - : В некоторых случая стандартные виджеты форм не предоставляют того, что вам нужно, например из-за стиля или функциональности. В таких случаях вам придётся создать собственный виджет формы из чистого HTML. В этой статье (с практическим примером) объясняется, как вы это сделаете, а также особенности, на которые необходимо обратить внимание.
+- [Отправка форм при помощи JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
+  - : В этой статье рассматриваются способы использования формы для сборки HTTP-запроса и отправки его через пользовательский JavaScript вместо стандартного представления формы. А также почему вы захотите это сделать и способы реализации (см. использование объектов FormData).
+- [HTML-формы в старых браузерах](/ru/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers)
+  - : Статья раскрывает особенности обнаружения и т.д. (см. [Кросс-браузерное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) для более глубокого понимания)
 
-<h2 id="Руководства_по_стилизации_форм">Руководства по стилизации форм</h2>
+## Руководства по стилизации форм
 
-<dl>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Стилизация HTML-форм</a></dt>
- <dd>Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Продвинутая стилизация HTML-форм</a></dt>
- <dd>В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Таблица совместимости свойств для виджетов форм</a></dt>
- <dd>Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.</dd>
-</dl>
+- [Стилизация HTML-форм](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
+  - : Вступительная статья по стилизации форм с помощью CSS, включая все необходимые основы.
+- [Продвинутая стилизация HTML-форм](/ru/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)
+  - : В этой статье мы рассмотрим продвинутые техники стилизации форм, которые необходимо использовать при работе с некоторыми более сложными для стилизации элементами.
+- [Таблица совместимости свойств для виджетов форм](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
+  - : Последняя статья содержит удобный справочник, позволяющий узнать, с какими элементами формы совместимы свойства CSS.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element#Forms">Ссылка на элементы HTML-форм</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input">Ссылка на виды HTML-элемента &lt;input&gt;</a>  </li>
-</ul>
+- [Ссылка на элементы HTML-форм](/ru/docs/Web/HTML/Element#Forms)
+- [Ссылка на виды HTML-элемента \<input>](/ru/docs/Web/HTML/Element/input)
diff --git a/files/ru/learn/forms/sending_and_retrieving_form_data/index.md b/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
index 9724ee5fe6dcf6..2465efb9c9c015 100644
--- a/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
+++ b/files/ru/learn/forms/sending_and_retrieving_form_data/index.md
@@ -4,197 +4,191 @@ slug: Learn/Forms/Sending_and_retrieving_form_data
 translation_of: Learn/Forms/Sending_and_retrieving_form_data
 original_slug: Learn/HTML/Forms/Отправка_и_Получение_данных_формы
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
 
-<p class="summary">В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.</p>
+В этой статье рассматривается, что происходит, когда пользователь отправляет форму - куда передаются данные и как мы их обрабатываем, когда они туда попадают? Мы также рассмотрим некоторые проблемы безопасности, связанные с отправкой данных формы.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные знания:</th>
-   <td>Базовая компьютерная грамотность, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">понимание HTML</a> и базовые знания по <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a> и <a href="/en-US/docs/Learn/Server-side/First_steps">программированию на стороне сервера</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера.</td>
-  </tr>
- </tbody>
-</table>
+| Предварительные знания: | Базовая компьютерная грамотность, [понимание HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) и базовые знания по [HTTP](/ru/docs/Web/HTTP/Basics_of_HTTP) и [программированию на стороне сервера](/ru/docs/Learn/Server-side/First_steps). |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Задача:                 | Понять, что происходит при отправке данных формы, в том числе получить представление о том, как данные обрабатываются на стороне сервера.                                                                                                  |
 
-<h2 id="Куда_отправляются_данные">Куда отправляются данные?</h2>
+## Куда отправляются данные?
 
-<p>Здесь мы обсудим, что происходит с данными при отправке формы.</p>
+Здесь мы обсудим, что происходит с данными при отправке формы.
 
-<h3 id="О_клиенсткойсерверной_архитектуре">О клиентской/серверной архитектуре</h3>
+### О клиентской/серверной архитектуре
 
-<p>WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как <a href="https://httpd.apache.org/" rel="external">Apache</a>, <a href="https://www.nginx.com/" rel="external">Nginx</a>, <a href="https://www.iis.net/" rel="external">IIS</a>, <a href="https://tomcat.apache.org/" rel="external">Tomcat</a>, и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.<img alt="A basic schema of the Web client/server architecture" src="client-server.png" style="display: block; margin: 0px auto;"></p>
+WEB основан на очень простой клиент-серверной архитектуре, которую можно обобщить следующим образом: клиент (обычно веб-браузер) отправляет запрос на сервер (в основном веб-сервер, такой как [Apache](https://httpd.apache.org/), [Nginx](https://www.nginx.com/), [IIS](https://www.iis.net/), [Tomcat](https://tomcat.apache.org/), и т. д.), используя протокол HTTP. Сервер отвечает на запрос, используя тот же протокол.![A basic schema of the Web client/server architecture](client-server.png)
 
-<p>На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .</p>
+На стороне клиента HTML-форма - это не более чем удобный способ настройки HTTP-запроса для отправки данных на сервер. Это позволяет пользователю предоставлять информацию для доставки в HTTP-запросе .
 
-<div class="note">
-<p><strong>Примечание</strong>: Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем <a href="/en-US/docs/Learn/Server-side/First_steps">«Первые шаги в программировании на стороне сервера»</a>.</p>
-</div>
+> **Примечание:** Для получения более полного представления о том, как работают клиент-серверные архитектуры, ознакомьтесь с модулем [«Первые шаги в программировании на стороне сервера»](/ru/docs/Learn/Server-side/First_steps).
 
-<h3 id="На_стороне_клиента_определение_способа_отправки_данных">На стороне клиента: определение способа отправки данных</h3>
+### На стороне клиента: определение способа отправки данных
 
-<p>Элемент {{HTMLElement("form")}} определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются  {{htmlattrxref("action","form")}}  и {{htmlattrxref("method","form")}}.</p>
+Элемент {{HTMLElement("form")}} определяет способ отправки данных. Все его атрибуты предназначены для того, чтобы вы могли настроить запрос на отправку, когда пользователь нажимает кнопку отправки. Двумя наиболее важными атрибутами являются {{htmlattrxref("action","form")}} и {{htmlattrxref("method","form")}}.
 
-<h4 id="Атрибут_htmlattrxrefactionform">Атрибут {{htmlattrxref("action","form")}}</h4>
+#### Атрибут {{htmlattrxref("action","form")}}
 
-<p>Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.</p>
+Этот атрибут определяет, куда отправляются данные. Его значение должно быть действительным URL. Если этот атрибут не указан, данные будут отправлены на URL-адрес страницы, содержащей форму.
 
-<p>В этом примере данные отправляются на абсолютный URL — <code>http://foo.com</code>:</p>
+В этом примере данные отправляются на абсолютный URL — `http://foo.com`:
 
-<pre class="brush: html">&lt;form action="http://foo.com"&gt;</pre>
+```html
+<form action="http://foo.com">
+```
 
-<p>Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:</p>
+Здесь мы используем относительный URL - данные отправляются на другой URL на сервере:
 
-<pre class="brush: html">&lt;form action="/somewhere_else"&gt;</pre>
+```html
+<form action="/somewhere_else">
+```
 
-<p>Если атрибуты не указаны, как показано ниже, данные из формы  {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:</p>
+Если атрибуты не указаны, как показано ниже, данные из формы {{HTMLElement("form")}} отправляются на ту же страницу, на которой размещается данная форма:
 
-<pre class="brush: html">&lt;form&gt;</pre>
+```html
+<form>
+```
 
-<p>Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.</p>
+Многие старые страницы используют следующий синтаксис, чтобы указать, что данные должны быть отправлены на ту же страницу, которая содержит форму; это было необходимо, потому что до появления HTML5 атрибут {{htmlattrxref("action", "form")}} был обязательным. Это больше не нужно.
 
-<pre class="brush: html">&lt;form action="#"&gt;</pre>
+```html
+<form action="#">
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.</p>
-</div>
+> **Примечание:** Можно указать URL, который использует протокол HTTPS (безопасный HTTP). Когда вы делаете это, данные шифруются вместе с остальной частью запроса, даже если сама форма размещается на небезопасной странице, доступ к которой осуществляется через HTTP. С другой стороны, если форма размещается на защищённой странице, но вы указываете небезопасный URL-адрес HTTP с атрибутом {{htmlattrxref("action","form")}}, все браузеры выдают пользователю предупреждение о безопасности при каждой попытке отправки данных, поскольку данные не шифруются.
 
-<h4 id="Атрибут_htmlattrxrefmethodform">Атрибут {{htmlattrxref("method","form")}}</h4>
+#### Атрибут {{htmlattrxref("method","form")}}
 
-<p>Этот атрибут определяет способ отправки данных. <a href="/en-US/docs/Web/HTTP">Протокол HTTP</a> предоставляет несколько способов выполнить запрос;  Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод <code>GET</code> и метод <code>POST</code>.</p>
+Этот атрибут определяет способ отправки данных. [Протокол HTTP](/ru/docs/Web/HTTP) предоставляет несколько способов выполнить запрос; Данные HTML-формы могут передаваться несколькими различными способами, наиболее распространёнными из которых являются метод `GET` и метод `POST`.
 
-<p>Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.</p>
+Чтобы понять разницу между этими двумя методами, давайте вернёмся назад и рассмотрим, как работает HTTP. Каждый раз, когда вы хотите получить доступ к ресурсу в Интернете, браузер отправляет запрос на URL-адрес. HTTP-запрос состоит из двух частей: заголовка, который содержит набор глобальных метаданных о возможностях браузера, и тела, которое может содержать информацию, необходимую серверу для обработки конкретного запроса.
 
-<h3 id="Метод_GET">Метод GET</h3>
+### Метод GET
 
-<p>Метод <code>GET</code> - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.</p>
+Метод `GET` - это метод, используемый браузером, который говорит серверу, что нужно отправить назад данный ресурс: «Эй, сервер, я хочу получить этот ресурс». В этом случае браузер отправляет пустое тело. Поскольку тело пустое, если форма отправляется с использованием данного метода, данные, отправляемые на сервер, добавляются к URL-адресу.
 
-<p>Рассмотрим следующую форму:</p>
+Рассмотрим следующую форму:
 
-<pre class="brush: html">&lt;form action="http://foo.com" method="get"&gt;
-  &lt;div&gt;
-    &lt;label for="say"&gt;What greeting do you want to say?&lt;/label&gt;
-    &lt;input name="say" id="say" value="Hi"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="to"&gt;Who do you want to say it to?&lt;/label&gt;
-    &lt;input name="to" id="to" value="Mom"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Send my greetings&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form action="http://foo.com" method="get">
+  <div>
+    <label for="say">What greeting do you want to say?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">Who do you want to say it to?</label>
+    <input name="to" id="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+```
 
-<p>Поскольку используется метод <code>GET</code>, вы увидите URL <code>www.foo.com/?say=Hi&amp;to=Mom</code>, который появится в адресной строке браузера при отправке формы.</p>
+Поскольку используется метод `GET`, вы увидите URL `www.foo.com/?say=Hi&to=Mom`, который появится в адресной строке браузера при отправке формы.
 
-<p><img alt="" src="url-parameters.png" style="display: block; margin: 0 auto;">Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (<code>?</code>), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (<code>&amp;</code>). В этом случае мы передаём две части данных на сервер:</p>
+![](url-parameters.png)Данные добавляются в URL как последовательность пар имя / значение. После того, как URL веб-адрес закончился, мы добавляем знак вопроса (`?`), за которым следуют пары имя / значение, каждая из которых разделена амперсандом (`&`). В этом случае мы передаём две части данных на сервер:
 
-<ul>
- <li><code>say</code>, со значением <code>Hi</code></li>
- <li><code>to</code>, со значением <code>Mom</code></li>
-</ul>
+- `say`, со значением `Hi`
+- `to`, со значением `Mom`
 
-<p>HTTP-запрос имеет следующий вид:</p>
+HTTP-запрос имеет следующий вид:
 
-<pre>GET /?say=Hi&amp;to=Mom HTTP/2.0
-Host: foo.com</pre>
+```
+GET /?say=Hi&to=Mom HTTP/2.0
+Host: foo.com
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот пример на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html">get-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html">see it live also</a>).</p>
-</div>
+> **Примечание:** вы можете найти этот пример на GitHub — смотрите [get-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/get-method.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/sending-form-data/get-method.html)).
 
-<h3 id="Метод_POST">Метод POST</h3>
+### Метод POST
 
-<p>Метод <code>POST</code> немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.</p>
+Метод `POST` немного отличается. Браузер использует этот метод для связи с сервером при запросе ответа с учётом данных, представленные в теле HTTP-запроса: «Эй, сервер, взгляни на эти данные и отправь мне соответствующий результат». Если форма отправляется с использованием этого метода, данные добавляются в тело HTTP-запроса.
 
-<p>Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе <code>GET</code> выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в <code>post</code>.</p>
+Давайте рассмотрим пример — это та же самая форма, которую мы рассматривали в разделе `GET` выше, но с атрибутом {{htmlattrxref("method","form")}}, установленным в `post`.
 
-<pre class="brush: html">&lt;form action="http://foo.com" method="post"&gt;
-  &lt;div&gt;
-    &lt;label for="say"&gt;What greeting do you want to say?&lt;/label&gt;
-    &lt;input name="say" id="say" value="Hi"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="to"&gt;Who do you want to say it to?&lt;/label&gt;
-    &lt;input name="to" id="to" value="Mom"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Send my greetings&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form action="http://foo.com" method="post">
+  <div>
+    <label for="say">What greeting do you want to say?</label>
+    <input name="say" id="say" value="Hi">
+  </div>
+  <div>
+    <label for="to">Who do you want to say it to?</label>
+    <input name="to" id="to" value="Mom">
+  </div>
+  <div>
+    <button>Send my greetings</button>
+  </div>
+</form>
+```
 
-<p>Когда форма отправляется с использованием метода <code>POST</code>, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:</p>
+Когда форма отправляется с использованием метода `POST`, данные добавляются не к URL-адресу, а включаются в тело запроса. HTTP-запрос имеет следующий вид:
 
-<pre>POST / HTTP/2.0
+```
+POST / HTTP/2.0
 Host: foo.com
 Content-Type: application/x-www-form-urlencoded
 Content-Length: 13
 
-say=Hi&amp;to=Mom</pre>
+say=Hi&to=Mom
+```
 
-<p>Заголовок <code>Content-Length</code> указывает размер тела, а заголовок <code>Content-Type</code> указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.</p>
+Заголовок `Content-Length` указывает размер тела, а заголовок `Content-Type` указывает тип данных, отправляемых на сервер. Мы обсудим эти заголовки позже.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот пример на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html">post-method.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html">see it live also</a>).</p>
-</div>
+> **Примечание:** вы можете найти этот пример на GitHub — смотрите [post-method.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/post-method.html) ([see it live also](https://mdn.github.io/learning-area/html/forms/sending-form-data/post-method.html)).
 
-<h4 id="Просмотр_HTTP-запросов">Просмотр HTTP-запросов</h4>
+#### Просмотр HTTP-запросов
 
-<p>HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как <a href="/en-US/docs/Tools/Network_Monitor">Firefox Network Monitor</a> или <a href="https://developers.google.com/chrome-developer-tools/">Chrome Developer Tools</a>). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):</p>
+HTTP-запросы никогда не отображаются пользователю (если вы хотите их видеть, вам нужно использовать такие инструменты, как [Firefox Network Monitor](/ru/docs/Tools/Network_Monitor) или [Chrome Developer Tools](https://developers.google.com/chrome-developer-tools/)). Например, данные формы можно увидеть на вкладке Сеть (Network) в Chrome следующим образом (после отправки формы):
 
-<ol>
- <li>Нажмите F12</li>
- <li>Выберите Network</li>
- <li>Выберите "All"</li>
- <li>Выберите "foo.com" во вкладке "Name"</li>
- <li>Выберите "Headers"</li>
-</ol>
+1.  Нажмите F12
+2.  Выберите Network
+3.  Выберите "All"
+4.  Выберите "foo.com" во вкладке "Name"
+5.  Выберите "Headers"
 
-<p>Затем вы можете получить данные формы, как показано на рисунке ниже.</p>
+Затем вы можете получить данные формы, как показано на рисунке ниже.
 
-<p><img alt="" src="network-monitor.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![](network-monitor.png)
 
-<p>Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом <code>GET</code> позволит пользователю увидеть информацию из запроса в URL, а запрос с методом <code>POST</code> не позволит. Две причины, почему это может быть важно:</p>
+Единственное, что отображается пользователю — вызываемый URL. Как упоминалось раннее, запрос с методом `GET` позволит пользователю увидеть информацию из запроса в URL, а запрос с методом `POST` не позволит. Две причины, почему это может быть важно:
 
-<ol>
- <li>Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод <code>GET</code>, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.</li>
- <li>Если необходимо отправить большой объем информации, <code>POST</code>-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.</li>
-</ol>
+1.  Если необходимо отправить пароль (или любую другую важную информацию), никогда не используйте метод `GET`, иначе рискуете отобразить эту информацию в URL-строке, что небезопасно.
+2.  Если необходимо отправить большой объем информации, `POST`-метод является предпочтительным, так как некоторые браузеры ограничивают длину URL. К тому же, многие сервера так же ограничивают длину обрабатываемых URL.
 
-<h3 id="На_стороне_сервера_получение_данных">На стороне сервера: получение данных</h3>
+### На стороне сервера: получение данных
 
-<p>Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.</p>
+Какой бы HTTP вы не выбрали, сервер возвращает строку, которая будет последовательно проанализирована для получения данных в формате листа с парами ключ/значение. Способ получения доступа к этому листу зависит от платформы разработки или особенностей фреймворка, который вы можете использовать. Технологии, которые вы используете, определяют, как обрабатываются скопированные ключи. Часто, приоритетным является последнее полученное значение для данного ключа.
 
-<h4 id="Пример_Чистый_PHP">Пример: Чистый PHP</h4>
+#### Пример: Чистый PHP
 
-<p><a href="https://php.net/">PHP</a> предлагает несколько глобальных объектов для доступа к данным. Например, вы используете <code>POST</code>-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо ещё.</p>
+[PHP](https://php.net/) предлагает несколько глобальных объектов для доступа к данным. Например, вы используете `POST`-метод, в приведённом ниже примере данные просто получаются и показываются пользователю. Разумеется, как использовать данные — решать только вам. Вы можете отобразить эти данные, поместить в базу данных, отправить по почте или передать эти данные куда-либо ещё.
 
-<pre class="brush: php">&lt;?php
+```php
+<?php
   // The global $_POST variable allows you to access the data sent with the POST method by name
   // To access the data sent with the GET method, you can use $_GET
   $say = htmlspecialchars($_POST['say']);
   $to  = htmlspecialchars($_POST['to']);
 
   echo  $say, ' ', $to;
-?&gt;</pre>
+?>
+```
 
-<p>Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html">php-example.html</a> — который содержит те же данные, которые вы видели раньше:  <code>method</code> : <code>post</code> и <code>action</code> из <code>php-example.php</code>. Когда данные переданы на отправку (submit), они переданы в форму <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php">php-example.php</a>, которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: <code>Hi Mom</code>.</p>
+Пример показывает страницу с данными, которые мы отправили. Вы можете посмотреть это в действии в нашем файле с примером: [php-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.html) — который содержит те же данные, которые вы видели раньше: `method` : `post` и `action` из `php-example.php`. Когда данные переданы на отправку (submit), они переданы в форму [php-example.php](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/php-example.php), которая содержит PHP код из примера выше. Когда код будет выполнен, браузер выведет (output) обработанное сообщение: `Hi Mom`.
 
-<p><img alt="" src="php-result.png" style="display: block; margin: 0 auto;"></p>
+![](php-result.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать <a href="https://www.mamp.info/en/downloads/">MAMP</a> (Mac and Windows) и/или <a href="http://ampps.com/download">AMPPS</a> (Mac, Windows, Linux).</p>
-</div>
+> **Примечание:** Этот пример не будет работать, когда вы загружаете его в браузер локально — браузер не может интерпретировать PHP код, после отправки данных из формы, браузер просто предложит загрузить PHP файл. Чтобы пример заработал, необходимо отправить его на PHP сервер. Для тестирования PHP на локальных серверах можете пробовать [MAMP](https://www.mamp.info/en/downloads/) (Mac and Windows) и/или [AMPPS](http://ampps.com/download) (Mac, Windows, Linux).
 
-<h4 id="Пример_Python">Пример: Python</h4>
+#### Пример: Python
 
-<p>Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется <a href="http://flask.pocoo.org/">Flask framework</a> для визуализации шаблонов, поддерживающих форму отправки данных (смотри <a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py">python-example.py</a>).</p>
+Этот пример показывает, как вы можете использовать Python для решения той же задачи — отобразить отправленные данные на странице. В этом примере используется [Flask framework](http://flask.pocoo.org/) для визуализации шаблонов, поддерживающих форму отправки данных (смотри [python-example.py](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/python-example.py)).
 
-<pre class="brush: python">from flask import Flask, render_template, request
+```python
+from flask import Flask, render_template, request
 
 app = Flask(__name__)
 
@@ -207,147 +201,128 @@ def hello():
     return render_template('greeting.html', say=request.form['say'], to=request.form['to'])
 
 if __name__ == "__main__":
-    app.run()</pre>
+    app.run()
+```
 
-<p>Два шаблона из коде выше взаимодействуют так:</p>
+Два шаблона из коде выше взаимодействуют так:
 
-<ul>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html">form.html</a>: Та же форма, что и выше <a href="#the_post_method">The POST method</a> , только с использованием <code>action</code> к  <code>\{{ url_for('hello') }}</code>. (Это <a href="http://jinja.pocoo.org/docs/2.9/">Jinja2</a> шаблон, который изначально HTML, но может содержать вызовы Python кода в фигурных скобках, которые запустятся веб-сервером. <code>url_for('hello')</code> буквально говорит: после отправки данных переадресуй их в <code>/hello</code>.)</li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html">greeting.html</a>: Этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при отображении. Это сделано с помощью функции <code>hello()</code>, указанной выше, которая выполняется, когда запрос направляется в <code>/hello</code> URL.</li>
-</ul>
+- [form.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/form.html): Та же форма, что и выше [The POST method](#the_post_method) , только с использованием `action` к `\{{ url_for('hello') }}`. (Это [Jinja2](http://jinja.pocoo.org/docs/2.9/) шаблон, который изначально HTML, но может содержать вызовы Python кода в фигурных скобках, которые запустятся веб-сервером. `url_for('hello')` буквально говорит: после отправки данных переадресуй их в `/hello`.)
+- [greeting.html](https://github.com/mdn/learning-area/blob/master/html/forms/sending-form-data/templates/greeting.html): Этот шаблон просто содержит строку, которая отображает два бита данных, переданных ему при отображении. Это сделано с помощью функции `hello()`, указанной выше, которая выполняется, когда запрос направляется в `/hello` URL.
 
-<div class="note">
-<p><strong>Примечание</strong>: Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно <a href="/en-US/docs/Learn/Server-side/Django/development_environment#installing_python_3">установить Python/PIP</a>, потом установить Flask используя команду: <code>pip3 install flask</code>. После этого, вы сможете запустить файл из примера, используя команду: <code>python3 python-example.py</code>, потом открыть <code>localhost:5000</code> в своём браузере.</p>
-</div>
+> **Примечание:** Опять же, этот код не будет работать, если вы просто попробуете загрузить его прямо в браузер. Python работает немного иначе, чем PHP — чтобы запустить этот код, нужно [установить Python/PIP](/ru/docs/Learn/Server-side/Django/development_environment#installing_python_3), потом установить Flask используя команду: `pip3 install flask`. После этого, вы сможете запустить файл из примера, используя команду: `python3 python-example.py`, потом открыть `localhost:5000` в своём браузере.
 
-<h4 id="Другие_языки_и_фреймворки">Другие языки и фреймворки</h4>
+#### Другие языки и фреймворки
 
-<p>Существует множество других серверных технологий, которые вы можете использовать для работы с формами, включая языки Perl, Java, .Net, Ruby, и прочее. Выбирайте тот, который нравится больше. К тому же, использовать вышеупомянутые технологии непосредственно, без использования фреймворков, может быть сложно. Лучше использовать один из множества высококачественных фреймворков, таких как:</p>
+Существует множество других серверных технологий, которые вы можете использовать для работы с формами, включая языки Perl, Java, .Net, Ruby, и прочее. Выбирайте тот, который нравится больше. К тому же, использовать вышеупомянутые технологии непосредственно, без использования фреймворков, может быть сложно. Лучше использовать один из множества высококачественных фреймворков, таких как:
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Django" rel="external">Django</a> для Python (немного тяжеловеснее, чем <a href="http://flask.pocoo.org/">Flask</a>, но больше инструментов и опций)</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Express</a> для Node.js</li>
- <li><a href="https://laravel.com/">Laravel</a> для PHP</li>
- <li><a href="https://rubyonrails.org/" rel="external">Ruby On Rails</a> для Ruby</li>
- <li><a href="https://phoenixframework.org/">Phoenix</a> для Elixir</li>
-</ul>
+- [Django](/ru/docs/Learn/Server-side/Django) для Python (немного тяжеловеснее, чем [Flask](http://flask.pocoo.org/), но больше инструментов и опций)
+- [Express](/ru/docs/Learn/Server-side/Express_Nodejs) для Node.js
+- [Laravel](https://laravel.com/) для PHP
+- [Ruby On Rails](https://rubyonrails.org/) для Ruby
+- [Phoenix](https://phoenixframework.org/) для Elixir
 
-<p>Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичную функциональность с нуля, и это определённо сэкономит время. </p>
+Стоит отметить, что использование фреймворков и работа с формами - это не всегда легко. Но это намного легче, чем пытаться написать аналогичную функциональность с нуля, и это определённо сэкономит время.
 
-<div class="note">
-<p><strong>Примечание</strong>: Обучению фреймворкам и работе с серверами не входит в рамки этой статьи.  Если хотите узнать больше, ссылки ниже помогут в этом. </p>
-</div>
+> **Примечание:** Обучению фреймворкам и работе с серверами не входит в рамки этой статьи. Если хотите узнать больше, ссылки ниже помогут в этом.
 
-<h2 id="Особый_случай_отправка_файлов">Особый случай: отправка файлов</h2>
+## Особый случай: отправка файлов
 
-<p>Отправка файлов с помощью форм HTML —  это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.</p>
+Отправка файлов с помощью форм HTML — это особый случай. Файлы — это бинарные данные или рассматриваются как таковые, в то время как все остальные — это текстовые данные. Поскольку HTTP — это текстовый протокол, есть особые требования для работы с бинарными данными.
 
-<h3 id="Атрибут_htmlattrxrefenctypeform">Атрибут {{htmlattrxref("enctype","form")}} </h3>
+### Атрибут {{htmlattrxref("enctype","form")}}
 
-<p>Этот атрибут позволяет конкретизировать значение в <code>Content-Type</code> HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: <code>application/x-www-form-urlencoded</code>. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."</p>
+Этот атрибут позволяет конкретизировать значение в `Content-Type` HTTP заголовок, включённый в запрос, при генерировании отправки формы. Этот заголовок очень важен, потому что указывает серверу, какой тип данных отправляется. По умолчанию это: `application/x-www-form-urlencoded`. На человеческом это значит: "Это форма с данными, которые были закодированы в URL параметры."
 
-<p>Если хотите отправить файл, нужно сделать следующие три шага:</p>
+Если хотите отправить файл, нужно сделать следующие три шага:
 
-<ul>
- <li>Указать {{htmlattrxref("method","form")}} атрибут <code>POST</code>, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.</li>
- <li>Установить в {{htmlattrxref("enctype","form")}} значение <code>multipart/form-data</code>, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).</li>
- <li>Подключите один или более <a href="/en-US/docs/Learn/Forms/Basic_native_form_controls#file_picker">File picker</a> виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.</li>
-</ul>
+- Указать {{htmlattrxref("method","form")}} атрибут `POST`, поскольку содержимое файла, как и сам файл, не могут быть отображены в URL параметрах.
+- Установить в {{htmlattrxref("enctype","form")}} значение `multipart/form-data`, потому что данные будут разбиты на несколько частей: одна часть на файл (две части на два файла), и одна часть на текстовые данные (при условии, если форма содержит поле для получения тестовых данных).
+- Подключите один или более [File picker](/ru/docs/Learn/Forms/Basic_native_form_controls#file_picker) виджетов, чтобы позволить своим пользователям выбрать, какие и сколько файлов будут загружены.
 
-<p>Пример:</p>
+Пример:
 
-<pre class="brush: html">&lt;form method="post" enctype="multipart/form-data"&gt;
-  &lt;div&gt;
-    &lt;label for="file"&gt;Choose a file&lt;/label&gt;
-    &lt;input type="file" id="file" name="myFile"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;button&gt;Send the file&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+```html
+<form method="post" enctype="multipart/form-data">
+  <div>
+    <label for="file">Choose a file</label>
+    <input type="file" id="file" name="myFile">
+  </div>
+  <div>
+    <button>Send the file</button>
+  </div>
+</form>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Некоторые браузеры поддерживают {{htmlattrxref("multiple","input")}} атрибут элемента {{HTMLElement("input")}} , который позволяет выбрать больше одного файла для загрузки, при использовании одного элемента <code>&lt;input&gt;</code> . То, как сервер работает с этими файлами, напрямую зависит от технологий, используемых на сервере. Как упоминалось ранее, использование фреймворков сделает вашу жизнь намного легче. </p>
-</div>
+> **Примечание:** Некоторые браузеры поддерживают {{htmlattrxref("multiple","input")}} атрибут элемента {{HTMLElement("input")}} , который позволяет выбрать больше одного файла для загрузки, при использовании одного элемента `<input>` . То, как сервер работает с этими файлами, напрямую зависит от технологий, используемых на сервере. Как упоминалось ранее, использование фреймворков сделает вашу жизнь намного легче.
 
-<div class="warning">
-<p><strong>Предупреждение:</strong> Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.</p>
-</div>
+> **Предупреждение:** Многие сервера имеют заданные ограничения на размер загружаемых файлов и запросы от пользователей, чтобы защититься от возможных злоупотреблений. Важно проверять эти ограничения у администратора сервера, прежде чем загружать файлы.
 
-<h2 id="Проблемы_безопасности">Проблемы безопасности</h2>
+## Проблемы безопасности
 
-<p>Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.</p>
+Каждый раз, когда вы отправляете данные на сервер, вы должны учитывать безопасность. HTML-формы являются наиболее распространёнными векторами атак на серверы(места, где могут происходить атаки). Проблемы вытекают не из самих форм HTML, а из-за того, как сервер обрабатывает данные из этих форм.
 
-<p>В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:</p>
+В зависимости от того, что вы делаете, вы можете столкнуться с некоторыми очень известными проблемами безопасности:
 
-<h3 id="XSS_Межсайтовый_скриптинг_и_CSRF_Подделка_межсайтовых_запросов">XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"</h3>
+### XSS "Межсайтовый скриптинг" и CSRF "Подделка межсайтовых запросов"
 
-<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> и <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> - это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.</p>
+[Межсайтовый скриптинг (XSS "Cross Site Request Forgery")](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3) и [подделка межсайтовых запросов (CSRF "Cross-Site Scripting")](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0) - это распространённые типы атак, которые происходят при отображении данных после ответа сервера или другого пользователя.
 
-<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">Межсайтовый скриптинг (XSS "Cross Site Request Forgery")</a> позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">Подделка межсайтовых запросов (CSRF "Cross-Site Scripting")</a> может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же <a href="/ru/docs/Web/Security/Same-origin_policy">политика происхождения</a>. Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.</p>
+[Межсайтовый скриптинг (XSS "Cross Site Request Forgery")](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3) позволяет злоумышленникам внедрить клиентский скрипт в веб-страницы, просматриваемые другими пользователями. [Подделка межсайтовых запросов (CSRF "Cross-Site Scripting")](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0) может использоваться злоумышленниками для обхода средств контроля доступа, таких как одна и та же [политика происхождения](/ru/docs/Web/Security/Same-origin_policy). Последствие от этих атак может варьироваться от мелких неудобств до значительного риска безопасности.
 
-<p><a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF-атаки</a> аналогичны <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS-атакам</a> в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3">XSS </a>используют доверие пользователя к веб-сайту, в то время как атаки <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">CSRF </a>используют доверие веб-сайта к пользователю.</p>
+[CSRF-атаки](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0) аналогичны [XSS-атакам](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3) в том, что они начинаются одинаково - с внедрения клиентского скрипта в веб-страницы - но их конечные цели разные. Злоумышленники [CSRF ](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0)пытаются назначить права пользователям с более высоким уровнем прав доступа(например, администратору сайта), чтобы выполнить действие, которое они не должны выполнять (например, отправка данных ненадёжному пользователю). Атаки [XSS ](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3)используют доверие пользователя к веб-сайту, в то время как атаки [CSRF ](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0)используют доверие веб-сайта к пользователю.
 
-<p>Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.</p>
+Чтобы предотвратить эти атаки, вы всегда должны проверять данные, которые пользователь отправляет на ваш сервер, и (если вам нужно отобразить их) стараться не отображать HTML-контент, предоставленный пользователем. Вместо этого вы должны обработать предоставленные пользователем данные, чтобы не отображать их слово в слово. Сегодня почти все платформы на рынке реализуют минимальный "фильтр", который удаляет элементы HTML {{HTMLElement ("script")}}, {{HTMLElement ("iframe")}} и {{HTMLElement ("object")}} полученных от любого пользователя. Это помогает снизить риск, но не исключает его полностью.
 
-<h3 id="SQL_-_вброс">SQL - вброс</h3>
+### SQL - вброс
 
-<p>SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является <a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project" rel="external">одним из самых направленных атак на веб-сайты</a>.</p>
+SQL -вброс представляет собой тип атак, при которых осуществляется попытка выполнения действия с базой данных, используемой целевым веб-сайтом. В этих случаях обычно осуществляется отправка SQL-запроса в надежде, что сервер выполнит этот запрос (обычно при попытке сервера приложения сохранить данные, отправляемые пользователем). Данный вид атак является [одним из самых направленных атак на веб-сайты](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project).
 
-<p>Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью <code><a href="http://us1.php.net/manual/en/mysqli.real-escape-string.php">mysqli_real_escape_string()</a></code>.</p>
+Последствия могут быть ужасающими, начиная от потери данных и заканчивая утратой контроля над всей инфраструктурой веб-сайта за счёт повышения привилегий. Это очень серьёзная угроза, поэтому никогда не сохраняйте данные, отправляемые пользователем, без выполнения фильтрации данных (например, с помощью [`mysqli_real_escape_string()`](http://us1.php.net/manual/en/mysqli.real-escape-string.php).
 
-<h3 id="Вброс_HTTP-заголовка_и_email">Вброс HTTP-заголовка и email</h3>
+### Вброс HTTP-заголовка и email
 
-<p>Эти виды атак могут проявляться, когда ваше приложение создаёт заголовки HTTP или электронные почтовые адреса на основании данных, введённых пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.</p>
+Эти виды атак могут проявляться, когда ваше приложение создаёт заголовки HTTP или электронные почтовые адреса на основании данных, введённых пользователем в форму. Такие атаки напрямую не повреждают сервер или пользователей, однако создают уязвимость для таких угроз, как перехват сессии, или для фишинговых атак.
 
-<p>Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в <a href="http://en.wikipedia.org/wiki/Zombie_(computer_science)" rel="exernal">зомби</a>.</p>
+Такие атаки являются самыми незаметными, но при этом могут превратить ваш сервер в [зомби](<http://en.wikipedia.org/wiki/Zombie_(computer_science)>).
 
-<h3 id="Будьте_параноиком_никогда_не_доверяйте_вашим_пользователям">Будьте параноиком: никогда не доверяйте вашим пользователям</h3>
+### Будьте параноиком: никогда не доверяйте вашим пользователям
 
-<p>Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них - никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.</p>
+Как вы боретесь с такими угрозами? Этот вопрос выходит далеко за рамки данной статьи, но есть несколько общих правил, которые следует всегда соблюдать. Самое важное из них - никогда не доверяйте вашим пользователям, в том числе себе; даже проверенный пользователь может быть атакован.
 
-<p>Все данные, поступающие на ваш сервер, необходимо проверять и санитизировать. Все и всегда. Без исключений.</p>
+Все данные, поступающие на ваш сервер, необходимо проверять и санитизировать. Все и всегда. Без исключений.
 
-<ul>
- <li>Избегайте потенциально опасных символов. Конкретные символы, с которыми следует соблюдать осторожность, зависят от контекста, в котором используются данные, а также от используемой платформы. Однако, все языки на стороне сервера имеют соответствующие функции для обеспечения такой защиты.</li>
- <li>Ограничьте входящий объем данных для поступления только реально необходимых данных.</li>
- <li>Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к файлам только через отдельный поддомен или даже через совершенно другое доменное имя).</li>
-</ul>
+- Избегайте потенциально опасных символов. Конкретные символы, с которыми следует соблюдать осторожность, зависят от контекста, в котором используются данные, а также от используемой платформы. Однако, все языки на стороне сервера имеют соответствующие функции для обеспечения такой защиты.
+- Ограничьте входящий объем данных для поступления только реально необходимых данных.
+- Помещайте загруженные файлы в песочницу (храните их на другом сервере и предоставляйте доступ к файлам только через отдельный поддомен или даже через совершенно другое доменное имя).
 
-<p>Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищённости, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.</p>
+Соблюдая эти три правила, вы сможете избежать многих/большинства проблем. При этом следует помнить, что периодически необходимо проводить анализ защищённости, желательно квалифицированной сторонней организацией. Не считайте, что вы уже сталкивались со всеми возможными угрозами.
 
-<div class="note">
-<p><strong>Примечание</strong>: В статье <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a> нашего раздела <a href="/en-US/docs/Learn/Server-side">серверного</a> обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.</p>
-</div>
+> **Примечание:** В статье [Безопасность веб-сайта](/ru/docs/Learn/Server-side/First_steps/Website_security) нашего раздела [серверного](/ru/docs/Learn/Server-side) обучения приведено подробное обсуждение упомянутых угроз и возможных способов их устранения.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, <a href="/ru/docs/Learn/Forms/Form_validation">мы можем проверить данные на стороне клиента</a>, однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.</p>
+Как мы увидели, отправлять формы просто, однако защитить приложение может быть довольно трудно. Просто помните, что фронтенд разработчики не должны задавать модель безопасности для приложения. Да, как мы увидим далее, [мы можем проверить данные на стороне клиента](/ru/docs/Learn/Forms/Form_validation), однако сервер не может доверять этой проверке, потому что он никогда не может по-настоящему узнать что происходит на стороне клиента.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<p>Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следующие источники информации:</p>
+Если вы хотите узнать больше об обеспечении безопасности веб-приложений, вы можете использовать следующие источники информации:
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps">Первые шаги в программирование веб-сайтов на стороне сервера</a></li>
- <li><a href="https://www.owasp.org/index.php/Main_Page" rel="external">Открытый проект обеспечения веб-безопасности приложений (OWASP)</a></li>
- <li><a href="https://infosec.mozilla.org/guidelines/web_security">Веб-безопасность от Mozilla</a></li>
-</ul>
+- [Первые шаги в программирование веб-сайтов на стороне сервера](/ru/docs/Learn/Server-side/First_steps)
+- [Открытый проект обеспечения веб-безопасности приложений (OWASP)](https://www.owasp.org/index.php/Main_Page)
+- [Веб-безопасность от Mozilla](https://infosec.mozilla.org/guidelines/web_security)
 
-<p>{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}</p>
+{{PreviousMenuNext("Learn/HTML/Forms/The_native_form_widgets", "Learn/HTML/Forms/Form_validation", "Learn/HTML/Forms")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/Forms/Your_first_form">Ваша первая HTML-форма</a></li>
- <li><a href="/en-US/docs/Learn/Forms/How_to_structure_a_web_form">Как структурировать HTML-форму</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Basic_native_form_controls">Предопределённые виджеты</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data">Отправка данных формы</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Form_validation">Валидация данных формы</a></li>
- <li><a href="/en-US/docs/Learn/Forms/How_to_build_custom_form_controls">Как создавать кастомные виджеты</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript">Отправка форм с помощью JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/Forms/HTML_forms_in_legacy_browsers">HTML-формы в старых версиях браузеров</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">Стилизация HTML-форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">Продвинутая стилизация для HTML-форм</a></li>
- <li><a href="/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Таблица совместимости свойств виджетов форм</a></li>
-</ul>
+- [Ваша первая HTML-форма](/ru/docs/Learn/Forms/Your_first_form)
+- [Как структурировать HTML-форму](/ru/docs/Learn/Forms/How_to_structure_a_web_form)
+- [Предопределённые виджеты](/ru/docs/Learn/Forms/Basic_native_form_controls)
+- [Отправка данных формы](/ru/docs/Learn/Forms/Sending_and_retrieving_form_data)
+- [Валидация данных формы](/ru/docs/Learn/Forms/Form_validation)
+- [Как создавать кастомные виджеты](/ru/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [Отправка форм с помощью JavaScript](/ru/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [HTML-формы в старых версиях браузеров](/ru/docs/Learn/Forms/HTML_forms_in_legacy_browsers)
+- [Стилизация HTML-форм](/ru/docs/Learn/Forms/Styling_web_forms)
+- [Продвинутая стилизация для HTML-форм](/ru/docs/Learn/Forms/Advanced_form_styling)
+- [Таблица совместимости свойств виджетов форм](/ru/docs/Learn/Forms/Property_compatibility_table_for_form_controls)
diff --git a/files/ru/learn/forms/sending_forms_through_javascript/index.md b/files/ru/learn/forms/sending_forms_through_javascript/index.md
index 69e03b268a5bc8..069f436c2fbb45 100644
--- a/files/ru/learn/forms/sending_forms_through_javascript/index.md
+++ b/files/ru/learn/forms/sending_forms_through_javascript/index.md
@@ -4,59 +4,58 @@ slug: Learn/Forms/Sending_forms_through_JavaScript
 translation_of: Learn/Forms/Sending_forms_through_JavaScript
 original_slug: Learn/HTML/Forms/Sending_forms_through_JavaScript
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p>HTML формы могут декларативно отправлять <a href="/en-US/docs/HTTP">HTTP</a>-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи <code>XMLHttpRequest</code>. В этой статье исследуются подобные подходы.</p>
+HTML формы могут декларативно отправлять [HTTP](/ru/docs/HTTP)-запросы. Но формы также могут подготовить HTTP-запросы для отправки с помощью JavaScript, например при помощи `XMLHttpRequest`. В этой статье исследуются подобные подходы.
 
-<h2 id="Формы_не_всегда_формы">Формы не всегда формы</h2>
+## Формы не всегда формы
 
-<p>В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно <a href="/en-US/docs/HTML/Forms">HTML-формы</a> используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.</p>
+В современных веб-приложениях, одностраничных приложениях и приложениях на основе фреймворков, обычно [HTML-формы](/ru/docs/HTML/Forms) используются для отправки данных без загрузки нового документа при получении данных ответа. В начале поговорим о том почему это требует другого подхода.
 
-<h3 id="Получение_контроля_над_глобальным_интерфейсом">Получение контроля над глобальным интерфейсом</h3>
+### Получение контроля над глобальным интерфейсом
 
-<p>Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).</p>
+Отправка стандартной HTML формы, как описывалось в предыдущей статье, загружает URL-адрес, по которому были отправлены данные, это означает, что окно браузера перемещается с полной загрузкой страницы. Если избегать полную перезагрузку страницы, можно обеспечить более плавную работу, за счёт предотвращения задержек в сети и возможных визуальных проблем (например, мерцания).
 
-<p>Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.</p>
+Многие современные пользовательские интерфейсы используют HTML формы только для сбора пользовательского ввода, а не для для отправки данных. Когда пользователь пытается отправить свои данные, приложение берёт контроль и асинхронно передаёт данные в фоновом режиме, обновляя только ту часть всего интерфейса пользователя, которой требуется обновление.
 
-<p>Асинхронная отправка произвольных данных обычно называется <a href="/en-US/docs/AJAX">AJAX</a>, что означает <strong>"Asynchronous JavaScript And XML" </strong>(Асинхронный JavaScript и XML).</p>
+Асинхронная отправка произвольных данных обычно называется [AJAX](/ru/docs/AJAX), что означает **"Asynchronous JavaScript And XML"** (Асинхронный JavaScript и XML).
 
-<h3 id="Чем_он_отличается">Чем он отличается?</h3>
+### Чем он отличается?
 
-<p>Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки <a href="/en-US/docs/XML">XML</a> в качестве формата обмена, который со временем был заменён на <a href="/en-US/docs/JSON">JSON</a>. Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (<code>application/x-www-form-urlencoded</code>) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в <code>multipart/form-data</code>.</p>
+Объект {{domxref("XMLHttpRequest")}} (XHR) DOM может создавать HTTP-запросы, отправлять их, и получать их результат. Исторически, {{domxref("XMLHttpRequest")}} был разработан для получения и отправки [XML](/ru/docs/XML) в качестве формата обмена, который со временем был заменён на [JSON](/ru/docs/JSON). Но ни XML, ни JSON не вписываются в кодировку запроса данных формы. Данные формы (`application/x-www-form-urlencoded`) состоят из списка пар ключ/значение в кодировке URL. Для передачи бинарных данных, HTTP-запрос преобразуется в `multipart/form-data`.
 
-<div class="blockIndicator note">
-<p><strong>Замечание</strong>: Сейчас <a href="/en-US/docs/Web/API/Fetch_API">Fetch API</a> часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.</p>
-</div>
+> **Примечание:** **Замечание**: Сейчас [Fetch API](/ru/docs/Web/API/Fetch_API) часто используется вместо XHR — это современная, обновлённая версия XHR, которая работает в похожем стиле, но имеет несколько преимуществ. Большая часть XHR-кода, которую вы увидите в этой статье можно заменить на Fetch.
 
-<p>Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.</p>
+Если вы управляете фронтендом (кодом, который выполняется в браузере) и бэкендом (кодом, который выполняется на стороне сервера), вы можете отправлять JSON/XML и обрабатывать их как хотите.
 
-<p>Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.</p>
+Но если вы хотите использовать сторонний сервис, то вам необходимо отправлять данные в формате, который требуется сервису.
 
-<p>Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.</p>
+Так как нам следует отправлять подобные данные? Ниже описаны различные необходимые вам техники.
 
-<h2 id="Отправка_данных_формы">Отправка данных формы</h2>
+## Отправка данных формы
 
-<p>Есть три способа отправки данных формы:</p>
+Есть три способа отправки данных формы:
 
-<ul>
- <li>Создание <code>XMLHttpRequest</code> вручную.</li>
- <li>Использование самостоятельного <code>FormData</code> объекта.</li>
- <li>Использование <code>FormData</code> связанного с <code>&lt;form&gt;</code> элементом.</li>
-</ul>
+- Создание `XMLHttpRequest` вручную.
+- Использование самостоятельного `FormData` объекта.
+- Использование `FormData` связанного с `<form>` элементом.
 
-<p>Давайте рассмотрим их подробнее:</p>
+Давайте рассмотрим их подробнее:
 
-<h3 id="Создание_XMLHttpRequest_вручную">Создание  XMLHttpRequest вручную</h3>
+### Создание XMLHttpRequest вручную
 
-<p>{{domxref("XMLHttpRequest")}} это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.</p>
+{{domxref("XMLHttpRequest")}} это самый безопасный и надёжный способ создавать HTTP-запросы. Для отправки данных формы с помощью {{domxref("XMLHttpRequest")}}, подготовьте данные с помощью URL-кодирования, и соблюдайте специфику запросов данных формы.
 
-<p>Посмотрите на пример:</p>
+Посмотрите на пример:
 
-<pre class="brush: html">&lt;button&gt;Click Me!&lt;/button&gt;</pre>
+```html
+<button>Click Me!</button>
+```
 
-<p>И на JavaScript:</p>
+И на JavaScript:
 
-<pre class="brush: js">const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 
 function sendData( data ) {
   console.log( 'Sending data' );
@@ -74,7 +73,7 @@ function sendData( data ) {
 
   // Combine the pairs into a single string and replace all %-encoded spaces to
   // the '+' character; matches the behaviour of browser form submissions.
-  urlEncodedData = urlEncodedDataPairs.join( '&amp;' ).replace( /%20/g, '+' );
+  urlEncodedData = urlEncodedDataPairs.join( '&' ).replace( /%20/g, '+' );
 
   // Define what happens on successful data submission
   XHR.addEventListener( 'load', function(event) {
@@ -99,31 +98,32 @@ function sendData( data ) {
 btn.addEventListener( 'click', function() {
   sendData( {test:'ok'} );
 } )
-</pre>
+```
 
-<p>Это результат:</p>
+Это результат:
 
-<p>{{EmbedLiveSample("Создание_XMLHttpRequest_вручную", "100%", 50)}}</p>
+{{EmbedLiveSample("Создание_XMLHttpRequest_вручную", "100%", 50)}}
 
-<div class="note">
-<p><strong>Note:</strong> This use of {{domxref("XMLHttpRequest")}} is subject to the {{glossary('same-origin policy')}} if you want to send data to a third party web site. For cross-origin requests, you'll need <a href="/en-US/docs/HTTP/Access_control_CORS">CORS and HTTP access control</a>.</p>
-</div>
+> **Примечание:** This use of {{domxref("XMLHttpRequest")}} is subject to the {{glossary('same-origin policy')}} if you want to send data to a third party web site. For cross-origin requests, you'll need [CORS and HTTP access control](/ru/docs/HTTP/Access_control_CORS).
 
-<h3 id="Using_XMLHttpRequest_and_the_FormData_object">Using XMLHttpRequest and the FormData object</h3>
+### Using XMLHttpRequest and the FormData object
 
-<p>Building an HTTP request by hand can be overwhelming. Fortunately, the <a href="http://www.w3.org/TR/XMLHttpRequest/" rel="external">XMLHttpRequest specification</a> provides a newer, simpler way to handle form data requests with the {{domxref("XMLHttpRequest/FormData","FormData")}} object.</p>
+Building an HTTP request by hand can be overwhelming. Fortunately, the [XMLHttpRequest specification](http://www.w3.org/TR/XMLHttpRequest/) provides a newer, simpler way to handle form data requests with the {{domxref("XMLHttpRequest/FormData","FormData")}} object.
 
-<p>The {{domxref("XMLHttpRequest/FormData","FormData")}} object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that {{domxref("XMLHttpRequest/FormData","FormData")}} objects are "write only", which means you can change them, but not retrieve their contents.</p>
+The {{domxref("XMLHttpRequest/FormData","FormData")}} object can be used to build form data for transmission, or to get the data within a form element to manage how it's sent. Note that {{domxref("XMLHttpRequest/FormData","FormData")}} objects are "write only", which means you can change them, but not retrieve their contents.
 
-<p>Using this object is detailed in <a href="/en-US/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects">Using FormData Objects</a>, but here are two examples:</p>
+Using this object is detailed in [Using FormData Objects](/ru/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects), but here are two examples:
 
-<h4 id="Using_a_standalone_FormData_object">Using a standalone FormData object</h4>
+#### Using a standalone FormData object
 
-<pre class="brush: html">&lt;button&gt;Click Me!&lt;/button&gt;</pre>
+```html
+<button>Click Me!</button>
+```
 
-<p>You should be familiar with that HTML sample. Now for the JavaScript:</p>
+You should be familiar with that HTML sample. Now for the JavaScript:
 
-<pre class="brush: js">const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 
 function sendData( data ) {
   const XHR = new XMLHttpRequest(),
@@ -153,27 +153,31 @@ function sendData( data ) {
 
 btn.addEventListener( 'click', function()
   { sendData( {test:'ok'} );
-} )</pre>
+} )
+```
 
-<p>Here's the live result:</p>
+Here's the live result:
 
-<p>{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}</p>
+{{EmbedLiveSample("Using_a_standalone_FormData_object", "100%", 50)}}
 
-<h4 id="Using_FormData_bound_to_a_form_element">Using FormData bound to a form element</h4>
+#### Using FormData bound to a form element
 
-<p>You can also bind a <code>FormData</code> object to an {{HTMLElement("form")}} element. This creates a <code>FormData</code> object that represents the data contained in the form.</p>
+You can also bind a `FormData` object to an {{HTMLElement("form")}} element. This creates a `FormData` object that represents the data contained in the form.
 
-<p>The HTML is typical:</p>
+The HTML is typical:
 
-<pre class="brush: html">&lt;form id="myForm"&gt;
-  &lt;label for="myName"&gt;Send me your name:&lt;/label&gt;
-  &lt;input id="myName" name="name" value="John"&gt;
-  &lt;input type="submit" value="Send Me!"&gt;
-&lt;/form&gt;</pre>
+```html
+<form id="myForm">
+  <label for="myName">Send me your name:</label>
+  <input id="myName" name="name" value="John">
+  <input type="submit" value="Send Me!">
+</form>
+```
 
-<p>But JavaScript takes over the form:</p>
+But JavaScript takes over the form:
 
-<pre class="brush: js">window.addEventListener( "load", function () {
+```js
+window.addEventListener( "load", function () {
   function sendData() {
     const XHR = new XMLHttpRequest();
 
@@ -206,39 +210,43 @@ btn.addEventListener( 'click', function()
 
     sendData();
   } );
-} );</pre>
+} );
+```
 
-<p>Here's the live result:</p>
+Here's the live result:
 
-<p>{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}</p>
+{{EmbedLiveSample("Using_FormData_bound_to_a_form_element", "100%", 50)}}
 
-<p>You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.</p>
+You can even get more involved with the process by using the form's {{domxref("HTMLFormElement.elements", "elements")}} property to get a list of all of the data elements in the form and manually manage them one at a time. To learn more about that, see the example in {{SectionOnPage("/en-US/docs/Web/API/HTMLFormElement.elements", "Accessing the element list's contents")}}.
 
-<h2 id="Dealing_with_binary_data">Dealing with binary data</h2>
+## Dealing with binary data
 
-<p>If you use a {{domxref("XMLHttpRequest/FormData","FormData")}} object with a form that includes <code>&lt;input type="file"&gt;</code> widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.</p>
+If you use a {{domxref("XMLHttpRequest/FormData","FormData")}} object with a form that includes `<input type="file">` widgets, the data will be processed automatically. But to send binary data by hand, there's extra work to do.
 
-<p>There are many sources for binary data, including {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement","Canvas")}}, and <a href="/en-US/docs/WebRTC/navigator.getUserMedia">WebRTC</a>. Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. To learn more about the <code>FileReader</code> API, see <a href="/en-US/docs/Using_files_from_web_applications">Using files from web applications</a>.</p>
+There are many sources for binary data, including {{domxref("FileReader")}}, {{domxref("HTMLCanvasElement","Canvas")}}, and [WebRTC](/ru/docs/WebRTC/navigator.getUserMedia). Unfortunately, some legacy browsers can't access binary data or require complicated workarounds. To learn more about the `FileReader` API, see [Using files from web applications](/ru/docs/Using_files_from_web_applications).
 
-<p>The least complicated way of sending binary data is by using {{domxref("XMLHttpRequest/FormData","FormData")}}'s <code>append()</code> method, demonstrated above. If you have to do it by hand, it's trickier.</p>
+The least complicated way of sending binary data is by using {{domxref("XMLHttpRequest/FormData","FormData")}}'s `append()` method, demonstrated above. If you have to do it by hand, it's trickier.
 
-<p>In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:</p>
+In the following example, we use the {{domxref("FileReader")}} API to access binary data and then build the multi-part form data request by hand:
 
-<pre class="brush: html">&lt;form id="theForm"&gt;
-  &lt;p&gt;
-    &lt;label for="theText"&gt;text data:&lt;/label&gt;
-    &lt;input id="theText" name="myText" value="Some text data" type="text"&gt;
-  &lt;/p&gt;
-  &lt;p&gt;
-    &lt;label for="theFile"&gt;file data:&lt;/label&gt;
-    &lt;input id="theFile" name="myFile" type="file"&gt;
-  &lt;/p&gt;
-  &lt;button&gt;Send Me!&lt;/button&gt;
-&lt;/form&gt;</pre>
+```html
+<form id="theForm">
+  <p>
+    <label for="theText">text data:</label>
+    <input id="theText" name="myText" value="Some text data" type="text">
+  </p>
+  <p>
+    <label for="theFile">file data:</label>
+    <input id="theFile" name="myFile" type="file">
+  </p>
+  <button>Send Me!</button>
+</form>
+```
 
-<p>As you see, the HTML is a standard <code>&lt;form&gt;</code>. There's nothing magical going on. The "magic" is in the JavaScript:</p>
+As you see, the HTML is a standard `<form>`. There's nothing magical going on. The "magic" is in the JavaScript:
 
-<pre class="brush: js">// Because we want to access DOM nodes,
+```js
+// Because we want to access DOM nodes,
 // we initialize our script at page load.
 window.addEventListener( 'load', function () {
 
@@ -276,7 +284,7 @@ window.addEventListener( 'load', function () {
   function sendData() {
     // If there is a selected file, wait it is read
     // If there is not, delay the execution of the function
-    if( !file.binary &amp;&amp; file.dom.files.length &gt; 0 ) {
+    if( !file.binary && file.dom.files.length > 0 ) {
       setTimeout( sendData, 10 );
       return;
     }
@@ -355,38 +363,35 @@ window.addEventListener( 'load', function () {
     event.preventDefault();
     sendData();
   } );
-} );</pre>
+} );
+```
 
-<p>Here's the live result:</p>
+Here's the live result:
 
-<p>{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}</p>
+{{EmbedLiveSample("Dealing_with_binary_data", "100%", 150)}}
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The {{domxref("XMLHttpRequest/FormData","FormData")}} object is generally the answer, and you can use a <a href="https://github.com/jimmywarting/FormData">polyfill</a> for it on legacy browsers.</p>
+Depending on the browser and the type of data you are dealing with, sending form data through JavaScript can be easy or difficult. The {{domxref("XMLHttpRequest/FormData","FormData")}} object is generally the answer, and you can use a [polyfill](https://github.com/jimmywarting/FormData) for it on legacy browsers.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<h3 id="Learning_path">Learning path</h3>
+### Learning path
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML5_input_types">HTML5 input types</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Additional_form_controls">Additional form controls</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/UI_pseudo-classes">UI pseudo-classes</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
-</ul>
+- [Your first HTML form](/ru/docs/Learn/HTML/Forms/Your_first_HTML_form)
+- [How to structure an HTML form](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+- [The native form widgets](/ru/docs/Learn/HTML/Forms/The_native_form_widgets)
+- [HTML5 input types](/ru/docs/Learn/HTML/Forms/HTML5_input_types)
+- [Additional form controls](/ru/docs/Learn/HTML/Forms/Additional_form_controls)
+- [UI pseudo-classes](/ru/docs/Learn/HTML/Forms/UI_pseudo-classes)
+- [Styling HTML forms](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
+- [Form data validation](/ru/docs/Learn/HTML/Forms/Form_validation)
+- [Sending form data](/ru/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data)
 
-<h3 id="Advanced_Topics">Advanced Topics</h3>
+### Advanced Topics
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
+- [Sending forms through JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
+- [How to build custom form widgets](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
+- [HTML forms in legacy browsers](/ru/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers)
+- [Advanced styling for HTML forms](/ru/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)
+- [Property compatibility table for form widgets](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/ru/learn/forms/styling_web_forms/index.md b/files/ru/learn/forms/styling_web_forms/index.md
index ffa9a4e4ec2018..6a556d795eb3e1 100644
--- a/files/ru/learn/forms/styling_web_forms/index.md
+++ b/files/ru/learn/forms/styling_web_forms/index.md
@@ -4,207 +4,217 @@ slug: Learn/Forms/Styling_web_forms
 translation_of: Learn/Forms/Styling_web_forms
 original_slug: Learn/HTML/Forms/Styling_HTML_forms
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
 
-<p class="summary">В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!</p>
+В этой статье Вы узнает, как использовать CSS с HTML-формами, чтобы сделать их (надеюсь) более красивыми. Удивительно, но это может быть немного сложнее. По историческим и техническим причинам виджеты форм плохо сочетаются с CSS. Из-за этих трудностей многие разработчики предпочитают создавать свои собственные HTML-виджеты, чтобы получить контроль над своим внешним видом. Однако в современных браузерах веб-дизайнеры все больше контролируют дизайн элементов формы. Давайте приступим!
 
-<h2 id="Почему_так_сложно_стилизовать_виджеты_форм_с_помощью_CSS">Почему так сложно стилизовать виджеты форм с помощью CSS?</h2>
+## Почему так сложно стилизовать виджеты форм с помощью CSS?
 
-<p>На заре Интернета, примерно в 1995 году, в <a href="http://www.ietf.org/rfc/rfc1866.txt">HTML 2</a> были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.</p>
+На заре Интернета, примерно в 1995 году, в [HTML 2](http://www.ietf.org/rfc/rfc1866.txt) были добавлены элементы управления формой. Из-за сложности виджетов форм разработчики решили полагаться на базовую операционную систему для управления ими и их рендеринга.
 
-<p>Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.</p>
+Несколько лет спустя был создан CSS, и то, что было технической необходимостью, то есть использование собственных виджетов для реализации элементов управления формой, стало требованием к стилю. В первые дни CSS, стилизация элементов управления формы не была приоритетом.
 
-<p>Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.</p>
+Поскольку пользователи привыкли к внешнему виду своих соответствующих платформ, поставщики браузеров неохотно делают элементы управления формами стилевыми; и по сей день все ещё чрезвычайно трудно перестроить все элементы управления, чтобы сделать их стилизованными.
 
-<p>Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации <a href="/en-US/docs/HTML/Forms">HTML форм</a>.</p>
+Даже сегодня ни один браузер полностью не реализует CSS 2.1. Однако со временем поставщики браузеров улучшили свою поддержку CSS для элементов формы, и, несмотря на плохую репутацию в отношении удобства использования, теперь вы можете использовать CSS для стилизации [HTML форм](/ru/docs/HTML/Forms).
 
-<h3 id="Не_все_виджеты_созданы_равными_когда_задействован_CSS">Не все виджеты созданы равными, когда задействован CSS</h3>
+### Не все виджеты созданы равными, когда задействован CSS
 
-<p>В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:</p>
+В настоящее время некоторые трудности остаются при использовании CSS с формами. Эти проблемы можно разделить на три категории:
 
-<h4 id="Хорошая">Хорошая</h4>
+#### Хорошая
 
-<p>Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:</p>
+Некоторые элементы могут быть стилизованы с небольшим количеством проблем на разных платформах. К ним относятся следующие структурные элементы:
 
-<ol>
- <li>{{HTMLElement("form")}}</li>
- <li>{{HTMLElement("fieldset")}}</li>
- <li>{{HTMLElement("label")}}</li>
- <li>{{HTMLElement("output")}}</li>
-</ol>
+1.  {{HTMLElement("form")}}
+2.  {{HTMLElement("fieldset")}}
+3.  {{HTMLElement("label")}}
+4.  {{HTMLElement("output")}}
 
-<p>Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.</p>
+Сюда также входят все виджеты текстового поля (как однострочные, так и многострочные) и кнопки.
 
-<h4 id="Плохая">Плохая</h4>
+#### Плохая
 
-<p>Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.</p>
+Некоторые элементы редко могут быть стилизованы, и могут потребовать некоторых сложных уловок, иногда требующих углублённых знаний CSS3.
 
-<p>Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.</p>
+Они включают в себя элемент {{HTMLElement ("legend")}}, но его нельзя правильно расположить на всех платформах. Флажки и переключатели также не могут быть стилизованы напрямую, однако, благодаря CSS3 вы можете обойти это. Контент {{htmlattrxref ("placeholder", "input")}} не может быть стилизован каким-либо стандартным способом, однако все браузеры, которые его реализуют, также реализуют собственные псевдо-элементы CSS или псевдоклассы, которые позволяют его стилизовать.
 
-<p>Мы опишем, как обрабатывать эти более конкретные случаи, в статье <a href="/en-US/docs/Advanced_styling_for_HTML_forms">«Расширенные стили для HTML-форм».</a></p>
+Мы опишем, как обрабатывать эти более конкретные случаи, в статье [«Расширенные стили для HTML-форм».](/ru/docs/Advanced_styling_for_HTML_forms)
 
-<h4 id="The_ugly">The ugly</h4>
+#### The ugly
 
-<p>Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}} elements. The file picker widget is also known not to be stylable at all. The new {{HTMLElement("progress")}} and {{HTMLElement("meter")}} elements also fall in this category.</p>
+Some elements simply can't be styled using CSS. These include: all advanced user interface widgets, such as range, color, or date controls; and all the dropdown widgets, including {{HTMLElement("select")}}, {{HTMLElement("option")}}, {{HTMLElement("optgroup")}} and {{HTMLElement("datalist")}} elements. The file picker widget is also known not to be stylable at all. The new {{HTMLElement("progress")}} and {{HTMLElement("meter")}} elements also fall in this category.
 
-<p>The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you'll be able to style. We explore how to do this in the article <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a>.</p>
+The main issue with all these widgets, comes from the fact that they have a very complex structure, and CSS is not currently expressive enough to style all the subtle parts of those widgets. If you want to customize those widgets, you have to rely on JavaScript to build a DOM tree you'll be able to style. We explore how to do this in the article [How to build custom form widgets](/ru/docs/HTML/Forms/How_to_build_custom_form_widgets).
 
-<h2 id="Basic_styling">Basic styling</h2>
+## Basic styling
 
-<p>To style <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms#The_good" title="/en-US/docs/HTML/Forms/Styling_HTML_forms#The_good">elements that are easy to style</a> with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.</p>
+To style [elements that are easy to style](/ru/docs/HTML/Forms/Styling_HTML_forms#The_good) with CSS, you shouldn't face any difficulties, since they mostly behave like any other HTML element. However, the user-agent style sheet of every browser can be a little inconsistent, so there are a few tricks that can help you style them in an easier way.
 
-<h3 id="Search_fields">Search fields</h3>
+### Search fields
 
-<p>Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you'll have to tweak it with the <code>-webkit-appearance</code> proprietary property. We discuss this property further in the article: <a href="/en-US/docs/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a>.</p>
+Search boxes are the only kind of text fields that can be a little tricky to style. On WebKit based browsers (Chrome, Safari, etc.), you'll have to tweak it with the `-webkit-appearance` proprietary property. We discuss this property further in the article: [Advanced styling for HTML forms](/ru/docs/Advanced_styling_for_HTML_forms).
 
-<h4 id="Example">Example</h4>
+#### Example
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;input type="search"&gt;
-&lt;/form&gt;
-</pre>
+```html
+<form>
+  <input type="search">
+</form>
+```
 
-<pre class="brush: css">input[type=search] {
+```css
+input[type=search] {
   border: 1px dotted #999;
   border-radius: 0;
 
   -webkit-appearance: none;
-}</pre>
+}
+```
 
-<p><img alt="This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance" src="/files/4153/search-chrome-macos.png" style="border-style: solid; border-width: 1px; height: 107px; width: 179px;"></p>
+![This is a screenshot of a search filed on Chrome, with and without the use of -webkit-appearance](/files/4153/search-chrome-macos.png)
 
-<p>As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the <code>-webkit-appearance</code> property, whereas the second is rendered using <code>-webkit-appearance:none</code>. This difference is noticeable.</p>
+As you can see on this screenshot of the search field on Chrome, the two fields have a border set as in our example. The first field is rendered without using the `-webkit-appearance` property, whereas the second is rendered using `-webkit-appearance:none`. This difference is noticeable.
 
-<h3 id="Fonts_and_text">Fonts and text</h3>
+### Fonts and text
 
-<p>CSS font and text features can be used easily with any widget (and yes, you can use {{cssxref("@font-face")}} with form widgets). However, browsers' behaviors are often inconsistent. By default, some widgets do not inherit {{cssxref("font-family")}} and {{cssxref("font-size")}} from their parents. Many browsers use the system default appearance instead. To make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet:</p>
+CSS font and text features can be used easily with any widget (and yes, you can use {{cssxref("@font-face")}} with form widgets). However, browsers' behaviors are often inconsistent. By default, some widgets do not inherit {{cssxref("font-family")}} and {{cssxref("font-size")}} from their parents. Many browsers use the system default appearance instead. To make your forms' appearance consistent with the rest of your content, you can add the following rules to your stylesheet:
 
-<pre class="brush: css">button, input, select, textarea {
+```css
+button, input, select, textarea {
   font-family : inherit;
   font-size   : 100%;
-}</pre>
+}
+```
 
-<p>The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform's default font style in use. On the right are the same elements, with our font harmonization style rules applied.</p>
+The screenshot below shows the difference; on the left is the default rendering of the element in Firefox on Mac OS X, with the platform's default font style in use. On the right are the same elements, with our font harmonization style rules applied.
 
-<p><img alt="This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization" src="/files/4157/font-firefox-macos.png" style="border-style: solid; border-width: 1px; height: 234px; width: 420px;"></p>
+![This is a screenshot of the main form widgets on Firefox on Mac OSX, with and without font harmonization](/files/4157/font-firefox-macos.png)
 
-<p>There's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.</p>
+There's a lot of debate as to whether forms look better using the system default styles, or customized styles designed to match your content. This decision is yours to make, as the designer of your site, or Web application.
 
-<h3 id="Box_model">Box model</h3>
+### Box model
 
-<p>All text fields have complete support for every property related to the CSS box model ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and {{cssxref("border")}}). As before, however, browsers rely on the system default styles when displaying these widgets. It's up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size.</p>
+All text fields have complete support for every property related to the CSS box model ({{cssxref("width")}}, {{cssxref("height")}}, {{cssxref("padding")}}, {{cssxref("margin")}}, and {{cssxref("border")}}). As before, however, browsers rely on the system default styles when displaying these widgets. It's up to you to define how you wish to blend them into your content. If you want to keep the native look and feel of the widgets, you'll face a little difficulty if you want to give them a consistent size.
 
-<p><strong>This is because each widget has their own rules for border, padding and margin.</strong> So if you want to give the same size to several different widgets, you have to use the {{cssxref("box-sizing")}} property:</p>
+**This is because each widget has their own rules for border, padding and margin.** So if you want to give the same size to several different widgets, you have to use the {{cssxref("box-sizing")}} property:
 
-<pre class="brush: css">input, textarea, select, button {
+```css
+input, textarea, select, button {
   width : 150px;
   margin: 0;
 
   -webkit-box-sizing: border-box; /* For legacy WebKit based browsers */
-     -moz-box-sizing: border-box; /* For legacy (Firefox &lt;29) Gecko based browsers */
+     -moz-box-sizing: border-box; /* For legacy (Firefox <29) Gecko based browsers */
           box-sizing: border-box;
-}</pre>
+}
+```
 
-<p><img alt="This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing." src="/files/4161/size-chrome-win7.png" style="border-style: solid; border-width: 1px; height: 213px; width: 358px;"></p>
+![This is a screenshot of the main form widgets on Chrome on Windows 7, with and without the use of box-sizing.](/files/4161/size-chrome-win7.png)
 
-<p>In the screenshot above, the left column is built without {{cssxref("box-sizing")}}, while the right column uses this property with the value <code>border-box</code>. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget.</p>
+In the screenshot above, the left column is built without {{cssxref("box-sizing")}}, while the right column uses this property with the value `border-box`. Notice how this lets us ensure that all of the elements occupy the same amount of space, despite the platform's default rules for each kind of widget.
 
-<h3 id="Positioning">Positioning</h3>
+### Positioning
 
-<p>Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:</p>
+Positioning of HTML form widgets is generally not a problem; however, there are two elements you should take special note of:
 
-<h4 id="legend">legend</h4>
+#### legend
 
-<p>The {{HTMLElement("legend")}} element is okay to style, except for positioning. In every browser, the {{HTMLElement("legend")}} element is positioned on top of the top border of its {{HTMLElement("fieldset")}} parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the {{cssxref("position")}} property. But otherwise it is part of the fieldset border.</p>
+The {{HTMLElement("legend")}} element is okay to style, except for positioning. In every browser, the {{HTMLElement("legend")}} element is positioned on top of the top border of its {{HTMLElement("fieldset")}} parent. There is absolutely no way to change it to be positioned within the HTML flow, away from the top border. You can, however, position it absolutely or relatively, using the {{cssxref("position")}} property. But otherwise it is part of the fieldset border.
 
-<p>Because the {{HTMLElement("legend")}} element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:</p>
+Because the {{HTMLElement("legend")}} element is very important for accessibility reasons, it will be spoken by assistive technologies as part of the label of each form element inside the fieldset, it's quite often paired with a title, and then hidden in an accessible way. For example:
 
-<h5 id="HTML">HTML</h5>
+##### HTML
 
-<pre class="brush: html">&lt;fieldset&gt;
-  &lt;legend&gt;Hi!&lt;/legend&gt;
-  &lt;h1&gt;Hello&lt;/h1&gt;
-&lt;/fieldset&gt;</pre>
+```html
+<fieldset>
+  <legend>Hi!</legend>
+  <h1>Hello</h1>
+</fieldset>
+```
 
-<h5 id="CSS">CSS</h5>
+##### CSS
 
-<pre class="brush: css">legend {
+```css
+legend {
   width: 1px;
   height: 1px;
   overflow: hidden;
-}</pre>
+}
+```
 
-<h4 id="textarea">textarea</h4>
+#### textarea
 
-<p>By default, all browsers consider the {{HTMLElement("textarea")}} element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from <code>inline-block</code> to <code>block</code>, it's pretty easy to use the {{cssxref("display")}} property. But if you want to use it inline, it's common to change the vertical alignment:</p>
+By default, all browsers consider the {{HTMLElement("textarea")}} element to be an inline block, aligned to the text bottom line. This is rarely what we actually want to see. To change from `inline-block` to `block`, it's pretty easy to use the {{cssxref("display")}} property. But if you want to use it inline, it's common to change the vertical alignment:
 
-<pre class="brush: css">textarea {
+```css
+textarea {
   vertical-align: top;
-}</pre>
+}
+```
 
-<h2 id="Example_2">Example</h2>
+## Example
 
-<p>Let's look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following "postcard" contact form:</p>
+Let's look at a concrete example of how to style an HTML form. This will help make a lot of these ideas clearer. We will build the following "postcard" contact form:
 
-<p><img alt="This is what we want to achieve with HTML and CSS" src="/files/4149/screenshot.png" style="border-style: solid; border-width: 1px; height: 249px; width: 370px;"></p>
+![This is what we want to achieve with HTML and CSS](/files/4149/screenshot.png)
 
-<p>If you want to follow along with this example, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/forms/postcard-example/postcard-start.html">postcard-start.html file</a>, and follow the below instructions.</p>
+If you want to follow along with this example, make a local copy of our [postcard-start.html file](https://github.com/mdn/learning-area/blob/master/html/forms/postcard-example/postcard-start.html), and follow the below instructions.
 
-<h3 id="The_HTML">The HTML</h3>
+### The HTML
 
-<p>The HTML is only slightly more involved than the example we used in <a href="/en-US/docs/HTML/Forms/My_first_HTML_form" title="/en-US/docs/HTML/Forms/My_first_HTML_form">the first article of this guide</a>; it just has a few extra IDs and a title.</p>
+The HTML is only slightly more involved than the example we used in [the first article of this guide](/ru/docs/HTML/Forms/My_first_HTML_form); it just has a few extra IDs and a title.
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;h1&gt;to: Mozilla&lt;/h1&gt;
+```html
+<form>
+  <h1>to: Mozilla</h1>
 
-  &lt;div id="from"&gt;
-    &lt;label for="name"&gt;from:&lt;/label&gt;
-    &lt;input type="text" id="name" name="user_name"&gt;
-  &lt;/div&gt;
+  <div id="from">
+    <label for="name">from:</label>
+    <input type="text" id="name" name="user_name">
+  </div>
 
-  &lt;div id="reply"&gt;
-    &lt;label for="mail"&gt;reply:&lt;/label&gt;
-    &lt;input type="email" id="mail" name="user_email"&gt;
-  &lt;/div&gt;
+  <div id="reply">
+    <label for="mail">reply:</label>
+    <input type="email" id="mail" name="user_email">
+  </div>
 
-  &lt;div id="message"&gt;
-    &lt;label for="msg"&gt;Your message:&lt;/label&gt;
-    &lt;textarea id="msg" name="user_message"&gt;&lt;/textarea&gt;
-  &lt;/div&gt;
+  <div id="message">
+    <label for="msg">Your message:</label>
+    <textarea id="msg" name="user_message"></textarea>
+  </div>
 
-  &lt;div class="button"&gt;
-    &lt;button type="submit"&gt;Send your message&lt;/button&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+  <div class="button">
+    <button type="submit">Send your message</button>
+  </div>
+</form>
+```
 
-<p>Add the above code into the body of your HTML.</p>
+Add the above code into the body of your HTML.
 
-<h3 id="Organizing_your_assets">Organizing your assets</h3>
+### Organizing your assets
 
-<p>This is where the fun begins! Before we start coding, we need three additional assets:</p>
+This is where the fun begins! Before we start coding, we need three additional assets:
 
-<ol>
- <li>The postcard <a href="/files/4151/background.jpg" title="The postcard background">background</a> — download this image and save it in the same directory as your working HTML file.</li>
- <li>A typewriter font: <a href="http://www.fontsquirrel.com/fonts/Secret-Typewriter" rel="external">The "Secret Typewriter" font from fontsquirrel.com</a> — download the TTF file into the same directory as above.</li>
- <li>A handdrawn font: <a href="http://www.fontsquirrel.com/fonts/Journal" rel="external">The "Journal" font from fontsquirrel.com</a> — download the TTF file into the same directory as above.</li>
-</ol>
+1.  The postcard [background](/files/4151/background.jpg "The postcard background") — download this image and save it in the same directory as your working HTML file.
+2.  A typewriter font: [The "Secret Typewriter" font from fontsquirrel.com](http://www.fontsquirrel.com/fonts/Secret-Typewriter) — download the TTF file into the same directory as above.
+3.  A handdrawn font: [The "Journal" font from fontsquirrel.com](http://www.fontsquirrel.com/fonts/Journal) — download the TTF file into the same directory as above.
 
-<p>Your fonts need some more processing before you start:</p>
+Your fonts need some more processing before you start:
 
-<ol>
- <li>Go to the fontsquirrel <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a>.</li>
- <li>Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.</li>
- <li>Unzip the provided zip file.</li>
- <li>Inside the unzipped contents you will find two <code>.woff</code> files and two <code>.woff2</code> files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our <a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a> article for a lot more information.</li>
-</ol>
+1.  Go to the fontsquirrel [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator).
+2.  Using the form, upload both your font files and generate a webfont kit. Download the kit to your computer.
+3.  Unzip the provided zip file.
+4.  Inside the unzipped contents you will find two `.woff` files and two `.woff2` files. Copy these four files into a directory called fonts, in the same directory as before. We are using two different files for each font to maximise browser compatibility; see our [Web fonts](/ru/docs/Learn/CSS/Styling_text/Web_fonts) article for a lot more information.
 
-<h3 id="The_CSS">The CSS</h3>
+### The CSS
 
-<p>Now we can dig into the CSS for the example. Add all the code blocks shown below inside the {{htmlelement("style")}} element, one after another.</p>
+Now we can dig into the CSS for the example. Add all the code blocks shown below inside the {{htmlelement("style")}} element, one after another.
 
-<p>First, we prepare the ground by defining our {{cssxref("@font-face")}} rules, all the basics on the {{HTMLElement("body")}} element, and the {{HTMLElement("form")}} element:</p>
+First, we prepare the ground by defining our {{cssxref("@font-face")}} rules, all the basics on the {{HTMLElement("body")}} element, and the {{HTMLElement("form")}} element:
 
-<pre class="brush: css">@font-face {
+```css
+@font-face {
     font-family: 'handwriting';
     src: url('fonts/journal-webfont.woff2') format('woff2'),
          url('fonts/journal-webfont.woff') format('woff');
@@ -237,11 +247,13 @@ form {
   margin : 0 auto;
 
   background: #FFF url(background.jpg);
-}</pre>
+}
+```
 
-<p>Now we can position our elements, including the title and all the form elements:</p>
+Now we can position our elements, including the title and all the form elements:
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   position : absolute;
   left : 415px;
   top  : 185px;
@@ -265,17 +277,21 @@ form {
   position: absolute;
   left : 20px;
   top  : 70px;
-}</pre>
+}
+```
 
-<p>That's where we start working on the form elements themselves. First, let's ensure that the {{HTMLElement("label")}}s are given the right font:</p>
+That's where we start working on the form elements themselves. First, let's ensure that the {{HTMLElement("label")}}s are given the right font:
 
-<pre class="brush: css">label {
+```css
+label {
   font : .8em "typewriter", sans-serif;
-}</pre>
+}
+```
 
-<p>The text fields require some common rules. Simply put, we remove their {{cssxref("border","borders")}} and {{cssxref("background","backgrounds")}}, and redefine their {{cssxref("padding")}} and {{cssxref("margin")}}:</p>
+The text fields require some common rules. Simply put, we remove their {{cssxref("border","borders")}} and {{cssxref("background","backgrounds")}}, and redefine their {{cssxref("padding")}} and {{cssxref("margin")}}:
 
-<pre class="brush: css">input, textarea {
+```css
+input, textarea {
   font    : .9em/1.5em "handwriting", sans-serif;
 
   border  : none;
@@ -284,28 +300,34 @@ form {
   width   : 240px;
 
   background: none;
-}</pre>
+}
+```
 
-<p>When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it's important to add the {{cssxref("outline")}} property, in order to remove the default focus highlight added by some browsers:</p>
+When one of these fields gains focus, we highlight them with a light grey, transparent, background. Note that it's important to add the {{cssxref("outline")}} property, in order to remove the default focus highlight added by some browsers:
 
-<pre class="brush: css">input:focus, textarea:focus {
+```css
+input:focus, textarea:focus {
   background   : rgba(0,0,0,.1);
   border-radius: 5px;
   outline      : none;
-}</pre>
+}
+```
 
-<p>Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.</p>
+Now that our text fields are complete, we need to adjust the display of the single and multiple line text fields to match, since they won't typically look the same using the defaults.
 
-<p>The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:</p>
+The single-line text field needs some tweaks to render nicely in Internet Explorer. Internet Explorer does not define the height of the fields based on the natural height of the font (which is the behavior of all other browsers). To fix this, we need to add an explicit height to the field, as follows:
 
-<pre class="brush: css">input {
+```css
+input {
     height: 2.5em; /* for IE */
     vertical-align: middle; /* This is optional but it makes legacy IEs look better */
-}</pre>
+}
+```
 
-<p>{{HTMLElement("textarea")}} elements default to being rendered as a block element. The two important things here are the {{cssxref("resize")}} and {{cssxref("overflow")}} properties. Because our design is a fixed-size design, we will use the <code>resize</code> property to prevent users from resizing our multi-line text field. The {{cssxref("overflow")}} property is used to make the field render more consistently across browsers. Some browsers default to the value <code>auto</code>, while some default to the value <code>scroll</code>. In our case, it's better to be sure every one will use <code>auto</code>:</p>
+{{HTMLElement("textarea")}} elements default to being rendered as a block element. The two important things here are the {{cssxref("resize")}} and {{cssxref("overflow")}} properties. Because our design is a fixed-size design, we will use the `resize` property to prevent users from resizing our multi-line text field. The {{cssxref("overflow")}} property is used to make the field render more consistently across browsers. Some browsers default to the value `auto`, while some default to the value `scroll`. In our case, it's better to be sure every one will use `auto`:
 
-<pre class="brush: css">textarea {
+```css
+textarea {
   display : block;
 
   padding : 10px;
@@ -315,11 +337,13 @@ form {
 
   resize  : none;
   overflow: auto;
-}</pre>
+}
+```
 
-<p>The {{HTMLElement("button")}} element is really convenient with CSS; you can do whatever you want, even using <a href="/en-US/docs/CSS/Pseudo-elements" title="/en-US/docs/CSS/Pseudo-elements">pseudo-elements</a>:</p>
+The {{HTMLElement("button")}} element is really convenient with CSS; you can do whatever you want, even using [pseudo-elements](/ru/docs/CSS/Pseudo-elements):
 
-<pre class="brush: css">button {
+```css
+button {
   position     : absolute;
   left         : 440px;
   top          : 360px;
@@ -341,7 +365,7 @@ form {
 }
 
 button:after {
-  content: " &gt;&gt;&gt;";
+  content: " >>>";
 }
 
 button:hover,
@@ -349,34 +373,31 @@ button:focus {
   outline   : none;
   background: #000;
   color   : #FFF;
-}</pre>
+}
+```
 
-<p>And voila!</p>
+And voila!
 
-<div class="note">
-<p><strong>Note</strong>: If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it <a href="https://mdn.github.io/learning-area/html/forms/postcard-example/">running live</a> (also see <a href="https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example">the source code</a>).</p>
-</div>
+> **Примечание:** If your example does not work quite like you expected and you want to check it against our version, you can find it on GitHub — see it [running live](https://mdn.github.io/learning-area/html/forms/postcard-example/) (also see [the source code](https://github.com/mdn/learning-area/tree/master/html/forms/postcard-example)).
 
-<h2 id="Conclusion">Conclusion</h2>
+## Conclusion
 
-<p>As you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of <a href="http://necolas.github.com/normalize.css" rel="external">the normalize.css project</a>.</p>
+As you can see, as long as we want to build forms with just text fields and buttons, it's easy to style them using CSS. If you want to know more of the little CSS tricks that can make your life easier when working with form widgets, take a look at the form part of [the normalize.css project](http://necolas.github.com/normalize.css).
 
-<p><a href="/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms" title="/en-US/docs/Advanced_styling_for_HTML_forms">In the next article</a>, we will see how to handle form widgets which fall in the "bad" and "ugly" categories.</p>
+[In the next article](/ru/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms "/en-US/docs/Advanced_styling_for_HTML_forms"), we will see how to handle form widgets which fall in the "bad" and "ugly" categories.
 
-<p>{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}</p>
+{{PreviousMenuNext("Learn/HTML/Forms/HTML_forms_in_legacy_browsers", "Learn/HTML/Forms/Advanced_styling_for_HTML_forms", "Learn/HTML/Forms")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Your_first_HTML_form">Your first HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form">How to structure an HTML form</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/The_native_form_widgets">The native form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data">Sending form data</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript">Sending forms through JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers">HTML forms in legacy browsers</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Styling_HTML_forms">Styling HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms">Advanced styling for HTML forms</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets">Property compatibility table for form widgets</a></li>
-</ul>
+- [Your first HTML form](/ru/docs/Learn/HTML/Forms/Your_first_HTML_form)
+- [How to structure an HTML form](/ru/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form)
+- [The native form widgets](/ru/docs/Learn/HTML/Forms/The_native_form_widgets)
+- [Sending form data](/ru/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data)
+- [Form data validation](/ru/docs/Learn/HTML/Forms/Form_validation)
+- [How to build custom form widgets](/ru/docs/Learn/HTML/Forms/How_to_build_custom_form_widgets)
+- [Sending forms through JavaScript](/ru/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript)
+- [HTML forms in legacy browsers](/ru/docs/Learn/HTML/Forms/HTML_forms_in_legacy_browsers)
+- [Styling HTML forms](/ru/docs/Learn/HTML/Forms/Styling_HTML_forms)
+- [Advanced styling for HTML forms](/ru/docs/Learn/HTML/Forms/Advanced_styling_for_HTML_forms)
+- [Property compatibility table for form widgets](/ru/docs/Learn/HTML/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/ru/learn/front-end_web_developer/index.md b/files/ru/learn/front-end_web_developer/index.md
index bc7c3f912eb5ae..177c23c3675c13 100644
--- a/files/ru/learn/front-end_web_developer/index.md
+++ b/files/ru/learn/front-end_web_developer/index.md
@@ -8,189 +8,169 @@ tags:
 translation_of: Learn/Front-end_web_developer
 original_slug: Learn/Фронтенд_разработчик
 ---
-<p>{{learnsidebar}}<br>
- <br>
- Добро пожаловать на курс обучения Фронтенд разработчика!<br>
- <br>
- Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.</p>
+{{learnsidebar}}
 
-<h2 id="Основные_темы">Основные темы:</h2>
+Добро пожаловать на курс обучения Фронтенд разработчика!
 
-<p>В курсе рассматриваются темы:</p>
+Здесь мы предлагаем вам структурированный курс, который научит вас всему, что вам необходимо знать, чтобы стать фронтенд разработчиком. Изучение в рекомендуемом порядке каждого раздела позволит получить новые навыки, или улучшить имеющиеся. Также в каждом разделе вы найдёте упражнения и тесты. Прежде чем переходить к следующей теме обязательно проверьте себя.
 
-<ul>
- <li>Базовая настройка и как правильно проходить курс</li>
- <li>Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)</li>
- <li>HTML, язык, описывающий структуру и смысл контента</li>
- <li>CSS, язык, используемый для оформления страниц</li>
- <li>JavaScript, язык сценариев, используемый для создания динамических функций в веб содержимом</li>
- <li>Инструменты, используемые для облегчения современной веб-разработки на стороне клиента.</li>
-</ul>
+## Основные темы:
 
-<p>Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.</p>
+В курсе рассматриваются темы:
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+- Базовая настройка и как правильно проходить курс
+- Веб-стандарты и лучшие решения (такие как доступность и кросс-браузерная совместимость)
+- HTML, язык, описывающий структуру и смысл контента
+- CSS, язык, используемый для оформления страниц
+- JavaScript, язык сценариев, используемый для создания динамических функций в веб содержимом
+- Инструменты, используемые для облегчения современной веб-разработки на стороне клиента.
 
-<p>Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.<br>
- <br>
- Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел <a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с веб</a> модулем.</p>
+Различные разделы предназначены для проработки по порядку, но каждый из них также самодостаточен. Если вы, к примеру, уже хорошо знакомы с HTML, то можете перейти к разделу CSS.
 
-<h2 id="Получить_помощь">Получить помощь</h2>
+## Необходимые условия
 
-<p>Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.</p>
+Вам не нужно никаких предварительных знаний, чтобы начать этот курс. Всё, что вам необходимо – это компьютер, который может работать с современными браузерами, интернет соединение и готовность учиться.
 
-<p>Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья <a href="/en-US/docs//Learn/Learning_and_getting_help">Обучение и получение помощи</a> предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем <a href="https://discourse.mozilla.org/c/mdn/learn/">Форуме</a>.</p>
+Если вы не уверены, подходит ли вам фронтенд разработка и/или вы хотите получить подробное представление, то прежде чем начинать полный курс, вам следует сначала изучить наш раздел [Начало работы с веб](/ru/docs/Learn/Getting_started_with_the_web) модулем.
 
-<p>Давайте начнём,</p>
+## Получить помощь
 
-<p>Удачи!</p>
+Мы постарались сделать изучение фронтенд разработки настолько комфортным, насколько это возможно. Вероятно, вы всё равно рано или поздно попадёте в безвыходное положение, когда что-то будет непонятно или какой-то код не будет работать.
 
-<h2 id="Путь_обучения">Путь обучения</h2>
+Не беспокойтесь. Мы все иногда застреваем, и начинающие, и профессиональные веб-разработчики. Статья [Обучение и получение помощи](/ru/docs//Learn/Learning_and_getting_help) предоставит вам серию советов и подсказок для поиска информации и помощи самому себе. Если вы всё ещё в замешательстве, задайте вопрос по возникшей проблеме на нашем [Форуме](https://discourse.mozilla.org/c/mdn/learn/).
 
-<h3 id="Начало_работы">Начало работы</h3>
+Давайте начнём,
 
-<p>Время изучения: 1–2 часа</p>
+Удачи!
 
-<h4 id="Необходимые_условия_2">Необходимые условия</h4>
+## Путь обучения
 
-<p>Ничего, кроме базовой компьютерной грамотности.</p>
+### Начало работы
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше">Как понять, что я могу двигаться дальше?</h4>
+Время изучения: 1–2 часа
 
-<p>В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.</p>
+#### Необходимые условия
 
-<h4 id="Основные_руководства">Основные руководства</h4>
+Ничего, кроме базовой компьютерной грамотности.
 
-<ul>
- <li><a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a>— базовая настройка инструмента (15 минут чтения)</li>
- <li><a href="/ru/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">История всемирной сети и веб-стандартов</a> (45 минут чтения)</li>
- <li><a href="/en-US/docs//Learn/Learning_and_getting_help">Обучение и получение помощи</a> (45 минут чтения)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h3 id="Семантика_и_структура_с_HTML">Семантика и структура с HTML</h3>
+В этой части курса нет оценок, но обязательно убедитесь, что вы ничего здесь не пропустили — важно всё настроить и подготовиться к выполнению упражнений в дальнейшем.
 
-<p>Время завершения: 35–50 часов</p>
+#### Основные руководства
 
-<h4 id="Необходимые_условия_3">Необходимые условия</h4>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения)— базовая настройка инструмента (15 минут чтения)
+- [История всемирной сети и веб-стандартов](/ru/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) (45 минут чтения)
+- [Обучение и получение помощи](/ru/docs//Learn/Learning_and_getting_help) (45 минут чтения)
 
-<p>Ничего, кроме базовой компьютерной грамотности и базовой среды разработки веб-приложений.</p>
+### Семантика и структура с HTML
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_2">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 35–50 часов
 
-<p>Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули">Основные модули</h4>
+Ничего, кроме базовой компьютерной грамотности и базовой среды разработки веб-приложений.
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a> (15–20 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a> (15–20 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/HTML/Tables">HTML таблицы</a> (5–10 часов чтения/упражнений)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h3 id="Стилизация_и_размещение_с_помощью_CSS">Стилизация и размещение с помощью CSS</h3>
+Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.
 
-<p>Время завершения: 90–120 часов</p>
+#### Основные модули
 
-<h4 id="Необходимые_условия_4">Необходимые условия</h4>
+- [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML) (15–20 часов чтения/упражнений)
+- [Мультимедиа и встраивание](/ru/docs/Learn/HTML/Multimedia_and_embedding) (15–20 часов чтения/упражнений)
+- [HTML таблицы](/ru/docs/Learn/HTML/Tables) (5–10 часов чтения/упражнений)
 
-<p>Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>.</p>
+### Стилизация и размещение с помощью CSS
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_3">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 90–120 часов
 
-<p>Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули_2">Основные модули</h4>
+Рекомендуется иметь базовые знания HTML перед началом изучения CSS. Сначала вы должны изучить [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML).
 
-<ul>
- <li><a href="/ru/docs/Learn/CSS/First_steps">Первые шаги в CSS</a> (10–15 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/CSS/Building_blocks">Структурные элементы CSS</a> (35–45 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/CSS/Styling_text">Стилизирование текста</a> (15–20 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/CSS/CSS_layout">CSS разметка</a> (30–40 часов чтения/упражнений)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h4 id="Дополнительные_ресурсы">Дополнительные ресурсы</h4>
+Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.
 
-<ul>
- <li><a href="/ru/docs/Web/CSS/Layout_cookbook">Книга рецептов CSS</a></li>
-</ul>
+#### Основные модули
 
-<h3 id="Интерактивность_с_JavaScript">Интерактивность с JavaScript</h3>
+- [Первые шаги в CSS](/ru/docs/Learn/CSS/First_steps) (10–15 часов чтения/упражнений)
+- [Структурные элементы CSS](/ru/docs/Learn/CSS/Building_blocks) (35–45 часов чтения/упражнений)
+- [Стилизирование текста](/ru/docs/Learn/CSS/Styling_text) (15–20 часов чтения/упражнений)
+- [CSS разметка](/ru/docs/Learn/CSS/CSS_layout) (30–40 часов чтения/упражнений)
 
-<p>Время завершения: 135–185 часов</p>
+#### Дополнительные ресурсы
 
-<h4 id="Необходимые_условия_5">Необходимые условия</h4>
+- [Книга рецептов CSS](/ru/docs/Web/CSS/Layout_cookbook)
 
-<p>Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a>.</p>
+### Интерактивность с JavaScript
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_4">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 135–185 часов
 
-<p>Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули_3">Основные модули</h4>
+Рекомендуется иметь базовые знания HTML перед началом изучения JavaScript. Сначала вы должны изучить [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML).
 
-<ul>
- <li><a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги в JavaScript</a> (30–40 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы Javascript</a> (25–35 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/JavaScript/Client-side_web_APIs">Клиентский веб API</a> (30–40 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/JavaScript/Объекты">Введение в объекты Javascript</a> (25–35 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/JavaScript/Asynchronous">Асинхронный Javascript</a> (25–35 часов чтения/упражнений)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h3 id="Веб_формы_—_Работаем_с_данными_пользователя">Веб формы — Работаем с данными пользователя</h3>
+Оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.
 
-<p>Время завершения: 40–50 часов</p>
+#### Основные модули
 
-<h4 id="Необходимые_условия_6">Необходимые условия</h4>
+- [Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги) (30–40 часов чтения/упражнений)
+- [Структурные элементы Javascript](/ru/docs/Learn/JavaScript/Building_blocks) (25–35 часов чтения/упражнений)
+- [Клиентский веб API](/ru/docs/Learn/JavaScript/Client-side_web_APIs) (30–40 часов чтения/упражнений)
+- [Введение в объекты Javascript](/ru/docs/Learn/JavaScript/Объекты) (25–35 часов чтения/упражнений)
+- [Асинхронный Javascript](/ru/docs/Learn/JavaScript/Asynchronous) (25–35 часов чтения/упражнений)
 
-<p>Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.</p>
+### Веб формы — Работаем с данными пользователя
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_5">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 40–50 часов
 
-<p>Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули_4">Основные модули</h4>
+Для эффективного использования форм требуется знание HTML, CSS и JavaScript. Они сложны и поэтому рассматриваются отдельно.
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Forms">Веб формы</a> (40–50 часов)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h3 id="Заставляем_веб_работать_для_всех">Заставляем веб работать для всех</h3>
+Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.
 
-<p>Время завершения: 60–75 часов</p>
+#### Основные модули
 
-<h4 id="Необходимые_условия_7">Необходимые условия</h4>
+- [Веб формы](/ru/docs/Learn/HTML/Forms) (40–50 часов)
 
-<p>Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом - многие из техник и лучших практик используются в нескольких технологиях.</p>
+### Заставляем веб работать для всех
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_6">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 60–75 часов
 
-<p>Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули_5">Основные модули</h4>
+Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом - многие из техник и лучших практик используются в нескольких технологиях.
 
-<ul>
- <li><a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing">Кросс-браузерное тестирование</a> (25–30 часов чтения/упражнений)</li>
- <li><a href="/ru/docs/Learn/Доступность">Доступность</a> (20–25 часов чтения/упражнений)</li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
 
-<h3 id="Современные_инструменты">Современные инструменты</h3>
+Упражнения и оценки в каждом модуле предназначены для проверки ваших знаний по предмету - завершение каждого из них докажет, что вы можете перейти к следующему модулю.
 
-<p>Время завершения: 55–90 часов</p>
+#### Основные модули
 
-<h4 id="Необходимые_условия_8">Необходимые условия</h4>
+- [Кросс-браузерное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) (25–30 часов чтения/упражнений)
+- [Доступность](/ru/docs/Learn/Доступность) (20–25 часов чтения/упражнений)
 
-<p>Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.</p>
+### Современные инструменты
 
-<h4 id="Как_понять_что_я_могу_двигаться_дальше_7">Как понять, что я могу двигаться дальше?</h4>
+Время завершения: 55–90 часов
 
-<p>В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.</p>
+#### Необходимые условия
 
-<h4 id="Основные_модули_6">Основные модули</h4>
+Рекомендуется ознакомиться с HTML, CSS и JavaScript перед началом работы с этим разделом, так как обсуждаемые инструменты работают со многими из этих технологий.
 
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/GitHub">Git и Github</a> (5 часов чтения)</li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">Понимание инструментов на стороне клиента</a> (20–25 часов чтения/упражнений)</li>
- <li>
-  <p><a href="/ru/docs/Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки">Понимание JavaScript-фреймворков для фронтенда</a> (30-60 часов чтения/упражнений)</p>
- </li>
-</ul>
+#### Как понять, что я могу двигаться дальше?
+
+В этом наборе модулей нет специальных статей для оценки, но учебные примеры в конце 2-го и 3-го модулей хорошо подготовят вас к пониманию основ современного инструментария.
+
+#### Основные модули
+
+- [Git и Github](/ru/docs/Learn/Tools_and_testing/GitHub) (5 часов чтения)
+- [Понимание инструментов на стороне клиента](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools) (20–25 часов чтения/упражнений)
+- [Понимание JavaScript-фреймворков для фронтенда](/ru/docs/Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки) (30-60 часов чтения/упражнений)
diff --git a/files/ru/learn/getting_started_with_the_web/css_basics/index.md b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
index d6dd2a65330ee3..5bc88967e672f9 100644
--- a/files/ru/learn/getting_started_with_the_web/css_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/css_basics/index.md
@@ -13,283 +13,246 @@ tags:
   - Обучение
 translation_of: Learn/Getting_started_with_the_web/CSS_basics
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</div>
+CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. _Основы CSS_ помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?
 
-<div class="summary">
-<p>CSS (Cascading Style Sheets) — это код, который вы используете для стилизации вашей веб-страницы. <em>Основы CSS</em> помогут вам понять, что вам нужно для начала работы. Мы ответим на такие вопросы как: Как сделать мой текст черным или красным? Как сделать так, чтобы контент появлялся в определённом месте на экране? Как украсить мою веб-страницу с помощью фоновых изображений и цветов?</p>
-</div>
+## Так что же такое CSS?
 
-<h2 id="Так_что_же_такое_CSS">Так что же такое CSS? </h2>
+Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это _язык таблицы стилей._ Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать **все** элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:
 
-<p>Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это <em>язык таблицы стилей. </em>Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать <strong>все</strong> элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS:</p>
-
-<pre><code>p {
+```
+p {
   color: red;
-}</code></pre>
+}
+```
+
+Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как `style.css` в вашей папке `styles`.
 
-<p>Давайте попробуем: вставьте эти три строки CSS в новый файл в ваш текстовый редактор, а затем сохраните файл как <code>style.css</code> в вашей папке <code>styles</code>.</p>
+Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) и [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), чтобы узнать, что вам нужно сделать в первую очередь.)
 
-<p>Но нам всё равно нужно применить CSS к нашему HTML документу. В противном случае, CSS стиль не повлияет на то, как ваш браузер отобразит HTML документ. (Если вы не следили за нашим проектом, то прочитайте раздел <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> и <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a>, чтобы узнать, что вам нужно сделать в первую очередь.)</p>
+1.  Откройте ваш файл `index.html` и вставьте следующую строку куда-нибудь в шапку, между `<head>` и `</head>` тегами:
 
-<ol>
- <li>Откройте ваш файл <code>index.html</code> и вставьте следующую строку куда-нибудь в шапку, между <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code> тегами:
+    ```html
+    <link href="styles/style.css" rel="stylesheet" type="text/css">
+    ```
 
-  <pre class="brush: html">&lt;link href="styles/style.css" rel="stylesheet" type="text/css"&gt;</pre>
- </li>
- <li>Сохраните <code>index.html</code> и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:</li>
-</ol>
+2.  Сохраните `index.html` и загрузите его в вашем браузере. Вы должны увидеть что-то вроде этого:
 
-<p><img alt="A mozilla logo and some paragraphs. The paragraph text has been styled red by our css." src="website-screenshot-styled.png" style="display: block; margin: 0px auto;">Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!</p>
+![A mozilla logo and some paragraphs. The paragraph text has been styled red by our css.](website-screenshot-styled.png)Если текст вашего абзаца теперь красный, примите наши поздравления! Вы написали свой первый успешный CSS!
 
-<h3 id="Анатомия_набора_правил_CSS">Анатомия набора правил CSS</h3>
+### Анатомия набора правил CSS
 
-<p>Давайте взглянем на вышеупомянутый CSS немного более подробно:</p>
+Давайте взглянем на вышеупомянутый CSS немного более подробно:
 
-<p><img alt="" src="css-declaration-small.png" style="display: block; margin: 0px auto;"></p>
+![](css-declaration-small.png)
 
-<p>Вся структура называется <strong>набором правил</strong> (но зачастую для краткости "правило"). Отметим также имена отдельных частей:</p>
+Вся структура называется **набором правил** (но зачастую для краткости "правило"). Отметим также имена отдельных частей:
 
-<dl>
- <dt>Селектор (Selector)</dt>
- <dd>Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы <code>p</code> ). Для стилизации другого элемента, просто измените селектор.</dd>
- <dt>Объявление (Declaration)</dt>
- <dd>Единственное правило, например <code>color: red;</code> указывает, какие из <strong>свойств</strong> элемента вы хотите стилизовать.</dd>
- <dt>Свойства (Properties)</dt>
- <dd>Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, <code>color</code> является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.</dd>
- <dt>Значение свойства (Property value)</dt>
- <dd>Справа от свойства, после двоеточия, у нас есть <strong>значение свойства</strong>, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений <code>color</code>, помимо <code>red</code>).</dd>
-</dl>
+- Селектор (Selector)
+  - : Имя HTML-элемента в начале набора правил. Он выбирает элемент(ы) для применения стиля (в данном случае, элементы `p` ). Для стилизации другого элемента, просто измените селектор.
+- Объявление (Declaration)
+  - : Единственное правило, например `color: red;` указывает, какие из **свойств** элемента вы хотите стилизовать.
+- Свойства (Properties)
+  - : Способы, которыми вы можете стилизовать определённый HTML-элемент (в данном случае, `color` является свойством для элементов {{htmlelement("p")}}). В CSS вы выбираете, какие свойства вы хотите затронуть в вашем правиле.
+- Значение свойства (Property value)
+  - : Справа от свойства, после двоеточия, у нас есть **значение свойства**, которое выбирает одно из множества возможных признаков для данного свойства (существует множество значений `color`, помимо `red`).
 
-<p>Обратите внимание на важные части синтаксиса:</p>
+Обратите внимание на важные части синтаксиса:
 
-<ul>
- <li>Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки (<code>{}</code>).</li>
- <li>В каждом объявлении необходимо использовать двоеточие (<code>:</code>), чтобы отделить свойство от его значений.</li>
- <li>В каждом наборе правил вы должны использовать точку с запятой (<code>;</code>), чтобы отделить каждое объявление от следующего.</li>
-</ul>
+- Каждый набор правил (кроме селектора) должен быть обёрнут в фигурные скобки (`{}`).
+- В каждом объявлении необходимо использовать двоеточие (`:`), чтобы отделить свойство от его значений.
+- В каждом наборе правил вы должны использовать точку с запятой (`;`), чтобы отделить каждое объявление от следующего.
 
-<p>Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:</p>
+Таким образом, чтобы изменить несколько значений свойств сразу, вам просто нужно написать их, разделяя точкой с запятой, например так:
 
-<pre class="brush: css">p {
+```css
+p {
   color: red;
   width: 500px;
   border: 1px solid black;
-}</pre>
+}
+```
 
-<h3 id="Выбор_нескольких_элементов">Выбор нескольких элементов</h3>
+### Выбор нескольких элементов
 
-<p>Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:</p>
+Вы также можете выбрать несколько элементов разного типа и применить единый набор правил для всех из них. Добавьте несколько селекторов, разделённых запятыми. Например:
 
-<pre class="brush: css">p,li,h1 {
+```css
+p,li,h1 {
   color: red;
-}</pre>
-
-<h3 id="Разные_типы_селекторов">Разные типы селекторов</h3>
-
-<p>Существует множество различных типов селектора. Выше мы рассматривали только <strong>селектор элементов</strong>, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Имя селектора</th>
-   <th scope="col">Что выбирает</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Селектор элемента (иногда называемый селектором тега или типа)</td>
-   <td>Все HTML-элемент(ы) указанного типа.</td>
-   <td><code>p</code><br>
-    Выбирает <code>&lt;p&gt;</code></td>
-  </tr>
-  <tr>
-   <td>ID селектор</td>
-   <td>Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов.</td>
-   <td><code>#my-id</code><br>
-    Выбирает <code>&lt;p id="my-id"&gt;</code> или <code>&lt;a id="my-id"&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Селектор класса</td>
-   <td>Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).</td>
-   <td><code>.my-class</code><br>
-    Выбирает <code>&lt;p class="my-class"&gt;</code> и <code>&lt;a class="my-class"&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Селектор атрибута</td>
-   <td>Элемент(ы) на странице с указанным атрибутом.</td>
-   <td><code>img[src]</code><br>
-    Выбирает <code>&lt;img src="myimage.png"&gt;</code> но не <code>&lt;img&gt;</code></td>
-  </tr>
-  <tr>
-   <td>Селектор псевдокласса</td>
-   <td>Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.</td>
-   <td><code>a:hover</code><br>
-    Выбирает <code>&lt;a&gt;</code>, но только тогда, когда указатель мыши наведён на ссылку.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем <a href="/ru/docs/Web/Guide/CSS/Getting_started/Selectors">Руководстве селекторов</a>.</p>
-
-<h2 id="Шрифты_и_текст">Шрифты и текст</h2>
-
-<p>Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл <code>style.css</code>, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.</p>
-
-<ol>
- <li>Прежде всего, вернитесь и найдите <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вывод из Google Fonts</a>, который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего <code>index.html</code> (снова, в любом месте между тегами <code>&lt;head&gt;</code> и <code>&lt;/head&gt;</code>). Это будет выглядеть примерно так:
-
-  <pre class="brush: html">&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;</pre>
-  Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.</li>
- <li>Затем, удалите существующее правило в вашем <code>style.css</code> файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.</li>
- <li>Добавьте следующие строки в нужное место, заменив строку <code>placeholder</code> актуальной <code>font-family</code> строкой, которую вы получили из Google Fonts. (<code>font-family</code> просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку <code>&lt;html&gt;</code> является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же <code>font-size</code> и <code>font-family</code>):
-  <pre class="brush: css">html {
-  font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту  */
-  font-family: placeholder: здесь должно быть имя шрифта из Google fonts
-}</pre>
-
-  <div class="note">
-  <p><strong>Примечание</strong>: Все в CSS документе между <code>/*</code> и <code>*/ </code> является <strong>CSS комментарием</strong>, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.</p>
-  </div>
- </li>
- <li>Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
-  <pre class="brush: css">h1 {
-  font-size: 60px;
-  text-align: center;
 }
+```
+
+### Разные типы селекторов
+
+Существует множество различных типов селектора. Выше мы рассматривали только **селектор элементов**, который выбирает все элементы определённого типа в HTML документе. Но мы можем сделать выбор более конкретным. Вот некоторые из наиболее распространённых типов селекторов:
+
+| Имя селектора                                                  | Что выбирает                                                                                                                                                                                                                      | Пример                                                                             |
+| -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| Селектор элемента (иногда называемый селектором тега или типа) | Все HTML-элемент(ы) указанного типа.                                                                                                                                                                                              | `p` Выбирает `<p>`                                                                 |
+| ID селектор                                                    | Элемент на странице с указанным ID на данной HTML. Лучше всего использовать один элемент для каждого ID (и конечно один ID для каждого элемента), даже если вам разрешено использовать один и тот же ID для нескольких элементов. | `#my-id` Выбирает `<p id="my-id">` или `<a id="my-id">`                            |
+| Селектор класса                                                | Элемент(ы) на странице с указанным классом (множество экземпляров класса может объявляться на странице).                                                                                                                          | `.my-class` Выбирает `<p class="my-class">` и `<a class="my-class">`               |
+| Селектор атрибута                                              | Элемент(ы) на странице с указанным атрибутом.                                                                                                                                                                                     | `img[src]` Выбирает `<img src="myimage.png">` но не `<img>`                        |
+| Селектор псевдокласса                                          | Указанные элемент(ы), но только в случае определённого состояния, например, при наведении курсора.                                                                                                                                | `a:hover` Выбирает `<a>`, но только тогда, когда указатель мыши наведён на ссылку. |
+
+Существует ещё много селекторов для изучения, и вы можете найти более подробный список в нашем [Руководстве селекторов](/ru/docs/Web/Guide/CSS/Getting_started/Selectors).
+
+## Шрифты и текст
+
+Теперь, когда мы изучили некоторые основы CSS, давайте добавим ещё несколько правил и информацию в наш файл `style.css`, чтобы наш пример хорошо выглядел. Прежде всего, давайте сделаем, чтобы наши шрифты и текст выглядели немного лучше.
+
+1.  Прежде всего, вернитесь и найдите [вывод из Google Fonts](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like), который вы уже где-то сохранили. Добавьте элемент {{htmlelement("link")}} где-нибудь внутри шапки вашего `index.html` (снова, в любом месте между тегами `<head>` и `</head>`). Это будет выглядеть примерно так:
 
-p, li {
-  font-size: 16px;
-  line-height: 2;
-  letter-spacing: 1px;
-}</pre>
- </li>
-</ol>
+    ```html
+    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
+    ```
 
-<p>Вы можете настроить значения <code>px</code> так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:</p>
+    Этот код связывает вашу страницу с таблицой стилями, которая загружает семейство шрифтов Open Sans вместе с вашей страницей и позволяет вам применять их к вашим HTML-элементам используя свою собственную таблицу стилей.
 
-<p><img alt="a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered" src="website-screenshot-font-small.png" style="display: block; margin: 0px auto;"></p>
+2.  Затем, удалите существующее правило в вашем `style.css` файле. Это был хороший тест, но красный текст, на самом деле, не очень хорошо выглядит.
+3.  Добавьте следующие строки в нужное место, заменив строку `placeholder` актуальной `font-family` строкой, которую вы получили из Google Fonts. (`font-family` просто означает, какой шрифт(ы) вы хотите использовать для вашего текста). Это правило устанавливает глобальный базовый шрифт и размер шрифта для всей страницы (поскольку `<html>` является родительским элементом для всей страницы, и все элементы внутри него наследуют такой же `font-size` и `font-family`):
 
-<h2 id="Блоки_блоки_и_ещё_раз_блоки">Блоки, блоки и ещё раз блоки</h2>
+    ```css
+    html {
+      font-size: 10px; /* px значит 'пиксели': базовый шрифт будет 10 пикселей в высоту  */
+      font-family: placeholder: здесь должно быть имя шрифта из Google fonts
+    }
+    ```
 
-<p>Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML-элементов на странице можно рассматривать как блоки, расположенные друг над другом.</p>
+    > **Примечание:** Все в CSS документе между `/*` и `*/ `является **CSS комментарием**, который браузер игнорирует при исполнении кода. Это место, где вы можете написать полезные заметки о том, что вы делаете.
 
-<p><img alt="a big stack of boxes or crates sat on top of one another" src="boxes.jpg" style="display: block; margin: 0px auto;"></p>
+4.  Теперь мы установим размер шрифта для элементов, содержащих текст внутри HTML тела ({{htmlelement("h1")}}, {{htmlelement("li")}}, и {{htmlelement("p")}}). Мы также отцентрируем текст нашего заголовка и установим некоторую высоту строки и расстояние между буквами в теле документа, чтобы сделать его немного более удобным для чтения:
 
-<p>Не удивительно, макет CSS основан, главным образом, на <em>блочной модели (box model)</em>. Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:</p>
+    ```css
+    h1 {
+      font-size: 60px;
+      text-align: center;
+    }
 
-<ul>
- <li><code>padding</code>, пространство только вокруг контента (например, вокруг абзаца текста)</li>
- <li><code>border</code>, сплошная линия, которая расположена рядом с padding</li>
- <li><code>margin</code>, пространство вокруг внешней стороны элемента</li>
-</ul>
+    p, li {
+      font-size: 16px;
+      line-height: 2;
+      letter-spacing: 1px;
+    }
+    ```
 
-<p><img alt="three boxes sat inside one another. From outside to in they are labelled margin, border and padding" src="box-model.png" style="display: block; margin: 0px auto;"></p>
+Вы можете настроить значения `px` так, как вам нравится, чтобы ваш дизайн выглядел так, как вы хотите, но, в общем, ваш дизайн должен выглядеть вот так:
 
-<p>В этом разделе мы также используем:</p>
+![a mozilla logo and some paragraphs. a sans-serif font has been set, the font sizes, line height and letter spacing are adjusted, and the main page heading has been centered](website-screenshot-font-small.png)
 
-<ul>
- <li><code>width</code> (ширину элемента)</li>
- <li><code>background-color</code>, цвет позади контента и padding элементов</li>
- <li><code>color</code>, цвет контента элемента (обычно текста)</li>
- <li><code>text-shadow</code>: устанавливает тень на тексте внутри элемента</li>
- <li><code>display</code>: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)</li>
-</ul>
+## Блоки, блоки и ещё раз блоки
 
-<p>Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.</p>
+Одна вещь, которую вы заметите в написании CSS, заключается в том, что многое из этого касается блоков - настройка их размера, цвета, положения и т.д. Большинство HTML-элементов на странице можно рассматривать как блоки, расположенные друг над другом.
 
-<h3 id="Изменение_цвета_страницы">Изменение цвета страницы</h3>
+![a big stack of boxes or crates sat on top of one another](boxes.jpg)
 
-<pre class="brush: css">html {
+Не удивительно, макет CSS основан, главным образом, на _блочной модели (box model)_. Каждый из блоков, занимающий пространство на вашей странице имеет такие свойства, как:
+
+- `padding`, пространство только вокруг контента (например, вокруг абзаца текста)
+- `border`, сплошная линия, которая расположена рядом с padding
+- `margin`, пространство вокруг внешней стороны элемента
+
+![three boxes sat inside one another. From outside to in they are labelled margin, border and padding](box-model.png)
+
+В этом разделе мы также используем:
+
+- `width` (ширину элемента)
+- `background-color`, цвет позади контента и padding элементов
+- `color`, цвет контента элемента (обычно текста)
+- `text-shadow`: устанавливает тень на тексте внутри элемента
+- `display`: устанавливает режим отображения элемента (пока что не волнуйтесь об этом)
+
+Итак, давайте начнём и добавим больше CSS на нашей странице! Продолжайте добавлять эти новые правила, расположенные в нижней части страницы, и не бойтесь экспериментировать с изменением значений, чтобы увидеть, как это работает.
+
+### Изменение цвета страницы
+
+```css
+html {
   background-color: #00539F;
-}</pre>
+}
+```
 
-<p>Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">вы выбрали при планировании вашего сайта</a>.</p>
+Это правило устанавливает цвет фона для всей страницы. Измените код цвета сверху, на цвет который [вы выбрали при планировании вашего сайта](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like).
 
-<h3 id="Разбираемся_с_телом">Разбираемся с телом</h3>
+### Разбираемся с телом
 
-<pre class="brush: css">body {
+```css
+body {
   width: 600px;
   margin: 0 auto;
   background-color: #FF9500;
   padding: 0 20px 20px 20px;
   border: 5px solid black;
-}</pre>
+}
+```
 
-<p>Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:</p>
+Теперь для {{htmlelement("body")}} элемента. Здесь есть немало деклараций, так что давайте пройдём через них всех по одному:
 
-<ul>
- <li><code>width: 600px;</code> — заставляет тело быть всегда 600 пикселей в ширину.</li>
- <li><code>margin: 0 auto;</code> — когда вы устанавливаете два значения для таких свойств как <code>margin</code> или <code>padding</code>, первое значение элемента влияет на верхнюю <strong>и</strong> нижнюю сторону (делает их <code>0</code> в данном случае), и второе значение на левую <strong>и</strong> правую сторону (здесь, <code>auto</code> является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано <a href="/ru/docs/Web/CSS/margin#values">здесь</a>.</li>
- <li><code>background-color: #FF9500;</code> — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.</li>
- <li><code>padding: 0 20px 20px 20px;</code> — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.</li>
- <li><code>border: 5px solid black;</code> — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.</li>
-</ul>
+- `width: 600px;` — заставляет тело быть всегда 600 пикселей в ширину.
+- `margin: 0 auto;` — когда вы устанавливаете два значения для таких свойств как `margin` или `padding`, первое значение элемента влияет на верхнюю **и** нижнюю сторону (делает их `0` в данном случае), и второе значение на левую **и** правую сторону (здесь, `auto` является особым значением, которое делит доступное пространство по горизонтали поровну слева и справа). Вы также можете использовать один, три или четыре значения, как описано [здесь](/ru/docs/Web/CSS/margin#values).
+- `background-color: #FF9500;` — как и прежде, устанавливает цвет фона элемента. Я использовал красновато-оранжевый для тела, в отличие от темно-синего цвета для {{htmlelement("html")}} элемента, но не стесняйтесь и экспериментируйте.
+- `padding: 0 20px 20px 20px;` — у нас есть четыре значения, установленные для padding, чтобы сделать немного пространства вокруг нашего контента. В этот раз мы не устанавливаем padding на верхней части тела, но делаем 20 пикселей слева, снизу и справа. Значения устанавливаются сверху, справа, снизу, слева, в таком порядке.
+- `border: 5px solid black;` — просто устанавливает сплошную чёрную рамку шириной 5 пикселей со всех сторон тела.
 
-<h3 id="Позиционирование_и_стилизация_нашего_заголовка_главной_страницы">Позиционирование и стилизация нашего заголовка главной страницы</h3>
+### Позиционирование и стилизация нашего заголовка главной страницы
 
-<pre class="brush: css">h1 {
+```css
+h1 {
   margin: 0;
   padding: 20px 0;
   color: #00539F;
   text-shadow: 3px 3px 1px black;
-}</pre>
+}
+```
 
-<p>Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый <strong>стиль по умолчанию</strong> для элемента {{htmlelement("h1")}} (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив <code>margin: 0;</code>.</p>
+Вы, возможно, заметили, что есть ужасный разрыв в верхней части тела. Это происходит, потому что браузеры применяют некоторый **стиль по умолчанию** для элемента {{htmlelement("h1")}} (по сравнению с другими), даже если вы не применяли какой-либо CSS вообще! Это может звучать как плохая идея, но мы хотим, чтобы веб-страница без стилей имела базовую читаемость. Чтобы избавиться от разрыва, мы переопределили стиль по умолчанию, установив `margin: 0;`.
 
-<p>Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.</p>
+Затем мы установили заголовку верхний и нижний padding на 20 пикселей, и сделали текст заголовка того же цвета, как и цвет фона html.
 
-<p>Здесь, мы использовали одно довольно интересное свойство - это <code>text-shadow</code>, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:</p>
+Здесь, мы использовали одно довольно интересное свойство - это `text-shadow`, которое применяет тень к текстовому контенту элемента. Оно имеет следующие четыре значения:
 
-<ul>
- <li>Первое значение пикселей задаёт <strong>горизонтальное смещение</strong> тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.</li>
- <li>Второе значение пикселей задаёт <strong>вертикальное смещение</strong> тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.</li>
- <li>Третье значение пикселей задаёт <strong>радиус размытия</strong> тени — большее значение будет означать более размытую тень.</li>
- <li>Четвёртое значение задаёт основной цвет тени.</li>
-</ul>
+- Первое значение пикселей задаёт **горизонтальное смещение** тени от текста — как далеко она движется поперёк: отрицательное значение должно двигать её влево.
+- Второе значение пикселей задаёт **вертикальное смещение** тени от текста — как далеко она движется вниз, в этом примере: отрицательное значение должно переместить её вверх.
+- Третье значение пикселей задаёт **радиус размытия** тени — большее значение будет означать более размытую тень.
+- Четвёртое значение задаёт основной цвет тени.
 
-<p>И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.</p>
+И вновь попробуйте поэкспериментировать с различными значениями, чтобы посмотреть, что вы можете придумать.
 
-<h3 id="Центрирование_изображения">Центрирование изображения</h3>
+### Центрирование изображения
 
-<pre class="brush: css">img {
+```css
+img {
   display: block;
   margin: 0 auto;
-}</pre>
+}
+```
 
-<p>В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать <code>margin: 0 auto</code> уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является <strong>блочным</strong>, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются <strong>строчными</strong> элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью <code>display: block;</code>.</p>
+В заключение, мы отцентрируем изображение, чтобы оно лучше выглядело. Мы можем использовать `margin: 0 auto` уловку снова, как мы это делали раньше для body, но мы также должны сделать кое-что ещё. Элемент {{HTMLElement("body")}} является **блочным**, это значит, что он занимает место на странице и может иметь margin и другие значения отступов, применяемых к нему. Изображения, наоборот, являются **строчными** элементами, то есть они этого не могут. Таким образом, чтобы применить margin к изображению, мы должны дать изображению блочное поведение с помощью `display: block;`.
 
-<div class="blockIndicator note">
-<p><strong>Примечание: </strong>Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя <a href="https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80">графический редактор</a>, или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для <code>&lt;img&gt;</code> элемента меньшего значения (например <code>400 px;</code>).</p>
-</div>
+> **Примечание:**Приведённые выше инструкции предполагают, что вы используете изображение меньшей ширины, чем заданная для {{HTMLElement("body")}} (600 пикселей). Если ваше изображение больше, тогда оно выйдет за границы {{HTMLElement("body")}} и займёт пространство страницы. Чтобы исправить это, вы можете 1) уменьши ширину изображения используя [графический редактор](https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D1%8B%D0%B9_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80), или 2) изменить размер изображения используя CSS путём установки свойства {{cssxref("width")}} для `<img>` элемента меньшего значения (например `400 px;`).
 
-<div class="note">
-<p><strong>Примечание</strong>: Не стоит беспокоиться, если вы ещё не понимаете <code>display: block;</code> и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве <a href="/ru/docs/Web/CSS/display">display</a>.</p>
-</div>
+> **Примечание:** Не стоит беспокоиться, если вы ещё не понимаете `display: block;` и различия между блочным/строчным. Вы поймёте, когда будете изучать CSS более подробно. Вы можете узнать больше о различных доступных значениях display на нашей странице о свойстве [display](/ru/docs/Web/CSS/display).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-styled/">посмотреть нашу версию здесь</a>):</p>
+Если вы следовали всем инструкциям в этой статье, вы должны получить страницу, которая выглядит примерно так (вы также можете [посмотреть нашу версию здесь](https://mdn.github.io/beginner-html-site-styled/)):
 
-<p><img alt="a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip." src="website-screenshot-final.png" style="display: block; margin: 0px auto;"></p>
+![a mozilla logo, centered, and a header and paragraphs. It now looks nicely styled, with a blue background for the whole page and orange background for the centered main content strip.](website-screenshot-final.png)
 
-<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css">готовым примером кода на Github</a>.</p>
+Если вы застряли, вы всегда можете сравнить свою работу с нашим [готовым примером кода на Github](https://github.com/mdn/beginner-html-site-styled/blob/gh-pages/styles/style.css).
 
-<p>Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу <a href="/ru/docs/Learn/CSS">страницу изучения CSS</a>.</p>
+Здесь мы узнали только самую поверхность CSS. Чтобы узнать больше, перейдите на нашу [страницу изучения CSS](/ru/docs/Learn/CSS).
 
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}</p>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
index 1e10a5f4302f96..88710e833c5b5a 100644
--- a/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
+++ b/files/ru/learn/getting_started_with_the_web/dealing_with_files/index.md
@@ -15,112 +15,89 @@ tags:
   - сайт
 translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</div>
+Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге [загрузите их на сервер](/ru/Learn/Getting_started_with_the_web/Publishing_your_website). В статье _Работа с файлами_ обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.
 
-<div class="summary">
-<p>Веб-сайт состоит из множества файлов: текстового контента, кода, стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вы должны собрать эти файлы в рациональную структуру на вашем локальном компьютере, убедитесь, что они могут общаться друг с другом, и весь ваш контент выглядит правильно, прежде чем вы, в конечном итоге <a href="/ru/Learn/Getting_started_with_the_web/Publishing_your_website">загрузите их на сервер</a>. В статье <em>Работа с файлами</em> обсуждаются некоторые вопросы, о которых вам следует знать, чтобы вы могли рационально настроить файловую структуру для своего веб-сайта.</p>
-</div>
+## Где ваш веб-сайт должен располагаться на вашем компьютере?
 
-<h2 id="Где_ваш_веб-сайт_должен_располагаться_на_вашем_компьютере">Где ваш веб-сайт должен располагаться на вашем компьютере?</h2>
+Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.
 
-<p>Когда вы работаете на веб-сайте локально на вашем компьютере, вы должны держать все связанные файлы в одной папке, которая отражает файловую структуру опубликованного веб-сайта на сервере. Эта папка может располагаться где угодно, но вы должны положить её туда, где вы сможете легко её найти, может быть, на ваш рабочий стол, в домашнюю папку или в корень вашего жёсткого диска.</p>
+1.  Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем `web-projects` (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.
+2.  Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её `test-site` (или как-то более творчески).
 
-<ol>
- <li>Выберите место для хранения проектов веб-сайта. Здесь, создайте новую папку с именем <code>web-projects</code> (или аналогичной). Это то место, где будут располагаться все ваши проекты сайтов.</li>
- <li>Внутри этой первой папки, создайте другую папку для хранения вашего первого веб-сайта. Назовите её <code>test-site</code> (или как-то более творчески).</li>
-</ol>
+## Небольшое отступление о регистре и пробелах
 
-<h2 id="Небольшое_отступление_о_регистре_и_пробелах">Небольшое отступление о регистре и пробелах</h2>
+Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:
 
-<p>Вы заметите, что в этой статье, мы просим вас называть папки и файлы полностью в нижнем регистре без пробелов. Это потому что:</p>
+1.  Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в `test-site/MyImage.jpg`, а затем в другом файле вы пытаетесь вызвать изображение как `test-site/myimage.jpg`, это может не сработать.
+2.  Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: `my-file.html` лучше чем `my_file.html`.
 
-<ol>
- <li>Многие компьютеры, в частности веб-серверы, чувствительны к регистру. Так, например, если вы положили изображение на свой веб-сайт в <code>test-site/MyImage.jpg</code>, а затем в другом файле вы пытаетесь вызвать изображение как <code>test-site/myimage.jpg</code>, это может не сработать.</li>
- <li>Браузеры, веб-серверы и языки программирования не обрабатывают пробелы последовательно. Например, если вы используете пробелы в имени файла, некоторые системы могут отнестись к имени файла как к двум именам файлов. Некоторые серверы заменяют пробелы в вашем имени файла на "%20" (символьный код для пробелов в URI), в результате чего все ваши ссылки будут сломаны. Лучше разделять слова дефисами, чем нижними подчёркиваниями: <code>my-file.html</code> лучше чем <code>my_file.html</code>.</li>
-</ol>
+Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.
 
-<p>Говоря простым языком, вы должны использовать дефис для имён файлов. Поисковая система Google рассматривает дефис как разделитель слов, но не относится к подчёркиванию таким образом. По этим причинам, лучше всего приобрести привычку писать названия ваших папок и файлов в нижнем регистре без пробелов, разделяя слова дефисами, по крайней мере, пока вы не поймёте, что вы делаете. Так в будущем вы столкнётесь с меньшим количеством проблем.</p>
+## Какую структуру должен иметь ваш веб-сайт?
 
-<h2 id="Какую_структуру_должен_иметь_ваш_веб-сайт">Какую структуру должен иметь ваш веб-сайт?</h2>
+Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:
 
-<p>Далее, давайте взглянем на то, какую структуру должен иметь наш тестовый сайт. Наиболее распространённые вещи, присутствующие в любом проекте сайта, которые мы создаём: индексный файл HTML и папки, содержащие изображения, файлы стилей и файлы скриптов. Давайте создадим их сейчас:</p>
+1.  **`index.html`**: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем `index.html` и сохраните его прямо внутри вашей папки `test-site`.
+2.  **Папка `images`**: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем `images` внутри вашей папки `test-site`.
+3.  **Папка `styles`**: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем `styles` внутри вашей папки `test-site`.
+4.  **Папка `scripts`**: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем `scripts` внутри вашей папки `test-site`.
 
-<ol>
- <li><code><strong>index.html</strong></code>: Этот файл обычно содержит контент домашней страницы, то есть текст и изображения, которые люди видят, когда они впервые попадают на ваш сайт. Используя ваш текстовый редактор, создайте новый файл с именем <code>index.html</code> и сохраните его прямо внутри вашей папки <code>test-site</code>.</li>
- <li><strong>Папка <code>images</code></strong>: Эта папка будет содержать все изображения, которые вы используете на вашем сайте. Создайте папку с именем <code>images</code> внутри вашей папки <code>test-site</code>.</li>
- <li><strong>Папка <code>styles</code></strong>: Эта папка будет содержать CSS код, используемый для стилизации вашего контента (например, настройка текста и цвета фона). Создайте папку с именем <code>styles</code> внутри вашей папки <code>test-site</code>.</li>
- <li><strong>Папка <code>scripts</code></strong>: Эта папка будет содержать весь JavaScript-код, используемый для добавления интерактивных функций на вашем сайте (например, кнопки которые загружают данные при клике). Создайте папку с именем <code>scripts</code> внутри вашей папки <code>test-site</code>.</li>
-</ol>
+> **Примечание:** На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция **Скрывать расширения для известных типов файлов**, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант **Свойства папки...** и снять флажок **Скрывать расширения для зарегистрированных типов файлов**, затем щёлкнуть **OK**. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.
 
-<div class="note">
-<p><strong>Примечание</strong>: На компьютерах под управлением Windows у вас могут возникнуть проблемы с отображением имён файлов, поскольку у Windows есть опция <strong>Скрывать расширения для известных типов файлов</strong>, включённая по умолчанию. Обычно вы можете отключить её, перейдя в проводник, выбрать вариант <strong>Свойства папки...</strong> и снять флажок <strong>Скрывать расширения для зарегистрированных типов файлов</strong>, затем щёлкнуть <strong>OK</strong>. Для получения более точной информации, охватывающей вашу версию Windows, вы можете произвести поиск в Интернете.</p>
-</div>
+## Файловые пути
 
-<h2 id="Файловые_пути">Файловые пути</h2>
+Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл `index.html` и научим его отображать изображение, которое вы выбрали в статье ["Каким должен быть ваш веб-сайт?"](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
 
-<p>Для того, чтобы файлы общались друг с другом, вы должны указать файлам путь друг к другу - обычно один файл знает, где находится другой. Чтобы продемонстрировать это, мы вставим немного HTML в наш файл <code>index.html</code> и научим его отображать изображение, которое вы выбрали в статье <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">"Каким должен быть ваш веб-сайт?"</a></p>
+1.  Скопируйте изображение, которое вы выбрали ранее, в папку `images`.
+2.  Откройте ваш файл `index.html` и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
 
-<ol>
- <li>Скопируйте изображение, которое вы выбрали ранее, в папку <code>images</code>.</li>
- <li>Откройте ваш файл <code>index.html</code> и вставьте следующий код в файл именно в таком виде. Не беспокойтесь о том, что все это значит - позже в этом руководстве мы рассмотрим структуры более подробно.
-  <pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;img src="" alt="Моё тестовое изображение"&gt;
-  &lt;/body&gt;
-&lt;/html&gt; </pre>
- </li>
- <li>Строка <code>&lt;img src="" alt="Моё тестовое изображение"&gt;</code> - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки <em>images</em>, которая находится в той же директории что и <code>index.html</code>. Чтобы спуститься вниз по нашей файловой структуре от <code>index.html</code> до нашего изображения, путь к файлу должен выглядеть так <code>images/your-image-filename</code>. Например наше изображение, названное <code>firefox-icon.png</code>, имеет такой путь к файлу: <code>images/firefox-icon.png</code>.</li>
- <li>Вставьте путь к файлу в ваш HTML код между двойными кавычками <code>src=""</code>.</li>
- <li>Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!</li>
-</ol>
+    ```html
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <title>Моя тестовая страница</title>
+      </head>
+      <body>
+        <img src="" alt="Моё тестовое изображение">
+      </body>
+    </html>
+    ```
 
-<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>
+3.  Строка `<img src="" alt="Моё тестовое изображение">` - это HTML код, который вставляет изображение на страницу. Мы должны сказать HTML, где находится изображение. Изображение находится внутри папки _images_, которая находится в той же директории что и `index.html`. Чтобы спуститься вниз по нашей файловой структуре от `index.html` до нашего изображения, путь к файлу должен выглядеть так `images/your-image-filename`. Например наше изображение, названное `firefox-icon.png`, имеет такой путь к файлу: `images/firefox-icon.png`.
+4.  Вставьте путь к файлу в ваш HTML код между двойными кавычками `src=""`.
+5.  Сохраните ваш HTML файл, а затем загрузите его в вашем браузере (двойной щелчок по файлу). Вы должны увидеть вашу новую веб-страницу, отображающую ваше изображение!
 
-<p>Некоторые общие правила о путях к файлам:</p>
+![A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world](https://mdn.mozillademos.org/files/9229/website-screenshot.png)
 
-<ul>
- <li>Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, <code>my-image.jpg</code>.</li>
- <li>Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: <code>subdirectory/my-image.jpg</code>.</li>
- <li>Для ссылки на целевой файл в директории <strong>выше</strong> вызывающего HTML файла, напишите две точки. Например, если <code>index.html</code> находится внутри подпапки <code>test-site</code>, а <code>my-image.png</code> - внутри <code>test-site</code>, вы можете обратиться к <code>my-image.png</code> из <code>index.html</code>, используя <code>../my-image.png</code>.</li>
- <li>Вы можете комбинировать их так, как вам нравится, например <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
-</ul>
+Некоторые общие правила о путях к файлам:
 
-<p>На данный момент это все, что вам нужно знать</p>
+- Для ссылки на целевой файл в той же директории, что и вызывающий HTML файл, просто используйте имя файла, например, `my-image.jpg`.
+- Для ссылки на файл в поддиректории, напишите имя директории в начале пути, плюс косую черту (forwardslash, слеш), например: `subdirectory/my-image.jpg`.
+- Для ссылки на целевой файл в директории **выше** вызывающего HTML файла, напишите две точки. Например, если `index.html` находится внутри подпапки `test-site`, а `my-image.png` - внутри `test-site`, вы можете обратиться к `my-image.png` из `index.html`, используя `../my-image.png`.
+- Вы можете комбинировать их так, как вам нравится, например `../subdirectory/another-subdirectory/my-image.png`.
 
-<div class="note">
-<p><strong>Примечание</strong>: Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например <code>C:\windows</code>. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.</p>
-</div>
+На данный момент это все, что вам нужно знать
 
-<h2 id="Что_должно_быть_сделано">Что должно быть сделано?</h2>
+> **Примечание:** Файловая система Windows стремится использовать обратный слеш (backslash), а не косую черту (forwardslash), например `C:\windows`. Это не имеет значения, даже если вы разрабатываете веб-сайт на Windows, вы всё равно должны использовать обычные слеши в вашем коде.
 
-<p>К настоящему моменту структура вашей папки должна выглядеть примерно так:</p>
+## Что должно быть сделано?
 
-<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>
+К настоящему моменту структура вашей папки должна выглядеть примерно так:
 
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}</p>
+![A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file](https://mdn.mozillademos.org/files/9231/file-structure.png)
 
-<p> </p>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web/HTML_basics", "Learn/Getting_started_with_the_web")}}
 
-<p> </p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
-
-<p> </p>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
index 05358a7388aabf..d6cb3b3a376b90 100644
--- a/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
+++ b/files/ru/learn/getting_started_with_the_web/how_the_web_works/index.md
@@ -17,97 +17,81 @@ tags:
   - Сервер
 translation_of: Learn/Getting_started_with_the_web/How_the_Web_works
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+_Как работает Веб_ даст упрощённое представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.
 
-<div class="summary">
-<p><em>Как работает Веб</em> даст упрощённое представление о том, что происходит при просмотре веб-страницы в браузере на вашем компьютере или телефоне.</p>
-</div>
+Эта теория не так важна для написания веб-кода в краткосрочной перспективе, но в скором времени вы действительно начнёте извлекать выгоду из понимания того, что происходит в фоновом режиме.
 
-<p>Эта теория не так важна для написания веб-кода в краткосрочной перспективе, но в скором времени вы действительно начнёте извлекать выгоду из понимания того, что происходит в фоновом режиме.</p>
+## Клиенты и серверы
 
-<h2 id="Клиенты_и_серверы">Клиенты и серверы</h2>
+Компьютеры, подключённые к сети называются клиентами и серверами. Упрощённая схема того, как они взаимодействуют, может выглядеть следующим образом:
 
-<p>Компьютеры, подключённые к сети называются клиентами и серверами. Упрощённая схема того, как они взаимодействуют, может выглядеть следующим образом:</p>
+![](https://mdn.mozillademos.org/files/8973/Client-server.jpg)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8973/Client-server.jpg" style="height: 123px; width: 336px;"></p>
+- Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).
+- Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.
 
-<ul>
- <li>Клиенты являются обычными пользователями, подключёнными к Интернету посредством устройств (например, компьютер подключён к Wi-Fi, или ваш телефон подключён к мобильной сети) и программного обеспечения, доступного на этих устройствах (как правило, браузер, например, Firefox или Chrome).</li>
- <li>Серверы - это компьютеры, которые хранят веб-страницы, сайты или приложения. Когда клиентское устройство пытается получить доступ к веб-странице, копия страницы загружается с сервера на клиентский компьютер для отображения в браузере пользователя.</li>
-</ul>
+## Остальные части панели инструментов
 
-<h2 id="Остальные_части_панели_инструментов">Остальные части панели инструментов</h2>
+Клиент и сервер, о которых мы рассказали выше, не раскрывают всю суть. Есть много других компонентов, и мы опишем их ниже.
 
-<p>Клиент и сервер, о которых мы рассказали выше, не раскрывают всю суть. Есть много других компонентов, и мы опишем их ниже.</p>
+А сейчас давайте представим, что Веб - это дорога. Одна сторона дороги является клиентом, который представляет собой ваш дом. Другая сторона дороги является сервером, который представляет собой магазин. Вы хотите что-то купить в нём.
 
-<p>А сейчас давайте представим, что Веб - это дорога. Одна сторона дороги является клиентом, который представляет собой ваш дом. Другая сторона дороги является сервером, который представляет собой магазин. Вы хотите что-то купить в нём.</p>
+![](https://mdn.mozillademos.org/files/9749/road.jpg)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9749/road.jpg" style="display: block; height: 427px; margin: 0px auto; width: 640px;"></p>
+Помимо клиента и сервера, мы также должны уделить внимание:
 
-<p>Помимо клиента и сервера, мы также должны уделить внимание:</p>
+- **Ваше Интернет-подключение**: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.
+- **TCP/IP**: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).
+- **DNS**: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.
+- **HTTP**: Протокол Передачи Гипертекста - это {{Glossary("Protocol", "протокол")}}, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.
+- **Файлы компонентов**: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
 
-<ul>
- <li><strong>Ваше Интернет-подключение</strong>: Позволяет отправлять и принимать данные по сети. Оно подобно улице между домом и магазином.</li>
- <li><strong>TCP/IP</strong>: Протокол Управления Передачей и Интернет Протокол являются коммуникационными протоколами, которые определяют, каким образом данные должны передаваться по сети. Они как транспортные средства, которые позволяют сделать заказ, пойти в магазин и купить ваши товары. В нашем примере, это как автомобиль или велосипед (или собственные ноги).</li>
- <li><strong>DNS</strong>: Система Доменных Имён напоминает записную книжку для веб-сайтов. Когда вы вводите веб-адрес в своём браузере, браузер обращается к DNS, чтобы найти реальный адрес веб-сайта, прежде чем он сможет его получить. Браузеру необходимо выяснить, на каком сервере живёт сайт, поэтому он может отправлять HTTP-сообщения в нужное место (см. Ниже). Это похоже на поиск адреса магазина, чтобы вы могли попасть в него.</li>
- <li><strong>HTTP</strong>: Протокол Передачи Гипертекста - это {{Glossary("Protocol", "протокол")}}, который определяет язык для клиентов и серверов, чтобы общаться друг с другом. Он, как язык, который вы используете, чтобы заказать ваш товар.</li>
- <li><strong>Файлы компонентов</strong>: сайт состоит из нескольких различных файлов, которые подобны различным отделам с товарами в магазине. Эти файлы бывают двух основных типов:
-  <ul>
-   <li><strong>Файлы кода</strong>: сайты построены преимущественно на HTML, CSS и JavaScript, хотя вы познакомитесь с другими технологиями чуть позже.</li>
-   <li><strong>Материалы</strong>: это собирательное название для всех других вещей, составляющих сайт, такие как изображения, музыка, видео, документы Word и PDF.</li>
-  </ul>
- </li>
-</ul>
+  - **Файлы кода**: сайты построены преимущественно на HTML, CSS и JavaScript, хотя вы познакомитесь с другими технологиями чуть позже.
+  - **Материалы**: это собирательное название для всех других вещей, составляющих сайт, такие как изображения, музыка, видео, документы Word и PDF.
 
-<h2 id="Что_же_на_самом_деле_происходит">Что же на самом деле происходит?</h2>
+## Что же на самом деле происходит?
 
-<p>Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):</p>
+Когда вы вводите веб-адрес в свой браузер (для нашей аналогии - посещаете магазин):
 
-<ol>
- <li>Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живёт" сайт (Вы находите адрес магазина).</li>
- <li>Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.</li>
- <li>Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).</li>
- <li>Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).</li>
-</ol>
+1.  Браузер обращается к DNS серверу и находит реальный адрес сервера, на котором "живёт" сайт (Вы находите адрес магазина).
+2.  Браузер посылает HTTP запрос к серверу, запрашивая его отправить копию сайта для клиента (Вы идёте в магазин и заказываете товар). Это сообщение и все остальные данные, передаваемые между клиентом и сервером, передаются по интернет-соединению с использованием протокола TCP/IP.
+3.  Если сервер одобряет запрос клиента, сервер отправляет клиенту статус "200 ОК", который означает: "Конечно, вы можете посмотреть на этот сайт! Вот он", а затем начинает отправку файлов сайта в браузер в виде небольших порций, называемых пакетными данными (магазин выдаёт вам ваш товар или вам привозят его домой).
+4.  Браузер собирает маленькие куски в полноценный сайт и показывает его вам (товар прибывает к вашей двери — новые вещи, потрясающе!).
 
-<h2 id="DNS">DNS</h2>
+## DNS
 
-<p>Реальные веб-адреса - неудобные, незапоминающиеся строки, которые вы вводите в адресную строку, чтобы найти ваши любимые веб-сайты. Эти строки состоят из чисел, например: <code>63.245.215.20</code>.</p>
+Реальные веб-адреса - неудобные, незапоминающиеся строки, которые вы вводите в адресную строку, чтобы найти ваши любимые веб-сайты. Эти строки состоят из чисел, например: `63.245.215.20`.
 
-<p>Такой набор чисел называется {{Glossary("IP Address", "IP-адресом")}} и представляет собой уникальное местоположение в Интернете. Впрочем, его не очень легко запомнить, правда? Вот почему изобрели DNS. Это специальные сервера, которые связывают веб-адрес, который вы вводите в браузере (например, "mozilla.org"), с реальным IP-адресом сайта.</p>
+Такой набор чисел называется {{Glossary("IP Address", "IP-адресом")}} и представляет собой уникальное местоположение в Интернете. Впрочем, его не очень легко запомнить, правда? Вот почему изобрели DNS. Это специальные сервера, которые связывают веб-адрес, который вы вводите в браузере (например, "mozilla.org"), с реальным IP-адресом сайта.
 
-<p>Сайты можно найти непосредственно через их IP-адреса. Вы можете найти IP-адрес веб-сайта, введя его домен в инструмент, как <a href="https://www.nslookup.io/website-to-ip-lookup/">IP Checker</a>.</p>
+Сайты можно найти непосредственно через их IP-адреса. Вы можете найти IP-адрес веб-сайта, введя его домен в инструмент, как [IP Checker](https://www.nslookup.io/website-to-ip-lookup/).
 
-<h2 id="Пакеты">Пакеты</h2>
+## Пакеты
 
-<p>Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одновременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.</p>
+Ранее мы использовали термин "пакеты", чтобы описать формат, в котором данные передаются от сервера к клиенту. Что мы имеем в виду? В основном, когда данные передаются через Интернет, они отправляются в виде тысячи мелких кусочков, так что множество разных пользователей могут скачивать один и тот же сайт одновременно. Если бы сайты отправлялись одним большим куском, тогда бы только один пользователь мог скачать его за один раз, и это, очевидно, сделало бы пользование интернетом не эффективным и не очень радостным.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="/ru/Learn/How_the_Internet_works">Как работает Интернет</a></li>
- <li><a href="https://dev.opera.com/articles/http-basic-introduction/">HTTP — Протокол уровня приложений</a></li>
- <li><a href="https://dev.opera.com/articles/http-lets-get-it-on/">HTTP: Давайте изучим его!</a></li>
- <li><a href="https://dev.opera.com/articles/http-response-codes/">HTTP: Коды ответов</a></li>
-</ul>
+- [Как работает Интернет](/ru/Learn/How_the_Internet_works)
+- [HTTP — Протокол уровня приложений](https://dev.opera.com/articles/http-basic-introduction/)
+- [HTTP: Давайте изучим его!](https://dev.opera.com/articles/http-lets-get-it-on/)
+- [HTTP: Коды ответов](https://dev.opera.com/articles/http-response-codes/)
 
-<h2 id="Благодарность">Благодарность</h2>
+## Благодарность
 
-<p>Фото улицы: <a href="https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ">Street composing</a>, <a href="https://www.flickr.com/photos/kdigga/">Kevin D</a>.</p>
+Фото улицы: [Street composing](https://www.flickr.com/photos/kdigga/9110990882/in/photolist-cXrKFs-c1j6hQ-mKrPUT-oRTUK4-7jSQQq-eT7daG-cZEZrh-5xT9L6-bUnkip-9jAbvr-5hVkHn-pMfobT-dm8JuZ-gjwYYM-pREaSM-822JRW-5hhMf9-9RVQNn-bnDMSZ-pL2z3y-k7FRM4-pzd8Y7-822upY-8bFN4Y-kedD87-pzaATg-nrF8ft-5anP2x-mpVky9-ceKc9W-dG75mD-pY62sp-gZmXVZ-7vVJL9-h7r9AQ-gagPYh-jvo5aM-J32rC-ibP2zY-a4JBcH-ndxM5Y-iFHsde-dtJ15p-8nYRgp-93uCB1-o6N5Bh-nBPUny-dNJ66P-9XWmVP-efXhxJ), [Kevin D](https://www.flickr.com/photos/kdigga/).
 
-<p>{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+{{PreviousMenu("Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/html_basics/index.md b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
index 382b749723c6f1..a161780ebca53a 100644
--- a/files/ru/learn/getting_started_with_the_web/html_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/html_basics/index.md
@@ -8,222 +8,230 @@ tags:
   - Обучение
 translation_of: Learn/Getting_started_with_the_web/HTML_basics
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</div>
+HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
 
-<div class="summary">
-<p>HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.</p>
-</div>
+## Что такое HTML на самом деле?
 
-<h2 id="Что_такое_HTML_на_самом_деле">Что такое HTML на самом деле?</h2>
+HTML не является языком программирования; это _язык разметки_, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда **{{Glossary("element", "элементов")}}**, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
 
-<p>HTML не является языком программирования; это <em>язык разметки</em>, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда <strong>{{Glossary("element", "элементов")}}</strong>, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие {{Glossary("tag", "теги")}} могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:</p>
+```
+Моя кошка очень раздражена
+```
 
-<pre>Моя кошка очень раздражена</pre>
+Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
 
-<p>Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:</p>
+```html
+<p>Моя кошка очень раздражена</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Моя кошка очень раздражена&lt;/p&gt;</pre>
+### Анатомия HTML элемента
 
-<h3 id="Анатомия_HTML_элемента">Анатомия HTML элемента</h3>
+Давайте рассмотрим элемент абзаца более подробно.
 
-<p>Давайте рассмотрим элемент абзаца более подробно.</p>
+![](https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p>
+Главными частями нашего элемента являются:
 
-<p>Главными частями нашего элемента являются:</p>
+1.  **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие **угловые скобки**. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
+2.  **Закрывающий тег (Closing tag):** Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
+3.  **Контент (Content)**: Это контент элемента, который в данном случае является просто текстом.
+4.  **Элемент(Element)**: Открывающий тег, закрывающий тег и контент вместе составляют элемент.
 
-<ol>
- <li><strong>Открывающий тег (Opening tag)</strong>: Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие <strong>угловые скобки</strong>.  Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.</li>
- <li><strong>Закрывающий тег (Closing tag):</strong> Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.</li>
- <li><strong>Контент (Content)</strong>: Это контент элемента, который в данном случае является просто текстом.</li>
- <li><strong>Элемент(Element)</strong>: Открывающий тег, закрывающий тег и контент вместе составляют элемент.</li>
-</ol>
+Элементы также могут иметь атрибуты, которые выглядят так:
 
-<p>Элементы также могут иметь атрибуты, которые выглядят так:</p>
+![](https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p>
+Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это _имя_ _атрибута,_ а `editor-note` это _значение атрибута_. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
 
-<p>Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это <em>имя</em> <em>атрибута,</em> а <code>editor-note</code> это <em>значение атрибута</em>. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.</p>
+Атрибут всегда должен иметь:
 
-<p>Атрибут всегда должен иметь:</p>
+1.  Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
+2.  Имя атрибута, за которым следует знак равенства.
+3.  Значение атрибута, заключённое с двух сторон в кавычки.
 
-<ol>
- <li>Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).</li>
- <li>Имя атрибута, за которым следует знак равенства.</li>
- <li>Значение атрибута, заключённое с двух сторон в кавычки.</li>
-</ol>
+### Вложенные элементы
 
-<h3 id="Вложенные_элементы">Вложенные элементы</h3>
+Вы также можете располагать элементы внутри других элементов — это называется **вложением**. Если мы хотим заявить, что наша кошка **очень** раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:
 
-<p>Вы также можете располагать элементы внутри других элементов — это называется <strong>вложением</strong>. Если мы хотим заявить, что наша кошка <strong>очень</strong> раздражена, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который указывает, что слово должно быть сильно акцентированно:</p>
+```html
+<p>Моя кошка <strong>очень</strong> раздражена.</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Моя кошка &lt;strong&gt;очень&lt;/strong&gt; раздражена.&lt;/p&gt;</pre>
+Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:
 
-<p>Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент {{htmlelement("p")}}, затем элемент {{htmlelement("strong")}}, потом мы должны закрыть сначала элемент {{htmlelement("strong")}}, затем {{htmlelement("p")}}. Приведённое ниже неверно:</p>
+```html example-bad
+<p>Моя кошка <strong>очень раздражена.</p></strong>
+```
 
-<pre class="example-bad brush: html">&lt;p&gt;Моя кошка &lt;strong&gt;очень раздражена.&lt;/p&gt;&lt;/strong&gt;</pre>
+Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
 
-<p>Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше,  ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!</p>
+### Пустые элементы
 
-<h3 id="Пустые_элементы">Пустые элементы</h3>
+Некоторые элементы не имеют контента, и называются **пустыми элементами**. Возьмём элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:
 
-<p>Некоторые элементы не имеют контента, и называются <strong>пустыми элементами</strong>. Возьмём  элемент {{htmlelement("img")}}, который уже имеется в нашем HTML:</p>
+```html
+<img src="images/firefox-icon.png" alt="Моё тестовое изображение">
+```
 
-<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;</pre>
+Он содержит два атрибута, но не имеет закрывающего тега `</img>`, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
 
-<p>Он содержит два атрибута, но не имеет закрывающего тега <code>&lt;/img&gt;</code>, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.</p>
+### Анатомия HTML документа
 
-<h3 id="Анатомия_HTML_документа">Анатомия HTML документа</h3>
+Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш `index.html` (с которым мы впервые встретились в статье [Работа с файлами](/ru/Learn/Getting_started_with_the_web/Dealing_with_files)):
 
-<p>Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш <code>index.html</code> (с которым мы впервые встретились в статье <a href="/ru/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a>):</p>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Моя тестовая страница</title>
+  </head>
+  <body>
+    <img src="images/firefox-icon.png" alt="Моё тестовое изображение">
+  </body>
+</html>
+```
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;img src="images/firefox-icon.png" alt="Моё тестовое изображение"&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+Здесь мы имеем:
 
-<p>Здесь мы имеем:</p>
+- `<!DOCTYPE html>` — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.
+- `<html></html>` — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.
+- `<head></head>` — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но _не являющегося_ контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.
+- `<body></body>` — элемент {{htmlelement("body")}}. В нем содержится _весь_ контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.
+- `<meta charset="utf-8">` — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.
+- `<title></title>` — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
 
-<ul>
- <li><code>&lt;!DOCTYPE html&gt;</code> — доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code> — элемент {{htmlelement("html")}}. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.</li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code> — элемент {{htmlelement("head")}}. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но<em> не являющегося </em>контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code> — элемент {{htmlelement("body")}}. В нем содержится <em>весь</em> контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code> — этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code> — элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.</li>
-</ul>
+## Изображения
 
-<h2 id="Изображения">Изображения</h2>
+Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:
 
-<p>Давайте снова обратим наше внимание на элемент {{htmlelement("img", "изображения")}}:</p>
+```html
+<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">
+```
 
-<pre class="brush: html">&lt;img src="images/firefox-icon.png" alt="Mоё тестовое изображение"&gt;</pre>
+Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута `src` (source, источник), который содержит путь к нашему файлу изображения.
 
-<p>Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута <code>src</code> (source, источник), который содержит путь к нашему файлу изображения.</p>
+Мы также включили атрибут `alt` (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:
 
-<p>Мы также включили атрибут <code>alt</code> (alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:</p>
+1.  У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
+2.  Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте `src`, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
 
-<ol>
- <li>У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.</li>
- <li>Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте <code>src</code>, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:</li>
-</ol>
+![](https://mdn.mozillademos.org/files/9349/alt-text-example.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9349/alt-text-example.png" style="display: block; height: 36px; margin: 0px auto; width: 108px;"></p>
+Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").
 
-<p>Альтернативный текст - это "пояснительный текст". Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст "My test image" ("Моё тестовое изображение") не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет "The Firefox logo: a flaming fox surrounding the Earth" ("Логотип Firefox: огненный Лис вокруг Земли").</p>
+Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
 
-<p>Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.</p>
+> **Примечание:** Узнайте больше о [специальных возможностях](/ru/docs/Web/Accessibility).
 
-<div class="note">
-<p><strong>Примечание</strong>: Узнайте больше о <a href="/ru/docs/Web/Accessibility">специальных возможностях</a>.</p>
-</div>
+## Разметка текста
 
-<h2 id="Разметка_текста">Разметка текста</h2>
+В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
 
-<p>В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.</p>
+### Заголовки
 
-<h3 id="Заголовки">Заголовки</h3>
+Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :
 
-<p>Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков {{htmlelement("h1")}}–{{htmlelement("h6")}}, хотя обычно вы будете использовать не более 3-4 :</p>
+```html
+<h1>Мой главный заголовок</h1>
+<h2>Мой заголовок верхнего уровня</h2>
+<h3>Мой подзаголовок</h3>
+<h4>Мой под-подзаголовок</h4>
+```
 
-<pre class="brush: html">&lt;h1&gt;Мой главный заголовок&lt;/h1&gt;
-&lt;h2&gt;Мой заголовок верхнего уровня&lt;/h2&gt;
-&lt;h3&gt;Мой подзаголовок&lt;/h3&gt;
-&lt;h4&gt;Мой под-подзаголовок&lt;/h4&gt;</pre>
+Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента {{htmlelement("img")}}.
 
-<p>Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше  элемента {{htmlelement("img")}}.</p>
+### Абзацы
 
-<h3 id="Абзацы">Абзацы</h3>
+Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:
 
-<p>Как было сказано раньше, элемент {{htmlelement("p")}} предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:</p>
+```html
+<p>Это одиночный абзац</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Это одиночный абзац&lt;/p&gt;</pre>
+Добавьте свой образец текста (вы создавали его в статье [_Каким должен быть ваш веб-сайт?_](/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like)) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.
 
-<p>Добавьте свой образец текста (вы создавали его в статье <a href="/ru/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like"><em>Каким должен быть ваш веб-сайт?</em></a>) в один или несколько абзацев, расположенных прямо под элементом {{htmlelement("img")}}.</p>
+### Списки
 
-<h3 id="Списки">Списки</h3>
+Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:
 
-<p>Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:</p>
+1.  **Ненумерованные списки** - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.
+2.  **Нумерованные списки -** это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент {{htmlelement("ol")}}.
 
-<ol>
- <li><strong>Ненумерованные списки</strong> - это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент {{htmlelement("ul")}}.</li>
- <li><strong>Нумерованные списки -</strong> это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент {{htmlelement("ol")}}.</li>
-</ol>
+Каждый пункт внутри списков располагается внутри элемента {{htmlelement("li")}} (list item, элемент списка).
 
-<p>Каждый пункт внутри списков располагается внутри элемента {{htmlelement("li")}} (list item, элемент списка).</p>
+Например, если мы хотим включить часть следующего фрагмента абзаца в список:
 
-<p>Например, если мы хотим включить часть следующего фрагмента абзаца в список:</p>
+```html
+<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>
+```
 
-<pre class="brush: html">&lt;p&gt;Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... &lt;/p&gt;</pre>
+Мы могли бы изменить разметку на эту:
 
-<p>Мы могли бы изменить разметку на эту:</p>
+```html
+<p>Mozilla, мы являемся мировым сообществом</p>
 
-<pre class="brush: html">&lt;p&gt;Mozilla, мы являемся мировым сообществом&lt;/p&gt;
+<ul>
+  <li>технологов</li>
+  <li>мыслителей</li>
+  <li>строителей</li>
+</ul>
 
-&lt;ul&gt;
-  &lt;li&gt;технологов&lt;/li&gt;
-  &lt;li&gt;мыслителей&lt;/li&gt;
-  &lt;li&gt;строителей&lt;/li&gt;
-&lt;/ul&gt;
+<p>работающих вместе ... </p>
+```
 
-&lt;p&gt;работающих вместе ... &lt;/p&gt;</pre>
+Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.
 
-<p>Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.</p>
+## Ссылки
 
-<h2 id="Ссылки">Ссылки</h2>
+Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — {{htmlelement("a")}} — _a_ это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:
 
-<p>Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — {{htmlelement("a")}} — <em>a</em> это сокращение от "anchor" ("якорь"). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:</p>
+1.  Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".
+2.  Оберните текст в элемент {{htmlelement("a")}}, например так:
 
-<ol>
- <li>Выберите некоторый текст. Мы выбрали текст "Манифест Mozilla".</li>
- <li>Оберните текст в элемент {{htmlelement("a")}}, например так:
-  <pre class="brush: html">&lt;a&gt;Манифест Mozilla&lt;/a&gt;</pre>
- </li>
- <li>Задайте элементу {{htmlelement("a")}} атрибут<strong> </strong>href, например так:
-  <pre class="brush: html">&lt;a href=""&gt;Манифест Mozilla&lt;/a&gt;</pre>
- </li>
- <li>Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
-  <pre class="brush: html">&lt;a href="https://www.mozilla.org/ru/about/manifesto/details/"&gt;Манифест Mozilla&lt;/a&gt;</pre>
- </li>
-</ol>
+    ```html
+    <a>Манифест Mozilla</a>
+    ```
 
-<p>Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите <code>https://</code> или <code>http://</code> часть, называемую <em>протоколом</em>. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.</p>
+3.  Задайте элементу {{htmlelement("a")}} атрибут\*\* \*\*href, например так:
 
-<div class="note">
-<p><code>href</code> сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как <em><strong>h</strong>ypertext <strong>ref</strong>erence </em>("гипертекстовая ссылка").</p>
-</div>
+    ```html
+    <a href="">Манифест Mozilla</a>
+    ```
 
-<p>Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.</p>
+4.  Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
 
-<h2 id="Заключение">Заключение</h2>
+    ```html
+    <a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>
+    ```
 
-<p>Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете <a href="http://mdn.github.io/beginner-html-site/">посмотреть её здесь</a>):<br>
- <br>
- <img alt="A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text" src="https://mdn.mozillademos.org/files/9351/finished-test-page-small.png" style="display: block; height: 838px; margin: 0px auto; width: 716px;"></p>
+Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите `https://` или `http://` часть, называемую _протоколом_. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
 
-<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html">готовым примером кода</a> на GitHub.</p>
+> **Примечание:** `href` сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как _**h**ypertext **ref**erence_ ("гипертекстовая ссылка").
 
-<p>Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу <a href="/ru/Learn/HTML">Обучение HTML: руководства и уроки</a>.</p>
+Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.
 
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}</p>
+## Заключение
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете [посмотреть её здесь](http://mdn.github.io/beginner-html-site/)):
 
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+![A web page screenshot showing a firefox logo, a heading saying mozilla is cool, and two paragraphs of filler text](https://mdn.mozillademos.org/files/9351/finished-test-page-small.png)
+
+Если вы застряли, вы всегда можете сравнить свою работу с нашим [готовым примером кода](https://github.com/mdn/beginner-html-site/blob/gh-pages/index.html) на GitHub.
+
+Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу [Обучение HTML: руководства и уроки](/ru/Learn/HTML).
+
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web")}}
+
+## В этом модуле
+
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/index.md b/files/ru/learn/getting_started_with_the_web/index.md
index b048e42c32cee9..e802555c004dcd 100644
--- a/files/ru/learn/getting_started_with_the_web/index.md
+++ b/files/ru/learn/getting_started_with_the_web/index.md
@@ -17,53 +17,49 @@ tags:
   - Руководство
 translation_of: Learn/Getting_started_with_the_web
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<div class="summary">
-<p><em>Начало работы с Вебом</em> - это серия коротких уроков, которые познакомят вас с практическими аспектами веб-разработки. Вы настроите инструменты, необходимые для создания простой веб-страницы и публикации своего собственного кода.</p>
-</div>
+_Начало работы с Вебом_ - это серия коротких уроков, которые познакомят вас с практическими аспектами веб-разработки. Вы настроите инструменты, необходимые для создания простой веб-страницы и публикации своего собственного кода.
 
-<h2 id="История_вашего_первого_веб-сайта">История вашего первого веб-сайта</h2>
+## История вашего первого веб-сайта
 
-<p>Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать ещё один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнём с этого.</p>
+Необходимо много работать, чтобы создать профессиональный веб-сайт, так что, если вы новичок в веб-разработке, мы рекомендуем начать с малого. Вы не будете создавать ещё один Facebook прямо сейчас, но создать свой простой веб-сайт не так уж и сложно, так что мы начнём с этого.
 
-<p>Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!</p>
+Прорабатывая статьи, перечисленные ниже по порядку, вы пройдёте путь от нуля до создания своей первой веб-страницы. Ну что, давайте начнём!
 
-<h3 id="Установка_базового_программного_обеспечения"><a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a></h3>
+### [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения)
 
-<p>Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе <a href="/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения">Установка базового программного обеспечения</a> мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.</p>
+Когда речь заходит об инструментах для создания веб-сайта, тут есть из чего выбрать. Если вы только начинаете, вас может смутить количество текстовых редакторов, фреймворков и инструментов тестирования. В главе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения) мы покажем вам шаг за шагом, как установить только то программное обеспечение, которое вам понадобится для веб-разработки на начальном этапе.
 
-<h3 id="Каким_должен_быть_ваш_веб-сайт"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></h3>
+### [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
 
-<p>Перед тем, как вы начнёте писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? <a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a> Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.</p>
+Перед тем, как вы начнёте писать код для вашего веб-сайта, нужно составить план. Какую информацию вы демонстрируете? Какие шрифты и цвета вы используете? [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like) Мы опишем простой метод, которому вы сможете следовать, чтобы спланировать содержание и дизайн вашего сайта.
 
-<h3 id="Работа_с_файлами"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></h3>
+### [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
 
-<p>Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.</p>
+Веб-сайт состоит из множества файлов: текстового содержания, кода, таблиц стилей, медиа-контента, и так далее. Когда вы создаёте веб-сайт, вам нужно собрать эти файлы в разумную структуру и убедиться, что они могут взаимодействовать друг с другом. [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) объясняет, как создать разумную файловую структуру для вашего веб-сайта и про какие проблемы вы должны знать.
 
-<h3 id="Основы_HTML"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></h3>
+### [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
 
-<p>Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a> предоставляет достаточно информации для вашего знакомства с HTML.</p>
+Язык гипертекстовой разметки (Hypertext Markup Language, HTML) - это код, который вы используете для структурирования веб-содержимого и придания ему смысла и цели. Например, является ли моё содержимое набором абзацев, либо списком маркированных пунктов? Нужно ли вставить изображения на мою страницу? Есть ли у меня таблица данных? Не перегружая вас, статья [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics) предоставляет достаточно информации для вашего знакомства с HTML.
 
-<h3 id="Основы_CSS"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></h3>
+### [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
 
-<p>Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? <a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a> проведёт вас через то, что вам нужно знать, чтобы начать.</p>
+Каскадные таблицы стилей (Cascading Stylesheets, CSS) - это код, который вы используете для стилизации своего веб-сайта. Например, хотите ли вы, чтобы текст был черным или красным? Где должно быть нарисовано содержимое на экране? Какие фоновые изображения и цвета должны быть использованы, чтобы украсить ваш веб-сайт? [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics) проведёт вас через то, что вам нужно знать, чтобы начать.
 
-<h3 id="Основы_JavaScript"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></h3>
+### [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
 
-<p>JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a> даёт вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.</p>
+JavaScript - это язык программирования, который вы используете для добавления интерактивных функций для вашего веб-сайта, например, игр, событий, которые происходят при нажатии кнопок или ввода данных в формы, динамических эффектов стилизации, анимации и многого другого. [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics) даёт вам представление о том, что можно сделать с помощью этого захватывающего языка, и как начать.
 
-<h3 id="Публикация_вашего_веб-сайта"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></h3>
+### [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
 
-<p>После того как вы закончили писать код и организовали файлы, которые составляют ваш веб-сайт, нужно разместить все это в Интернете так, чтобы люди могли его найти. <a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего сайта</a> описывает, как отобразить ваш простой пример кода в Интернете с минимальными усилиями.</p>
+После того как вы закончили писать код и организовали файлы, которые составляют ваш веб-сайт, нужно разместить все это в Интернете так, чтобы люди могли его найти. [Публикация вашего сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website) описывает, как отобразить ваш простой пример кода в Интернете с минимальными усилиями.
 
-<h3 id="Как_работает_Интернет"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a></h3>
+### [Как работает Интернет](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
 
-<p>Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья <a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Интернет</a> описывает, что происходит, когда вы просматриваете веб-страницы на своём компьютере.</p>
+Когда вы заходите на свой любимый веб-сайт, в фоновом режиме происходит много сложных вещей, о которых вы можете не знать. Статья [Как работает Интернет](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works) описывает, что происходит, когда вы просматриваете веб-страницы на своём компьютере.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g">Web Demystified</a>(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано <a href="https://twitter.com/JeremiePat">Жереми Патонье</a>.</li>
- <li><a href="/en-US/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards">The web and web standards</a> (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик"  - это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.</li>
-</ul>
+- [Web Demystified](https://www.youtube.com/playlist?list=PLo3w8EB99pqLEopnunz-dOOBJ8t-Wgt2g)(web обзор): большая серия видеороликов, объясняющая основы web, нацеленных на начинающих веб-разработчиков. Создано [Жереми Патонье](https://twitter.com/JeremiePat).
+- [The web and web standards](/ru/docs/Learn/Getting_started_with_the_web/The_web_and_web_standards) (веб и веб стандарты): В этой статье приведена полезная информация о Вебе — как он появился, что такое технологии веб-стандартов, как они работают вместе, почему "веб-разработчик" - это отличная карьера, и какие виды наилучшей практики вы узнаете в ходе курса.
diff --git a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
index 78ad30e636f418..fee28427c3fb2e 100644
--- a/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
+++ b/files/ru/learn/getting_started_with_the_web/installing_basic_software/index.md
@@ -13,67 +13,55 @@ tags:
 translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
 original_slug: Learn/Getting_started_with_the_web/Установка_базового_программного_обеспечения
 ---
-<div>
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
 
-<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>
-</div>
+В _Установке базового программного обеспечения_, мы покажем вам, какие инструменты вам необходимы для простой веб-разработки, и как правильно установить их.
 
-<div class="summary">
-<p>В <em>Установке базового программного обеспечения</em>, мы покажем вам, какие инструменты вам необходимы для простой веб-разработки, и как правильно установить их.</p>
-</div>
+## Какие инструменты используют профессионалы?
 
-<h2 id="Какие_инструменты_используют_профессионалы">Какие инструменты используют профессионалы?</h2>
+- **Компьютер**. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).
+- **Текстовый редактор**, чтобы писать код. Это может быть текстовый редактор (например, [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [Atom](https://atom.io/), [GNU Emacs](https://www.gnu.org/software/emacs/), или [VIM](https://www.vim.org/)) или гибридный редактор (например, [Dreamweaver ](https://www.adobe.com/products/dreamweaver.html)or [WebStorm](https://www.jetbrains.com/webstorm/)). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.
+- **Веб-браузеры**, для тестирования кода. В настоящее время наиболее часто используемые браузеры это [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), и [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie). Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). [Lynx](https://lynx.browser.org/), текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.
+- **Графический редактор**, такие как [The Gimp](http://www.gimp.org/), [Paint.NET](http://www.getpaint.net/), или [Photoshop](http://www.adobe.com/uk/products/photoshop.html), чтобы создавать изображения для ваших веб-страниц.
+- **Система контроля версий**, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас [Git](http://git-scm.com/) является наиболее популярным инструментом контроля версий, и репозиторий кода [Github](https://github.com/), основанный на Git, также является очень популярным.
+- **FTP программа**, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе [Cyberduck](https://cyberduck.io/), [Fetch](http://fetchsoftworks.com/), и [FileZilla](https://filezilla-project.org/).
+- **Система автоматизации**, такая как [Grunt](http://gruntjs.com/) или [Gulp](http://gulpjs.com/), для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов.
+- Шаблоны, библиотеки, фреймворки и т. д., чтобы ускорить написание общей функциональности.
+- А также некоторые другие инструменты!
 
-<ul>
- <li><strong>Компьютер</strong>. Может быть, это звучит очевидно для некоторых людей, но некоторые из вас читают эту статью с телефона или библиотечного компьютера. Для серьёзной веб-разработки, лучше приобрести настольный компьютер (Windows, Mac или Linux).</li>
- <li><strong>Текстовый редактор</strong>, чтобы писать код. Это может быть текстовый редактор (например, <a href="https://code.visualstudio.com/">Visual Studio Code</a>, <a href="https://notepad-plus-plus.org/">Notepad++</a>, <a href="https://www.sublimetext.com/">Sublime Text</a>, <a href="https://atom.io/">Atom</a>, <a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>, или <a href="https://www.vim.org/">VIM</a>) или гибридный редактор (например, <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver </a>or <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>). Офисные редакторы не подходят для этого, поскольку они зависят от скрытых элементов, которые мешают движкам рендеринга, используемым веб-браузерами.</li>
- <li><strong>Веб-браузеры</strong>, для тестирования кода. В настоящее время наиболее часто используемые браузеры это <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, и <a href="http://windows.microsoft.com/ru/internet-explorer/download-ie">Internet Explorer</a>. Вы также должны тестировать ваш сайт на то, как он работает на мобильных устройствах и на любых старых браузерах, которые ваша целевая аудитория может все ещё широко использовать (например, IE 6-8). <a href="https://lynx.browser.org/">Lynx</a>, текстовый веб-браузер для терминала, отлично подходит для того, чтобы увидеть, как ваш сайт воспринимается слабовидящими пользователями.</li>
- <li><strong>Графический редактор</strong>, такие как <a href="http://www.gimp.org/">The Gimp</a>, <a href="http://www.getpaint.net/">Paint.NET</a>, или <a href="http://www.adobe.com/uk/products/photoshop.html">Photoshop</a>, чтобы создавать изображения для ваших веб-страниц.</li>
- <li><strong>Система контроля версий</strong>, чтобы управлять файлами на сервере, для совместной работы над проектом с командой, обмениваться кодом и избегать редакторских конфликтов. Сейчас <a href="http://git-scm.com/">Git</a> является наиболее популярным инструментом контроля версий, и репозиторий кода <a href="https://github.com/">Github</a>, основанный на Git, также является очень популярным.</li>
- <li><strong>FTP программа</strong>, чтобы загружать веб-страницы на сервер для публичного просмотра. Существует обилие таких программ, доступных в том числе <a href="https://cyberduck.io/">Cyberduck</a>, <a href="http://fetchsoftworks.com/">Fetch</a>, и <a href="https://filezilla-project.org/">FileZilla</a>.</li>
- <li><strong>Система автоматизации</strong>, такая как <a href="http://gruntjs.com/">Grunt</a> или <a href="http://gulpjs.com/">Gulp</a>, для автоматического выполнения повторяющихся задач, например, минимизации кода и запуска тестов.</li>
- <li>Шаблоны, библиотеки, фреймворки и т. д., чтобы ускорить написание общей функциональности.</li>
- <li>А также некоторые другие инструменты!</li>
-</ul>
+## Какие инструменты на самом деле нужны мне прямо сейчас?
 
-<h2 id="Какие_инструменты_на_самом_деле_нужны_мне_прямо_сейчас">Какие инструменты на самом деле нужны мне прямо сейчас?</h2>
+Этот список выглядит страшновато, но, к счастью, вы можете начать веб-разработку, не зная ничего о большинстве из того, что в нем написано. В этой статье мы установим базовый минимум - текстовый редактор и некоторые современные веб-браузеры.
 
-<p>Этот список выглядит страшновато, но, к счастью, вы можете начать веб-разработку, не зная ничего о большинстве из того, что в нем написано. В этой статье мы установим базовый минимум - текстовый редактор и некоторые современные веб-браузеры.</p>
+### Установка текстового редактора
 
-<h3 id="Установка_текстового_редактора">Установка текстового редактора</h3>
+У вас, наверное, уже есть базовый текстовый редактор на вашем компьютере. По умолчанию Windows включает [Блокнот](https://ru.wikipedia.org/wiki/%D0%91%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0%29) и Mac OS X поставляется с [TextEdit](https://ru.wikipedia.org/wiki/TextEdit). Linux дистрибутивы варьируются; Ubuntu поставляется с [gedit](https://ru.wikipedia.org/wiki/Gedit) по умолчанию.
 
-<p>У вас, наверное, уже есть базовый текстовый редактор на вашем компьютере. По умолчанию Windows включает <a href="https://ru.wikipedia.org/wiki/%D0%91%D0%BB%D0%BE%D0%BA%D0%BD%D0%BE%D1%82_%28%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B0%29">Блокнот</a> и Mac OS X поставляется с <a href="https://ru.wikipedia.org/wiki/TextEdit">TextEdit</a>. Linux дистрибутивы варьируются; Ubuntu поставляется с <a href="https://ru.wikipedia.org/wiki/Gedit">gedit</a> по умолчанию.</p>
+Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с [](https://www.sublimetext.com/)[Visual Studio Code](https://code.visualstudio.com/), который является бесплатным редактором, который предлагает предварительный просмотр и подсказки во время написания кода.
 
-<p>Для веб-разработки вам, вероятно, понадобится больше, чем могут предложить Notepad или TextEdit. Мы рекомендуем начать с <a href="https://www.sublimetext.com/"> </a><a href="https://code.visualstudio.com/">Visual Studio Code</a>, который является бесплатным редактором, который предлагает предварительный просмотр и подсказки во время написания кода.</p>
+### Установка современных веб-браузеров
 
-<h3 id="Установка_современных_веб-браузеров">Установка современных веб-браузеров</h3>
+На данный момент, мы установим только пару настольных веб-браузеров, чтобы проверять наш код. Выберите вашу операционную систему ниже и нажмите на соответствующие ссылки для загрузки установочных программ ваших любимых браузеров:
 
-<p>На данный момент, мы установим только пару настольных веб-браузеров, чтобы проверять наш код. Выберите вашу операционную систему ниже и нажмите на соответствующие ссылки для загрузки установочных программ ваших любимых браузеров:</p>
+- Linux: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Brave](https://brave.com).
+- Windows: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Internet Explorer](http://windows.microsoft.com/ru/internet-explorer/download-ie), [Brave](https://brave.com) (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер)
+- Mac: [Firefox](https://www.mozilla.org/ru/firefox/new/), [Chrome](https://www.google.com/chrome/browser/), [Opera](http://www.opera.com/), [Safari](https://www.apple.com/safari/), [Brave](https://brave.com) (Safari поставляется с iOS и OS X по умолчанию)
 
-<ul>
- <li>Linux: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://brave.com">Brave</a>.</li>
- <li>Windows: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="http://windows.microsoft.com/ru/internet-explorer/download-ie">Internet Explorer</a>, <a href="https://brave.com">Brave</a> (Если у вас есть Windows 8 или выше, вы можете установить IE 10 или более позднюю версию; иначе, вам следует установить альтернативный браузер)</li>
- <li>Mac: <a href="https://www.mozilla.org/ru/firefox/new/">Firefox</a>, <a href="https://www.google.com/chrome/browser/">Chrome</a>, <a href="http://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, <a href="https://brave.com">Brave</a> (Safari поставляется с iOS и OS X по умолчанию)</li>
-</ul>
+Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования.
 
-<p>Прежде, чем идти дальше, вам следует установить, по крайней мере, два из этих браузеров, чтобы использовать их для тестирования.</p>
+### Установка локального веб-сервера
 
-<h3 id="Установка_локального_веб-сервера">Установка локального веб-сервера</h3>
+Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье [Как настроить локальный сервер для тестирования?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server)
 
-<p>Некоторые примеры для успешной работы необходимо будет запустить на веб-сервере. Вы можете узнать, как это сделать в статье <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/set_up_a_local_testing_server">Как настроить локальный сервер для тестирования?</a></p>
+{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}
 
-<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
index 4945da9b71aacf..2cb168e759bd8d 100644
--- a/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
+++ b/files/ru/learn/getting_started_with_the_web/javascript_basics/index.md
@@ -10,404 +10,335 @@ tags:
   - Обучение
 translation_of: Learn/Getting_started_with_the_web/JavaScript_basics
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</div>
+JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.
 
-<div class="summary">
-<p>JavaScript – это язык программирования, который добавляет интерактивность на ваш веб-сайт (например: игры, отклик при нажатии кнопок или при вводе данных в формы, динамические стили, анимация). Эта статья поможет вам начать работать с этим захватывающим языком и даст вам представление о том, на что он способен.</p>
-</div>
+## Что такое JavaScript на самом деле?
 
-<h2 id="Что_такое_JavaScript_на_самом_деле">Что такое JavaScript на самом деле?</h2>
+{{Glossary("JavaScript")}} ("JS" для краткости) — это полноценный {{Glossary("Dynamic programming language", "динамический язык программирования")}}, который применяется к {{Glossary("HTML")}} документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.
 
-<p>{{Glossary("JavaScript")}} ("JS" для краткости) — это полноценный {{Glossary("Dynamic programming language", "динамический язык программирования")}}, который применяется к {{Glossary("HTML")}} документу, и может обеспечить динамическую интерактивность на веб-сайтах. Его разработал Brendan Eich, сооснователь проекта Mozilla, Mozilla Foundation и Mozilla Corporation.</p>
+JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!
 
-<p>JavaScript невероятно универсален и дружелюбен к новичкам. Обладая большим опытом, вы сможете создавать игры, анимированную 2D и 3D графику, полномасштабные приложения с базами данных и многое другое!</p>
+JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:
 
-<p>JavaScript сам по себе довольно компактный, но очень гибкий. Разработчиками написано большое количество инструментов поверх основного языка JavaScript, которые разблокируют огромное количество дополнительных функций с очень небольшим усилием. К ним относятся:</p>
+- Программные интерфейсы приложения ({{Glossary("API","API")}}), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.
+- Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.
+- Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.
 
-<ul>
- <li>Программные интерфейсы приложения ({{Glossary("API","API")}}), встроенные в браузеры, обеспечивающие различные функциональные возможности, такие как динамическое создание HTML и установку CSS стилей, захват и манипуляция видеопотоком, работа с веб-камерой пользователя или генерация 3D графики и аудио сэмплов.</li>
- <li>Сторонние API позволяют разработчикам внедрять функциональность в свои сайты от других разработчиков, таких как Twitter или Facebook.</li>
- <li>Также вы можете применить к вашему HTML сторонние фреймворки и библиотеки, что позволит вам ускорить создание сайтов и приложений.</li>
-</ul>
+Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей [учебной области JavaScript ](/ru/docs/Learn/JavaScript)и в остальной части MDN.
 
-<p>Поскольку эта статья должна быть только лёгким введением в JavaScript, мы не собираемся путать вас на этом этапе, подробно рассказывая о том, какая разница между основным языком JavaScript и различными инструментами, перечисленными выше. Вы можете подробно изучить все это позже, в нашей <a href="/ru/docs/Learn/JavaScript">учебной области JavaScript </a> и в остальной части MDN. </p>
+Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!
 
-<p>Ниже мы познакомим вас с некоторыми аспектами основного языка, и вы также будете играть с несколькими функциями API браузера. Веселитесь!</p>
+## Пример "hello world"
 
-<h2 id="Пример_hello_world">Пример "hello world"</h2>
+Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.
 
-<p>Предыдущий раздел звучит очень многообещающе, и это на самом деле так — JavaScript является одной из самых перспективных веб-технологий, и когда вы освоитесь и начнёте использовать его, ваши веб-сайты перейдут в новое измерение мощи и креативности.</p>
+Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример ([стандарт в начальных примерах программирования](https://ru.wikipedia.org/wiki/Hello,_world!)).
 
-<p>Тем не менее, с JavaScript немного более сложно освоиться, чем с HTML и CSS. Вам придётся начать с малого, продолжая изучение небольшими шагами. Для начала мы покажем вам, как добавить некоторые основы JavaScript на вашу страницу, чтобы создать "hello world!" пример (<a href="https://ru.wikipedia.org/wiki/Hello,_world!">стандарт в начальных примерах программирования</a>).</p>
+> **Предупреждение:** **Важно**: Если вы не следили за остальным нашим курсом, [скачайте этот пример кода](https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip) и используйте его в качестве стартовой точки.
 
-<div class="warning">
-<p><strong>Важно</strong>: Если вы не следили за остальным нашим курсом, <a href="https://github.com/mdn/beginner-html-site-styled/archive/gh-pages.zip">скачайте этот пример кода</a> и используйте его в качестве стартовой точки.</p>
-</div>
+1.  Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем `main.js`. Сохраните его в вашей папке `scripts`.
+2.  Далее перейдите в ваш `index.html` файл и введите следующий элемент на новой строке прямо перед закрывающим тегом `</body>`:
 
-<ol>
- <li>Для начала перейдите на ваш тестовый сайт и создайте папку с именем 'scripts' (без кавычек). Затем, в новой папке скриптов, которую вы только что создали, создайте новый файл с именем <code>main.js</code>. Сохраните его в вашей папке <code>scripts</code>.</li>
- <li>Далее перейдите в ваш <code>index.html</code> файл и введите следующий элемент на новой строке прямо перед закрывающим тегом <code>&lt;/body&gt;</code>:
-  <pre class="brush: html">&lt;script src="scripts/main.js"&gt;&lt;/script&gt;</pre>
- </li>
- <li> В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).</li>
- <li>Теперь добавьте следующий код в файл <code>main.js</code>:
-  <pre class="brush: js">var myHeading = document.querySelector('h1');
-myHeading.textContent = 'Hello world!';</pre>
- </li>
- <li>Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите <code>index.html</code> в браузере. Вы должны увидеть что-то вроде этого: <img alt="" src="hello-world.png" style="display: block; margin: 0px auto;"></li>
-</ol>
+    ```html
+    <script src="scripts/main.js"></script>
+    ```
 
-<div class="note">
-<p><strong>Примечание</strong>: Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.</p>
-</div>
+3.  В основном этот код выполняет ту же работу, что и элемент {{htmlelement("link")}} для CSS — добавляет JavaScript на страницу, позволяя ему взаимодействовать с HTML (и CSS, и чем-нибудь ещё на странице).
+4.  Теперь добавьте следующий код в файл `main.js`:
 
-<h3 id="Что_произошло">Что произошло?</h3>
+    ```js
+    var myHeading = document.querySelector('h1');
+    myHeading.textContent = 'Hello world!';
+    ```
 
-<p>Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной <code>myHeading</code>. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.</p>
+5.  Теперь убедитесь, что HTML и JavaScript файлы сохранены, и загрузите `index.html` в браузере. Вы должны увидеть что-то вроде этого: ![](hello-world.png)
 
-<p>После этого, вы устанавливаете значение переменной <code>myHeading</code> в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".</p>
+> **Примечание:** Причиной, по которой мы поставили элемент {{htmlelement("script")}} в нижней части HTML файла, является то, что HTML-элементы загружаются браузером в том порядке, в котором они расположены в файле. Поэтому, если JavaScript загружается первым и ему нужно взаимодействовать с HTML ниже его, он не сможет работать, так как JavaScript будет загружен раньше, чем HTML, с которым нужно работать. Поэтому, располагать JavaScript в нижней части HTML страницы считается лучшей стратегией.
 
-<h2 id="Ускоренный_курс_по_основам_языка">Ускоренный курс по основам языка</h2>
+### Что произошло?
 
-<p>Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!</p>
+Итак, ваш заголовок текста был изменён на "Hello world!" с помощью JavaScript. Мы сделали это с помощью вызова функции {{domxref("Document.querySelector", "querySelector()")}}, захватив ссылку на наш заголовок и сохранив её в переменной, названной `myHeading`. Это очень похоже на то, что мы делали в CSS с помощью селекторов. Если вы хотите что-то сделать с элементом, то для начала вам нужно его выбрать.
 
-<div class="warning">
-<p><strong>Важно</strong>: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">Откройте для себя браузерные инструменты разработчика</a>.</p>
-</div>
+После этого, вы устанавливаете значение переменной `myHeading` в {{domxref("Node.textContent", "textContent")}} свойство (которое представляет собой контент заголовка) "Hello world!".
 
-<h3 id="Переменные">Переменные</h3>
+## Ускоренный курс по основам языка
 
-<p>{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/var">var</a></code> (не рекомендуется, продолжайте читать, чтобы получить объяснения) или <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, за которым следует любое имя, которым вы захотите её назвать:</p>
+Давайте познакомимся с некоторыми основными возможностями языка JavaScript, чтобы дать вам больше понимания, как это всё работает. Более того, эти возможности являются общими для всех языков программирования. Если вы сможете понять эти основы, вы будете в состоянии начать программировать, как ни в чём не бывало!
 
-<pre class="brush: js">let myVariable;</pre>
+> **Предупреждение:** **Важно**: В этой статье попробуйте вводить примеры строк кода в вашей JavaScript консоли, чтобы увидеть, что происходит. Для более подробной информации о JavaScript консоли смотрите статью [Откройте для себя браузерные инструменты разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools).
 
-<div class="note">
-<p><strong>Примечание</strong>: Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье <a href="http://news.codecademy.com/your-guide-to-semicolons-in-javascript/">ваше руководство по точкам с запятой в JavaScript</a>.</p>
-</div>
+### Переменные
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите<a href="http://www.codelifter.com/main/tips/tip_020.shtml"> в правилах именования переменных</a>.) Если вы не уверены, вы можете <a href="https://mothereff.in/js-variables">проверить имя вашей переменной</a>, чтобы увидеть корректно ли оно.</p>
-</div>
+{{Glossary("Variable", "Переменные")}} — это контейнеры, внутри которых вы можете хранить значения. Вы начинаете с того, что объявляете переменную с помощью ключевого слова [`var`](/ru/docs/Web/JavaScript/Reference/Statements/var) (не рекомендуется, продолжайте читать, чтобы получить объяснения) или [`let`](/ru/docs/Web/JavaScript/Reference/Statements/let), за которым следует любое имя, которым вы захотите её назвать:
 
-<div class="note">
-<p><strong>Примечание</strong>: JavaScript чувствителен к регистру — <code>myVariable</code> отличается от переменной <code>myvariable</code>. Если у вас возникают проблемы в вашем коде, проверьте регистр!</p>
-</div>
+```js
+let myVariable;
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание: </strong>Для получения более подробной информации о разнице между var и let, смотрите:  <a href="/ru/docs/Web/JavaScript/Reference/Statements/let">Разница между var и let</a>.</p>
-</div>
+> **Примечание:** Точка с запятой в конце строки указывает, где заканчивается оператор. Точку с запятой нужно обязательно использовать для разеделения операторов, располагающихся на одной строке. Однако некоторые люди считают, что хорошая практика — указывать её в конце каждого оператора. Существуют и другие правила, когда нужно ставить точку с запятой, а когда нет. Смотрите более подробно в статье [ваше руководство по точкам с запятой в JavaScript](http://news.codecademy.com/your-guide-to-semicolons-in-javascript/).
 
-<p>После объявления переменной вы можете присвоить ей значение:</p>
+> **Примечание:** вы можете назвать переменную практически как угодно, но есть некоторые ограничения для её имени (смотрите[ в правилах именования переменных](http://www.codelifter.com/main/tips/tip_020.shtml).) Если вы не уверены, вы можете [проверить имя вашей переменной](https://mothereff.in/js-variables), чтобы увидеть корректно ли оно.
 
-<pre class="brush: js">myVariable = 'Bob';</pre>
+> **Примечание:** JavaScript чувствителен к регистру — `myVariable` отличается от переменной `myvariable`. Если у вас возникают проблемы в вашем коде, проверьте регистр!
 
-<p>Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:</p>
+> **Примечание:**Для получения более подробной информации о разнице между var и let, смотрите: [Разница между var и let](/ru/docs/Web/JavaScript/Reference/Statements/let).
 
-<pre class="brush: js">var myVariable = 'Bob';</pre>
+После объявления переменной вы можете присвоить ей значение:
 
-<p>Вы можете получить значение, просто вызвав переменную по имени:</p>
+```js
+myVariable = 'Bob';
+```
 
-<pre class="brush: js">myVariable;</pre>
+Вы можете сделать обе эти операции на одной и той же строке, если вы захотите:
 
-<p>После установки значения переменной  вы можете изменить его позже:</p>
+```js
+var myVariable = 'Bob';
+```
 
-<pre>var myVariable = 'Bob';
-myVariable = 'Steve';</pre>
+Вы можете получить значение, просто вызвав переменную по имени:
 
-<p>Обратите внимание, что переменные имеют разные <a href="/ru/docs/Web/JavaScript/Data_structures">типы данных</a>:</p>
+```js
+myVariable;
+```
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row">Переменная</th>
-   <th scope="col">Пояснение</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">{{Glossary("String")}}</th>
-   <td>Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки.</td>
-   <td><code>var myVariable = 'Bob';</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Number")}}</th>
-   <td>Числа. Числа не имеют кавычек вокруг них.</td>
-   <td><code>var myVariable = 10;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Boolean")}}</th>
-   <td>Значение True(Правда)/False(Ложь). Слова <code>true</code> и <code>false</code> специальные ключевые слова в JS, и не нуждаются в кавычках.</td>
-   <td><code>var myVariable = true;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Array")}}</th>
-   <td>Массив, который позволяет хранить несколько значений в одной ссылке.</td>
-   <td><code>var myVariable = [1,'Bob','Steve',10];</code><br>
-    Обратиться к каждому элементу массива можно так:<br>
-    <code>myVariable[0]</code>, <code>myVariable[1]</code>, и т.д.</td>
-  </tr>
-  <tr>
-   <th scope="row">{{Glossary("Object")}}</th>
-   <td>В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.</td>
-   <td><code>var myVariable = document.querySelector('h1');</code><br>
-    Все это из вышеприведённых примеров.</td>
-  </tr>
- </tbody>
-</table>
+После установки значения переменной вы можете изменить его позже:
 
-<p>Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.</p>
+```
+var myVariable = 'Bob';
+myVariable = 'Steve';
+```
 
-<h3 id="Комментарии">Комментарии</h3>
+Обратите внимание, что переменные имеют разные [типы данных](/ru/docs/Web/JavaScript/Data_structures):
 
-<p>Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:</p>
+| Переменная                       | Пояснение                                                                                                                           | Пример                                                                                                                             |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| {{Glossary("String")}}     | Последовательность текста, называемая строкой. Чтобы указать, что это значение является строкой, вы должны заключить его в кавычки. | `var myVariable = 'Bob';`                                                                                                          |
+| {{Glossary("Number")}}     | Числа. Числа не имеют кавычек вокруг них.                                                                                           | `var myVariable = 10;`                                                                                                             |
+| {{Glossary("Boolean")}} | Значение True(Правда)/False(Ложь). Слова `true` и `false` специальные ключевые слова в JS, и не нуждаются в кавычках.               | `var myVariable = true;`                                                                                                           |
+| {{Glossary("Array")}}     | Массив, который позволяет хранить несколько значений в одной ссылке.                                                                | `var myVariable = [1,'Bob','Steve',10];` Обратиться к каждому элементу массива можно так: `myVariable[0]`, `myVariable[1]`, и т.д. |
+| {{Glossary("Object")}}     | В принципе, что угодно. Все в JavaScript является объектом, и может храниться в переменной. Имейте это в виду, пока вы учитесь.     | `var myVariable = document.querySelector('h1');` Все это из вышеприведённых примеров.                                              |
 
-<pre class="brush: js">/*
+Так для чего нам нужны переменные? Что ж, переменные должны были сделать что-нибудь интересное в программировании. Если значения не могли бы изменяться, то вы не могли бы ничего сделать динамическим, например, персонализировать приветственное сообщение или сменить изображение, отображаемое в галерее изображений.
+
+### Комментарии
+
+Комментарии - это, по сути, короткие фрагменты текста, которые могут быть добавлены в код, и которые игнорируются браузером. Вы можете поместить комментарии в JavaScript-код, так же как вы делали это в CSS:
+
+```js
+/*
 Всё, что находится тут - комментарий.
-*/</pre>
-
-<p>Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:</p>
-
-<pre class="brush: js" style="font-size: 14px;">// Это комментарий
-</pre>
-
-<h3 id="Операторы">Операторы</h3>
-
-<p>{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="row">Оператор</th>
-   <th scope="col">Пояснение</th>
-   <th scope="col">Символ(ы)</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <th scope="row">Сложение (Конкатенация)</th>
-   <td>Используется для сложения двух чисел или склеивания двух строк вместе.</td>
-   <td><code>+</code></td>
-   <td><code>6 + 9;<br>
-    "Hello " + "world!";</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Вычитание, Умножение, Деление</th>
-   <td>Они делают то, чего вы от них ожидаете в математике.</td>
-   <td><code>-</code>, <code>*</code>, <code>/</code></td>
-   <td><code>9 - 3;<br>
-    8 * 2; // умножение в JS это звёздочка<br>
-    9 / 3;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Присваивание</th>
-   <td>Вы уже это видели: он присваивает значение переменной.</td>
-   <td><code>=</code></td>
-   <td><code>var myVariable = 'Bob';</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Равенство (Тождество)</th>
-   <td>Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат <code>true</code>/<code>false</code> (Boolean).</td>
-   <td><code>===</code></td>
-   <td><code>var myVariable = 3;<br>
-    myVariable === 4;</code></td>
-  </tr>
-  <tr>
-   <th scope="row">Отрицание (Неравенство)</th>
-   <td>Возвращает логически противоположное значение, которое ему предшествует; превращает <code>true</code> в <code>false</code>, и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения <em>не</em> равными.</td>
-   <td><code>!</code>, <code>!==</code></td>
-   <td>
-    <p>Основное выражение <code>true</code>, но сравнение возвращает <code>false</code>, потому что мы отрицаем его:</p>
-
-    <p><code>var myVariable = 3;<br>
-     !(myVariable === 3);</code></p>
-
-    <p>Здесь мы проверяем "<code>myVariable</code> НЕ равно 3". Это возвращает <code>false</code>, потому что <code>myVariable</code> равно 3.</p>
-
-    <p><code><code>var myVariable = 3;</code><br>
-     myVariable !== 3;</code></p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе <a href="/ru/docs/Web/JavaScript/Reference/Operators">выражения и операторы</a>.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите <code>"35" + "25"</code> в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, <code>35 + 25</code>, то получите правильный результат.</p>
-</div>
-
-<h3 id="Условия">Условия</h3>
-
-<p>Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция <code>if ... else</code>. Например:</p>
-
-<pre class="brush: js">var iceCream = 'chocolate';
+*/
+```
+
+Если ваш комментарий не содержит переноса строк, то зачастую легче поставить две косые черты, как тут:
+
+```js
+// Это комментарий
+```
+
+### Операторы
+
+{{Glossary("operator")}} — это математический символ, который производит результат, основанный на двух значениях (или переменных). В приведённой ниже таблице вы можете увидеть некоторые из наиболее простых операторов, наряду с некоторыми примерами, которые опробуете в JavaScript консоли.
+
+| Оператор                      | Пояснение                                                                                                                                                                                                                           | Символ(ы)     | Пример                                                                                                                                                                                                                                                                         |
+| ----------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Сложение (Конкатенация)       | Используется для сложения двух чисел или склеивания двух строк вместе.                                                                                                                                                              | `+`           | `6 + 9; "Hello " + "world!";`                                                                                                                                                                                                                                                  |
+| Вычитание, Умножение, Деление | Они делают то, чего вы от них ожидаете в математике.                                                                                                                                                                                | `-`, `*`, `/` | `9 - 3; 8 * 2; // умножение в JS это звёздочка 9 / 3;`                                                                                                                                                                                                                         |
+| Присваивание                  | Вы уже это видели: он присваивает значение переменной.                                                                                                                                                                              | `=`           | `var myVariable = 'Bob';`                                                                                                                                                                                                                                                      |
+| Равенство (Тождество)         | Делает проверку, если увидит, что два значения равны друг другу, то возвращает результат `true`/`false` (Boolean).                                                                                                                  | `===`         | `var myVariable = 3; myVariable === 4;`                                                                                                                                                                                                                                        |
+| Отрицание (Неравенство)       | Возвращает логически противоположное значение, которое ему предшествует; превращает `true` в `false`, и т.д. Когда используется вместе с оператором равенства, оператор отрицания проверяет, являются ли два значения _не_ равными. | `!`, `!==`    | Основное выражение `true`, но сравнение возвращает `false`, потому что мы отрицаем его:`var myVariable = 3; !(myVariable === 3);`Здесь мы проверяем "`myVariable` НЕ равно 3". Это возвращает `false`, потому что `myVariable` равно 3.`var myVariable = 3; myVariable !== 3;` |
+
+Существует намного больше операторов для изучения, но этих пока хватит. Смотрите их полный список в разделе [выражения и операторы](/ru/docs/Web/JavaScript/Reference/Operators).
+
+> **Примечание:** Смешивание типов данных может привести к некоторым неожиданным результатам при выполнении вычислений, поэтому будьте осторожны, правильно ссылайтесь на ваши переменные, чтобы получать ожидаемые результаты. Например, введите `"35" + "25"` в вашу консоль. Почему вы не получили результат, который вы ожидали? Потому, что кавычки превратили числа в строки, так что у вас в итоге получилась конкатенация строк, а не сложение чисел. Если вы введёте, `35 + 25`, то получите правильный результат.
+
+### Условия
+
+Условия — это конструкции в коде, которые позволяют проверить истинность или ложность выражения и выполнить другой код в зависимости от полученного результата. Самая распространённая форма условия — инструкция `if ... else`. Например:
+
+```js
+var iceCream = 'chocolate';
 if (iceCream === 'chocolate') {
   alert('Yay, I love chocolate ice cream!');
 } else {
   alert('Awwww, but chocolate is my favorite...');
-}</pre>
+}
+```
 
-<p>Выражение внутри <code>if ( ... )</code> — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную <code>iceCream</code> со строкой <code>chocolate</code> и увидеть равны ли они. Если это сравнение возвращает <code>true</code>, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции <code>else</code>.</p>
+Выражение внутри `if ( ... )` — это проверка, которая использует тождественный оператор (как описано выше), чтобы сравнить переменную `iceCream` со строкой `chocolate` и увидеть равны ли они. Если это сравнение возвращает `true`, выполнится первый блок кода. Если нет, этот код пропустится и выполнится второй блок кода, после инструкции `else`.
 
-<h3 id="Функции">Функции</h3>
+### Функции
 
-<p>{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:</p>
+{{Glossary("Function", "Функции")}} - способ упаковки функциональности, которую вы хотите использовать повторно. Всякий раз, когда вам нужна определённая процедура, вы можете просто вызвать функцию по её имени, а не переписывать весь код каждый раз. Вы уже видели некоторые функции, описанные выше, например:
 
-<ol>
- <li>
-  <pre class="brush: js">var myVariable = document.querySelector('h1');</pre>
- </li>
- <li>
-  <pre class="brush: js">alert('hello!');</pre>
- </li>
-</ol>
+1.  ```js
+    var myVariable = document.querySelector('h1');
+    ```
+2.  ```js
+    alert('hello!');
+    ```
 
-<p>Эти функции, <code>document.querySelector</code> и <code>alert</code>, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.</p>
+Эти функции, `document.querySelector` и `alert`, встроены в браузер для того, чтобы вы использовали их всякий раз, когда вам это необходимо.
 
-<p>Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — <code>()</code>, скорее всего, это функция. Функции часто принимают {{Glossary("Argument", "аргументы")}} — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.</p>
+Если вы видите что-то, что выглядит как имя переменной, но имеет после него скобки — `()`, скорее всего, это функция. Функции часто принимают {{Glossary("Argument", "аргументы")}} — биты данных, которые им необходимы для выполнения своей работы. Они находятся в скобках, и разделяются запятыми, если присутствует более одного аргумента.
 
-<p>Например, функция <code>alert()</code> вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.</p>
+Например, функция `alert()` вызывает всплывающий блок, появляющийся в окне браузера, но мы должны дать ему строку в качестве аргумента, чтобы сказать функции, что писать во всплывающем блоке.
 
-<p>Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:</p>
+Хорошая новость заключается в том, что вы можете определить свои собственные функции — в следующем примере мы напишем простую функцию, которая принимает два числа в качестве аргументов и умножает их:
 
-<pre class="brush: js">function multiply(num1,num2) {
+```js
+function multiply(num1,num2) {
   var result = num1 * num2;
   return result;
-}</pre>
+}
+```
 
-<p>Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:</p>
+Попробуйте запустить вышеупомянутую функцию в консоли, затем попробуйте изменить аргументы, например:
 
-<pre class="brush: js">multiply(4,7);
+```js
+multiply(4,7);
 multiply(20,20);
-multiply(0.5,3);</pre>
+multiply(0.5,3);
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Инструкция <a href="/ru/docs/Web/JavaScript/Reference/Statements/return"><code>return</code></a> сообщает браузеру, что нужно вернуть переменную <code>result</code> из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте <a href="/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope">больше об области видимости переменных</a>.)</p>
-</div>
+> **Примечание:** Инструкция [`return`](/ru/docs/Web/JavaScript/Reference/Statements/return) сообщает браузеру, что нужно вернуть переменную `result` из функции, которую можно будет использовать. Это необходимо потому, что переменные, определённые внутри функций, доступны только внутри этих функций. Это называется {{Glossary("Scope", "областью видимости")}} переменной. (Читайте [больше об области видимости переменных](/ru/docs/Web/JavaScript/Guide/Grammar_and_types#variable_scope).)
 
-<h3 id="События">События</h3>
+### События
 
-<p>Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является <a href="/ru/docs/Web/Events/click">событие клика</a>, которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:</p>
+Для создания действительной интерактивности на веб-сайте вам необходимы события. События — это структура, которая следит за тем, что происходит в браузере, а затем позволяет вам запускать код в ответ на это. Наиболее очевидным является [событие клика](/ru/docs/Web/Events/click), которое вызывается браузером, когда мы щёлкаем по чему-то мышью. Для демонстрации этого события введите следующую команду в вашу консоль, а затем щёлкните по текущей веб-странице:
 
-<pre class="brush: js">document.querySelector('html').onclick = function() {
+```js
+document.querySelector('html').onclick = function() {
     alert('Ouch! Stop poking me!');
-}</pre>
+}
+```
+
+Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства [`onclick`](/ru/docs/Web/API/GlobalEventHandlers.onclick) анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.
+
+Обратите внимание, что
+
+```js
+document.querySelector('html').onclick = function() {};
+```
+
+эквивалентно
 
-<p>Существуют множество способов прикрепить событие к элементу. Здесь мы выбираем {{htmlelement("html")}} элемент и устанавливаем ему обработчик свойства <code><a href="/ru/docs/Web/API/GlobalEventHandlers.onclick">onclick</a></code> анонимной функцией (т.е. безымянной) которая содержит код, который мы хотим запустить для события клика.</p>
+```js
+var myHTML = document.querySelector('html');
+myHTML.onclick = function() {};
+```
 
-<p>Обратите внимание, что</p>
+Просто так короче.
 
-<pre class="brush: js">document.querySelector('html').onclick = function() {};</pre>
+## Прокачаем пример нашего веб-сайта
 
-<p>эквивалентно</p>
+Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.
 
-<pre class="brush: js">var myHTML = document.querySelector('html');
-myHTML.onclick = function() {};</pre>
+### Добавление смены изображения
 
-<p>Просто так короче.</p>
+В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щёлкнули.
 
-<h2 id="Прокачаем_пример_нашего_веб-сайта">Прокачаем пример нашего веб-сайта</h2>
+1.  В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.
+2.  Сохраните изображение в вашу папку `images`.
+3.  Переименуйте это изображение в 'firefox2.png' (без кавычек).
+4.  Перейдите в ваш файл `main.js` и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)
 
-<p>Теперь, когда мы прошли некоторые основы JavaScript, давайте добавим несколько крутых несложных функций в пример нашего сайта, чтобы дать вам некоторое представление о принципах работы.</p>
+    ```js
+    var myImage = document.querySelector('img');
 
-<h3 id="Добавление_смены_изображения">Добавление смены изображения</h3>
+    myImage.onclick = function() {
+        var mySrc = myImage.getAttribute('src');
+        if(mySrc === 'images/firefox-icon.png') {
+          myImage.setAttribute ('src','images/firefox2.png');
+        } else {
+          myImage.setAttribute ('src','images/firefox-icon.png');
+        }
+    }
+    ```
+
+5.  Сохраните все файлы и загрузите `index.html` в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!
+
+Итак, мы сохраняем ссылку на наш элемент {{htmlelement("img")}} в переменной `myImage`. Далее, мы создаём этой переменной обработчик события `onclick` с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:
+
+1.  Мы получаем значение из атрибута `src` изображения.
+2.  Мы используем условие для проверки значения `src,` равен ли путь к исходному изображению:
+
+    1.  Если это так, мы меняем значение `src` на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента {{htmlelement("image")}}.
+    2.  Если это не так (значит, оно должно было уже измениться), мы меняем значение `src`, возвращаясь к первоначальному пути изображения, каким он был изначально.
+
+### Добавление персонального приветственного сообщения
+
+Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью [Web Storage API](/ru/docs/Web/API/Web_Storage_API). Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.
+
+1.  В `index.html`, добавьте следующую строку перед элементом {{htmlelement("script")}}:
+
+    ```html
+    <button>Change user</button>
+    ```
+
+2.  В `main.js`, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:
 
-<p>В этом разделе мы добавим ещё одно изображение на наш сайт и добавим некоторый простой JavaScript для переключения между двумя изображениями, когда по ним щёлкнули.</p>
+    ```js
+    var myButton = document.querySelector('button');
+    var myHeading = document.querySelector('h1');
+    ```
 
-<ol>
- <li>В первую очередь найдите другое изображение, которые вы хотели бы показать на вашем сайте. Убедитесь что оно такого же размера, как ваше первое изображение или максимально близкое к нему.</li>
- <li>Сохраните изображение в вашу папку <code>images</code>.</li>
- <li>Переименуйте это изображение в 'firefox2.png' (без кавычек).</li>
- <li>Перейдите в ваш файл <code>main.js</code> и введите следующий JavaScript. (Если ваш "hello world" JavaScript по-прежнему существует, удалите его.)
-  <pre class="brush: js">var myImage = document.querySelector('img');
+3.  Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже:
 
-myImage.onclick = function() {
-    var mySrc = myImage.getAttribute('src');
-    if(mySrc === 'images/firefox-icon.png') {
-      myImage.setAttribute ('src','images/firefox2.png');
+    ```js
+    function setUserName() {
+      var myName = prompt('Please enter your name.');
+      localStorage.setItem('name', myName);
+      myHeading.textContent = 'Mozilla is cool, ' + myName;
+    }
+    ```
+
+    Эта функция содержит функцию [`prompt()`](/ru/docs/Web/API/Window.prompt), которая вызывает диалоговое окно, немного похожее на `alert()` кроме того, что `prompt()` просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает **OK**. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием `localStorage`, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию `setItem()` из localStorage для создания и хранения данных в свойстве под названием `'name'`, и устанавливаем это значение в переменную `myName`, которая содержит имя введённое пользователем. В конце мы устанавливаем `textContent` заголовку в виде строки и имени пользователя.
+
+4.  Затем добавьте блок `if ... else` - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
+
+    ```js
+    if(!localStorage.getItem('name')) {
+      setUserName();
     } else {
-      myImage.setAttribute ('src','images/firefox-icon.png');
+      var storedName = localStorage.getItem('name');
+      myHeading.textContent = 'Mozilla is cool, ' + storedName;
     }
-}</pre>
- </li>
- <li>Сохраните все файлы и загрузите <code>index.html</code> в браузере. Теперь, когда вы щёлкните по изображению, оно должно измениться на другое!</li>
-</ol>
-
-<p>Итак, мы сохраняем ссылку на наш элемент {{htmlelement("img")}} в переменной <code>myImage</code>. Далее, мы создаём этой переменной обработчик события <code>onclick</code> с анонимной функцией. Теперь, каждый раз, когда на этот элемент изображения щёлкнут:</p>
-
-<ol>
- <li>Мы получаем значение из атрибута <code>src</code> изображения.</li>
- <li>Мы используем условие для проверки значения <code>src,</code> равен ли путь к исходному изображению:
-  <ol>
-   <li>Если это так, мы меняем значение <code>src</code> на путь ко 2-му изображению, заставляя другое изображение загружаться внутри элемента {{htmlelement("image")}}.</li>
-   <li>Если это не так (значит, оно должно было уже измениться), мы меняем значение <code>src</code>, возвращаясь к первоначальному пути изображения, каким он был изначально.</li>
-  </ol>
- </li>
-</ol>
-
-<h3 id="Добавление_персонального_приветственного_сообщения">Добавление персонального приветственного сообщения</h3>
-
-<p>Далее мы добавим немного другого кода, чтобы изменить заголовок страницы на персонализированное приветственное сообщение, когда пользователь впервые зайдёт на сайт. Это приветственное сообщение будет сохраняться, когда пользователь покинет сайт, а позже вернётся - мы сохраним его с помощью <a href="/ru/docs/Web/API/Web_Storage_API">Web Storage API</a>. Мы также включим возможность изменить пользователя и, следовательно, приветственное сообщение, в любое время, когда это будет необходимо.</p>
-
-<ol>
- <li>В <code>index.html</code>, добавьте следующую строку перед элементом {{htmlelement("script")}}:
-
-  <pre class="brush: html">&lt;button&gt;Change user&lt;/button&gt;</pre>
- </li>
- <li>В <code>main.js</code>, добавьте следующий код в конец файла, точно так, как написано - он захватит ссылки на новую кнопку и заголовок, и сохранит их в переменные:
-  <pre class="brush: js">var myButton = document.querySelector('button');
-var myHeading = document.querySelector('h1');</pre>
- </li>
- <li>Теперь добавьте следующую функцию для установки персонализированного приветствия - она ничего не будет делать, но мы будем использовать её позже:
-  <pre class="brush: js">function setUserName() {
-  var myName = prompt('Please enter your name.');
-  localStorage.setItem('name', myName);
-  myHeading.textContent = 'Mozilla is cool, ' + myName;
-}</pre>
-  Эта функция содержит функцию <a href="/ru/docs/Web/API/Window.prompt"><code>prompt()</code></a>, которая вызывает диалоговое окно, немного похожее на <code>alert()</code> кроме того, что <code>prompt()</code> просит пользователя ввести некоторые данные, и сохраняет эти данные в переменной, после того как пользователь нажимает <strong>OK</strong>. В данном случае, мы просим пользователя ввести его имя. Далее, мы вызываем API под названием <code>localStorage</code>, который позволяет нам хранить данные в браузере и извлекать их позднее. Мы используем функцию <code>setItem()</code> из localStorage для создания и хранения данных в свойстве под названием <code>'name'</code>, и устанавливаем это значение в переменную <code>myName</code>, которая содержит имя введённое пользователем. В конце мы устанавливаем <code>textContent</code> заголовку в виде строки и имени пользователя.</li>
- <li>Затем добавьте блок <code>if ... else</code> - мы могли бы назвать это кодом инициализации, поскольку он структурирует приложение при его первой загрузке:
-  <pre class="brush: js">if(!localStorage.getItem('name')) {
-  setUserName();
-} else {
-  var storedName = localStorage.getItem('name');
-  myHeading.textContent = 'Mozilla is cool, ' + storedName;
-}</pre>
-  Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте <code>name</code>. Если нет, то функция <code>setUserName()</code> запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью <code>getItem()</code> и устанавливаем <code>textContent</code> заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри <code>setUserName()</code>.</li>
- <li>Наконец, установите обработчик события <code>onclick</code> на кнопку. При нажатии кнопки запускается функция <code>setUserName()</code>. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
-  <pre class="brush: js">myButton.onclick = function() {
-  setUserName();
-}
-</pre>
- </li>
-</ol>
+    ```
+
+    Этот блок сначала использует оператор отрицания (логическое НЕ, представленное в виде !) чтобы проверить, существуют ли данные в пункте `name`. Если нет, то функция `setUserName()` запускается для их создания. Если данные существуют (то есть, пользователь установил его во время предыдущего посещения), мы извлекаем сохранённое имя, с помощью `getItem()` и устанавливаем `textContent` заголовку в виде строки плюс имя пользователя, так же, как мы делали внутри `setUserName()`.
+
+5.  Наконец, установите обработчик события `onclick` на кнопку. При нажатии кнопки запускается функция `setUserName()`. Это позволяет пользователю установить новое имя, всякий раз, когда он захочет, нажатием кнопки:
+
+    ```js
+    myButton.onclick = function() {
+      setUserName();
+    }
+    ```
 
-<p>Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!</p>
+Теперь, когда вы впервые заходите на сайт, он попросит вас указать имя пользователя, а затем предоставит вам персональное сообщение. Вы можете изменить имя в любое время, нажав на кнопку. В качестве дополнительного бонуса, поскольку имя хранится внутри localStorage, оно сохраняется после закрытия сайта, сохраняя при этом персонализированное сообщение при следующем открытии сайта!
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете <a href="https://mdn.github.io/beginner-html-site-scripted/">посмотреть нашу версию здесь</a>):</p>
+Если вы следовали всем инструкциям в этой статье, в конечном итоге вы должны получить страницу, которая выглядит примерно так (вы также можете [посмотреть нашу версию здесь](https://mdn.github.io/beginner-html-site-scripted/)):
 
-<p><img alt="" src="website-screen-scripted.png" style="display: block; margin: 0px auto;"></p>
+![](website-screen-scripted.png)
 
-<p>Если вы застряли, вы всегда можете сравнить свою работу с нашим <a href="https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js">готовым примером кода на Github</a>.</p>
+Если вы застряли, вы всегда можете сравнить свою работу с нашим [готовым примером кода на Github](https://github.com/mdn/beginner-html-site-scripted/blob/gh-pages/scripts/main.js).
 
-<p>Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу <a href="/ru/docs/Learn/JavaScript">изучение JavaScript</a>.</p>
+Здесь мы узнали только самую поверхность JavaScript. Если вам понравился этот язык и вы хотите изучить его поглубже, перейдите к нашему разделу [изучение JavaScript](/ru/docs/Learn/JavaScript).
 
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}</p>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/CSS_basics", "Learn/Getting_started_with_the_web/Publishing_your_website", "Learn/Getting_started_with_the_web")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
index 998a53e41ebdb1..572892bab0af43 100644
--- a/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
+++ b/files/ru/learn/getting_started_with_the_web/publishing_your_website/index.md
@@ -13,171 +13,163 @@ tags:
   - Хостинг
 translation_of: Learn/Getting_started_with_the_web/Publishing_your_website
 ---
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
 
-<div class="summary">
-<p>После того, как вы закончите писать код и организовывать файлы, которые составляют ваш веб-сайт, вам нужно расположить все это в Интернете, чтобы люди могли найти ваш сайт. В этой статье описывается, как разместить простой пример вашего кода с минимальными усилиями.</p>
-</div>
+После того, как вы закончите писать код и организовывать файлы, которые составляют ваш веб-сайт, вам нужно расположить все это в Интернете, чтобы люди могли найти ваш сайт. В этой статье описывается, как разместить простой пример вашего кода с минимальными усилиями.
 
-<h2 id="Какие_существуют_варианты">Какие существуют варианты?</h2>
+## Какие существуют варианты?
 
-<p>Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трёх обширных стратегий с точки зрения новичка, а затем вы пройдёте через один метод, который будет работать в настоящее время.</p>
+Публикация веб-сайта это не простая тема, главным образом, потому что существует много различных способов сделать это. В этой статье мы не стремимся документировать все возможные методы. Скорее, мы обсудим плюсы и минусы трёх обширных стратегий с точки зрения новичка, а затем вы пройдёте через один метод, который будет работать в настоящее время.
 
-<h3 id="Получение_хостинга_и_доменного_имени">Получение хостинга и доменного имени</h3>
+### Получение хостинга и доменного имени
 
-<p>Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:</p>
+Чтобы иметь больший контроль над контентом и внешним видом веб-сайта, большинство людей предпочитают покупать веб-хостинг и доменное имя:
 
-<ul>
- <li>Хостинг — арендованное файловое пространство на <a href="/en-US/Learn/What_is_a_web_server">веб-сервере</a> хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.</li>
- <li><a href="/en-US/Learn/Understanding_domain_names">Доменное имя</a> — уникальный адрес по которому люди могут найти ваш веб-сайт, например <code>http://www.mozilla.org</code> или <code>http://www.bbc.co.uk</code>. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у <strong>регистратора доменов</strong>.</li>
-</ul>
+- Хостинг — арендованное файловое пространство на [веб-сервере](/en-US/Learn/What_is_a_web_server) хостинговой компании. Вы размещаете ваши файлы веб-сайта в этом пространстве, и веб-сервер выдаёт контент для веб-пользователей, которые запрашивают его.
+- [Доменное имя](/en-US/Learn/Understanding_domain_names) — уникальный адрес по которому люди могут найти ваш веб-сайт, например `http://www.mozilla.org` или `http://www.bbc.co.uk`. Вы можете арендовать доменное имя на столько лет, сколько захотите (минимум на 1 год) у **регистратора доменов**.
 
-<p>Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.</p>
+Множество профессиональных веб-сайтов располагается в Интернете именно таким образом.
 
-<p>Кроме того, вам потребуется {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-клиент (более подробно см. <a href="/en-US/Learn/How_much_does_it_cost#Software">Сколько это стоит: программное обеспечение</a>), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.</p>
+Кроме того, вам потребуется {{Glossary("FTP", "File Transfer Protocol (FTP)")}}-клиент (более подробно см. [Сколько это стоит: программное обеспечение](/en-US/Learn/How_much_does_it_cost#Software)), чтобы передать файлы веб-сайта на сервер. Существует множество FTP-клиентов, но, как правило, вам нужно войти на веб-сервер, используя данные, предоставленные вашей хостинговой компанией (например: имя пользователя (логин), пароль, имя хоста). Затем FTP-клиент отобразит файлы на вашем компьютере в одной половине окна и файлы на хостинговом сервере в другой половине, так вы сможете перетаскивая копировать файлы с вашего компьютера на сервер и обратно.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9469/ftp.jpg" style="display: block; height: 487px; margin: 0px auto; width: 800px;"></p>
+![](https://mdn.mozillademos.org/files/9469/ftp.jpg)
 
-<h4 id="Советы_по_поиску_хостингов_и_доменов">Советы по поиску хостингов и доменов</h4>
+#### Советы по поиску хостингов и доменов
 
-<ul>
- <li>Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его. </li>
- <li>Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте! </li>
- <li>Также есть несколько бесплатных сервисов, таких как <a href="https://neocities.org/">Neocities</a>, <a href="https://www.blogger.com">Blogspot</a>, и <a href="https://wordpress.com/">Wordpress</a>. Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.</li>
- <li>Иногда компании предлагают одновременно и хостинг и домен.</li>
-</ul>
+- Здесь мы не продвигаем какие-то конкретные хостинговые компании. Чтобы найти хостинг и регистратора доменных имён, просто поищите "веб-хостинг" и "доменные имена". Во всех таких сервисах есть функция, позволяющая вам проверить, доступно ли имя домена, или кто-то другой уже зарегистрировал его.
+- Ваш домашний или рабочий {{Glossary("ISP", "Интернет-провайдер")}} может предоставлять хостинговые услуги для небольших веб-сайтов. Набор возможностей в таком случае может быть ограничен, но, тем не менее, он может отлично подойти для ваших первых экспериментов - свяжитесь с ними и узнайте!
+- Также есть несколько бесплатных сервисов, таких как [Neocities](https://neocities.org/), [Blogspot](https://www.blogger.com), и [Wordpress](https://wordpress.com/). Опять же, вы получаете то, за что платите, но они идеально подходят для ваших первоначальных экспериментов. Бесплатные сервисы по большей части не требуют FTP-клиентов - вы можете перетаскивать ваши файлы напрямую в веб-интерфейсе.
+- Иногда компании предлагают одновременно и хостинг и домен.
 
-<h3 id="Использование_онлайн_инструментов_таких_как_GitHub_или_Google_App_Engine">Использование онлайн инструментов, таких как GitHub или Google App Engine</h3>
+### Использование онлайн инструментов, таких как GitHub или Google App Engine
 
-<p>Некоторые сервисы позволяют вам опубликовать сайт:</p>
+Некоторые сервисы позволяют вам опубликовать сайт:
 
-<ul>
- <li><a href="https://github.com/">GitHub</a> - это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в <a href="http://git-scm.com/">Git</a> - <strong>систему контроля версий. </strong>По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная <a href="http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control">система контроля версий</a> — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию <a href="https://pages.github.com/">GitHub pages</a>, с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.</li>
- <li><a href="https://cloud.google.com/appengine/" title="App Engine - Build Scalable Web &amp; Mobile Backends in Any Language  |  Google Cloud Platform">Google App Engine</a> - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine">как разместить ваш веб-сайт на Google App Engine</a> чтобы узнать больше информации.</li>
-</ul>
+- [GitHub](https://github.com/) - это "социальная сеть программистов". С помощью неё можно загружать репозитории с вашими разработками для хранения в [Git](http://git-scm.com/) - **систему контроля версий.** По умолчанию все разработки хранятся с открытым исходным кодом, а это значит, что ваш код будет доступен любому - участники могут по нему учиться либо же предлагать свои улучшения. Вы также можете объединяться с другими кодерами! Это очень большое и полезное сообщество, в чьи ряды лучше вступить, и Git/GitHub это очень популярная [система контроля версий](http://git-scm.com/book/en/v2/Getting-Started-About-Version-Control) — большинство компаний сейчас использует её для работы. GitHub имеет очень полезную функцию [GitHub pages](https://pages.github.com/), с помощью которой вы сможете опубликовать ваш код (ваш сайт) в интернете.
+- [Google App Engine](https://cloud.google.com/appengine/ "App Engine - Build Scalable Web & Mobile Backends in Any Language  |  Google Cloud Platform") - это мощная платформа, которая позволяет создавать и запускать приложения в инфраструктуре Google — нужно ли вам создать многоуровневое веб-приложение с нуля или разместить статический веб-сайт. Смотрите [как разместить ваш веб-сайт на Google App Engine](/ru/docs/Learn/Common_questions/How_do_you_host_your_website_on_Google_App_Engine) чтобы узнать больше информации.
 
-<p>В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.</p>
+В отличие от других хостингов, эти услуги обычно бесплатны, но взамен вы получите ограниченный набор инструментов.
 
-<h3 id="Использование_облачных_IDE_таких_как_CodePen">Использование облачных IDE, таких как CodePen</h3>
+### Использование облачных IDE, таких как CodePen
 
-<p>Существует ряд веб-приложений, эмулирующих среду веб-разработки, позволяющих вводить HTML, CSS и JavaScript, а затем отображать результат этого кода в виде сайта - и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.</p>
+Существует ряд веб-приложений, эмулирующих среду веб-разработки, позволяющих вводить HTML, CSS и JavaScript, а затем отображать результат этого кода в виде сайта - и все это на одной вкладке браузера. Вообще говоря, эти инструменты достаточно просты, отлично подходят для обучения, хороши для того, чтобы делиться кодом (например, если вы хотите поделиться техникой с коллегой или обратиться за помощью в отладке к коллегам из другого офиса) и бесплатны (основные функции). Они размещают вашу отрендереную страницу на уникальном веб-адресе. Однако, основные функции довольно ограничены, и приложения обычно не предоставляют хостинговое пространство для таких файлов, как изображения и т.д.
 
-<p>Попробуйте один из этих и посмотрите, какой из них вам больше нравится:</p>
+Попробуйте один из этих и посмотрите, какой из них вам больше нравится:
 
-<ul>
- <li><a href="https://jsfiddle.net/">JSFiddle</a></li>
- <li><a href="https://thimble.mozilla.org">Thimble</a></li>
- <li><a href="http://jsbin.com/">JSBin</a></li>
- <li><a href="https://codepen.io/">CodePen</a></li>
-</ul>
+- [JSFiddle](https://jsfiddle.net/)
+- [Thimble](https://thimble.mozilla.org)
+- [JSBin](http://jsbin.com/)
+- [CodePen](https://codepen.io/)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9471/jsbin-screen.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+![](https://mdn.mozillademos.org/files/9471/jsbin-screen.png)
 
-<h2 id="Публикация_с_помощью_GitHub">Публикация с помощью GitHub</h2>
+## Публикация с помощью GitHub
 
-<p>А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах GitHub. Мы не хотим сказать, что этот метод является единственным и наиболее верным, но это бесплатно, достаточно просто, а также затрагивает определённые навыки, которые точно будут полезны для вашего дальнейшего обучения.</p>
+А теперь, давайте рассмотрим, как опубликовать свой сайт на страницах GitHub. Мы не хотим сказать, что этот метод является единственным и наиболее верным, но это бесплатно, достаточно просто, а также затрагивает определённые навыки, которые точно будут полезны для вашего дальнейшего обучения.
 
-<h3 id="Основная_настройка">Основная настройка</h3>
+### Основная настройка
 
-<ol>
- <li>Прежде всего, <a href="http://git-scm.com/downloads">установите Git</a> на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.</li>
- <li>Далее, <a href="https://github.com/join">создайте аккаунт в GitHub</a>. Это просто и легко.</li>
- <li>После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.</li>
- <li>Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите <em>New repository</em>.</li>
-</ol>
+1.  Прежде всего, [установите Git](http://git-scm.com/downloads) на ваш компьютер. Это основная версия системы управления версий, поддерживающая GitHub.
+2.  Далее, [создайте аккаунт в GitHub](https://github.com/join). Это просто и легко.
+3.  После того как вы зарегистрировались, войдите в github.com используя ваш логин и пароль.
+4.  Далее, вам нужно создать новый репозиторий для ваших файлов. Нажмите Плюс (+) в правом верхнем углу главной страницы GitHub, затем выберите _New repository_.
 
-<p>На этой странице, в поле <em>Repository name</em>, введите <em>username</em>.github.io, где <em>username</em> это ваше имя пользователя. Так, например, наш друг <em>valerii15298</em> введёт <em>valerii15298.github.io</em>.</p>
+На этой странице, в поле _Repository name_, введите _username_.github.io, где _username_ это ваше имя пользователя. Так, например, наш друг _valerii15298_ введёт _valerii15298.github.io_.
 
-<p><img alt="" src="https://i.imgur.com/hdCboGw.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+![](https://i.imgur.com/hdCboGw.png)
 
-<p>Нажмите <em>Create repository</em> и вы окажетесь на следующей странице:</p>
+Нажмите _Create repository_ и вы окажетесь на следующей странице:
 
-<p><img alt="" src="https://i.imgur.com/ZWE2DMv.png" style="display: block; height: 849px; margin: 0px auto; width: 1392px;"></p>
+![](https://i.imgur.com/ZWE2DMv.png)
 
-<h3 id="Загрузка_ваших_файлов_на_GitHub">Загрузка ваших файлов на GitHub</h3>
+### Загрузка ваших файлов на GitHub
 
-<p>Здесь у нас будет использоваться командная строка чтобы отправить наш репозиторий на GitHub. Командная строка - это окно где вы вводите команды для быстрого выполнения таких вещей, как создание файла или запуск программы, без использования пользовательского интерфейса. Командная строка выглядит примерно так:</p>
+Здесь у нас будет использоваться командная строка чтобы отправить наш репозиторий на GitHub. Командная строка - это окно где вы вводите команды для быстрого выполнения таких вещей, как создание файла или запуск программы, без использования пользовательского интерфейса. Командная строка выглядит примерно так:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9483/command-line.png" style="display: block; height: 478px; margin: 0px auto; width: 697px;"></p>
+![](https://mdn.mozillademos.org/files/9483/command-line.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: вы также можете использовать графический пользовательский интерфейс <a href="http://git-scm.com/downloads/guis">Git</a> для этих же целей, если вам не удобно работать с командной строкой.</p>
-</div>
+> **Примечание:** вы также можете использовать графический пользовательский интерфейс [Git](http://git-scm.com/downloads/guis) для этих же целей, если вам не удобно работать с командной строкой.
 
-<p>У всех операционных систем есть командная строка:</p>
+У всех операционных систем есть командная строка:
 
-<ul>
- <li><strong>Windows</strong>: <strong>Командная строка. </strong>Чтобы открыть её нажмите клавишу Windows, затем введите <em>Командная строка </em>в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.</li>
- <li><strong>OS X</strong>: <strong>Terminal</strong> можно найти в <em>Приложения &gt; Утилиты</em>.</li>
- <li><strong>Linux</strong>: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите <strong>Терминал</strong> в панели приложений или меню.</li>
-</ul>
+- **Windows**: **Командная строка.** Чтобы открыть её нажмите клавишу Windows, затем введите _Командная строка_ в поле поиска, и выберите её в появившемся списке. Заметьте, что Windows имеет свои собственные соглашения команд, отличные от Linux и OS X, поэтому приведённые ниже команды могут отличаться на вашем компьютере.
+- **OS X**: **Terminal** можно найти в _Приложения > Утилиты_.
+- **Linux**: Обычно вы можете вытащить терминал с помощью Ctrl + Alt + T. Если это не сработает, найдите **Терминал** в панели приложений или меню.
 
-<p>Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.</p>
+Сначала это может показаться немного страшным, но не волнуйтесь - вы скоро освоите основы. Вы говорите компьютеру сделать что-то в терминале, введя команду и нажав Enter.
 
-<ol>
- <li>Укажите в командной строке каталог <code>test-site</code> (или другое название каталога, содержащего ваш сайт). Для этого используйте команду <code>cd</code> (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием <code>test-site</code> на рабочем столе:
+1.  Укажите в командной строке каталог `test-site` (или другое название каталога, содержащего ваш сайт). Для этого используйте команду `cd` (т.е. «change directory»). Вот то, что вы наберёте, если разместили свой веб-сайт в каталоге под названием `test-site` на рабочем столе:
 
-  <pre class="brush: bash">cd Desktop/test-site</pre>
- </li>
- <li>Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту <code>git</code>, чтобы он превратил каталог в репозиторий git:
-  <pre class="brush: bash">git init</pre>
- </li>
- <li>Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
-  <pre class="brush: bash">git remote add origin https://github.com/bobsmith/bobsmith.github.io.git</pre>
- </li>
- <li>Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.
-  <pre class="brush: bash">git add --all
-git commit -m 'adding my files to my repository'</pre>
- </li>
- <li>Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:
-  <pre class="brush: bash">git push -u origin master</pre>
- </li>
- <li>Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (<em>username.github.io</em>), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.</li>
-</ol>
+    ```bash
+    cd Desktop/test-site
+    ```
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы застряли, <a href="https://pages.github.com/">GitHub Pages homepage</a> будет очень полезна для вас.</p>
-</div>
+2.  Когда командная строка указывает внутрь вашего каталога веб-сайта, введите следующую команду, которая сообщает инструменту `git`, чтобы он превратил каталог в репозиторий git:
 
-<h3 id="Дальнейшее_изучение_GitHub">Дальнейшее изучение GitHub</h3>
+    ```bash
+    git init
+    ```
 
-<p>Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:</p>
+3.  Далее вернёмся к сайту GitHub. На текущей странице вас интересует раздел "…or push an existing repository from the command line". Вы должны увидеть две строки кода в этом разделе. Скопируйте всю первую строку, вставьте её в командную строку и нажмите Enter. Команда должна выглядеть примерно так:
 
-<pre>git add --all
+    ```bash
+    git remote add origin https://github.com/bobsmith/bobsmith.github.io.git
+    ```
+
+4.  Далее введите следующие две команды, нажимая Enter после каждой. Это подготовит код к загрузке на GitHub, и укажет Git управлять этими файлами.
+
+    ```bash
+    git add --all
+    git commit -m 'adding my files to my repository'
+    ```
+
+5.  Наконец, загрузите код на GitHub - вернитесь на веб-страницу GitHub, на которой вы находились, и введите в терминал команду:
+
+    ```bash
+    git push -u origin master
+    ```
+
+6.  Теперь, когда вы перейдёте по веб-адресу, созданному в GitHub, в новом окне браузера (_username.github.io_), вы увидите ваш сайт онлайн! Разошлите ссылку вашим друзьям, пусть оценят ваше мастерство.
+
+> **Примечание:** Если вы застряли, [GitHub Pages homepage](https://pages.github.com/) будет очень полезна для вас.
+
+### Дальнейшее изучение GitHub
+
+Если вы хотите сделать больше изменений на своём тестовом сайте и загрузить их в GitHub, вам просто нужно внести изменения в свои файлы, как и раньше. Затем вам нужно ввести следующие команды (нажав Enter после каждого), чтобы вставить эти изменения в GitHub:
+
+```
+git add --all
 git commit -m 'another commit'
-git push</pre>
+git push
+```
 
-<p>Вы можете заменить <em>another commit</em> более подходящим сообщением, описывающим какие изменения вы только что сделали. </p>
+Вы можете заменить _another commit_ более подходящим сообщением, описывающим какие изменения вы только что сделали.
 
-<p>Мы едва затронули Git. Чтобы узнать больше,  начните с <a href="https://help.github.com/index.html">GitHub Help site</a>.</p>
+Мы едва затронули Git. Чтобы узнать больше, начните с [GitHub Help site](https://help.github.com/index.html).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!</p>
+К этому моменту, у вас должен быть собственный пример веб-сайта, доступный по уникальному веб-адресу. Отлично!
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9485/hosted-final-site.png" style="display: block; height: 1049px; margin: 0px auto; width: 878px;"></p>
+![](https://mdn.mozillademos.org/files/9485/hosted-final-site.png)
 
-<h3 id="Дальнейшее_чтение">Дальнейшее чтение</h3>
+### Дальнейшее чтение
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80">Что такое веб-сервер?</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/Understanding_domain_names">Что такое доменные имена?</a></li>
- <li><a href="/en-US/Learn/How_much_does_it_cost">Сколько стоит сделать что-то в Интернете?</a></li>
- <li><a href="https://www.codecademy.com/learn/deploy-a-website">Развёртывание сайта</a>: хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.</li>
- <li><a href="http://alignedleft.com/resources/cheap-web-hosting">Cheap or Free Static Website Hosting</a>, статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.</li>
-</ul>
+- [Что такое веб-сервер?](/ru/docs/Learn/%D0%A7%D1%82%D0%BE_%D1%82%D0%B0%D0%BA%D0%BE%D0%B5_%D0%B2%D0%B5%D0%B1_%D1%81%D0%B5%D1%80%D0%B2%D0%B5%D1%80)
+- [Что такое доменные имена?](/ru/docs/Learn/Understanding_domain_names)
+- [Сколько стоит сделать что-то в Интернете?](/en-US/Learn/How_much_does_it_cost)
+- [Развёртывание сайта](https://www.codecademy.com/learn/deploy-a-website): хороший курс от Codecademy, который забегает немного вперёд и показывает некоторые дополнительные техники.
+- [Cheap or Free Static Website Hosting](http://alignedleft.com/resources/cheap-web-hosting), статья написанная Скоттом Мюрреем содержит некоторые полезные идеи о доступных сервисах.
 
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}</p>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/JavaScript_basics", "Learn/Getting_started_with_the_web/How_the_Web_works", "Learn/Getting_started_with_the_web")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
index da5af8e827819b..b6e4edde5550dc 100644
--- a/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
+++ b/files/ru/learn/getting_started_with_the_web/the_web_and_web_standards/index.md
@@ -7,162 +7,156 @@ tags:
 translation_of: Learn/Getting_started_with_the_web/The_web_and_web_standards
 original_slug: Learn/Getting_started_with_the_web/Веб_и_веб_стандарты
 ---
-<p dir="ltr">{{learnsidebar}}</p>
+{{learnsidebar}}
 
-<p dir="ltr">Статья содержит общую информацию о всемирной сети (the Web) — откуда она взялась, что такое веб-стандарты, как они связанны, почему "веб разработчик" отличный карьерный выбор и чему полезному можно научиться изучая этот курс.</p>
+Статья содержит общую информацию о всемирной сети (the Web) — откуда она взялась, что такое веб-стандарты, как они связанны, почему "веб разработчик" отличный карьерный выбор и чему полезному можно научиться изучая этот курс.
 
-<h2 dir="ltr" id="Краткая_история_сети_веб">Краткая история сети веб</h2>
+## Краткая история сети веб
 
-<p dir="ltr">Мы постарались максимально кратко изложить здесь информацию. Если вы более детально заинтересованы в истории веб сети, то попробуйте поискать это в интернете.</p>
+Мы постарались максимально кратко изложить здесь информацию. Если вы более детально заинтересованы в истории веб сети, то попробуйте поискать это в интернете.
 
-<p dir="ltr">В конце 1960-х военные США разработали коммуникационную сеть <a href="/en-US/docs/Glossary/Arpanet">ARPANET</a>. Вполне можно её рассматривать в качестве прародителя современной сети, так как она работала с помощью <a href="https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%B0%D0%BA%D0%B5%D1%82%D0%BE%D0%B2">коммутации пакетов</a>, и для неё впервые была внедрена сетевая модель <a href="https://ru.wikipedia.org/wiki/TCP/IP">TCP/IP</a>. Эти две технологии послужили основой, на которой затем был построен интернет.</p>
+В конце 1960-х военные США разработали коммуникационную сеть [ARPANET](/ru/docs/Glossary/Arpanet). Вполне можно её рассматривать в качестве прародителя современной сети, так как она работала с помощью [коммутации пакетов](https://ru.wikipedia.org/wiki/%D0%9A%D0%BE%D0%BC%D0%BC%D1%83%D1%82%D0%B0%D1%86%D0%B8%D1%8F_%D0%BF%D0%B0%D0%BA%D0%B5%D1%82%D0%BE%D0%B2), и для неё впервые была внедрена сетевая модель [TCP/IP](https://ru.wikipedia.org/wiki/TCP/IP). Эти две технологии послужили основой, на которой затем был построен интернет.
 
-<p dir="ltr">В 1980 году Тим Бернерс-Ли (aka TimBL) написал программу под названием ENQUIRE, которая позволяла устанавливать связь между двумя узлами. Ничего не напоминает?</p>
+В 1980 году Тим Бернерс-Ли (aka TimBL) написал программу под названием ENQUIRE, которая позволяла устанавливать связь между двумя узлами. Ничего не напоминает?
 
-<p dir="ltr">В 1989 году TimBL выступил в организации <a href="https://ru.wikipedia.org/wiki/%D0%A6%D0%95%D0%A0%D0%9D">ЦЕРН</a> с идеями о методах структурирования, обработке и обмена информацией (<a href="https://www.w3.org/History/1989/proposal.html">Information Management: A Proposal</a>), предложив при этом концепцию "<a href="https://ru.wikipedia.org/wiki/%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82">гипертекста</a>". Идеи Тима были одобрены и он начал воплощать в реальность свой проект. Современная сеть построена на основании его работ. </p>
+В 1989 году TimBL выступил в организации [ЦЕРН](https://ru.wikipedia.org/wiki/%D0%A6%D0%95%D0%A0%D0%9D) с идеями о методах структурирования, обработке и обмена информацией ([Information Management: A Proposal](https://www.w3.org/History/1989/proposal.html)), предложив при этом концепцию "[гипертекста](https://ru.wikipedia.org/wiki/%D0%93%D0%B8%D0%BF%D0%B5%D1%80%D1%82%D0%B5%D0%BA%D1%81%D1%82)". Идеи Тима были одобрены и он начал воплощать в реальность свой проект. Современная сеть построена на основании его работ.
 
-<p dir="ltr">К концу 1990-го года Тим Бернерс разработал все необходимые для запуска сети средства — <a href="/en-US/docs/Web/HTTP">HTTP</a>, <a href="/en-US/docs/Web/HTML">HTML</a>, первый в мире веб браузер (<a href="https://en.wikipedia.org/wiki/WorldWideWeb">WorldWideWeb</a>), сервер HTTP и несколько веб страниц для наглядности.</p>
+К концу 1990-го года Тим Бернерс разработал все необходимые для запуска сети средства — [HTTP](/ru/docs/Web/HTTP), [HTML](/ru/docs/Web/HTML), первый в мире веб браузер ([WorldWideWeb](https://en.wikipedia.org/wiki/WorldWideWeb)), сервер HTTP и несколько веб страниц для наглядности.
 
-<p dir="ltr">В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданы миллионы веб страниц. Как и обещали, достаточно краткая история.</p>
+В течение нескольких последующих лет веб сеть расширялась, выпускались новые браузеры, были установлены тысячи серверов и созданы миллионы веб страниц. Как и обещали, достаточно краткая история.
 
-<p dir="ltr">Стоит отметить, что в 1994 году TimBL основал консорциум Всемирной паутины (<a href="https://www.w3.org/">World Wide Web Consortium (W3C)</a>)  - организацию, связывающую множество компаний для сплочения усилий в области разработки веб технологий. После этого появились технологии, например, такие как <a href="/en-US/docs/Web/CSS">CSS</a> и <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, которые преобразовали веб сеть в тот вид, в котором мы наблюдаем её сейчас.</p>
+Стоит отметить, что в 1994 году TimBL основал консорциум Всемирной паутины ([World Wide Web Consortium (W3C)](https://www.w3.org/)) - организацию, связывающую множество компаний для сплочения усилий в области разработки веб технологий. После этого появились технологии, например, такие как [CSS](/ru/docs/Web/CSS) и [JavaScript](/ru/docs/Web/JavaScript), которые преобразовали веб сеть в тот вид, в котором мы наблюдаем её сейчас.
 
-<h2 dir="ltr" id="Веб-стандарты">Веб-стандарты</h2>
+## Веб-стандарты
 
-<p dir="ltr"><strong>Веб-стандарты</strong> - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существует сайт MDN Web Docs). Она используются разработчиками ПО для внедрения технологий (например, в веб браузеры).</p>
+**Веб-стандарты** - это технологии, используемые для создания веб страниц. Стандарты существуют в виде технической документации (спецификаций), которая точно описывает как та, или иная технология должна работать. Документация никак не поможет изучить то, как пользоваться описываемыми в ней технологиями (вот почему существует сайт MDN Web Docs). Она используются разработчиками ПО для внедрения технологий (например, в веб браузеры).
 
-<p dir="ltr">В качестве примера приведём стандарт <a href="https://html.spec.whatwg.org/multipage/">HTML Living Standard</a>. Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.</p>
+В качестве примера приведём стандарт [HTML Living Standard](https://html.spec.whatwg.org/multipage/). Он описывает как HTML (все элементы HTML, связанные с ними API и остальные близкие технологии) должны быть реализованы.
 
-<p dir="ltr">Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: <a href="https://whatwg.org/">WHATWG</a> (ответственны за модернизацию языка html), <a href="https://www.ecma-international.org/">ECMA</a> (выпускают стандарты языка ECMAScript, на котором построен JavaScript), <a href="https://www.khronos.org/">Khronos</a> (создают технологии для 3D графики, например WebGL).</p>
+Веб-стандарты создаются организациями стандартов — институтами, которые приглашают группы людей из различных компаний для согласования того, как технологии должны применяться наиболее эффективным образом в рассматриваемых случаях. Самая известная организация веб-стандартов - W3C. Существуют и другие: [WHATWG](https://whatwg.org/) (ответственны за модернизацию языка html), [ECMA](https://www.ecma-international.org/) (выпускают стандарты языка ECMAScript, на котором построен JavaScript), [Khronos](https://www.khronos.org/) (создают технологии для 3D графики, например WebGL).
 
-<h3 dir="ltr" id="Open_standards">"Open" standards</h3>
+### "Open" standards
 
-<p dir="ltr">One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.</p>
+One of the key aspects of web standards, which TimBL and the W3C agreed on from the start, is that the web (and web technologies) should be free to both contribute and use, and not encumbered by patents/licensing. Therefore anyone can write the code to build a website for free, and anyone can contribute to the standards creation process, where the specs are written.
 
-<p dir="ltr">Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.</p>
+Because web technologies are created openly, in collaboration between many different companies, it means that no one company gets to control them, which is a really good thing. You wouldn't want a single company suddenly deciding to put the entire web behind a paywall, or releasing a new version of HTML that everyone has to buy to continue making web sites, or worse still, just deciding they aren't interested any more and just turning it off.
 
-<p dir="ltr">This allows the web to remain a freely-available public resource.</p>
+This allows the web to remain a freely-available public resource.
 
-<h3 dir="ltr" id="Не_разорви_сеть">Не разорви сеть</h3>
+### Не разорви сеть
 
-<p dir="ltr">Популярная в области веб-стандартов фраза гласит: "не разорви сеть". Это означает, что каждая новая веб-технология должна быть совместима со всеми предыдущими технологиями (поэтому старые сайты до сих пор работают), и со всеми последующими (разрабатываемые в последствии технологии, в свою очередь, должны быть совместимы с имеющимися). В процессе изучения представленного здесь материала вы начнёте понимать каким образом это реализуется.</p>
+Популярная в области веб-стандартов фраза гласит: "не разорви сеть". Это означает, что каждая новая веб-технология должна быть совместима со всеми предыдущими технологиями (поэтому старые сайты до сих пор работают), и со всеми последующими (разрабатываемые в последствии технологии, в свою очередь, должны быть совместимы с имеющимися). В процессе изучения представленного здесь материала вы начнёте понимать каким образом это реализуется.
 
-<h2 id="Being_a_web_developer_is_good">Being a web developer is good</h2>
+## Being a web developer is good
 
-<p>The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?</p>
+The web industry is a very attractive market to enter if you are looking for a job. Recent published figures say that there are currently around 19 million web developers in the world, and that figure is set more than double in the next decade. And at the same time, there is a skill shortage in the industry — so what better time to learn web development?
 
-<p>It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.</p>
+It isn't all fun and games however — building web sites is a more complicated proposition than it used to be, and you'll have to put some time in to studying all the different technologies you need to use, all the techniques and best practices you need to know, and all the typical patterns you'll be called upon to implement. It'll take you a few months to really start to get into it, and then you'll need to keep learning so that your knowledge stays up-to-date with all the new tools and features that appear on the web platform, and keep practicing and refining your craft.
 
-<p><em>The only constant is change.</em></p>
+_The only constant is change._
 
-<p>Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.</p>
+Does this sound hard? Don't worry — we aim to give you everything you need to know to get started, and things will get easier. Once you embrace the constant change and uncertainty of the web, you'll start to enjoy yourself. As a part of the web community, you'll have an entire web of contacts and useful material to help you, and you'll start to enjoy the creative possibilities it brings.
 
-<p>You're a digital creative now. Enjoy the experience, and the potential for earning a living.</p>
+You're a digital creative now. Enjoy the experience, and the potential for earning a living.
 
-<h2 id="Overview_of_modern_web_technologies">Overview of modern web technologies</h2>
+## Overview of modern web technologies
 
-<p>There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article <a href="/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">How the web works</a>.</p>
+There are a number of technologies to learn if you want to be a front-end web developer. In this section we will describe them briefly. For a more detailed explanation of how some of them work together, read our article [How the web works](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works).
 
-<h3 id="Browsers">Browsers</h3>
+### Browsers
 
-<p>You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include <a href="https://www.mozilla.org/en-US/firefox/">Firefox</a>, <a href="https://www.google.com/chrome/">Chrome</a>, <a href="https://www.opera.com/">Opera</a>, <a href="https://www.apple.com/safari/">Safari</a>, and <a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Edge</a>.</p>
+You are probably reading these words inside a web browser in this very moment (unless you've printed it out, or are using assistive technology, such as a screenreader to read it out to you). Web browsers are the software programs people use to consume the web, and include [Firefox](https://www.mozilla.org/en-US/firefox/), [Chrome](https://www.google.com/chrome/), [Opera](https://www.opera.com/), [Safari](https://www.apple.com/safari/), and [Edge](https://www.microsoft.com/en-us/windows/microsoft-edge).
 
-<h3 id="HTTP">HTTP</h3>
+### HTTP
 
-<p>Hypertext Transfer Protocol, or <a href="/en-US/docs/Web/HTTP/Basics_of_HTTP">HTTP</a>, is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like</p>
+Hypertext Transfer Protocol, or [HTTP](/ru/docs/Web/HTTP/Basics_of_HTTP), is a messaging protocol that allows web browsers to communicate with web servers (where web sites are stored). A typical conversation goes something like
 
-<pre>"Hello web server. Can you give me the files I need to render bbc.co.uk"?
+```
+"Hello web server. Can you give me the files I need to render bbc.co.uk"?
 
 "Sure thing web browser — here you go"
 
-[Downloads files and renders web page]</pre>
+[Downloads files and renders web page]
+```
 
-<p>The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.</p>
+The actual syntax for HTTP messages (called requests and responses) is not that human-readable, but this gives you the basic idea.
 
-<h3 id="HTML_CSS_and_JavaScript">HTML, CSS, and JavaScript</h3>
+### HTML, CSS, and JavaScript
 
-<p><a href="/en-US/docs/Web/HTML">HTML</a>, <a href="/en-US/docs/Web/CSS">CSS</a>, and <a href="/en-US/docs/Web/JavaScript">JavaScript</a> are the main three technologies you'll use to build a website:</p>
+[HTML](/ru/docs/Web/HTML), [CSS](/ru/docs/Web/CSS), and [JavaScript](/ru/docs/Web/JavaScript) are the main three technologies you'll use to build a website:
 
-<ul>
- <li>
-  <p>Hypertext markup language, or <strong>HTML</strong>, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:</p>
+- Hypertext markup language, or **HTML**, is a markup language consisting of different elements you can wrap (mark up) content in to give it meaning (semantics) and structure. Simple HTML looks like this:
 
-  <pre class="brush: html">&lt;h1&gt;This is a top-level heading&lt;/h1&gt;
+  ```html
+  <h1>This is a top-level heading</h1>
 
-&lt;p&gt;This is a paragraph of text.&lt;/p&gt;
+  <p>This is a paragraph of text.</p>
 
-&lt;img src="cat.jpg" alt="A picture of my cat"&gt;</pre>
+  <img src="cat.jpg" alt="A picture of my cat">
+  ```
 
-  <p>If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.</p>
- </li>
- <li>
-  <p>Cascading Style Sheets (<strong>CSS</strong>) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:</p>
+  If we adopted a house-building analogy, HTML would be like the foundations and walls of the house, which give it structure and hold it together.
 
-  <pre class="brush: css">p  {
-  color: red;
-}</pre>
+- Cascading Style Sheets (**CSS**) is a rule-based language used to apply styles to your HTML, for example setting text and background colors, adding borders, animating things, or laying out a page in a certain way. As a simple example, the following code would turn our HTML paragraph red:
 
-  <p>In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.</p>
- </li>
- <li>
-  <p><strong>JavaScript</strong> is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:</p>
+  ```css
+  p  {
+    color: red;
+  }
+  ```
 
-  <pre class="brush: js">let pElem = document.querySelector('p');
-pElem.textContent =  'We changed the text!';</pre>
+  In the house analogy, CSS is like the paint, wallpaper, carpets and paintings you'd use to make the house look nice.
 
-  <p>In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality</p>
- </li>
-</ul>
+- **JavaScript** is the programming language we use to add interactivity to web sites, from dynamic style switching, to fetching updates from the server, right through to complex 3D graphics. The following simple JavaScript will store a reference to our paragraph in memory and change the text inside it:
 
-<h3 id="Tooling">Tooling</h3>
+  ```js
+  let pElem = document.querySelector('p');
+  pElem.textContent =  'We changed the text!';
+  ```
 
-<p>Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:</p>
+  In the house analogy, JavaScript is like the cooker, TV, Microwave, or hairdryer — the things that give your house useful functionality
 
-<ul>
- <li>The <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools</a> inside modern browsers that can be used to debug your code.</li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Testing tools</a> that can be used to run tests to show whether your code is behaving as you intended it to.</li>
- <li>Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.</li>
- <li>So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.</li>
- <li>Minifiers, which remove all the whitespace from your code files to make it so that they  are smaller and therefore download from the server more quickly.</li>
-</ul>
+### Tooling
 
-<h3 id="Server-side_languages_and_frameworks">Server-side languages and frameworks</h3>
+Once you've learned the "raw" technologies that can be used to build web pages (such as HTML, CSS, and JavaScript), you'll soon start to come across various tools that can be used to make your work easier or more efficient. Examples include:
 
-<p>HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.</p>
+- The [developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) inside modern browsers that can be used to debug your code.
+- [Testing tools](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing) that can be used to run tests to show whether your code is behaving as you intended it to.
+- Libraries and frameworks built on top of JavaScript that allow you to build certain types of web site much more quickly and effectively.
+- So-called "Linters", which take a set of rules, look at your code, and highlight places where you haven't followed the rules properly.
+- Minifiers, which remove all the whitespace from your code files to make it so that they are smaller and therefore download from the server more quickly.
 
-<p>There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.</p>
+### Server-side languages and frameworks
 
-<p>Example server-side languages include ASP.NET, Python, PHP, and NodeJS.</p>
+HTML, CSS, and JavaScript are front-end (or client-side) languages, which means they are run by the browser to produce a website front-end that your users can use.
 
-<h2 id="Web_best_practices">Web best practices</h2>
+There are another class of languages called back-end (or server-side) languages, meaning that they are run on the server before the result is then sent to the browser to be displayed. A typical use for a server-side language is to get some data out of a database and generate some HTML to contain the data, before then sending the HTML over to the browser to display it to the user.
 
-<p>We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.</p>
+Example server-side languages include ASP.NET, Python, PHP, and NodeJS.
 
-<p>When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:</p>
+## Web best practices
 
-<ul>
- <li>User 1 might be looking at it on an iPhone, with a small, narrow screen.</li>
- <li>User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.</li>
- <li>User 3 might be blind, and using a screenreader to read the web page out to them.</li>
- <li>User 4 might be using a really old desktop machine that can't run modern browsers.</li>
-</ul>
+We have briefly talked about the technologies that you'll use to build websites. Now let's discuss the best practices you should employ to make sure you are using those technologies in the best way that you can.
 
-<p>Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.</p>
+When doing web development, the main cause of uncertainty comes from the fact that you don't know what combination of technology each user will use to view your web site:
 
-<p>You'll come across the below concepts at some point in your studies.</p>
+- User 1 might be looking at it on an iPhone, with a small, narrow screen.
+- User 2 might be looking at it on a Windows laptop with a widescreen monitor attached to it.
+- User 3 might be blind, and using a screenreader to read the web page out to them.
+- User 4 might be using a really old desktop machine that can't run modern browsers.
 
-<ul>
- <li><strong>Cross-browser compatibility</strong> is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.</li>
- <li><strong>Responsive web design</strong> is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.</li>
- <li><strong>Performance</strong> means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.</li>
- <li><strong>Accessibility</strong> means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?</li>
- <li><strong>Internationalization</strong> means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).</li>
- <li><strong>Privacy &amp; Security</strong>. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.</li>
-</ul>
+Because you don't know exactly what your users will use, you need to design defensively — make your web site as flexible as possible, so that all of the above users can make use of it, even if they might not all get the same experience. In short, we are trying to make the web work for all, as much as possible.
 
-<h2 dir="ltr" id="See_also">See also</h2>
+You'll come across the below concepts at some point in your studies.
 
-<ul dir="ltr">
- <li><a href="https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web">History of the World Wide Web</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/How_does_the_Internet_work">How does the internet work?</a></li>
-</ul>
+- **Cross-browser compatibility** is the practice of trying to make sure your webpage works across as many devices as possible. This includes using technologies that all the browsers support, delivering better experiences to browsers that can handle them (progressive enhancement), and/or writing code so that it falls back to a simpler but still usable experience in older browsers (graceful degradation). It also involves a lot of testing to see if anything fails in certain browsers, and then more work to fix those failures.
+- **Responsive web design** is the practice of making your functionality and layouts flexible so they can automatically adapt to different browsers. An obvious example is a website that is laid out one way in a widescreen browser on the desktop, but displays as a more compact, single-column layout on mobile phone browsers. Try adjusting the width of your browser window now, and see what happens.
+- **Performance** means getting web sites to load as quickly as possible, but also making them intuitive and easy to use so that users don't get frustrated and go somewhere else.
+- **Accessibility** means making your websites usable by as many different kinds of people as possible (related concepts are diversity and inclusion, and inclusive design). This includes people with visual impairments, hearing impairments, cognitive disabilities, or physical disabilities. It also goes beyond people with disabilities — how about young or old people, people from different cultures, people using mobile devices, or people with unreliable or slow network connections?
+- **Internationalization** means making websites usable by people from different cultures, who speak different languages to your own. There are technical considerations here (such as altering your layout so that it still works OK for right-to-left, or even vertical languages), and human ones (such as using simple, non-slang language so that people who have your language as their second or third language are more likely to understand your text).
+- **Privacy & Security**. These two concepts are related but different. Privacy refers to allowing people to go about their business privately and not spying on them or collecting more of their data than you absolutely need to. Security refers to constructing your website in a secure way so that malicious users cannot steal information contained on it from you or your users.
+
+## See also
+
+- [History of the World Wide Web](https://en.wikipedia.org/wiki/History_of_the_World_Wide_Web)
+- [How does the internet work?](/ru/docs/Learn/Common_questions/How_does_the_Internet_work)
diff --git a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
index 55999ee58f2e99..7a31e118d6afac 100644
--- a/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
+++ b/files/ru/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md
@@ -16,108 +16,84 @@ tags:
   - Шрифты
 translation_of: Learn/Getting_started_with_the_web/What_will_your_website_look_like
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
 
-<div>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</div>
+_Каким должен быть ваш веб-сайт?_ обсудите план и дизайн веб-сайта, _прежде_ чем приступить к написанию кода, в том числе "Какую информацию будет содержать мой веб-сайт?" "Какие шрифты и цвета я хочу использовать?" "Что будет делать мой сайт?"
 
-<div class="summary">
-<p><em>Каким должен быть ваш веб-сайт?</em> обсудите план и дизайн веб-сайта, <em>прежде</em> чем приступить к написанию кода, в том числе "Какую информацию будет содержать мой веб-сайт?" "Какие шрифты и цвета я хочу использовать?" "Что будет делать мой сайт?"</p>
-</div>
+## Перво-наперво: планирование
 
-<h2 id="Перво-наперво_планирование">Перво-наперво: планирование</h2>
+Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнём с создания простой веб-страницы, содержащую заголовок, изображение и несколько абзацев.
 
-<p>Перед тем как делать что-то, вам нужны идеи. Что ваш веб-сайт должен фактически делать? По существу, ваш веб-сайт может делать все, что угодно, но для вашей первой попытки, вы должны придерживаться простых вещей. Мы начнём с создания простой веб-страницы, содержащую заголовок, изображение и несколько абзацев.</p>
+Для начала, вам будет нужно ответить на следующие вопросы:
 
-<p>Для начала, вам будет нужно ответить на следующие вопросы:</p>
+1.  **О чем ваш веб-сайт?** вам нравятся собаки, Нью-Йорк или Pacman?
+2.  **Какую информацию вы предоставляете о предмете?** Напишите заголовок и несколько абзацев, и подумайте над изображениями, которые вы хотите показать на своей странице.
+3.  **Как будет выглядеть ваш веб-сайт**, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?
 
-<ol>
- <li><strong>О чем ваш веб-сайт?</strong> вам нравятся собаки, Нью-Йорк или Pacman?</li>
- <li><strong>Какую информацию вы предоставляете о предмете?</strong> Напишите заголовок и несколько абзацев, и подумайте над изображениями, которые вы хотите показать на своей странице.</li>
- <li><strong>Как будет выглядеть ваш веб-сайт</strong>, в простых терминах высокого уровня. Какой цвет фона? Какой вид шрифта будет уместен: деловой, мультяшный, жирный и кричащий или тонкий?</li>
-</ol>
+> **Примечание:** Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в [Руководство Firefox OS](https://www.mozilla.org/en-US/styleguide/products/firefox-os/).
 
-<div class="note">
-<p><strong>Примечание</strong>: Комплексные проекты нуждаются в детализированных руководствах, которые включают все детали цветов, шрифтов, расстояния между элементами на странице, соответствующий стиль письма и так далее. Их иногда называют руководствами по проектированию или бренд-бук, вы можете увидеть пример в <a href="https://www.mozilla.org/en-US/styleguide/products/firefox-os/">Руководство Firefox OS</a>.</p>
-</div>
+## Сделайте набросок вашего дизайна
 
-<h2 id="Сделайте_набросок_вашего_дизайна">Сделайте набросок вашего дизайна</h2>
+Теперь возьмите ручку и бумагу и сделайте примерный набросок того, как вы хотите, чтобы выглядел ваш сайт. Для вашей первой веб-страницы должен получиться небольшой набросок, и вы должны взять это в привычку. Это действительно помогает, и вам не нужно быть Ван Гогом!
 
-<p>Теперь возьмите ручку и бумагу и сделайте примерный набросок того, как вы хотите, чтобы выглядел ваш сайт. Для вашей первой веб-страницы должен получиться небольшой набросок, и вы должны взять это в привычку. Это действительно помогает, и вам не нужно быть Ван Гогом!</p>
+![](https://mdn.mozillademos.org/files/9239/website-drawing-scan.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/9239/website-drawing-scan.png" style="display: block; height: 460px; margin: 0px auto; width: 640px;"></p>
+> **Примечание:** Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.
+>
+> Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.
 
-<div class="note">
-<p><strong>Примечание</strong>: Даже в реальных, сложных веб-сайтах, команда разработчиков обычно начинает с наброска на бумаге и потом строит цифровые макеты используя графические редакторы или веб-технологии.</p>
+## Выберите свои активы
 
-<p>Веб-команда часто включает в себя пару графических дизайнеров и дизайнера с опытом взаимодействия (user-experience (UX) designer). Графические дизайнеры, очевидно, работают вместе над визуализацией веб-сайта. UX дизайнеры играют более абстрактную роль, обращаясь к тому как пользователи будут пользоваться и взаимодействовать с веб-сайтом.</p>
-</div>
+На данном этапе хорошо бы начать собирать контент, который в конечном итоге появится на вашей веб-странице.
 
-<h2 id="Выберите_свои_активы">Выберите свои активы</h2>
+### Текст
 
-<p>На данном этапе хорошо бы начать собирать контент, который в конечном итоге появится на вашей веб-странице.</p>
+У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.
 
-<h3 id="Текст">Текст</h3>
+### Цветовая схема
 
-<p>У вас должен быть текст, разбитый на заголовки и параграфы. Придерживайтесь этого правила.</p>
+Чтобы выбрать цвет, перейдите в [инструмент выбора цвета](/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool) и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, `#660066`. Это называется _шестнадцатеричный код (hex(adecimal) code)_ и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.
 
-<h3 id="Цветовая_схема">Цветовая схема</h3>
+![](https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png)
 
-<p>Чтобы выбрать цвет, перейдите в <a href="/ru/docs/Web/CSS/CSS_Colors/Color_picker_tool">инструмент выбора цвета</a> и выберите цвет, который вам нравится. Когда вы щёлкните по цвету, вы увидите странный код из шести цифр, например, <code>#660066</code>. Это называется <em>шестнадцатеричный код (hex(adecimal) code)</em> и он представляет ваш цвет. Скопируйте это код куда-нибудь прямо сейчас.</p>
+### Изображения
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8975/Screenshot%20from%202014-11-03%2017:40:49.png" style="height: 262px; width: 448px;"></p>
+Чтобы выбрать изображение, перейдите в [Google Картинки](https://www.google.com/imghp?gws_rd=ssl) и найдите что-нибудь подходящее.
 
-<h3 id="Изображения">Изображения</h3>
+1.  Когда вы найдёте изображение, которое хотели, щёлкните по нему.
+2.  Нажмите кнопку _В полном размере (View image)_.
+3.  На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (_Save Image As...)_, и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.
 
-<p>Чтобы выбрать изображение, перейдите в <a href="https://www.google.com/imghp?gws_rd=ssl">Google Картинки</a> и найдите что-нибудь подходящее.</p>
+![](https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png)
 
-<ol>
- <li>Когда вы найдёте изображение, которое хотели, щёлкните по нему.</li>
- <li>Нажмите кнопку <em>В полном размере (View image)</em>.</li>
- <li>На следующей странице, правым щелчком мыши на изображении (Ctrl + клик на Mac), выберите Сохранить изображение как... (<em>Save Image As...)</em>, и выберите место для сохранения вашего изображения. В качестве альтернативы, скопируйте адрес изображения из адресной строки браузера для последующего использования.</li>
-</ol>
+![](https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8985/Screenshot%20from%202014-11-04%2015:09:21.png" style="height: 293px; width: 420px;"></p>
+> **Примечание:** Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на **Инструменты поиска (Search tools)**, затем на 2) **Права на использование (Usage rights)**:
+>
+> ![](https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8989/Screenshot%20from%202014-11-04%2015:20:48.png" style="height: 292px; width: 340px;"></p>
+### Шрифт
 
-<div class="note">
-<p><strong>Примечание</strong>: Большинство изображений в Интернете, использованных в Google Картинках имеют авторские права. Для снижения вероятности нарушения авторских прав, используйте фильтр лицензии Google. Для этого: 1) кликните на <strong>Инструменты поиска (Search tools)</strong>, затем на 2) <strong>Права на использование (Usage rights)</strong>:</p>
+Чтобы выбрать шрифт:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/8981/Screenshot%20from%202014-11-04%2014:27:45.png" style="height: 195px; width: 587px;"></p>
-</div>
+1.  Перейдите на [Google Fonts](http://www.google.com/fonts) и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.
+2.  Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать.
+3.  Щёлкните по кнопке "\* Family Selected" на панели в нижней части страницы. ("\*" зависит от того, сколько шрифтов вы выбрали)
+4.  В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.
 
-<h3 id="Шрифт">Шрифт</h3>
+![](https://mdn.mozillademos.org/files/13871/font1.png)
 
-<p>Чтобы выбрать шрифт:</p>
+![](https://mdn.mozillademos.org/files/13873/font2.png)
 
-<ol>
- <li>Перейдите на <a href="http://www.google.com/fonts">Google Fonts</a> и прокрутите список вниз, пока не найдёте шрифт, который вам понравится. Вы также можете использовать элементы управления справа для дальнейшей фильтрации результатов.</li>
- <li>Щёлкните по кнопке "плюс" рядом со шрифтом, который вы хотите выбрать.</li>
- <li>Щёлкните по кнопке "* Family Selected" на панели в нижней части страницы. ("*" зависит от того, сколько шрифтов вы выбрали)</li>
- <li>В всплывающем окне вы можете увидеть и скопировать строки кода, которые предоставляет Google, чтобы сохранить их позже в вашем текстовом редакторе.</li>
-</ol>
+{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13871/font1.png"></p>
+## В этом модуле
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13873/font2.png"></p>
-
-<p>{{PreviousMenuNext("Learn/Getting_started_with_the_web/Installing_basic_software", "Learn/Getting_started_with_the_web/Dealing_with_files", "Learn/Getting_started_with_the_web")}}</p>
-
-<p> </p>
-
-<p> </p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li id="Installing_basic_software"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a></li>
- <li id="What_will_your_website_look_like"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like">Каким должен быть ваш веб-сайт?</a></li>
- <li id="Dealing_with_files"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a></li>
- <li id="HTML_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">Основы HTML</a></li>
- <li id="CSS_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/CSS_basics">Основы CSS</a></li>
- <li id="JavaScript_basics"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">Основы JavaScript</a></li>
- <li id="Publishing_your_website"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website">Публикация вашего веб-сайта</a></li>
- <li id="How_the_web_works"><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает Веб</a></li>
-</ul>
-
-<p> </p>
+- [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)
+- [Каким должен быть ваш веб-сайт?](/ru/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_like)
+- [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files)
+- [Основы HTML](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics)
+- [Основы CSS](/ru/docs/Learn/Getting_started_with_the_web/CSS_basics)
+- [Основы JavaScript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics)
+- [Публикация вашего веб-сайта](/ru/docs/Learn/Getting_started_with_the_web/Publishing_your_website)
+- [Как работает Веб](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
diff --git a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
index e4a29052f074e2..5068e276ace0b6 100644
--- a/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
+++ b/files/ru/learn/html/howto/author_fast-loading_html_pages/index.md
@@ -4,196 +4,176 @@ slug: Learn/HTML/Howto/Author_fast-loading_HTML_pages
 translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages
 original_slug: Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages
 ---
-<p>Эти советы основаны на общих знаниях и экспериментах.</p>
+Эти советы основаны на общих знаниях и экспериментах.
 
-<p>Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости</p>
+Оптимизированная веб-страница не только обеспечивает более отзывчивый сайт для ваших посетителей, но также снижает нагрузку на ваши веб-серверы и интернет-соединения. Это может иметь решающее значение для сайтов с большим объёмом или сайтов, которые имеют всплеск трафика из-за необычных обстоятельств, таких как последние новости
 
-<p>Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.</p>
+Оптимизация производительности загрузки страницы нужна не только для контента, который будет просматриваться узкополосным модемом или посетителями мобильных устройств. Это так же важно для широкополосного контента и может привести к значительным улучшениям даже для ваших посетителей с самыми быстрыми подключениями.
 
-<h2 id="Tips">Советы</h2>
+## Советы
 
-<h3 id="Reduce_page_weight">Уменьшайте вес страницы</h3>
+### Уменьшайте вес страницы
 
-<p>Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.</p>
+Веб-страницы - безусловно, самый важный фактор в производительности загрузки страницы.
 
-<p>Уменьшение веса страницы за счёт устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.</p>
+Уменьшение веса страницы за счёт устранения ненужных пробелов и комментариев, широко известна как минимизация, и перемещая встроенный скрипт и CSS во внешние файлы, можно улучшить производительность загрузки с минимальными потребностями в других изменениях в структуре страницы.
 
-<p>Такие инструменты, как <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии</p>
+Такие инструменты, как [HTML Tidy](http://tidy.sourceforge.net/) , могут автоматически убирать начальные пробелы и лишние пустые строки из допустимого источника HTML. Другие инструменты могут «сжимать» JavaScript, переформатируя источник или запутывая источник и заменяя длинные идентификаторы на более короткие версии
 
-<h3 id="Minimize_the_number_of_files">Минимизируйте количество файлов</h3>
+### Минимизируйте количество файлов
 
-<p>Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.</p>
+Уменьшение количества файлов, на которые есть ссылки на веб-странице, уменьшает количество HTTP-соединений, необходимых для загрузки страницы, тем самым сокращая время отправки этих запросов и получения их ответов.
 
-<p>В зависимости от настроек кеша браузера он может отправить запрос с заголовком <code>If-Modified-Since</code> для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.</p>
+В зависимости от настроек кеша браузера он может отправить запрос с заголовком `If-Modified-Since` для каждого ссылочного файла, спрашивая, был ли файл изменён с момента последней загрузки. Слишком много времени, затрачиваемое на запрос времени последнего изменения указанных файлов, может задержать первоначальное отображение веб-страницы, так как браузер должен проверить время изменения каждого из этих файлов перед отображением страницы.
 
-<p>Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кеширование одного изображения может помочь сократить время загрузки страницы.</p>
+Если вы часто используете фоновые изображения в своём CSS, вы можете уменьшить количество запросов на поиск HTTP, объединив изображения в одно, называемое спрайтом изображения. Затем вы просто применяете одно и то же изображение каждый раз, когда вам это нужно для фона, и соответственно корректируете координаты x / y. Этот метод лучше всего работает с элементами, которые будут иметь ограниченные размеры, и не будет работать для каждого использования фонового изображения. Тем не менее, меньшее количество HTTP-запросов и кеширование одного изображения может помочь сократить время загрузки страницы.
 
-<h3 id="Используйте_сеть_доставки_(и_дистрибуции)_содержимого_(Content_Delivery_Network_(CDN))"><strong>Используйте сеть доставки (и дистрибуции) содержимого (</strong>Content Delivery Network (CDN)<strong>)</strong></h3>
+### **Используйте сеть доставки (и дистрибуции) содержимого (**Content Delivery Network (CDN)**)**
 
-<p>Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.</p>
+Для целей этой статьи CDN - это средство уменьшения физического расстояния между вашим сервером и вашим посетителем. По мере увеличения расстояния между вашим сервером и посетителем время загрузки будет увеличиваться. Предположим, ваш сервер веб-сайта находится в Соединённых Штатах и имеет посетителя из Индии; время загрузки страницы будет намного выше для индийского посетителя по сравнению с посетителем из США.
 
-<p>CDN - это географически распределённая сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кешированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку</p>
+CDN - это географически распределённая сеть серверов, которые работают вместе, чтобы сократить расстояние между пользователем и вашим сайтом. CDN хранят кешированные версии вашего веб-сайта и предоставляют их посетителям через ближайший к пользователю сетевой узел, тем самым снижая задержку
 
-<p>Дальнейшее чтение:</p>
+Дальнейшее чтение:
 
-<ul>
- <li><a href="https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html">Understanding CDNs</a></li>
-</ul>
+- [Understanding CDNs](https://www.incapsula.com/cdn-guide/what-is-cdn-how-it-works.html)
 
-<h3 id="Reduce_domain_lookups">Сократите поиск доменов</h3>
+### Сократите поиск доменов
 
-<p>Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.</p>
+Поскольку каждый отдельный домен требует времени для поиска DNS, время загрузки страницы будет расти вместе с количеством отдельных доменов, отображаемых в ссылках CSS, а также в JavaScript и изображениях.
 
-<p>Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.</p>
+Это не всегда может быть практичным; однако вы всегда должны позаботиться об использовании только минимально необходимого количества разных доменов на своих страницах.
 
-<h3 id="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>
+В частности, обратите внимание на заголовок `Last-Modified`. Это позволяет эффективно кешировать страницы; с помощью этого заголовка агенту пользователя передаётся информация о файле, который он хочет загрузить, например, когда он был последний раз изменён. Большинство веб-серверов автоматически добавляют заголовок `Last-Modified` к статическим страницам (напр. `.html`, `.css`), на основе даты последнего изменения, хранящейся в файловой системе. С динамическими страницами (напр. `.php`, `.aspx`), это, конечно, не может быть сделано, и заголовок не отправляется.
 
-<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>
+1.  [HTTP Conditional Get for RSS Hackers](http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers)
+2.  [HTTP 304: Not Modified](http://annevankesteren.nl/archives/2005/05/http-304)
+3.  [On HTTP Last-Modified and ETag](http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag)
 
-<h3 id="Optimally_order_the_components_of_the_page">Оптимально размещайте компоненты на странице</h3>
+### Оптимально размещайте компоненты на странице
 
-<p>Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает ещё более быстрый отклик для пользователя.</p>
+Сначала загрузите содержимое страницы вместе с любым CSS или JavaScript, которые могут потребоваться для его первоначального отображения, чтобы пользователь получил самый быстрый очевидный ответ во время загрузки страницы. Этот контент, как правило, представляет собой текст, и поэтому может получить выгоду от сжатия текста при передаче, что обеспечивает ещё более быстрый отклик для пользователя.
 
-<p>Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведёт к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.</p>
+Любые динамические функции, требующие полной загрузки страницы перед использованием, должны быть изначально отключены, а затем включены только после загрузки страницы. Это приведёт к загрузке JavaScript после содержимого страницы, что улучшит общий вид загрузки страницы.
 
-<h3 id="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>
+Встроенные сценарии могут быть дорогими для загрузки страницы, так как синтаксический анализатор должен предполагать, что встроенный сценарий может изменить структуру страницы во время анализа. Сокращение использования встроенных сценариев в целом и сокращение использования `document.write()` для вывода контента, в частности, может улучшить общую загрузку страницы. Используйте современные методы [AJAX](/ru/docs/AJAX "en-US/docs/AJAX") для управления содержимым страницы, а не устаревшие подходы, которые основаны на `document.write()`.
 
-<h3 id="Use_modern_CSS_and_valid_markup">Используйте современный CSS и корректную разметку</h3>
+### Используйте современный CSS и корректную разметку
 
-<p>Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.</p>
+Использование современного CSS уменьшает количество текста, может уменьшить потребность в (разделительных) изображениях с точки зрения макета и очень часто может заменить изображения стилизованного текста - это «стоит» намного дороже, чем эквивалентный текст и CSS.
 
-<p>Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).</p>
+Использование корректной разметки имеет следующие преимущества. Во-первых, браузерам не нужно выполнять исправление ошибок при разборе HTML (это помимо философской проблемы: разрешить ли изменение формата при вводе пользователем, а затем программно «исправить» или нормализовать его; или вместо этого обеспечить строгий формат ввода без допусков).
 
-<p>Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки</p>
+Кроме того, корректная разметка позволяет спокойно использовать другие инструменты, которые могут предварительно обрабатывать ваши веб-страницы. Например, [HTML Tidy](http://tidy.sourceforge.net/) может удалить пробелы и необязательные конечные теги; однако он откажется запускать страницу с серьёзными ошибками разметки
 
-<h3 id="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>
+Использование таблиц для вёрстки макетов устаревший метод, который не должен больше использоваться. Вместо этого для создания макетов нужно использовать \<a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats\</a>, \<a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">positioning\</a>, \<a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox\</a>, или \<a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">grids\</a>.
 
-<p>Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.</p>
+Таблицы по-прежнему считаются допустимой разметкой, но их следует использовать для отображения табличных данных. Чтобы браузер быстрее отображал вашу страницу, вам следует избегать вложения таблиц.
 
-<p>Вместо глубоко вложенных таблиц, как в:</p>
+Вместо глубоко вложенных таблиц, как в:
 
-<pre>&lt;TABLE&gt;
-  &lt;TABLE&gt;
-    &lt;TABLE&gt;
+```
+<TABLE>
+  <TABLE>
+    <TABLE>
           ...
-    &lt;/TABLE&gt;
-  &lt;/TABLE&gt;
-&lt;/TABLE&gt;</pre>
+    </TABLE>
+  </TABLE>
+</TABLE>
+```
 
-<p>используйте невложенные таблицы как показано (или div'ы)</p>
+используйте невложенные таблицы как показано (или div'ы)
 
-<pre>&lt;TABLE&gt;...&lt;/TABLE&gt;
-&lt;TABLE&gt;...&lt;/TABLE&gt;
-&lt;TABLE&gt;...&lt;/TABLE&gt;
-</pre>
+```
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+<TABLE>...</TABLE>
+```
 
-<p>Смотрите также: <a class="external" href="http://www.w3.org/TR/css3-multicol/">CSS3 Multi-column Layout Spec</a> и <a class="external" href="http://www.w3.org/TR/css3-flexbox/">CSS3 Flexible Box Layout</a></p>
+Смотрите также: [CSS3 Multi-column Layout Spec](http://www.w3.org/TR/css3-multicol/) и [CSS3 Flexible Box Layout](http://www.w3.org/TR/css3-flexbox/)
 
-<h3 id="Сокращайте_и_сжимайте_активы_SVG">Сокращайте и сжимайте активы SVG</h3>
+### Сокращайте и сжимайте активы SVG
 
-<p>SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG</p>
+SVG, создаваемый большинством графических приложений, часто содержит ненужные метаданные, которые можно удалить. Настройте свои сервера, примените сжатие gzip для ресурсов SVG
 
-<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>
+Большие изображения приводят к тому, что загрузка страницы занимает больше времени. Рассмотрите возможность сжатия ваших изображений перед добавлением их на свою страницу. Есть онлайн-инструменты, такие как \<a href="https\://compressjpeg.com/">Compress Jpeg\</a>, \<a href="https\://tinypng.com">Tiny PNG\</a> и многие другие, доступны онлайн. Вы можете использовать офлайн-инструменты, такие как фотошоп и другие.
 
-<h3 id="Specify_sizes_for_images_and_tables">Указывайте размеры для изображений и таблиц </h3>
+### Указывайте размеры для изображений и таблиц
 
-<p>Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине <code>height</code> и <code>width</code>  должны быть указаны для изображений всегда, когда это возможно.</p>
+Если браузер может немедленно определить высоту и/или ширину ваших изображений и таблиц, он сможет отображать веб-страницу без необходимости переформатировать содержимое. Это не только ускоряет отображение страницы, но и предотвращает раздражающие изменения в макете страницы после завершения загрузки страницы. По этой причине `height` и `width` должны быть указаны для изображений всегда, когда это возможно.
 
-<p>Таблицы должны использовать CSS селектор: комбинация свойств</p>
+Таблицы должны использовать CSS селектор: комбинация свойств
 
-<pre>  table-layout: fixed;
-</pre>
+```
+  table-layout: fixed;
+```
 
-<p>и должны указывать ширину колонок используя HTML теги <code>COL</code> и <code>COLGROUP</code></p>
+и должны указывать ширину колонок используя HTML теги `COL` и `COLGROUP`
 
-<h3 id="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>
+В идеале ваши базовые минимальные требования должны основываться на рассмотрении современных браузеров, поддерживающих соответствующие стандарты.Это может включать: Firefox 3.6+ на любой платформе, Internet Explorer 8.0+ на Windows, Opera 10+ на Windows, и Safari 4 на Mac OS X.
 
-<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.
 
-<h3 id="Используйте_async_и_defer_если_это_возможно">Используйте async и defer, если это возможно</h3>
+### Используйте async и defer, если это возможно
 
-<p>Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.</p>
+Сделайте сценарии JavaScript такими, чтобы они были совместимы как с async, так и с defer, и по возможности используйте async, особенно если у вас есть несколько тегов script.
 
-<p>При этом страница может перестать отображаться, пока JavaScript все ещё загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.</p>
+При этом страница может перестать отображаться, пока JavaScript все ещё загружается. В противном случае браузер не будет отображать ничего после тегов сценария, которые не имеют этих атрибутов.
 
-<p>Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.</p>
+Примечание. Несмотря на то, что эти атрибуты очень помогают при первой загрузке страницы, вы должны использовать их, но не предполагать, что они будут работать во всех браузерах. Если вы уже следуете всем рекомендациям JavaScript, вам не нужно менять код.
 
-<h2 id="Example_page_structure">Пример структуры страницы</h2>
+## Пример структуры страницы
 
-<p>· <code>HTML</code></p>
+· `HTML`
 
-<ul>
-  <li><code>HEAD</code></li>
-  <li>
-    <ul>
-      <li>
-        <p><code>LINK</code> ...</p>
-        <p>CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.</p>
-      </li>
-    </ul>
-  </li>
-  <li>
-    <ul>
-      <li>
-        <p><code>SCRIPT</code> ...</p>
-        <p>Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы</p>
-        <p>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.</p>
-      </li>
-    </ul>
-  </li>
-  <li><code>BODY</code></li>
-  <li>Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.</li>
-  <li>
-    <ul>
-      <li>
-        <p><code>SCRIPT</code> ...</p>
-        <p>Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.</p>
-        <p>Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания</p>
-        <p>Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.</p>
-      </li>
-    </ul>
-  </li>
-</ul>
+- `HEAD`
+- - `LINK` ...
 
-<h2 id="Related_Links">Ссылки по теме</h2>
+    CSS файлы необходимы для отображения веб-страницы. Минимизируйте количество файлов для производительности, сохраняя несвязанные CSS в отдельных файлах для обслуживания.
 
-<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">Best Practices for Speeding Up Your Web Site</a> (Yahoo!)</li>
- <li>Инструменты для анализа и оптимизации производительности: <a href="https://developers.google.com/speed/pagespeed/">Google PageSpeed Tools</a></li>
-</ul>
+- - `SCRIPT` ...
 
-<div class="originaldocinfo">
-<h2 id="Original_Document_Information">Original Document Information</h2>
+    Файлы JavaScript для функций, необходимых при загрузке страницы, но не для любого DHTML, который может работать только после загрузки страницы
 
-<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>
+    Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания.
 
-<p> </p>
+- `BODY`
+- Видимое пользователем содержимое страницы небольшими порциями (tables / divs) что можно отобразить, не дожидаясь загрузки полной страницы.
+- - `SCRIPT` ...
+
+    Любые сценарии, которые будут использоваться для выполнения DHTML. Сценарий DHTML обычно может запускаться только после полной загрузки страницы и инициализации всех необходимых объектов. Нет необходимости загружать эти скрипты перед содержимым страницы. Это только замедляет первоначальный вид загрузки страницы.
+
+    Минимизируйте количество файлов для повышения производительности, сохраняя несвязанный JavaScript в отдельных файлах для обслуживания
+
+    Если какие-либо изображения используются для эффектов ролловера, вам следует предварительно загрузить их здесь после загрузки содержимого страницы.
+
+## Ссылки по теме
+
+- Книга: ["Speed Up Your Site" by Andy King](http://www.websiteoptimization.com/)
+- Отличная и очень содержательная статья [Best Practices for Speeding Up Your Web Site](http://developer.yahoo.com/performance/rules.html) (Yahoo!)
+- Инструменты для анализа и оптимизации производительности: [Google PageSpeed Tools](https://developers.google.com/speed/pagespeed/)
+
+## Original Document Information
+
+- Author(s): Bob Clary, Technology Evangelist, Netscape Communications
+- Last Updated Date: Published 04 Apr 2003
+- Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.
+- Note: This reprinted article was originally part of the DevEdge site.
diff --git a/files/ru/learn/html/howto/index.md b/files/ru/learn/html/howto/index.md
index 026a4b71b5dbb5..551ccd2d969a60 100644
--- a/files/ru/learn/html/howto/index.md
+++ b/files/ru/learn/html/howto/index.md
@@ -9,145 +9,104 @@ tags:
 translation_of: Learn/HTML/Howto
 original_slug: Learn/HTML/Рецепты
 ---
-<p class="summary">Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.</p>
+Следующие ссылки указывают на решения общих повседневных проблем, которые вам нужно решить с помощью HTML.
 
-<div class="column-container">
-<div class="column-half">
-<h3 id="Основы_структурирования">Основы структурирования</h3>
+### Основы структурирования
 
-<p>Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.</p>
+Основное применение HTML - это структура документа. Если вы новичок в HTML, вы должны начать с этого.
 
-<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>
+- [Как создать простой HTML документ](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document)
+- [Как разделять веб-страницы на логические блоки](/ru/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections)
+- [Как задавать структуру заголовков и параграфов](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs)
 
-<h3 id="Основы_организации_гипертекста">Основы организации гипертекста</h3>
+### Основы организации гипертекста
 
-<p>HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе.</p>
+HTML специализируется на предоставлении семантической информации для документа, поэтому HTML отвечает на многие вопросы, которые могут у вас возникнуть о том, как лучше донести ваше сообщение в документе.
 
-<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>
+- [Как создать список элементов с помощью HTML](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists)
+- [Как подчеркнуть или выделить содержание](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
+- [Как подчеркнуть важность некоторого текста](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance)
+- [Как отображать компьютерный код в HTML](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code)
+- [Как комментировать (подписывать) изображения и видео](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions)
+- [Как помечать аббревиатуры и делать их понятными](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations)
+- [Как добавлять цитаты на веб-страницы](/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations)
+- [Как определять термины в HTML](/ru/docs/Learn/HTML/Howto/Define_terms_with_HTML)
 
-<div class="column-half">
-<h3 id="Гиперссылки">Гиперссылки</h3>
+### Гиперссылки
 
-<p>Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:</p>
+Одной из главных причин по которым навигация в HTML страницах столь проста являются гиперссылки, которые могут которые возможно использоваться различными способами:
 
-<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>
+- [Как создавать гиперссылки](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
+- [Как создать "оглавление" HTML](/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu)
 
-<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>
+- [Как добавить изображения на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage)
+- [Как добавить видео на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [Как добавить аудио на веб-страницу](/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
 
-<h3 id="Сценарии_и_стили">Сценарии и стили</h3>
+### Сценарии и стили
 
-<p>HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).</p>
+HTML определяет лишь структуру документа. Для улучшения внешнего вида документа обычно используется CSS. Чтобы добавить странице интерактивности вы также можете написать сценарий на одном из скриптовых языков (например JavaScript).
 
-<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>
+- [Как использовать CSS внутри веб-страницы](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML)
+- [Как использовать JavaScript внутри веб-страницы](/ru/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage)
 
-<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>
+- [Как встроить одну веб-страницу внутрь другой](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Как добавлять Flash содержимое на веб-страницы](/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements)
 
-<h2 id="Необычные_или_продвинутые_проблемы">Необычные или продвинутые проблемы</h2>
+## Необычные или продвинутые проблемы
 
-<p>Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:</p>
+Помимо основ, HTML очень богат и предлагает расширенные возможности для решения сложных проблем. Эти статьи помогут вам разобраться с менее распространёнными случаями использования, с которыми вы можете столкнуться:
 
-<div class="column-container">
-<div class="column-half">
-<h3 id="Формы">Формы</h3>
+### Формы
 
-<p>Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:</p>
+Форма это сложная HTML структура предназначенная для отправки данных с веб-страницы на веб-сервер. Мы призываем вас просмотреть наше полное посвящённое руководство. Вот где вы должны начать:
 
-<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>
+- [Как создать простую Веб-форму](/ru/docs/Web/Guide/HTML/Forms/My_first_HTML_form)
+- [Как организовать Веб форму](/ru/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form)
 
-<h3 id="Таблицы">Таблицы</h3>
+### Таблицы
 
-<p>Некоторая информация удобнее всего представима в виде таблиц состоящих из строк и столбцов. Это одна из самых сложных структур в HTML, управлять которой не так просто как кажется:</p>
+Некоторая информация удобнее всего представима в виде таблиц состоящих из строк и столбцов. Это одна из самых сложных структур в HTML, управлять которой не так просто как кажется:
 
-<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>
+- [Как создать таблицу данных](/ru/docs/Learn/HTML/Howto/Create_a_data_spreadsheet)
+- [Как сделать HTML-таблицы доступными](/ru/docs/Learn/HTML/Howto/Make_HTML_tables_accessible)
+- [Как оптимизировать рендеринг HTML-таблицы](/ru/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering)
 
-<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>
+- [Как отображать числовые данные с помощью HTML](/ru/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML)
+- [How to use data attributes](/ru/docs/Learn/HTML/Howto/Use_data_attributes)
+- [How to associate human readable content with arbitrary computer data structures](/ru/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures)
 
-<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>
+- [How to create collapsible content with HTML](/ru/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML)
+- [Как добавить контекстное меню на веб-страницу](/ru/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage)
+- [Как создать диалоговое окно с помощью HTML](/ru/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML)
 
-<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>
+- [Как контролировать HTML](/ru/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking)
+- [Как отмечать изменения (добавление и удаление текста)](/ru/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion)
 
-<h3 id="Продвинутые_изображения_и_мультимедиа_images_multimedia">Продвинутые изображения и мультимедиа images &amp; multimedia</h3>
+### Продвинутые изображения и мультимедиа images & multimedia
 
-<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>
+- [How to add responsive image to a webpage](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [How to add vector image to a webpage](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [How to add a hit map on top of an image](/ru/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)
 
-<h3 id="Локализация">Локализация</h3>
+### Локализация
 
-<p>HTML не одноязычен. Он имеет поддержку средств локализации документов.</p>
+HTML не одноязычен. Он имеет поддержку средств локализации документов.
 
-<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>
+- [Как добавить несколько языков в одну веб-страницу](/ru/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage)
+- [How to handle Japanese ruby characters](/ru/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters)
+- [Как отображать дату и время с помощью HTML](/ru/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML)
 
-<h3 id="Производительность">Производительность</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Как ускорить загрузку HTML страниц</a></li>
-</ul>
-</div>
-</div>
+### Производительность
 
+- [Как ускорить загрузку HTML страниц](/ru/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages)
diff --git a/files/ru/learn/html/howto/use_data_attributes/index.md b/files/ru/learn/html/howto/use_data_attributes/index.md
index 7c49542770b1a1..797ba053a9dd4b 100644
--- a/files/ru/learn/html/howto/use_data_attributes/index.md
+++ b/files/ru/learn/html/howto/use_data_attributes/index.md
@@ -7,66 +7,72 @@ tags:
 translation_of: Learn/HTML/Howto/Use_data_attributes
 original_slug: Web/Guide/HTML/Using_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>
+[HTML5](/ru/docs/Web/Guide/HTML/HTML5) спроектирован с возможностью расширения данных ассоциированных с каким-либо элементом, но в то же время не обязательно имеющих определённое значение. [`data-*` атрибуты](/ru/docs/Web/HTML/Global_attributes#data-*) позволяют хранить дополнительную информацию в стандартных элементах HTML, без хаков вроде нестандартных атрибутов, лишних DOM-свойств или {{domxref("Node.setUserData()")}}.
 
-<h2 id="Синтаксис_HTML">Синтаксис HTML</h2>
+## Синтаксис HTML
 
-<p>Синтаксис прост — любой атрибут, чьё имя начинается с <code>data-</code>, является <code>data-*</code> атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать <code>data</code>-атрибуты:</p>
+Синтаксис прост — любой атрибут, чьё имя начинается с `data-`, является `data-*` атрибутом. Предположим у нас имеется статья и мы хотим сохранить дополнительную информацию без визуального представления. Для этого можно использовать `data`-атрибуты:
 
-<pre class="brush: html">&lt;article
+```html
+<article
   id="electriccars"
   data-columns="3"
   data-index-number="12314"
-  data-parent="cars"&gt;
+  data-parent="cars">
 ...
-&lt;/article&gt;</pre>
+</article>
+```
 
-<h2 id="Доступ_в_JavaScript">Доступ в JavaScript</h2>
+## Доступ в JavaScript
 
-<p>Чтение <code>data-</code>атрибутов в <a href="/ru/docs/Web/JavaScript">JavaScript</a> осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.</p>
+Чтение `data-`атрибутов в [JavaScript](/ru/docs/Web/JavaScript) осуществляется также просто. Для этого можно использовать метод {{domxref("Element.getAttribute", "getAttribute()")}} с параметром, равным полному имени атрибута. Но есть и более простой способ, используя объект {{domxref("HTMLElement.dataset", "dataset")}}.
 
-<p>Чтобы получить <code>data</code>-атрибут можно взять свойство объекта <code>dataset</code> с именем, равным части имени атрибута после <code>data-</code> (обратите внимание, что дефисы в имени преобразуются в camelCase).</p>
+Чтобы получить `data`-атрибут можно взять свойство объекта `dataset` с именем, равным части имени атрибута после `data-` (обратите внимание, что дефисы в имени преобразуются в camelCase).
 
-<pre><code>var article = document.getElementById('electriccars');
+```
+var article = document.getElementById('electriccars');
 
 article.dataset.columns // "3"
 article.dataset.indexNumber // "12314"
-article.dataset.parent // "cars"</code></pre>
+article.dataset.parent // "cars"
+```
 
-<p>Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода <code>article.dataset.columns = 5</code> приведёт к тому, что новое значение атрибута станет равным <code>"5"</code>.</p>
+Каждое свойство является строкой и может быть прочитано и записано. В приведённом выше примере выполнение кода `article.dataset.columns = 5` приведёт к тому, что новое значение атрибута станет равным `"5"`.
 
-<h2 id="Доступ_в_CSS">Доступ в CSS</h2>
+## Доступ в CSS
 
-<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>
+Заметим, что `data`-атрибуты являются обычными HTML-атрибутами, к которым можно получить доступ в [CSS](/ru/docs/Web/CSS). Например, чтобы показать родительские данные о статье можно использовать [генерируемый контент](/ru/docs/Web/CSS/content) и CSS функцию {{cssxref("attr")}}:
 
-<pre class="brush: css">article::before {
+```css
+article::before {
   content: attr(data-parent);
-}</pre>
+}
+```
 
-<p>Также можно использовать <a href="/ru/docs/Web/CSS/Attribute_selectors">селекторы атрибутов </a>в CSS для изменения стилей в соответствии с данным:</p>
+Также можно использовать [селекторы атрибутов ](/ru/docs/Web/CSS/Attribute_selectors)в CSS для изменения стилей в соответствии с данным:
 
-<pre class="brush: css">article[data-columns='3']{
+```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>
+Увидеть как это работает можно [в примере на JSBin](https://jsbin.com/ujiday/2/edit).
 
-<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>
+`Data`-атрибуты также могут использоваться для хранения информации, которая постоянно изменяется, например, счёт в игре. Используя CSS селекторы и возможности JavaScript можно создавать некоторые изящные эффекты, без необходимости писать свои функции отображения. Посмотрите [скринкаст](https://www.youtube.com/watch?v=On_WyUB1gOk) чтобы увидеть больше примеров использующих сгенерированный контент и переходы на CSS. [Пример кода из скринкаста можно также посмотреть на JSBin](https://jsbin.com/atawaz/3/edit).
 
-<h2 id="Проблемы">Проблемы</h2>
+## Проблемы
 
-<p>Не храните данные, которые должны быть видимы и доступны в <code>data</code>-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в <code>data</code>-атрибутах.</p>
+Не храните данные, которые должны быть видимы и доступны в `data`-атрибутах. Дело в том, что вспомогательная техника (assistive technology) может не получить к ним доступ. В дополнение, поисковые роботы не индексируют данные, содержащиеся в `data`-атрибутах.
 
-<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>
+Печально, что всё простое и полезное в этой жизни не достаётся бесплатно. Internet Explorer 11+ поддерживает этот стандарт, но все более ранние версии [не поддерживают `dataset`](https://caniuse.com/#feat=dataset). Для поддержки IE 10 и более ранних версий получение доступа к `data`-атрибутам необходимо осуществлять через {{domxref("Element.getAttribute", "getAttribute()")}}. Также, [производительность чтения `data-`атрибутов](https://jsperf.com/data-dataset) по сравнению с хранением этих данных в хранилище данных JS значительно хуже. Использование `dataset` ещё медленнее, чем чтение данных с `getAttribute()`.
 
-<p>Тем не менее, для пользовательских метаданных, связанных с элементами, <code>data-</code>атрибуты являются отличным решением.</p>
+Тем не менее, для пользовательских метаданных, связанных с элементами, `data-`атрибуты являются отличным решением.
 
-<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>
+- This article is adapted from [Using data attributes in JavaScript and CSS on hacks.mozilla.org](https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/).
+- [How to use HTML5 data attributes](https://www.sitepoint.com/use-html5-data-attributes/) (Sitepoint)
diff --git a/files/ru/learn/html/index.md b/files/ru/learn/html/index.md
index 8bb385762e5cea..bff73c8a152fc5 100644
--- a/files/ru/learn/html/index.md
+++ b/files/ru/learn/html/index.md
@@ -13,46 +13,41 @@ tags:
   - Тема
 translation_of: Learn/HTML
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Чтобы создавать веб-сайты, вы должны знать о {{Glossary('HTML')}} — фундаментальной технологии, которая используется для определения структуры веб-страницы. HTML применяется для того, чтобы определить как должен отображаться ваш контент: в виде абзаца, списка, заголовка, ссылки, изображения, мультимедийного проигрывателя, формы или же в виде одного из множества других доступных элементов, а также возможного нового элемента, который вы сами создадите.</p>
+Чтобы создавать веб-сайты, вы должны знать о {{Glossary('HTML')}} — фундаментальной технологии, которая используется для определения структуры веб-страницы. HTML применяется для того, чтобы определить как должен отображаться ваш контент: в виде абзаца, списка, заголовка, ссылки, изображения, мультимедийного проигрывателя, формы или же в виде одного из множества других доступных элементов, а также возможного нового элемента, который вы сами создадите.
 
-<h2 id="Путь_обучения_(образовательная_траектория)">Путь обучения (образовательная траектория)</h2>
+## Путь обучения (образовательная траектория)
 
-<p>В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела <a href="/ru/docs/Web/Guide/HTML/Introduction">"Введение в HTML"</a>. Затем вы можете перейти к изучению более продвинутых тем, таких как:</p>
+В идеале вы должны начать своё учебное путешествие с изучения HTML. Начните с прочтения раздела ["Введение в HTML"](/ru/docs/Web/Guide/HTML/Introduction). Затем вы можете перейти к изучению более продвинутых тем, таких как:
 
-<ul>
- <li><a href="/ru/docs/Learn/CSS">"CSS (Каскадные таблицы стилей)"</a>, и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).</li>
- <li><a href="/ru/docs/Learn/JavaScript">"JavaScript"</a>, и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).</li>
-</ul>
+- ["CSS (Каскадные таблицы стилей)"](/ru/docs/Learn/CSS), и как их использовать для оформления (стилизации) HTML-документа (например, изменение шрифта и его размера, добавление границы и теней для элементов, разбиение страницы на несколько столбцов, добавление анимации и других визуальных эффектов).
+- ["JavaScript"](/ru/docs/Learn/JavaScript), и как его использовать для придания динамической функциональности веб-страницам (например, определение вашего местоположения и отображение его на карте, создание элементов, которые будут появляться/исчезать при нажатии на кнопку, сохранение данных пользователей локально на их компьютерах и многое другое).
 
-<p>Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">разделе "Установка базового программного обеспечения"</a>, а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">разделе "Работа с файлами"</a> — обе статьи являются частью нашего модуля для новичков  - <a href="/ru/docs/Learn/Getting_started_with_the_web">"Начало работы с вебом"</a>.</p>
+Прежде чем приступить к этой теме, вы должны иметь хотя бы базовое представление об использовании компьютеров вообще и уметь "пассивно" использовать Интернет (т.е. уметь просматривать веб-страницы, быть потребителем контента). У вас должна быть базовая рабочая среда, описанная в [разделе "Установка базового программного обеспечения"](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), а также вы должны понимать, как создавать файлы и управлять ими, что подробно описано в [разделе "Работа с файлами"](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — обе статьи являются частью нашего модуля для новичков - ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web).
 
-<p>Перед тем, как начать эту тему, рекомендуется пройтись по разделу <a href="/ru/docs/Learn/Getting_started_with_the_web">"Начало работы с вебом"</a>, однако это необязательно; многое из того, что описано в статье <a href="/ru/docs/Learn/Getting_started_with_the_web/HTML_basics">"Основы HTML"</a>, также рассматривается и во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">"Введении в HTML"</a>, причём даже более подробно.</p>
+Перед тем, как начать эту тему, рекомендуется пройтись по разделу ["Начало работы с вебом"](/ru/docs/Learn/Getting_started_with_the_web), однако это необязательно; многое из того, что описано в статье ["Основы HTML"](/ru/docs/Learn/Getting_started_with_the_web/HTML_basics), также рассматривается и во ["Введении в HTML"](/ru/docs/Learn/HTML/Введение_в_HTML), причём даже более подробно.
 
-<h2 id="Модули">Модули</h2>
+## Модули
 
-<p>Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля.</p>
+Данный раздел содержит модули, которые расположены в порядке, наиболее оптимальном для их изучения. Вам определённо следует начать с первого модуля.
 
-<dl>
- <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введение в HTML</a></dt>
- <dd>Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.</dd>
- <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding">Мультимедиа и встраивание</a></dt>
- <dd>В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.</dd>
- <dt> </dt>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables">HTML Таблицы</a></dt>
- <dd>Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Forms">HTML Формы</a></dt>
- <dd>Формы - очень важная часть интернета, они  обеспечивают  большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.</dd>
-</dl>
+- [Введение в HTML](/ru/docs/Learn/HTML/Введение_в_HTML)
+  - : Этот модуль даёт основу, которая позволит вам использовать важные понятия и синтаксис, вы рассмотрите применение HTML к тексту, узнаете как создать гиперссылки и как использовать HTML для структурирования веб-страницы.
+- [Мультимедиа и встраивание](/ru/docs/Learn/HTML/Multimedia_and_embedding)
+  - : В этом модуле рассматривается использование HTML для подключения мультимедиа-контента к вашим веб-страницам, включая различные способы встраивания изображений, видео и аудио и даже других веб-страниц.
+- [HTML Таблицы](/ru/docs/Learn/HTML/Tables)
 
-<h2 id="Решение_общих_HTML_задач">Решение общих HTML задач</h2>
+  - : Представление табличных данных на веб-странице в понятном, {{glossary("Accessibility", "доступном")}} образе, может стать проблемой. Этот модуль описывает основы табличной разметки, а также более сложные функции, такие как реализация подписок и резюме.
 
-<p><a href="/ru/docs/Learn/HTML/Howto">Использование HTML для решения общих задач</a> содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.</p>
+- [HTML Формы](/ru/docs/Learn/HTML/Forms)
+  - : Формы - очень важная часть интернета, они обеспечивают большую часть функциональных возможностей, необходимых для взаимодействия с веб-сайтом, например, регистрация и вход в систему, отправка отзывов, покупка продуктов и многое другое. В этом модуле вы начнёте с создания частей форм на стороне клиента.
 
-<h2 id="Смотрите_также">Смотрите также:</h2>
+## Решение общих HTML задач
 
-<dl>
- <dt><a href="/ru/docs/Web/HTML">HTML (HyperText Markup Language)</a> на MDN.</dt>
- <dd>Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.</dd>
-</dl>
+[Использование HTML для решения общих задач](/ru/docs/Learn/HTML/Howto) содержит ссылки на разделы контента, объясняющего, как использовать HTML для решения очень распространённых проблем при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение содержимого, создание базовой формы и т.д.
+
+## Смотрите также:
+
+- [HTML (HyperText Markup Language)](/ru/docs/Web/HTML) на MDN.
+  - : Отправная точка HTML документации на MDN, там вы сможете найти как подробное описание основных элементов и их атрибутов, так и более продвинутые уроки по языку, это отличное место для старта.
diff --git a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
index 6c804fa44ec289..985609dbbb25ad 100644
--- a/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
+++ b/files/ru/learn/html/introduction_to_html/advanced_text_formatting/index.md
@@ -10,105 +10,93 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting
 original_slug: Learn/HTML/Введение_в_HTML/Advanced_text_formatting
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div>
+В HTML для форматирования текста есть много других элементов, не рассмотренных в статье [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals). Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.
 
-<p class="summary">В HTML для форматирования текста есть много других элементов, не рассмотренных  в статье <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Элементы, описанные в этой статье, не так часто используются, но всё же полезны для понимания (и это всё ещё будет не полный список элементов). Здесь вы узнаете о цитатах, списках описания, компьютерном коде и другом виде текстовых элементов, подстрочном и надстрочном тексте, контактной информации и других типах текста.</p>
+| Предварительные требования: | Базовое знакомство с HTML, раскрытое в [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). Форматирование текста с помощью HTML, описанное в статье [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals). |
+| --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.                                                                                                                                                                                                                                                                                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>
-    <p>Базовое знакомство с HTML, раскрытое в <br>
-     <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>. Форматирование текста с помощью HTML, описанное в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научиться использовать менее известные HTML-элементы для продвинутой семантической разметки текста.</td>
-  </tr>
- </tbody>
-</table>
+## Списки описания
 
-<h2 id="Списки_описания">Списки описания</h2>
+В основах HTML-текста мы рассмотрели, как [пометить привычные типы списков](HTML_text_fundamentals#Lists) в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.
 
-<p>В основах HTML-текста мы рассмотрели, как <a href="HTML_text_fundamentals#Lists">пометить привычные типы списков</a> в HTML, но мы не упоминали о третьем типе списка, с которым вы иногда сталкиваетесь, — списке описания. Цель этих списков состоит в том, чтобы пометить набор элементов и их связанных описаний, таких как термины и определения или вопросы и ответы.</p>
+Давайте рассмотрим пример набора терминов и определений:
 
-<p>Давайте рассмотрим пример набора терминов и определений:</p>
-
-<pre>Солилоквий
+```
+Солилоквий
 Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
 Монолог
 Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
 Ремарка
-В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</pre>
-
-<p>В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от <em>description list</em>); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (<em>description term</em> — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (<em>description definition</em> — описание определения).</p>
-
-<p>Закончим разметку нашего примера:</p>
+В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+```
 
-<pre class="brush: html">&lt;dl&gt;
-  &lt;dt&gt;Солилоквий&lt;/dt&gt;
-  &lt;dd&gt;Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).&lt;/dd&gt;
-  &lt;dt&gt;Монолог&lt;/dt&gt;
-  &lt;dd&gt;Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.&lt;/dd&gt;
-  &lt;dt&gt;Ремарка&lt;/dt&gt;
-  &lt;dd&gt;В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.&lt;/dd&gt;
-&lt;/dl&gt;</pre>
+В списках описания используется иная оболочка, чем в других типах списков — {{htmlelement ("dl")}} (от _description list_); кроме того, каждый термин завёрнут в элемент {{htmlelement ("dt")}} (_description term_ — термин для описания) и каждое определение завёрнуто в элемент {{htmlelement ("dd")}} (_description definition_ — описание определения).
 
-<p>В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:</p>
+Закончим разметку нашего примера:
 
+```html
 <dl>
- <dt>Солилоквий</dt>
- <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd>
- <dt>Монолог</dt>
- <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd>
- <dt>Ремарка</dt>
- <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
+  <dt>Солилоквий</dt>
+  <dd>Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).</dd>
+  <dt>Монолог</dt>
+  <dd>Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.</dd>
+  <dt>Ремарка</dt>
+  <dd>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</dd>
 </dl>
+```
 
-<p>Заметьте, что разрешено давать одному элементу несколько описаний:</p>
+В стилях браузера по умолчанию будут отображаться списки описания с некоторыми отступами от терминов. Стили, определённые на MDN, довольно близки к этому соглашению, но также вносят некоторые изменения:
 
-<dl>
- <dt>Ремарка</dt>
- <dd><p>В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.</p>
- <p>В письменности: отметка, примечание (<em>устар.</em>).</p></dd>
-</dl>
+- Солилоквий
+  - : Драматическая речь, в которой персонаж разговаривает сам с собой, передавая свои ощущения и мысли публике (но не другим персонажам).
+- Монолог
+  - : Драматическая речь, в которой персонаж передаёт свои мысли публике и некоторым персонажам.
+- Ремарка
+  - : В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
+
+Заметьте, что разрешено давать одному элементу несколько описаний:
 
-<h3 id="Активное_обучение_разметка_набора_определений">Активное обучение: разметка набора определений</h3>
+- Ремарка
 
-<p>Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле <em>Вывод</em>. Вы можете попробовать использовать свои собственные термины и описания, если хотите.</p>
+  - : В драме: речь персонажа, при которой делается замечание с юмористическим или драматическим эффектом; чаще всего это чувства, мысли или предпосылки к чему-либо.
 
-<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>
+    В письменности: отметка, примечание (_устар._).
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+### Активное обучение: разметка набора определений
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+Пришло время попробовать свои силы в списках описания: добавьте элементы в исходный текст в поле Ввод, чтобы он отображался как список описания в поле _Вывод_. Вы можете попробовать использовать свои собственные термины и описания, если хотите.
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой _Сбросить_. Если упражнение вызывает у вас затруднения, то нажмите кнопку _Показать решение_, чтобы увидеть правильный ответ.
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;
+<div class="output" style="min-height: 50px;">
+</div>
+
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
+
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">
 Бекон
 Скрепляет мир вокруг.
 Яйца
 Скрепляют пироги вокруг.
 Кофе
 Рычаг, движущий планетами.
-Светло-коричневого цвета.&lt;/textarea&gt;
+Светло-коричневого цвета.</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -126,9 +114,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -158,7 +148,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;dl&gt;\n &lt;dt&gt;Бекон&lt;/dt&gt;\n &lt;dd&gt;Скрепляет мир вокруг.&lt;/dd&gt;\n &lt;dt&gt;Яйца&lt;/dt&gt;\n &lt;dd&gt;Скрепляют пироги вокруг.&lt;/dd&gt;\n &lt;dt&gt;Кофе&lt;/dt&gt;\n &lt;dd&gt;Рычаг, движущий планетами.&lt;/dd&gt;\n &lt;dd&gt;Светло-коричневого цвета.&lt;/dd&gt;\n&lt;/dl&gt;';
+var htmlSolution = '<dl>\n <dt>Бекон</dt>\n <dd>Скрепляет мир вокруг.</dd>\n <dt>Яйца</dt>\n <dd>Скрепляют пироги вокруг.</dd>\n <dt>Кофе</dt>\n <dd>Рычаг, движущий планетами.</dd>\n <dd>Светло-коричневого цвета.</dd>\n</dl>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -204,108 +194,110 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Цитаты">Цитаты</h2>
+};
+```
 
-<p>HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.</p>
+{{ EmbedLiveSample('Playable_code', 700, 350, "", "", "hide-codepen-jsfiddle") }}
 
-<h3 id="Блочные_цитаты">Блочные цитаты</h3>
+## Цитаты
 
-<p>Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.</p>
+HTML также имеет функции, доступные для маркировки цитат; какой элемент вы используете, зависит от того, маркируете ли вы блочную или строчную цитату.
 
-<p>Например, следующая разметка берётся из страницы элемента MDN <code><strong>&lt;blockquote&gt;</strong></code>:</p>
+### Блочные цитаты
 
-<pre class="brush: html">&lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block
-Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нём текст является развёрнутой цитатой.&lt;/p&gt;</pre>
+Если часть содержимого уровня блока (будь то абзац, несколько абзацев, список и т. д.) цитируется из другого источника, вы должны обернуть её внутри элемента {{htmlelement ("blockquote")}}, чтобы обозначить это, и указать URL-адрес, указывающий на источник цитаты, внутри атрибута {{htmlattrxref ("cite", "blockquote")}}.
 
-<p>Чтобы превратить её в блочную цитату, мы просто делаем следующее:</p>
+Например, следующая разметка берётся из страницы элемента MDN **`<blockquote>`**:
 
-<pre class="brush: html">&lt;blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"&gt;
-  &lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нём текст является развёрнутой цитатой.&lt;/p&gt;
-&lt;/blockquote&gt;</pre>
+```html
+<p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
+Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
+```
 
-<p>Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:</p>
+Чтобы превратить её в блочную цитату, мы просто делаем следующее:
 
-<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
-<p><strong>HTML-элемент &lt;blockquote&gt; </strong>(от англ. <em>Block Quotation</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
+```html
+<blockquote cite="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
+  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block Quotation Element</em>) указывает на то, что заключённый в нём текст является развёрнутой цитатой.</p>
 </blockquote>
+```
 
-<h3 id="Строчные_цитаты">Строчные цитаты</h3>
+Стиль браузера по умолчанию будет отображать это как абзац с отступом, как индикатор того, что это цитата; абзац над цитатой призван продемонстрировать это. MDN делает это, но также добавляет некоторый дополнительный стиль:
 
-<p>Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы <code>&lt;q&gt;</code> MDN:</p>
+> **HTML-элемент \<blockquote>** (от англ. _Block Quotation_) указывает на то, что заключённый в нём текст является развёрнутой цитатой.
 
-<pre class="brush: html">&lt;p&gt;Элемент цитирования — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;предназначен
-для коротких цитат, не требующих прерывания абзаца&lt;/q&gt;.&lt;/p&gt;</pre>
+### Строчные цитаты
 
-<p>Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:</p>
+Строчные цитаты работают точно так же, за исключением того, что они используют элемент {{htmlelement ("q")}}. Например, следующий кусочек разметки содержит цитату из страницы `<q>` MDN:
 
-<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен для коротких цитат, не требующих прерывания абзаца</q>.</p>
+```html
+<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
+для коротких цитат, не требующих прерывания абзаца</q>.</p>
+```
 
-<h3 id="Цитирование">Цитирование</h3>
+Стиль браузера по умолчанию будет отображать это как обычный текст, заключённый в кавычки для обозначения цитаты, например:
 
-<p>Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута <code>&lt;cite&gt;</code> без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри <code>&lt;cite&gt;</code> с источником цитаты:</p>
+Элемент цитирования — `<q>` — "предназначен для коротких цитат, не требующих прерывания абзаца".
 
-<pre class="brush: html">&lt;p&gt;Как указано в статье о &lt;a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote"&gt;
-&lt;cite&gt;блочных цитатах&lt;/cite&gt;&lt;/a&gt;:
-&lt;/p&gt;
+### Цитирование
 
-&lt;blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"&gt;
-  &lt;p&gt;&lt;strong&gt;HTML-элемент&lt;code&gt;&amp;lt;blockquote&amp;gt;&lt;/code&gt;&lt;/strong&gt; (от англ. &lt;em&gt;HTML Block
-  Quotation Element&lt;/em&gt;) указывает на то, что заключённый в нем текст является развёрнутой цитатой.&lt;/p&gt;
-&lt;/blockquote&gt;
+Содержание атрибута {{htmlattrxref ("cite", "blockquote")}} выглядит полезным, но, к сожалению, браузерам, программам чтения с экрана и т. д. оно на самом деле мало чем помогает. Невозможно заставить браузер отображать содержимое атрибута `<cite>` без написания собственного решения с использованием JavaScript или CSS. Если вы хотите, чтобы источник цитирования был доступен на странице, лучший способ его разметки - поместить элемент {{htmlelement ("cite")}} рядом с элементом цитаты (или внутри него). Это действительно будет означать то, что имя источника цитаты — то есть имя книги или имя человека, которое произвело цитату, — будет включено в текст. Нет причин, по которым вы не могли бы связать текст внутри `<cite>` с источником цитаты:
 
-&lt;p&gt;Элемент цитирования — &lt;code&gt;&amp;lt;q&amp;gt;&lt;/code&gt; — &lt;q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;предназначен
-для коротких цитат, не требующих прерывания абзаца&lt;/q&gt;. -- &lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q"&gt;
-&lt;cite&gt;Строчные цитаты&lt;/cite&gt;&lt;/a&gt;.&lt;/p&gt;</pre>
+```html
+<p>Как указано в статье о <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element/blockquote">
+<cite>блочных цитатах</cite></a>:
+</p>
 
-<p>По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a></p>
+<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
+  <p><strong>HTML-элемент<code>&lt;blockquote&gt;</code></strong> (от англ. <em>HTML Block
+  Quotation Element</em>) указывает на то, что заключённый в нем текст является развёрнутой цитатой.</p>
+</blockquote>
 
-<h3 id="Активное_обучение_кто_это_сказал">Активное обучение: кто это сказал?</h3>
+<p>Элемент цитирования — <code>&lt;q&gt;</code> — <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">предназначен
+для коротких цитат, не требующих прерывания абзаца</q>. -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
+<cite>Строчные цитаты</cite></a>.</p>
+```
 
-<p>Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:</p>
+По умолчанию цитаты стилизованы курсивом. Этот код можно увидеть в нашем примере [quotations.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html)
 
-<ol>
- <li>Преобразуйте средний абзац в блочную цитату (<code>&lt;blockquote&gt;</code>), который включает атрибут <code>cite</code>.</li>
- <li>Заверните часть третьего абзаца в строчную цитату, которая включает атрибут <code>cite</code>.</li>
- <li>Включите элемент <code>&lt;cite&gt;</code> для каждой ссылки.</li>
-</ol>
+### Активное обучение: кто это сказал?
 
-<p>Источники цитирования, которые вам потребуются:</p>
+Время для другого примера активного обучения! В этом примере мы хотели бы, чтобы вы совершили следующие действия:
 
-<ul>
- <li><a href="http://www.brainyquote.com/quotes/authors/c/confucius">http://www.brainyquote.com/quotes/authors/c/confucius</a> — HTML-страница с цитатами Конфуция</li>
- <li><a href="https://www.affirmationsforpositivethinking">https://www.affirmationsforpositivethinking</a> — HTML-страница <em>The Need To Eliminate Negative Self Talk</em>.</li>
-</ul>
+1.  Преобразуйте средний абзац в блочную цитату (`<blockquote>`), который включает атрибут `cite`.
+2.  Заверните часть третьего абзаца в строчную цитату, которая включает атрибут `cite`.
+3.  Включите элемент `<cite>` для каждой ссылки.
 
-<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>
+Источники цитирования, которые вам потребуются:
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code</h6>
+- <http://www.brainyquote.com/quotes/authors/c/confucius> — HTML-страница с цитатами Конфуция
+- <https://www.affirmationsforpositivethinking> — HTML-страница _The Need To Eliminate Negative Self Talk_.
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой _Сбросить_. Если упражнение вызывает у вас затруднения, то нажмите кнопку _Показать решение_, чтобы увидеть правильный ответ.
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;textarea id="code" class="input" style="min-height: 150px; width: 95%"&gt;
-&lt;p&gt;Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:&lt;/p&gt;
-&lt;p&gt;Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.&lt;/p&gt;
-&lt;p&gt;Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)&lt;/p&gt;
-&lt;/textarea&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<textarea id="code" class="input" style="min-height: 150px; width: 95%">
+<p>Здравствуйте и добро пожаловать на мою страницу мотивации! Конфуций как-то сказал:</p>
+<p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p>
+<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает Необходимость избавления от негативного внутреннего разговора (как сказано в зарубежной статье Affirmations for Positive Thinking.)</p>
+</textarea>
+
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -323,9 +315,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -355,7 +349,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;p&gt;Здравствуйте и добро пожаловать на мою страницу мотивации! &lt;a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;&lt;cite&gt;Конфуций&lt;/cite&gt;&lt;/a&gt; как-то сказал:&lt;/p&gt;\n\n&lt;blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"&gt;\n &lt;p&gt;Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.&lt;/p&gt;\n&lt;/blockquote&gt;\n\n&lt;p&gt;Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает &lt;q cite="http://www.affirmationsforpositivethinking.com/index.htm"&gt;Необходимость избавления от негативного внутреннего разговора&lt;/q&gt; (как сказано в зарубежной статье &lt;a href="http://www.affirmationsforpositivethinking.com/index.htm"&gt;&lt;cite&gt;Affirmations for Positive Thinking&lt;/cite&gt;&lt;/a&gt;.)&lt;/p&gt;';
+var htmlSolution = '<p>Здравствуйте и добро пожаловать на мою страницу мотивации! <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Конфуций</cite></a> как-то сказал:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>Не важно, с какой скоростью ты движешься к своей цели, — главное не останавливаться.</p>\n</blockquote>\n\n<p>Мне также нравится концепция позитивного мышления, и я считаю, каждый ощущает <q cite="http://www.affirmationsforpositivethinking.com/index.htm">Необходимость избавления от негативного внутреннего разговора</q> (как сказано в зарубежной статье <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -401,57 +395,56 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h2 id="Аббревиатуры">Аббревиатуры</h2>
-
-<p>Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)</p>
+};
+```
 
-<p>Давайте рассмотрим несколько примеров:</p>
+{{ EmbedLiveSample('Playable_code_2', 700, 450, "", "", "hide-codepen-jsfiddle") }}
 
-<pre>&lt;p&gt;Мы используем &lt;abbr title="Hypertext Markup Language"&gt;HTML&lt;/abbr&gt; для структурирования наших веб-документов.&lt;/p&gt;
+## Аббревиатуры
 
-&lt;p&gt;Я думаю, &lt;abbr title="Почтенный"&gt;Почт.&lt;/abbr&gt; Грин сделал это на кухне с бензопилой.&lt;/p&gt;
-</pre>
+Другой довольно часто встречающийся элемент, который вы будете часто встречать в Интернете, — это {{htmlelement ("abbr")}}, используемый для обёртывания аббревиатур или акронимов и обеспечивающий полную расшифровку сокращения (с помощью атрибута {{htmlattrxref("title")}}.)
 
-<p>Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):</p>
+Давайте рассмотрим несколько примеров:
 
+```
 <p>Мы используем <abbr title="Hypertext Markup Language">HTML</abbr> для структурирования наших веб-документов.</p>
 
 <p>Я думаю, <abbr title="Почтенный">Почт.</abbr> Грин сделал это на кухне с бензопилой.</p>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и <code>&lt;abbr&gt;</code>, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что <code>&lt;abbr&gt;</code>, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте <code>&lt;abbr&gt;</code>.</p>
-</div>
+Они будут выглядеть примерно так (расшифровка появится в подсказке при наведении курсора мыши на сокращение):
+
+Мы используем HTML для структурирования наших веб-документов.
 
-<h3 id="Активное_обучение_выделение_аббревиатуры">Активное обучение: выделение аббревиатуры</h3>
+Я думаю, Почт. Грин сделал это на кухне с бензопилой.
 
-<p>В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.</p>
+> **Примечание:** Существует ещё один элемент {{htmlelement ("acronym")}}, который в основном делает то же самое, что и `<abbr>`, но предназначен специально для акронимов (тип аббревиатур). Это, однако, было излишним, — он не поддерживается в браузерах на том же уровне, что `<abbr>`, и имеет такую же функциональность, поэтому считается бессмысленным иметь оба. Просто используйте `<abbr>`.
 
-<div class="hidden">
-<h6 id="Playable_code_3">Playable code</h6>
+### Активное обучение: выделение аббревиатуры
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+В рамках этого простого упражнения мы хотели бы, чтобы вы просто указали аббревиатуру. Вы можете использовать наш образец ниже или заменить его на свой собственный.
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+```html hidden
+<h2>Результат</h2>
+
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 50px; width: 95%"&gt;
-&lt;p&gt;Безусловно, NASA занимается классными вещами.&lt;/p&gt;
-&lt;/textarea&gt;
+<textarea id="code" class="input" style="min-height: 50px; width: 95%">
+<p>Безусловно, NASA занимается классными вещами.</p>
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -469,9 +462,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -501,7 +496,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;p&gt;Безусловно, &lt;abbr title="National Aeronautics and Space Administration"&gt;NASA&lt;/abbr&gt; занимается классными вещами.&lt;/p&gt;';
+var htmlSolution = '<p>Безусловно, <abbr title="National Aeronautics and Space Administration">NASA</abbr> занимается классными вещами.</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -547,133 +542,139 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code_3', 700, 300, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Разметка_контактных_данных">Разметка контактных данных</h2>
+## Разметка контактных данных
 
-<p>HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:</p>
+HTML имеет элемент для разметки контактных данных — {{htmlelement ("address")}}. Он просто обёртывает ваши контактные данные, например:
 
-<pre class="brush: html">&lt;address&gt;
-  &lt;p&gt;Крис Миллс, Манчестер, Жестокий Север, РФ&lt;/p&gt;
-&lt;/address&gt;</pre>
+```html
+<address>
+  <p>Крис Миллс, Манчестер, Жестокий Север, РФ</p>
+</address>
+```
 
-<p>Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не <em>любого </em>адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:</p>
+Однако следует помнить, что элемент {{htmlelement ("address")}} предназначен для разметки контактных данных человека, который написал HTML-документ, а не _любого_ адреса. Таким образом, написанное выше было бы корректным только в том случае, если бы Крис написал документ, на котором появляется разметка. Обратите внимание, что следующее также подойдёт:
 
-<pre class="brush: html">&lt;address&gt;
-  &lt;p&gt;Автор страницы — &lt;a href="../authors/chris-mills/"&gt;Крис Миллс&lt;/a&gt;.&lt;/p&gt;
-&lt;/address&gt;</pre>
+```html
+<address>
+  <p>Автор страницы — <a href="../authors/chris-mills/">Крис Миллс</a>.</p>
+</address>
+```
 
-<h2 id="Верхний_и_нижний_индекс">Верхний и нижний индекс</h2>
+## Верхний и нижний индекс
 
-<p>Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.</p>
+Иногда вам понадобится использовать надстрочный или подстрочный индекс при разметке таких вещей, как даты, химические формулы и математические уравнения, чтобы они имели правильное представление. Элементы {{htmlelement ("sup")}} и {{htmlelement ("sub")}} созданы для таких ситуаций.
 
-<p>Приведём пример:</p>
+Приведём пример:
 
-<pre class="brush: html">&lt;p&gt;Я просыпаюсь в 6&lt;sup&gt;35&lt;/sup&gt; часов утра.&lt;/p&gt;
-&lt;p&gt;Химическая формула кофеина: C&lt;sub&gt;8&lt;/sub&gt;H&lt;sub&gt;10&lt;/sub&gt;N&lt;sub&gt;4&lt;/sub&gt;O&lt;sub&gt;2&lt;/sub&gt;.&lt;/p&gt;
-&lt;p&gt;Если x&lt;sup&gt;2&lt;/sup&gt; равно 9, x должен равняться 3 или -3.&lt;/p&gt;</pre>
+```html
+<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
+<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>
+```
 
-<p>Результат этого кода выглядит следующим образом:</p>
+Результат этого кода выглядит следующим образом:
 
-<p>Я просыпаюсь в 6<sup>35</sup> часов утра.</p>
+Я просыпаюсь в 635 часов утра.
 
-<p>Химическая формула кофеина: C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>
+Химическая формула кофеина: C8H10N4O2.
 
-<p>Если x<sup>2</sup> равно 9, x должен равняться 3 или -3.</p>
+Если x2 равно 9, x должен равняться 3 или -3.
 
-<h2 id="Representing_computer_code">Представление компьютерного кода</h2>
+## Представление компьютерного кода
 
-<p>Существует несколько элементов для маркировки компьютерного кода с использованием HTML:</p>
+Существует несколько элементов для маркировки компьютерного кода с использованием HTML:
 
-<ul>
- <li>{{htmlelement("code")}}: Для разметки общих частей компьютерного кода.</li>
- <li>{{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги <code>&lt;pre&gt;&lt;/pre&gt;</code>, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.</li>
- <li>{{htmlelement("var")}}: Для конкретной маркировки имён переменных.</li>
- <li>{{htmlelement("kbd")}}: Для маркировки ввода с клавиатуры (и других типов).</li>
- <li>{{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.</li>
-</ul>
+- {{htmlelement("code")}}: Для разметки общих частей компьютерного кода.
+- {{htmlelement("pre")}}: Для сохранения пробелов (как правило, кодовых блоков) — если вы используете отступы или лишние пробелы внутри вашего текста, браузеры будут игнорировать его, и вы не увидите его на вашей отображаемой странице; если вы поместите текст в теги `<pre></pre>`, то ваши пробелы будут отображаться идентично тому, как вы видите текст в редакторе.
+- {{htmlelement("var")}}: Для конкретной маркировки имён переменных.
+- {{htmlelement("kbd")}}: Для маркировки ввода с клавиатуры (и других типов).
+- {{htmlelement("samp")}}: Для маркировки вывода компьютерной программы.
 
-<p>Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p>
+Давайте рассмотрим несколько примеров. Вы должны попробовать поиграть с ними (захватите копию нашего файла [other-semantics.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html)):
 
-<pre class="brush: html">&lt;pre&gt;&lt;code&gt;var para = document.querySelector('p');
+```html
+<pre><code>var para = document.querySelector('p');
 
 para.onclick = function() {
   alert('Owww, stop poking me!');
-}&lt;/code&gt;&lt;/pre&gt;
+}</code></pre>
 
-&lt;p&gt;You shouldn't use presentational elements like &lt;code&gt;&amp;lt;font&amp;gt;&lt;/code&gt; and &lt;code&gt;&amp;lt;center&amp;gt;&lt;/code&gt;.&lt;/p&gt;
+<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p>
 
-&lt;p&gt;In the above JavaScript example, &lt;var&gt;para&lt;/var&gt; represents a paragraph element.&lt;/p&gt;
+<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p>
 
-&lt;p&gt;Select all the text with &lt;kbd&gt;Ctrl&lt;/kbd&gt;/&lt;kbd&gt;Cmd&lt;/kbd&gt; + &lt;kbd&gt;A&lt;/kbd&gt;.&lt;/p&gt;
+<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p>
 
-&lt;pre&gt;$ &lt;kbd&gt;ping mozilla.org&lt;/kbd&gt;
-&lt;samp&gt;PING mozilla.org (63.245.215.20): 56 data bytes
-64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms&lt;/samp&gt;&lt;/pre&gt;</pre>
+<pre>$ <kbd>ping mozilla.org</kbd>
+<samp>PING mozilla.org (63.245.215.20): 56 data bytes
+64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
+```
 
-<p>Вышеприведённый код будет выглядеть так:</p>
+Вышеприведённый код будет выглядеть так:
 
-<p>{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Representing_computer_code','100%',300, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Разметка_времени_и_даты">Разметка времени и даты</h2>
+## Разметка времени и даты
 
-<p>HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:</p>
+HTML также содержит элемент {{htmlelement ("time")}} для отметки времени и дат в машиночитаемом формате. Например:
 
-<pre class="brush: html">&lt;time datetime="2020-01-20"&gt;20 Января 2020&lt;/time&gt;</pre>
+```html
+<time datetime="2020-01-20">20 Января 2020</time>
+```
 
-<p>Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:</p>
+Почему это полезно? Ну, есть много разных способов, которыми люди записывают даты. Вышеуказанная дата может быть записана как:
 
-<ul>
- <li>20 Января 2020</li>
- <li>20-ое Января 2020</li>
- <li>Янв 20 2020</li>
- <li>20/01/20</li>
- <li>01/20/20</li>
- <li>20e Janvier 2020</li>
- <li>2020年1月20日</li>
- <li>и другое...</li>
-</ul>
+- 20 Января 2020
+- 20-ое Января 2020
+- Янв 20 2020
+- 20/01/20
+- 01/20/20
+- 20e Janvier 2020
+- 2020 年 1 月 20 日
+- и другое...
 
-<p>Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.</p>
+Но эти разные формы не могут быть легко распознаны компьютерами — что, если вы хотите автоматически захватить даты всех событий на странице и вставить их в календарь? Элемент {{htmlelement ("time")}} позволяет прикрепить к этой цели однозначное машиночитаемое время / дату.
 
-<p>В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:</p>
+В приведённом выше базовом примере приведена простая машиносчитываемая дата, но есть много других возможных вариантов, например:
 
-<pre class="brush: html">&lt;!-- Стандартная дата --&gt;
-&lt;time datetime="2020-01-20"&gt;20 Января 2020&lt;/time&gt;
-&lt;!-- Только год и месяц --&gt;
-&lt;time datetime="2020-01"&gt;Январь 2020&lt;/time&gt;
-&lt;!-- Только месяц и день --&gt;
-&lt;time datetime="01-20"&gt;20 Января&lt;/time&gt;
-&lt;!-- Только время, часы и минуты --&gt;
-&lt;time datetime="19:30"&gt;19:30&lt;/time&gt;
-&lt;!-- Также вы можете отобразить секунды и миллисекунды! --&gt;
-&lt;time datetime="19:30:01.856"&gt;19:30:01.856&lt;/time&gt;
-&lt;!-- Дата и время --&gt;
-&lt;time datetime="2020-01-20T19:30"&gt;7.30pm, 20 Января 2020&lt;/time&gt;
-&lt;!-- Дата и время со смещением по часовому поясу --&gt;
-&lt;time datetime="2020-01-20T19:30+01:00"&gt;7.30pm, 20 Января 2020, — это 8.30pm во Франции.&lt;/time&gt;
-&lt;!-- Вызов номера недели --&gt;
-&lt;time datetime="2020-W04"&gt;Четвёртая неделя 2020&lt;/time&gt;</pre>
+```html
+<!-- Стандартная дата -->
+<time datetime="2020-01-20">20 Января 2020</time>
+<!-- Только год и месяц -->
+<time datetime="2020-01">Январь 2020</time>
+<!-- Только месяц и день -->
+<time datetime="01-20">20 Января</time>
+<!-- Только время, часы и минуты -->
+<time datetime="19:30">19:30</time>
+<!-- Также вы можете отобразить секунды и миллисекунды! -->
+<time datetime="19:30:01.856">19:30:01.856</time>
+<!-- Дата и время -->
+<time datetime="2020-01-20T19:30">7.30pm, 20 Января 2020</time>
+<!-- Дата и время со смещением по часовому поясу -->
+<time datetime="2020-01-20T19:30+01:00">7.30pm, 20 Января 2020, — это 8.30pm во Франции.</time>
+<!-- Вызов номера недели -->
+<time datetime="2020-W04">Четвёртая неделя 2020</time>
+```
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на <a href="https://developer.mozilla.org/ru/docs/Web/HTML/Element">Элемент</a>. В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.</p>
+На этом мы подошли к концу нашего изучения семантики текста HTML. Имейте в виду, что то, что вы видели во время этого курса, не является исчерпывающим списком текстовых элементов HTML. Мы попытались охватить основные из них, с которыми вы, скорее всего, столкнётесь в практической деятельности или, по крайней мере, сочтёте их интересными. Чтобы найти больше элементов HTML, вы можете взглянуть на нашу ссылку на [Элемент](/ru/docs/Web/HTML/Element). В следующей статье мы рассмотрим элементы HTML, которые вы будете использовать для структурирования различных частей HTML-документа.
 
-<p>{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p>
+{{PreviousMenuNext ("Learn/HTML/Introduction_to_HTML/Create_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Продвинутое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Продвинутое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
index 6055a2b1c161e2..2a6f058f8efa0e 100644
--- a/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
+++ b/files/ru/learn/html/introduction_to_html/creating_hyperlinks/index.md
@@ -15,339 +15,313 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks
 original_slug: Learn/HTML/Введение_в_HTML/Создание_гиперссылок
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</div>
+Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки, а также обсуждаются лучшие практики обращения со ссылками.
 
-<p class="summary">Гиперссылки действительно важны — они делают Интернет Интернетом. В этой статье представлен синтаксис, необходимый для создания ссылки,  а также обсуждаются лучшие практики обращения со ссылками.</p>
+| Предварительные требования: | Базовое знакомство с HTML, описанное в статье [Начало работы c HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). Форматирование текста в HTML, описанное в статье [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals). |
+| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.                                                                                                                                                                                                                                                                                                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Базовое знакомство с HTML, описанное в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы c HTML</a>. Форматирование текста в HTML, описанное в статье <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научиться эффективно использовать гиперссылки и связывать несколько файлов вместе.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое гиперссылка?
 
-<h2 id="Что_такое_гиперссылка">Что такое гиперссылка?</h2>
+Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)
 
-<p>Гиперссылки — одно из самых интересных нововведений Интернета. Они были особенностью Сети с самого начала, но именно они превращают Интернет в Интернет. Они позволяют нам связывать наши документы с любым другим документом (или ресурсом), с которым мы хотим. С их помощью мы также можем связывать документы с их конкретными частями, и мы можем сделать приложения доступными на простом веб-адресе (сравните это с локальными приложениями, которые должны быть установлены, и другими такими же вещами). Почти любой веб-контент может быть преобразован в ссылку, так что когда вы кликаете по ней (или иным образом активируете), она заставляет веб-браузер перейти на другой веб-адрес ({{glossary("URL")}}.)</p>
+> **Примечание:** URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).
 
-<div class="note">
-<p><strong>Примечание:</strong> URL-адрес может указывать на файлы HTML, текстовые файлы, изображения, текстовые документы, видео и аудиофайлы и все остальное, что может жить в Интернете. Если веб-браузер не знает, как отображать или обрабатывать файл, он спросит вас, хотите ли вы открыть файл (в этом случае обязанность открытия или обработки файла передаётся в соответствующее локальное приложение на устройстве) или загрузить файл (в этом случае вы можете попытаться разобраться с ним позже).</p>
-</div>
+Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.
 
-<p>Например, домашняя страница BBC содержит большое количество ссылок, которые указывают не только на множество новостей, но и на различные области сайта (меню), страницы входа / регистрации (пользовательские инструменты) и многое другое.</p>
+![frontpage of bbc.co.uk, showing many news items, and navigation menu functionality](https://mdn.mozillademos.org/files/12405/bbc-homepage.png)
 
-<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p>
+## Анатомия ссылки
 
-<h2 id="Анатомия_ссылки">Анатомия ссылки</h2>
+Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите [Ссылки-блоки](#ссылки-блоки)), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как **гипертекстовая ссылка,** или **цель**), который будет содержать веб-адрес, на который вы хотите указать ссылку.
 
-<p>Простая ссылка создаётся путём обёртывания текста (или другого содержимого, смотрите  <a href="#ссылки-блоки">Ссылки-блоки</a>), который вы хотите превратить в ссылку, в элемент {{htmlelement ("a")}}, и придания этому элементу атрибута {{htmlattrxref ("href", "a")}} (который также известен как <strong>гипертекстовая ссылка,</strong> или <strong>цель</strong>), который будет содержать веб-адрес, на который вы хотите указать ссылку.</p>
+```html
+<p>Я создал ссылку на
+  <a href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.
+</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Я создал ссылку на
-  &lt;a href="https://www.mozilla.org/ru/"&gt;домашнюю страницу Mozilla&lt;/a&gt;.
-&lt;/p&gt;</pre>
+Это дало нам следующий результат:
 
-<p>Это дало нам следующий результат:</p>
+Я создал ссылку на [домашнюю страницу Mozilla](https://www.mozilla.org/ru/).
 
-<p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/">домашнюю страницу Mozilla</a>.</p>
+### Добавляем информацию через атрибут title
 
-<h3 id="Добавляем_информацию_через_атрибут_title">Добавляем информацию через атрибут title</h3>
+Другим атрибутом, который вы можете добавить к своим ссылкам, является — `title`. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:
 
-<p>Другим атрибутом, который вы можете добавить к своим ссылкам, является — <code>title</code>. Он предназначен для хранения полезной информации о ссылке. Например, какую информацию содержит страница или другие вещи, о которых вам нужно знать. Например:</p>
-
-<pre class="brush: html">&lt;p&gt;Я создал ссылку на
-  &lt;a href="https://www.mozilla.org/ru/"
+```html
+<p>Я создал ссылку на
+  <a href="https://www.mozilla.org/ru/"
      title="Лучшее место для поиска дополнительной информации
-     о миссии Mozilla и о том, как внести свой вклад"&gt;домашнюю страницу Mozilla
-  &lt;/a&gt;.
-&lt;/p&gt;</pre>
+     о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla
+  </a>.
+</p>
+```
 
-<p>Вот что получилось (описание появится, если навести курсор на ссылку):</p>
+Вот что получилось (описание появится, если навести курсор на ссылку):
 
-<p>Я создал ссылку на <a class="ignore-external" href="https://www.mozilla.org/ru/" title="Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад">домашнюю страницу Mozilla</a>.</p>
+Я создал ссылку на [домашнюю страницу Mozilla](https://www.mozilla.org/ru/ "Лучшее место для поиска дополнительной информации о миссии Mozilla и о том, как внести свой вклад").
 
-<div class="note">
-<p><strong>Примечание</strong>: Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.</p>
-</div>
+> **Примечание:** Описание из атрибута title отображается только при наведении курсора, значит люди, полагающиеся на клавиатурные элементы управления для навигации по веб-страницам, будут испытывать трудности с доступом к информации, которую содержит title. Если информация заголовка действительно важна для удобства использования страницы, то вы должны представить её таким образом, который будет доступен для всех пользователей, например, поместив её в обычный текст.
 
-<h3 id="Активное_изучение_создаём_собственную_ссылку">Активное изучение: создаём собственную ссылку</h3>
+### Активное изучение: создаём собственную ссылку
 
-<p>Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">базовый пример</a> подойдёт.)</p>
+Время упражнения: мы хотели бы, чтобы вы создали любой HTML-документ в текстовом редакторе на своём компьютере (наш [базовый пример](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html) подойдёт.)
 
-<ul>
- <li>Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.</li>
- <li>Теперь превратите некоторые фрагменты документа в ссылки.</li>
- <li>Добавьте ссылкам атрибут <code>title</code>.</li>
-</ul>
+- Попробуйте добавить в тело HTML один или несколько абзацев или другие элементы, о которых вы уже знаете.
+- Теперь превратите некоторые фрагменты документа в ссылки.
+- Добавьте ссылкам атрибут `title`.
 
-<h3 id="Ссылки-блоки">Ссылки-блоки</h3>
+### Ссылки-блоки
 
-<p>Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements">блочный элемент</a>. Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами <code>&lt;a&gt;&lt;/a&gt;.</code></p>
+Как упоминалось ранее, вы можете превратить любой элемент в ссылку, даже [блочный элемент](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Block_versus_inline_elements). Если у вас есть изображение, которые вы хотели бы превратить в ссылку, вы можете просто поместить изображение между тегами `<a></a>.`
 
-<pre class="brush: html">&lt;a href="https://www.mozilla.org/ru/"&gt;
-  &lt;img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу"&gt;
-&lt;/a&gt;</pre>
+```html
+<a href="https://www.mozilla.org/ru/">
+  <img src="mozilla-image.png" alt="логотип mozilla со ссылкой на их домашнюю страницу">
+</a>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.</p>
-</div>
+> **Примечание:** вы узнаете гораздо больше об использовании изображений в Интернете в следующей статье.
 
-<h2 id="Краткое_руководство_по_URL-адресам_и_путям">Краткое руководство по URL-адресам и путям</h2>
+## Краткое руководство по URL-адресам и путям
 
-<p>Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.</p>
+Чтобы полностью понять адреса ссылок, вам нужно понять несколько вещей про URL-адреса и пути к файлам. Этот раздел даст вам информацию, необходимую для достижения этой цели.
 
-<p>URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу <code>https://www.mozilla.org/ru/</code>.</p>
+URL-адрес (Uniform Resource Locator, или единый указатель ресурса, но так его никто не называет) — это просто строка текста, которая определяет, где что-то находится в Интернете. Например, домашняя страница Mozilla находится по адресу `https://www.mozilla.org/ru/`.
 
-<p>URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">creating-hyperlinks</a>.)</p>
+URL-адреса используют пути для поиска файлов. Пути указывают, где в файловой системе находится файл, который вас интересует. Давайте рассмотрим простой пример структуры каталогов (смотрите каталог [creating-hyperlinks](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks).)
 
-<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p>
+![A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively](https://mdn.mozillademos.org/files/12409/simple-directory.png)
 
-<p><strong>Корень</strong> структуры — каталог  <code>creating-hyperlinks</code>. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — <code>index.html</code> и <code>contacts.html</code>. На настоящем веб-сайте <code>index.html</code> был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).</p>
+**Корень** структуры — каталог `creating-hyperlinks`. При работе на локальном веб-сайте у вас будет один каталог, в который входит весь сайт. В корне у нас есть два файла — `index.html` и `contacts.html`. На настоящем веб-сайте `index.html` был бы нашей домашней, или лендинг-страницей (веб-страницей, которая служит точкой входа для веб-сайта или определённого раздела веб-сайта).
 
-<p>В корне есть ещё два каталога —  <code>pdfs</code> и <code>projects</code>. У каждого из них есть один файл внутри — <code>project-brief.pdf</code> и <code>index.html</code>, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два <code>index.html</code> файла в одном проекте, пока они находятся в разных местах файловой системы.  Многие веб-сайты так делают. Второй <code>index.html</code>, возможно, будет главной лендинг-страницей для связанной с проектом информации.</p>
+В корне есть ещё два каталога — `pdfs` и `projects`. У каждого из них есть один файл внутри — `project-brief.pdf` и `index.html`, соответственно. Обратите внимание на то, что вы можете довольно успешно иметь два `index.html` файла в одном проекте, пока они находятся в разных местах файловой системы. Многие веб-сайты так делают. Второй `index.html`, возможно, будет главной лендинг-страницей для связанной с проектом информации.
 
-<ul>
- <li>
-  <p><strong>Тот же каталог</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html</code>), указывающую на <code>contacts.html</code>, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — <code>contacts.html</code>:</p>
+- **Тот же каталог**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень `index.html`), указывающую на `contacts.html`, вам просто нужно указать имя файла, на который вы хотите установить ссылку, так как он находится в том же каталоге, что и текущий файл. Таким образом, URL-адрес, который вы используете — `contacts.html`:
 
-  <pre class="brush: html">&lt;p&gt;Хотите связаться с конкретным сотрудником?
-   Найдите подробную информацию на нашей
-  &lt;a href="contacts.html"&gt;странице контактов&lt;/a&gt;.
-&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Перемещение вниз в подкаталоги</strong>: Если вы хотите подключить ссылку внутри <code>index.html</code> (верхний уровень <code>index.html), указывающую на </code><code>projects/index.html</code>, вам нужно спуститься ниже в директории <code>projects</code> перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - <code>projects/index.html</code>:</p>
+  ```html
+  <p>Хотите связаться с конкретным сотрудником?
+     Найдите подробную информацию на нашей
+    <a href="contacts.html">странице контактов</a>.
+  </p>
+  ```
 
-  <pre class="brush: html">&lt;p&gt;Посетите мою
-  &lt;a href="projects/index.html"&gt;домашнюю страницу проекта&lt;/a&gt;.
-&lt;/p&gt;</pre>
- </li>
- <li>
-  <p><strong>Перемещение обратно в родительские каталоги</strong>: Если вы хотите подключить ссылку внутри <code>projects/index.html</code>, указывающую на <code>pdfs/project-brief.pdf</code>, вам нужно будет подняться на уровень каталога, затем спустится в каталог <code>pdf</code>. "Подняться вверх на уровень каталога" обозначается двумя точками — <code>..</code> — так, URL-адрес, который вы используете <code>../pdfs/project-brief.pdf</code>:</p>
+- **Перемещение вниз в подкаталоги**: Если вы хотите подключить ссылку внутри `index.html` (верхний уровень ` index.html), указывающую на ``projects/index.html `, вам нужно спуститься ниже в директории `projects` перед тем, как указать файл, который вы хотите. Это делается путём указания имени каталога, после которого идёт слеш и затем имя файла. Итак, URL-адрес, который вы используете - `projects/index.html`:
 
-  <pre class="brush: html">&lt;p&gt;Ссылка на
-  &lt;a href="../pdfs/project-brief.pdf"&gt;краткое описание моего проекта&lt;/a&gt;.
-&lt;/p&gt;</pre>
- </li>
-</ul>
+  ```html
+  <p>Посетите мою
+    <a href="projects/index.html">домашнюю страницу проекта</a>.
+  </p>
+  ```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например: <br>
- <code>../../../сложный/путь/к/моему/файлу.html</code>.</p>
-</div>
+- **Перемещение обратно в родительские каталоги**: Если вы хотите подключить ссылку внутри `projects/index.html`, указывающую на `pdfs/project-brief.pdf`, вам нужно будет подняться на уровень каталога, затем спустится в каталог `pdf`. "Подняться вверх на уровень каталога" обозначается двумя точками — `..` — так, URL-адрес, который вы используете `../pdfs/project-brief.pdf`:
 
-<h3 id="Фрагменты_документа">Фрагменты документа</h3>
+  ```html
+  <p>Ссылка на
+    <a href="../pdfs/project-brief.pdf">краткое описание моего проекта</a>.
+  </p>
+  ```
 
-<p>Можно ссылаться на определённую часть документа HTML (известную как <strong>фрагмент документа</strong>), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:</p>
+> **Примечание:** вы можете объединить несколько экземпляров этих функций в сложные URL-адреса, если необходимо, например:
+> `../../../сложный/путь/к/моему/файлу.html`.
 
-<pre class="brush: html">&lt;h2 id="Почтовый_адрес"&gt;Почтовый адрес&lt;/h2&gt;</pre>
+### Фрагменты документа
 
-<p>Затем, чтобы связаться с  этим конкретным  <code>id</code>, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:</p>
+Можно ссылаться на определённую часть документа HTML (известную как **фрагмент документа**), а не только на верхнюю часть документа. Для этого вам сначала нужно назначить атрибут {{htmlattrxref("id")}} элементу, с которым вы хотите связаться. Обычно имеет смысл ссылаться на определённый заголовок, поэтому это выглядит примерно так:
 
-<pre class="brush: html">&lt;p&gt;Хотите написать мне письмо? Используйте наш
-  &lt;a href="contacts.html#Почтовый_адрес"&gt;почтовый адрес&lt;/a&gt;.
-&lt;/p&gt;</pre>
+```html
+<h2 id="Почтовый_адрес">Почтовый адрес</h2>
+```
 
-<p>Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на <em>другую часть того же документа</em>:</p>
+Затем, чтобы связаться с этим конкретным `id`, вы должны включить его в конец URL-адреса, которому предшествует знак решётки, например:
 
-<pre class="brush: html">&lt;p&gt;
-  &lt;a href="#Почтовый_адрес"&gt;Почтовый адрес кампании&lt;/a&gt;
-  можно найти в нижней части этой страницы.
-&lt;/p&gt;</pre>
+```html
+<p>Хотите написать мне письмо? Используйте наш
+  <a href="contacts.html#Почтовый_адрес">почтовый адрес</a>.
+</p>
+```
 
-<h3 id="Абсолютные_и_относительные_URL-адреса">Абсолютные и относительные URL-адреса</h3>
+Вы даже можете использовать ссылку на фрагмент документа отдельно для ссылки на _другую часть того же документа_:
+
+```html
+<p>
+  <a href="#Почтовый_адрес">Почтовый адрес кампании</a>
+  можно найти в нижней части этой страницы.
+</p>
+```
 
-<p>Два понятия, с которыми вы столкнётесь в Интернете, — это <strong>абсолютный URL</strong> и <strong>относительный URL</strong><strong>:</strong></p>
+### Абсолютные и относительные URL-адреса
 
-<dl>
- <dt><strong>Абсолютный URL</strong></dt>
- <dd>Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая {{glossary("protocol","протокол")}} и {{glossary("domain name","доменное имя")}}. Например, если страница <code>index.html</code> загружается в каталог, называемый <code>projects</code>, который находится внутри корня веб-сервера, а домен веб-сайта — <code>http://www.example.com</code>, страница будет доступна по адресу <code>http://www.example.com/projects/index.html</code> (или даже просто <code>http://www.example.com/projects/</code>), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как <code>index.html</code>, для загрузки, если он не указан в URL-адресе.).</dd>
-</dl>
+Два понятия, с которыми вы столкнётесь в Интернете, — это **абсолютный URL** и **относительный URL\*\***:\*\*
 
-<p><em>Абсолютный URL</em> всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.</p>
+- **Абсолютный URL**
+  - : Указывает на местоположение, определяемое его абсолютным местоположением в Интернете, включая {{glossary("protocol","протокол")}} и {{glossary("domain name","доменное имя")}}. Например, если страница `index.html` загружается в каталог, называемый `projects`, который находится внутри корня веб-сервера, а домен веб-сайта — `http://www.example.com`, страница будет доступна по адресу `http://www.example.com/projects/index.html` (или даже просто `http://www.example.com/projects/`), так как большинство веб-серверов просто ищет целевую страницу, такую ​​как `index.html`, для загрузки, если он не указан в URL-адресе.).
 
-<dl>
- <dt><strong>Относительный URL</strong></dt>
- <dd>Указывает расположение <em>относительно </em>файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы <code>http://www.example.com/projects/index.html</code> на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла —  <code>project-brief.pdf</code> — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории <code>pdfs</code> внутри каталога <code>projects</code>, относительная ссылка будет <code>pdfs/project-brief.pdf</code> (аналогичный абсолютный URL был бы <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.).</dd>
-</dl>
+_Абсолютный URL_ всегда будет указывать на одно и то же местоположение, независимо от того, где он используется.
 
-<p><em>Относительный URL</em> будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл <code>index.html</code> из каталога <code>projects</code> в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL <code>pdfs/project-brief.pdf</code> будет вести на <code>http://www.example.com/pdfs/project-brief.pdf</code>, а не на <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p>
+- **Относительный URL**
+  - : Указывает расположение _относительно_ файла, с которого вы связываетесь, это больше похоже на случай, который мы рассматривали в предыдущей секции. Для примера, если мы хотим указать со страницы `http://www.example.com/projects/index.html` на PDF файл, находящийся в той же директории, наш URL может быть просто названием файла — `project-brief.pdf` — никакой дополнительной информации не требуется. Если PDF расположен в поддиректории `pdfs` внутри каталога `projects`, относительная ссылка будет `pdfs/project-brief.pdf` (аналогичный абсолютный URL был бы `http://www.example.com/projects/pdfs/project-brief.pdf`.).
 
-<p>Советуем вам основательно разобраться в этой теме!</p>
+_Относительный URL_ будет указывать на различные места, в зависимости от того, где находится файл, в котором он используется, — например, если мы переместим наш файл `index.html` из каталога `projects` в корневой каталог веб-сервера (верхний уровень, не в директорию) , то относительный URL `pdfs/project-brief.pdf` будет вести на `http://www.example.com/pdfs/project-brief.pdf`, а не на `http://www.example.com/projects/pdfs/project-brief.pdf`.
 
-<h2 id="Практика_написания_хороших_ссылок">Практика написания хороших ссылок</h2>
+Советуем вам основательно разобраться в этой теме!
 
-<p>При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.</p>
+## Практика написания хороших ссылок
 
-<ul>
-</ul>
+При написании ссылок рекомендуется следовать некоторым правилам. Давайте рассмотрим их.
 
-<h3 id="Используйте_чёткие_формулировки_описания_ссылок">Используйте чёткие формулировки описания ссылок</h3>
+### Используйте чёткие формулировки описания ссылок
 
-<p>На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки <em>доступными </em>для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:</p>
+На вашей странице легко добавить ссылки. Но этого не совсем достаточно. Мы должны сделать наши ссылки _доступными_ для всех читателей, независимо от их возможностей и инструментов просмотра страницы, которые они предпочитают. Например:
 
-<ul>
- <li>Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.</li>
- <li>Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.</li>
- <li>Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.</li>
-</ul>
+- Пользователям программ читающих с экрана нравится переходить по ссылкам на странице, читая адрес ссылки в тексте.
+- Поисковые системы используют текст ссылки для индексирования файлов, поэтому рекомендуется включать ключевые слова в текст ссылки, чтобы эффективно описывать, куда ведёт ссылка.
+- Пользователи часто бегло просматривают страницу, не читая каждое слово, и их глаза будут привлечены к тексту, который выделяется, например, ссылки. Им будет полезно описание того, куда ведёт ссылка.
 
-<p>Взгляните на этот пример:</p>
+Взгляните на этот пример:
 
-<p><em><strong>Хороший</strong> текст ссылки:</em> <a href="https://firefox.com">Скачать Firefox</a></p>
+_**Хороший** текст ссылки:_ [Скачать Firefox](https://firefox.com)
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+```html
+<p><a href="https://firefox.com/">
   Скачать Firefox
-&lt;/a&gt;&lt;/p&gt;</pre>
+</a></p>
+```
 
-<p><em><strong>Плохой</strong> текст ссылки:</em> <a href="https://firefox.com/">Нажми сюда</a>, чтобы скачать Firefox</p>
+_**Плохой** текст ссылки:_ [Нажми сюда](https://firefox.com/), чтобы скачать Firefox
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="https://firefox.com/"&gt;
+```html
+<p><a href="https://firefox.com/">
   Нажми сюда
-&lt;/a&gt;
-чтобы скачать Firefox&lt;/p&gt;
-</pre>
+</a>
+чтобы скачать Firefox</p>
+```
 
-<p>Советы:</p>
+Советы:
 
-<ul>
- <li>Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.</li>
- <li>Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).</li>
- <li>Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.</li>
- <li>Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.</li>
-</ul>
+- Не пишите URL-адрес как часть текста ссылки. URL-адреса выглядят сложными, а звучат ещё сложнее, когда программы чтения с экрана читают их по буквам.
+- Не пишите «ссылка» или «ссылки на» в тексте ссылки — это лишнее. Программы чтения с экрана сами проговаривают, что есть ссылка. На экране пользователи также видят, что есть ссылка, потому что ссылки, как правило, оформлены в другом цвете и подчёркнуты (подчёркивая ссылки, вы соблюдаете правила хорошего тона, поскольку пользователи привыкли к этому).
+- Следите за тем, чтобы текст ссылки был как можно короче. Длинный текст ссылки особенно раздражает пользователей программ чтения с экрана, которым придётся услышать всё, что написано.
+- Минимизируйте случаи, когда несколько копий одного и того же текста ссылок указывает на разные страницы. Это может вызвать проблемы для пользователей программ чтения с экрана, которые часто вызывают список ссылок — несколько ссылок, помеченных как «нажмите здесь», «нажмите здесь», «нажмите здесь», будут путать.
 
-<h3 id="Используйте_относительные_ссылки_где_это_возможно">Используйте относительные ссылки, где это возможно</h3>
+### Используйте относительные ссылки, где это возможно
 
-<p>Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах <em>одного сайта</em>  (при ссылке на <em>другие сайты</em> необходимо использовать абсолютную ссылку):</p>
+Из прочитанного выше, вы можете подумать, что всё время использовать абсолютные ссылки — хорошая идея; в конце концов, они не ломаются, когда страница перемещается. Тем не менее, лучше использовать относительные ссылки везде, где это возможно, в пределах _одного сайта_ (при ссылке на _другие сайты_ необходимо использовать абсолютную ссылку):
 
-<ul>
- <li>Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода</li>
- <li>Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System ({{glossary("DNS")}}; также прочтите <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works">Как работает web</a>), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.</li>
-</ul>
+- Во-первых, гораздо проще прописать в коде относительные URL-адреса, как правило, они намного короче абсолютных URL-адресов, что значительно упрощает чтение кода
+- Во-вторых, использование относительных URL-адресов эффективней по следующей причине. Когда вы используете абсолютный URL-адрес, браузер начинает поиск реального местоположения сервера запрашивая адрес у Domain Name System ({{glossary("DNS")}}; также прочтите [Как работает web](/ru/docs/Learn/Getting_started_with_the_web/How_the_Web_works)), затем он переходит на этот сервер и находит файл, который запрашивается. С относительным URL-адресом проще: браузер просто ищет файл, который запрашивается на том же сервере. Используя абсолютные URL-адреса вместо относительных, вы постоянно нагружаете свой браузер дополнительной работой.
 
-<h3 id="Создавая_ссылки_на_не_HTML_ресурсы_—_добавляйте_описание">Создавая ссылки на не HTML ресурсы — добавляйте описание</h3>
+### Создавая ссылки на не HTML ресурсы — добавляйте описание
 
-<p>Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:</p>
+Когда вы создаёте ссылку на файл, нажав на который можно загрузить документ PDF или Word или открыть просмотр видео, прослушивание аудио файла или перейти на страницу с другим, неожиданным для пользователя результатом (всплывающее окно или загрузка Flash-фильма), добавляйте чёткую формулировку, чтобы уменьшить путаницу. Отсутствие описания может раздражать пользователя. Приведём пример:
 
-<ul>
- <li>Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.</li>
- <li>Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.</li>
-</ul>
+- Если вы используете соединение с низкой пропускной способностью и вдруг нажмёте на ссылку без описания, начнётся загрузка большого файла.
+- Если у вас нет установленного Flash-плеера и вы нажмёте ссылку, то внезапно перейдёте на страницу с Flash-контентом.
 
-<p>Посмотрите на примеры, чтобы увидеть, как добавить описание:</p>
+Посмотрите на примеры, чтобы увидеть, как добавить описание:
 
-<pre class="brush: html">&lt;p&gt;&lt;a href="http://www.example.com/large-report.pdf"&gt;
+```html
+<p><a href="http://www.example.com/large-report.pdf">
   Скачать отчёт о продажах (PDF, 10MB)
-&lt;/a&gt;&lt;/p&gt;
+</a></p>
 
-&lt;p&gt;&lt;a href="http://www.example.com/video-stream/"&gt;
+<p><a href="http://www.example.com/video-stream/">
   Посмотреть видео (видео откроется в отдельном окне, HD качество)
-&lt;/a&gt;&lt;/p&gt;
+</a></p>
 
-&lt;p&gt;&lt;a href="http://www.example.com/car-game"&gt;
+<p><a href="http://www.example.com/car-game">
   Играть в гонки (необходим Flash)
-&lt;/a&gt;&lt;/p&gt;</pre>
+</a></p>
+```
 
-<h3 id="Используйте_атрибут_download_когда_создаёте_ссылку">Используйте атрибут download, когда создаёте ссылку</h3>
+### Используйте атрибут download, когда создаёте ссылку
 
-<p>Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут <code>download</code>, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:</p>
+Когда создаёте ссылку на файл, который должен быть загружен, а не открыт в браузере, можете использовать атрибут `download`, чтобы создать имя файла по умолчанию для сохранения . Приведём пример ссылки для загрузки браузера Firefox 39:
 
-<pre class="brush: html">&lt;a href="https://download.mozilla.org/?product=firefox-39.0-SSL&amp;os=win&amp;lang=en-US"
-   download="firefox-39-installer.exe"&gt;
+```html
+<a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US"
+   download="firefox-39-installer.exe">
   Скачать Firefox 39 для Windows
-&lt;/a&gt;</pre>
+</a>
+```
 
-<h2 id="Активное_изучение_создание_меню_навигации">Активное изучение: создание меню навигации</h2>
+## Активное изучение: создание меню навигации
 
-<p>Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.</p>
+Для этого упражнения мы хотим, чтобы вы создали ссылки на страницы в меню навигации в многостраничном сайте. Это один из распространённых способов создания сайта: на каждой странице используется одна и та же структура страниц, включая одно и то же меню навигации, поэтому при нажатии ссылок создаётся впечатление, что вы остаётесь в одном месте: меню остаётся на месте, а контент меняется.
 
-<p>Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">navigation-menu-start</a>):</p>
+Вам нужно скачать или создать следующие страницы в одном каталоге (Смотрите [navigation-menu-start](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start)):
 
-<ul>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li>
- <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li>
-</ul>
+- [index.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html)
+- [projects.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html)
+- [pictures.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html)
+- [social.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html)
 
-<p>Что делать:</p>
+Что делать:
 
-<ol>
- <li>Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.</li>
- <li>Создайте ссылки каждому элементу списка, ведущие на эти страницы.</li>
- <li>Скопируйте созданное меню в каждую страницу.</li>
- <li>На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.</li>
-</ol>
+1.  Добавьте неупорядоченный список в указанном месте в любом html-файле. Список должен состоять из имён страниц (index, projects и т.д.). Меню навигации обычно представляет собой список ссылок, поэтому создание неупорядоченного списка семантически верно.
+2.  Создайте ссылки каждому элементу списка, ведущие на эти страницы.
+3.  Скопируйте созданное меню в каждую страницу.
+4.  На каждой странице удалите только ссылку, которая указывает на эту же страницу (на странице index.html удалить ссылку index и так далее). Дело в том, что, находясь на странице index.html, нам незачем видеть ссылку в меню на эту же страницу. С одной стороны, нам незачем ещё раз переходить на эту же страницу, с другой, такой приём помогает визуально определить, смотря на меню, в какой части сайта мы находимся.
 
-<p>Когда закончите задание, посмотрите, как это должно выглядеть:</p>
+Когда закончите задание, посмотрите, как это должно выглядеть:
 
-<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p>
+![An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items](https://mdn.mozillademos.org/files/12411/navigation-example.png)
 
-<div class="note">
-<p>Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navigation-menu-marked-up</a>.</p>
-</div>
+> **Примечание:** Если не удаётся сделать, или вы не уверены, что сделали верно, посмотрите наш вариант [navigation-menu-marked-up](https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up).
 
-<h2 id="Ссылки_электронной_почты">Ссылки электронной почты</h2>
+## Ссылки электронной почты
 
-<p>Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент {{HTMLElement("a")}} и <code>mailto:</code> — <em>адрес почты</em>.</p>
+Можно создавать ссылки или кнопки, которые при нажатии открывают новое исходящее сообщение электронной почты, а не ссылку на ресурс или страницу. Для этого используется элемент {{HTMLElement("a")}} и `mailto:` — _адрес почты_.
 
-<p>Самыми простыми и часто используемыми формами <code>mailto:</code> являются  <em>subject</em>, <em>cc</em>,<em> bcc</em> и <em>body</em>; дальше прописываем адрес электронной почты. Например:</p>
+Самыми простыми и часто используемыми формами `mailto:` являются _subject_, _cc_, _bcc_ и _body_; дальше прописываем адрес электронной почты. Например:
 
-<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org"&gt;Отправить письмо для nowhere&lt;/a&gt;
-</pre>
+```html
+<a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>
+```
 
-<p>В результате получим ссылку вида: <a href="mailto:nowhere@mozilla.org">Отправить письмо для nowhere</a>.</p>
+В результате получим ссылку вида: [Отправить письмо для nowhere](mailto:nowhere@mozilla.org).
 
-<p>Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".</p>
+Сам адрес электронной почты не является обязательным для заполнения. Если оставить это поле пустым (в поле {{htmlattrxref("href", "a")}} оставить только "mailto:"), откроется новое исходящее сообщение почтовой программой, в поле получателя будет пусто. Это можно использовать для кнопки "Поделиться".
 
-<h3 id="Особенности_и_детали">Особенности и детали</h3>
+### Особенности и детали
 
-<p>Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу <code>mailto</code>. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.</p>
+Помимо адреса электронной почты, вы можете предоставить другую информацию. Фактически, любые стандартные поля для отправки почты могут быть добавлены к указанному вами адресу `mailto`. Часто используемыми из них являются «subject», «cc» и «body» (которые не являются истинным полем заголовка, но позволяют указать дополнительную информацию для нового сообщения электронной почты). Каждое поле и его значение задаются в качестве условия запроса.
 
-<p>Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):</p>
+Вот пример который включает cc(кому отправить копию сообщения, все получатели письма видят список тех кто это письмо получит), bcc(скрытый адрес получателя, никто из получателей не будет видеть полный список получателей письма), subject(тема письма) и body(текст сообщения):
 
-<pre class="brush: html">&lt;a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&amp;bcc=name3@rapidtables.com&amp;amp;subject=The%20subject%20of%20the%20email &amp;amp;body=The%20body%20of%20the%20email"&gt;
+```html
+<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
   Send mail with cc, bcc, subject and body
-&lt;/a&gt;</pre>
+</a>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&amp;) для разделения каждого поля <code>mailto:</code> URL. Для этого используется стандартное описание URL запроса. Прочтите <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">о методе GET</a>, чтобы лучше понимать описание URL запроса.</p>
-</div>
+> **Примечание:** Значение каждого поля должно быть написано в URL-кодировке (то есть с непечатаемыми символами и пробелами [percent-escaped](http://en.wikipedia.org/wiki/Percent-encoding)). Обратите внимание на знак вопроса (?) для разделения основного адреса и дополнительных полей, амперсанд (&) для разделения каждого поля `mailto:` URL. Для этого используется стандартное описание URL запроса. Прочтите [о методе GET](/ru/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method), чтобы лучше понимать описание URL запроса.
 
-<p>Вот несколько примеров использования <code>mailto</code> URLs:</p>
+Вот несколько примеров использования `mailto` URLs:
 
-<ul>
- <li><a href="mailto:">mailto:</a></li>
- <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li>
- <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&amp;subject=This%20is%20the%20subject</a></li>
-</ul>
+- <mailto:>
+- <mailto:nowhere@mozilla.org>
+- <mailto:nowhere@mozilla.org,nobody@mozilla.org>
+- <mailto:nowhere@mozilla.org?cc=nobody@mozilla.org>
+- <mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject>
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.</p>
+Этой информации достаточно для создания ссылок! Вы вернётесь к ссылкам позже, когда начнёте изучать стили. Дальше вы рассмотрите семантику текста и более сложные и необычные возможности, которые будут полезны при создании контента сайта. В следующей главе будет рассматриваться продвинутое форматирование текста.
 
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p>
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
\ No newline at end of file
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/debugging_html/index.md b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
index eb14c7a8d88ac6..89a3af7301414e 100644
--- a/files/ru/learn/html/introduction_to_html/debugging_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/debugging_html/index.md
@@ -10,173 +10,156 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
 original_slug: Learn/HTML/Введение_в_HTML/Debugging_HTML
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
-
-<p class="summary">Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Что нужно знать:</th>
-   <td>Базовые знания HTML на уровне <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Чему вы научитесь:</th>
-   <td>Искать проблемы в HTML с помощью инструментов отладки.</td>
-  </tr>
- </tbody>
-</table>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
 
-<h2 id="Отладка_—_это_не_страшно">Отладка — это не страшно</h2>
-
-<p>Во время написания какого-нибудь кода, обычно все идёт хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке <a href="https://www.rust-lang.org/">Rust</a>, компилятор укажет на ошибку:</p>
+Написать HTML — здорово, но как понять, где ошибка, когда что-то не работает? В этой статье описаны несколько инструментов, которые помогают искать и исправлять ошибки в HTML.
 
-<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на <code>println!(Hello, world!");</code> , то заметите, что здесь отсутствует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.</p>
+| Что нужно знать:   | Базовые знания HTML на уровне [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B), [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals), и [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA). |
+| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Чему вы научитесь: | Искать проблемы в HTML с помощью инструментов отладки.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 
-<p>Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.</p>
+## Отладка — это не страшно
 
-<h2 id="HTML_и_отладка">HTML и отладка</h2>
+Во время написания какого-нибудь кода, обычно все идёт хорошо, пока не появляется тот момент, когда вы совершаете ошибку. Итак, ваш код не работает, или работает не так, как вы задумывали. Если вы попытаетесь скомпилировать неработающую программу на языке [Rust](https://www.rust-lang.org/), компилятор укажет на ошибку:
 
-<p>HTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является <em>интерпретируемым</em>, а не <em>компилируемым</em>). Синтаксис HTML элементов  намного понятнее, чем у "настоящих языков программирования", таких как Rust, {{glossary("JavaScript")}}, или {{glossary("Python")}}. Способ, которым браузеры читают HTML более <strong>толерантен</strong>, чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.</p>
+![A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string.](https://mdn.mozillademos.org/files/12435/error-message.png)В данном случае, сообщение об ошибке понять относительно просто — "unterminated double quote string". Если вы внимательно посмотрите на `println!(Hello, world!");` , то заметите, что здесь отсутствует двойная кавычка. Разумеется, сообщения об ошибках могут становиться куда более сложными для понимания по мере роста вашего кода, и даже самые простые случаи могут показаться пугающими для тех, кто ничего не знает о Rust.
 
-<h3 id="Толерантный_код">Толерантный код</h3>
+Но не бойтесь отладки! Чтобы комфортно писать и отлаживать любой код, нужно понимать язык и его инструменты.
 
-<p>Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнётесь:</p>
+## HTML и отладка
 
-<ul>
- <li><strong>Синтаксические ошибки (Syntax errors)</strong>: Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.</li>
- <li><strong>Логические ошибки (Logic errors)</strong>: Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.</li>
-</ul>
+HTML не так сложен к пониманию, как Rust. HTML не компилируется в какую-либо другую форму перед тем, как браузер проанализирует это и покажет результат (он является _интерпретируемым_, а не _компилируемым_). Синтаксис HTML элементов намного понятнее, чем у "настоящих языков программирования", таких как Rust, {{glossary("JavaScript")}}, или {{glossary("Python")}}. Способ, которым браузеры читают HTML более **толерантен**, чем у языков программирования, интерпретирующих свой код строже. Это одновременно и плохо, и хорошо.
 
-<p>HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутствуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!</p>
+### Толерантный код
 
-<div class="note">
-<p><strong>На заметку</strong>: HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.</p>
-</div>
+Так что же означает толерантный? В общих чертах, когда вы напортачили в коде, есть два типа ошибок, с которыми вы столкнётесь:
 
-<h3 id="Активное_обучение_Знакомство_с_толерантным_кодом">Активное обучение: Знакомство с толерантным кодом</h3>
+- **Синтаксические ошибки (Syntax errors)**: Это ошибки в правильности написания, как это было выше, в примере с Rust. Такие обычно легко исправлять, в той мере, в какой вы знакомы с синтаксисом языка и знаете, что означают сообщения об ошибках.
+- **Логические ошибки (Logic errors)**: Это ошибки, появляющиеся в том случае, если синтаксис корректен, но код не выполняет своего предназначения, то есть программа выполняется неверно. Такие исправлять сложнее, чем синтаксические, поскольку не выводится сообщений, указывающих место, где вы ошиблись.
 
-<p>Время изучить природу толерантного кода в HTML.</p>
+HTML не страдает от синтаксических ошибок, потому что браузер читает код толерантно, в том смысле, что страницы могут отображаться даже если синтаксические ошибки присутствуют. Браузеры имеют встроенные правила по интерпретации неверно написанной разметки, и вы можете запустить что-либо, даже если вы имели в виду другое. Это может стать настоящей проблемой!
 
-<ol>
- <li>Для начала, скачайте наш <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">пример отладки</a> и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.</li>
- <li>Далее, откройте её в браузере. Вы увидите нечто вроде этого :<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
- <li>Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа):
-  <pre class="brush: html">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;
+> **Примечание:** **На заметку**: HTML читается толерантно, потому что когда веб только появился, было решено позволить людям публиковать контент даже при условии некорректностей в коде, так как это куда более важно, чем уверенность в абсолютно верном синтаксисе. Веб не был бы сейчас так популярен, если бы относился к новичкам строго.
 
-&lt;p&gt;What causes errors in HTML?
+### Активное обучение: Знакомство с толерантным кодом
 
-&lt;ul&gt;
-  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
-      then its effect can spread to areas you didn't intend
+Время изучить природу толерантного кода в HTML.
 
-  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
-      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
-      what is this?&lt;/em&gt;
+1.  Для начала, скачайте наш [пример отладки](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html) и сохраните локально. Эта демонстрация намеренно написана с ошибками, которые нам предстоит обнаружить.
+2.  Далее, откройте её в браузере. Вы увидите нечто вроде этого :![A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. ](https://mdn.mozillademos.org/files/12437/badly-formed-html.png)
+3.  Сейчас документ выглядит не особо хорошо; Давайте посмотрим в код и выясним почему (Показано только тело документа):
 
-  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
-      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
-      homepage&lt;/a&gt;
-&lt;/ul&gt;</pre>
- </li>
- <li>Рассмотрим проблемы:
-  <ul>
-   <li>У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.</li>
-   <li>Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.</li>
-   <li>Следующая часть нарушает правила вложенности: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.</li>
-   <li>В атрибуте {{htmlattrxref("href","a")}} отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.</li>
-  </ul>
- </li>
- <li>Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Обзор инструментов разработки в браузерах</a>.</li>
- <li>В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
- <li>Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты):
-  <ul>
-   <li>Параграфы и элементы списка получены с закрывающими тегами.</li>
-   <li>Было неочевидно, где элемент <code>&lt;strong&gt;</code> должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!</li>
-   <li>Некорректная вложенность была исправлена браузером следующим образом:
-    <pre class="brush: html">&lt;strong&gt;strong
-  &lt;em&gt;strong emphasised?&lt;/em&gt;
-&lt;/strong&gt;
-&lt;em&gt; what is this?&lt;/em&gt;</pre>
-   </li>
-   <li>Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так:
-    <pre class="brush: html">&lt;li&gt;
-  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
-  Let's look at an example: &lt;/strong&gt;
-&lt;/li&gt;</pre>
-   </li>
-  </ul>
- </li>
-</ol>
+    ```html
+    <h1>HTML debugging examples</h1>
 
-<h3 id="Валидация_HTML">Валидация HTML</h3>
+    <p>What causes errors in HTML?
 
-<p>Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?</p>
+    <ul>
+      <li>Unclosed elements: If an element is <strong>not closed properly,
+          then its effect can spread to areas you didn't intend
 
-<p>Лучше всего проверить страницу в  <a href="https://validator.w3.org/">сервисе валидации разметки</a>. Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчёт по ошибкам в нем.</p>
-
-<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>
+      <li>Badly nested elements: Nesting elements properly is also very important
+          for code behaving correctly. <strong>strong <em>strong emphasised?</strong>
+          what is this?</em>
 
-<p>HTML можно проверить по адресу, загрузив файл или напрямую ввести код HTML.</p>
+      <li>Unclosed attributes: Another common source of HTML problems. Let's
+          look at an example: <a href="https://www.mozilla.org/>link to Mozilla
+          homepage</a>
+    </ul>
+    ```
 
-<h3 id="Активное_обучение_Валидируем_HTML-документ">Активное обучение: Валидируем HTML-документ</h3>
+4.  Рассмотрим проблемы:
 
-<p>Попробуем проверить <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">документ-пример</a>.</p>
+    - У {{htmlelement("p","параграфа")}} и {{htmlelement("li","элемента списка")}} не закрыты теги. На изображении выше видно, что разметка не пострадала, так как браузеру легко сделать вывод о том, где заканчивается один элемент и начинается другой.
+    - Первый {{htmlelement("strong")}} элемент также не имеет закрывающего тега. Это уже более проблематично, так как сложно сказать, где элемент должен заканчиваться. На деле, весь оставшийся текст был выделен жирным.
+    - Следующая часть нарушает правила вложенности: `<strong>strong <em>strong emphasised?</strong> what is this?</em>`. В этом случае код тоже сложно проинтерпретировать по причине, описанной выше.
+    - В атрибуте {{htmlattrxref("href","a")}} отсутствует закрывающая двойная кавычка. Это послужило причиной крупной проблемы — ссылка не воспроизвелась вовсе.
 
-<ol>
- <li>Откройте <a href="https://validator.w3.org/">сервис валидации разметки</a> в браузере.</li>
- <li>Перейдите в режим <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li>
- <li>Скопируйте весь код документа (не только body) и вставьте в место для ввода.</li>
- <li>Нажмите на <em>Check (проверить)</em>.</li>
-</ol>
+5.  Сейчас же посмотрим, как браузер сгенерировал собственную разметку, в противовес исходной разметке документа. Чтобы сделать это, воспользуемся инструментами разработчика. Если вы не знакомы с инструментами разработчика, потратьте несколько минут на [Обзор инструментов разработки в браузерах](/ru/docs/Learn/Discover_browser_developer_tools).
+6.  В DOM инспекторе вы можете увидеть как сгенерировалась новая разметка: ![The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser.](https://mdn.mozillademos.org/files/12439/html-inspector.png)
+7.  Используя DOM инспектор, давайте рассмотрим детали нашего кода, чтобы увидеть, как браузер пытается исправить наши ошибки в HTML (мы обозреваем в Firefox; другой современный браузер должен выдать те же результаты):
 
-<p>Вы увидите список ошибок и другую информацию.</p>
+    - Параграфы и элементы списка получены с закрывающими тегами.
+    - Было неочевидно, где элемент `<strong>` должен был закрыться, так что браузер обернул каждый отдельный блок текста своими собственными тегами strong, причём до самого низа документа!
+    - Некорректная вложенность была исправлена браузером следующим образом:
 
-<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>
+      ```html
+      <strong>strong
+        <em>strong emphasised?</em>
+      </strong>
+      <em> what is this?</em>
+      ```
 
-<h4 id="Работа_с_сообщениями_об_ошибках">Работа с сообщениями об ошибках</h4>
+    - Ссылка с отсутствующими двойными кавычками была удалена насовсем. Последний элемент списка будет выглядеть так:
 
-<p>Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдёмся по всем ошибкам и разберём, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.</p>
-
-<ul>
- <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдёте нужное место.</li>
- <li>"Unclosed element <code>strong</code>":  Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.</li>
- <li>"End tag <code>strong</code> violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.</li>
- <li>"End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.</li>
- <li>"End of file seen and there were open elements": Файл закончился, но некоторые элементы не закрыты. Сообщение указывает на конец файла, в данном случае не закрыт элемент
-  <pre>example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>
-
-  <div class="note">
-  <p><strong>Примечание</strong>: Свойство без закрывающей кавычки может проглотить закрывающий тег — браузер считает его частью значения этого свойства.</p>
-  </div>
- </li>
- <li>"Unclosed element <code>ul</code>": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.</li>
-</ul>
-
-<p>Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.</p>
-
-<p>Когда вы увидите эту надпись, в вашем документе больше нет ошибок:</p>
-
-<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.</p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+      ```html
+      <li>
+        <strong>Unclosed attributes: Another common source of HTML problems.
+        Let's look at an example: </strong>
+      </li>
+      ```
+
+### Валидация HTML
+
+Из примера выше ясно, что стоит проверять валидность HTML. В простом примере сверху можно просто просмотреть весь код и найти ошибки, но как быть с огромными, сложными страницами?
+
+Лучше всего проверить страницу в [сервисе валидации разметки](https://validator.w3.org/). Его создал и поддерживает W3C — организация, которая занимается спецификациями HTML, CSS и других веб-технологий. Сервис проверит ваш HTML и составит отчёт по ошибкам в нем.
+
+![The HTML validator homepage](https://mdn.mozillademos.org/files/12441/validator.png)
+
+HTML можно проверить по адресу, загрузив файл или напрямую ввести код HTML.
+
+### Активное обучение: Валидируем HTML-документ
+
+Попробуем проверить [документ-пример](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html).
+
+1.  Откройте [сервис валидации разметки](https://validator.w3.org/) в браузере.
+2.  Перейдите в режим [Validate by Direct Input](https://validator.w3.org/#validate_by_input).
+3.  Скопируйте весь код документа (не только body) и вставьте в место для ввода.
+4.  Нажмите на _Check (проверить)_.
+
+Вы увидите список ошибок и другую информацию.
+
+![A list of of HTML validation results from the W3C markup validation service](https://mdn.mozillademos.org/files/12443/validation-results.png)
+
+#### Работа с сообщениями об ошибках
+
+Обычно сразу ясно, что значат сообщения, но иногда приходится постараться, чтобы понять, в чем дело. Сейчас мы пройдёмся по всем ошибкам и разберём, что они значат. Обратите внимание, что в сообщениях указаны строка и столбец кода, чтобы ошибки было проще искать.
+
+- "End tag `li` implied, but there were open elements" (2 instances): Нет явного закрывающего тега, хотя браузер догадывается, где он должен быть. Сообщение указывает на строку после той, на которой ожидался закрывающий тег, но вы найдёте нужное место.
+- "Unclosed element `strong`": Это очень простая ошибка — элемент {{htmlelement("strong")}} не закрыт, и сообщение указывает прямо на открывающий тег.
+- "End tag `strong` violates nesting rules": Элемент неправильно вложен — на этом уровне нет парного открывающего тега.
+- "End of file reached when inside an attribute value. Ignoring tag": Загадочное сообщение. Дело в том, что где-то (скорее всего, в конце документа) неправильно прописано свойство элемента, и конец файла оказался внутри этого свойства. В браузере не видно ссылки — скорее всего, проблема рядом с ней.
+- "End of file seen and there were open elements": Файл закончился, но некоторые элементы не закрыты. Сообщение указывает на конец файла, в данном случае не закрыт элемент
+
+  ```
+  example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html>
+  ```
+
+  > **Примечание:** Свойство без закрывающей кавычки может проглотить закрывающий тег — браузер считает его частью значения этого свойства.
+
+- "Unclosed element `ul`": Странно, ведь элемент {{htmlelement("ul")}} закрыт. Настоящая проблема всё там же — элемент {{htmlelement("a")}} не закрыт из-за недостающей кавычки в свойстве.
+
+Если некоторые ошибки кажутся вам странными, начните исправление с остальных и проверьте документ ещё раз. Иногда одна ошибка ломает большую часть документа.
+
+Когда вы увидите эту надпись, в вашем документе больше нет ошибок:
+
+![Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."](https://mdn.mozillademos.org/files/12445/valid-html-banner.png)
+
+## Заключение
+
+Теперь вы умеете отлаживать HTML. С новыми знаниями вам будет проще разобраться и в отладке более сложных языков — например, CSS и JavaScript. На этом мы заканчиваем вводный модуль курса HTML — время попробовать свои силы в упражнениях.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
+
+## В этом модуле
+
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
index 3a5e91a3c7172a..0cb09b147c1ac5 100644
--- a/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
+++ b/files/ru/learn/html/introduction_to_html/document_and_website_structure/index.md
@@ -12,281 +12,263 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure
 original_slug: Learn/HTML/Введение_в_HTML/Структура_документа_и_веб-сайта
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div>
+В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.
 
-<p class="summary">В дополнение к определению отдельных частей вашей страницы (таких как «абзац» или «изображение»), {{glossary("HTML")}} также содержит ряд элементов блочного уровня, используемых для определения областей вашего веб-сайта (такие как «заголовок», «навигационное меню», «колонка основного содержимого»). В этой статье рассматривается, как планировать базовую структуру сайта и писать HTML для представления этой структуры.</p>
+| Необходимые знания: | Базовое знакомство с HTML, описано в разделе [Начало работы с HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started). Форматирование текста в HTML, описано в разделе [Основы текста в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals). Как работают гиперссылки, описано в разделе [Создание гиперссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks). |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.                                                                                                                                                                                                                                                                                       |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовое знакомство с HTML, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>. Форматирование текста в HTML, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Основы текста в HTML</a>. Как работают гиперссылки, описано в разделе <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Создание гиперссылок</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.</td>
-  </tr>
- </tbody>
-</table>
+## Основные составляющие документа
 
-<h2 id="Основные_составляющие_документа">Основные составляющие документа</h2>
+Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:
 
-<p>Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:</p>
+- Заголовок (колонтитул)
+  - : Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
+- Навигационное меню
+  - : Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает [доступность](/ru/docs/Learn/Accessibility), поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
+- Основное содержимое
+  - : Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!
+- Боковая панель
+  - : Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
+- Нижний колонтитул (футер)
+  - : Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.
 
-<dl>
- <dt>Заголовок (колонтитул)</dt>
- <dd>Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.</dd>
- <dt>Навигационное меню</dt>
- <dd>Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остаётся неизменной на всех страницах сайта — наличие непоследовательной навигации на вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает <a href="/en-US/docs/Learn/Accessibility">доступность</a>, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.</dd>
- <dt>Основное содержимое</dt>
- <dd>Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определённо будет меняться от страницы к странице!</dd>
- <dt>Боковая панель</dt>
- <dd>Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т.д. Обычно она относится к содержимому в основном контенте (например, на странице со статьёй, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.</dd>
- <dt>Нижний колонтитул (футер)</dt>
- <dd>Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для {{Glossary("SEO")}} целей, предоставляя ссылки для быстрого доступа к популярному контенту.</dd>
-</dl>
+"Типичный веб-сайт" может быть структурирован примерно так:
 
-<p>"Типичный веб-сайт" может быть структурирован примерно так:</p>
+![](https://mdn.mozillademos.org/files/17069/Sample_website__ru.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/17069/Sample_website__ru.png" style="border-style: solid; border-width: 1px; height: 291px; width: 600px;"></p>
+## HTML для структурирования содержимого
 
-<h2 id="HTML_для_структурирования_содержимого">HTML для структурирования содержимого</h2>
+Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и **использовать правильный элемент для правильной работы**.
 
-<p>Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею вы поняли. С правильным CSS вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и <strong>использовать правильный элемент для правильной работы</strong>. </p>
+Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?
 
-<p>Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчёт людей со слабым зрением, к примеру, для которых концепция "розового" и "большого шрифта" не будет полезной?</p>
+> **Примечание:** Люди с дальтонизмом составляют около [8% мирового населения](http://www.color-blindness.com/2006/04/28/colorblind-population/). Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было [285 миллионов таких людей](https://en.wikipedia.org/wiki/Visual_impairment), а общая численность населения составляла [около 7 миллиардов](https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Люди с дальтонизмом составляют около <a href="http://www.color-blindness.com/2006/04/28/colorblind-population/">8% мирового населения</a>. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было <a href="https://en.wikipedia.org/wiki/Visual_impairment">285 миллионов таких людей</a>, а общая численность населения составляла <a href="https://en.wikipedia.org/wiki/World_human_population#/media/File:World_population_history.svg">около 7 миллиардов</a>).</p>
-</div>
-
-<p>В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их <em>функциональности</em> — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure">последствий неиспользования правильной структуры элементов и семантики для правильной работы.</a></p>
+В своём HTML-коде вы можете размечать разделы содержимого сайта на основе их _функциональности_ — использовать элементы, которые представляют разделы контента, описанные выше, а вспомогательные технологии, такие как программы чтения с экрана, смогут распознавать эти элементы и помогать в таких задачах, как "найти основную навигацию" или "найти основное содержимое". Как мы упоминали ранее в ходе курса, существует ряд [последствий неиспользования правильной структуры элементов и семантики для правильной работы.](/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Why_do_we_need_structure)
 
-<p>Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:</p>
+Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:
 
-<ul>
- <li><strong>Заголовок: </strong>{{htmlelement("header")}}.</li>
- <li><strong>Навигационное меню: </strong>{{htmlelement("nav")}}.</li>
- <li><strong>Основное содержимое: </strong>{{htmlelement("main")}}, с различными подразделами содержимого, представленными элементами {{HTMLElement("article")}}, {{htmlelement("section")}} и {{htmlelement("div")}}.</li>
- <li><strong>Боковая панель: </strong>{{htmlelement("aside")}}, обычно располагается внутри {{htmlelement("main")}}.</li>
- <li><strong>Нижний колонтитул: </strong>{{htmlelement("footer")}}.</li>
-</ul>
+- **Заголовок:** {{htmlelement("header")}}.
+- **Навигационное меню:** {{htmlelement("nav")}}.
+- **Основное содержимое:** {{htmlelement("main")}}, с различными подразделами содержимого, представленными элементами {{HTMLElement("article")}}, {{htmlelement("section")}} и {{htmlelement("div")}}.
+- **Боковая панель:** {{htmlelement("aside")}}, обычно располагается внутри {{htmlelement("main")}}.
+- **Нижний колонтитул:** {{htmlelement("footer")}}.
 
-<h3 id="Активное_обучение_исследование_кода_для_нашего_примера">Активное обучение: исследование кода для нашего примера</h3>
+### Активное обучение: исследование кода для нашего примера
 
-<p>Наш пример, представленный выше, содержит следующий код (Вы также можете <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">найти пример в нашем репозитории Github</a>). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.</p>
+Наш пример, представленный выше, содержит следующий код (Вы также можете [найти пример в нашем репозитории Github](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html)). Мы хотели бы, чтобы вы взглянули на приведённый выше пример, а затем просмотрели код ниже, чтобы узнать, из каких частей он состоит.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
 
-    &lt;title&gt;Заголовок моей страницы&lt;/title&gt;
-    &lt;link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"&gt;
-    &lt;link rel="stylesheet" href="style.css"&gt;
+    <title>Заголовок моей страницы</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" href="style.css">
 
-    &lt;!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer--&gt;
-    &lt;!--[if lt IE 9]&gt;
-      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"&gt;&lt;/script&gt;
-    &lt;![endif]--&gt;
-  &lt;/head&gt;
+    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
+    <!--[if lt IE 9]>
+      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
+    <![endif]-->
+  </head>
 
-  &lt;body&gt;
-    &lt;!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта --&gt;
+  <body>
+    <!-- Вот наш главный заголовок, который используется на всех страницах нашего веб-сайта -->
 
-    &lt;header&gt;
-      &lt;h1&gt;Заголовок&lt;/h1&gt;
-    &lt;/header&gt;
+    <header>
+      <h1>Заголовок</h1>
+    </header>
 
-    &lt;nav&gt;
-      &lt;ul&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Домашняя страница&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Наша команда&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Проекты&lt;/a&gt;&lt;/li&gt;
-        &lt;li&gt;&lt;a href="#"&gt;Контакты&lt;/a&gt;&lt;/li&gt;
-      &lt;/ul&gt;
+    <nav>
+      <ul>
+        <li><a href="#">Домашняя страница</a></li>
+        <li><a href="#">Наша команда</a></li>
+        <li><a href="#">Проекты</a></li>
+        <li><a href="#">Контакты</a></li>
+      </ul>
 
-       &lt;!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. --&gt;
+       <!-- Форма поиска — это ещё один распространённый нелинейный способ навигации по веб-сайту. -->
 
-       &lt;form&gt;
-         &lt;input type="search" name="q" placeholder="Search query"&gt;
-         &lt;input type="submit" value="Go!"&gt;
-       &lt;/form&gt;
-     &lt;/nav&gt;
+       <form>
+         <input type="search" name="q" placeholder="Search query">
+         <input type="submit" value="Go!">
+       </form>
+     </nav>
 
-    &lt;!-- Здесь основное содержимое нашей страницы --&gt;
-    &lt;main&gt;
+    <!-- Здесь основное содержимое нашей страницы -->
+    <main>
 
-      &lt;!-- Она содержит статью --&gt;
-      &lt;article&gt;
-        &lt;h2&gt;Заголовок статьи&lt;/h2&gt;
+      <!-- Она содержит статью -->
+      <article>
+        <h2>Заголовок статьи</h2>
 
-        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.&lt;/p&gt;
+        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>
 
-        &lt;h3&gt;Подраздел&lt;/h3&gt;
+        <h3>Подраздел</h3>
 
-        &lt;p&gt;Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.&lt;/p&gt;
+        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>
 
-        &lt;p&gt;Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.&lt;/p&gt;
+        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>
 
-        &lt;h3&gt;Ещё один подраздел&lt;/h3&gt;
+        <h3>Ещё один подраздел</h3>
 
-        &lt;p&gt;Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.&lt;/p&gt;
+        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
 
-        &lt;p&gt;Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.&lt;/p&gt;
-      &lt;/article&gt;
+        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
+      </article>
 
-      &lt;!-- Дополнительный контент также может быть вложен в основной контент --&gt;
-      &lt;aside&gt;
-        &lt;h2&gt;Связанные темы&lt;/h2&gt;
+      <!-- Дополнительный контент также может быть вложен в основной контент -->
+      <aside>
+        <h2>Связанные темы</h2>
 
-        &lt;ul&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Мне нравится стоять рядом с берегом моря&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;&gt;Мне нравится стоять рядом с морем&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Даже на севере Англии&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Здесь не перестаёт дождь&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href="#"&gt;Лаааадно...&lt;/a&gt;&lt;/li&gt;
-        &lt;/ul&gt;
-      &lt;/aside&gt;
+        <ul>
+          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
+          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
+          <li><a href="#">Даже на севере Англии</a></li>
+          <li><a href="#">Здесь не перестаёт дождь</a></li>
+          <li><a href="#">Лаааадно...</a></li>
+        </ul>
+      </aside>
 
-    &lt;/main&gt;
+    </main>
 
-    &lt;!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта --&gt;
+    <!-- И вот наш главный нижний колонтитул, который используется на всех страницах нашего веб-сайта -->
 
-    &lt;footer&gt;
-      &lt;p&gt;©Авторские права никому не принадлежат, 2050. Все права защищены.&lt;/p&gt;
-    &lt;/footer&gt;
+    <footer>
+      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.</p>
+    </footer>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+  </body>
+</html>
+```
 
-<p>Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.</p>
+Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут вам в этом. Мы не просим вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождём, пока вы не начнёте изучать CSS-макет как часть темы CSS.
 
-<h2 id="Подробнее_об_элементах_HTML_макета">Подробнее об элементах HTML макета</h2>
+## Подробнее об элементах HTML макета
 
-<p>Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью <a href="/en-US/docs/Web/HTML/Element">HTML-элементы</a>. Пока что это основные определения, которые вы должны попытаться понять:</p>
+Полезно понять общий смысл всех структурных элементов HTML — это то, над чем вы будете работать постепенно, когда начнёте получать больше опыта с веб-разработкой. Вы можете ознакомиться с деталями, прочитав статью [HTML-элементы](/ru/docs/Web/HTML/Element). Пока что это основные определения, которые вы должны попытаться понять:
 
-<ul>
- <li>{{HTMLElement('main')}} предназначен для содержимого, <em>уникального для этой страницы</em>. Используйте <code>&lt;main&gt;</code> только <em>один</em> раз на странице и размещайте прямо внутри {{HTMLElement('body')}}. В идеале он не должен быть вложен в другие элементы.</li>
- <li>{{HTMLElement('article')}} окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).</li>
- <li>{{HTMLElement('section')}} подобен <code>&lt;article&gt;</code>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с <a href="/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy">заголовка</a>. Также обратите внимание, что в зависимости от контекста вы можете разбить <code>&lt;article&gt;</code> на несколько <code>&lt;section&gt;</code> или, наоборот, <code>&lt;section&gt;</code> на несколько <code>&lt;article&gt;</code>.</li>
- <li>{{HTMLElement('aside')}} содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).</li>
- <li>{{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с <a href="/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title">titles и headings</a>). </li>
- <li>{{HTMLElement('nav')}} содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.</li>
- <li>{{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.</li>
-</ul>
+- {{HTMLElement('main')}} предназначен для содержимого, _уникального для этой страницы_. Используйте `<main>` только _один_ раз на странице и размещайте прямо внутри {{HTMLElement('body')}}. В идеале он не должен быть вложен в другие элементы.
+- {{HTMLElement('article')}} окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
+- {{HTMLElement('section')}} подобен `<article>`, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с [заголовка](/en-US/Learn/HTML/Howto/Set_up_a_proper_title_hierarchy). Также обратите внимание, что в зависимости от контекста вы можете разбить `<article>` на несколько `<section>` или, наоборот, `<section>` на несколько `<article>`.
+- {{HTMLElement('aside')}} содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
+- {{HTMLElement('header')}} представляет собой группу вводного содержимого. Если он дочерний элемент {{HTMLElement('body')}}, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент {{HTMLElement('article')}} или {{HTMLElement('section')}}, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с [titles и headings](/en-US/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML#Adding_a_title)).
+- {{HTMLElement('nav')}} содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
+- {{HTMLElement('footer')}} представляет собой группу конечного контента для страницы.
 
-<h3 id="Несемантические_обёртки">Несемантические обёртки</h3>
+### Несемантические обёртки
 
-<p>Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.</p>
+Иногда вы будете сталкиваться с ситуацией, когда вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, {{glossary("CSS")}} или {{glossary("JavaScript")}}. Для таких случаев в HTML есть элементы {{HTMLElement("div")}} и {{HTMLElement("span")}}. Вам следует использовать их с подходящим значением атрибута {{htmlattrxref('class')}} или {{htmlattrxref('id')}}, чтобы можно было легко получить к ним доступ.
 
-<p>{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:</p>
+{{HTMLElement("span")}} — это строчный несемантический элемент, который стоит использовать только если вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:
 
-<pre class="brush: html">&lt;p&gt;Пьяный Король возвратился в свою комнату в 01:00
-и всё никак не мог войти в дверь: хмель мешал &lt;span class="editor-note"&gt;[Примечание редактора: В этот момент
-свет на сцене должен быть приглушён]&lt;/span&gt;.&lt;/p&gt;</pre>
+```html
+<p>Пьяный Король возвратился в свою комнату в 01:00
+и всё никак не мог войти в дверь: хмель мешал <span class="editor-note">[Примечание редактора: В этот момент
+свет на сцене должен быть приглушён]</span>.</p>
+```
 
-<p>В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.</p>
+В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.
 
-<p>{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:</p>
+{{HTMLElement("div")}} — это блочный несемантический элемент, который следует использовать только если вы не можете подобрать более подходящий семантический блочный элемент или если не хотите добавлять какие-либо конкретные значения. Например, представьте виджет корзины в интернет-магазине, который вы можете открыть в любой момент нахождения на сайте:
 
-<pre class="brush: html">&lt;div class="shopping-cart"&gt;
-  &lt;h2&gt;Корзина&lt;/h2&gt;
-  &lt;ul&gt;
-    &lt;li&gt;
-      &lt;p&gt;&lt;a href=""&gt;&lt;strong&gt;Silver earrings&lt;/strong&gt;&lt;/a&gt;: $99.95.&lt;/p&gt;
-      &lt;img src="../products/3333-0985/thumb.png" alt="Серебряные серьги"&gt;
-    &lt;/li&gt;
-    &lt;li&gt;
+```html
+<div class="shopping-cart">
+  <h2>Корзина</h2>
+  <ul>
+    <li>
+      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
+      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
+    </li>
+    <li>
       ...
-    &lt;/li&gt;
-  &lt;/ul&gt;
-  &lt;p&gt;Итого: $237.89&lt;/p&gt;
-&lt;/div&gt;</pre>
-
-<p>Ему не подходит <code>&lt;aside&gt;</code>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и  <code>&lt;section&gt;</code>, т. к. это не часть основного содержимого страницы. Поэтому <code>&lt;div&gt;</code> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.</p>
-
-<div class="warning">
-<p><strong>Внимание</strong>: <code>div</code> настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.</p>
+    </li>
+  </ul>
+  <p>Итого: $237.89</p>
 </div>
+```
 
-<h3 id="Перенос_строки_и_горизонтальный_разделитель">Перенос строки и горизонтальный разделитель</h3>
+Ему не подходит `<aside>`, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и `<section>`, т. к. это не часть основного содержимого страницы. Поэтому `<div>` подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.
 
-<p>Два элемента, которые вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:</p>
+> **Предупреждение:** **Внимание**: `div` настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе вам будет трудно обновлять и поддерживать ваши документы.
 
-<p><code>&lt;br&gt;</code> создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:</p>
+### Перенос строки и горизонтальный разделитель
 
-<pre class="brush: html">&lt;p&gt;Жила-была девчушка Нелл,&lt;br&gt;
-Любившая писать HTML:&lt;br&gt;
-Её семантика ужасна была — &lt;br&gt;
-Она и сама прочитать ничего не могла.&lt;/p&gt;</pre>
+Два элемента, которые вы будете периодически использовать или захотите узнать о них: {{htmlelement("br")}} и {{htmlelement("hr")}}:
 
-<p>Без элемента <code>&lt;br&gt;</code> абзац  разместится в одну длинную линию (как было сказано ранее, <a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML">HTML игнорирует переносы строк</a>), а с ним в коде — разметка будет выглядеть следующим образом:</p>
+`<br>` создаёт разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:
 
+```html
 <p>Жила-была девчушка Нелл,<br>
- Любившая писать HTML:<br>
- Её семантика ужасна была —<br>
- Она и сама прочитать ничего не могла.</p>
+Любившая писать HTML:<br>
+Её семантика ужасна была — <br>
+Она и сама прочитать ничего не могла.</p>
+```
 
-<p><code>&lt;hr&gt;</code> создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:</p>
+Без элемента `<br>` абзац разместится в одну длинную линию (как было сказано ранее, [HTML игнорирует переносы строк](/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Whitespace_in_HTML)), а с ним в коде — разметка будет выглядеть следующим образом:
 
-<pre>&lt;p&gt;Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.&lt;/p&gt;
-&lt;hr&gt;
-&lt;p&gt;Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".&lt;/p&gt;</pre>
+Жила-была девчушка Нелл,
+Любившая писать HTML:
+Её семантика ужасна была —
+Она и сама прочитать ничего не могла.
 
-<p>Будет выглядеть примерно так:</p>
+`<hr>` создаёт горизонтальный разделитель в документе, это означает тематическое изменение текста (например, изменение темы или сцены). Визуально он просто похож на горизонтальную линию. В качестве примера:
 
+```
 <p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
-
 <hr>
 <p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>
+```
 
-<h2 id="Планирование_простого_веб-сайта">Планирование простого веб-сайта</h2>
+Будет выглядеть примерно так:
 
-<p>Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!</p>
+Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.
 
-<ol>
- <li>Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. <img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li>
- <li>Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li>
- <li>Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li>
- <li>Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. <img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li>
- <li>Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.</li>
-</ol>
+---
 
-<p><img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></p>
+Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".
 
-<h3 id="Самостоятельная_работа_создайте_свою_собственную_карту_сайта">Самостоятельная работа: создайте свою собственную карту сайта</h3>
+## Планирование простого веб-сайта
 
-<p>Применить наш метод к своему сайту. О чем он будет?</p>
+Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется {{glossary("Information architecture")}}. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!
 
-<div class="note">
-<p><strong>Примечание</strong>: Сохраните свой код, он вам ещё понадобится.</p>
-</div>
+1.  Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц. ![the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy](https://mdn.mozillademos.org/files/12423/common-features.png)
+2.  Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведённый раннее). Что находится в этих блоках?![A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer](https://mdn.mozillademos.org/files/12429/site-structure.png)
+3.  Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.![A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info](https://mdn.mozillademos.org/files/12425/feature-list.png)
+4.  Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод {{glossary("Card sorting")}}. ![The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things](https://mdn.mozillademos.org/files/12421/card-sorting.png)
+5.  Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.
+
+![A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page](https://mdn.mozillademos.org/files/12427/site-map.png)
+
+### Самостоятельная работа: создайте свою собственную карту сайта
+
+Применить наш метод к своему сайту. О чем он будет?
+
+> **Примечание:** Сохраните свой код, он вам ещё понадобится.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.</p>
+Вы стали лучше понимать, как структурировать веб-страницу или сайт. В последней статье этого модуля мы узнаем, как отлаживать HTML.
 
-<h2 id="Дополнительные_материалы">Дополнительные материалы</h2>
+## Дополнительные материалы
 
-<ul>
- <li><a href="/en-US/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines">Using HTML sections and outlines</a>: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.</li>
-</ul>
+- [Using HTML sections and outlines](/ru/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
 
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p>
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/getting_started/index.md b/files/ru/learn/html/introduction_to_html/getting_started/index.md
index cbd0efe77d2a63..e6a539281c8d83 100644
--- a/files/ru/learn/html/introduction_to_html/getting_started/index.md
+++ b/files/ru/learn/html/introduction_to_html/getting_started/index.md
@@ -15,81 +15,69 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Getting_started
 original_slug: Learn/HTML/Введение_в_HTML/Начало_работы
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
 
-<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}</div>
+В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!
 
-<p class="summary">В этой статье мы охватим азы HTML, необходимые для начала работы. Дадим определение «элементам», «атрибутам», «тегам» и прочим важным понятиям, о которых вы, возможно, слышали, а также об их роли в языке. Мы также покажем, как устроены HTML-элементы, типичная HTML-страница, и объясним другие важные аспекты языка. По ходу дела, чтобы вы не заскучали, мы поиграем с настоящей HTML-страницей!</p>
+| Необходимые знания: | Умение работать с компьютером, [наличие необходимого ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания о [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Познакомиться с языком HTML и научиться описывать некоторые его элементы.                                                                                                                                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Умение работать с компьютером, <a href="/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software">наличие необходимого ПО</a>, базовые знания о <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Познакомиться с языком HTML и научиться описывать некоторые его элементы.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое HTML?
 
-<h2 id="Что_такое_HTML">Что такое HTML?</h2>
+{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это _язык разметки_, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или _разметить_ различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:
 
-<p>{{glossary("HTML")}} (HyperText Markup Language - язык гипертекстовой разметки) не является языком программирования; это <em>язык разметки</em>, используемый для определения структуры веб-страниц, посещаемых пользователями. Они могут иметь сложную или простую структуру, всё зависит от замысла и желания веб-разработчика. HTML состоит из ряда {{glossary("Element", "элементов")}}, которые вы используете для того, чтобы охватить, обернуть или <em>разметить</em> различные части содержимого, чтобы оно имело определённый вид или срабатывало определённым способом. Встроенные {{glossary("Tag", "тэги")}} могут преобразовать часть содержимого в гиперссылку, по которой можно перейти на другую веб-страницу, выделить курсивом слова и так далее. Например, рассмотрим следующую строку:</p>
+```
+Мой кот очень сердитый
+```
 
-<pre>Мой кот очень сердитый</pre>
+Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф" ({{htmlelement("p")}}), например:
 
-<p>Если мы хотим, чтобы строка отобразилась в таком же виде, мы можем определить её, как "параграф", заключив её в теги элемента "параграф"  ({{htmlelement("p")}}), например:</p>
+```html
+<p>Мой кот очень сердитый</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Мой кот очень сердитый&lt;/p&gt;</pre>
+> **Примечание:** Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как `<title>`, `<TITLE>`, `<Title>`, `<TiTlE>`, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.
 
-<div class="note">
-<p><strong>Примечание</strong>: Метки в HTML нечувствительны к регистру, то есть они могут быть записаны в верхнем или нижнем регистре. Например, тег {{htmlelement("title")}} может быть записан как <code>&lt;title&gt;</code>, <code>&lt;TITLE&gt;</code>, <code>&lt;Title&gt;</code>, <code>&lt;TiTlE&gt;</code>, и т.д., и он будет работать нормально. Лучшей практикой, однако, является запись всех тегов в нижнем регистре для обеспечения согласованности, удобочитаемости и других причин.</p>
-</div>
-
-<h2 id="Структура_HTML_элементов">Структура HTML-элементов</h2>
+## Структура HTML-элементов
 
-<p>Давайте рассмотрим элемент "параграф" чуть подробнее:</p>
+Давайте рассмотрим элемент "параграф" чуть подробнее:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/16452/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png" style="height: 255px; width: 821px;"></p>
+![](https://mdn.mozillademos.org/files/16452/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.png)
 
-<p>Основными частями элемента являются:</p>
+Основными частями элемента являются:
 
-<ol>
- <li><strong>Открывающий тег:</strong> Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри <strong>угловых скобок</strong>. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.</li>
- <li><strong>Закрывающий тег:</strong> выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.</li>
- <li><strong>Содержимое:</strong> Как видно, в нашем случае содержимым является простой текст.</li>
- <li><strong>Элемент:</strong> открывающий тег + закрывающий тег + содержимое = элемент.</li>
-</ol>
+1.  **Открывающий тег:** Он состоит из названия (обозначения) элемента (в нашем случае, p), помещённого внутри **угловых скобок**. Данный тег служит признаком начала элемента, с этого момента тег начинает влиять на следующее после него содержимое.
+2.  **Закрывающий тег:** выглядит как и открывающий, но содержит слеш перед названием тега. Он служит признаком конца элемента. Пропуски закрывающих тегов — типичная ошибка новичков, которая может приводить к неопределённым результатам — в лучшем случае всё сработает правильно, в других страница может вовсе не прорисоваться или прорисоваться не как ожидалось.
+3.  **Содержимое:** Как видно, в нашем случае содержимым является простой текст.
+4.  **Элемент:** открывающий тег + закрывающий тег + содержимое = элемент.
 
-<h3 id="active_learning_adding_attributes_to_an_element">Активное изучение: создание вашего первого HTML-элемента</h3>
+### Активное изучение: создание вашего первого HTML-элемента
 
-<p>Отредактируйте строку текста ниже в поле <em>Ввод</em>, обернув её тегами <code>&lt;em&gt;</code> и <code>&lt;/em&gt;</code> (вставьте <code>&lt;em&gt;</code> перед строкой, чтобы <em>указать начало элемента</em>, и <code>&lt;/em&gt;</code> после неё, чтобы <em>указать конец элемента</em>) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле <em>Вывод</em>.</p>
+Отредактируйте строку текста ниже в поле _Ввод_, обернув её тегами `<em>` и `</em>` (вставьте `<em>` перед строкой, чтобы _указать начало элемента_, и `</em>` после неё, чтобы _указать конец элемента_) — эти действия должны выделить строку текста курсивом! Вы можете видеть изменения в реальном времени в поле _Вывод_.
 
-<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>
+Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой _Сбросить_. Если упражнение вызывает у вас затруднения, то нажмите кнопку _Показать решение_, чтобы увидеть правильный ответ.
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+```html hidden
+<h2>Результат</h2>
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"&gt;
+<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
   Это мой текст.
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Сбросить" /&gt;
-  &lt;input id="solution" type="button" value="Показать решение" /&gt;
-&lt;/div&gt;
-</pre>
+<div class="controls">
+  <input id="reset" type="button" value="Сбросить" />
+  <input id="solution" type="button" value="Показать решение" />
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -108,9 +96,10 @@ body {
   margin: 10px;
   background: #f5f9fa;
 }
-</pre>
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -140,7 +129,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;em&gt;Это мой текст.&lt;/em&gt;';
+var htmlSolution = '<em>Это мой текст.</em>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -186,120 +175,113 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}
 
-<h3 id="Вложенные_элементы">Вложенные элементы</h3>
+### Вложенные элементы
 
-<p>Вы также можете вкладывать элементы внутрь других элементов — это называется <strong>вложенностью</strong>. Если мы хотим подчеркнуть, что наш кот <strong>очень</strong> сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:</p>
+Вы также можете вкладывать элементы внутрь других элементов — это называется **вложенностью**. Если мы хотим подчеркнуть, что наш кот **очень** сердитый, мы можем заключить слово "очень" в элемент {{htmlelement("strong")}} , который означает, что это слово крайне важно в данном контексте:
 
-<pre class="brush: html">&lt;p&gt;Мой кот &lt;strong&gt;очень&lt;/strong&gt;  сердитый.&lt;/p&gt;</pre>
+```html
+<p>Мой кот <strong>очень</strong>  сердитый.</p>
+```
 
-<p>Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем <code>p</code> элемент первым, затем элемент <code>strong</code>, затем мы закрываем элемент <code>strong</code> первым, затем <code>p</code>. Следующее писать неправильно:</p>
+Вы должны удостовериться, что элементы вложены должным образом: в следующем примере мы открываем `p` элемент первым, затем элемент `strong`, затем мы закрываем элемент `strong` первым, затем `p`. Следующее писать неправильно:
 
-<pre class="example-bad brush: html">&lt;p&gt;Мой кот &lt;strong&gt;очень сердитый.&lt;/p&gt;&lt;/strong&gt;</pre>
+```html example-bad
+<p>Мой кот <strong>очень сердитый.</p></strong>
+```
 
-<p>Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!</p>
+Элементы должны открываться и закрываться правильно таким образом, чтобы явно находиться внутри или снаружи друг друга. Если они перекрываются так, как в примере выше, то ваш браузер попытается «додумать» за вас, что вы имели в виду, и вы получите непредсказуемый результат. Так что не делайте так!
 
-<h3 id="Block_versus_inline_elements">Блочные и строчные элементы</h3>
+### Блочные и строчные элементы
 
-<p>Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.</p>
+Существует две важных категории элементов в HTML, которые вам стоит знать — элементы блочного уровня и строчные элементы.
 
-<ul>
- <li>Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.</li>
- <li>Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент {{htmlelement("a")}} (ссылка) или акцентирующие элементы вроде {{htmlelement("em")}} или {{htmlelement("strong")}}.</li>
-</ul>
+- Элементы блочного уровня формируют видимый блок на странице — они окажутся на новой строке после любого контента, который шёл до них, и любой контент после них также окажется на новой строке. Чаще всего элементами блочного уровня бывают структурные элементы страницы, представляющие собой, например, параграфы (абзацы), списки, меню навигации, футеры, или подвалы, и т. п. Элементы блочного уровня не вкладываются в строчные элементы, но иногда могут вкладываться в другие элементы блочного уровня.
+- Строчные элементы — это те, которые содержатся в элементах блочного уровня и окружают только малые части содержимого документа, не целые абзацы и группировки контента. Строчные элементы не приводят к появлению новой строки в документе: они обычно встречаются внутри абзаца текста, например, элемент {{htmlelement("a")}} (ссылка) или акцентирующие элементы вроде {{htmlelement("em")}} или {{htmlelement("strong")}}.
 
-<p>Посмотрите на следующий пример:</p>
+Посмотрите на следующий пример:
 
-<pre class="brush: html">&lt;em&gt;Первый&lt;/em&gt;&lt;em&gt;второй&lt;/em&gt;&lt;em&gt;третий&lt;/em&gt;
+```html
+<em>Первый</em><em>второй</em><em>третий</em>
 
-&lt;p&gt;четвёртый&lt;/p&gt;&lt;p&gt;пятый&lt;/p&gt;&lt;p&gt;шестой&lt;/p&gt;
-</pre>
+<p>четвёртый</p><p>пятый</p><p>шестой</p>
+```
 
-<p>{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется <a href="/en-US/docs/Learn/CSS/First_steps">CSS-оформлением</a> по умолчанию, которое браузеры применяют к абзацам).</p>
+{{htmlelement("em")}} — это строчный элемент, так что, как вы здесь видите, первые три элемента находятся на одной строке друг с другом без пробелов между ними. С другой стороны, {{htmlelement("p")}} — это элемент блочного уровня, так что каждый элемент находится на новой строке, с пространством выше и ниже каждого (этот интервал определяется [CSS-оформлением](/ru/docs/Learn/CSS/First_steps) по умолчанию, которое браузеры применяют к абзацам).
 
-<p>{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}</p>
+{{ EmbedLiveSample('Block_versus_inline_elements', 700, 200, "", "") }}
 
-<div class="note">
-<p><strong>Примечание</strong>: HTML5 переопределил категории элементов в HTML: смотрите <a href="https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Категории типов содержимого элементов</a>. Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.</p>
-</div>
+> **Примечание:** HTML5 переопределил категории элементов в HTML: смотрите [Категории типов содержимого элементов](https://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories). Хотя эти определения точнее и однозначнее, чем те, которые были раньше, их гораздо сложнее понять, чем «блочный» и «строчный», поэтому мы будем придерживаться их в этом разделе.
 
-<div class="note">
-<p><strong>Примечание</strong>: Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными <a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model#экскурс_внутренний_и_внешний_типы_отображения">типами отображения в CSS</a>. Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.</p>
-</div>
-
-<div class="note">
-<p><strong>Примечание</strong>: вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри <a href="/en-US/docs/Web/HTML/Block-level_elements">Элементы блочного уровня</a> и <a href="/en-US/docs/Web/HTML/Inline_elements">Строчные элементы</a>.</p>
-</div>
+> **Примечание:** Не путайте термины «блочный» и «строчный», используемые в этом разделе, с одноимёнными [типами отображения в CSS](/ru/docs/Learn/CSS/Building_blocks/The_box_model#экскурс_внутренний_и_внешний_типы_отображения). Хотя по умолчанию они коррелируют, смена типа отображения в CSS не меняет категорию элемента и не влияет на то, во что его можно вкладывать и что можно вкладывать в него. Эта довольно частая путаница — одна из причин, почему HTML5 отказался от этих терминов.
 
-<h3 id="Empty_elements">Пустые элементы</h3>
+> **Примечание:** вам могут пригодиться справочники, включающие списки блочных и строчных элементов — смотри [Элементы блочного уровня](/ru/docs/Web/HTML/Block-level_elements) и [Строчные элементы](/ru/docs/Web/HTML/Inline_elements).
 
-<p>Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:</p>
+### Пустые элементы
 
-<pre class="brush: html">&lt;img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"&gt;</pre>
+Не все элементы соответствуют вышеупомянутому шаблону: открывающий тег, контент, закрывающий тег. Некоторые элементы состоят из одного тега и обычно используются для вставки чего-либо в то место документа, где размещены. Например, элемент {{htmlelement("img")}} вставляет картинку на страницу в том самом месте, где он расположен:
 
-<p>Это выведет на вашу страницу следующее:</p>
+```html
+<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
+```
 
-<p>{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p>
+Это выведет на вашу страницу следующее:
 
-<div class="note">
-<p><strong>Примечание</strong>: Пустые элементы иногда называют <em>void-элементами</em>.</p>
-</div>
+{{ EmbedLiveSample('Empty_elements', 700, 300, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Атрибуты">Атрибуты</h2>
+> **Примечание:** Пустые элементы иногда называют _void-элементами_.
 
-<p>У элементов также могут быть атрибуты, которые выглядят так:</p>
+## Атрибуты
 
-<p><img alt='&amp;amp;amp;lt;p class="editor-note">My cat is very grumpy&amp;amp;amp;lt;/p>' src="grumpy-cat-attribute-small.png" style="display: block; margin: 0px auto;"></p>
+У элементов также могут быть атрибуты, которые выглядят так:
 
-<p>Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут <code>class</code> позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.</p>
+![&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>](grumpy-cat-attribute-small.png)
 
-<p>Атрибут должен иметь:</p>
+Атрибуты содержат дополнительную информацию об элементе, которая, по вашему мнению, не должна отображаться в содержимом элемента. В данном случае атрибут `class` позволяет вам дать элементу идентификационное имя, которое в дальнейшем может быть использовано для обращения к элементу с информацией о стиле и прочими вещами.
 
-<ol>
- <li>Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).</li>
- <li>Имя атрибута и следующий за ним знак равенства.</li>
- <li>Значение атрибута, заключённое в кавычки.</li>
-</ol>
+Атрибут должен иметь:
 
-<h3 id="Активное_изучение_Добавление_атрибутов_в_элемент">Активное изучение: Добавление атрибутов в элемент</h3>
+1.  Пробел между атрибутом и именем элемента (или предыдущим атрибутом, если у элемента уже есть один или несколько атрибутов).
+2.  Имя атрибута и следующий за ним знак равенства.
+3.  Значение атрибута, заключённое в кавычки.
 
-<p>Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:</p>
+### Активное изучение: Добавление атрибутов в элемент
 
-<ul>
- <li><code>href</code>: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, <code>href="https://www.mozilla.org/"</code>.</li>
- <li><code>title</code>: Атрибут <code>title</code> описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, <code>title="The Mozilla homepage"</code>. Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.</li>
- <li><code>target</code>: Атрибут <code>target</code> определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, <code>target="_blank"</code> отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.</li>
-</ul>
+Возьмём для примера элемент {{htmlelement("a")}} — означает anchor (якорь) и делает текст внутри него гиперссылкой. Может иметь несколько атрибутов, вот несколько из них:
 
-<p>Измените строку текста ниже в поле <em>Ввод</em> так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент <code>&lt;a&gt;</code>затем атрибут <code>href</code> и атрибут <code>title</code>. Наконец, укажите атрибут <code>target</code> чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле <em>Вывод</em>. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута <code>title</code>, а при щелчке переходит по адресу в атрибуте <code>href</code>. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.</p>
+- `href`: В значении этого атрибута прописывается веб-адрес, на который, по вашей задумке, должна указывать ссылка, куда браузер переходит, когда вы по ней кликаете. Например, `href="https://www.mozilla.org/"`.
+- `title`: Атрибут `title` описывает дополнительную информацию о ссылке, такую как: на какую страницу она ведёт. Например, `title="The Mozilla homepage"`. Она появится в виде всплывающей подсказки, когда вы наведёте курсор на ссылку.
+- `target`: Атрибут `target` определяет контекст просмотра, который будет использоваться для отображения ссылки. Например, `target="_blank"` отобразит ссылку на новой вкладке. Если вы хотите отобразить ссылку на текущей вкладке, просто опустите этот атрибут.
 
-<p>Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой <em>Сбросить</em>. Если упражнение вызывает у вас затруднения, то нажмите кнопку <em>Показать решение</em>, чтобы увидеть правильный ответ.</p>
+Измените строку текста ниже в поле _Ввод_ так, чтобы она вела на ваш любимый веб-сайт. Сначала добавьте элемент `<a>`затем атрибут `href` и атрибут `title`. Наконец, укажите атрибут `target` чтобы открыть ссылку на новой вкладке. Вы можете наблюдать сделанные изменения в реальном времени в поле _Вывод_. Вы должны увидеть гиперссылку, при наведении курсора на которую появляется содержимое атрибута `title`, а при щелчке переходит по адресу в атрибуте `href`. Помните, что между именем элемента и каждым из атрибутов должен быть пробел.
 
-<div class="hidden">
-<h6 id="Playable_code2">Playable code2</h6>
+Если вы ошиблись, то всегда можете начать снова, воспользовавшись кнопкой _Сбросить_. Если упражнение вызывает у вас затруднения, то нажмите кнопку _Показать решение_, чтобы увидеть правильный ответ.
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
-  &amp;lt;p&amp;gt;Ссылка на мой любимый веб-сайт.&amp;lt;/p&amp;gt;
-&lt;/textarea&gt;
+<textarea id="code" class="input" style="min-height: 100px;width: 95%">
+  &lt;p&gt;Ссылка на мой любимый веб-сайт.&lt;/p&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -317,9 +299,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -349,7 +333,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;p&gt;Ссылка на мой &lt;a href="https://www.mozilla.org/" title="Домашняя страница Mozilla" target="_blank"&gt;любимый веб-сайт&lt;/a&gt;.&lt;/p&gt;';
+var htmlSolution = '<p>Ссылка на мой <a href="https://www.mozilla.org/" title="Домашняя страница Mozilla" target="_blank">любимый веб-сайт</a>.</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -395,149 +379,164 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}
 
-<h3 id="Boolean_attributes">Булевые атрибуты</h3>
+### Булевые атрибуты
 
-<p>Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо.  Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.</p>
+Иногда вы будете видеть атрибуты, написанные без значения — это совершенно допустимо. Такие атрибуты называются булевые, и они могут иметь только одно значение, которое в основном совпадает с его именем. В качестве примера возьмём атрибут {{htmlattrxref("disabled", "input")}}, который можно назначить для формирования элементов ввода, если вы хотите, чтобы они были отключены (неактивны), так что пользователь не может вводить какие-либо данные в них.
 
-<pre>&lt;input type="text" disabled="disabled"&gt;</pre>
+```
+<input type="text" disabled="disabled">
+```
 
-<p>Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):</p>
+Для краткости совершенно допустимо записывать их следующим образом (мы также для справки разместили не деактивированный элемент input, чтобы дать вам большее понимание происходящего):
 
-<pre class="brush: html">&lt;input type="text" disabled&gt;
+```html
+<input type="text" disabled>
 
-&lt;input type="text"&gt;
-</pre>
+<input type="text">
+```
 
-<p>На выходе оба варианта будут выглядеть следующим образом:</p>
+На выходе оба варианта будут выглядеть следующим образом:
 
-<p>{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Boolean_attributes', 700, 100, "", "", "hide-codepen-jsfiddle") }}
 
-<h3 id="Omitting_quotes_around_attribute_values">Опускание кавычек вокруг значений атрибутов</h3>
+### Опускание кавычек вокруг значений атрибутов
 
-<p>Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом <code>href</code> так:</p>
+Осматриваясь во всемирной сети, вы будете встречать различные незнакомые способы написания разметки, включая написание значений атрибутов без кавычек. Это допустимо при определённых условиях, но разрушит вашу разметку при других. Например, возвращаясь к нашему упражнению с гиперссылкой, мы можем написать основной вариант только с атрибутом `href` так:
 
-<pre class="brush: html">&lt;a href=https://www.mozilla.org/&gt;любимый веб-сайт&lt;/a&gt;</pre>
+```html
+<a href=https://www.mozilla.org/>любимый веб-сайт</a>
+```
 
-<p>Однако, как только мы добавим атрибут <code>title</code> в таком же стиле, мы поступим неверно:</p>
+Однако, как только мы добавим атрибут `title` в таком же стиле, мы поступим неверно:
 
-<pre class="example-bad brush: html">&lt;a href=https://www.mozilla.org/ title=The Mozilla homepage&gt;favorite website&lt;/a&gt;</pre>
+```html example-bad
+<a href=https://www.mozilla.org/ title=The Mozilla homepage>favorite website</a>
+```
 
-<p>В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут <code>title</code> — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: <code>Mozilla</code> и <code>homepage</code>. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!</p>
+В этом месте браузер неверно истолкует вашу разметку, думая, что атрибут `title` — это на самом деле три разных атрибута — атрибут title со значением "The" и два булевых атрибута: `Mozilla` и `homepage`. Это, очевидно, не то, что имелось в виду, и приведёт к ошибке или неожиданному поведению кода, как это показано в живом примере ниже. Попробуйте навести курсор на ссылку, чтобы увидеть, на что похож текст title!
 
-<p>{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Omitting_quotes_around_attribute_values', 700, 100, "", "", "hide-codepen-jsfiddle") }}
 
-<p>Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.</p>
+Наш совет: всегда используйте кавычки в атрибутах — это позволит избежать подобных проблем, и, следовательно, код будет более читабельным.
 
-<h3 id="Одинарные_или_двойные_кавычки">Одинарные или двойные кавычки?</h3>
+### Одинарные или двойные кавычки?
 
-<p>В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:</p>
+В этой статье вы заметите, что все атрибуты заключены в двойные кавычки. Однако, вы можете видеть одинарные кавычки в HTML документах других людей. Это исключительно дело вкуса, и вы можете свободно выбирать, какие из них предпочитаете. Обе следующие строки эквивалентны:
 
-<pre class="brush: html">&lt;a href="http://www.example.com"&gt;Ссылка к моему примеру.&lt;/a&gt;
+```html
+<a href="http://www.example.com">Ссылка к моему примеру.</a>
 
-&lt;a href='http://www.example.com'&gt;Ссылка к моему примеру.&lt;/a&gt;</pre>
+<a href='http://www.example.com'>Ссылка к моему примеру.</a>
+```
 
-<p>Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!</p>
+Однако вы должны убедиться, что не смешиваете их вместе. Следующее будет неверным!
 
-<pre class="example-bad brush: html">&lt;a href="http://www.example.com'&gt;Ссылка к моему примеру.&lt;/a&gt;</pre>
+```html example-bad
+<a href="http://www.example.com'>Ссылка к моему примеру.</a>
+```
 
-<p>Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:</p>
+Если вы используете один тип кавычек в своём HTML, то вы можете поместить внутрь их кавычки другого типа, не вызывая никаких проблем:
 
-<pre class="brush: html">&lt;a href="http://www.example.com" title="Isn't this fun?"&gt;A link to my example.&lt;/a&gt;</pre>
+```html
+<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
+```
 
-<p>Если вы хотите вставить кавычки того же типа, то вы должны использовать <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html">объекты HTML</a>. Например, это работать не будет:</p>
+Если вы хотите вставить кавычки того же типа, то вы должны использовать [объекты HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#entity_references_including_special_characters_in_html). Например, это работать не будет:
 
-<pre class="example-bad brush: html">&lt;a href='http://www.example.com' title='Isn't this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+```html example-bad
+<a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a>
+```
 
-<p>Поэтому вам нужно сделать так:</p>
+Поэтому вам нужно сделать так:
 
-<pre class="brush: html">&lt;a href='http://www.example.com' title='Isn&amp;#39;t this fun?'&gt;A link to my example.&lt;/a&gt;</pre>
+```html
+<a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a>
+```
 
-<h2 id="Структура_HTML_документа">Структура HTML документа</h2>
+## Структура HTML документа
 
-<p>Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:</p>
+Ниже дан пример оборачивания основных, самостоятельных HTML-элементов, которые сами по себе не очень полезны. Давайте посмотрим, как самостоятельные элементы объединяются для формирования всей HTML страницы:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Тестовая страница&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Это — моя страница&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Тестовая страница</title>
+  </head>
+  <body>
+    <p>Это — моя страница</p>
+  </body>
+</html>
+```
 
-<p>Вот что мы имеем:</p>
+Вот что мы имеем:
 
-<ol>
- <li><code>&lt;!DOCTYPE html&gt;</code>: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
+1.  `<!DOCTYPE html>`: Объявление типа документа. Очень давно, ещё когда HTML был молод (1991/2), типы документов использовались в качестве ссылок на набор правил, которым HTML-страница должна была следовать, чтобы она считалась хорошей, что может означать автоматическую проверку ошибок и другие полезные вещи. Объявление типа документа выглядело примерно вот так:
 
-  <pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
-"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;</pre>
-  Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. <code>&lt;!DOCTYPE html&gt;</code> — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .</li>
- <li><code>&lt;html&gt;&lt;/html&gt;</code>: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент". </li>
- <li><code>&lt;head&gt;&lt;/head&gt;</code>: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.</li>
- <li><code>&lt;meta charset="utf-8"&gt;</code>: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.</li>
- <li><code>&lt;title&gt;&lt;/title&gt;</code>: Элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.</li>
- <li><code>&lt;body&gt;&lt;/body&gt;</code>: Элемент {{htmlelement("body")}}. Он содержит <em>весь</em> контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.</li>
-</ol>
+    ```
+    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+    ```
 
-<h3 id="Активное_изучение_Добавление_элементов_в_ваш_HTML-документ">Активное изучение: Добавление элементов в ваш HTML-документ</h3>
+    Однако в наши дни никто особо не думает о них, и типы документа стали историческим артефактом, которые должны быть включены везде, чтобы всё работало правильно. `<!DOCTYPE html>` — это самый короткий вид типа документа, который считается действующим. На самом деле это всё, что нужно вам знать о типах документов .
 
-<p>Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:</p>
+2.  `<html></html>`: Элемент {{htmlelement("html")}} содержит в себе всё содержимое на всей странице, и иногда его называют "корневой элемент".
+3.  `<head></head>`: Элемент {{htmlelement("head")}}. Данный элемент выступает в качестве контейнера для всего содержимого, которое вы хотите включить в HTML документ, но не хотите показывать посетителям вашей страницы. Он включает такие вещи, как ключевые слова и описание страницы, которые вы хотели бы показывать в поисковых запросах, CSS для стилизирования вашего контента, объявление поддерживаемого набора символов и многое другое. Вы узнаете больше об этом из следующей статьи данного руководства.
+4.  `<meta charset="utf-8">`: Этот элемент устанавливает в качестве символьной кодировки для вашего документа utf-8 , который включает большинство символов из всех известных человечеству языков. По существу, теперь страница сможет отобразить любой текстовый контент, который вы сможете в неё вложить. Нет причин не устанавливать эту кодировку, это также позволит избежать некоторых проблем позднее.
+5.  `<title></title>`: Элемент {{htmlelement("title")}}. Этот элемент устанавливает заголовок вашей страницы, который появляется во вкладке браузера, загружающей эту страницу, также это заглавие используется при описании страницы, когда вы сохраняете её в закладках или избранном.
+6.  `<body></body>`: Элемент {{htmlelement("body")}}. Он содержит _весь_ контент, который вы хотите показывать посетителям вашей страницы, — текст, изображения, видео, игры, проигрываемые аудио дорожки или что-то ещё.
 
-<ol>
- <li>Скопировать пример HTML-страницы, расположенный выше.</li>
- <li>Создать новый файл в текстовом редакторе.</li>
- <li>Вставить код в ваш новый текстовый файл.</li>
- <li>Сохранить файл как <code>index.html</code>.</li>
-</ol>
+### Активное изучение: Добавление элементов в ваш HTML-документ
 
-<div class="note">
-<p><strong>Примечание</strong>: вы также можете найти этот базовый пример HTML на  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p>
-</div>
+Если вы хотите поэкспериментировать с написанием HTML на своём компьютере, то можете:
 
-<p>Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:</p>
+1.  Скопировать пример HTML-страницы, расположенный выше.
+2.  Создать новый файл в текстовом редакторе.
+3.  Вставить код в ваш новый текстовый файл.
+4.  Сохранить файл как `index.html`.
 
-<p><img alt="Скриншот примера тестовой страницы" src="https://mdn.mozillademos.org/files/17060/Test_page.jpg" style="border-style: solid; border-width: 1px; height: 293px; width: 415px;"><br>
- Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента {{htmlelement("body")}}. Попробуйте сделать следующее:</p>
+> **Примечание:** вы также можете найти этот базовый пример HTML на [MDN Learning Area Github repo](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html).
 
-<ul>
- <li>Добавьте заголовок страницы сразу за открывающим тегом {{htmlelement("body")}}. Текст должен находиться между открывающим тегом <code>&lt;h1&gt;</code> и закрывающим <code>&lt;/h1&gt;</code> .</li>
- <li>Напишите в параграфе о чём-нибудь, что кажется вам интересным.</li>
- <li>Выделите важные слова, обернув их в открывающий тег <code>&lt;strong&gt;</code> и закрывающий <code>&lt;/strong&gt;</code></li>
- <li>Добавьте ссылку на свой абзац так, как <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#active_learning_adding_attributes_to_an_element">объяснено ранее в статье</a>.</li>
- <li>Добавьте изображение в свой документ под абзацем, как <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#empty_elements">объяснено ранее в статье</a>. Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!</li>
-</ul>
+Теперь можете открыть браузер и посмотреть, во что отрисовался код, а потом изменить его, обновить страницу и посмотреть, что получилось. Сначала страница выглядит так:
 
-<p>Если вы запутались, всегда можно запустить пример сначала кнопкой <em>Сбросить</em>. Сдаётесь — посмотрите ответ, нажав на <em>Показать решение</em>.</p>
+![Скриншот примера тестовой страницы](https://mdn.mozillademos.org/files/17060/Test_page.jpg)
+Для этого упражнения вы можете редактировать код локально на своём компьютере, как предлагается выше, а можете работать в редакторе, расположенном ниже. В редакторе показано только содержимое элемента {{htmlelement("body")}}. Попробуйте сделать следующее:
 
-<div class="hidden">
-<h6 id="Playable_code3">Playable code3</h6>
+- Добавьте заголовок страницы сразу за открывающим тегом {{htmlelement("body")}}. Текст должен находиться между открывающим тегом `<h1>` и закрывающим `</h1>` .
+- Напишите в параграфе о чём-нибудь, что кажется вам интересным.
+- Выделите важные слова, обернув их в открывающий тег `<strong>` и закрывающий `</strong>`
+- Добавьте ссылку на свой абзац так, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#active_learning_adding_attributes_to_an_element).
+- Добавьте изображение в свой документ под абзацем, как [объяснено ранее в статье](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started#empty_elements). Если сможете использовать другую картинку (со своего компьютера или из интернета). Вы большой молодец!
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+Если вы запутались, всегда можно запустить пример сначала кнопкой _Сбросить_. Сдаётесь — посмотрите ответ, нажав на _Показать решение_.
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).&lt;/p&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;textarea id="code" class="input" style="min-height: 100px;width: 95%"&gt;
-  &amp;lt;p&amp;gt;Это — моя страница&amp;lt;/p&amp;gt;
-&lt;/textarea&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из области кода (Tab вставляет символ табуляции).</p>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<textarea id="code" class="input" style="min-height: 100px;width: 95%">
+  &lt;p&gt;Это — моя страница&lt;/p&gt;
+</textarea>
 
-<pre class="brush: css">html {
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
+
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -559,9 +558,11 @@ img {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -583,7 +584,7 @@ reset.addEventListener('click', function() {
 solution.addEventListener('click', function() {
   if(solution.value === 'Показать решение') {
     textarea.value = solutionEntry;
-    solution.value = '<em>Спрятать решение</em>';
+    solution.value = 'Спрятать решение';
   } else {
     textarea.value = userEntry;
     solution.value = 'Показать решение';
@@ -591,7 +592,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;p&gt;Мне очень нравится &lt;strong&gt;играть на барабанах&lt;/strong&gt;. Мой любимый барабанщик — Нил Пирт, который\ играет в группе &lt;a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article"&gt;"Rush"&lt;/a&gt;.\ Мой любимый альбом Rush — &lt;a href="http://www.deezer.com/album/942295"&gt;"Moving Pictures"&lt;/a&gt;.&lt;/p&gt;\ &lt;img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg"&gt;';
+var htmlSolution = '<p>Мне очень нравится <strong>играть на барабанах</strong>. Мой любимый барабанщик — Нил Пирт, который\ играет в группе <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">"Rush"</a>.\ Мой любимый альбом Rush — <a href="http://www.deezer.com/album/942295">"Moving Pictures"</a>.</p>\ <img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -637,115 +638,88 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<h3 id="Пробелы_в_HTML">Пробелы в HTML</h3>
+};
+```
 
-<p>Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:</p>
+{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}
 
-<pre class="brush: html">&lt;p&gt;Собаки глупы.&lt;/p&gt;
+### Пробелы в HTML
 
-&lt;p&gt;Собаки
-         глупы.&lt;/p&gt;</pre>
+Вы могли заметить, что в примерах кода из этой статьи много пробелов. Это вовсе не обязательно — следующие два примера эквивалентны:
 
-<p>Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.</p>
+```html
+<p>Собаки глупы.</p>
 
-<h2 id="Entity_references_Including_special_characters_in_HTML">Ссылки на сущности: Включение специальных символов в HTML</h2>
+<p>Собаки
+         глупы.</p>
+```
 
-<p>В HTML символы <code>&lt;</code>, <code>&gt;</code>, <code>"</code>, <code>'</code> и <code>&amp;</code> являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.</p>
+Не важно, сколько пустого места вы используете в разметке (что может включать пробелы и сдвиги строк): браузер при анализе кода сократит всё пустое место до одного пробела. Зачем использовать много пробелов? Ответ: это доступность для понимания — гораздо легче разобраться, что происходит в вашем коде, если он удобно отформатирован, а не просто собран вместе в одном большом беспорядке. В нашем коде каждый вложенный элемент сдвинут на два пробела относительно элемента, в котором он находится. Вы можете использовать любое форматирование (в частности, количество пробелов для отступа), но лучше придерживаться одного стиля.
 
-<p>Мы должны использовать ссылки-мнемоники  — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&amp;) и завершается точкой с запятой (;).</p>
+## Ссылки на сущности: Включение специальных символов в HTML
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Буквенный символ</th>
-   <th scope="col">Символьный эквивалент</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>&lt;</td>
-   <td>&amp;lt;</td>
-  </tr>
-  <tr>
-   <td>&gt;</td>
-   <td>&amp;gt;</td>
-  </tr>
-  <tr>
-   <td>"</td>
-   <td>&amp;quot;</td>
-  </tr>
-  <tr>
-   <td>'</td>
-   <td>&amp;apos;</td>
-  </tr>
-  <tr>
-   <td>&amp;</td>
-   <td>&amp;amp;</td>
-  </tr>
- </tbody>
-</table>
+В HTML символы `<`, `>`, `"`, `'` и `&` являются специальными. Они являются частью самого синтаксиса HTML. Так как же включить в текст один из этих специальных символов? Например, если вы хотите использовать амперсанд или знак «меньше» и не интерпретировать его как код.
 
-<p>В  следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:</p>
+Мы должны использовать ссылки-мнемоники — специальные коды, которые отображают спецсимволы, и могут быть использованы в необходимых позициях. Каждая ссылка-мнемоник начинается с амперсанда (&) и завершается точкой с запятой (;).
 
-<pre class="brush: html">&lt;p&gt;В HTML вы определяете параграф элементом &lt;p&gt;.&lt;/p&gt;
+| Буквенный символ | Символьный эквивалент |
+| ---------------- | --------------------- |
+| <                | \&lt;                 |
+| >                | \&gt;                 |
+| "                | \&quot;               |
+| '                | \&apos;               |
+| &                | \&amp;                |
 
-&lt;p&gt;В HTML вы определяете параграф элементом &amp;lt;p&amp;gt;.&lt;/p&gt;</pre>
+В следующем примере вы видите два абзаца, которые рассказывают о веб-технологиях:
 
-<p>В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент  <code>&lt;p&gt;</code> является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.</p>
+```html
+<p>В HTML вы определяете параграф элементом <p>.</p>
 
-<p>{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+<p>В HTML вы определяете параграф элементом &lt;p&gt;.</p>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Таблица всех доступных в  HTML символов-мнемоников — в Википедии: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>.</p>
-</div>
+В живом выводе ниже вы можете заметить, что первый абзац выводится неправильно, так как браузер считает, что второй элемент `<p>` является началом нового абзаца! Второй абзац нашего кода выводится правильно, потому что мы заменили угловые скобки на ссылки-мнемоники.
 
-<h2 id="HTML_comments">HTML комментарии</h2>
+{{ EmbedLiveSample('Entity_references_Including_special_characters_in_HTML', 700, 200, "", "", "hide-codepen-jsfiddle") }}
 
-<p>В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.</p>
+> **Примечание:** Таблица всех доступных в HTML символов-мнемоников — в Википедии: [List of XML and HTML character entity references](http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references).
 
-<p>Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры <code>&lt;!--</code> и <code>--&gt;</code>, например:</p>
+## HTML комментарии
 
-<pre class="brush: html">&lt;p&gt; Меня нет в комментариях( &lt;/p&gt;
+В HTML, как и в большинстве языков программирования, есть возможность писать комментарии в коде. Комментарии игнорируются обозревателем и не видны пользователю, их добавляют для того, чтобы пояснить, как работает написанный код, что делают отдельные его части и т. д. Такая практика полезна, если вы возвращаетесь к коду, который давно не видели или когда хотите передать его кому-то другому.
 
-&lt;!-- &lt;p&gt;А теперь есть!&lt;/p&gt; --&gt;</pre>
+Чтобы превратить часть содержимого HTML-файла в комментарий, нужно поместить её в специальные маркеры `<!--` и `-->`, например:
 
-<p>Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.</p>
+```html
+<p> Меня нет в комментариях( </p>
 
-<p>{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}</p>
+<!-- <p>А теперь есть!</p> -->
+```
 
-<h2 id="Подведение_итогов">Подведение итогов</h2>
+Как вы увидите ниже, первый параграф будет отображён на экране, а второй нет.
 
-<p>Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!</p>
+{{ EmbedLiveSample('HTML_comments', 700, 100, "", "", "hide-codepen-jsfiddle") }}
 
-<div class="note">
-<p><strong>Примечание</strong>: Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или <a href="/en-US/docs/Learn/CSS">CSS</a>. CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.</p>
-</div>
+## Подведение итогов
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+Вы дошли до конца статьи — надеемся, вам понравилось путешествие по основам HTML. На этом этапе вы уже должны немного разобраться, как выглядит язык, как он работает на базовом уровне и уметь описать несколько элементов и атрибутов. Сейчас идеальное время и место, чтобы продолжить изучать HTML. В последующих статьях мы рассмотрим некоторые из вещей, которые вы уже рассмотрели, но намного подробнее, а также представим некоторые новые функции языка. Оставайтесь с нами!
 
-<ul>
- <li><a href="/en-US/docs/Web/HTML/Applying_color">Применение цвета к элементам HTML с помощью CSS</a></li>
-</ul>
+> **Примечание:** Сейчас, когда вы начинаете больше узнавать о HTML, вы также можете начать изучать основы каскадных таблиц стилей Cascading Style Sheets, или [CSS](/ru/docs/Learn/CSS). CSS — это язык, который используется для стилизации веб-страниц (например, изменение шрифта или цветов или изменение макета страницы). Как вы скоро поймёте, HTML и CSS созданы друг для друга.
 
-<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}</div>
+## Смотрите также
 
+- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color)
 
+{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Введение_в_HTML/Начало_работы")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
index 987ce7d702964a..37ae515e97e372 100644
--- a/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
+++ b/files/ru/learn/html/introduction_to_html/html_text_fundamentals/index.md
@@ -15,118 +15,108 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals
 original_slug: Learn/HTML/Введение_в_HTML/HTML_text_fundamentals
 ---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
 
-<div> {{LearnSidebar}}</div>
+Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div>
+| Предварительные требования: | Базовое знакомство с HTML , описанное в [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B). |
+| --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..                                                                          |
 
-<p class="summary">Одна из основных задач HTML — придавать тексту структуру и смысл, {{glossary("семантику")}}, так, чтобы браузер смог отобразить текст корректно. Эта статья покажет, как можно использовать {{glossary("HTML")}}, чтобы упорядочить текст на странице путём добавления заголовков и абзацев, выделения слов, создания списков и многое другое.</p>
+## Основы: Заголовки и абзацы / параграфы
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Базовое знакомство с HTML , описанное в <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить базовые способы разметки текста путём добавлением на страницу структуры и значения — создать абзацы, заголовки, списки, акценты и цитаты..</td>
-  </tr>
- </tbody>
-</table>
+Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.
 
-<h2 id="Основы_Заголовки_и_абзацы_параграфы">Основы: Заголовки и абзацы / параграфы</h2>
+![An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs.](https://mdn.mozillademos.org/files/12371/newspaper_small.jpg)
 
-<p>Большинство структурированных текстов состоят из параграфов и заголовков, независимо от того, читаете ли вы рассказ, или газету, или учебник, журнал и т.д.</p>
+Упорядоченный контент делает чтение более лёгким и приятным.
 
-<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p>
+В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:
 
-<p>Упорядоченный контент делает чтение более лёгким и приятным.</p>
+```html
+<p>Я параграф, да, это я.</p>
+```
 
-<p>В HTML каждый абзац заключён в элемент {{htmlelement("p")}}, подобно:</p>
+Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:
 
-<pre class="brush: html">&lt;p&gt;Я параграф, да, это я.&lt;/p&gt;</pre>
+```html
+<h1>Я заголовок истории.</h1>
+```
 
-<p>Каждый заголовок заключён в элемент заголовка {{htmlelement("h1")}}:</p>
+Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; `<h1>` представляет главный заголовок, `<h2>` представляет подзаголовки, `<h3>` представляет под-подзаголовки и так далее.
 
-<pre class="brush: html">&lt;h1&gt;Я заголовок истории.&lt;/h1&gt;</pre>
+### Создание иерархической структуры
 
-<p>Имеется шесть элементов заголовка: {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} и {{htmlelement("h6")}}. Каждый элемент представляет разный уровень контента в документе; <code>&lt;h1&gt;</code> представляет главный заголовок, <code>&lt;h2&gt;</code> представляет подзаголовки, <code>&lt;h3&gt;</code> представляет под-подзаголовки и так далее.</p>
+Например, в рассказе `<h1>` будет представлять заглавие рассказа, `<h2>` обозначит название каждой главы, `<h3>` будет обозначать подзаголовки в каждой главе и так далее.
 
-<h3 id="Создание_иерархической_структуры">Создание иерархической структуры</h3>
+```html
+<h1> Сокрушительная скука </ h1>
 
-<p>Например, в рассказе <code>&lt;h1&gt;</code> будет представлять заглавие рассказа, <code>&lt;h2&gt;</code> обозначит название каждой главы, <code>&lt;h3&gt;</code>  будет обозначать подзаголовки в каждой главе и так далее.</p>
+<p> Крис Миллс </ p>
 
-<pre class="brush: html">&lt;h1&gt; Сокрушительная скука &lt;/ h1&gt;
+<h2> Глава 1: Тёмная ночь </ h2>
 
-&lt;p&gt; Крис Миллс &lt;/ p&gt;
+<p> Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... </ p>
 
-&lt;h2&gt; Глава 1: Тёмная ночь &lt;/ h2&gt;
+<h2> Глава 2: Вечное молчание </ h2>
 
-&lt;p&gt; Это была тёмная ночь. Где-то кричала сова. Дождь обрушился на ... &lt;/ p&gt;
+<p> Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... </ p>
 
-&lt;h2&gt; Глава 2: Вечное молчание &lt;/ h2&gt;
+<h3> Призрак говорит </ h3>
 
-&lt;p&gt; Наш главный герой ничего не мог, когда шёпот из тёмной фигуры ... &lt;/ p&gt;
+<p> Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» </ p>
+```
 
-&lt;h3&gt; Призрак говорит &lt;/ h3&gt;
+Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.
 
-&lt;p&gt; Прошло ещё несколько часов, когда внезапно призрак выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!» &lt;/ p&gt;
-</pre>
+- Предпочтительнее использовать `<h1>` только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.
+- Убедитесь, что вы используете заголовки в правильном порядке в иерархии. Не используйте `<h3>` для создания подзаголовков при одновременном использовании `<h2>` для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.
+- Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.
 
-<p>Всё это действительно зависит от вас — что именно будут представлять собой элементы, пока существует иерархия. Вам просто нужно иметь в виду несколько хороших правил при создании таких структур.</p>
+### Зачем нам необходима структура?
 
-<ul>
- <li>Предпочтительнее использовать <code>&lt;h1&gt;</code> только один раз на странице — это заголовок самого верхнего уровня, и все остальные заголовки располагаются ниже его в иерархии.</li>
- <li>Убедитесь, что вы используете заголовки в правильном порядке в иерархии.  Не используйте <code>&lt;h3&gt;</code> для создания подзаголовков при одновременном использовании <code>&lt;h2&gt;</code> для представления под-подзаголовков — это не имеет смысла и приведёт к странным результатам.</li>
- <li>Из шести доступных уровней заголовка вы должны стремиться использовать не более трёх на странице, если только вы не чувствуете, что это необходимо. Документы с большим количеством уровней (то есть с глубокой иерархией) становятся громоздкими и трудными для навигации. В таких случаях рекомендуется распределять контент по нескольким страницам, если это возможно.</li>
-</ul>
-
-<h3 id="Зачем_нам_необходима_структура">Зачем нам необходима структура?</h3>
-
-<p>Чтобы ответить на этот вопрос, давайте посмотрим на  <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return  для перехода на следующую строку).</p>
+Чтобы ответить на этот вопрос, давайте посмотрим на [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) — отправную точку нашего примера для этой статьи (хороший рецепт хумуса). Вы должны сохранить копию этого файла на своём локальном компьютере, так как вам понадобится это для упражнений позже. Сейчас тело этого документа содержит несколько фрагментов контента — они не отмечены каким-либо образом, но они разделены разрывами строк (был нажат Enter / Return для перехода на следующую строку).
 
-<p>Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!</p>
+Однако, когда вы откроете документ в своём браузере, вы увидите, что текст выглядит как один большой кусок!
 
-<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p>
+![A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it.](https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png)
 
-<p>Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:</p>
-
-<ul>
- <li>Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки  (мы обычно <a class="external external-icon" href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">тратим очень мало времени на веб-странице</a>). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.</li>
- <li>Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).</li>
- <li>Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого <a class="external external-icon" href="http://en.wikipedia.org/wiki/Screen_reader" title="screen readers">программой чтения с экрана</a>. Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.</li>
- <li>Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.</li>
-</ul>
+Это связано с тем, что нет элементов для создания структуры контента, поэтому браузер не знает, где здесь заголовок и где абзац. Более того:
 
-<p>Поэтому нужно дать структурную разметку нашему контенту.</p>
+- Пользователи, просматривающие веб-страницу, быстро сканируют её в поиске подходящего контента, часто просто просматривая только заголовки (мы обычно [тратим очень мало времени на веб-странице](http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/)). Если они не смогут увидеть ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и отправятся куда-нибудь ещё.
+- Поисковые системы, индексирующие вашу страницу, считают содержание заголовков важными ключевыми словами для влияния на ранжирование поиска страницы. Без заголовков ваша страница будет плохо работать с точки зрения {{glossary("SEO")}} (Search Engine Optimization — поисковая оптимизация).
+- Сильно слабовидящие люди часто не читают веб-страницы — они слушают их вместо этого. Это делается с помощью программного обеспечения, называемого [программой чтения с экрана](http://en.wikipedia.org/wiki/Screen_reader "screen readers"). Это программное обеспечение предоставляет способы быстрого доступа к данному текстовому контенту. Среди различных используемых методов они предоставляют схему документа, считывая заголовки, позволяя своим пользователям быстро находить нужную им информацию. Если заголовки недоступны, они будут вынуждены слушать весь документ вслух.
+- Чтобы стилизовать контент с помощью {{glossary ("CSS")}} или сделать его интересным с помощью {{glossary ("JavaScript")}}, вам нужно, чтобы элементы обёртывали соответствующий контент, чтобы CSS и JavaScript смогли эффективно работать.
 
-<h3 id="Активное_изучение_создание_структуры_для_нашего_контента">Активное изучение: создание структуры для нашего контента</h3>
+Поэтому нужно дать структурную разметку нашему контенту.
 
-<p>Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».</p>
+### Активное изучение: создание структуры для нашего контента
 
-<p>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки <em>Сбросить</em>. Если вы застряли, нажмите кнопку <em>Показать решение</em>, чтобы увидеть ответ.</p>
+Давайте рассмотрим это на живом примере. В приведённом ниже примере добавьте элементы в исходный текст в поле «Редактируемый код», чтобы он отображался как заголовок и два абзаца в поле «Результат».
 
-<div class="hidden">
+Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки _Сбросить_. Если вы застряли, нажмите кнопку _Показать решение_, чтобы увидеть ответ.
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;Моя мини-история
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">Моя мини-история
 Я полицейский, и моё имя Триш.
-Мои ноги сделаны из картона, и мой муж — рыба.&lt;/textarea&gt;
+Мои ноги сделаны из картона, и мой муж — рыба.</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -157,10 +147,10 @@ h2 {
   font-size: 0.7rem;
   width: 98%;
 }
+```
 
-</pre>
-
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -190,7 +180,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;h1&gt;Моя мини-история&lt;/h1&gt;\n&lt;p&gt;Я полицейский, и моё имя Триш.&lt;/p&gt;\n&lt;p&gt;Мои ноги сделаны из картона, и мой муж — рыба.&lt;/p&gt;';
+var htmlSolution = '<h1>Моя мини-история</h1>\n<p>Я полицейский, и моё имя Триш.</p>\n<p>Мои ноги сделаны из картона, и мой муж — рыба.</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -229,75 +219,85 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 500) }}
 
-<h3 id="Почему_мы_нуждаемся_в_семантике">Почему мы нуждаемся в семантике?</h3>
+### Почему мы нуждаемся в семантике?
 
-<p>Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)</p>
+Семантика проявляется всюду вокруг нас — мы полагаемся на опыт, который рассказывает нам, какова функция бытовых предметов; когда мы что-то видим, мы знаем, какова его функция. Так, например, мы ожидаем, что красный свет на светофоре означает «стоп», а зелёный свет означает «идти». Жизнь станет очень сложной, если применяется неправильная семантика (какие-либо страны используют красный цвет для обозначения «идти»? Надеюсь, что нет.)
 
-<p>В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает,  роль (или значение) «заголовка верхнего уровня на вашей странице».</p>
+В подобном ключе нам нужно убедиться, что мы используем правильные элементы, придавая нашему контенту правильное значение, функцию или внешний вид. В этом контексте элемент {{htmlelement ("h1")}} также является семантическим элементом, который даёт тексту, который он обёртывает, роль (или значение) «заголовка верхнего уровня на вашей странице».
 
-<pre class="brush: html">&lt;h1&gt;Это заголовок верхнего уровня&lt;/h1&gt;</pre>
+```html
+<h1>Это заголовок верхнего уровня</h1>
+```
 
-<p>По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).</p>
+По умолчанию браузер придаст ему большой размер шрифта, чтобы он выглядел как заголовок (хотя вы можете стилизовать его как угодно, используя CSS). Что ещё более важно, его семантическое значение будет использоваться несколькими способами, например, поисковыми системами и программами чтения с экрана (как упоминалось выше).
 
-<p>С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:</p>
+С другой стороны, вы можете сделать любой элемент похожим на заголовок верхнего уровня. Рассмотрим следующее:
 
-<pre class="brush: html">&lt;span style="font-size: 32px; margin: 21px 0;"&gt;Это заголовок верхнего уровня?&lt;/span&gt;</pre>
+```html
+<span style="font-size: 32px; margin: 21px 0;">Это заголовок верхнего уровня?</span>
+```
 
-<p>Это элемент {{htmlelement ("span")}}. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.</p>
+Это элемент {{htmlelement ("span")}}. У него нет семантики. Вы используете его, когда хотите применить к контенту CSS (или сделать что-то с ним с помощью JavaScript), не придавая ему никакого дополнительного значения (об этом вы узнаете позже). Мы применили CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимуществ, описанных выше. Рекомендуется использовать соответствующий элемент HTML на практике.
 
-<h2 id="Списки">Списки</h2>
+## Списки
 
-<p>Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.</p>
+Теперь обратим наше внимание на списки. Списки есть везде вокруг нас — от вашего списка покупок до списка направлений, которым вы подсознательно следуете, чтобы каждый день добраться домой, и списка инструкций, которые вы выполняете в этом руководстве! Списки используются всюду в Интернете, и мы рассмотрим три разных типа списков.
 
-<h3 id="Неупорядоченные">Неупорядоченные</h3>
+### Неупорядоченные
 
-<p>Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:</p>
+Неупорядоченные списки используются для элементов, для которых порядок не имеет значения, — возьмём, к примеру, список покупок:
 
-<pre>молоко
+```
+молоко
 яйца
 хлеб
-хумус</pre>
+хумус
+```
 
-<p>Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (<em>unordered list</em>) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.</p>
+Каждый неупорядоченный список начинается с элемента {{htmlelement ("ul")}} (_unordered list_) — он обёртывает все элементы списка: молоко, яйца, хлеб, хумус.
 
-<p>Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):</p>
+Последний шаг состоит в том, чтобы обернуть каждый элемент списка в элемент {{htmlelement ("li")}} (элемент списка):
 
-<pre class="brush: html">&lt;ul&gt;
-  &lt;li&gt;молоко&lt;/li&gt;
-  &lt;li&gt;яйца&lt;/li&gt;
-  &lt;li&gt;хлеб&lt;/li&gt;
-  &lt;li&gt;хумус&lt;/li&gt;
-&lt;/ul&gt;</pre>
+```html
+<ul>
+  <li>молоко</li>
+  <li>яйца</li>
+  <li>хлеб</li>
+  <li>хумус</li>
+</ul>
+```
 
-<h3 id="Активное_изучение_разметка_неупорядоченного_списка">Активное изучение: разметка неупорядоченного списка</h3>
+### Активное изучение: разметка неупорядоченного списка
 
-<p>Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.</p>
+Попробуйте отредактировать образец ниже, чтобы создать свой собственный неупорядоченный список HTML.
 
-<div class="hidden">
-<pre class="brush: html"><code>&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code>&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 100px; width: 95%"&gt;молоко
+<textarea id="code" class="input" style="min-height: 100px; width: 95%">молоко
 яйца
 хлеб
-хумус&lt;/textarea&gt;
+хумус</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</code></pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -328,10 +328,10 @@ h2 {
   font-size: 0.7rem;
   width: 98%;
 }
+```
 
-</pre>
-
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -361,7 +361,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;ul&gt;\n&lt;li&gt;молоко&lt;/li&gt;\n&lt;li&gt;яйца&lt;/li&gt;\n&lt;li&gt;хлеб&lt;/li&gt;\n&lt;li&gt;хумус&lt;/li&gt;\n&lt;/ul&gt;';
+var htmlSolution = '<ul>\n<li>молоко</li>\n<li>яйца</li>\n<li>хлеб</li>\n<li>хумус</li>\n</ul>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -400,55 +400,60 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 400) }}</p>
+{{ EmbedLiveSample('Playable_code_2', 700, 400) }}
 
-<h3 id="Упорядоченные">Упорядоченные</h3>
+### Упорядоченные
 
-<p>Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:</p>
+Упорядоченные списки — это списки, в которых порядок элементов имеет значение, — возьмём в качестве примера маршрут следования:
 
-<pre>Двигайтесь до конца дороги
+```
+Двигайтесь до конца дороги
 Поверните направо
 Езжайте прямо через первые два перекрёстка с круговым движением
 Поверните налево на третьем перекрёстке
-Школа справа от вас, 300 метров вверх по дороге</pre>
-
-<p>Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не &lt;ul&gt;:</p>
+Школа справа от вас, 300 метров вверх по дороге
+```
 
-<pre class="brush: html">&lt;ol&gt;
-   &lt;li&gt;Двигайтесь до конца дороги&lt;/li&gt;
-   &lt;li&gt;Поверните направо&lt;/li&gt;
-   &lt;li&gt;Езжайте прямо через первые два перекрёстка с круговым движением&lt;/li&gt;
-   &lt;li&gt;Поверните налево на третьем перекрёстке&lt;/li&gt;
-   &lt;li&gt;Школа справа от вас, в 300 метрах вверх по дороге&lt;/li&gt;
-&lt;/ol&gt;</pre>
+Структура разметки такая же, как для неупорядоченных списков, за исключением того, что вы должны обернуть элементы списка в элемент {{htmlelement ("ol")}} (ordered list), а не \<ul>:
 
-<h3 id="Активное_изучение_разметка_упорядоченного_списка">Активное изучение: разметка упорядоченного списка</h3>
+```html
+<ol>
+   <li>Двигайтесь до конца дороги</li>
+   <li>Поверните направо</li>
+   <li>Езжайте прямо через первые два перекрёстка с круговым движением</li>
+   <li>Поверните налево на третьем перекрёстке</li>
+   <li>Школа справа от вас, в 300 метрах вверх по дороге</li>
+</ol>
+```
 
-<p>Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.</p>
+### Активное изучение: разметка упорядоченного списка
 
-<div class="hidden">
+Попробуйте отредактировать образец ниже, чтобы создать свой собственный упорядоченный список HTML.
 
-<pre class="brush: html"><code>&lt;h2&gt;Результат&lt;/h2&gt;
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code>&lt;/p&gt;
+```html hidden
+<h2>Результат</h2>
+<div class="output" style="min-height: 50px;">
+</div>
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;</code>Двигайтесь до конца дороги
+<textarea id="code" class="input" style="min-height: 200px; width: 95%">Двигайтесь до конца дороги
 Поверните направо
 Езжайте прямо через первые два перекрёстка с круговым движением
 Поверните налево на третьем перекрёстке
-Школа справа от вас, 300 метров вверх по дороге<code>&lt;/textarea&gt;
+Школа справа от вас, 300 метров вверх по дороге</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</code></pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -479,10 +484,10 @@ h2 {
   font-size: 0.7rem;
   width: 98%;
 }
+```
 
-</pre>
-
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -512,7 +517,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;ol&gt;\n&lt;li&gt;Двигайтесь до конца дороги&lt;/li&gt;\n&lt;li&gt;Поверните направо&lt;/li&gt;\n&lt;li&gt;Езжайте прямо через первые два перекрёстка с круговым движением&lt;/li&gt;\n&lt;li&gt;Поверните налево на третьем перекрёстке&lt;/li&gt;\n&lt;li&gt;Школа справа от вас, 300 метров вверх по дороге&lt;/li&gt;\n&lt;/ol&gt;';
+var htmlSolution = '<ol>\n<li>Двигайтесь до конца дороги</li>\n<li>Поверните направо</li>\n<li>Езжайте прямо через первые два перекрёстка с круговым движением</li>\n<li>Поверните налево на третьем перекрёстке</li>\n<li>Школа справа от вас, 300 метров вверх по дороге</li>\n</ol>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -544,33 +549,32 @@ function insertAtCaret(text) {
 }
 
 textarea.onkeyup = function(){
-  if(solution.value === 'Показать решение&gt;') {
+  if(solution.value === 'Показать решение>') {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
   }
 
   updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_3', 700, 500) }}</p>
+};
+```
 
-<h3 id="Активное_изучение_разметка_собственной_страницы_рецептов">Активное изучение: разметка собственной страницы рецептов</h3>
+{{ EmbedLiveSample('Playable_code_3', 700, 500) }}
 
-<p>Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.</p>
+### Активное изучение: разметка собственной страницы рецептов
 
-<div class="hidden">
+Итак, в этот момент в статье у вас есть вся необходимая информация, чтобы разметить наш пример страницы рецепта. Вы можете либо сохранить локальную копию исходного файла [text-start.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html) и выполнить в нём работу, либо сделать это в приведённом ниже примере. Делать это локально, вероятно, будет лучше, так как тогда вы сможете сохранить работу, которую вы делаете, тогда как если вы её добавите в редактируемый пример, она будет потеряна при следующем открытии страницы. У обоих способов есть плюсы и минусы.
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;<code>Редактируемый код</code>&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;Рецепт быстрого приготовления хумуса.
+<textarea id="code" class="input" style="min-height: 200px; width: 95%">Рецепт быстрого приготовления хумуса.
 
   Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.
 
@@ -601,14 +605,16 @@ textarea.onkeyup = function(){
 
   Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.
 
-  Хумус можно хранить в морозильном отделении 2–3 месяца.&lt;/textarea&gt;
+  Хумус можно хранить в морозильном отделении 2–3 месяца.</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -639,9 +645,10 @@ h2 {
   font-size: 0.7rem;
   width: 98%;
 }
-</pre>
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -671,7 +678,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;h1&gt;Рецепт быстрого приготовления хумуса.&lt;/h1&gt;\n\n&lt;p&gt;Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.&lt;/p&gt;\n\n&lt;p&gt;Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.&lt;/p&gt;\n\n&lt;h2&gt;Ингредиенты&lt;/h2&gt;\n\n&lt;ul&gt;\n&lt;li&gt;1 банка (400г) турецкого гороха (или бараньего гороха)&lt;/li&gt;\n&lt;li&gt;175г тахани&lt;/li&gt;\n&lt;li&gt;6 вяленых томатов&lt;/li&gt;\n&lt;li&gt;Половинка красного перца&lt;/li&gt;\n&lt;li&gt;Щепотка кайенского перца&lt;/li&gt;\n&lt;li&gt;1 зубчик чеснока&lt;/li&gt;\n&lt;li&gt;Чуть-чуть оливкового масла&lt;/li&gt;\n&lt;/ul&gt;\n\n&lt;h2&gt;Рецепт&lt;/h2&gt;\n\n&lt;ol&gt;\n&lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;\n&lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте.&lt;/li&gt;\n&lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;\n&lt;li&gt;Измельчите все ингредиенты до состояния пасты.&lt;/li&gt;\n&lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;\n&lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;\n&lt;/ol&gt;\n\n&lt;p&gt;По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.&lt;/p&gt;\n\n&lt;h2&gt;Хранение&lt;/h2&gt;\n\n&lt;p&gt;Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.&lt;/p&gt;\n\n&lt;p&gt;Хумус можно хранить в морозильном отделении 2–3 месяца.&lt;/p&gt;';
+var htmlSolution = '<h1>Рецепт быстрого приготовления хумуса.</h1>\n\n<p>Хумус — быстро, вкусно, — и ничего лишнего. Этот рецепт был составлен из других рецептов, которые мне попадались в течение многих лет.</p>\n\n<p>Хумус — это вкусная густая паста, широко используемая в Греческих и Ближневосточных блюдах. Очень вкусно есть его с салатами, мясом на гриле и питой.</p>\n\n<h2>Ингредиенты</h2>\n\n<ul>\n<li>1 банка (400г) турецкого гороха (или бараньего гороха)</li>\n<li>175г тахани</li>\n<li>6 вяленых томатов</li>\n<li>Половинка красного перца</li>\n<li>Щепотка кайенского перца</li>\n<li>1 зубчик чеснока</li>\n<li>Чуть-чуть оливкового масла</li>\n</ul>\n\n<h2>Рецепт</h2>\n\n<ol>\n<li>Очистите чеснок от кожуры и крупно нарежьте.</li>\n<li>Удалите стебель и семена у перца; крупно нарежьте.</li>\n<li>Добавьте все ингредиенты в пищевой комбайн.</li>\n<li>Измельчите все ингредиенты до состояния пасты.</li>\n<li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>\n<li>Если вам нужен гладкий хумус, измельчайте дольше.</li>\n</ol>\n\n<p>По вкусу можете добавить в небольших количествах лимон и кориандский перец, лайм и чипотле, хариссу и мяту или шпинат и брынзу. Попробуйте и решите, что подходит вам.</p>\n\n<h2>Хранение</h2>\n\n<p>Храните хумус в запечатанном контейнере в холодильнике. Хумус хранится примерно неделю после приготовления. Если он начнёт пениться, выкидывайте его.</p>\n\n<p>Хумус можно хранить в морозильном отделении 2–3 месяца.</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -710,107 +717,119 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_4', 700, 500) }}</p>
+{{ EmbedLiveSample('Playable_code_4', 700, 500) }}
 
-<p>Если вы застряли, вы всегда можете нажать кнопку <em>Показать решение</em> или проверить наш пример <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> в нашем реестре github.</p>
+Если вы застряли, вы всегда можете нажать кнопку _Показать решение_ или проверить наш пример [text-complete.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html) в нашем реестре github.
 
-<h3 id="Вложенные_списки">Вложенные списки</h3>
+### Вложенные списки
 
-<p>Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:</p>
+Вполне нормально вложить один список в другой. Возможно, вы захотите, чтобы один список располагался внутри другого. Давайте возьмём второй список из нашего примера рецепта:
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;
-  &lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте перец.&lt;/li&gt;
-  &lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;
-  &lt;li&gt;Измельчите все ингредиенты до состояния пасты.&lt;/li&gt;
-  &lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;
-  &lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;
-&lt;/ol&gt; </pre>
+```html
+<ol>
+  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
+  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
+  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
+  <li>Измельчите все ингредиенты до состояния пасты.</li>
+  <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
+  <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
+</ol>
+```
 
-<p>Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:</p>
+Поскольку последние две строки очень тесно связаны с тем, что было до них (они читаются как вспомогательные инструкции или варианты, которые подходят под этой маркой), может иметь смысл вложить их в свой собственный неупорядоченный список и поместить этот список внутри текущего. Это будет выглядеть так:
 
-<pre class="brush: html">&lt;ol&gt;
-  &lt;li&gt;Очистите чеснок от кожуры и крупно нарежьте.&lt;/li&gt;
-  &lt;li&gt;Удалите стебель и семена у перца; крупно нарежьте перец.&lt;/li&gt;
-  &lt;li&gt;Добавьте все ингредиенты в пищевой комбайн.&lt;/li&gt;
-  &lt;li&gt;Измельчите все ингредиенты до состояния пасты.
-    &lt;ul&gt;
-      &lt;li&gt;Если вы хотите "грубый" хумус, измельчайте пару минут.&lt;/li&gt;
-      &lt;li&gt;Если вам нужен гладкий хумус, измельчайте дольше.&lt;/li&gt;
-    &lt;/ul&gt;
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
+```html
+<ol>
+  <li>Очистите чеснок от кожуры и крупно нарежьте.</li>
+  <li>Удалите стебель и семена у перца; крупно нарежьте перец.</li>
+  <li>Добавьте все ингредиенты в пищевой комбайн.</li>
+  <li>Измельчите все ингредиенты до состояния пасты.
+    <ul>
+      <li>Если вы хотите "грубый" хумус, измельчайте пару минут.</li>
+      <li>Если вам нужен гладкий хумус, измельчайте дольше.</li>
+    </ul>
+  </li>
+</ol>
+```
 
-<p>Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.</p>
+Попробуйте вернуться к предыдущему примеру активного обучения и обновить второй список.
 
-<h2 id="Акцент_и_важность">Акцент и важность</h2>
+## Акцент и важность
 
-<p>В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.</p>
+В обиходе мы часто подчёркиваем определённые слова, чтобы изменить смысл предложения и мы часто хотим отметить некоторые слова как важные или разные в некотором роде. HTML предоставляет различные семантические элементы, позволяющие нам добавлять текстовые материалы с такими эффектами, и в этом разделе мы рассмотрим несколько наиболее распространённых.
 
-<h3 id="Акцент">Акцент</h3>
+### Акцент
 
-<p>Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их <em>курсивом</em>. Например, следующие два предложения имеют разные значения.</p>
+Когда мы хотим добавить акцент в разговорный язык, мы подчёркиваем определённые слова, тонко изменяя смысл того, что мы говорим. Точно так же на письменном языке мы склонны подчёркивать слова, выделяя их _курсивом_. Например, следующие два предложения имеют разные значения.
 
-<p>Я рад, что ты не опоздал.</p>
+Я рад, что ты не опоздал.
 
-<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>
+Я _рад_, что ты не _опоздал_.
 
-<p>В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.</p>
+В первом предложении звучит искреннее облегчение, что человек не опоздал. Во втором, напротив, звучит сарказм или пассивная агрессия: так выражена досада от того, что человек немного опоздал.
 
-<p>В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).</p>
+В таких случаях в HTML используется элемент {{htmlelement ("em")}} (выделение). Кроме того, чтобы сделать документ более интересным для чтения, они распознаются программами, считывающими с экрана, и произносятся другим тоном. Браузеры стилизуют это по умолчанию курсивом, но вы можете не использовать этот тег, чтобы получить курсив. Для выделения курсивом вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("i")}} (смотрите ниже).
 
-<pre class="brush: html">&lt;p&gt;Я &lt;em&gt;рад&lt;/em&gt;, что ты не &lt;em&gt;опоздал&lt;/em&gt;.&lt;/p&gt;</pre>
+```html
+<p>Я <em>рад</em>, что ты не <em>опоздал</em>.</p>
+```
 
-<h3 id="Важное_значение">Важное значение</h3>
+### Важное значение
 
-<p>Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и <strong>выделять жирным</strong> на письменном языке. Например:</p>
+Чтобы подчеркнуть важные слова, мы склонны подчёркивать их в устной речи и **выделять жирным** на письменном языке. Например:
 
-<p>Эта жидкость <strong>очень токсична</strong>.</p>
-<p>Я рассчитываю на вас. <strong>Не опаздывай</strong>!</p>
+Эта жидкость **очень токсична**.
 
-<p>В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение). Помимо того, что документ становится более полезным,  они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (смотрите ниже).</p>
+Я рассчитываю на вас. **Не опаздывай**!
 
-<pre class="brush: html">&lt;p&gt;Эта жидкость &lt;strong&gt;очень токсична&lt;/strong&gt;.&lt;/p&gt;
+В таких случаях в HTML используется элемент {{htmlelement ("strong")}} (важное значение). Помимо того, что документ становится более полезным, они распознаются программами, считывающими с экрана, и говорят другим тоном. Браузеры стилизуют это как полужирный текст по умолчанию, но вы можете не использовать этот тег, чтобы получить жирный шрифт. Для получения жирного шрифта вы можете использовать элемент {{htmlelement ("span")}} и CSS, или, возможно, элемент {{htmlelement ("b")}} (смотрите ниже).
 
-&lt;p&gt;Я рассчитываю на тебя. &lt;strong&gt;Не &lt;/strong&gt;опаздывай!&lt;/p&gt;</pre>
+```html
+<p>Эта жидкость <strong>очень токсична</strong>.</p>
 
-<p>При желании вы можете вложить важные и акцентированные слова друг в друга:</p>
+<p>Я рассчитываю на тебя. <strong>Не </strong>опаздывай!</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Эта жидкость &lt;strong&gt;очень токсична&lt;/strong&gt; —
-если ты выпьешь её, &lt;strong&gt;то можешь&lt;em&gt;умереть&lt;/em&gt;&lt;/strong&gt;.&lt;/p&gt;</pre>
+При желании вы можете вложить важные и акцентированные слова друг в друга:
 
-<h3 id="Активное_изучение_Давайте_будем_важны!">Активное изучение: Давайте будем важны!</h3>
+```html
+<p>Эта жидкость <strong>очень токсична</strong> —
+если ты выпьешь её, <strong>то можешь<em>умереть</em></strong>.</p>
+```
 
-<p>В этом разделе активного обучения мы предоставили редактируемый пример. Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.</p>
+### Активное изучение: Давайте будем важны!
 
-<div class="hidden">
+В этом разделе активного обучения мы предоставили редактируемый пример. Внутри него мы хотели бы, чтобы вы попытались добавить акцент и большую важность для слов, которые, по вашему мнению, им нужны, просто для того, чтобы попрактиковаться.
 
-<pre class="brush: html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="input" style="min-height: 200px; width: 95%"&gt;&lt;h1&gt;Важное объявление&lt;/h1&gt;
-&lt;p&gt;9 января 2010 года, в воскресенье,
+<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Важное объявление</h1>
+<p>9 января 2010 года, в воскресенье,
 банда вандалов была обнаружена за кражей нескольких
 садовых гномов из торгового центра в центре Милуоки. На них были
 надеты зелёные спортивные костюмы и глупые шляпы, и,
 по-видимому, они были в нетрезвом состоянии. Если у кого-то
 есть какая-либо информация об этом инциденте, пожалуйста,
-позвоните в полицию немедленно.&lt;/p&gt;&lt;/textarea&gt;
+позвоните в полицию немедленно.</p></textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -828,9 +847,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -860,7 +881,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;h1&gt;Важное объявление&lt;/h1&gt;\n&lt;p&gt;&lt;strong&gt;9 января 2010 года, в воскресенье&lt;/strong&gt;, банда &lt;em&gt;вандалов&lt;/em&gt; была обнаружена за кражей &lt;strong&gt;&lt;em&gt;нескольких&lt;/em&gt; садовых гномов&lt;/strong&gt; торговом центре в центре &lt;strong&gt;Милуоки&lt;/strong&gt;. На них были надеты &lt;em&gt;зелёные спортивные костюмы&lt;/em&gt; и &lt;em&gt;глупые шляпы&lt;/em&gt;, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть &lt;strong&gt;какая-либо&lt;/strong&gt; информация об этом инциденте, пожалуйста, позвоните в полицию &lt;strong&gt;немедленно&lt;/strong&gt;.&lt;/p&gt;';
+var htmlSolution = '<h1>Важное объявление</h1>\n<p><strong>9 января 2010 года, в воскресенье</strong>, банда <em>вандалов</em> была обнаружена за кражей <strong><em>нескольких</em> садовых гномов</strong> торговом центре в центре <strong>Милуоки</strong>. На них были надеты <em>зелёные спортивные костюмы</em> и <em>глупые шляпы</em>, и, по-видимому, они были в нетрезвом состоянии. Если у кого-то есть <strong>какая-либо</strong> информация об этом инциденте, пожалуйста, позвоните в полицию <strong>немедленно</strong>.</p>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -906,72 +927,68 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_5', 700, 500) }}</p>
+{{ EmbedLiveSample('Playable_code_5', 700, 500) }}
 
-<h3 id="Курсив_жирный_шрифт_подчеркивание...">Курсив, жирный шрифт, подчеркивание...</h3>
+### Курсив, жирный шрифт, подчеркивание...
 
-<p>Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS  поддерживался плохо или вообще не поддерживался, чтобы люди могли писать <strong>жирный </strong>текст, <em>курсив </em>или <u>подчёркнутый</u> текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.</p>
+Элементы, которые мы обсуждали до сих пор, имеют чёткую привязку к семантике. Ситуация с {{htmlelement ("b")}}, {{htmlelement ("i")}} и {{htmlelement ("u")}} несколько сложнее. Они появились в эпоху, когда CSS поддерживался плохо или вообще не поддерживался, чтобы люди могли писать **жирный** текст, _курсив_ или **подчёркнутый** текст. Такие элементы, которые влияют только на внешний вид, а не на семантику, известны как элементы представления и больше не должны использоваться, поскольку, как мы видели ранее, семантика очень важна для доступности людям с ограниченными возможностями, SEO и так далее.
 
-<p>HTML5 переопределил &lt;b&gt;, &lt;i&gt; и &lt;u&gt; с новыми, несколько запутанными, семантическими ролями.</p>
+HTML5 переопределил \<b>, \<i> и \<u> с новыми, несколько запутанными, семантическими ролями.
 
-<p>Вот хорошее правило: предпочтительней использовать &lt;b&gt;, &lt;i&gt; или &lt;u&gt; для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.</p>
+Вот хорошее правило: предпочтительней использовать \<b>, \<i> или \<u> для передачи значения, традиционно передаваемого жирным шрифтом, курсивом или подчёркиванием, при условии, что нет более подходящего элемента. Тем не менее, всегда важно сохранить менталитет доступности. Концепция курсива не очень помогает людям, использующим устройства для чтения с экрана, или людям, использующим систему письма, отличную от латинского алфавита.
 
-<ul>
- <li>{{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...</li>
- <li>{{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...</li>
- <li>{{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка ...</li>
-</ul>
+- {{HTMLElement ('i')}} используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономические обозначения, технические термины, мысли ...
+- {{HTMLElement ('b')}} используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, предложения ...
+- {{HTMLElement ('u')}} используется для передачи значения, традиционно передаваемого подчёркиванием: имя собственное, орфографическая ошибка ...
 
-<div class="note">
-<p>Предупреждение о подчёркивании:<strong> люди сильно ассоциируют подчёркивание с гиперссылками</strong>. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент &lt;u&gt;, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.</p>
-</div>
+> **Примечание:** Предупреждение о подчёркивании: **люди сильно ассоциируют подчёркивание с гиперссылками**. Поэтому в Интернете лучше всего подчеркнуть только ссылки. Используйте элемент \<u>, когда он семантически подходит, но подумайте о том, чтобы использовать CSS для изменения подчёркивания по умолчанию для чего-то более подходящего в Интернете. Пример ниже иллюстрирует, как это можно сделать.
 
-<pre class="brush: html">&lt;!-- Научные наименования --&gt;
-&lt;p&gt;
-  Колибри обыкновенный (&lt;i&gt;архилоус обыкновенный&lt;/i&gt;) —
+```html
+<!-- Научные наименования -->
+<p>
+  Колибри обыкновенный (<i>архилоус обыкновенный</i>) —
 наиболее часто встречающийся вид колибри в северо-восточной Америке.
-&lt;/p&gt;
-
-&lt;!-- Иностранные слова --&gt;
-&lt;p&gt;
-  Случился прилив иностранных слов, таких как &lt;i lang="uk-latn"&gt;vatrushka&lt;/i&gt;,
-  &lt;i lang="id"&gt;nasi goreng&lt;/i&gt; и &lt;i lang="fr"&gt;soupe à l'oignon&lt;/i&gt;.
-&lt;/p&gt;
-
-&lt;!-- Явно неправильное произношение или написание --&gt;
-&lt;p&gt;
-  Когда-нибудь я узнаю, как &lt;u&gt;гаварить&lt;/u&gt; без ошибок.
-&lt;/p&gt;
-
-&lt;!-- Выделение ключевых слов в инструкциях --&gt;
-&lt;ol&gt;
-  &lt;li&gt;
-    &lt;b&gt;Отрежьте&lt;/b&gt; два ломтика хлеба.
-  &lt;/li&gt;
-  &lt;li&gt;
-    &lt;b&gt;Добавьте&lt;/b&gt; кусочек помидора и лист латука между ломтями хлеба.
-  &lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">создавать гиперссылки</a>, возможно, самый важный элемент в Интернете. </p>
-
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+</p>
+
+<!-- Иностранные слова -->
+<p>
+  Случился прилив иностранных слов, таких как <i lang="uk-latn">vatrushka</i>,
+  <i lang="id">nasi goreng</i> и <i lang="fr">soupe à l'oignon</i>.
+</p>
+
+<!-- Явно неправильное произношение или написание -->
+<p>
+  Когда-нибудь я узнаю, как <u>гаварить</u> без ошибок.
+</p>
+
+<!-- Выделение ключевых слов в инструкциях -->
+<ol>
+  <li>
+    <b>Отрежьте</b> два ломтика хлеба.
+  </li>
+  <li>
+    <b>Добавьте</b> кусочек помидора и лист латука между ломтями хлеба.
+  </li>
+</ol>
+```
+
+## Заключение
+
+Вот и всё! Эта статья должна была дать вам хорошее представление о том, как начать разметку текста в HTML, и познакомить вас с некоторыми из наиболее важных элементов в этой области. В этой области есть намного больше семантических элементов, и мы рассмотрим их в нашей статье «Больше семантических элементов» позже в курсе. В следующей статье мы подробно рассмотрим, как [создавать гиперссылки](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), возможно, самый важный элемент в Интернете.
+
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}
+
+## В этом модуле
+
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/index.md b/files/ru/learn/html/introduction_to_html/index.md
index 53cf0838cddee0..b4729ac8bb39e9 100644
--- a/files/ru/learn/html/introduction_to_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/index.md
@@ -16,53 +16,45 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML
 original_slug: Learn/HTML/Введение_в_HTML
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">По сути, {{glossary("HTML")}} довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.</p>
+По сути, {{glossary("HTML")}} довольно простой язык, состоящий из элементов, которые могут быть применены к частям текста, чтобы придавать им различные значения (Это абзац? Это маркированный список? Это часть таблицы?), разделять документ на логические секции (есть ли у документа шапка? три столбца с контентом? меню навигации?) и добавлять контент на Вашу страницу, такой как фото и видео. Этот модуль расскажет вам о первых двух возможностях HTML и научит фундаментальным концепциям и синтаксису, которые вам нужно знать, чтобы понять HTML.
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">Установка базового программного обеспечения</a>), а также понимание, как создавать и управлять файлами, что подробно описано в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Работа с файлами</a> — обе статьи являются частью нашего модуля <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">Начало работы с сетью</a>.</p>
+Чтобы начать изучение этого модуля, вам не нужны никакие знания HTML, но вы должны иметь хотя бы базовые навыки обращения с компьютером и навыки пассивного использования Веба (т.е просто смотря на него, потребляя контент). У вас должна быть базовая рабочая среда, описанная в разделе [Установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)), а также понимание, как создавать и управлять файлами, что подробно описано в статье [Работа с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files) — обе статьи являются частью нашего модуля [Начало работы с сетью](/ru/docs/Learn/Getting_started_with_the_web).
 
-<div class="note">
-<p><strong>Примечание</strong>: если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble.</a></p>
-</div>
+> **Примечание:** если вы работаете на компьютере/планшете/другом устройстве, с отсутствием возможности создания собственных файлов, вы можете испробовать примеры кода (большинство) в онлайн-редакторах кода, таких как [JSBin](http://jsbin.com/) или [Thimble.](https://thimble.mozilla.org/)
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<p>Этот модуль содержит следующие статьи, которые помогут изучить всю основную теорию HTML и предоставят широкие возможности для проверки некоторых навыков.</p>
+Этот модуль содержит следующие статьи, которые помогут изучить всю основную теорию HTML и предоставят широкие возможности для проверки некоторых навыков.
 
-<dl>
- <dt><a href="/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы">Начало работы с HTML</a></dt>
- <dd>Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML-элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></dt>
- <dd>Заголовок HTML — это часть документа, которая <strong>не отображается</strong> в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></dt>
- <dd>Основной задачей HTML является придание тексту значения <strong>(</strong>также известно, как <strong>семантика</strong>), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></dt>
- <dd>Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></dt>
- <dd>Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>. Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></dt>
- <dd>Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации",  "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></dt>
- <dd>Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут вам помочь.</dd>
-</dl>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/Введение_в_HTML/Начало_работы)
+  - : Охватывает базовые основы HTML, чтобы вы начали изучение - мы опишем элементы, атрибуты и все другие важные термины, о которых вы, возможно, уже слышали, а также где и как они располагаются в языке. Мы также покажем, структуру HTML-элемента, как устроена типичная страница HTML, и объясним другие важные языковые особенности. По ходу мы будем играть с HTML так, чтобы вам было интересно!
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+  - : Заголовок HTML — это часть документа, которая **не отображается** в браузере при загрузке страницы. Он содержит информацию, такую как: страница {{htmlelement("title")}}, ссылки на {{glossary("CSS")}} (если вы хотите стилизовать свой HTML при помощи CSS), ссылки на пользовательские значки и метаданные (которые представляют собой данные о HTML, например, кто его написал или важные ключевые слова, которые описывают документ).
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+  - : Основной задачей HTML является придание тексту значения **(**также известно, как **семантика**), чтобы браузер знал, как его правильно отображать. В этой статье рассматривается то, как использовать HTML, чтобы разбить блок текста на структуру из заголовков и абзацев, добавить акцент/значение слов, создать списки и многое другое.
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+  - : Гиперссылки очень важны — ведь именно они делают интернет интернетом. В этой статье описан синтаксис, необходимый для создания ссылок, а также описано их наилучшее применение на практике.
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+  - : Существует множество других элементов HTML для редактирования текста, про которые мы вам не рассказали в статье [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals). Описанные здесь элементы менее известны, но о них также полезно знать. Здесь вы узнаете о разметке цитат, списках описания, компьютерном коде и другом сопутствующем тексте, нижнем и верхнем индексах, контактной информации и многом другом.
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+  - : Помимо определения отдельных частей страницы (таких как "абзац" или "изображение"), HTML также используется для определения отдельных зон веб-сайта (таких как "шапка", "меню навигации", "столбец с основным содержимым".) В этой статье рассматривается, как планировать базовую структуру веб-сайта и писать HTML для представления этой структуры.
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+  - : Писать на HTML хорошо, но что, если что-то идёт не так, и вы не можете найти место ошибки в коде? В этой статье вы познакомитесь с некоторыми инструментами, которые могут вам помочь.
 
-<h2 id="Оценка">Оценка</h2>
+## Оценка
 
-<p>Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.</p>
+Следующие задания проверят ваше понимание основ HTML, описанных в приведённых выше руководствах.
 
-<dl>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></dt>
- <dd>Все мы рано или поздно учимся писать письма; также это полезный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.</dd>
- <dt><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></dt>
- <dd>Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.</dd>
-</dl>
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+  - : Все мы рано или поздно учимся писать письма; также это полезный тест, для проверки ваших навыков форматирования текста! Поэтому, в этом задании вам будет предоставлено письмо для разметки.
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
+  - : Этот тест проверит вашу способность использовать HTML для структурирования простой страницы, которая содержит шапку ("хедер") , нижний колонтитул ("футер"), меню навигации, основное содержимое и боковую панель.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Основы интернет-грамотности</a></dt>
- <dd>Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле <em>Введение в HTML. </em>Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.</dd>
-</dl>
+- [Основы интернет-грамотности](https://teach.mozilla.org/activities/web-lit-basics/)
+  - : Отличный фундаментальный курс Mozilla, который даёт множество тестов, проверяющих знания, о которых мы говорили в модуле _Введение в HTML._ Учащиеся знакомятся с чтением, письмом и использованием сети в модуле из 6 частей. Откройте для себя основы Интернета через производство и сотрудничество.
diff --git a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
index 145734d89becdc..8849cec8a09833 100644
--- a/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
+++ b/files/ru/learn/html/introduction_to_html/marking_up_a_letter/index.md
@@ -6,97 +6,72 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Marking_up_a_letter
 original_slug: Learn/HTML/Введение_в_HTML/Marking_up_a_letter
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</div>
+Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента `<head>`.
 
-<p class="summary">Мы все учимся писать письма рано или поздно; это также хороший способ испытать наши навыки форматирования! В этом задании у вас будет письмо для проверки ваших навыков форматирования текста HTML, использования гиперссылок и элемента <code>&lt;head&gt;</code>.</p>
+| Знания: | Перед выполнением этого задания вы должны пройти [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B), [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML), [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals), [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA), и [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting). |
+| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:   | Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега `<head>`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Знания:</th>
-   <td>
-    <p>Перед выполнением этого задания вы должны пройти <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a>, и <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Проверить базовые и продвинутые навыки HTML форматирования и работы с гиперссылками, и знания о содержимом HTML тега <code>&lt;head&gt;</code>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Для начала задания, вы должны [скачать текст](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt), который вам надо отформатировать, и [CSS стиль](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt), который вы должны подключить к вашему HTML. Создайте .html файл используя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редакторами, таким как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/)).
 
-<p>Для начала задания, вы должны <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/letter-text.txt">скачать текст</a>, который вам надо отформатировать, и <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/marking-up-a-letter-start/css.txt">CSS стиль</a>, который вы должны подключить к вашему HTML. Создайте .html файл используя текстовый редактор, которым вы пользуетесь (или воспользуйтесь онлайн редакторами, таким как <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>).</p>
+## Описание проекта
 
-<h2 id="Описание_проекта">Описание проекта</h2>
+В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.
 
-<p>В этом проекте, ваша задача - отформатировать письмо, которое должно быть размещено во внутренней сети университета. Это письмо - ответ исследователя будущему PhD студенту о его заявлении на работу в университете.</p>
+Блочные элементы / структура:
 
-<p>Блочные элементы / структура:</p>
+- Вы должны корректно структурировать весь документ, включив в него элементы doctype, и {{htmlelement("html")}}, {{htmlelement("head")}} и {{htmlelement("body")}}.
+- Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.
+- Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответствующие типы списков.
+- Два адреса должны быть помещены внутри элементов {{htmlelement("address")}}. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.
 
-<ul>
- <li>Вы должны корректно структурировать весь документ, включив в него элементы doctype, и {{htmlelement("html")}}, {{htmlelement("head")}} и {{htmlelement("body")}}.</li>
- <li>Письмо в целом должно быть размечено используя параграфы и заголовки, за исключением следующих пунктов - один заголовок верхнего уровня (начинается на "Re:") и три заголовка второго уровня.</li>
- <li>Даты начала семестра, изучения предметов и экзотических танцев должны быть помечены используя соответствующие типы списков.</li>
- <li>Два адреса должны быть помещены внутри элементов {{htmlelement("address")}}. Каждая строка адреса должна находиться на новой строке, но не быть новым параграфом.</li>
-</ul>
+Строчные элементы:
 
-<p>Строчные элементы:</p>
+- Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.
+- Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.
+- Первый адрес и первая дата в письме должны иметь атрибут `class` со значением `"sender-column"`; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.
+- Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.
+- Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 103 и 104 (степень числа должна быть над числом).
+- Для разметки символов градуса и умножения воспользуйтесь [справкой](https://ru.wikipedia.org/wiki/Мнемоники_в_HTML).
+- Постарайтесь выделить как минимум два нужных по смыслу слова в тексте жирным.
+- Есть два места, где следует разместить гиперссылки; добавьте нужные ссылки с заголовками. В качестве адреса для ссылок используйте http\://example.com.
+- Девиз университета и цитата должны быть размечены соответствующими элементами.
 
-<ul>
- <li>Имена отправителя и получателя (как и "Tel" и "Email") должны быть выделены жирным.</li>
- <li>Четырём датам в документе необходимо выбрать правильные элементы содержащие машинно-читаемые даты.</li>
- <li>Первый адрес и первая дата в письме должны иметь атрибут <code>class</code> со значением <code>"sender-column"</code>; CSS стиль, который вы добавите позже, позволит выравнять по правому боку, как оно и должно быть в классической разметке письма.</li>
- <li>Пять акронимов/аббревиатур в главном тексте письма должны быть размечены, чтобы предоставить подсказки для каждого акронима/аббревиатуры.</li>
- <li>Шесть под/надстрочных элементов должны быть оформлены корректно в химической формуле, как и числа 10<sup>3</sup> и 10<sup>4 </sup>(степень числа должна быть над числом).</li>
- <li>Для разметки символов градуса и умножения воспользуйтесь <a href="https://ru.wikipedia.org/wiki/Мнемоники_в_HTML">справкой</a>.</li>
- <li>Постарайтесь выделить как минимум два нужных по смыслу слова в тексте жирным.</li>
- <li>Есть два места, где следует разместить гиперссылки; добавьте нужные ссылки с заголовками. В качестве адреса для ссылок используйте http://example.com.</li>
- <li>Девиз университета и цитата должны быть размечены соответствующими элементами.</li>
-</ul>
+Заголовок документа:
 
-<p>Заголовок документа:</p>
+- Кодировка документа должна быть указана как utf-8 с использованием соответствующего мета-тега.
+- Автор письма должен быть указан в соответствующем мета-теге.
+- Предоставленный CSS должен быть включён в соответствующий тег.
 
-<ul>
- <li>Кодировка документа должна быть указана как utf-8 с использованием соответствующего мета-тега.</li>
- <li>Автор письма должен быть указан в соответствующем мета-теге.</li>
- <li>Предоставленный CSS должен быть включён в соответствующий тег.</li>
-</ul>
+## Советы и подсказки
 
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+- Проверяйте свой HTML в [валидаторе W3C](https://validator.w3.org/) — писать валидный код здорово!
+- Для задания не нужно знать CSS — просто укажите CSS из задания в документе.
 
-<ul>
- <li>Проверяйте свой HTML в <a href="https://validator.w3.org/">валидаторе W3C</a> — писать валидный код здорово!</li>
- <li>Для задания не нужно знать CSS — просто укажите CSS из задания в документе.</li>
-</ul>
+## Пример
 
-<h2 id="Пример">Пример</h2>
+Это скриншот размеченного письма:
 
-<p>Это скриншот размеченного письма:</p>
+![Example](https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png)
 
-<p><img alt="Example" src="https://mdn.mozillademos.org/files/15811/Letter%20screengrab%202.png" style="border: 1px solid black; display: block; height: 1858px; margin: 0px auto; width: 931px;"></p>
+## Оценка
 
-<h2 id="Оценка">Оценка</h2>
+Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на [форум, в тему этого задания](https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676), или по тегу [#mdn](irc://irc.mozilla.org/mdn) в нашем IRC-канале ([Mozilla IRC](https://wiki.mozilla.org/IRC)). Сделайте это задание сами — вам некого обманывать, кроме себя самого.
 
-<p>Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на <a href="https://discourse.mozilla.org/t/marking-up-a-letter-assignment/24676">форум, в тему этого задания</a>, или по тегу <a href="irc://irc.mozilla.org/mdn">#mdn</a> в нашем IRC-канале (<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>). Сделайте это задание сами — вам некого обманывать, кроме себя самого.</p>
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}
 
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content", "Learn/HTML/Introduction_to_HTML")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
index b31f64216f0df3..6f6e2862a8d84b 100644
--- a/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
+++ b/files/ru/learn/html/introduction_to_html/structuring_a_page_of_content/index.md
@@ -6,97 +6,72 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content
 original_slug: Learn/HTML/Введение_в_HTML/Structuring_a_page_of_content
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>
+Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.
 
-<p class="summary">Разметить страницу так, чтобы к ней было просто применить CSS — первое, чему должен научиться будущий веб-разработчик. В этом задании вам придётся подумать о том, как должна выглядеть страница, и подобрать подходящую семантическую разметку.</p>
+| Что нужно знать: | Вам понадобятся навыки из всего курса. Особое внимание уделите разделу [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0). |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:            | Проверить знания структуры веб-страницы и её перевода в разметку.                                                                                                                                                                                                                                                                                                  |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Что нужно знать:</th>
-   <td>Вам понадобятся навыки из всего курса. Особое внимание уделите разделу <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Проверить знания структуры веб-страницы и её перевода в разметку.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Чтобы начать это, вы должны перейти и скачать [архив содержащий все начальные активы](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true). Архив содержит:
 
-<p>Чтобы начать это, вы должны перейти и скачать <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/structuring-a-page-of-content-start/assets.zip?raw=true">архив содержащий все начальные активы</a>. Архив содержит:</p>
+- HTML, где вам нужно добавить структурную разметку.
+- CSS для стилизации вашей разметки.
+- Изображения, которые используются на странице.
 
-<ul>
- <li>HTML, где вам нужно добавить структурную разметку.</li>
- <li>CSS для стилизации вашей разметки.</li>
- <li>Изображения, которые используются на странице.</li>
-</ul>
+Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/) для исследования.
 
-<p>Создайте пример на вашем локальном компьютере или, альтернативно, используйте сайт, например <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для исследования.</p>
+## Краткое описание проекта
 
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+Для этого проекта ваша задача - взять контент для домашней страницы веб-сайта наблюдения за птицами и добавить к нему структурные элементы, чтобы он мог использовать макет страницы. Он должен иметь:
 
-<p>Для этого проекта ваша задача - взять контент для домашней страницы веб-сайта наблюдения за птицами и добавить к нему структурные элементы, чтобы он мог использовать макет страницы. Он должен иметь:</p>
+- Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.
+- Основная область содержимого, содержащая два столбца - основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.
+- Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.
 
-<ul>
- <li>Заголовок, охватывающий всю ширину сайта, содержащий основное название страницы, логотип сайта и меню навигации. Заголовок и логотип появляются рядом друг с другом, когда применяется стилизация, и навигация появляется ниже этих двух элементов.</li>
- <li>Основная область содержимого, содержащая два столбца - основной блок, содержащий текст приветствия, и боковую панель для размещения миниатюр изображений.</li>
- <li>Нижний колонтитул, содержащий информацию об авторских правах и разработчиках.</li>
-</ul>
+Вам необходимо добавить подходящую обёртку для:
 
-<p>Вам необходимо добавить подходящую обёртку для:</p>
+- Заголовка
+- Меню навигации
+- Основного содержимого
+- Приветственного текста
+- Боковой панели изображения
+- Нижнего колонтитула
 
-<ul>
- <li>Заголовка</li>
- <li>Меню навигации</li>
- <li>Основного содержимого</li>
- <li>Приветственного текста</li>
- <li>Боковой панели изображения</li>
- <li>Нижнего колонтитула</li>
-</ul>
+Вы также должны:
 
-<p>Вы также должны:</p>
+- Примените предоставленный CSS к странице, добавив ещё один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.
 
-<ul>
- <li>Примените предоставленный CSS к странице, добавив ещё один элемент {{htmlelement ("link")}} чуть ниже существующего, указанного в начале.</li>
-</ul>
+## Советы и подсказки
 
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+- Используйте [W3C HTML validator](https://validator.w3.org/) для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).
+- Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.
+- Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.
+- Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.
 
-<ul>
- <li>Используйте <a href="https://validator.w3.org/">W3C HTML validator</a> для проверки вашего HTML; вы получите бонусные баллы, если он будет проверять как можно больше (строка «googleapis» используется для импорта пользовательских шрифтов на страницу из службы Google Fonts, она не проверяет, но не беспокойтесь об этом слишком много - валидатор - полезный инструмент, но 100% проверка является идеальной, а не полностью необходимой).</li>
- <li>Вам не нужно знать CSS, чтобы сделать эту оценку; вам просто нужно поместить предоставленный CSS внутри HTML-элемента.</li>
- <li>Предоставленный CSS разработан таким образом, что при добавлении правильных структурных элементов в разметку они будут отображаться зелёными на отображаемой странице.</li>
- <li>Если вы застряли и не можете понять, какие элементы куда помещать, часто помогает вывести простую блок-схему макета страницы и сделать надписи на элементах, которые, по вашему мнению, должны обернуть каждый блок.</li>
-</ul>
+## Пример
 
-<h2 id="Пример">Пример</h2>
+Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.
 
-<p>Следующий скриншот показывает пример того, как может выглядеть домашняя страница после маркировки.</p>
+![The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message](https://mdn.mozillademos.org/files/12449/example-page.png)
 
-<p><img alt='The finished example for the assessment; a simple webpage about birdwatching, including a heading of "Birdwatching", bird photos, and a welcome message' src="https://mdn.mozillademos.org/files/12449/example-page.png" style="display: block; margin: 0 auto;"></p>
+## Оценивание
 
-<h2 id="Оценивание">Оценивание</h2>
+Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на [форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla](https://discourse.mozilla.org/t/structuring-a-page-of-content-assessment/24678), или в IRC-канале [#mdn](irc://irc.mozilla.org/mdn) в [IRC Mozilla](https://wiki.mozilla.org/IRC). Попробуйте выполнить задание сами, ведь вам некого обманывать, кроме себя самого!
 
-<p>Если вам дали это задание на каком-то курсе, просто передайте свою страницу для проверки преподавателю. Если вы учитесь сами, обратитесь на <a href="https://discourse.mozilla.org/t/structuring-a-page-of-content-assessment/24678">форум, задав тему обсуждения этого упражнения, или в IRC-канале #mdn в IRC Mozilla</a>, или в IRC-канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> в <a href="https://wiki.mozilla.org/IRC">IRC Mozilla</a>. Попробуйте выполнить задание сами, ведь вам некого обманывать, кроме себя самого!</p>
+{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}
 
-<p>{{PreviousMenu("Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
index d9637abfdfea4d..0b09b4ac5c7115 100644
--- a/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
+++ b/files/ru/learn/html/introduction_to_html/the_head_metadata_in_html/index.md
@@ -17,285 +17,272 @@ tags:
 translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML
 original_slug: Learn/HTML/Введение_в_HTML/The_head_metadata_in_HTML
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</div>
+Элемент {{glossary("Head", "head")}} HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:
 
-<p>Элемент {{glossary("Head", "head")}} HTML-документа не отображается на странице в веб-браузере. Он содержит такую информацию, как:</p>
+- {{htmlelement("title", "заголовок (title)")}} страницы
+- ссылки на файлы {{glossary("CSS")}} (если вы хотите применить к вашему HTML стили CSS)
+- ссылки на иконки
+- другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)
 
-<ul>
- <li>{{htmlelement("title", "заголовок (title)")}} страницы</li>
- <li>ссылки на файлы {{glossary("CSS")}} (если вы хотите применить к вашему HTML стили CSS)</li>
- <li>ссылки на иконки</li>
- <li>другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)</li>
-</ul>
+В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.
 
-<p>В этой статье мы рассмотрим всё вышеперечисленное и многое другое, чтобы дать вам хорошую основу для работы с разметкой.</p>
+| Предварительные требования: | Базовое знакомство с HTML , описанное в [Начало работы с HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started).              |
+| --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:                     | Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные требования:</th>
-   <td>Базовое знакомство с HTML , описанное в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать о заголовке HTML, его значении, важнейших элементах, которые содержатся в нём, и о том, как он может повлиять на HTML-документ.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое \<head>?
 
-<h2 id="Что_такое_&lt;head>">Что такое &lt;head&gt;?</h2>
+Давайте снова посмотрим на [HTML-документ из прошлой статьи](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0):
 
-<p>Давайте снова посмотрим на <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B#%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0">HTML-документ из прошлой статьи</a>:</p>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Моя тестовая страница</title>
+  </head>
+  <body>
+    <p>Это — моя страница</p>
+  </body>
+</html>
+```
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Моя тестовая страница&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;p&gt;Это — моя страница&lt;/p&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача \<head> — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере \<head> совсем небольшой:
 
-<p>Содержимое {{htmlelement("head")}}, в отличие от содержимого элемента {{htmlelement("body")}}, не отображается на странице. Задача &lt;head&gt; — хранить {{glossary("Metadata", "метаданные")}} документа. В приведённом выше примере &lt;head&gt; совсем небольшой:</p>
+```html
+<head>
+  <meta charset="utf-8">
+  <title>Моя тестовая страница</title>
+</head>
+```
 
-<pre class="brush: html">&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Моя тестовая страница&lt;/title&gt;
-&lt;/head&gt;</pre>
+Однако на больших страницах блок \<head> может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое \<head> с помощью [инструментов разработчика](/ru/docs/Learn/Discover_browser_developer_tools). Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.
 
-<p>Однако на больших страницах блок &lt;head&gt; может быть довольно объёмным. Попробуйте зайти на какие-нибудь из ваших любимых сайтов и посмотреть содержимое &lt;head&gt; с помощью <a href="/ru/docs/Learn/Discover_browser_developer_tools">инструментов разработчика</a>. Наша цель сейчас — не в том, чтобы показать вам, как использовать всё, что только можно добавить в head, а дать представление и научить вас, как использовать основные элементы. Давайте начнём.</p>
+## Название страницы (title)
 
-<h2 id="Название_страницы_title">Название страницы (title)</h2>
+Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда называют заголовком страницы. Но это разные вещи!
 
-<p>Мы уже видели, как работает элемент {{htmlelement("title")}}: его используют для добавления заголовка (названия страницы) в документ. Элемент {{htmlelement("h1")}} тоже иногда называют заголовком страницы. Но это разные вещи!</p>
+- Элемент {{htmlelement("h1")}} виден на странице, открытой в браузере, — его используют **один раз на странице**, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.
+- Элемент {{htmlelement("title")}} — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого.
 
-<ul>
- <li>Элемент {{htmlelement("h1")}} виден на странице, открытой в браузере, — его используют <strong>один раз на странице</strong>, чтобы выделить название содержимого. Это может быть название истории, заголовок новости или что-то в этом роде.</li>
- <li>Элемент {{htmlelement("title")}} — метаданные, название всего HTML-документа, а не заголовок внутри его содержимого. </li>
-</ul>
+### Активное изучение: разбор простого примера
 
-<h3 id="Активное_изучение_разбор_простого_примера">Активное изучение: разбор простого примера</h3>
+1.  Чтобы приступить к активному изучению, скачайте страницу [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html) из нашего GitHub-репозитория. Это можно сделать двумя способами:
 
-<ol>
- <li>Чтобы приступить к активному изучению,  скачайте страницу <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a> из нашего GitHub-репозитория. Это можно сделать двумя способами:
+    1.  Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.
+    2.  Нажмите на странице кнопку "Raw", нажмите _Файл > Сохранить Как..._ в меню браузера и выберите папку для сохранения.
 
-  <ol>
-   <li>Скопируйте и вставьте код страницы в новый текстовый файл в своём редакторе кода, затем сохраните его в любом удобном месте.</li>
-   <li>Нажмите на странице кнопку "Raw", нажмите <em>Файл &gt; Сохранить Как...</em> в меню браузера и выберите папку для сохранения.</li>
-  </ol>
- </li>
- <li>Откройте файл в браузере. Вы увидите что-то вроде этого:
-  <p><img alt="A simple web page with the title set to &lt;title> element, and the &lt;h1> set to &lt;h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Теперь должно стать совершенно ясно, в чём разница между <code>&lt;h1&gt;</code> и <code>&lt;title&gt;</code>!</p>
- </li>
- <li>Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!</li>
-</ol>
+2.  Откройте файл в браузере. Вы увидите что-то вроде этого:
 
-<p>Содержимое элемента <code>&lt;title&gt;</code> используется и в других местах. Например, при добавлении страницы в избранное (<em>Bookmarks &gt; Bookmark This Page</em> в Firefox), текст из <code>&lt;title&gt;</code> предлагается в качестве названия закладки.</p>
+    ![A simple web page with the title set to <title> element, and the <h1> set to <h1> element.](https://mdn.mozillademos.org/files/12323/title-example.png)Теперь должно стать совершенно ясно, в чём разница между `<h1>` и `<title>`!
 
-<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the &lt;title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p>
+3.  Откройте код страницы в редакторе, измените содержимое элементов и обновите страницу в браузере. Развлекайтесь!
 
-<p>Текст из <code>&lt;title&gt;</code> также появляется в результатах поиска, как мы скоро увидим.</p>
+Содержимое элемента `<title>` используется и в других местах. Например, при добавлении страницы в избранное (_Bookmarks > Bookmark This Page_ в Firefox), текст из `<title>` предлагается в качестве названия закладки.
 
-<h2 id="Метаданные_Элемент_&lt;meta>">Метаданные: Элемент &lt;meta&gt;</h2>
+![A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element ](https://mdn.mozillademos.org/files/12337/bookmark-example.png)
 
-<p>Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент {{htmlelement("meta")}}. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей <code>&lt;meta&gt;</code>. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.</p>
+Текст из `<title>` также появляется в результатах поиска, как мы скоро увидим.
 
-<h3 id="Указываем_кодировку_текста_документа">Указываем кодировку текста документа</h3>
+## Метаданные: Элемент \<meta>
 
-<p>В заголовке примера выше есть следующая строка:</p>
+Метаданные — данные, которые описывают данные. У HTML есть «официальное» место для метаданных документа — элемент {{htmlelement("meta")}}. Конечно, другие вещи, о которых мы говорим в этой статье, тоже можно назвать метаданными. Существует множество разновидностей `<meta>`. Не станем пытаться охватить их все сразу — так недолго и запутаться, а рассмотрим несколько самых популярных, чтобы разобраться, что к чему.
 
-<pre class="brush: html">&lt;meta charset="utf-8"&gt;</pre>
+### Указываем кодировку текста документа
 
-<p>В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . <code>utf-8</code> — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:</p>
+В заголовке примера выше есть следующая строка:
 
-<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Если использовать, скажем, кодировку <code>ISO-8859-1</code> (набор символов для латиницы), текст страницы испортится:</p>
+```html
+<meta charset="utf-8">
+```
 
-<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p>
+В этом элементе указана кодировка документа — набор символов, которые в нём можно использовать . `utf-8` — универсальный набор символов, который включает почти все символы со всех языков человечества. Такая веб-страница сможет работать с любым языком. Установить эту кодировку на всех веб-страницах, которые вы создаёте — отличная идея! Страница в такой кодировке прекрасно отображает как английские, так и японские символы:
 
-<div class="note">
-<p><strong>Примечание</strong>: Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.</p>
-</div>
+![a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine,](https://mdn.mozillademos.org/files/12343/correct-encoding.png)Если использовать, скажем, кодировку `ISO-8859-1` (набор символов для латиницы), текст страницы испортится:
 
-<h3 id="Активное_изучение_экспериментируем_с_символьными_кодировками">Активное изучение: экспериментируем с символьными кодировками</h3>
+![a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly](https://mdn.mozillademos.org/files/12341/bad-encoding.png)
 
-<p>Чтобы проверить это, вернитесь к HTML из примера <code>&lt;title&gt;</code> (странице <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>), поменяйте meta charset на <code>ISO-8859-1</code> и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано <em>«рис горячий»</em>):</p>
+> **Примечание:** Некоторые браузеры (например, Chrome) автоматически исправляют неправильную кодировку, поэтому, в зависимости от используемого вами браузера, вы можете не увидеть эту проблему. Несмотря на это вам всё равно необходимо указывать кодировку UTF-8 для вашей страницы, чтобы избежать возможных проблем в других браузерах.
 
-<pre class="brush: html">&lt;p&gt;Пример на японском: ご飯が熱い。&lt;/p&gt;</pre>
+### Активное изучение: экспериментируем с символьными кодировками
 
-<h3 id="Указываем_автора_и_описание">Указываем автора и описание</h3>
+Чтобы проверить это, вернитесь к HTML из примера `<title>` (странице [title-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html)), поменяйте meta charset на `ISO-8859-1` и попробуйте написать что-нибудь на японском или русском. Вот текст из нашего примера (кстати, там написано _«рис горячий»_):
 
-<p>У элементов <code>&lt;meta&gt;</code> часто есть атрибуты <code>name</code> и <code>content</code>:</p>
+```html
+<p>Пример на японском: ご飯が熱い。</p>
+```
 
-<ul>
- <li><code>name</code> — тип элемента, то есть какие именно метаданные он содержит.</li>
- <li><code>content</code> — сами метаданные.</li>
-</ul>
+### Указываем автора и описание
 
-<p>Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:</p>
+У элементов `<meta>` часто есть атрибуты `name` и `content`:
 
-<pre class="brush: html">&lt;meta name="author" content="Крис Миллс"&gt;
-&lt;meta name="description" content="Задача MDN — в том, чтобы обучить
-новичков всему тому, что нужно им для разработки веб-сайтов и приложений."&gt;</pre>
+- `name` — тип элемента, то есть какие именно метаданные он содержит.
+- `content` — сами метаданные.
 
-<p>По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.</p>
+Два полезных элемента метаданных — указание автора страницы и краткое описание её содержимого. Рассмотрим эти элементы на примере:
 
-<p>Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют <a href="/en-US/docs/Glossary/SEO">поисковой оптимизацией</a>, или {{glossary("SEO")}}.</p>
+```html
+<meta name="author" content="Крис Миллс">
+<meta name="description" content="Задача MDN — в том, чтобы обучить
+новичков всему тому, что нужно им для разработки веб-сайтов и приложений.">
+```
 
-<h3 id="Активное_изучение_как_поисковые_системы_используют_описание">Активное изучение: как поисковые системы используют описание</h3>
+По указанному имени автора (author) можно найти человека, который написал страницу, и связаться с ним. Некоторые системы управления содержимым (CMS) автоматически обрабатывают эту информацию и делают её доступной для таких целей.
 
-<p>Описание из <code>&lt;meta name="description"&gt;</code> используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.</p>
+Краткое описание (description) содержимого страницы учитывается поисковыми системами при совпадении ключевых слов. Такое называют [поисковой оптимизацией](/ru/docs/Glossary/SEO), или {{glossary("SEO")}}.
 
-<ol>
- <li>Перейдите на<a href="https://developer.mozilla.org/en-US/"> главную страницу Mozilla Developer Network</a>.</li>
- <li>Откройте исходный код страницы (кликните правой кнопкой мыши и выберите <em>Просмотреть код</em> в контекстном меню.)</li>
- <li>Найдите тег meta с описанием. Он выглядит так:
-  <pre class="brush: html">&lt;meta name="description" content="Веб-документация на MDN
-предоставляет собой информацию об открытых веб-технологиях,
-включая HTML, CSS и различные API для веб-сайтов и
-прогрессивных веб-приложений. Также на сайте содержатся материалы
-для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox."&gt;</pre>
- </li>
- <li>Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из <code>&lt;meta&gt;</code> и <code>&lt;title&gt;</code> используется в результатах поиска, — мы не зря указали их!</li>
-</ol>
+### Активное изучение: как поисковые системы используют описание
 
-<p><img alt="Результат поиска в Google" src="https://mdn.mozillademos.org/files/17061/Updated_search_result__ru.jpg" style="border-style: solid; border-width: 1px; height: 542px; width: 819px;"></p>
+Описание из `<meta name="description">` используется на страницах поисковой выдачи. Проведём небольшое исследование такого сценария.
 
-<div class="note">
-<p><strong>Примечание</strong>: Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через <a href="http://www.google.com/webmasters/tools/">Google Search Console</a>, чтобы пользователи могли сразу перейти к ним со страницы поиска.</p>
-</div>
+1.  Перейдите на[ главную страницу Mozilla Developer Network](https://developer.mozilla.org/en-US/).
+2.  Откройте исходный код страницы (кликните правой кнопкой мыши и выберите _Просмотреть код_ в контекстном меню.)
+3.  Найдите тег meta с описанием. Он выглядит так:
 
-<div class="note">
-<p><strong>Примечание</strong>: Многие типы <code>&lt;meta&gt;</code> больше не используются. Так, поисковые системы больше не используют данные из элемента <code>&lt;meta type="keywords" content="ваши, ключевые, слова, введите, здесь"&gt;</code>, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.</p>
-</div>
+    ```html
+    <meta name="description" content="Веб-документация на MDN
+    предоставляет собой информацию об открытых веб-технологиях,
+    включая HTML, CSS и различные API для веб-сайтов и
+    прогрессивных веб-приложений. Также на сайте содержатся материалы
+    для разработчиков о таких продуктах Mozilla, как Инструменты разработчика Firefox.">
+    ```
 
-<h3 id="Другие_виды_метаданных">Другие виды метаданных</h3>
+4.  Теперь найдите "Mozilla Developer Network" в своём поисковике (мы использовали Google). Обратите внимание, что описание и название из `<meta>` и `<title>` используется в результатах поиска, — мы не зря указали их!
 
-<p>В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.</p>
+![Результат поиска в Google](https://mdn.mozillademos.org/files/17061/Updated_search_result__ru.jpg)
 
-<p>Например, <a href="https://ruogp.me/">Протокол Open Graph</a> создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:</p>
+> **Примечание:** Google также показывает важные страницы MDN под ссылкой на главную страницу. Такие ссылки называются sitelinks, и их можно настроить через [Google Search Console](http://www.google.com/webmasters/tools/), чтобы пользователи могли сразу перейти к ним со страницы поиска.
 
-<pre class="brush: html">&lt;meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png"&gt;
-&lt;meta property="og:description" content="Веб-документация на MDN предоставляет
+> **Примечание:** Многие типы `<meta>` больше не используются. Так, поисковые системы больше не используют данные из элемента `<meta type="keywords" content="ваши, ключевые, слова, введите, здесь">`, в котором указывали ключевые слова, по которым можно найти страницу: спамеры засовывали туда все слова, какие могли придумать, чтобы их сайты почаще появлялись в поиске.
+
+### Другие виды метаданных
+
+В сети вы найдёте также другие типы метаданных. Многие из них — это собственные форматы, созданные для предоставления определённым сайтам (например, социальных сетей) специальной информации, которую они могут использовать.
+
+Например, [Протокол Open Graph](https://ruogp.me/) создан Facebook чтобы предоставить сайтам дополнительные возможности использования метаданных. В исходном коде MDN Web Docs вы можете найти строки:
+
+```html
+<meta property="og:image" content="/static/img/opengraph-logo.72382e605ce3.png">
+<meta property="og:description" content="Веб-документация на MDN предоставляет
 собой информацию об открытых веб-технологиях, включая HTML, CSS и различные API для веб-сайтов
 и прогрессивных веб-приложений. Также на сайте содержатся материалы для разработчиков о таких
-продуктах Mozilla, как Инструменты разработчика Firefox."&gt;
-&lt;meta property="og:title" content="MDN Web Docs"&gt;</pre>
+продуктах Mozilla, как Инструменты разработчика Firefox.">
+<meta property="og:title" content="MDN Web Docs">
+```
+
+Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия _[(User eXperience, UX](https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F))\_.
+
+![Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description.](https://mdn.mozillademos.org/files/12349/facebook-output.png)У Twitter также есть собственный формат метаданных, с помощью которого создаётся аналогичный эффект, при отображении URL сайта на twitter.com:
 
-<p>Один из результатов добавления этих метаданных в том, что когда вы добавите ссылку MDN Web Docs на facebook, она отобразится с изображением и описанием, улучшая опыт взаимодействия <em><a href="https://ru.wikipedia.org/wiki/%D0%9E%D0%BF%D1%8B%D1%82_%D0%B2%D0%B7%D0%B0%D0%B8%D0%BC%D0%BE%D0%B4%D0%B5%D0%B9%D1%81%D1%82%D0%B2%D0%B8%D1%8F">(User eXperience, UX</a>)</em>.</p>
+```html
+<meta name="twitter:title" content="MDN Web Docs">
+```
 
-<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">У Twitter также есть собственный формат метаданных, с помощью которого  создаётся аналогичный эффект, при отображении URL сайта на twitter.com:</p>
+## Добавление иконок
 
-<pre class="brush: html">&lt;meta name="twitter:title" content="MDN Web Docs"&gt;</pre>
+Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.
 
-<h2 id="Добавление_иконок">Добавление иконок</h2>
+[Favicon](https://ru.wikipedia.org/wiki/Favicon), один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.![The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it.](https://mdn.mozillademos.org/files/12351/bookmark-favicon.png)
 
-<p>Чтобы добавить своему сайту узнаваемости, можно указать в метаданных разные иконки.</p>
+Чтобы добавить на страницу favicon:
 
-<p><a href="https://ru.wikipedia.org/wiki/Favicon">Favicon</a>, один из старожилов интернета, стал первой из таких иконок. Браузеры показывают её в заголовке вкладки и в списке избранных страниц.<img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p>
+1.  Сохраните изображение в формате `.ico` (многие браузеры поддерживают и в более привычных форматах, таких как `.gif` или `.png`) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат `.ico`
+2.  Добавьте ссылку на иконку в `<head>` документа:
 
-<p>Чтобы добавить на страницу favicon:</p>
+    ```html
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+    ```
 
-<ol>
- <li>Сохраните изображение в формате <code>.ico</code> (многие браузеры поддерживают и в более привычных форматах, таких как <code>.gif</code> или <code>.png</code>) в папку со своим документом. Старые браузеры, например, Internet Explorer 6, поддерживают только формат <code>.ico</code></li>
- <li>Добавьте ссылку на иконку в <code>&lt;head&gt;</code> документа:
-  <pre class="brush: html">&lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon"&gt;</pre>
- </li>
-</ol>
+Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:
 
-<p>Для разных устройств можно указывать разные иконки. Например, на главной странице MDN:</p>
+```html
+<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png">
+<!-- Для iPhone с Retina-экраном высокого разрешения: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png">
+<!-- Для iPad первого и второго поколения: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png">
+<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png">
+<!-- Для других случаев - обычный favicon -->
+<link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png">
+```
 
-<pre class="brush: html">&lt;!-- Для iPad 3 с Retina-экраном высокого разрешения: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.mozilla.org/static/img/favicon144.png"&gt;
-&lt;!-- Для iPhone с Retina-экраном высокого разрешения: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.mozilla.org/static/img/favicon114.png"&gt;
-&lt;!-- Для iPad первого и второго поколения: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.mozilla.org/static/img/favicon72.png"&gt;
-&lt;!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: --&gt;
-&lt;link rel="apple-touch-icon-precomposed" href="https://developer.mozilla.org/static/img/favicon57.png"&gt;
-&lt;!-- Для других случаев - обычный favicon --&gt;
-&lt;link rel="shortcut icon" href="https://developer.mozilla.org/static/img/favicon32.png"&gt;</pre>
+В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении.
 
-<p>В комментариях указано, для чего используется каждая иконка — например, при добавлении страницы на домашний экран iPad будет использована иконка в высоком разрешении. </p>
+Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.
 
-<p>Не беспокойтесь о реализации всех этих типов значков — это довольно продвинутая функция, и мы не станем возвращаться к ней в курсе. Основная цель — показать вам, что это такое, если вы столкнётесь с ними при просмотре исходного кода других веб-сайтов.</p>
+## Подключение CSS и JavaScript
 
-<h2 id="Подключение_CSS_и_JavaScript">Подключение CSS и JavaScript</h2>
+Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .
 
-<p>Современные сайты используют {{glossary("CSS")}}, чтобы выглядеть привлекательнее, и добавляют интерактивные функции через {{glossary("JavaScript")}}: видеоплееры, карты, игры. Обычно связанные стили добавляют на страницу через элемент {{htmlelement("link")}}, а скрипты — через элемент {{htmlelement("script")}} .</p>
+- Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: `rel="stylesheet"` показывает, что мы указываем _стиль_ документа, а в `href` указан путь к файлу:
 
-<ul>
- <li>
-  <p>Элемент {{htmlelement("link")}} помещают в заголовок документа. У него есть два атрибута: <code>rel="stylesheet"</code> показывает, что мы указываем <em>стиль</em> документа, а в <code>href</code> указан путь к файлу:</p>
+  ```html
+  <link rel="stylesheet" href="my-css-file.css">
+  ```
 
-  <pre class="brush: html">&lt;link rel="stylesheet" href="my-css-file.css"&gt;</pre>
- </li>
- <li>
-  <p>Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом <code>&lt;/body&gt;</code>. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.</p>
+- Элемент {{htmlelement("script")}} не обязательно находится в заголовке — на самом деле лучше поместить его в самом конце страницы, прямо перед закрывающем тегом `</body>`. Так браузер сначала отобразит саму страницу, а уже затем загрузит и запустит скрипт — иначе скрипт может обратиться к ещё не созданному элементу страницы и сломаться.
 
-  <pre class="brush: html">&lt;script src="my-js-file.js"&gt;&lt;/script&gt;</pre>
+  ```html
+  <script src="my-js-file.js"></script>
+  ```
 
-  <p><strong>Примечание</strong>: Элемент <code>&lt;script&gt;</code> кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.</p>
- </li>
-</ul>
+  **Примечание**: Элемент `<script>` кажется пустым, но это не всегда так, и указывать закрывающий тег обязательно. Вместо того чтобы ссылаться на внешний скрипт, код можно писать прямо внутри этого элемента — так можно не тратить время на загрузку отдельного скрипта, но зато не выйдет сослаться на один js-файл с нескольких страниц.
 
-<h3 id="Активное_изучение_добавляем_на_страницу_CSS_и_JavaScript">Активное изучение: добавляем на страницу CSS и JavaScript</h3>
+### Активное изучение: добавляем на страницу CSS и JavaScript
 
-<ol>
- <li>Для этого упражнения скачайте файлы <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.</li>
- <li>Откройте HTML в браузере и текстовом редакторе.</li>
- <li>Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов {{htmlelement("link")}} и {{htmlelement("script")}}.</li>
-</ol>
+1.  Для этого упражнения скачайте файлы [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html), [script.js](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js) и [style.css](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css) и положите их в одну папку на своём компьютере. Проверьте, что они сохранились с правильными именами и расширениями.
+2.  Откройте HTML в браузере и текстовом редакторе.
+3.  Следуя изученному материалу, добавьте на страницу скрипт и стиль с помощью элементов {{htmlelement("link")}} и {{htmlelement("script")}}.
 
-<p>Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:</p>
+Если всё получилось, когда вы сохраните HTML и обновите страницу в браузере, вы увидите кое-что новенькое:
 
-<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p>
+![Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page.](https://mdn.mozillademos.org/files/12359/js-and-css.png)
 
-<ul>
- <li>JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.</li>
- <li>CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.</li>
-</ul>
+- JavaScript добавил на страницу пустой список. При нажатии на красную область появляется окно, в которое можно ввести текст нового пункта списка. При нажатии на кнопку OK пункт добавляется на страницу. Текст существующих пунктов списка можно редактировать, нажимая на них.
+- CSS покрасил фон зелёным и увеличил размер шрифта, а также стилизовал элементы, добавленные JavaScript. Красный прямоугольник и рамка вокруг списка — тоже его рук дело.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p>
-</div>
+> **Примечание:** Если вам никак не удаётся подключить CSS или JS, посмотрите на наш готовый пример — страницу [css-and-js.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html).
 
-<h2 id="Основной_язык_HTML_страницы">Основной язык HTML страницы</h2>
+## Основной язык HTML страницы
 
-<p>Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив <a href="/en-US/docs/Web/HTML/Global_attributes/lang">атрибут lang</a> в открывающий HTML-тег (как в примере <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>: и как показано ниже):</p>
+Наконец, стоит отметить, что вы можете (и действительно должны) установить язык для своей страницы. Это можно сделать, добавив [атрибут lang](/ru/docs/Web/HTML/Global_attributes/lang) в открывающий HTML-тег (как в примере [meta-example.html](https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html): и как показано ниже):
 
-<pre class="syntaxbox">&lt;html lang="en-US"&gt;</pre>
+```
+<html lang="en-US">
+```
 
-<pre class="syntaxbox">&lt;html lang="ru"&gt;
-</pre>
+```
+<html lang="ru">
+```
 
-<p>Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).</p>
+Это полезно во многих случаях. Ваш HTML-документ будет более эффективно индексироваться поисковыми системами, если его язык установлен (что позволяет ему правильно отображаться в языковых результатах), и он полезен людям с нарушением зрения, которые используют программы, читающие страницы вслух (например, слово "шесть" пишется одинаково как на французском, так и на английском языках, но произносится по-разному.).
 
-<p>Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:</p>
+Можно также указать язык для части документа. Например, мы могли бы установить язык для части страницы на японском:
 
-<pre class="brush: html">&lt;p&gt;Пример на японском: &lt;span lang="ja"&gt;ご飯が熱い。&lt;/span&gt;.&lt;/p&gt;</pre>
+```html
+<p>Пример на японском: <span lang="ja">ご飯が熱い。</span>.</p>
+```
 
-<p>Коды языков определены в стандарте <a href="https://en.wikipedia.org/wiki/ISO_639-1">ISO 639-1</a>. Подробнее о работе с языками можно узнать в <a href="https://www.w3.org/International/articles/language-tags/">Языковые тэги в HTML и XML</a>.</p>
+Коды языков определены в стандарте [ISO 639-1](https://en.wikipedia.org/wiki/ISO_639-1). Подробнее о работе с языками можно узнать в [Языковые тэги в HTML и XML](https://www.w3.org/International/articles/language-tags/).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>На этом заканчивается наш беглый обзор по HTML-блоку head  —  с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.</p>
+На этом заканчивается наш беглый обзор по HTML-блоку head — с его помощью вы можете делать гораздо больше, но исчерпывающий обзор будет скучным и запутанным на этом этапе, мы же сейчас хотели дать вам представление о самых распространённых вещах, которые вы можете там найти! В следующей статье мы рассмотрим основы разметки текста в HTML.
 
-<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p>
+{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">Что такое заголовок? Метаданные в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals">Основы редактирования текста в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting">Углублённое форматирование текста</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0">Структура документа и веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML">Отладка HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter">Разметка письма</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content">Структурируем страницу</a></li>
-</ul>
+- [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)
+- [Что такое заголовок? Метаданные в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML)
+- [Основы редактирования текста в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/HTML_text_fundamentals)
+- [Создание гиперссылок](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA)
+- [Углублённое форматирование текста](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Advanced_text_formatting)
+- [Структура документа и веб-сайта](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_%D0%B8_%D0%B2%D0%B5%D0%B1-%D1%81%D0%B0%D0%B9%D1%82%D0%B0)
+- [Отладка HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Debugging_HTML)
+- [Разметка письма](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Marking_up_a_letter)
+- [Структурируем страницу](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/Structuring_a_page_of_content)
diff --git a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
index 6159940bf86c8a..86865a4fef87bd 100644
--- a/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.md
@@ -4,224 +4,199 @@ slug: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
 translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web
 original_slug: Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.
 
-<div class="summary">
-<p>Векторная графика очень полезна во многих случаях. Она имеет малые размеры файла и высокую масштабируемость – при увеличении масштаба пиксели не увеличиваются вместе с графикой. В данной статье мы покажем, как встраивать векторную графику на Вашу страницу.</p>
-</div>
+| Навыки: | Знание [основ HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) и умение [добавлять изображение в веб-документ](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). |
+| ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:   | Изучить как встроить SVG (векторное) изображение на веб-страницу.                                                                                                           |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Навыки:</th>
-   <td>Знание <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">основ HTML</a> и умение <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">добавлять изображение в веб-документ</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить как встроить SVG (векторное) изображение на веб-страницу.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Примечание</strong>: Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.</p>
-</div>
+> **Примечание:** Данная статья не научит вас векторной графике, а даст понимание что это и как её использовать в веб-документах.
 
-<h2 id="Что_такое_векторная_графика">Что такое векторная графика?</h2>
+## Что такое векторная графика?
 
-<p>В веб-разработке вы будете сталкиваться с двумя типами изображений - растровым и векторным:</p>
+В веб-разработке вы будете сталкиваться с двумя типами изображений - растровым и векторным:
 
-<ul>
- <li>Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)</li>
- <li>Векторное изображение  определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер  может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.</li>
-</ul>
+- Растровое изображение задаётся сеткой пикселей — файл растрового изображения содержит информацию о расположении и цвете каждого пикселя. Среди популярных форматов изображений данного типа числятся Bitmap (.bmp), PNG (.png), JPEG (.jpg) и GIF (.gif)
+- Векторное изображение определяется алгоритмом — файл векторного изображения содержит фигуры и правила, по которым компьютер может вычислить как должно выглядеть изображение, когда выводится на экран.{{glossary("SVG")}} формат позволяет нам создавать векторную графику для использования в веб-документах.
 
-<p>Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.</p>
+Для демонстрации различий между типами изображений, давайте взглянем на пример. Вы можете найти данный пример на Github как [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) — в нем демонстрируются два, на первый взгляд, одинаковых изображения, расположенных рядом друг с другом. Каждое из изображений представляет собой красную звезду с тенью. Различие их в том, что левое изображение имеет формат PNG, а правое - SVG.
 
-<p>Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним. </p>
+Различия становятся заметны, когда вы изменяете масштаб страницы — PNG изображение становится неровным (становятся видны пиксели), потому что оно содержит информацию о положении и цвете каждого пикселя. При увеличении каждый пиксель также увеличивается, охватывая несколько пикселей дисплея, поэтому становятся заметны "кирпичики". Векторное изображение продолжает выглядеть ровным и красивым, потому что фигуры, масштабируются совместно с ним.
 
-<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p>
+![Two star images](https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png)
 
-<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p>
+![Two star images zoomed in, one crisp and the other blurry](https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> !</p>
-</div>
+> **Примечание:** Оба изображения сверху имеют формат PNG — слева показано растровое изображение, справа условно показано векторное изображение. Напоминаем, что пример с реальными растровым и векторными изображениями находится по ссылке: [vector-versus-raster.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html) !
 
-<p>Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.</p>
+Более того, файлы векторных изображений намного меньше растровых, т.к. в них содержится алгоритмы построения вместо информации о каждом пикселе.
 
-<h2 id="What_is_SVG">Что такое SVG?</h2>
+## Что такое SVG?
 
-<p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a> это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае,  вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)</p>
+[SVG](/ru/docs/Web/SVG) это язык на базе {{glossary("XML")}} для описания векторных изображений. По сути это язык разметки, как и HTML, только содержащий множество различных элементов для определения фигур вашего изображения, а также параметров их отображения. SVG предназначен для разметки графики, а не содержимого. В простейшем случае, вы можете использовать элементы для создания простых фигур, таких как {{svgelement("circle")}}(круг) и {{svgelement("rect")}}(прямоугольник). Более сложные SVG элементы включают {{svgelement("feColorMatrix")}} (разложение цвета с использованием матрицы), {{svgelement("animate")}} (анимация частей вашего векторного изображения) и {{svgelement("mask")}} (применение маски к изображению.)
 
-<p>В качестве простого примера, следующий код создаёт круг и прямоугольник:</p>
+В качестве простого примера, следующий код создаёт круг и прямоугольник:
 
-<pre class="brush: html">&lt;svg version="1.1"
+```html
+<svg version="1.1"
      baseProfile="full"
      width="300" height="200"
-     xmlns="http://www.w3.org/2000/svg"&gt;
-  &lt;rect width="100%" height="100%" fill="black" /&gt;
-  &lt;circle cx="150" cy="100" r="90" fill="blue" /&gt;
-&lt;/svg&gt;</pre>
+     xmlns="http://www.w3.org/2000/svg">
+  <rect width="100%" height="100%" fill="black" />
+  <circle cx="150" cy="100" r="90" fill="blue" />
+</svg>
+```
 
-<p>В результате получается следующее:</p>
+В результате получается следующее:
 
-<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}
 
-<p>Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как <a href="https://inkscape.org/en/">Inkscape</a> или <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)</p>
+Исходя из примера выше, может показаться, что SVG легко создавать вручную. Да, простые SVG можно создавать, используя текстовый редактор, но в случае сложного изображения это становится сложным. Для создания SVG изображений используются редакторы векторной графики, такие как [Inkscape](https://inkscape.org/en/) или [Illustrator](https://en.wikipedia.org/wiki/Adobe_Illustrator). Данные приложения позволяют создавать различные изображения, используя множество графических инструментов, и создавать приближения фотографий (например опция Trace Bitmap feature приложения Inkscape.)
 
-<p>Дополнительные преимущества SVG:</p>
+Дополнительные преимущества SVG:
 
-<ul>
- <li>Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).</li>
- <li>SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.</li>
-</ul>
+- Текст в векторном изображении остаётся машинописным (то есть доступным для поисковика, что улучшает {{glossary("SEO")}}).
+- SVG легко поддаются стилизации/программированию (scripting), потому что каждый компонент изображения может быть стилизован с помощью CSS или запрограммирован с помощью JavaScript.
 
-<p>Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:</p>
+Так почему же тогда вообще используют растровые изображения, а не только SVG? Дело в том, что SVG имеет ряд недостатков:
 
-<ul>
- <li>SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.</li>
- <li>SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.</li>
- <li>не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.</li>
-</ul>
+- SVG может очень быстро стать сложным в том смысле, что размер файла увеличивается; сложные SVG-изображения также создают большую вычислительную нагрузку на браузер.
+- SVG может быть сложнее создать, нежели растровое изображение, в зависимости от того, какое изображение необходимо создать.
+- не поддерживается старыми версиями браузеров, то есть не подойдёт для сайтов, поддерживающих Internet Explorer 8 или старее.
 
-<p>В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.</p>
+В целом, растровая графика лучше подходит для сложных изображений, например, фотографий.
 
-<div class="note">
-<p><strong>Примечание</strong>: В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">статью, описывающую как подготовить SVG изображение для веб-документа.</a></p>
-</div>
+> **Примечание:** В приложении Inkscape сохраняйте файлы как Plain SVG, для экономии места. Также, пожалуйста перейдите на [статью, описывающую как подготовить SVG изображение для веб-документа.](http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html)
 
-<h2 id="Добавление_SVG_на_страницы">Добавление SVG на страницы</h2>
+## Добавление SVG на страницы
 
-<p>В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.</p>
+В данном разделе мы рассмотрим различные варианты, с помощью которых можно добавить SVG векторную графику на веб-страницу.
 
-<h3 id="Быстрый_путь_htmlelementimg">Быстрый путь: {{htmlelement("img")}}</h3>
+### Быстрый путь: {{htmlelement("img")}}
 
-<p>Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут <code>height</code> или <code>width</code> (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</p>
+Чтобы встроить SVG используя элемент {{htmlelement ("img")}}, вам просто нужно сослаться на него в атрибуте src, как и следовало ожидать. Вам понадобится атрибут `height` или `width` (или оба, если ваш SVG не имеет собственного соотношения сторон). Если вы ещё этого не делали, пожалуйста, прочтите [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML).
 
-<pre class="brush: html">&lt;img
+```html
+<img
     src="equilateral.svg"
     alt="triangle with all three sides equal"
     height="87px"
-    width="100px" /&gt;</pre>
-
-<h4 id="Плюсы">Плюсы</h4>
+    width="100px" />
+```
 
-<ul>
- <li>Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте <code>alt</code></li>
- <li>Вы можете легко превратить изображение в гиперссылку, поместив <code>&lt;image&gt;</code> в элемент {{htmlelement("a")}}.</li>
-</ul>
+#### Плюсы
 
-<h4 id="Минусы">Минусы</h4>
+- Быстрый, знакомый синтаксис изображения со встроенным текстовым эквивалентом, доступным в атрибуте `alt`
+- Вы можете легко превратить изображение в гиперссылку, поместив `<image>` в элемент {{htmlelement("a")}}.
 
-<ul>
- <li>Вы не можете изменять изображение с помощью JavaScript.</li>
- <li>Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)</li>
- <li>Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например <code>:focus</code>).</li>
-</ul>
+#### Минусы
 
-<h3 id="Устранение_неполадок_и_кросс-браузерная_поддержка">Устранение неполадок и кросс-браузерная поддержка</h3>
+- Вы не можете изменять изображение с помощью JavaScript.
+- Если вы хотите управлять содержимым SVG с помощью CSS, вы должны использовать встроенные CSS стили в своём SVG коде. (Внешние таблицы стилей, вызываемые из файла SVG, не действуют.)
+- Вы не можете изменить стиль изображения с помощью псевдоклассов CSS (например `:focus`).
 
-<p>Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в <code>src</code> атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:</p>
+### Устранение неполадок и кросс-браузерная поддержка
 
-<pre class="brush: html">&lt;img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"&gt;</pre>
+Для браузеров которые не поддерживают SVG (IE 8 и ниже, Android 2.3 и ниже), вы можете ссылаться на PNG или JPG в `src` атрибуте и использовать {{htmlattrxref("srcset", "img")}} атрибут (который распознают только последние браузеры) чтобы сослаться на SVG. В этом случае SVG будут загружаться только поддерживающими браузерами - старые же браузеры будут загружать PNG:
 
-<p>Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:</p>
+```html
+<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
+```
 
-<pre class="brush: css"><code>background: url("fallback.png") no-repeat center;</code>
-background<code>-image: url("image.svg");
-background-size: contain;</code></pre>
+Также вы можете использовать SVG в качестве фоновых изображение CSS, как показано ниже. В приведённом коде ниже старые браузеры будут придерживаться PNG, который они понимают, тогда как новые браузеры будут загружать SVG:
 
-<p>Подобно методу <code>&lt;img&gt;</code>, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.</p>
+```css
+background: url("fallback.png") no-repeat center;
+background-image: url("image.svg");
+background-size: contain;
+```
 
-<p>Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">данная статья укажет вам верное направление</a>.</p>
+Подобно методу `<img>`, описанному выше, вставка SVG с использованием фоновых изображений CSS означает, что SVG нельзя манипулировать при помощи JavaScript, и что SVG будет иметь те же ограничения, что и CSS.
 
-<h3 id="Как_включить_SVG_в_ваш_HTML_код">Как включить SVG в ваш HTML код</h3>
+Если ваши SVG не отображаются вовсе, возможно, ваш сервер не настроен должным образом. Если проблема в этом, то [данная статья укажет вам верное направление](/ru/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers).
 
-<p>Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (<strong>SVG inline</strong> или <strong>inlining SVG</strong>). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов <code><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg">&lt;svg&gt;&lt;/svg&gt;</a></code> (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:</p>
+### Как включить SVG в ваш HTML код
 
-<pre class="brush: html">&lt;svg width="300" height="200"&gt;
-    &lt;rect width="100%" height="100%" fill="green" /&gt;
-&lt;/svg&gt;
-</pre>
+Вы можете открыть файл SVG в текстовом редакторе, скопировать этот код и вставить его в ваш HTML документ — такой приём иногда называют встраиванием SVG (**SVG inline** или **inlining SVG**). Убедитесь, что фрагмент вашего SVG кода начинается и заканчивается с тегов [`<svg></svg>`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) (не включайте ничего, кроме них). Вот очень простой пример того, что вы можете вставить в ваш документ:
 
-<h4 id="Плюсы_2">Плюсы</h4>
+```html
+<svg width="300" height="200">
+    <rect width="100%" height="100%" fill="green" />
+</svg>
+```
 
-<ul>
- <li>Вставка вашего SVG путём <strong>SVG inline </strong>позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.</li>
- <li>Вы можете присваивать <code>class</code>-ы и <code>id</code> элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute#Presentation_attributes">атрибут представления SVG </a>как свойство CSS.</li>
- <li><strong>SVG inline </strong>единственный метод, который позволяет вам использовать CSS-взаимодействия (как <code>:focus</code>) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).</li>
- <li>Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.</li>
-</ul>
+#### Плюсы
 
-<h4 id="Минусы_2">Минусы</h4>
+- Вставка вашего SVG путём **SVG inline** позволяет сохранить HTTP запросы и, следовательно, может уменьшить время загрузки.
+- Вы можете присваивать `class`-ы и `id` элементам SVG и стилизовать их при помощи CSS, либо в пределах SVG, либо внутри SVG, либо там, где вы размещаете правила стиля CSS для вашего HTML документа. По факту вы можете использовать любой [атрибут представления SVG ](/ru/docs/Web/SVG/Attribute#Presentation_attributes)как свойство CSS.
+- **SVG inline** единственный метод, который позволяет вам использовать CSS-взаимодействия (как `:focus`) и CSS-анимацию на вашем SVG изображении (даже в вашей обычной таблице стилей).
+- Вы можете разметить SVG как гиперссылку, обернув в элемент {{htmlelement("a")}}.
 
-<ul>
- <li>Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.</li>
- <li>Дополнительный SVG код увеличивает размер вашего HTML файла.</li>
- <li>Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.</li>
- <li>Вы можете добавить альтернативный вариант в элементе {{svgelement("foreignObject")}}, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).</li>
-</ul>
+#### Минусы
 
-<ul>
-</ul>
+- Этот метод подходит, только если вы используете SVG лишь в одном месте. Дублирование делает обслуживание ресурсоёмким.
+- Дополнительный SVG код увеличивает размер вашего HTML файла.
+- Браузер не может кешировать встроенный SVG, так как он кеширует обычные изображения.
+- Вы можете добавить альтернативный вариант в элементе {{svgelement("foreignObject")}}, но браузеры поддерживающие SVG будут продолжать загружать все альтернативные изображения. Вы должны взвесить действительно стоит ли поддержка устаревших браузеров дополнительных накладных расходов (ресурсов).
 
-<h3 id="Как_встраивать_SVG_при_помощи_htmlelementiframe">Как встраивать SVG при помощи {{htmlelement("iframe")}}</h3>
+<!---->
 
-<p>Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью <code>&lt;iframe&gt;</code> выполняется как мы изучали ранее в главе <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; к &lt;iframe&gt; — другие технологии внедрения</a>.</p>
+### Как встраивать SVG при помощи {{htmlelement("iframe")}}
 
-<p>Вот краткий обзор:</p>
+Вы можете открывать ваши SVG изображения в браузере просто как веб-страницы. Таким образом встраивание SVG документа с помощью `<iframe>` выполняется как мы изучали ранее в главе [От \<object> к \<iframe> — другие технологии внедрения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies).
 
-<pre class="brush: html">&lt;iframe src="triangle.svg" width="500" height="500" sandbox&gt;
-    &lt;img src="triangle.png" alt="Triangle with three unequal sides" /&gt;
-&lt;/iframe&gt;</pre>
+Вот краткий обзор:
 
-<p>Это - определённо не самый лучший метод для выбора:</p>
+```html
+<iframe src="triangle.svg" width="500" height="500" sandbox>
+    <img src="triangle.png" alt="Triangle with three unequal sides" />
+</iframe>
+```
 
-<h4 id="Минусы_3">Минусы</h4>
+Это - определённо не самый лучший метод для выбора:
 
-<ul>
- <li>Как вы можете видеть, у <code>iframe</code>-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают <code>iframe</code>-ы.</li>
- <li>Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый {{glossary('origin')}}, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.</li>
-</ul>
+#### Минусы
 
-<h2 id="Активное_изучение_поиграйте_с_SVG">Активное изучение: поиграйте с SVG</h2>
+- Как вы можете видеть, у `iframe`-ов есть резервный механизм, но браузеры отображают резервный вариант только если они вообще не поддерживают `iframe`-ы.
+- Более того, до тех пор пока SVG и ваша текущая веб-страница имеют одинаковый {{glossary('origin')}}, вы не можете использовать JavaScript на вашей основной веб-странице, чтобы манипулировать SVG.
 
-<p>В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области <em>Input,</em> вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.</p>
+## Активное изучение: поиграйте с SVG
 
-<p>Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку <em>Reset</em>.</p>
+В этом разделе активного изучения мы бы хотели, чтобы вы просто попробовали поиграть с SVG. Ниже, в области _Input,_ вы увидите, что мы уже предоставили некий пример для того, чтобы вы начали. А ещё вы можете посетить [SVG Element Reference](/ru/docs/Web/SVG/Element), чтобы узнать больше деталей о других игрушках, которые могут быть использованы в SVG, и тоже попробовать их. Этот раздел полностью посвящён практике ваших исследовательских навыков и вашему развлечению.
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+Если Вы где-то застряли и ваш код не работает, вы всегда можете начать сначала, нажав кнопку _Reset_.
 
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
+```html hidden
+<h2>Live output</h2>
 
-&lt;div class="output" style="min-height: 50px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 50px;">
+</div>
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 
-&lt;textarea id="code" class="input" style="width: 95%;min-height: 200px;"&gt;
-  &lt;svg width="100%" height="100%"&gt;
-    &lt;rect width="100%" height="100%" fill="red" /&gt;
-    &lt;circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /&gt;
-    &lt;polygon points="120,0 240,225 0,225" fill="green"/&gt;
-    &lt;text x="50" y="100" font-family="Verdana" font-size="55"
-          fill="white" stroke="black" stroke-width="2"&gt;
+<textarea id="code" class="input" style="width: 95%;min-height: 200px;">
+  <svg width="100%" height="100%">
+    <rect width="100%" height="100%" fill="red" />
+    <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" />
+    <polygon points="120,0 240,225 0,225" fill="green"/>
+    <text x="50" y="100" font-family="Verdana" font-size="55"
+          fill="white" stroke="black" stroke-width="2">
             Hello!
-    &lt;/text&gt;
-  &lt;/svg&gt;
-&lt;/textarea&gt;
+    </text>
+  </svg>
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution" disabled&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution" disabled>
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -239,9 +214,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -317,36 +294,32 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.</p>
+Эта статья предоставила вам краткий обзор по тому, что такое векторная графика и SVG, почему полезно знать о них и как внедрять SVG в вашу веб-страницу. Эта статья не является полным руководством по изучению SVG, а всего лишь указатель, чтоб вы знали что такое SVG, на случай, если вы встретите его во время странствий по Сети. Так что не переживайте, если вы ещё не чувствуете себя экспертом в SVG. Ниже мы включили несколько ссылок, которые могут вам помочь, если вы хотите узнать больше о том, как это работает.
 
-<p>В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.</p>
+В последней статье этого модуля мы будем исследовать адаптивные изображения в деталях, рассматривая инструменты HTML, которые позволяют делать ваши изображения так, чтоб они могли лучше работать на разных устройствах.
 
-<h2 id="See_also">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li>
- <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li>
- <li><a href="http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li>
- <li><a href="http://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li>
- <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li>
-</ul>
+- [SVG tutorial](/ru/docs/Web/SVG/Tutorial/Getting_Started) on MDN
+- [Quick tips for responsive SVGs](http://thenewcode.com/744/Making-SVG-Responsive)
+- [Sara Soueidan's tutorial on responsive SVG images](http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/)
+- [Accessibility benefits of SVG](http://www.w3.org/TR/SVG-access/)
+- [How to scale SVGs ](https://css-tricks.com/scale-svg/)(it's not as simple as raster graphics!)
 
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
-<h2 id="In_this_module">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a></li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; до &lt;iframe&gt; — другие способы встраивать контент</a></li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики</a></li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></li>
- <li><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Задание: страница о Mozilla</a></li>
-</ul>
+- [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Видео и аудио контент](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [От \<object> до \<iframe> — другие способы встраивать контент](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Добавление векторной графики](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Адаптивные изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Задание: страница о Mozilla](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
index a223e3b5708a80..c23296e9f3d7be 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/index.md
@@ -4,184 +4,162 @@ slug: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML
 original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div>
+В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}} элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}.
 
-<p class="summary">В начале Web был просто текстом, что было довольно скучно. К счастью, это продолжалось не долго - до появления возможности вставлять изображения (и другие, более интересные, типы контента) в веб-страницы. Существуют и другие типы мультимедиа, однако логичнее начать со скромного {{htmlelement("img")}}  элемента, используемого для вставки простого изображения в веб-страницу. В этой статье мы рассмотрим, как использовать элемент, начиная с основ, снабжать примечаниями, используя  {{htmlelement("figure")}}, и разберём, как это относится к фоновым изображениям {{glossary("CSS")}}. </p>
+| Необходимы: | Базовые знания компьютера, [установленное базовое ПО](/ru/docs/Learn/Getting_started_with_the_web/Installing_basic_software), базовые знания по [работе с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), знания основ HTML (как описано в статье [Начало работы с HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started)). |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.                                                                                                                                                                                                                           |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимы:</th>
-   <td>Базовые знания компьютера, <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">установленное базовое ПО</a>, базовые знания по <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работе с файлами</a>, знания основ HTML (как описано в статье <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, как встраивать изображения в HTML, как добавлять к ним описания и как изображения HTML связаны с фоновыми изображениями CSS.</td>
-  </tr>
- </tbody>
-</table>
+## Как разместить картинку на странице?
 
-<h2 id="Как_разместить_картинку_на_странице">Как разместить картинку на странице?</h2>
+Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — `src` (произносится _эс-ар-си_, иногда говорят его полное название, _source_). Атрибут `src` содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута `href` для элемента {{htmlelement("a")}}.
 
-<p>Чтобы разместить изображение на странице, нужно использовать тег {{htmlelement("img")}}. Это пустой элемент (имеется ввиду, что не содержит текста и закрывающего тега), который требует минимум один атрибут для использования — <code>src</code> (произносится <em>эс-ар-си</em>, иногда говорят его полное название, <em>source</em>). Атрибут <code>src</code> содержит путь к изображению, которое вы хотите встроить в страницу, и может быть относительным или абсолютным URL, точно так же, как значения атрибута <code>href</code> для элемента {{htmlelement("a")}}.</p>
+> **Примечание:** Перед тем как продолжить, вам стоит вспомнить про [типы адресов URL](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%90%d0%b1%d1%81%d0%be%d0%bb%d1%8e%d1%82%d0%bd%d1%8b%d0%b5_%d0%b8_%d0%be%d1%82%d0%bd%d0%be%d1%81%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5_url-%d0%b0%d0%b4%d1%80%d0%b5%d1%81%d0%b0), чтобы обновить в памяти про относительные и абсолютные адреса.
 
-<div class="note">
-<p><strong>Примечание</strong>: Перед тем как продолжить, вам стоит вспомнить про <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%90%d0%b1%d1%81%d0%be%d0%bb%d1%8e%d1%82%d0%bd%d1%8b%d0%b5_%d0%b8_%d0%be%d1%82%d0%bd%d0%be%d1%81%d0%b8%d1%82%d0%b5%d0%bb%d1%8c%d0%bd%d1%8b%d0%b5_url-%d0%b0%d0%b4%d1%80%d0%b5%d1%81%d0%b0">типы адресов URL</a>, чтобы обновить в памяти про относительные и абсолютные адреса.</p>
-</div>
-
-<p>Например, если ваше изображение называется <code>dinosaur.jpg</code>, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:</p>
-
-<pre class="brush: html">&lt;img src="dinosaur.jpg"&gt;</pre>
+Например, если ваше изображение называется `dinosaur.jpg`, и оно находится в той же директории что и ваша HTML страница, вы можете встроить это изображение как:
 
-<p>Если изображение было в поддиректории <code>images</code> , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:</p>
+```html
+<img src="dinosaur.jpg">
+```
 
-<pre class="brush: html">&lt;img src="images/dinosaur.jpg"&gt;</pre>
+Если изображение было в поддиректории `images` , находящаяся внутри той же директории, что и HTML страница (что рекомендует Google для индексации и целей SEO), тогда вы можете встроить его так:
 
-<p>И так далее.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: <code>dinosaur.jpg</code> лучше, чем <code>img835.png</code>.</p>
-</div>
+```html
+<img src="images/dinosaur.jpg">
+```
 
-<p>Вы можете встроить изображение используя абсолютный URL, например:</p>
+И так далее.
 
-<pre class="brush: html">&lt;img src="https://www.example.com/images/dinosaur.jpg"&gt;</pre>
+> **Примечание:** Поисковые системы также читают имена изображений и считают их для оптимизации поискового запроса. Поэтому присваивайте вашим изображениям смысловые имена: `dinosaur.jpg` лучше, чем `img835.png`.
 
-<p>Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера.  Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.</p>
+Вы можете встроить изображение используя абсолютный URL, например:
 
-<div class="warning">
-<p><strong>Внимание:</strong> Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:</p>
+```html
+<img src="https://www.example.com/images/dinosaur.jpg">
+```
 
-<ul>
- <li>вы не будете владеть изображением</li>
- <li>у вас не будет письменного разрешения владельца изображения, или</li>
- <li>пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.</li>
-</ul>
+Но это бессмысленно, так как он просто заставляет браузер делать больше работы, запрашивая каждый раз IP-адрес от DNS-сервера. Вы почти всегда будете держать свои изображения для сайта на том же сервере, что и ваш HTML.
 
-<p>Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте <code>src</code> ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.</p>
-</div>
+> **Предупреждение:** **Внимание:** Большинство изображений защищены. Не отображайте изображения на вашем сайте пока:
+>
+> - вы не будете владеть изображением
+> - у вас не будет письменного разрешения владельца изображения, или
+> - пока у вас не будет достаточно доказательств что изображение находится в открытом доступе.
+>
+> Нарушение авторских прав является незаконным. Кроме того, никогда не указывайте в своём атрибуте `src` ссылку на изображение, размещённое на чужом сайте. Это называется "хотлинкинг" (с англ. 'hotlinking' - 'горячая ссылка'). Запомните, кража пропускной способности чужого сайта незаконна. Это также замедляет вашу страницу и не позволяет вам контролировать, будет ли изображение удалено или заменено чем-то неприятным.
 
-<p>Наш код выше даст нам следующий результат:</p>
+Наш код выше даст нам следующий результат:
 
-<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="basic-image.png" style="display: block; margin: 0px auto;"></p>
+![A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it](basic-image.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в <a href="/ru/docs/Web/CSS/Replaced_element">Замещаемых элементах</a>.</p>
-</div>
+> **Примечание:** Такие элементы как {{htmlelement("img")}} и {{htmlelement("video")}} иногда называются замещаемыми элементами. Это потому что содержание элемента и размер, определяет внешний ресурс (как изображение или видео файл), а не содержание самого элемента. Вы можете узнать о них больше в [Замещаемых элементах](/ru/docs/Web/CSS/Replaced_element).
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти готовый пример этого раздела, <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">размещённый на Github</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">исходный код</a>).</p>
-</div>
+> **Примечание:** вы можете найти готовый пример этого раздела, [размещённый на Github](https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html) (смотрите также [исходный код](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html)).
 
-<h3 id="Альтернативный_текст">Альтернативный текст</h3>
+### Альтернативный текст
 
-<p>Следующий атрибут, который мы рассмотрим — <code>alt</code>. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута <code>alt</code> на практике, внесём изменения в код из предыдущего примера:</p>
+Следующий атрибут, который мы рассмотрим — `alt`. Его значением должно быть текстовое описание изображения для использования в ситуациях, когда изображение не может быть просмотрено / отображено или отрисовка занимает много времени из-за медленного интернет-соединения. Чтобы продемонстрировать использование атрибута `alt` на практике, внесём изменения в код из предыдущего примера:
 
-<pre>&lt;img src="images/dinosaur.jpg"
+```
+<img src="images/dinosaur.jpg"
      alt="Голова и туловище скелета динозавра;
-         у него большая голова с длинными острыми зубами"&gt;</pre>
+         у него большая голова с длинными острыми зубами">
+```
 
-<p>Самый простой способ увидеть атрибут <code>alt</code> в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как <code>dinosooooor.jpg</code>, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута <code>alt</code>:</p>
+Самый простой способ увидеть атрибут `alt` в действии — это сделать намеренную ошибку в имени файла. Например, если бы мы написали имя изображения как `dinosooooor.jpg`, браузер не смог бы его отобразить, и на экране появился бы текст из атрибута `alt`:
 
-<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="alt-text.png" style="display: block; margin: 0px auto;">Итак, в каких случаях текст из атрибута <code>alt</code> может быть нам полезен? Приведём несколько примеров:</p>
+![The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place.](alt-text.png)Итак, в каких случаях текст из атрибута `alt` может быть нам полезен? Приведём несколько примеров:
 
-<ul>
- <li>Пользователь с нарушением зрения использует <a href="https://en.wikipedia.org/wiki/Screen_reader">устройство чтения с экрана</a>, которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте <code>alt</code> для описания изображения может быть полезно для большинства пользователей.</li>
- <li>В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).</li>
- <li>Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как <a href="https://en.wikipedia.org/wiki/Lynx_%28web_browser%29">Lynx</a>, которые вместо изображений отображают текст из атрибута <code>alt</code>.</li>
- <li>Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута <code>alt</code>.</li>
- <li>Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.</li>
-</ul>
+- Пользователь с нарушением зрения использует [устройство чтения с экрана](https://en.wikipedia.org/wiki/Screen_reader), которое может читать вслух описание элементов веб-страницы. На самом деле, наличие текста в атрибуте `alt` для описания изображения может быть полезно для большинства пользователей.
+- В случае, если была допущена ошибка в имени файла или пути к нему (как было описано выше).
+- Браузер не поддерживает формат данного изображения. Некоторые люди до сих пор используют текстовые браузеры, такие как [Lynx](https://en.wikipedia.org/wiki/Lynx_%28web_browser%29), которые вместо изображений отображают текст из атрибута `alt`.
+- Если вы хотите добавить возможность найти ваше изображение с помощью поисковых систем. Например, поисковые системы могут искать совпадения поисковых запросов с текстом атрибута `alt`.
+- Если пользователи отключили отображение изображений на странице для уменьшения объёма передаваемых данных и для сокрытия элементов, отвлекающих внимание. Это обычная практика для пользователей мобильных телефонов, а также в странах с маленькой пропускной способностью интернет-каналов и с высокой стоимостью интернет-трафика.
 
-<p>Что именно вы должны писать в атрибут <code>alt</code>? В первую очередь, это зависит от того, <em>зачем</em> изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:</p>
+Что именно вы должны писать в атрибут `alt`? В первую очередь, это зависит от того, _зачем_ изображение вообще находится на странице. Другими словами, что вы потеряете, если ваше изображение не появится:
 
-<ul>
- <li><strong>Декорация. </strong>Вы должны использовать <a href="#фоновые_изображения_css">Фоновые изображения CSS</a> для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой <code>alt=""</code>. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.</li>
- <li><strong>Контент.</strong> Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий<em> </em><code>alt</code>. Или даже лучше, в <em>главном</em> тексте, который все увидят. Не используйте <code>alt</code> , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы <em>параграфы</em> были написаны дважды в <em>главном контенте</em>? Если изображение адекватно описано в основном тексте, можете просто использовать <code>alt=""</code>.</li>
- <li><strong>Ссылка.</strong> Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%98%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d0%b9%d1%82%d0%b5_%d1%87%d1%91%d1%82%d0%ba%d0%b8%d0%b5_%d1%84%d0%be%d1%80%d0%bc%d1%83%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b8_%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f_%d1%81%d1%81%d1%8b%d0%bb%d0%be%d0%ba">использовать чёткие формулировки описания ссылок</a>. В таком случае, вы сможете использовать элемент <code>&lt;a&gt;</code>  или атрибут <code>alt</code> . Старайтесь выбрать лучший вариант.</li>
- <li><strong>Текст.</strong> Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого <a href="/ru/docs/Web/CSS/text-shadow">CSS</a> вместо добавления текста в изображение. Однако, если  <em>действительно этого не избежать</em>, то вам следует дополнить текст в атрибуте <code>alt</code>.</li>
-</ul>
+- **Декорация.** Вы должны использовать [Фоновые изображения CSS](#фоновые_изображения_css) для декоративных изображений, но если вы должны использовать HTML, добавьте пустой alt = "". Если изображение служит просто украшением и не является частью содержимого, добавьте пустой `alt=""`. Например, программа чтения с экрана не тратит время на чтение содержимого, которое не является важным для пользователя.
+- **Контент.** Если ваше изображение содержит важную информацию, передайте ту же информацию через краткий\_ *`alt`. Или даже лучше, в *главном* тексте, который все увидят. Не используйте `alt` , если можете обойтись без него. Насколько неудобно было бы для пользователя, если бы *параграфы* были написаны дважды в *главном контенте\_? Если изображение адекватно описано в основном тексте, можете просто использовать `alt=""`.
+- **Ссылка.** Если вы помещаете изображение в {{htmlelement("a")}}, для того, чтобы сделать из него ссылку, вы всё ещё должны [использовать чёткие формулировки описания ссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#%d0%98%d1%81%d0%bf%d0%be%d0%bb%d1%8c%d0%b7%d1%83%d0%b9%d1%82%d0%b5_%d1%87%d1%91%d1%82%d0%ba%d0%b8%d0%b5_%d1%84%d0%be%d1%80%d0%bc%d1%83%d0%bb%d0%b8%d1%80%d0%be%d0%b2%d0%ba%d0%b8_%d0%be%d0%bf%d0%b8%d1%81%d0%b0%d0%bd%d0%b8%d1%8f_%d1%81%d1%81%d1%8b%d0%bb%d0%be%d0%ba). В таком случае, вы сможете использовать элемент `<a>` или атрибут `alt` . Старайтесь выбрать лучший вариант.
+- **Текст.** Не пишите текст в изображениях. Если вашему заголовку понадобится тень, то лучше используйте для этого [CSS](/ru/docs/Web/CSS/text-shadow) вместо добавления текста в изображение. Однако, если _действительно этого не избежать_, то вам следует дополнить текст в атрибуте `alt`.
 
-<p>По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.</p>
+По существу, главная идея здесь это предоставить нечто полезное, для случая когда изображения не видны. Это гарантирует что все пользователи не упустят ничего из содержимого страницы. Попробуйте отключить изображения в своём браузере и посмотрите как всё выглядит. Вы вскоре выясните насколько полезным является альтернативный текст, если изображения не видны.
 
-<div class="note">
-<p><strong>Примечание</strong>: Более подробную информацию, смотрите здесь: <a href="/ru/docs/Learn/Accessibility/HTML#%d0%90%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b9_%d1%82%d0%b5%d0%ba%d1%81%d1%82">Альтернативный текст</a>.</p>
-</div>
+> **Примечание:** Более подробную информацию, смотрите здесь: [Альтернативный текст](/ru/docs/Learn/Accessibility/HTML#%d0%90%d0%bb%d1%8c%d1%82%d0%b5%d1%80%d0%bd%d0%b0%d1%82%d0%b8%d0%b2%d0%bd%d1%8b%d0%b9_%d1%82%d0%b5%d0%ba%d1%81%d1%82).
 
-<h3 id="Ширина_и_высота">Ширина и высота</h3>
+### Ширина и высота
 
-<p>Вы можете использовать атрибуты <code>width</code> и <code>height</code>, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать  <kbd>Cmd</kbd> + <kbd>I</kbd>  чтобы  получить информацию по изображению. Повторяя наш пример, мы можем сделать так:</p>
+Вы можете использовать атрибуты `width` и `height`, чтобы указать ширину и высоту вашего изображения. Ширину и высоту вашего изображение можете найти различными способами. Например, на Mac можно использовать <kbd>Cmd</kbd> + <kbd>I</kbd> чтобы получить информацию по изображению. Повторяя наш пример, мы можем сделать так:
 
-<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+```html
+<img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
           it has a large head with long sharp teeth"
      width="400"
-     height="341"&gt;</pre>
+     height="341">
+```
 
-<p>Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:</p>
+Это не приводит к большой разнице в отображении при нормальных обстоятельствах. Но если изображение не будет показано, например, когда пользователь только что перешёл на страницу, а оно ещё не успело загрузится, вы укажите браузеру оставить место для отрисовки изображения:
 
-<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="alt-text-with-width-height.png" style="display: block; margin: 0px auto;"></p>
+![The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings](alt-text-with-width-height.png)
 
-<p>Это хорошая практика, в результате страница загрузится быстрее и более гладко.</p>
+Это хорошая практика, в результате страница загрузится быстрее и более гладко.
 
-<p>Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное <a href="https://en.wikipedia.org/wiki/Aspect_ratio_(image)">соотношение сторон</a>. Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.</p>
+Однако, вы не должны изменять размеры ваших изображений используя HTML атрибуты. Если вы установите размер изображения слишком большим, то в конечном итоге вы столкнётесь с изображениями, которые выглядят зернистыми, размытыми или слишком маленькими, и потратите трафик для загрузки изображения, которое не будет соответствовать нуждам пользователя. Конечное изображение может также выглядеть искажённым, если вы не сохраните правильное [соотношение сторон](<https://en.wikipedia.org/wiki/Aspect_ratio_(image)>). Рекомендуется использовать графический редактор для подгонки изображения к нужному размеру, перед вставкой его на вашу веб-страницу.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого <a href="/ru/docs/Learn/CSS">CSS</a>.</p>
-</div>
+> **Примечание:** Если вам действительно нужно изменить размер изображения, вы должны использовать вместо этого [CSS](/ru/docs/Learn/CSS).
 
-<h3 id="Заголовок_изображения">Заголовок изображения</h3>
+### Заголовок изображения
 
-<p>Как и для <a href="/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">ссылок</a>, вы также можете добавить атрибут <code>title</code> для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:</p>
+Как и для [ссылок](/ru/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks), вы также можете добавить атрибут `title` для изображений, чтобы при необходимости предоставить дополнительную информацию. В нашем примере мы могли бы сделать это так:
 
-<pre class="brush: html">&lt;img src="images/dinosaur.jpg"
+```html
+<img src="images/dinosaur.jpg"
      alt="The head and torso of a dinosaur skeleton;
           it has a large head with long sharp teeth"
      width="400"
      height="341"
-     title="A T-Rex on display in the Manchester University Museum"&gt;</pre>
+     title="A T-Rex on display in the Manchester University Museum">
+```
 
-<p>Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:</p>
+Это даёт нам всплывающую подсказку при наведении курсора мыши, также как и в ссылках:
 
-<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="image-with-title.png" style="display: block; margin: 0px auto;"></p>
+![The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum ](image-with-title.png)
 
-<p>Однако это не рекомендуется - <code>title</code> имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.</p>
+Однако это не рекомендуется - `title` имеет ряд проблем с доступностью, в основном из-за того, что поддержка программ чтения с экрана очень непредсказуема, и большинство браузеров не будут отображать её, если вы не наведёте курсор мыши (например, нет доступа для пользователей клавиатуры). Зачастую лучше включить такого рода вспомогательную информацию в основной текст статьи, чем прикреплять её к изображению. Однако, она полезна в некоторых обстоятельствах; например, в галереях изображений, когда у вас нет места для их заголовков.
 
-<h3 id="Активное_обучение_встраивание_изображения">Активное обучение: встраивание изображения</h3>
+### Активное обучение: встраивание изображения
 
-<p>Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:</p>
+Наступила очередь немного поиграть! Этот раздел активного обучения поможет вам выполнить простое упражнение по встраиванию. Вы будете обеспечены простым {{htmlelement("img")}} тэгом; мы хотели бы чтобы вы встроили изображение расположенное по следующей ссылке:
 
-<p><a href="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg">https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</a></p>
+<https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg>
 
-<p>Ранее мы говорили никогда не используйте горячие ссылки на изображения с других серверов, данный случай только для целей обучения, итак мы позволим вам пренебречь этим один разок.</p>
+Ранее мы говорили никогда не используйте горячие ссылки на изображения с других серверов, данный случай только для целей обучения, итак мы позволим вам пренебречь этим один разок.
 
-<p>Мы также хотели бы, чтобы вы:</p>
+Мы также хотели бы, чтобы вы:
 
-<ul>
- <li>Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.</li>
- <li>Установите правильные значения <code>width</code> и <code>height</code> (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.</li>
- <li>Установите <code>title</code> для изображения.</li>
-</ul>
+- Добавили любой альтернативный текст, и проверили как это работает внеся ошибку в ссылку на изображение.
+- Установите правильные значения `width` и `height` (подсказка: это 200px по ширине и 171px по высоте), после поэкспериментируйте с другими значениями, чтобы увидеть какой будет эффект.
+- Установите `title` для изображения.
 
-<p>Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку <em>Reset</em>. Если вы реально не будете понимать как сделать, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p>
+Если вы сделаете ошибку, вы всегда можете очистить код, используя кнопку _Reset_. Если вы реально не будете понимать как сделать, нажмите кнопку _Show solution_, чтобы увидеть ответ:
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;img&gt;&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-  &lt;input id="solution" type="button" value="Show solution" /&gt;
-&lt;/div&gt;
-</pre>
+```html hidden
+<h2>Input</h2>
+<textarea id="code" class="input">
+<img></textarea>
+<h2>Output</h2>
+<div class="output"></div>
+<div class="controls">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
+</div>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -196,9 +174,10 @@ original_slug: Learn/HTML/Multimedia_and_embedding/Изображения_в_HTM
 button {
   padding: 10px 10px 10px 0;
 }
-</pre>
+```
 
-<pre class="brush: js">var textarea = document.getElementById("code");
+```js hidden
+var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
 var code = textarea.value;
 var output = document.querySelector(".output");
@@ -214,87 +193,83 @@ reset.addEventListener("click", function() {
 });
 
 solution.addEventListener("click", function() {
-textarea.value = '&lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum"&gt;';
+textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n     alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n     width="200"\n     height="171"\n     title="A T-Rex on display in the Manchester University Museum">';
   drawOutput();
 });
 
 textarea.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 500) }}
 
-<h2 id="Придание_изображению_структуры_и_установка_заголовка">Придание изображению структуры и установка заголовка</h2>
+## Придание изображению структуры и установка заголовка
 
-<p>Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:</p>
+Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:
 
-<pre class="brush: html">&lt;div class="figure"&gt;
-  &lt;img src="images/dinosaur.jpg"
+```html
+<div class="figure">
+  <img src="images/dinosaur.jpg"
        alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
        width="400"
-       height="341"&gt;
+       height="341">
 
-  &lt;p&gt;A T-Rex on display in the Manchester University Museum.&lt;/p&gt;
-&lt;/div&gt;</pre>
+  <p>A T-Rex on display in the Manchester University Museum.</p>
+</div>
+```
 
-<p>Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?</p>
+Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?
 
-<p>Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:</p>
+Лучшим решением будет использование элементов HTML5 {{htmlelement("figure")}} и {{htmlelement("figcaption")}}. Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:
 
-<pre>&lt;figure&gt;
-  &lt;img src="images/dinosaur.jpg"
+```
+<figure>
+  <img src="images/dinosaur.jpg"
        alt="The head and torso of a dinosaur skeleton;
             it has a large head with long sharp teeth"
        width="400"
-       height="341"&gt;
-
-  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum.&lt;/figcaption&gt;
-&lt;/figure&gt;</pre>
+       height="341">
 
-<p>Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.</p>
+  <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
+</figure>
+```
 
-<div class="note">
-<p><strong>Замечание</strong>: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и <code>alt</code> не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.</p>
-</div>
+Элемент {{htmlelement("figcaption")}} говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента {{htmlelement("figure")}}.
 
-<p>Тег &lt;figure&gt; не является изображением. Он представляет собой независимый структурный элемент, который: </p>
+> **Примечание:** **Замечание**: С точки зрения доступности, заголовки и {{htmlattrxref('alt','img')}} имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как {{htmlattrxref('alt','img')}} обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и `alt` не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.
 
-<ul>
- <li>Передаёт смысл компактным, интуитивно понятным способом.</li>
- <li>Может использоваться в различных местах страницы.</li>
- <li>Предоставляет ценную информацию, поддерживающую основной текст.</li>
-</ul>
+Тег \<figure> не является изображением. Он представляет собой независимый структурный элемент, который:
 
-<p>Тег &lt;figure&gt; может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.</p>
+- Передаёт смысл компактным, интуитивно понятным способом.
+- Может использоваться в различных местах страницы.
+- Предоставляет ценную информацию, поддерживающую основной текст.
 
-<h3 id="Активное_изучение_создание_&lt;figure>">Активное изучение: создание &lt;figure&gt;</h3>
+Тег \<figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.
 
-<p>В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в &lt;figure&gt;:</p>
+### Активное изучение: создание \<figure>
 
-<ul>
- <li>Оберните его в {{htmlelement("figure")}} элемент.</li>
- <li>Скопируйте текст из атрибута <code>title</code>, удалите атрибут <code>title</code>, и вбейте текст в элемент {{htmlelement("figcaption")}}.</li>
-</ul>
+В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в \<figure>:
 
-<p>В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку <em>Reset</em>. Если вы застряли, нажмите кнопку <em>Show solution</em>, чтобы увидеть ответ:</p>
+- Оберните его в {{htmlelement("figure")}} элемент.
+- Скопируйте текст из атрибута `title`, удалите атрибут `title`, и вбейте текст в элемент {{htmlelement("figcaption")}}.
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
+В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку _Reset_. Если вы застряли, нажмите кнопку _Show solution_, чтобы увидеть ответ:
 
-<pre class="brush: html">&lt;h2&gt;Input&lt;/h2&gt;
-&lt;textarea id="code" class="input"&gt;
-&lt;/textarea&gt;
-&lt;h2&gt;Output&lt;/h2&gt;
-&lt;div class="output"&gt;&lt;/div&gt;
-&lt;div class="controls"&gt;
-  &lt;input id="reset" type="button" value="Reset" /&gt;
-  &lt;input id="solution" type="button" value="Show solution" /&gt;
-&lt;/div&gt;
-</pre>
+```html hidden
+<h2>Input</h2>
+<textarea id="code" class="input">
+</textarea>
+<h2>Output</h2>
+<div class="output"></div>
+<div class="controls">
+  <input id="reset" type="button" value="Reset" />
+  <input id="solution" type="button" value="Show solution" />
+</div>
+```
 
-<pre class="brush: css">body {
+```css hidden
+body {
   font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
 }
 
@@ -309,9 +284,10 @@ window.addEventListener("load", drawOutput);
 button {
   padding: 10px 10px 10px 0;
 }
-</pre>
+```
 
-<pre class="brush: js">var textarea = document.getElementById("code");
+```js hidden
+var textarea = document.getElementById("code");
 var reset = document.getElementById("reset");
 var code = textarea.value;
 var output = document.querySelector(".output");
@@ -327,39 +303,38 @@ reset.addEventListener("click", function() {
 });
 
 solution.addEventListener("click", function() {
-textarea.value = '&lt;figure&gt;\n  &lt;img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171"&gt;\n  &lt;figcaption&gt;A T-Rex on display in the Manchester University Museum&lt;/figcaption&gt;\n&lt;/figure&gt;';
+textarea.value = '<figure>\n  <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n       alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n       width="200"\n       height="171">\n  <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>';
   drawOutput();
 });
 
 textarea.addEventListener("input", drawOutput);
 window.addEventListener("load", drawOutput);
-</pre>
-</div>
+```
 
-<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p>
+{{ EmbedLiveSample('Playable_code_2', 700, 500) }}
 
-<h2 id="Фоновые_изображения_CSS">Фоновые изображения CSS</h2>
+## Фоновые изображения CSS
 
-<p>Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие <code>background-*</code> применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:</p>
+Вы можете использовать CSS для встраивания изображений в веб-страницы (или JavaScript, но это совсем другая история). Параметры CSS {{cssxref("background-image")}} и другие `background-*` применяются для контроля размещения фонового изображения. К примеру, чтобы залить фон каждого параграфа страницы, необходимо сделать следующее:
 
-<pre class="brush: css">p {
+```css
+p {
   background-image: url("images/dinosaur.jpg");
-}</pre>
+}
+```
 
-<p>Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!</p>
+Получившееся в конечном итоге изображение можно легко позиционировать и контролировать, в отличие от его HTML аналога. Так зачем же возиться с HTML изображениями? Как указано выше, фоновые изображения CSS предназначены только для украшения. Если вы просто хотите добавить что-то красивое на свою страницу, чтобы улучшить визуальные эффекты, это нормально. Тем не менее, такого рода изображения не имеют семантического смысла вообще. Они не могут иметь каких-то текстовых эквивалентов, видимых посетителю, они невидимы для программ чтения с экрана. Вот где блистают HTML-изображения!
 
-<p>Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.</p>
+Итог: если изображение имеет важность, в контексте содержимого вашей страницы, вам следует использовать HTML изображения. Если же картинка является банальной декорацией, используйте фоновые изображения CSS.
 
-<div class="note">
-<p><strong>Замечание</strong>: вы можете узнать больше о <a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">фоновых изображениях CSS</a> в нашей теме о <a href="/ru/docs/Learn/CSS">CSS</a>.</p>
-</div>
+> **Примечание:** **Замечание**: вы можете узнать больше о [фоновых изображениях CSS](/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders) в нашей теме о [CSS](/ru/docs/Learn/CSS).
 
-<h2 id="Проверьте_свои_навыки!">Проверьте свои навыки!</h2>
+## Проверьте свои навыки!
 
-<p>Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше. Смотрите <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images">Проверьте знания по изображениям в HTML</a>.</p>
+Вы дошли до конца этой статьи, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше. Смотрите [Проверьте знания по изображениям в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML/Test_your_skills:_HTML_images).
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>На этом пока все. Мы подробно рассмотрели изображения и их заголовки. В следующей статье мы рассмотрим, как использовать HTML для встраивания видео и аудио на веб-страницы.</p>
+На этом пока все. Мы подробно рассмотрели изображения и их заголовки. В следующей статье мы рассмотрим, как использовать HTML для встраивания видео и аудио на веб-страницы.
 
-<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p>
+{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
index b807b26b5992b5..36da708e4b88c2 100644
--- a/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/images_in_html/test_your_skills_colon__html_images/index.md
@@ -7,70 +7,56 @@ translation_of: >-
 original_slug: >-
   Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML/Проверьте_свои_знания:_Изображения_в_HTML
 ---
-<div>{{learnsidebar}}</div>
+{{learnsidebar}}
 
-<p>Цель этого теста навыков - оценить, поняли ли вы нашу статью <a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a>.</p>
+Цель этого теста навыков - оценить, поняли ли вы нашу статью [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML).
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> для работы с задачами.</p>
-</div>
+> **Примечание:** Вы можете опробовать решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструмент, такой как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы с задачами.
 
-<h2 id="Изображения_в_HTML_№1">Изображения в HTML №1</h2>
+## Изображения в HTML №1
 
-<p>В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:</p>
+В этой задаче мы хотим, чтобы вы вставили на страницу простое изображение ягоды черники. Вам необходимо:
 
-<ul>
- <li>Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется <code>blueberries.jpg</code> и оно находится в папке с именем <code>images</code> внутри текущей папки.</li>
- <li>Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.</li>
- <li>Дайте элементу <code>&lt;img&gt;</code> соответствующие значения <code>width</code> и <code>height</code> чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.</li>
-</ul>
+- Добавьте путь к изображению в соответствующий атрибут, чтобы встроить его на страницу. Изображение называется `blueberries.jpg` и оно находится в папке с именем `images` внутри текущей папки.
+- Добавьте альтернативный текст к соответствующему атрибуту, чтобы описать изображение для людей, которые его не видят.
+- Дайте элементу `<img>` соответствующие значения `width` и `height` чтобы он отображался с правильным соотношением сторон и достаточно места на странице для отображения. Размер изображения 615 x 419 пикселей.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
 
-<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images1.html", '100%', 700)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images1-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images1-download.html) для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
 
-<h2 id="Изображения_в_HTML_№2">Изображения в HTML №2</h2>
+## Изображения в HTML №2
 
-<p>В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.</p>
+В этой задаче у вас уже есть полнофункциональное изображение, но мы хотели бы, чтобы вы добавили всплывающую подсказку, которая появляется при наведении курсора на изображение. Вы должны ввести некоторую соответствующую информацию во всплывающую подсказку.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:</p>
+Попробуйте обновить живой код ниже, чтобы воссоздать законченный пример:
 
-<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images2.html", '100%', 700)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images2-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images2-download.html) для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
 
-<h2 id="Изображения_в_HTML_№3">Изображения в HTML №3</h2>
+## Изображения в HTML №3
 
-<p>В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.</p>
+В этой последней задаче вам предоставляется как полнофункциональное изображение, так и текст заголовка. Здесь вам нужно добавить элементы, которые будут связывать изображение с его заголовком.
 
-<p>Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:</p>
+Попробуйте обновить живой код ниже, чтобы воссоздать готовый пример:
 
-<p>{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}</p>
+{{EmbedGHLiveSample("learning-area/html/multimedia-and-embedding/tasks/images/images3.html", '100%', 700)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images3-download.html">Загрузите файл</a> для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/tasks/images/images3-download.html) для этой задачи, чтобы работать в вашем редакторе или в онлайн-редакторе.
 
-<h2 id="Оценка_или_дополнительная_помощь">Оценка или дополнительная помощь</h2>
+## Оценка или дополнительная помощь
 
-<p>Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.</p>
+Вы можете попрактиковаться с этими примерами в интерактивных редакторах выше.
 
-<p>Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:</p>
+Если вы хотите, чтобы ваша работа была оценена, или если вы застряли и хотите обратиться за помощью:
 
-<ol>
- <li>Поместите свою работу в онлайн-редактор, например <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a>. Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.</li>
- <li>Напишите сообщение с просьбой об оценке и / или помощи в <a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN Discourse forum Learning category</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".</li>
-   <li>Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.</li>
-   <li>Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.</li>
-   <li>Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+1.  Поместите свою работу в онлайн-редактор, например [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/). Вы можете написать код самостоятельно или использовать файлы, ссылки на которые приведены в приведённых выше разделах.
+2.  Напишите сообщение с просьбой об оценке и / или помощи в [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
+
+    - Описательный заголовок, например "Требуется оценка для проверки навыков 1 по основам изображений HTML".
+    - Подробная информация о том, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например если вы застряли и нуждаетесь в помощи или хотите пройти оценку.
+    - Ссылка на пример, который вы хотите оценить или с которым вам нужна помощь, в онлайн-редакторе (как указано в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
+    - Ссылка на страницу фактического задания или оценки, чтобы мы могли найти вопрос, в котором вам нужна помощь.
diff --git a/files/ru/learn/html/multimedia_and_embedding/index.md b/files/ru/learn/html/multimedia_and_embedding/index.md
index f5b979e8b49273..6bfcd991b7ea86 100644
--- a/files/ru/learn/html/multimedia_and_embedding/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/index.md
@@ -3,57 +3,41 @@ title: Мультимедиа и встраивание
 slug: Learn/HTML/Multimedia_and_embedding
 translation_of: Learn/HTML/Multimedia_and_embedding
 ---
-<p>{{LearnSidebar}}</p>
-
-<p>Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.</p>
-
-<h2 id="Перед_стартом">Перед стартом</h2>
-
-<p>Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во <a href="/ru/docs/Learn/HTML/Введение_в_HTML">Введении в HTML</a>. Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!</p>
-
-<div class="note">
-<p><strong>Внимание: </strong>Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Руководство">Руководство</h2>
-
-<p>Этот модуль содержит следующие статьи, которые проведут вас через все основы внедрения мультимедиа на веб-страницах.</p>
-
-<dl>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML">Изображения в HTML</a></dt>
- <dd>
- <p>Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя {{htmlelement("figure")}}, и как он взаимодействует с фоновым изображением CSS.</p>
- </dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></dt>
- <dd>
- <p>Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.</p>
- </dd>
- <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; к &lt;iframe&gt; — другие технологии встраивания</a></dt>
- <dd>В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. &lt;iframe&gt; используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.</dd>
- <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web">Добавление векторной графики в Веб</a></dt>
- <dd>Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Адаптивные изображения</a></dt>
- <dd>
- <p>В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.</p>
- </dd>
-</dl>
-
-<h2 id="Аттестация">Аттестация</h2>
-
-<p>Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.</p>
-
-<dl>
- <dt><a href="/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla">Страница приветствия Mozilla</a></dt>
- <dd>В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!</dd>
-</dl>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<dl>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Как добавить карту кликов поверх изображения</a></dt>
- <dd>Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на неё.) Эта технология иногда может быть полезной.</dd>
- <dt><a href="https://learning.mozilla.org/en-US/activities/web-lit-basics-two/">Основы Веб-грамотности 2</a></dt>
- <dd>
- <p>Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле <em>Мультимедиа и встраивание</em>. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.</p>
- </dd>
-</dl>
+{{LearnSidebar}}
+
+Мы уже прочли много текста в этом курсе. МНОГО текста. Но веб был бы скучным, если бы состоял только из текста, поэтому давайте посмотрим, как оживить веб при помощи более интересного контента! Этот модуль объясняет, как при помощи HTML вставлять мультимедиа в ваши web-страницы, включая разные способы вставки изображений, видео, аудио, а также других страниц целиком.
+
+## Перед стартом
+
+Перед изучением этого модуля, вам необходимо изучить азы HTML, изложенные во [Введении в HTML](/ru/docs/Learn/HTML/Введение_в_HTML). Если вы не прошли этот модуль (или подобный ему), сначала пройдите его, затем возвращайтесь!
+
+> **Примечание:** **Внимание:** Если вы работаете на компьютере/планшете/другом устройстве, на котором у вас нет возможности создавать файлы, вы можете попробовать сделать упражнения на программирование (большинство из них) в онлайн сервисах, например в [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
+
+## Руководство
+
+Этот модуль содержит следующие статьи, которые проведут вас через все основы внедрения мультимедиа на веб-страницах.
+
+- [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Изображения_в_HTML)
+  - : Можно рассматривать другие типы мультимедиа, но логично начать с простого элемента {{htmlelement("img")}}, используемого для встраивания простого изображения в веб-страницу. В этой статье мы увидим, как использовать его в целом, включая основы, подписывать его, используя {{htmlelement("figure")}}, и как он взаимодействует с фоновым изображением CSS.
+- [Видео и аудио контент](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+  - : Далее мы рассмотрим, как использовать элементы HTML5 {{htmlelement ("video")}} и {{htmlelement ("audio")}} для встраивания видео и аудио на наши страницы, включая основы, обеспечивая доступ к различным форматам файлов для разных браузеров, добавление подписей и субтитров, а также как добавить резервные копии для старых браузеров.
+- [От \<object> к \<iframe> — другие технологии встраивания](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+  - : В этом месте мы бы хотели сделать шаг в сторону, чтобы изучить пару элементов, которые позволят встраивать широкий спектр типов контента в ваши веб-страницы: элементы {{htmlelement("iframe")}}, {{htmlelement("embed")}} и{{htmlelement("object")}}. \<iframe> используется для встраивания других веб-страниц, а другие два элемента позволяют встраивать PDF, SVG и даже Flash – устаревающая технология, но все ещё часто встречаемая.
+- [Добавление векторной графики в Веб](/ru/docs/Learn/HTML/Multimedia_and_embedding/Добавление_r_graphics_to_the_Web)
+  - : Векторная графика может быть очень полезной в определённых ситуациях. В отличие от обычных форматов типа PNG/JPG, она не деформируются/пикселизируются при растяжении, она остаётся гладкой при масштабировании. Эта статья знакомит вас с понятием векторной графики и учит вас встраивать популярный формат {{glossary("SVG")}} в веб-страницы.
+- [Адаптивные изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - : В этой статье мы познакомимся с концепцией адаптивных изображений - изображений, которые хорошо работают на устройствах с сильно различающимися размерами экрана, разрешением и другими подобными характеристиками, и рассмотрим, какие инструменты предоставляет HTML для их реализации. Это помогает повысить производительность различных устройств. Адаптивные изображения - это всего лишь одна часть адаптивного дизайна, будущей темы CSS, которую вы должны изучить.
+
+## Аттестация
+
+Следующая аттестация проверит ваше понимание основ HTML, изложенных в перечисленных выше статьях.
+
+- [Страница приветствия Mozilla](/ru/docs/Learn/HTML/Multimedia_and_embedding/заставка_Mozilla)
+  - : В этой аттестации мы проверим ваши знания по некоторым технологиям, которые обсуждались в статьях этого модуля, заставляя вас добавить несколько изображений и видео на примитивную приветственную страницу, посвящённую Mozilla!
+
+## Смотрите также
+
+- [Как добавить карту кликов поверх изображения](/ru/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image)
+  - : Карта изображения предоставляет способ разделить изображение на части, которые ссылаются на разные места (представьте себе географическую карту, которая показывает подробную информацию о каждой стране, когда вы кликаете на неё.) Эта технология иногда может быть полезной.
+- [Основы Веб-грамотности 2](https://learning.mozilla.org/en-US/activities/web-lit-basics-two/)
+  - : Превосходный курс от фонда Mozilla, который освещает и проверяет некоторые навыки, полученные в модуле _Мультимедиа и встраивание_. Погрузитесь глубже в основы вёрстки веб-страниц, проектирования для доступности, обмена ресурсами, использования интернет-СМИ и работы с открытым кодом.
diff --git a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
index 1203ff487aac4d..20da054c0bf18b 100644
--- a/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/mozilla_splash_page/index.md
@@ -4,104 +4,83 @@ slug: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 translation_of: Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page
 original_slug: Learn/HTML/Multimedia_and_embedding/заставка_Mozilla
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div>
+В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!
 
-<p class="summary">В этом задании мы проверим ваши знания приёмов, рассмотренных в статьях этого модуля, через добавление изображений и видео на забавную страницу о Mozilla!</p>
+| Предпосылки: | Прежде чем приступить к этому заданию, вы должны проработать остальную часть [модуля мультимедиа и встраивания.](/ru/docs/Learn/HTML/Multimedia_and_embedding) |
+| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML.                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Прежде чем приступить к этому заданию, вы должны проработать остальную часть <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">модуля мультимедиа и встраивания.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Для проверки знаний о встраивании изображений и видео в веб-страницы, фреймы и методы визуального восприятия HTML.</td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Для начала этого задания скачайте все HTML файлы и изображения, доступные на github([mdn-splash-page-start](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/)). Сохраните содержимое [index.html](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html) в файле с именем `index.html` на вашем диске в новой папке. Затем сохраните [pattern.png](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png) в той же папке (правый клик на изображении для выбора опции сохранения).
 
-<p>Для начала этого задания скачайте все HTML файлы и изображения, доступные на github(<a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/">mdn-splash-page-start</a>). Сохраните содержимое <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/index.html">index.html</a> в файле с именем <code>index.html</code> на вашем диске в новой папке. Затем сохраните <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/mdn-splash-page-start/pattern.png">pattern.png</a> в той же папке (правый клик на изображении для выбора опции сохранения).</p>
+Сохраните изображения из папки [originals](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals) тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.
 
-<p>Сохраните изображения из папки <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/mdn-splash-page-start/originals">originals</a> тем же способом; возможно вы захотите сохранить их в другой папке пока не обработаете (некоторые из них) с помощью графического редактора.</p>
+> **Примечание:** Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.
 
-<div class="note">
-<p><strong>Note</strong>: Приведённый для примера HTML файл содержит довольно много CSS для стилизации страницы. Вам не нужно изменять CSS, только HTML внутри {{htmlelement("body")}} элемента — пока вы используете корректную разметку, CSS будет придавать правильный внешний вид.</p>
-</div>
+## Описание проекта
 
-<h2 id="Описание_проекта">Описание проекта</h2>
+В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:
 
-<p>В этом задании мы представляем вам почти законченный сайт-визитку Mozilla, цель которого - рассказать что-нибудь интересное о принципах Mozilla и предоставить несколько ссылок для углублённого ознакомления. К сожалению, изображения или видео не добавлены - это ваша работа! Вам нужно добавить несколько медиа-файлов для того, чтобы страница смотрелась лучше и имела больше смысла. В следующих подразделах подробно объяснено, что вам требуется сделать:</p>
+### Подготовка изображений
 
-<h3 id="Подготовка_изображений">Подготовка изображений</h3>
+Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:
 
-<p>Используя ваш любимый редактор изображений, создайте версии шириной 400px и 120px, следующих изображений:</p>
+- `firefox_logo-only_RGB.png`
+- `firefox-addons.jpg`
+- `mozilla-dinosaur-head.png`
 
-<ul>
- <li><code>firefox_logo-only_RGB.png</code></li>
- <li><code>firefox-addons.jpg</code></li>
- <li><code>mozilla-dinosaur-head.png</code></li>
-</ul>
+Назовите их как-нибудь разумно, например `firefoxlogo400.png`и `firefoxlogo120.png`.
 
-<p>Назовите их как-нибудь разумно, например <code>firefoxlogo400.png</code>и <code>firefoxlogo120.png</code>.</p>
+Вместе с `mdn.svg`, эти изображения будут иконками для ссылок на другие ресурсы внутри секции `further-info`. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и `index.html`.
 
-<p>Вместе с <code>mdn.svg</code>, эти изображения будут иконками для ссылок на другие ресурсы внутри секции <code>further-info</code>. Вы также дадите ссылку на логотип Firefox в шапке сайта. Сохраните все копии внутри той же папки, что и <code>index.html</code>.</p>
+Затем создайте фоновую версию `red-panda.jpg `шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и `index.html`.
 
-<p>Затем создайте фоновую версию  <code>red-panda.jpg </code>шириной 1200px и портретную версию шириной 600px, которая показывает панду более крупным планом. Снова назовите их разумно, чтобы легко распознавать их. Сохраните обе копии внутри той же папки, что и <code>index.html</code>.</p>
+> **Примечание:** Следует обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. [tinypng.com](https://tinypng.com/) - отличный сервис для этого.
 
-<div class="note">
-<p><strong>Note</strong>: Следует  обрабатывать JPG и PNG изображения, чтобы делать их как можно меньше по весу, при сохранении хорошего вида. <a href="https://tinypng.com/">tinypng.com</a> - отличный сервис для этого.</p>
-</div>
+### Добавление логотипа в шапку
 
-<h3 id="Добавление_логотипа_в_шапку">Добавление логотипа в шапку</h3>
+Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.
 
-<p>Добавьте внутрь элемента {{htmlelement("header")}} элемент {{htmlelement("img")}}, который вставит уменьшенную версию логотипа Firefox в шапку.</p>
+### Добавление видео к основному содержанию статьи
 
-<h3 id="Добавление_видео_к_основному_содержанию_статьи">Добавление видео к основному содержанию статьи</h3>
+Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <https://www.youtube.com/watch?v=ojcNcvb1olg>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.
 
-<p>Внутри элемента {{htmlelement("article")}} (сразу после открывающего тэга), вставьте ролик с YouTube по ссылке <a href="https://www.youtube.com/watch?v=ojcNcvb1olg">https://www.youtube.com/watch?v=ojcNcvb1olg</a>, используя подходящие инструменты YouTube для генерации кода. Видео должно быть 400px в ширину.</p>
+### Добавление отзывчивых изображений к ссылкам с доп. информацией
 
-<h3 id="Добавление_отзывчивых_изображений_к_ссылкам_с_доп._информацией">Добавление отзывчивых изображений к ссылкам с доп. информацией</h3>
+Внутри {{htmlelement("div")}} с классом `further-info` вы найдёте четыре элемента {{htmlelement("a")}} — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.
 
-<p>Внутри {{htmlelement("div")}} с классом <code>further-info</code> вы найдёте четыре элемента {{htmlelement("a")}}  — каждый из которых ссылается на интересную страницу, связанную с Mozilla. Для завершения этой секции вам необходимо поместить элемент {{htmlelement("img")}} внутрь каждого элемента {{htmlelement("a")}} дополнив подходящими атрибутами {{htmlattrxref("src", "img")}}, {{htmlattrxref("alt", "img")}}, {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}}.</p>
+В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.
 
-<p>В каждом случае (кроме одного - какой из них по сути отзывчивый?) мы хотим, чтобы браузер использовал изображение шириной 120px , когда экран меньше или равен 480px, либо шириной 400px в других случаях.</p>
+Убедитесь, что вы использовали изображения, соответствующие ссылкам.
 
-<p>Убедитесь, что вы использовали изображения, соответствующие ссылкам.</p>
+> **Примечание:** Для проверки правильности работы `srcset`/`sizes` , вам нужно загрузить ваш сайт на сервер (используйте [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) - простое и бесплатное решение). Затем вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в [Responsive images: useful developer tools](/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools).
 
-<div class="note">
-<p><strong>Note</strong>: Для проверки правильности работы <code>srcset</code>/<code>sizes</code> , вам нужно загрузить ваш сайт на сервер (используйте <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> - простое и бесплатное решение). Затем  вы сможете проверить правильность их работы используя инструменты разработчика в браузере, как описано в <a href="/en-US/Learn/HTML/Multimedia_and_embedding/Responsive_images#Useful_developer_tools">Responsive images: useful developer tools</a>.</p>
-</div>
+### Искусственно изменённая красная панда
 
-<h3 id="Искусственно_изменённая_красная_панда">Искусственно изменённая красная панда</h3>
+Внутри элемента {{htmlelement("div")}} с классом `red-panda`, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.
 
-<p>Внутри элемента {{htmlelement("div")}} с классом <code>red-panda</code>, мы хотим поместить элемент {{htmlelement("picture")}} , который использует маленькое портретное изображение панды, если экран меньше или равен 600px, либо большое фоновое изображение.</p>
+## Пример
 
-<h2 id="Пример">Пример</h2>
+Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.
 
-<p>Следующие скриншоты демонстрируют, как сайт-визитка выглядит, при правильной разметке, на широких и узких экранах.</p>
+![A wide shot of our example splash page](https://mdn.mozillademos.org/files/12946/wide-shot.png)
 
-<p><img alt="A wide shot of our example splash page" src="https://mdn.mozillademos.org/files/12946/wide-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 620px; margin: 0px auto; width: 700px;"></p>
+![A narrow shot of our example splash page](https://mdn.mozillademos.org/files/12944/narrow-shot.png)
 
-<p><img alt="A narrow shot of our example splash page" src="https://mdn.mozillademos.org/files/12944/narrow-shot.png" style="border-style: solid; border-width: 1px; display: block; height: 1069px; margin: 0px auto; width: 320px;"></p>
+## Заключение
 
-<h2 id="Заключение">Заключение</h2>
+Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку [в ветке форума этого упражнения](https://discourse.mozilla.org/t/mozilla-splash-page-assessment/24679), либо в IRC канале [#mdn](irc://irc.mozilla.org/mdn) на [Mozilla IRC](https://wiki.mozilla.org/IRC). Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться!
 
-<p>Если вы выполняете это задание как часть организованного курса вам следует передать вашу работу учителю/наставнику для оценки. Если вы обучаетесь самостоятельно, то вы легко можете получить отметку <a href="https://discourse.mozilla.org/t/mozilla-splash-page-assessment/24679">в ветке форума этого упражнения</a>, либо в IRC канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> на <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте выполнить упражнение - жульничеством ничего не добиться! </p>
+{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}
 
-<p>{{PreviousMenu("Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Видео и аудио контент</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">От &lt;object&gt; до &lt;iframe&gt; — другие технологии встраивания</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Добавление векторной графики в Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Отзывчивые изображения</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Сайт-визитка Mozilla</a></li>
-</ul>
+- [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Видео и аудио контент](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [От \<object> до \<iframe> — другие технологии встраивания](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Добавление векторной графики в Web](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Отзывчивые изображения](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Сайт-визитка Mozilla](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
index 72e9a8af545b31..9ca217c058a09f 100644
--- a/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md
@@ -3,78 +3,63 @@ title: От <object> к <iframe> - другие технологии внедр
 slug: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div>
+К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: {{htmlelement ("iframe")}}, {{htmlelement ( "embed")}} и {{htmlelement ("object")}}. \<iframe> предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash - устаревшую технологию, которую вы всё равно иногда увидите.
 
-<p class="summary">К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: {{htmlelement ("iframe")}}, {{htmlelement ( "embed")}} и {{htmlelement ("object")}}. &lt;iframe&gt; предназначен для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash - устаревшую технологию, которую вы всё равно иногда увидите.</p>
+| Предпосылки: | Базовая компьютерная грамотность, [установка базового программного обеспечения](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания [работы с файлами](/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files), знакомство с основами HTML (как описано в разделе [Начало работы с HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B)) и предыдущими статьями в этом модуле. |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Узнать, как встраивать элементы в веб-страницы, используя {{htmlelement ("object")}}, {{htmlelement ("embed")}} и {{htmlelement ("iframe")}}, например, флеш-ролики и другие веб-страницы                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Базовая компьютерная грамотность, <a href="/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового программного обеспечения</a>, базовые знания <a href="/ru/docs/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, знакомство с основами HTML (как описано в разделе <a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%9D%D0%B0%D1%87%D0%B0%D0%BB%D0%BE_%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B">Начало работы с HTML</a>) и предыдущими статьями в этом модуле.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, как встраивать элементы в веб-страницы, используя {{htmlelement ("object")}}, {{htmlelement ("embed")}} и {{htmlelement ("iframe")}}, например, флеш-ролики и другие веб-страницы </td>
-  </tr>
- </tbody>
-</table>
+## Краткая история внедрения
 
-<h2 id="Краткая_история_внедрения">Краткая история внедрения</h2>
+Давным-давно в Интернете было популярно использовать **фреймы** для создания веб-сайтов - небольших частей веб-сайта, хранящихся на отдельных страницах HTML. Они были встроены в главный документ, называемый **набором фреймов**, который позволял вам указать область на экране, которую заполнял каждый фрейм, а не столбец и строку таблицы. Они были популярны в середине и конце 90-х годов и были доказательством того, что разделение веб-страницы на более мелкие куски лучше сказывается на скорости загрузки, особенно это заметно, когда сетевые соединения были медленными. Однако у них было много проблем, которые намного перевешивали любые положительные моменты, когда скорость сети становилась выше. Поэтому вы больше не увидите, чтобы их использовали.
 
-<p>Давным-давно в Интернете было популярно использовать <strong>фреймы</strong> для создания веб-сайтов - небольших частей веб-сайта, хранящихся на отдельных страницах HTML. Они были встроены в главный документ, называемый <strong>набором фреймов</strong>, который позволял вам указать область на экране, которую заполнял каждый фрейм, а не столбец и строку таблицы. Они были популярны в середине и конце 90-х годов и были доказательством того, что разделение веб-страницы на более мелкие куски лучше сказывается на скорости загрузки, особенно это заметно, когда сетевые соединения были медленными. Однако у них было много проблем, которые намного перевешивали любые положительные моменты, когда скорость сети становилась выше. Поэтому вы больше не увидите, чтобы их использовали.</p>
+Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов, такие как Java-апплеты и Flash, стали очень популярными - это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий осуществлялось посредством таких элементов, как {{htmlelement ("object")}} и менее используемого {{htmlelement ("embed")}}, и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах также уменьшается.
 
-<p>Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов, такие как Java-апплеты и Flash, стали очень популярными - это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий осуществлялось посредством таких элементов, как {{htmlelement ("object")}} и менее используемого {{htmlelement ("embed")}}, и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах также уменьшается.</p>
+Наконец, появился элемент {{htmlelement ("iframe")}} (наряду с другими способами встраивания контента, например {{htmlelement ("canvas")}}, {{htmlelement ("video")}} и т. д. ) Он позволяет встраивать целый веб-документ внутри другого, как если бы это был {{htmlelement ("img")}} или другой подобный элемент, и сегодня используется повсеместно.
 
-<p>Наконец, появился элемент {{htmlelement ("iframe")}} (наряду с другими способами встраивания контента, например {{htmlelement ("canvas")}}, {{htmlelement ("video")}} и т. д. ) Он позволяет встраивать целый веб-документ внутри другого, как если бы это был {{htmlelement ("img")}} или другой подобный элемент, и сегодня используется повсеместно.</p>
+Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.
 
-<p>Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.</p>
+## Активное обучение: использование классического внедрения
 
-<h2 id="Активное_обучение_использование_классического_внедрения">Активное обучение: использование классического внедрения</h2>
+В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя {{htmlelement ("iframe")}}.
 
-<p>В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие не знают о некоторых доступных для него средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя {{htmlelement ("iframe")}}.</p>
+1.  Сначала перейдите на Youtube и найдите понравившееся вам видео.
+2.  Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.
+3.  Выберите кнопку «Вставить», и вам будет предоставлен код \<iframe> - скопируйте его.
+4.  Вставьте его в поле ввода ниже и посмотрите на результат в Output.
 
-<ol>
- <li>Сначала перейдите на Youtube и найдите понравившееся вам видео.</li>
- <li>Под видео вы найдёте кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.</li>
- <li>Выберите кнопку «Вставить», и вам будет предоставлен код &lt;iframe&gt; - скопируйте его.</li>
- <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li>
-</ol>
+Дополнительно вы также можете попробовать внедрить карту Google следующим образом:
 
-<p>Дополнительно вы также можете попробовать внедрить карту Google следующим образом:</p>
+1.  Перейдите в Карты Google и найдите подходящую вам карту.
+2.  Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.
+3.  Выберите параметр Ссылка/код.
+4.  Выберите параметр Встраивание карт, который даст вам код \<iframe> - скопируйте его.
+5.  Вставьте его в поле ввода ниже и посмотрите на результат в Output.
 
-<ol>
- <li>Перейдите в Карты Google и найдите подходящую вам карту.</li>
- <li>Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.</li>
- <li>Выберите параметр Ссылка/код.</li>
- <li>Выберите параметр Встраивание карт, который даст вам код &lt;iframe&gt; - скопируйте его.</li>
- <li>Вставьте его в поле ввода ниже и посмотрите на результат в Output.</li>
-</ol>
+Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.
 
-<p>Если вы допустили ошибку, вы всегда можете сбросить её с помощью кнопки «Сброс». Если вы действительно застряли, нажмите кнопку «Показать решение», чтобы увидеть ответ.</p>
+```html hidden
+<h2>Live output</h2>
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 250px;"&gt;
-&lt;/div&gt;
+<div class="output" style="min-height: 250px;">
+</div>
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 
-&lt;textarea id="code" class="input" style="width: 95%;min-height: 100px;"&gt;
-&lt;/textarea&gt;
+<textarea id="code" class="input" style="width: 95%;min-height: 100px;">
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -92,9 +77,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var output = document.querySelector('.output');
@@ -124,7 +111,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var htmlSolution = '&lt;iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen&gt;\n&lt;/iframe&gt;\n\n&lt;iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen&gt;\n&lt;/iframe&gt;';
+var htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>';
 var solutionEntry = htmlSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -170,204 +157,155 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Подробно_об_Iframes">Подробно об Iframes</h2>
+## Подробно об Iframes
 
-<p>Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью &lt;iframe&gt;.</p>
+Итак, это было легко и весело, не так ли? Элементы {{htmlelement ("iframe")}} предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты от поставщиков онлайн-карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью \<iframe>.
 
-<p>Есть несколько серьёзных <a href="#проблемы_безопасности">Проблем безопасности</a> при использовании &lt;iframe&gt;, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:</p>
+Есть несколько серьёзных [Проблем безопасности](#проблемы_безопасности) при использовании \<iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требуют некоторых знаний и тщательного обдумывания. Давайте рассмотрим код немного подробнее. Скажем, вы хотите добавить глоссарий MDN на одну из своих веб-страниц. Вы можете попробовать что-то вроде этого:
 
-<pre>&lt;iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
+```
+<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
         width="100%" height="500" frameborder="0"
-        allowfullscreen sandbox&gt;
-  &lt;p&gt; &lt;a href="https://developer.mozilla.org/en-US/docs/Glossary"&gt;
+        allowfullscreen sandbox>
+  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
     Fallback link for browsers that don't support iframes
-  &lt;/a&gt; &lt;/p&gt;
-&lt;/iframe&gt;</pre>
-
-<p>Этот пример включает основы, необходимые для использования &lt;iframe&gt;:</p>
-
-<dl>
- <dt>{{htmlattrxref('allowfullscreen','iframe')}}</dt>
- <dd>Если установлено, &lt;iframe&gt; может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).</dd>
- <dt>{{htmlattrxref('frameborder','iframe')}}</dt>
- <dd>Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.</dd>
- <dt>{{htmlattrxref('src','iframe')}}</dt>
- <dd>Этот атрибут, как и {{htmlelement ("video")}} / {{htmlelement ("img")}}, содержит путь, указывающий на URL-адрес внедряемого документа.</dd>
- <dt>{{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}</dt>
- <dd>Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.</dd>
- <dt>Резервный контент</dt>
- <dd>Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия &lt;iframe&gt; &lt;/ iframe&gt;, которые появятся, если браузер не поддерживает &lt; IFRAME&gt;. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает &lt;iframe&gt; в наше время.</dd>
- <dt>{{htmlattrxref('sandbox','iframe')}}</dt>
- <dd>Этот атрибут, который работает в более современных браузерах, чем остальные функции &lt;iframe&gt; (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.</dd>
-</dl>
-
-<div class="note">
-<p><strong>Примечание: </strong>Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель {{glossary ("SEO")}}.)</p>
-</div>
+  </a> </p>
+</iframe>
+```
 
-<h3 id="Проблемы_безопасности">Проблемы безопасности</h3>
+Этот пример включает основы, необходимые для использования \<iframe>:
 
-<p>Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать &lt;iframe&gt; - вам просто нужно быть осторожным. Продолжим...</p>
+- {{htmlattrxref('allowfullscreen','iframe')}}
+  - : Если установлено, \<iframe> может быть помещён в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).
+- {{htmlattrxref('frameborder','iframe')}}
+  - : Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя {{cssxref ('border')}}: none; в {{Glossary ('CSS')}}.
+- {{htmlattrxref('src','iframe')}}
+  - : Этот атрибут, как и {{htmlelement ("video")}} / {{htmlelement ("img")}}, содержит путь, указывающий на URL-адрес внедряемого документа.
+- {{htmlattrxref('width','iframe')}} and {{htmlattrxref('height','iframe')}}
+  - : Эти атрибуты определяют ширину и высоту, в которых вы хотите использовать iframe.
+- Резервный контент
+  - : Точно так же, как и другие подобные элементы, такие как {{htmlelement ("video")}}, вы можете включить резервный контент между тегами открытия и закрытия \<iframe> \</ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнётесь с таким браузером, который не поддерживает \<iframe> в наше время.
+- {{htmlattrxref('sandbox','iframe')}}
+  - : Этот атрибут, который работает в более современных браузерах, чем остальные функции \<iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности. Об этом мы расскажем в следующем разделе.
 
-<p>Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты &lt;iframe&gt;, лучшие из которых мы рассмотрим ниже.</p>
+> **Примечание:**Чтобы повысить скорость загрузки, рекомендуется установить атрибут src в элементе iframe с помощью JavaScript после того, как основное содержимое будет загружено. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель {{glossary ("SEO")}}.)
 
-<div class="note">
-<p>{{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.</p>
-</div>
+### Проблемы безопасности
 
-<p>Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение <em>«Отказано в доступе» в связи с X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование</em>. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри &lt;iframe&gt; (см. <a href="#настройка_директивы_csp">Настройка директивы CSP</a> ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.</p>
+Выше мы упомянули о проблемах безопасности. Давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы всё поймёте с первого раза. Мы просто хотим сообщить вам о проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, когда станете более опытными и начнёте рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать \<iframe> - вам просто нужно быть осторожным. Продолжим...
 
-<h4 id="Используйте_только_при_необходимости">Используйте только при необходимости</h4>
+Разработчики браузеров и веб-разработчики на горьком опыте усвоили, что iframe - частая цель (официальный термин: вектор атаки) плохих людей в Интернете (часто называемых хакерами, или, более точно, крекерами) для атаки при попытке злонамеренно изменить ваши веб-страницы или обманом заставить посетителей делать то, чего они не хотят, например, раскрыть конфиденциальную информацию вроде имени пользователя и пароли. Чтобы избежать этого, авторы спецификаций и разработчики браузеров разработали различные механизмы безопасности для обеспечения защиты \<iframe>, лучшие из которых мы рассмотрим ниже.
 
-<p>Иногда имеет смысл вставлять сторонний контент - например, видео и карты, но вы избежите головной боли, если будете вставлять сторонний контент только тогда, когда это абсолютно необходимо. Хорошее эмпирическое правило для веб-безопасности: «Вы никогда не можете быть слишком осторожным. Если вы что-то сделали, дважды проверьте это. Если кто-то другой сделал это, считайте, что это опасно, пока не будет доказано обратное».</p>
+> **Примечание:** {{interwiki('wikipedia','Clickjacking')}} – это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.
 
-<div>
-<p>Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на <a href="https://commons.wikimedia.org/wiki/Main_Page">Wikimedia Commons</a>). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными.</p>
+Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер (вы можете найти его живой пример на Github (см. Также исходный код). На самом деле, вы ничего не увидите на странице, т.к. если вы посмотрите в консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение _«Отказано в доступе» в связи с X-Frame-Options: https\://developer.mozilla.org/en-US/docs/Glossary не разрешает кадрирование_. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри \<iframe> (см. [Настройка директивы CSP](#настройка_директивы_csp) ниже). Суть здесь такова - целой странице MDN на самом деле нет смысла встраиваться в другие страницы - конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные; или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнёт стоить Mozilla больших денег.
 
-<p>Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на <a href="/en-US/docs/MDN/About#Copyrights_and_licenses">licensed under CC-BY-SA</a>. Это означает, что вы <a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution">должны относиться к нам с уважением</a>, когда цитируете наш контент, даже если внесли в него существенные изменения.</p>
-</div>
+#### Используйте только при необходимости
 
-<h4 id="Используйте_HTTPS">Используйте HTTPS</h4>
+Иногда имеет смысл вставлять сторонний контент - например, видео и карты, но вы избежите головной боли, если будете вставлять сторонний контент только тогда, когда это абсолютно необходимо. Хорошее эмпирическое правило для веб-безопасности: «Вы никогда не можете быть слишком осторожным. Если вы что-то сделали, дважды проверьте это. Если кто-то другой сделал это, считайте, что это опасно, пока не будет доказано обратное».
 
-<p>{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :</p>
+Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента находится под защитой авторских прав, даже тот, от которого вы не могли ожидать (например, большинство картинок на [Wikimedia Commons](https://commons.wikimedia.org/wiki/Main_Page)). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет однозначного письменного разрешения от правообладателя. Наказания за нарушения авторских прав строги. И, повторимся, вы никогда не можете быть слишком осторожными.
 
-<ol>
- <li>HTTPS уменьшает вероятность того, что контент был изменён по пути;</li>
- <li>HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.</li>
-</ol>
+Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на [licensed under CC-BY-SA](/ru/docs/MDN/About#Copyrights_and_licenses). Это означает, что вы [должны относиться к нам с уважением](https://wiki.creativecommons.org/wiki/Best_practices_for_attribution), когда цитируете наш контент, даже если внесли в него существенные изменения.
 
-<p>Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть <a href="https://letsencrypt.org/">Let's Encrypt</a>, что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS <em>во что бы то ни стало</em> вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через &lt;iframe&gt;, доступны через HTTPS - посмотрите URL-адреса внутри &lt;iframe&gt; src при встраивании, например, содержимого из Карт Google или Youtube.</p>
+#### Используйте HTTPS
 
-<div class="note">
-<p><strong>Примечание</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Github pages</a> позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.</p>
-</div>
+{{Glossary("HTTPS")}} это зашифрованная версия {{Glossary("HTTP")}}. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :
 
-<h4 id="Всегда_используйте_атрибут_sandbox">Всегда используйте атрибут <code>sandbox</code></h4>
+1.  HTTPS уменьшает вероятность того, что контент был изменён по пути;
+2.  HTTPS запрещает доступ внедрённого контента к контенту в вашем исходном документе и наоборот.
 
-<p>Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p>
+Использование HTTPS требует сертификат безопасности, что может обходиться в копеечку (хотя есть [Let's Encrypt](https://letsencrypt.org/), что облегчает задачу). Если вы не можете его получить, вы можете отдавать свой родительский документ с помощью HTTP. Однако, из-за второго преимущества HTTPS _во что бы то ни стало_ вы не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш браузер выдаст угрожающее предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через \<iframe>, доступны через HTTPS - посмотрите URL-адреса внутри \<iframe> src при встраивании, например, содержимого из Карт Google или Youtube.
 
-<p>Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут <code>sandbox</code> без параметров, как показано в предыдущем примере.</p>
+> **Примечание:** [Github pages](/ru/docs/Learn/Common_questions/Using_Github_pages) позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера об этом.
 
-<p>Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута <code>sandbox=""</code>) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы <em>никогда</em> не должны добавлять атрибуты <code>allow-scripts</code> и <code>allow-same-origin</code> в свой <code>sandbox</code> атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .</p>
+#### Всегда используйте атрибут `sandbox`
 
-<div class="note">
-<p>Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.</p>
-</div>
+Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом или для тестирования, но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется [sandbox](<https://en.wikipedia.org/wiki/Sandbox_(computer_security)>).
 
-<h4 id="Настройка_директив_CSP">Настройка директив CSP</h4>
+Контент, не ограниченный sandbox, может сделать слишком многое (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию включайте все возможные ограничения, используя атрибут `sandbox` без параметров, как показано в предыдущем примере.
 
-<p>{{Glossary("CSP")}} означает <strong><a href="/en-US/docs/Web/Security/CSP">политику безопасности контента</a></strong> и обеспечивает <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">набор заголовков HTTP</a> (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности <code>&lt;iframe&gt;</code>, вы можете <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">настроить сервер для отправки соответствующего <code>X-Frame-Options</code>  заголовка.</a></em> Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать {{interwiki('wikipedia','clickjacking')}} и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее..</p>
+Если это необходимо, вы можете добавлять разрешения один за другим (внутри значения атрибута `sandbox=""`) — смотри {{htmlattrxref('sandbox','iframe')}} ссылка для всех доступных опций. Важно отметить, что вы _никогда_ не должны добавлять атрибуты `allow-scripts` и `allow-same-origin` в свой `sandbox` атрибут одновременно — в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты и использовать JavaScript для отключения "песочницы" sandbox .
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете прочитать пост Фредерика Брауна <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">On the X-Frame-Options Security Header</a> для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.</p>
-</div>
+> **Примечание:** Примечание. "Песочница" не обеспечивает защиту, если злоумышленники могут обманывать людей через прямое посещение вредоносного контента (вне iframe). Если есть вероятность, что определённый контент может быть вредоносным (например, созданный пользователями контент), пожалуйста, используйте его из другого {{glossary("domain")}} на ваш основной сайт.
 
-<h2 id="Элементы_&lt;embed>_и_&lt;object>">Элементы &lt;embed&gt; и &lt;object&gt;</h2>
+#### Настройка директив CSP
 
-<p>Элементы {{htmlelement("embed")}} и {{htmlelement("object")}}  служат другой функции, в отличие от iframe - эти элементы являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент, как видео, SVG и изображения!</p>
+{{Glossary("CSP")}} означает **[политику безопасности контента](/ru/docs/Web/Security/CSP)** и обеспечивает [набор заголовков HTTP](/ru/docs/Web/Security/CSP/CSP_policy_directives) (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера), предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности `<iframe>`, вы можете _[настроить сервер для отправки соответствующего `X-Frame-Options` заголовка.](/ru/docs/Web/HTTP/X-Frame-Options)_ Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать {{interwiki('wikipedia','clickjacking')}} и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее..
 
-<div class="note">
-<p><strong>Примечание</strong>. <strong>Плагин </strong>- это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.</p>
-</div>
+> **Примечание:** вы можете прочитать пост Фредерика Брауна [On the X-Frame-Options Security Header](https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/) для более детальной информации по теме. Разумеется, объяснение в этой статье далеко не полное.
 
-<p>Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. <a href="#случай_с_плагинами">Случай с плагинами</a>, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.</p>
-
-<p>Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col"></th>
-   <th scope="col">{{htmlelement("embed")}}</th>
-   <th scope="col">{{htmlelement("object")}}</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>{{glossary("URL")}} встраиваемого контента</td>
-   <td>{{htmlattrxref('src','embed')}}</td>
-   <td>{{htmlattrxref('data','object')}}</td>
-  </tr>
-  <tr>
-   <td><em>точный </em>{{glossary("MIME type", 'media type')}} встраиваемого контента</td>
-   <td>{{htmlattrxref('type','embed')}}</td>
-   <td>{{htmlattrxref('type','object')}}</td>
-  </tr>
-  <tr>
-   <td>высота и ширина (в пикселях) элемента, управляемого плагином</td>
-   <td>{{htmlattrxref('height','embed')}}<br>
-    {{htmlattrxref('width','embed')}}</td>
-   <td>{{htmlattrxref('height','object')}}<br>
-    {{htmlattrxref('width','object')}}</td>
-  </tr>
-  <tr>
-   <td>имена и значения, предоставляемые плагину в качестве параметров</td>
-   <td>Особые атрибуты,с их именами и значениями</td>
-   <td>одиночные элементы {{htmlelement("param")}}, находящиеся внутри <code>&lt;object&gt;</code></td>
-  </tr>
-  <tr>
-   <td>независимый HTML-контент в качестве резерва для отсутствующего ресурса</td>
-   <td>не поддерживается (<code>&lt;noembed&gt;</code> является устаревшим)</td>
-   <td>содержится внутри <code>&lt;object&gt;</code>, после элементов <code>&lt;param&gt;</code> </td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Замечание</strong>: <code>&lt;object&gt;</code> -у необходим атрибут <code>data</code> , атрибут <code>type</code> , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут {{htmlattrxref('typemustmatch','object')}} (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут <code>typemustmatch</code> предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут <code>typemustmatch</code> может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).</p>
-</div>
+## Элементы \<embed> и \<object>
+
+Элементы {{htmlelement("embed")}} и {{htmlelement("object")}} служат другой функции, в отличие от iframe - эти элементы являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент, как видео, SVG и изображения!
+
+> **Примечание:** . **Плагин** - это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.
+
+Тем не менее, вы вряд ли будете использовать эти элементы очень часто. Апплеты не использовались годами, Flash в настоящее время не очень популярен из-за ряда причин (см. [Случай с плагинами](#случай_с_плагинами), ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент - такой, как изображения и видео, могут обрабатываться намного проще. Плагины и эти методы внедрения действительно являются устаревшими технологиями, и мы упоминаем их здесь на случай, если вы столкнётесь с ними в определённых обстоятельствах, таких как интрасети или корпоративные проекты.
+
+Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:
+
+|                                                                                      | {{htmlelement("embed")}}                                                          | {{htmlelement("object")}}                                                              |
+| ------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| {{glossary("URL")}} встраиваемого контента                                      | {{htmlattrxref('src','embed')}}                                                  | {{htmlattrxref('data','object')}}                                                  |
+| _точный_ {{glossary("MIME type", 'media type')}} встраиваемого контента | {{htmlattrxref('type','embed')}}                                              | {{htmlattrxref('type','object')}}                                                  |
+| высота и ширина (в пикселях) элемента, управляемого плагином                         | {{htmlattrxref('height','embed')}} {{htmlattrxref('width','embed')}} | {{htmlattrxref('height','object')}} {{htmlattrxref('width','object')}} |
+| имена и значения, предоставляемые плагину в качестве параметров                      | Особые атрибуты,с их именами и значениями                                                 | одиночные элементы {{htmlelement("param")}}, находящиеся внутри `<object>`            |
+| независимый HTML-контент в качестве резерва для отсутствующего ресурса               | не поддерживается (`<noembed>` является устаревшим)                                       | содержится внутри `<object>`, после элементов `<param>`                                       |
+
+> **Примечание:** **Замечание**: `<object>` -у необходим атрибут `data` , атрибут `type` , или оба сразу. Если вы используете их вместе, вы также можете использовать атрибут {{htmlattrxref('typemustmatch','object')}} (имеющийся в наличии только в Firefox, на момент написания данной статьи). Атрибут `typemustmatch` предотвращает запуск файла, только если в в атрибут type не записан соответствующий медиа-тип. Следовательно, атрибут `typemustmatch` может предоставлять значительные преимущества в безопасности в случае встраивания контента из других источников {{glossary("origin")}} (Таким образом, не давая возможности злоумышленникам запускать произвольные скрипты посредством плагинов).
 
-<p>Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, а также на <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a>):</p>
+Ниже представлен пример использования элемента {{htmlelement("embed")}} для вставки Flash-фильма (загляните на [live on Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html), а также на [check the source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html)):
 
-<pre class="brush: html">&lt;embed src="whoosh.swf" quality="medium"
+```html
+<embed src="whoosh.swf" quality="medium"
        bgcolor="#ffffff" width="550" height="400"
        name="whoosh" align="middle" allowScriptAccess="sameDomain"
        allowFullScreen="false" type="application/x-shockwave-flash"
-       pluginspage="http://www.macromedia.com/go/getflashplayer"&gt;</pre>
+       pluginspage="http://www.macromedia.com/go/getflashplayer">
+```
 
-<p>Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент <code>&lt;object&gt;</code> вместе со встроенным элементом <code>&lt;embed&gt;</code> для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.</p>
+Достаточно ужасно, не так ли? Html-код, генерируемый Flash, имел склонность быть значительно хуже. Он использовал элемент `<object>` вместе со встроенным элементом `<embed>` для скрытия всего фундамента (взгляните на пример). Flash ранее использовался в качестве резерва для HTML5-видео (в случае его отсутствия), но со временем необходимость в этом отпала.
 
-<p>Давайте взглянем на пример <code>&lt;object&gt;</code> , встраивающего PDF в страницу (взгляните <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> и <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p>
+Давайте взглянем на пример `<object>` , встраивающего PDF в страницу (взгляните [live example](http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html) и [source code](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html)):
 
-<pre class="brush: html">&lt;object data="mypdf.pdf" type="application/pdf"
-        width="800" height="1200" typemustmatch&gt;
-  &lt;p&gt;You don't have a PDF plugin, but you can &lt;a href="mypdf.pdf"&gt;download the PDF file.&lt;/a&gt;&lt;/p&gt;
-&lt;/object&gt;</pre>
+```html
+<object data="mypdf.pdf" type="application/pdf"
+        width="800" height="1200" typemustmatch>
+  <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
+</object>
+```
 
-<p>PDF-файлы были необходимым средством достижения цели в качестве преобразования бумажной информации в цифровую, но, в то же время, они имеют множество проблем доступности и плохо читаемы на мелких экранах. В некоторых кругах они всё ещё пользуются популярностью, так что заметим, что вместо встраивания в страницу следует использовать ссылки (для скачивания или чтения на отдельной вкладке).</p>
+PDF-файлы были необходимым средством достижения цели в качестве преобразования бумажной информации в цифровую, но, в то же время, они имеют множество проблем доступности и плохо читаемы на мелких экранах. В некоторых кругах они всё ещё пользуются популярностью, так что заметим, что вместо встраивания в страницу следует использовать ссылки (для скачивания или чтения на отдельной вкладке).
 
-<h3 id="Дело_против_плагинов">Дело против плагинов</h3>
+### Дело против плагинов
 
-<p>Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.</p>
+Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player для просмотра онлайн-фильма? И потом постоянно возникали раздражающие предупреждения об обновлении Flash Player и Java Runtime Environment. С тех пор веб-технологии стали намного надёжнее. Почти всем сервисам пришло время прекратить доставлять контент с помощью плагинов и вместо этого использовать веб-технологии.
 
-<ul>
- <li><strong>Расширьте свою досягаемость для всех</strong>. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.</li>
- <li><strong>Немного передохните от лишних головных болей, связанных с общедоступностью Flash-плагинов и др.( <a href="http://webaim.org/techniques/flash/">extra accessibility headaches </a>).</strong></li>
- <li><strong>Избегайте лишних проблем безопасности. </strong>Ни для кого не секрет,что Adobe Flash является небезопасным, даже после многочисленных патчей. В 2015, Алекс Стэймос (бывший главный сотрудник по вопросам информационной безопасности компании Facebook) даже делал запрос, чтобы Adobe прекратил поддержку Flash.</li>
-</ul>
+- **Расширьте свою досягаемость для всех**. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты ваших конкурентов, чем установить плагин.
+- **Немного передохните от лишних головных болей, связанных с общедоступностью Flash-плагинов и др.( [extra accessibility headaches ](http://webaim.org/techniques/flash/)).**
+- **Избегайте лишних проблем безопасности.** Ни для кого не секрет,что Adobe Flash является небезопасным, даже после многочисленных патчей. В 2015, Алекс Стэймос (бывший главный сотрудник по вопросам информационной безопасности компании Facebook) даже делал запрос, чтобы Adobe прекратил поддержку Flash.
 
-<p>Итак, что нужно делать? Если вам нужна интерактивность, HTML и {{glossary ("JavaScript")}} могут легко выполнить задание для вас без необходимости использования апплетов Java или устаревшей технологии ActiveX / BHO. Вместо того, чтобы полагаться на Adobe Flash, вы можете использовать видео HTML5 для своих медиа-потребностей, SVG для векторной графики и Canvas для сложных изображений и анимаций. Питер Элст уже писал несколько лет назад, что Adobe Flash редко является подходящим инструментом для работы, за исключением специализированных игр и бизнес-приложений. Что касается ActiveX, браузер Microsoft {{glossary ("Microsoft Edge", "Edge")}} больше не поддерживает его.</p>
+Итак, что нужно делать? Если вам нужна интерактивность, HTML и {{glossary ("JavaScript")}} могут легко выполнить задание для вас без необходимости использования апплетов Java или устаревшей технологии ActiveX / BHO. Вместо того, чтобы полагаться на Adobe Flash, вы можете использовать видео HTML5 для своих медиа-потребностей, SVG для векторной графики и Canvas для сложных изображений и анимаций. Питер Элст уже писал несколько лет назад, что Adobe Flash редко является подходящим инструментом для работы, за исключением специализированных игр и бизнес-приложений. Что касается ActiveX, браузер Microsoft {{glossary ("Microsoft Edge", "Edge")}} больше не поддерживает его.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но всё же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.</p>
+Тема встраивания другого контента в веб-документы поначалу может показаться очень сложной для понимания, поэтому в этой статье мы попытались представить её простым, знакомым способом, который сразу же станет актуальным, но всё же намекает на некоторые из более сложных функций вовлечённых технологий. Начнём с того, что вы вряд ли будете использовать большое количество встраивании стороннего контента, помимо встроенных карт и видео на своих страницах.
 
-<p>Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.</p>
+Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например {{htmlelement ("video")}}, {{htmlelement ("audio")}} и {{htmlelement ("img")}}, но есть и другие. Например, {{htmlelement ("canvas")}} для 2D-и 3D-графики, сгенерированной JavaScript, и {{SVGElement ("svg")}} для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.
 
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p>
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
-</ul>
+- [Images in HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Video and audio content](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [From \<object> to \<iframe> — other embedding technologies](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Adding vector graphics to the Web](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Responsive images](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Mozilla splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
index b3cbc024873564..5462a9f40726ae 100644
--- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.md
@@ -3,240 +3,215 @@ title: Адаптивные изображения
 slug: Learn/HTML/Multimedia_and_embedding/Responsive_images
 translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему [CSS](/ru/docs/Learn/CSS).
 
-<div>
-<p class="summary">В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые  имеются в HTML для их реализации. Responsive images - только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему <a href="/en-US/docs/Learn/CSS">CSS</a>.</p>
-</div>
+| Требования: | Предполагается, что вы уже знакомы с [основами HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) и умеете [добавлять статичные изображения на веб-страницу](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Узнать, как использовать такие элементы, как {{htmlattrxref("srcset", "img")}} и {{htmlelement("picture")}} чтобы обеспечить работу гибких изображения на веб-сайтах.                              |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Предполагается, что вы уже знакомы с  <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">основами HTML</a> и умеете <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">добавлять статичные изображения на веб-страницу</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Узнать, как использовать такие элементы, как {{htmlattrxref("srcset", "img")}} и {{htmlelement("picture")}} чтобы обеспечить работу гибких изображения на веб-сайтах.</td>
-  </tr>
- </tbody>
-</table>
+## Почему адаптивные изображения?
 
-<h2 id="Почему_адаптивные_изображения">Почему адаптивные изображения?</h2>
+Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:
 
-<p>Какую проблему мы пытаемся решить адаптивными изображениями? Давайте рассмотрим типичный сценарий. Обычный веб-сайт может содержать изображение в заголовке, для улучшения визуального восприятия пользователем, а также несколько изображений в контенте под ним. Вы, вероятно, захотите, чтобы изображение в заголовке занимало всю ширину окна, а изображения в контенте размещались где-то внутри колонки с контентом. Давайте посмотрим на следующий простой пример:</p>
+![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](https://mdn.mozillademos.org/files/12940/picture-element-wide.png)
 
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p>
+Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть [посмотреть демо-пример](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html) и найти [исходный код](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html) на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:
 
-<p>Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">посмотреть демо-пример</a> и найти <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">исходный код</a> на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:</p>
+- Содержимому тега `main` задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
+- Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
+- Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.
 
-<ul>
- <li>Содержимому тега <code>main</code> задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.</li>
- <li>Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.</li>
- <li>Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.</li>
-</ul>
+Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!
 
-<p>Всё хорошо, однако проблемы начинаются, когда вы просматриваете сайт на устройстве с небольшим экраном – шапка внизу выглядит нормально, но теперь она занимает значительную высоту экрана; первое изображение в контенте напротив, выглядит ужасно – при таком размере едва можно рассмотреть людей!</p>
+![Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it.](https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png)
 
-<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p>
+Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как **art direction problem**.
 
-<p>Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как <strong>art direction problem</strong>.</p>
+Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется **resolution switching problem** — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали [векторную графику](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web), растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.
 
-<p>Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется <strong>resolution switching problem</strong> — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторную графику</a>, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.</p>
+Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.
 
-<p>Сложность в том, что для некоторых устройств с большим разрешением экрана нужны изображения большего чем ожидается размера, чтобы чётче отображалось. По сути это всё одна задача в разных условиях.</p>
+Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше.
 
-<p>Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. </p>
+Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. _Технологии отзывчивых изображений_ были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (_resolution switching_), или разные изображения с отдельными областями основного изображения (_art direction_).
 
-<p>Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. <em>Технологии отзывчивых изображений</em> были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (<em>resolution switching</em>), или разные изображения с отдельными областями основного изображения (<em>art direction</em>).</p>
+> **Примечание:** Новые возможности обсуждаются в статье — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).
 
-<div class="note">
-<p><strong>Примечание</strong>: Новые возможности обсуждаются в статье — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).</p>
-</div>
+## Как сделать изображения отзывчивыми?
 
-<h2 id="Как_сделать_изображения_отзывчивыми">Как сделать изображения отзывчивыми?</h2>
+В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML {{htmlelement("img")}}. Как показано на примере выше - изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. [CSS больше подходит для адаптивного дизайна](http://blog.cloudfour.com/responsive-images-101-part-8-css-images/) чем HTML, об этом поговорим в следующем модуле о CSS.
 
-<p>В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML {{htmlelement("img")}}. Как показано на примере выше - изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS больше подходит для адаптивного дизайна</a> чем HTML, об этом поговорим в следующем модуле о CSS.</p>
+### Разные разрешения: Разные размеры
 
-<h3 id="Разные_разрешения_Разные_размеры">Разные разрешения: Разные размеры</h3>
+Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один путь к файлу:
 
-<p>Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент {{htmlelement("img")}} обычно позволяет указать только один  путь к файлу:</p>
+```html
+<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+```
 
-<pre class="brush: html">&lt;img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) (также смотри [источник кода](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html)).
 
-<p>Однако есть два новых атрибута — {{htmlattrxref("srcset", "img")}} and {{htmlattrxref("sizes", "img")}} — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> (также смотри <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">источник кода</a>).</p>
-
-<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg 320w,
+```html
+<img srcset="elva-fairy-320w.jpg 320w,
              elva-fairy-480w.jpg 480w,
              elva-fairy-800w.jpg 800w"
      sizes="(max-width: 320px) 280px,
             (max-width: 480px) 440px,
             800px"
-     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"&gt;</pre>
+     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">
+```
+
+Атрибуты `srcset` и `sizes` кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:
+
+**`srcset`** включает названия изображений, среди которых браузер выберет нужное и их размеры.\*\* \*\*Перед каждой запятой части значения в таком порядке:
 
-<p>Атрибуты <code>srcset</code> и <code>sizes</code> кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:</p>
+1.  Название изображения (`elva-fairy-480w.jpg`.)
+2.  Пробел.
+3.  **Актуальная ширина картинки** **в пикселах** (`480w`) — заметьте, что здесь используется `w` вместо `px`, как вы могли ожидать. Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать&#x20;
 
-<p><strong><code>srcset</code></strong> включает названия изображений, среди которых браузер выберет нужное и их размеры.<strong> </strong>Перед каждой запятой части значения в таком порядке:</p>
+    <kbd>Cmd</kbd>
 
-<ol>
- <li>Название изображения (<code>elva-fairy-480w.jpg</code>.)</li>
- <li>Пробел.</li>
- <li><strong>Актуальная ширина картинки</strong> <strong>в пикселах </strong>(<code>480w</code>) — заметьте, что здесь используется <code>w</code> вместо <code>px</code>, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  <kbd>Cmd</kbd> + <kbd>I</kbd> , чтобы вывести информацию на экран).</li>
-</ol>
+    &#x20;\+&#x20;
 
-<p><strong><code>sizes</code></strong> определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:</p>
+    <kbd>I</kbd>
 
-<ol>
- <li><strong>Медиа-условие</strong> (<code>(max-width:480px)</code>) — вы можете больше узнать об этом в <a href="/en-US/docs/Learn/CSS">CSS topic</a>, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".</li>
- <li>Пробел.</li>
- <li><strong>Ширину слота</strong> (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (<code>440px</code>)</li>
-</ol>
+    &#x20;, чтобы вывести информацию на экран).
 
-<div class="note">
-<p><strong>Note</strong>: Для ширины слота, вы можете указать абсолютные значения (<code>px</code>, <code>em</code>) или значение относительно окна просмотра (<code>vw</code>), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.</p>
-</div>
+**`sizes`** определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:
 
-<p>Итак, с такими атрибутами, браузер сделает следующее:</p>
+1.  **Медиа-условие** (`(max-width:480px)`) — вы можете больше узнать об этом в [CSS topic](/ru/docs/Learn/CSS), но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".
+2.  Пробел.
+3.  **Ширину слота** (в оригинале "width of the slot"), занимаемую изображением, когда медиа-условие истинно. (`440px`)
 
-<ol>
- <li>Посмотрит на ширину экрана устройства.</li>
- <li>Попытается определить подходящее медиа-условие из списка в атрибуте <code>sizes</code>.</li>
- <li>Посмотрит на размер слота к этому медиавыражению.</li>
- <li>Загрузит изображение из списка из <code>srcset</code>, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. </li>
-</ol>
+> **Примечание:** Для ширины слота, вы можете указать абсолютные значения (`px`, `em`) или значение относительно окна просмотра (`vw`), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.
 
-<p>И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие <code>(max-width: 480px)</code> будет истинно, следовательно, будет выбран слот <code>440px</code>, тогда будет загружено изображение <code>elva-fairy-480w.jpg</code>, так как свойство ширины (<code>480w</code>) наиболее близко значение <code>440px</code>. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.</p>
+Итак, с такими атрибутами, браузер сделает следующее:
 
-<p>Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.</p>
+1.  Посмотрит на ширину экрана устройства.
+2.  Попытается определить подходящее медиа-условие из списка в атрибуте `sizes`.
+3.  Посмотрит на размер слота к этому медиавыражению.
+4.  Загрузит изображение из списка из `srcset`, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота.
 
-<div class="note">
-<p><strong>Note</strong>: В описании элемента {{htmlelement("head")}} вы найдёте строку <code>&lt;meta name="viewport" content="width=device-width"&gt;</code>: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)</p>
-</div>
+И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие `(max-width: 480px)` будет истинно, следовательно, будет выбран слот `440px`, тогда будет загружено изображение `elva-fairy-480w.jpg`, так как свойство ширины (`480w`) наиболее близко значение `440px`. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.
 
-<h3 id="Полезные_инструменты_разработчика">Полезные инструменты разработчика</h3>
+Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута {{htmlattrxref("src", "img")}}.
 
-<p>Есть несколько полезных браузерных <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструментов разработчика</a>, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (<code>not-responsive.html</code>), затем открывал <a href="/en-US/docs/Tools/Responsive_Design_Mode">Responsive Design View</a> (<em>Tools &gt; Web Developer &gt; Responsive Design View</em>), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.</p>
+> **Примечание:** В описании элемента {{htmlelement("head")}} вы найдёте строку `<meta name="viewport" content="width=device-width">`: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)
 
-<p>Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector,</a> кликал по элементу {{htmlelement("img")}} в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения</p>
+### Полезные инструменты разработчика
 
-<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p>
+Есть несколько полезных браузерных [инструментов разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (`not-responsive.html`), затем открывал [Responsive Design View](/ru/docs/Tools/Responsive_Design_Mode) (_Tools > Web Developer > Responsive Design View_), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.
 
-<p>А дальше вы можете проверить работает ли <code>srcset</code> если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (<em>Tools &gt; Web Developer &gt; Network</em>) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.</p>
+Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к [DOM Inspector,](/ru/docs/Tools/Page_Inspector) кликал по элементу {{htmlelement("img")}} в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения
 
-<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p>
+![A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels.](https://mdn.mozillademos.org/files/12932/box-model-devtools.png)
 
-<h3 id="Переключения_разрешений_Одинаковый_размер_разные_разрешения">Переключения разрешений: Одинаковый размер, разные разрешения</h3>
+А дальше вы можете проверить работает ли `srcset` если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (_Tools > Web Developer > Network_) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.
 
-<p>Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя <code>srcset</code> с x-дескриптором и без <code>sizes</code> — более простой синтаксис! Найти пример как это выглядит можно здесь <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html</a> (смотрите также <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">the source code</a>):</p>
+![a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images](https://mdn.mozillademos.org/files/12934/network-devtools.png)
 
-<pre class="brush: html">&lt;img srcset="elva-fairy-320w.jpg,
+### Переключения разрешений: Одинаковый размер, разные разрешения
+
+Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя `srcset` с x-дескриптором и без `sizes` — более простой синтаксис! Найти пример как это выглядит можно здесь [srcset-resolutions.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html) (смотрите также [the source code](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html)):
+
+```html
+<img srcset="elva-fairy-320w.jpg,
              elva-fairy-480w.jpg 1.5x,
              elva-fairy-640w.jpg 2x"
-     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"&gt;
-</pre>
+     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">
+```
 
-<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):</p>
+![A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image](https://mdn.mozillademos.org/files/12942/resolution-example.png)В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):
 
-<pre class="brush: css">img {
+```css
+img {
   width: 320px;
-}</pre>
-
-<p>В этом случае, нет необходимости в <code>sizes</code> — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с <code>srcset</code>. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение <code>elva-fairy-320w.jpg</code> (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение <code>elva-fairy-640w.jpg</code>. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.</p>
+}
+```
 
-<h3 id="Художественное_оформление">Художественное оформление</h3>
+В этом случае, нет необходимости в `sizes` — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с `srcset`. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение `elva-fairy-320w.jpg` (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение `elva-fairy-640w.jpg`. 640px изображение имеет размер 93KB, тогда так 320px изображение - всего 39KB.
 
-<p>Подводя итоги, <strong>проблема художественного оформления</strong> заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент {{htmlelement("picture")}} позволяет нам применять именно такое решение.</p>
+### Художественное оформление
 
-<p>Возвращаясь к нашему оригинальному примеру <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, мы имеем изображение которое очень нуждается в художественном оформлении:</p>
+Подводя итоги, **проблема художественного оформления** заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент {{htmlelement("picture")}} позволяет нам применять именно такое решение.
 
-<pre class="brush: html">&lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;</pre>
+Возвращаясь к нашему оригинальному примеру [not-responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html), мы имеем изображение которое очень нуждается в художественном оформлении:
 
-<p>Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code>&lt;video&gt;</code> и <code>&lt;audio&gt;</code></a>, элемент <code>&lt;picture&gt;</code> это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> выглядит так:</p>
+```html
+<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+```
 
-<pre class="brush: html">&lt;picture&gt;
-  &lt;source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"&gt;
-  &lt;source media="(min-width: 800px)" srcset="elva-800w.jpg"&gt;
-  &lt;img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"&gt;
-&lt;/picture&gt;
-</pre>
+Давайте исправим это при помощи элемента {{htmlelement("picture")}}! Так же как [`<video>` и `<audio>`](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content), элемент `<picture>` это обёртка содержащая некоторое количество элементов {{htmlelement("source")}} которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента {{htmlelement("img")}}. Код [responsive.html](http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html) выглядит так:
 
-<ul>
- <li>Элемент <code>&lt;source&gt;</code> принимает атрибут <code>media</code>, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента <code>&lt;source&gt;</code>. Если ширина составит 800px и более — второго.</li>
- <li>Атрибут <code>srcset</code> содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <code>&lt;img&gt;</code> выше, <code>&lt;source&gt;</code> может принимать атрибуты <code>srcset</code> и <code>sizes</code> с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента <code>&lt;picture&gt;</code>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.</li>
- <li>Вы всегда должны использовать элемент <code>&lt;img&gt;</code>, с <code>src</code> и <code>alt</code>, прямо перед <code>&lt;/picture&gt;</code>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <code>&lt;source&gt;)</code> или браузер не поддерживает элемент <code>&lt;picture&gt;</code>.</li>
-</ul>
+```html
+<picture>
+  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
+  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
+  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
+</picture>
+```
 
-<p>Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:</p>
+- Элемент `<source>` принимает атрибут `media`, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport'a составит 799px или меньше, будет выведено изображение первого элемента `<source>`. Если ширина составит 800px и более — второго.
+- Атрибут `srcset` содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с `<img>` выше, `<source>` может принимать атрибуты `srcset` и `sizes` с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента `<picture>`, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
+- Вы всегда должны использовать элемент `<img>`, с `src` и `alt`, прямо перед `</picture>`, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент `<source>)` или браузер не поддерживает элемент `<picture>`.
 
-<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p>
+Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:
 
-<div class="note">
-<p><strong>Примечание</strong>: вам следует использовать атрибут <code>media</code> только при художественном оформлении; когда вы используете <code>media</code>, не применяйте медиа-условия с атрибутом <code>sizes</code>.</p>
-</div>
+![Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center.](https://mdn.mozillademos.org/files/12940/picture-element-wide.png)![Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen](/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images/picture-element-narrow.png)
 
-<h3 id="Почему_это_нельзя_сделать_посредством_CSS_и_JavaScript">Почему это нельзя сделать посредством CSS и JavaScript?</h3>
+> **Примечание:** вам следует использовать атрибут `media` только при художественном оформлении; когда вы используете `media`, не применяйте медиа-условия с атрибутом `sizes`.
 
-<p>Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как <code>srcset</code>. Например, вы не могли бы загрузить элемент <code>&lt;img&gt;</code>, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.</p>
+### Почему это нельзя сделать посредством CSS и JavaScript?
 
-<ul>
-</ul>
+Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как `srcset`. Например, вы не могли бы загрузить элемент `<img>`, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.
 
-<h3 id="Смело_используйте_современные_форматы_изображений">Смело используйте современные форматы изображений</h3>
+### Смело используйте современные форматы изображений
 
-<p>Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.</p>
+Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.
 
-<p><code>&lt;picture&gt;</code> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута <code>type</code>, браузер сразу определит файлы такого типа как неподдерживаемые:</p>
+`<picture>` позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута `type`, браузер сразу определит файлы такого типа как неподдерживаемые:
 
-<pre class="brush: html">&lt;picture&gt;
-  &lt;source type="image/svg+xml" srcset="pyramid.svg"&gt;
-  &lt;source type="image/webp" srcset="pyramid.webp"&gt;
-  &lt;img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"&gt;
-&lt;/picture&gt;
-</pre>
+```html
+<picture>
+  <source type="image/svg+xml" srcset="pyramid.svg">
+  <source type="image/webp" srcset="pyramid.webp">
+  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
+</picture>
+```
 
-<ul>
- <li>Не используйте атрибут <code>media</code>, если вам не нужно художественное оформление.</li>
- <li>В элементе <code>&lt;source&gt;</code> можно указывать путь к изображениям только того типа, который указан в <code>type</code>.</li>
- <li>Как и в предыдущих примерах, при необходимости вы можете использовать <code>srcset</code> и <code>sizes</code>.</li>
-</ul>
+- Не используйте атрибут `media`, если вам не нужно художественное оформление.
+- В элементе `<source>` можно указывать путь к изображениям только того типа, который указан в `type`.
+- Как и в предыдущих примерах, при необходимости вы можете использовать `srcset` и `sizes`.
 
-<h2 id="Активное_обучение_реализация_собственных_адаптивных_изображений">Активное обучение: реализация собственных адаптивных изображений</h2>
+## Активное обучение: реализация собственных адаптивных изображений
 
-<p>Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя <code>&lt;picture&gt;</code> и <code>srcset</code>.</p>
+Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя `<picture>` и `srcset`.
 
-<ol>
- <li>Напишите простую HTML-разметку.</li>
- <li>Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).</li>
- <li>Используйте элемент <code>&lt;picture&gt; </code>для работы с художественно оформленной картинкой.</li>
- <li>Обозначьте несколько разных размеров для этой картинки.</li>
- <li>Используйте <code>srcset</code>/<code>size</code> для описания переключения при смене размеров вьюпорта</li>
-</ol>
+1.  Напишите простую HTML-разметку.
+2.  Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
+3.  Используйте элемент `<picture> `для работы с художественно оформленной картинкой.
+4.  Обозначьте несколько разных размеров для этой картинки.
+5.  Используйте `srcset`/`size` для описания переключения при смене размеров вьюпорта
 
-<div class="note">
-<p><strong>Примечание</strong>: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.</p>
-</div>
+> **Примечание:** Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Это все для отзывчивых изображений - мы надеемся, вам понравилось играть с этими новыми технологиями. Напомним, что мы здесь обсуждали две различные проблемы:</p>
+Это все для отзывчивых изображений - мы надеемся, вам понравилось играть с этими новыми технологиями. Напомним, что мы здесь обсуждали две различные проблемы:
 
-<ul>
- <li><strong>Художественное оформление</strong>: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов - например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью {{htmlelement("picture")}} элемента.</li>
- <li><strong>Переключение разрешений</strong>: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">векторной графики</a> (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.</li>
-</ul>
+- **Художественное оформление**: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов - например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью {{htmlelement("picture")}} элемента.
+- **Переключение разрешений**: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью [векторной графики](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web) (SVG изображений), и {{htmlattrxref("srcset", "img")}} и {{htmlattrxref("sizes", "img")}} атрибуты.
 
-<p>Это так же подводит нас к окончанию целого модуля <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">"Мультимедиа и встраивание"</a>! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!</p>
+Это так же подводит нас к окончанию целого модуля ["Мультимедиа и встраивание"](/ru/docs/Learn/HTML/Multimedia_and_embedding)! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше - это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!
 
-<h2 id="Посмотрите_так_же">Посмотрите так же</h2>
+## Посмотрите так же
 
-<ul>
- <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Отличное введение в отзывчивые изображения от Джейсона Григсби</a></li>
- <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Отзывчивые изображения: Если вы только меняете разрешения используйте srcset</a> — включает больше объяснений того,как браузер выбирает,какое изображение использовать</li>
- <li>{{htmlelement("img")}}</li>
- <li>{{htmlelement("picture")}}</li>
- <li>{{htmlelement("source")}}</li>
-</ul>
+- [Отличное введение в отзывчивые изображения от Джейсона Григсби](http://blog.cloudfour.com/responsive-images-101-definitions)
+- [Отзывчивые изображения: Если вы только меняете разрешения используйте srcset](https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/) — включает больше объяснений того,как браузер выбирает,какое изображение использовать
+- {{htmlelement("img")}}
+- {{htmlelement("picture")}}
+- {{htmlelement("source")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div>
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}
diff --git a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
index 2df3ace7b516db..e85d5febd7da04 100644
--- a/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
+++ b/files/ru/learn/html/multimedia_and_embedding/video_and_audio_content/index.md
@@ -3,301 +3,262 @@ title: Видео и аудио контент
 slug: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div>
+Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.
 
-<p class="summary">Теперь, когда мы спокойно добавляем простые изображения на веб-страницу, сделаем следующий шаг — начнём добавлять видео и аудиоплееры в ваши HTML-документы! В этой статье вы увидите, как это делать с элементами {{htmlelement("video")}} и {{htmlelement("audio")}} ; а в завершение посмотрите, как добавить титры и субтитры к вашим видео.</p>
+| Предпосылки: | Базовая компьютерная грамотность, [установка базового ПО](/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F), базовые знания [работа с файлами](https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files), знакомство с основами HTML (как описано в [Начало работы с HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Getting_started)) и [Изображения в HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML). |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web/%D0%A3%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0_%D0%B1%D0%B0%D0%B7%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE_%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE_%D0%BE%D0%B1%D0%B5%D1%81%D0%BF%D0%B5%D1%87%D0%B5%D0%BD%D0%B8%D1%8F">установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">работа с файлами</a>, знакомство с основами HTML (как описано в <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Начало работы с HTML</a>) и <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Изображения в HTML</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, как вставлять видео и аудиоконтент в веб-страницу, а также добавлять титры или субтитры к видео. </td>
-  </tr>
- </tbody>
-</table>
+## Аудио и видео в Интернете
 
-<h2 id="Аудио_и_видео_в_Интернете">Аудио и видео в Интернете</h2>
+Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.
 
-<p>Веб-разработчики хотели использовать видео и аудио в Интернете в течение длительного времени, начиная с начала 2000-х годов, когда пропускная способность сети стала достаточной, чтобы поддерживать любое видео (видеофайлы намного больше, чем текст, или даже изображения). На раннем этапе базовые веб-технологии, такие как HTML, не имели возможности размещения на сайтах видео и аудио контента, поэтому запатентованные технологии (или плагины), такие как Flash (а затем и Silverlight), стали популярными для обработки такого контента. Эти технологии работали нормально, но у них было много недостатков, в числе которых плохая поддержка возможностей HTML и CSS, проблемы безопасности и проблемы доступности.</p>
+Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и {{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.
 
-<p>Собственное решение устранило бы большую часть этой проблемы, если бы оно было реализовано правильно. К счастью, несколько лет спустя в спецификации {{glossary ("HTML5")}} были добавлены такие функции, с элементами {{htmlelement("video")}} и {{htmlelement("audio")}}, и некоторые новые {{glossary("JavaScript")}} {{glossary("API", "API")}} для их управления. Мы не будем рассматривать JavaScript здесь - только необходимые основы, которые могут быть достигнуты с помощью HTML.</p>
+Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.
 
-<p>Мы не будем учить вас, как создавать аудио и видеофайлы - для этого требуется совершенно другой набор навыков. Мы предоставили вам образцы аудио и видеофайлов и пример кода для вашего собственного эксперимента, на случай, если у вас нет под рукой собственных.</p>
+> **Примечание:** Прежде всего, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде [YouTube](https://www.youtube.com/), [Dailymotion](http://www.dailymotion.com) и [Vimeo](https://vimeo.com/), а также онлайн аудио-провайдеров вроде [Soundcloud](https://soundcloud.com/). Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.
 
-<div class="note">
-<p><strong>Примечание</strong>: Прежде всего, вы также должны знать, что есть немало {{glossary("OVP","OVPs")}} (провайдеров онлайн-видео) вроде <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a> и <a href="https://vimeo.com/">Vimeo</a>, а также онлайн аудио-провайдеров вроде <a href="https://soundcloud.com/">Soundcloud</a>. Такие компании предлагают удобный и простой способ размещения и потребления видео, поэтому вам не нужно беспокоиться об огромном потреблении трафика. OVP даже обычно предлагают готовый код для встраивания видео и аудио в ваши веб-страницы. Если вы пойдёте по этому пути, то сможете избежать некоторых трудностей, которые мы обсуждаем в этой статье.</p>
-</div>
+### Элемент \<video>
 
-<h3 id="Элемент_&lt;video>">Элемент &lt;video&gt;</h3>
+Элемент {{htmlelement("video")}} позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:
 
-<p>Элемент {{htmlelement("video")}}  позволяет вам вставлять видео достаточно легко. Очень простой пример выглядит так:</p>
+```html
+<video src="rabbit320.webm" controls>
+  <p>Ваш браузер не поддерживает HTML5 видео. Используйте <a href="rabbit320.webm">ссылку на видео</a> для доступа.</p>
+</video>
+```
 
-<pre class="brush: html">&lt;video src="rabbit320.webm" controls&gt;
-  &lt;p&gt;Ваш браузер не поддерживает HTML5 видео. Используйте &lt;a href="rabbit320.webm"&gt;ссылку на видео&lt;/a&gt; для доступа.&lt;/p&gt;
-&lt;/video&gt;</pre>
+Описание параметров:
 
-<p>Описание параметров:</p>
+- {{htmlattrxref("src","video")}}
+  - : Точно так же, как для элемента {{htmlelement("img")}} , атрибут `src` (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.
+- {{htmlattrxref("controls","video")}}
+  - : Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны [эпилепсией](https://ru.wikipedia.org/wiki/%D0%AD%D0%BF%D0%B8%D0%BB%D0%B5%D0%BF%D1%81%D0%B8%D1%8F)). Вы должны либо использовать атрибут `controls`, чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие [JavaScript API](/ru/docs/Web/API/HTMLMediaElement). Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.
+- Параграф внутри тегов `<video>`
+  - : Это называют **резервный контент** — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент `<video>`, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.
 
-<dl>
- <dt>{{htmlattrxref("src","video")}}</dt>
- <dd>Точно так же, как для элемента {{htmlelement("img")}} , атрибут <code>src</code> (source — источник) содержит путь к видео, которое вы хотите внедрить. Он работает точно так же.</dd>
- <dt>{{htmlattrxref("controls","video")}}</dt>
- <dd>Пользователи должны иметь возможность контролировать воспроизведение видео и аудио (особенно это важно для людей, которые больны  <a href="https://ru.wikipedia.org/wiki/%D0%AD%D0%BF%D0%B8%D0%BB%D0%B5%D0%BF%D1%81%D0%B8%D1%8F">эпилепсией</a>). Вы должны либо использовать атрибут <code>controls</code>,  чтобы использовать встроенный в браузер интерфейс управления или создать собственный интерфейс, используя соответствующие <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. Как минимум, интерфейс должен включать способ запуска и остановки медиа-носителя и регулировки громкости.</dd>
- <dt>Параграф внутри тегов <code>&lt;video&gt;</code></dt>
- <dd>Это называют <strong>резервный контент</strong> — он будет отображаться, если браузер, показывающий страницу, не поддерживает элемент <code>&lt;video&gt;</code>, позволяя нам обеспечить поддержку для старых версий браузеров. Это может быть все, что вы захотите; в нашем примере мы предоставили прямую ссылку на видеофайл, поэтому пользователь может хотя бы получить к нему доступ, независимо от того, какой браузер он используют.</dd>
-</dl>
+Встроенное видео будет выглядеть примерно так:
 
-<p>Встроенное видео будет выглядеть примерно так:</p>
+![A simple video player showing a video of a small white rabbit](https://mdn.mozillademos.org/files/12794/simple-video.png)
 
-<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p>
+Вы можете [посмотреть живой пример](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html) (взгляните также на [исходный код](https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html)).
 
-<p>Вы можете <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">посмотреть живой пример</a> (взгляните также на <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">исходный код</a>).</p>
+### Поддержка нескольких форматов
 
-<h3 id="Поддержка_нескольких_форматов">Поддержка нескольких форматов</h3>
+Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!
 
-<p>Присутствует одна проблема с приведённым выше примером, которую вы, возможно, уже заметили, если пытались получить доступ к прямой ссылке выше с помощью браузера, такого как Safari или Internet Explorer. Видео не будет воспроизводиться!</p>
+Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются **форматами контейнеров**. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.
 
-<p>Давайте кратко рассмотрим терминологию. Форматы, такие как MP3, MP4 и WebM, называются <strong>форматами контейнеров</strong>. Они содержат различные части, которые составляют всю песню или видео — например, звуковую дорожку, видеодорожку (в случае видео) и метаданные для описания представленного носителя.</p>
+Например, файл WebM, содержащий фильм, имеет основную видеодорожку и одну дорожку с альтернативным ракурсом, плюс аудио для английского и испанского языков, в дополнение к аудио для дорожки с комментариями на английском языке. Также включены текстовые дорожки, содержащие закрытые субтитры для художественного фильма, испанские субтитры для фильма и английские субтитры для комментариев.
 
-<p>Например, файл WebM, содержащий фильм, имеет основную видеодорожку и одну дорожку с альтернативным ракурсом, плюс аудио для английского и испанского языков, в дополнение к аудио для дорожки с комментариями на английском языке. Также включены текстовые дорожки, содержащие закрытые субтитры для художественного фильма, испанские субтитры для фильма и английские субтитры для комментариев.</p>
+Аудио и видео треки также находятся в разных форматах, например:
 
-<p>Аудио и видео треки также находятся в разных форматах, например:</p>
+- Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.
+- Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.
+- Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.
 
-<ul>
- <li>Контейнер WebM обычно загружает звук Ogg Vorbis с видео VP8 / VP9. Поддерживается в основном в Firefox и Chrome.</li>
- <li>Контейнер MP4 часто включает аудио AAC или MP3 с видео H.264. Поддерживается в основном в Internet Explorer и Safari.</li>
- <li>Более старый контейнер Ogg имеет тенденцию идти с аудио Ogg Vorbis и видео Ogg Theora. Поддерживалось главным образом в Firefox и Chrome, но было вытеснено более качественным форматом WebM.</li>
-</ul>
+Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.
 
-<p>Есть несколько особых случаев. Например, для некоторых типов аудио данные кодека часто хранятся без контейнера или с упрощённым контейнером. Одним из таких примеров является кодек FLAC, который чаще всего хранится в файлах FLAC, которые представляют собой просто необработанные дорожки FLAC.</p>
+Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.
 
-<p>Ещё одна такая ситуация - всегда популярный файл MP3. «Файл MP3» на самом деле является звуковой дорожкой MPEG-1 Audio Layer III (MP3), хранящейся в контейнере MPEG или MPEG-2. Это особенно интересно, поскольку, хотя большинство браузеров не поддерживают использование мультимедиа MPEG в элементах {{HTMLElement ("video")}} и {{HTMLElement ("audio")}}, они могут поддерживать MP3 из-за его популярности.</p>
+Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.
 
-<p>Аудиоплеер обычно воспроизводит аудиодорожку напрямую, например файл MP3 или Ogg. Для этого не нужны контейнеры.</p>
+#### Поддержка медиафайлов в браузерах
 
-<h4 id="Поддержка_медиафайлов_в_браузерах">Поддержка медиафайлов в браузерах</h4>
+Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.
 
-<p>Вышеупомянутые форматы существуют для сжатия видео и аудио в управляемые файлы (необработанные видео и аудио очень большие). Браузеры содержат разные {{Glossary("Codec","кодеки")}}, вроде Vorbis или H.264, которые используются для преобразования сжатого звука и видео в бинарные данные и обратно. Каждый кодек имеет свои преимущества и недостатки, и каждый контейнер может также предлагать свои собственные положительные и отрицательные особенности, влияющие на ваше решение о том, какой из них использовать. Как указано выше, браузеры, к сожалению, не поддерживают одни и те же кодеки, поэтому вам придётся предоставить несколько файлов для каждого медиа-продукта. Если вам не хватает правильного кодека для декодирования контента, он просто не сможет воспроизводиться.</p>
+> **Примечание:** Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года, так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.
 
-<div class="note">
-<p><strong>Примечание:</strong> Возможно, вам интересно, как сложилась такая ситуация. MP3 (для аудио) и MP4/H.264 (для видео) широко поддерживаются и имеют высокое качество. В то же время, они защищены патентами — американские патенты охватывают MP3 по крайней мере до 2017 года и H.264 самое меньшее до 2027 года,  так что браузеры, которые не являются держателями этих патентов, должны платить огромные суммы денег для поддержки этих форматов. Кроме того, многие люди избегают несвободного программного обеспечения в принципе, предпочитая открытые форматы. Вот почему мы должны предоставить несколько форматов для разных браузеров.</p>
-</div>
+Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.
 
-<p>Все становится немного сложнее, потому что каждый браузер не только поддерживает свой набор форматов файлов-контейнеров, но и каждый из них поддерживает свой выбор кодеков. Чтобы максимизировать вероятность того, что ваш веб-сайт или приложение будет работать в браузере пользователя, вам может потребоваться предоставить каждый медиафайл, который вы используете, в нескольких форматах. Если ваш сайт и браузер пользователя не используют общий медиаформат, ваши медиа просто не будут воспроизводиться.</p>
+Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите [выбор подходящего контейнера](/ru/docs/Web/Media/Formats/Containers#Choosing_the_right_container) для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите [выбор видеокодека](/ru/docs/Web/Media/Formats/Video_codecs#Выбор_видеокодека) и [выбор аудиокодека](/ru/docs/Web/Media/Formats/Audio_codecs) для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.
 
-<p>Из-за сложности обеспечения возможности просмотра мультимедийных файлов вашего приложения в любой комбинации браузеров, платформ и устройств, которые вы хотите использовать, выбор наилучшего сочетания кодеков и контейнера может оказаться сложной задачей. Смотрите <a href="/en-US/docs/Web/Media/Formats/Containers#Choosing_the_right_container">выбор подходящего контейнера</a> для получения помощи по выбору формата файла контейнера, наиболее подходящего для ваших нужд; аналогичным образом смотрите <a href="/en-US/docs/Web/Media/Formats/Video_codecs#Выбор_видеокодека">выбор видеокодека</a> и <a href="/en-US/docs/Web/Media/Formats/Audio_codecs">выбор аудиокодека</a> для помощи в выборе первых медиакодеков, которые будут использоваться для вашего контента и вашей целевой аудитории.</p>
+Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.
 
-<p>Ещё одна вещь, о которой следует помнить: мобильные браузеры могут поддерживать дополнительные форматы, не поддерживаемые их настольными эквивалентами, точно так же, как они могут не поддерживать все те же форматы, что и настольная версия. Вдобавок ко всему, как настольные, так и мобильные браузеры могут быть спроектированы так, чтобы разгрузить обработку воспроизведения мультимедиа (либо для всех мультимедиа, либо только для определённых типов, которые он не может обрабатывать внутренне). Это означает, что поддержка мультимедиа частично зависит от того, какое программное обеспечение установил пользователь.</p>
+Так как мы это сделаем? Взгляните на следующий [обновлённый пример](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html) (и попробуйте [живой пример](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html)):
 
-<p>Так как мы это сделаем? Взгляните на следующий <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">обновлённый пример</a> (и попробуйте <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">живой пример</a>):</p>
+```html
+<video controls>
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Ваш браузер не поддерживает HTML5 видео. Вот <a href="rabbit320.mp4">ссылка на видео</a> взамен.</p>
+</video>
+```
 
-<pre class="brush: html">&lt;video controls&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Ваш браузер не поддерживает HTML5 видео. Вот &lt;a href="rabbit320.mp4"&gt;ссылка на видео&lt;/a&gt; взамен.&lt;/p&gt;
-&lt;/video&gt;</pre>
+Здесь мы изъяли атрибут `src` из нашего тега `<video>`, и вместо этого включали отдельные элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам `<source>` и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.
 
-<p>Здесь мы изъяли атрибут <code>src</code>  из нашего тега <code>&lt;video&gt;</code>, и вместо этого включали отдельные  элементы {{htmlelement("source")}}, каждый из которых ссылается на собственный источник. В этом случае браузер пройдётся по элементам <code>&lt;source&gt;</code> и начнёт воспроизводить первый из них, который имеет поддерживаемый кодек. Включение источников WebM и MP4 должно быть достаточно для воспроизведения вашего видео на большинстве платформ и браузеров в наши дни.</p>
+Каждый элемент `<source>` также имеет атрибут `type`. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если `type` не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.
 
-<p>Каждый элемент <code>&lt;source&gt;</code> также имеет атрибут <code>type</code>. Он не обязательный, но рекомендуется его включать — он содержит {{glossary("MIME type","MIME types")}} видеофайла, браузеры могут прочитать их и сразу же пропустить видео, которые они не понимают. Если <code>type</code> не включён, браузеры загружают и пытаются воспроизвести каждый файл до тех пор, пока не найдут тот, который будет работать, затрачивая больше времени и ресурсов.</p>
+> **Примечание:** Наша [статья о поддерживаемых медиаформатах](/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы) описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.
 
-<div class="note">
-<p><strong>Примечание</strong>: Наша <a href="/ru/docs/Web/HTML/Поддерживаемые_медиа_форматы">статья о поддерживаемых медиаформатах</a> описывает некоторые распространённые {{glossary("MIME type","MIME types")}}.</p>
-</div>
+### Другие параметры \<video>
 
-<h3 id="Другие_параметры_&lt;video>">Другие параметры &lt;video&gt;</h3>
+Есть ряд других параметры, которые вы можете включить в HTML5 элемент `video`. Взгляните на наш третий пример:
 
-<p>Есть ряд других параметры, которые вы можете включить в HTML5 элемент <code>video</code>. Взгляните на наш третий пример:</p>
-
-<pre class="brush: html">&lt;video controls width="400" height="400"
+```html
+<video controls width="400" height="400"
        autoplay loop muted
-       poster="poster.png"&gt;
-  &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-  &lt;source src="rabbit320.webm" type="video/webm"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/video&gt;
-</pre>
+       poster="poster.png">
+  <source src="rabbit320.mp4" type="video/mp4">
+  <source src="rabbit320.webm" type="video/webm">
+  <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+</video>
+```
+
+На выходе получим нечто, подобное этому:
 
-<p>На выходе получим нечто, подобное этому:</p>
+**![A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!](https://mdn.mozillademos.org/files/12796/extra-video-features.png)**Новые параметры:
 
-<p><strong><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;"></strong>Новые параметры:</p>
+- **{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}**
+  - : Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью {{Glossary("CSS")}}. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.
+- **{{htmlattrxref("autoplay","video")}}**
+  - : Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.
+- **{{htmlattrxref("loop","video")}}**
+  - : Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.
+- **{{htmlattrxref("muted","video")}}**
+  - : Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.
+- **{{htmlattrxref("poster","video")}}**
+  - : Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.
+- **{{htmlattrxref("preload","video")}}**
 
-<dl>
- <dt><strong>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</strong></dt>
- <dd>Вы можете контролировать размер видео либо с помощью этих атрибутов, либо с помощью {{Glossary("CSS")}}. В обоих случаях видео поддерживают собственное соотношение ширины и высоты — известное как соотношение сторон. Если соотношение сторон не поддерживается установленными вами размерами, видео будет увеличиваться, чтобы заполнить пространство по горизонтали, а заполненному пространству по умолчанию будет задан сплошной цвет фона.</dd>
- <dt><strong>{{htmlattrxref("autoplay","video")}}</strong></dt>
- <dd>Этот атрибут позволяет сразу начать воспроизведение звука или видео, пока остальная часть страницы загружается. Вам не рекомендуется использовать автовоспроизведение видео (или аудио) на ваших сайтах, потому что пользователи могут найти это действительно раздражающим.</dd>
- <dt><strong>{{htmlattrxref("loop","video")}}</strong></dt>
- <dd>Этот атрибут позволяет воспроизводить видео (или аудио) снова, когда он заканчивается. Это также может раздражать, поэтому используйте тогда, когда это действительно необходимо.</dd>
- <dt><strong>{{htmlattrxref("muted","video")}}</strong></dt>
- <dd>Этот атрибут заставляет проигрыватель воспроизводить звук, отключённый по умолчанию.</dd>
- <dt><strong>{{htmlattrxref("poster","video")}}</strong></dt>
- <dd>Этот атрибут принимает в качестве значения URL-адрес изображения, который будет отображаться до воспроизведения видео. Он предназначен для заставки к видео или рекламы.</dd>
- <dt><strong>{{htmlattrxref("preload","video")}}</strong></dt>
- <dd>
- <p>этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:</p>
+  - : этот атрибут используется в элементе для буферизации больших файлов. Он может принимать одно из трёх значений:
 
- <ul>
-  <li><code>"none"</code> не буферизирует файл</li>
-  <li><code>"auto"</code> буферизирует медиафайл</li>
-  <li><code>"metadata"</code> буферирует только метаданные файла</li>
- </ul>
- </dd>
-</dl>
+    - `"none"` не буферизирует файл
+    - `"auto"` буферизирует медиафайл
+    - `"metadata"` буферирует только метаданные файла
 
-<p>Вы можете найти приведённый выше пример для воспроизведения <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">на Github</a> (также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">просмотрите исходный код</a>.) Обратите внимание, что мы не включили атрибут <code>autoplay</code> в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!</p>
+Вы можете найти приведённый выше пример для воспроизведения [на Github](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html) (также [просмотрите исходный код](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html).) Обратите внимание, что мы не включили атрибут `autoplay` в live-версию - если видео начнёт воспроизводиться, как только страница загрузится, вы не увидите заставку к видео!
 
-<h3 id="Элемент_&lt;audio>">Элемент &lt;audio&gt; </h3>
+### Элемент \<audio>
 
-<p>Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:</p>
+Элемент {{htmlelement ("audio")}} работает точно так же, как элемент {{htmlelement ("video")}}, с несколькими небольшими отличиями, которые описаны ниже. Типичный пример может выглядеть так:
 
-<pre class="brush: html">&lt;audio controls&gt;
-  &lt;source src="viper.mp3" type="audio/mp3"&gt;
-  &lt;source src="viper.ogg" type="audio/ogg"&gt;
-  &lt;p&gt;Your browser doesn't support HTML5 audio. Here is a &lt;a href="viper.mp3"&gt;link to the audio&lt;/a&gt; instead.&lt;/p&gt;
-&lt;/audio&gt;</pre>
+```html
+<audio controls>
+  <source src="viper.mp3" type="audio/mp3">
+  <source src="viper.ogg" type="audio/ogg">
+  <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
+</audio>
+```
 
-<p>В браузере это вызывает следующее:</p>
+В браузере это вызывает следующее:
 
-<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p>
+![A simple audio player with a play button, timer, volume control, and progress bar](https://mdn.mozillademos.org/files/12798/audio-player.png)
 
-<div class="note">
-<p>Примечание: вы можете запустить <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">аудио-демо</a> в Github (см. также <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">исходный код аудиоплеера</a>.)</p>
-</div>
+> **Примечание:** Примечание: вы можете запустить [аудио-демо](http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html) в Github (см. также [исходный код аудиоплеера](https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html).)
 
-<p>Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:</p>
+Он занимает меньше места, чем видеоплеер, поскольку нет визуального компонента - вам просто нужно отображать элементы управления для воспроизведения звука. Другие отличия от видео HTML5 заключаются в следующем:
 
-<ul>
- <li>Элемент {{htmlelement ("audio")}} не поддерживает атрибуты <code>width</code> и <code>height</code> - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.</li>
- <li>Он также не поддерживает атрибут​​​​​ <code>poster</code> опять же, из-за отсутствия визуального компонента. </li>
-</ul>
+- Элемент {{htmlelement ("audio")}} не поддерживает атрибуты `width` и `height` - опять же, нет визуального компонента, поэтому присваивать ширину или высоту не к чему.
+- Он также не поддерживает атрибут​​​​​ `poster` опять же, из-за отсутствия визуального компонента.
 
-<p>Помимо этого, <code>&lt;audio&gt;</code> поддерживает все те же функции, что и <code>&lt;video&gt;</code> - просмотрите приведённые выше разделы для получения дополнительной информации о них.</p>
+Помимо этого, `<audio>` поддерживает все те же функции, что и `<video>` - просмотрите приведённые выше разделы для получения дополнительной информации о них.
 
-<h2 id="Отображение_текстовых_дорожек_к_видео">Отображение текстовых дорожек к видео</h2>
+## Отображение текстовых дорожек к видео
 
-<p>Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:</p>
+Теперь мы обсудим немного более продвинутую концепцию, о которой очень полезно знать. Многие люди не могут или не хотят слышать аудио или видео контент, который они находят в Интернете, по крайней мере, в определённое время. Например:
 
-<ul>
- <li>У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).</li>
- <li>Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).</li>
- <li>Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.</li>
-</ul>
+- У многих людей есть слуховые нарушения (более известные как слабослышащие или глухие).
+- Другие могут не слышать звук, потому что они находятся в шумной обстановке (например, в переполненном баре при показе спортивной игры) или, возможно, не хотят беспокоить других, если они находятся в тихом месте (например, в библиотеке).
+- Люди, которые не говорят на языке из видео, могут захотеть увидеть текстовую расшифровку или даже перевод, чтобы помочь им понять медиа-контент.
 
-<p>Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом <a href="/en-US/docs/Web/API/Web_Video_Text_Tracks_Format">WebVTT</a> и элементом {{htmlelement ("track")}}.</p>
+Разве было бы неплохо иметь возможность предоставить этим людям транскрипцию слов, произносимых в аудио или видео? Благодаря HTML5 вы можете это сделать с форматом [WebVTT](/ru/docs/Web/API/Web_Video_Text_Tracks_Format) и элементом {{htmlelement ("track")}}.
 
-<div class="note">
-<p><strong>Замечание :</strong> "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».</p>
-</div>
+> **Примечание:** **Замечание :** "Транскрибировать" значит записывать устную речь в виде текста. Полученный текст представляет собой «стенограмму».
 
-<p>WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:</p>
+WebVTT - это формат для записи текстовых файлов, содержащих несколько строк текста, а также метаданные, такие как время, в которое вы хотите отображать каждую текстовую строку, и даже ограниченную информацию о стиле/позиционировании. Эти текстовые строки называются репликами, и вы можете отображать разные типы для разных целей, наиболее распространёнными являются:
 
-<dl>
- <dt><strong>субтитры</strong></dt>
- <dd>Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.</dd>
- <dt><strong>титры</strong></dt>
- <dd>Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.</dd>
- <dt><strong>рассчитанные описания</strong></dt>
- <dd>Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.</dd>
-</dl>
+- **субтитры**
+  - : Переводы иностранного материала, для людей, которые не понимают слов, произнесённых в аудио.
+- **титры**
+  - : Синхронизированные транскрипции диалога или описания значимых звуков, чтобы люди, которые не могут слышать звук, поняли что происходит.
+- **рассчитанные описания**
+  - : Текст для преобразования в аудио, чтобы обслуживать людей с нарушениями зрения.
 
-<p>Типичный файл WebVTT будет выглядеть примерно так:</p>
+Типичный файл WebVTT будет выглядеть примерно так:
 
-<pre>WEBVTT
+```
+WEBVTT
 
 1
-00:00:22.230 --&gt; 00:00:24.606
+00:00:22.230 --> 00:00:24.606
 Это первый субтитр.
 
 2
-00:00:30.739 --&gt; 00:00:34.074
+00:00:30.739 --> 00:00:34.074
 Это второй.
 
   ...
-</pre>
+```
 
-<p>Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:</p>
+Чтобы отобразить это вместе с воспроизведением мультимедиа HTML, вам необходимо:
 
-<ol>
- <li>Сохраните его как <code>.vtt</code>- файл, в разумном месте.</li>
- <li>Ссылка на файл <code>.vtt</code> с элементом {{htmlelement ("track")}}. <code>&lt;track&gt;</code> должен быть помещён в <code>&lt;audio&gt;</code> или <code>&lt;video&gt;</code>, но после элементов <code>&lt;source&gt;</code>. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики <code>субтитрами</code>, <code>титрами</code> или <code>описаниями</code>. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.</li>
-</ol>
+1.  Сохраните его как `.vtt`- файл, в разумном месте.
+2.  Ссылка на файл `.vtt` с элементом {{htmlelement ("track")}}. `<track>` должен быть помещён в `<audio>` или `<video>`, но после элементов `<source>`. Используйте атрибут {{htmlattrxref ("kind", "track")}}, чтобы указать, являются ли реплики `субтитрами`, `титрами` или `описаниями`. Кроме того, используйте {{htmlattrxref ("srclang", "track")}}, чтобы сообщить браузеру, на каком языке вы записывали субтитры.
 
-<p>Вот пример:</p>
+Вот пример:
 
-<pre class="brush: html">&lt;video controls&gt;
-    &lt;source src="example.mp4" type="video/mp4"&gt;
-    &lt;source src="example.webm" type="video/webm"&gt;
-    &lt;track kind="subtitles" src="subtitles_en.vtt" srclang="en"&gt;
-&lt;/video&gt;
-</pre>
+```html
+<video controls>
+    <source src="example.mp4" type="video/mp4">
+    <source src="example.webm" type="video/webm">
+    <track kind="subtitles" src="subtitles_en.vtt" srclang="en">
+</video>
+```
 
-<p dir="ltr" id="tw-target-text">Это приведёт к просмотру видео с субтитрами, таким как:</p>
+Это приведёт к просмотру видео с субтитрами, таким как:
 
-<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p>
+![Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."](https://mdn.mozillademos.org/files/7887/video-player-with-captions.png)
 
-<p>Подробнее читайте в разделе <a href="/ru/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">добавление титров и субтитров к видео HTML5</a>. Вы можете <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">найти пример</a>, который соответствует этой статье в Github, написанной Яном Девлином (см. также <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">исходный код</a>). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.</p>
+Подробнее читайте в разделе [добавление титров и субтитров к видео HTML5](/ru/docs/Web/Guide/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video). Вы можете [найти пример](http://iandevlin.github.io/mdn/video-player-with-captions/), который соответствует этой статье в Github, написанной Яном Девлином (см. также [исходный код](https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions)). В этом примере используется JavaScript, позволяющий пользователям выбирать между различными субтитрами. Обратите внимание, что для включения субтитров вам нужно нажать кнопку «CC» и выбрать вариант - английский, немецкий или испанский.
 
-<div class="note">
-<p><strong>Примечание:</strong> Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.</p>
-</div>
+> **Примечание:** Текстовые треки также помогут вам с {{glossary ("SEO")}}, так как поисковые системы особенно преуспевают в работе с текстом. Текстовые треки даже позволяют поисковым системам напрямую связываться с местом, происходящим в видео.
 
-<h3 id="Активное_обучение_Внедрение_собственного_аудио_и_видео">Активное обучение: Внедрение собственного аудио и видео</h3>
+### Активное обучение: Внедрение собственного аудио и видео
 
-<p>Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> и <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Мы хотели бы, чтобы вы попробовали сделать это!</p>
+Для этого активного обучения мы (в идеале) хотели бы, чтобы вы вышли на улицу и записали некоторые из ваших собственных видео и аудио. Большинство телефонов в наши дни позволяют очень легко записывать аудио и видео, и, если вы можете перенести их на свой компьютер, вы можете их использовать. Возможно, вам придётся сделать некоторое преобразование, чтобы в конечном итоге получить WebM и MP4 в случае видео, а также MP3 и Ogg в случае аудио, но есть достаточно программ, чтобы вы могли сделать это без особых проблем, таких как [Miro Video Converter](http://www.mirovideoconverter.com/) и [Audacity](https://sourceforge.net/projects/audacity/). Мы хотели бы, чтобы вы попробовали сделать это!
 
-<p>Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">образцами аудио и видео файлов</a> для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.</p>
+Если у вас нет какого-либо видео или аудио, вы можете свободно пользоваться нашими [образцами аудио и видео файлов](https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content) для выполнения этого упражнения. Вы также можете использовать наш образец кода для справки.
 
-<p>Мы хотим, чтобы вы сделали следующие действия:</p>
+Мы хотим, чтобы вы сделали следующие действия:
 
-<ol>
- <li>Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.</li>
- <li>Создайте новый HTML файл в том же каталоге и назовите его <code>index.html</code>.</li>
- <li>Добавьте элементы <code>&lt;audio&gt;</code> и <code>&lt;video&gt; </code>на страницу; чтобы они отображали элементы управления браузером по умолчанию.</li>
- <li>Введите оба варианта элемента <code>&lt;source&gt;</code>, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать <code>type</code> атрибуты.</li>
- <li>Дайте элементу <code>&lt;video&gt;</code> заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.</li>
-</ol>
+1.  Сохраните аудио и видео файлы в новом каталоге на вашем компьютере.
+2.  Создайте новый HTML файл в том же каталоге и назовите его `index.html`.
+3.  Добавьте элементы `<audio>` и `<video> `на страницу; чтобы они отображали элементы управления браузером по умолчанию.
+4.  Введите оба варианта элемента `<source>`, чтобы браузеры находили оптимальный формат звука, который он поддерживает и загружает. Они должны включать `type` атрибуты.
+5.  Дайте элементу `<video>` заставку, которая будет отображаться до начала воспроизведения видео. Получайте удовольствие, создавая свою собственную заставку к видео.
 
-<p>Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.</p>
+Для дополнительного бонуса вы можете попробовать исследовать текстовые треки и выяснить, как добавить некоторые титры к вашему видео.
 
-<h2 id="Краткое_изложение">Краткое изложение</h2>
+## Краткое изложение
 
-<p>Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как {{htmlelement ("iframe")}} и {{htmlelement ("object")}}.</p>
+Мы надеемся, что вам понравилось играть с видео и аудио на веб-страницах! В следующей статье мы рассмотрим другие способы встраивания контента в Web, используя такие технологии, как {{htmlelement ("iframe")}} и {{htmlelement ("object")}}.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li>{{htmlelement("audio")}}</li>
- <li>{{htmlelement("video")}}</li>
- <li>{{htmlelement("source")}}</li>
- <li>{{htmlelement("track")}}</li>
- <li><a href="/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adding captions and subtitles to HTML5 video</a></li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Audio and Video delivery</a>: Множество деталей встраивания аудио и видео в страницу используя HTML и Javascript.</li>
- <li><a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Audio and Video manipulation</a>: Множество способов управления аудио и видео с помощью Javascript(вроде добавления фильтров).</li>
- <li>Автоматические опции по переводу(<a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">translate multimedia</a>).</li>
-</ul>
+- {{htmlelement("audio")}}
+- {{htmlelement("video")}}
+- {{htmlelement("source")}}
+- {{htmlelement("track")}}
+- [Adding captions and subtitles to HTML5 video](/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video)
+- [Audio and Video delivery](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery): Множество деталей встраивания аудио и видео в страницу используя HTML и Javascript.
+- [Audio and Video manipulation](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation): Множество способов управления аудио и видео с помощью Javascript(вроде добавления фильтров).
+- Автоматические опции по переводу([translate multimedia](http://www.inwhatlanguage.com/blog/translate-video-audio/)).
 
-<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p>
+{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From &lt;object&gt; to &lt;iframe&gt; — other embedding technologies</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li>
-</ul>
+- [Images in HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)
+- [Video and audio content](/ru/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content)
+- [From \<object> to \<iframe> — other embedding technologies](/ru/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies)
+- [Adding vector graphics to the Web](/ru/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web)
+- [Responsive images](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+- [Mozilla splash page](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page)
 
-<dl>
-</dl>
+<!---->
 
-<ul>
-</ul>
+<!---->
diff --git a/files/ru/learn/html/tables/advanced/index.md b/files/ru/learn/html/tables/advanced/index.md
index ffed8415de7d23..a6f14cc2c28c00 100644
--- a/files/ru/learn/html/tables/advanced/index.md
+++ b/files/ru/learn/html/tables/advanced/index.md
@@ -3,114 +3,91 @@ title: HTML таблицы продвинутые возможности и до
 slug: Learn/HTML/Tables/Advanced
 translation_of: Learn/HTML/Tables/Advanced
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
 
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.
 
-<p class="summary">Во второй статье этого модуля мы рассматриваем ещё несколько продвинутых возможностей в HTML таблицах — такие как заголовок/описание и группировка строк внутри head, body и footer секциях таблицы, а также доступность таблиц для пользователей с ограниченными возможностями.</p>
+| Необходимые знания: | Базовый HTML ([Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)). |
+| ------------------- | --------------------------------------------------------------------------- |
+| Цель:               | Изучить более продвинутые возможности HTML таблиц и их доступность.         |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовый HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить более продвинутые возможности HTML таблиц и их доступность.</td>
-  </tr>
- </tbody>
-</table>
+## Добавление заголовка к таблице с помощью \<caption>
 
-<h2 id="Добавление_заголовка_к_таблице_с_помощью_&lt;caption>">Добавление заголовка к таблице с помощью &lt;caption&gt;</h2>
+Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега `<table>`.
 
-<p>Вы можете добавить заголовок для таблицы установив его в элементе {{htmlelement("caption")}} и этот элемент необходимо поместить внутрь  элемента {{htmlelement("table")}}. Причём вам нужно поместить его сразу после открытия тега <code>&lt;table&gt;</code>.</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;caption&gt;Dinosaurs in the Jurassic period&lt;/caption&gt;
+```html
+<table>
+  <caption>Dinosaurs in the Jurassic period</caption>
 
   ...
-&lt;/table&gt;</pre>
+</table>
+```
+
+Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы. Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица, что особенно важно для слепых пользователей. Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.
 
-<p>Как можно понять из короткого примера выше, заголовок отражает в себе описание контента таблицы. Это полезно для всех читателей просматривающих страницу и желающих получить краткое представление от том полезна ли для них таблица,  что особенно важно для слепых пользователей. Вместо того чтобы читать содержимое множества ячеек чтобы понять о чем таблица, он или она могут полагаться на заголовок и принимать решение читать ли таблицу более подробно.</p>
+Заголовок помещают сразу после тега `<table>`.
 
-<p>Заголовок помещают сразу после тега <code>&lt;table&gt;</code>.</p>
+> **Примечание:** Атрибут {{htmlattrxref("summary","table")}} также может быть использован в `<table>` элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать `<caption>` элемент, так как `summary` {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).
 
-<div class="note">
-<p><strong>Примечание</strong>: Атрибут {{htmlattrxref("summary","table")}} также может быть использован в <code>&lt;table&gt;</code> элементе предоставляя описание — это также читается скринридерами. Однако мы рекомендуем вместо этого использовать <code>&lt;caption&gt;</code> элемент, так как <code>summary</code> {{glossary("deprecated")}} в HTML5 спецификации и не может быть прочитан зрячими пользователями (он не отображается на странице).</p>
-</div>
+### Упражнение: Добавление заголовка
 
-<h3 id="Упражнение_Добавление_заголовка">Упражнение: Добавление заголовка</h3>
+Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.
 
-<p>Давайте попробуем это, вернёмся к примеру который мы ранее встретили в прошлой статье.</p>
+1.  Откройте расписание занятий школьного учителя по языку в конце статьи [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col), или сделайте копию нашего [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) файла.
+2.  Добавьте подходящий заголовок к таблице.
+3.  Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.
 
-<ol>
- <li>Откройте расписание занятий школьного учителя по языку в конце статьи <a href="/ru/docs/Learn/HTML/Tables/Basics#Active_learning_colgroup_and_col">HTML таблицы основы</a>, или сделайте копию нашего <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> файла.</li>
- <li>Добавьте подходящий заголовок к таблице.</li>
- <li>Сохраните свой код и откройте его в браузере, чтобы посмотреть как это выглядит.</li>
-</ol>
+> **Примечание:** Этот пример можно найти на GitHub по ссылке [timetable-caption.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример можно найти на GitHub по ссылке <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/timetable-caption.html">timetable-caption.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">живой пример</a>).</p>
-</div>
+## Добавление структуры с помощью \<thead>, \<tfoot> и \<tbody>
 
-<h2 id="Добавление_структуры_с_помощью_&lt;thead>_&lt;tfoot>_и_&lt;tbody>">Добавление структуры с помощью &lt;thead&gt;, &lt;tfoot&gt; и &lt;tbody&gt;</h2>
+Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.
 
-<p>Когда таблицы становятся более сложными по структуре полезно дать им более структурированное определение. Отличный способ  сделать это используя {{htmlelement("thead")}}, {{htmlelement("tfoot")}} и {{htmlelement("tbody")}}, которые позволяют вам разметить header, footer и body секции таблицы.</p>
+Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.
 
-<p>Эти элементы не создают дополнительной доступности для пользователей со скринридерами и не приводят к какому-то визуальному улучшению при их использовании. Зато они очень полезны при стилизации и разметке, как точки для добавления CSS к вашей таблице. Вот несколько интересных примеров, в случае длинной таблицы вы можете сделать header и footer таблицы повторяемый на каждой печатной странице, или вы можете сделать body таблицы отображаемое на одной странице и иметь доступ ко всему содержимому контенту прокручивая вверх и вниз.</p>
+Использование:
 
-<p>Использование:</p>
+- Элементом `<thead>` нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.
+- Элементом `<tfoot>` нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).
+- Элементом `<tbody>` необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).
 
-<ul>
- <li>Элементом <code>&lt;thead&gt;</code> нужно обернуть часть таблицы которая относится к заголовку — обычно это первая строка содержащая заголовки колонок, но это не обязательно всегда такой случай. Если вы используете {{htmlelement("col")}}/{{htmlelement("colgroup")}} элемент, тогда заголовок должен находиться ниже его.</li>
- <li>Элементом <code>&lt;tfoot&gt;</code> нужно обернуть ту часть, которая относится к footer таблицы — например, это может быть последняя строка в которой отражаются суммы по столбцам таблицы. Вы можете включить сюда footer таблицы, как и следовало ожидать, или чуть ниже заголовка таблицы (браузер всё равно отобразит его внизу таблицы).</li>
- <li>Элементом <code>&lt;tbody&gt;</code> необходимо обернуть остальную часть содержимого таблицы которая не находится в header или footer таблицы. Этот блок располагают ниже заголовка таблицы или иногда footer таблицы, зависит от того какую структуру вы решите использовать (читать выше по тексту).</li>
-</ul>
+> **Примечание:** `<tbody>` всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется `<tbody>` и посмотрите HTML код в [browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.
 
-<div class="note">
-<p><strong>Примечание</strong>: <code>&lt;tbody&gt;</code> всегда включён в каждой таблице, неявно если не укажете его в коде. Проверьте это, открыв один из предыдущих примеров в котором не используется <code>&lt;tbody&gt;</code> и посмотрите HTML код в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a> — вы увидите, что браузер добавил этот тег самостоятельно. Вы могли бы задаться вопросом почему мы должны волноваться о его включении, но вы должны, потому что это даёт больше контроля над структурой таблицы и стилем.</p>
-</div>
+### Упражнение: Добавление структуры таблицы
 
-<h3 id="Упражнение_Добавление_структуры_таблицы">Упражнение: Добавление структуры таблицы</h3>
+Давайте используем эти новые элементы.
 
-<p>Давайте используем эти новые элементы.</p>
+1.  В первую очередь, сделайте копию [spending-record.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html) и [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) в новой папке.
+2.  Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.
+3.  Поместите очевидную строку заголовка внутрь `<thead>` элемента, строку "SUM" внутрь `<tfoot>` элемента и оставшийся контент внутрь `<tbody>` элемента.
+4.  Сохраните, перезагрузите и вы увидите, что добавление элемента `<tfoot>` привело к тому, что строка "SUM" опустилась к нижней части таблицы.
+5.  Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.
+6.  Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в `<head>` вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода:
 
-<ol>
- <li>В первую очередь,  сделайте копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record.html">spending-record.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> в новой папке.</li>
- <li>Попробуйте открыть это в браузере — вы увидите, что все выглядит классно, но могло бы быть лучше. Строка "SUM" которая содержит потраченные суммы кажется находится не в том месте и некоторые детали отсутствуют в коде.</li>
- <li>Поместите очевидную строку заголовка внутрь <code>&lt;thead&gt;</code> элемента, строку "SUM" внутрь <code>&lt;tfoot&gt;</code> элемента и оставшийся контент внутрь <code>&lt;tbody&gt;</code> элемента.</li>
- <li>Сохраните, перезагрузите и вы увидите, что добавление элемента <code>&lt;tfoot&gt;</code> привело к тому,  что строка "SUM" опустилась к нижней части таблицы.</li>
- <li>Далее, добавьте атрибут {{htmlattrxref("colspan","td")}}, чтобы ячейка "SUM" занимала первые четыре столбца, таким образом числовое значение "Cost" появится в последнем столбце.</li>
- <li>Давайте добавим несколько простых дополнительных стилей к таблице, чтобы дать вам представление насколько эти элементы полезны при использовании CSS. Внутри в <code>&lt;head&gt;</code> вашего HTML документа вы увидите пустой элемент {{htmlelement("style")}}. Внутри этого элемента добавьте следующие строки CSS кода:
-  <pre class="brush: css">tbody {
-  font-size: 90%;
-  font-style: italic;
-}
+    ```css
+    tbody {
+      font-size: 90%;
+      font-style: italic;
+    }
 
-tfoot {
-  font-weight: bold;
-}
-</pre>
- </li>
- <li>Сохраните, обновите и вы увидите результат. Если <code>&lt;tbody&gt;</code> и <code>&lt;tfoot&gt;</code> элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.</li>
-</ol>
+    tfoot {
+      font-weight: bold;
+    }
+    ```
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a> это хорошее место для начала; у нас также есть статья конкретно о <a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">стилизации таблиц</a>).</p>
-</div>
+7.  Сохраните, обновите и вы увидите результат. Если `<tbody>` и `<tfoot>` элементы не были установлены, то вам придётся писать много сложных селекторов/правил для применения одного и того же стиля.
 
-<p>Ваша готовая таблица должна выглядеть примерно так:</p>
+> **Примечание:** Мы не ожидаем что сейчас вы полностью поймёте CSS. Вы узнаете больше когда пройдёте наши CSS курсы (например, [Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) это хорошее место для начала; у нас также есть статья конкретно о [стилизации таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables)).
 
-<div class="hidden">
-<h6 id="Hidden_example">Hidden example</h6>
+Ваша готовая таблица должна выглядеть примерно так:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;My spending record&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My spending record</title>
+    <style>
 
         html {
           font-family: sans-serif;
@@ -156,268 +133,264 @@ tfoot {
         tfoot {
           font-weight: bold;
         }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-      &lt;table&gt;
-        &lt;caption&gt;How I chose to spend my money&lt;/caption&gt;
-        &lt;thead&gt;
-          &lt;tr&gt;
-            &lt;th&gt;Purchase&lt;/th&gt;
-            &lt;th&gt;Location&lt;/th&gt;
-            &lt;th&gt;Date&lt;/th&gt;
-            &lt;th&gt;Evaluation&lt;/th&gt;
-            &lt;th&gt;Cost (€)&lt;/th&gt;
-          &lt;/tr&gt;
-        &lt;/thead&gt;
-        &lt;tfoot&gt;
-          &lt;tr&gt;
-            &lt;td colspan="4"&gt;SUM&lt;/td&gt;
-            &lt;td&gt;118&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tfoot&gt;
-        &lt;tbody&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Haircut&lt;/td&gt;
-            &lt;td&gt;Hairdresser&lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-            &lt;td&gt;Great idea&lt;/td&gt;
-            &lt;td&gt;30&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Lasagna&lt;/td&gt;
-            &lt;td&gt;Restaurant&lt;/td&gt;
-            &lt;td&gt;12/09&lt;/td&gt;
-            &lt;td&gt;Regrets&lt;/td&gt;
-            &lt;td&gt;18&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Shoes&lt;/td&gt;
-            &lt;td&gt;Shoeshop&lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-            &lt;td&gt;Big regrets&lt;/td&gt;
-            &lt;td&gt;65&lt;/td&gt;
-          &lt;/tr&gt;
-          &lt;tr&gt;
-            &lt;td&gt;Toothpaste&lt;/td&gt;
-            &lt;td&gt;Supermarket&lt;/td&gt;
-            &lt;td&gt;13/09&lt;/td&gt;
-            &lt;td&gt;Good&lt;/td&gt;
-            &lt;td&gt;5&lt;/td&gt;
-          &lt;/tr&gt;
-        &lt;/tbody&gt;
-    &lt;/table&gt;
-
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 300) }}</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример можно также найти на GitHub по ссылке <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html">spending-record-finished.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html">живой пример</a>).</p>
-</div>
-
-<h2 id="Вложенные_таблицы">Вложенные таблицы</h2>
-
-<p>В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент <code>&lt;table&gt;</code>. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.</p>
-
-<p>Разметка простой вложенной таблицы:</p>
-
-<pre class="brush: html">&lt;table id="table1"&gt;
-  &lt;tr&gt;
-    &lt;th&gt;title1&lt;/th&gt;
-    &lt;th&gt;title2&lt;/th&gt;
-    &lt;th&gt;title3&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td id="nested"&gt;
-      &lt;table id="table2"&gt;
-        &lt;tr&gt;
-          &lt;td&gt;cell1&lt;/td&gt;
-          &lt;td&gt;cell2&lt;/td&gt;
-          &lt;td&gt;cell3&lt;/td&gt;
-        &lt;/tr&gt;
-      &lt;/table&gt;
-    &lt;/td&gt;
-    &lt;td&gt;cell2&lt;/td&gt;
-    &lt;td&gt;cell3&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;cell4&lt;/td&gt;
-    &lt;td&gt;cell5&lt;/td&gt;
-    &lt;td&gt;cell6&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<h2 id="Таблицы_для_пользователей_с_ограниченными_возможностями">Таблицы для пользователей с ограниченными возможностями</h2>
-
-<p>Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.</p>
-
-<table>
- <caption>Items Sold August 2016</caption>
- <tbody>
+    </style>
+  </head>
+  <body>
+      <table>
+        <caption>How I chose to spend my money</caption>
+        <thead>
+          <tr>
+            <th>Purchase</th>
+            <th>Location</th>
+            <th>Date</th>
+            <th>Evaluation</th>
+            <th>Cost (€)</th>
+          </tr>
+        </thead>
+        <tfoot>
+          <tr>
+            <td colspan="4">SUM</td>
+            <td>118</td>
+          </tr>
+        </tfoot>
+        <tbody>
+          <tr>
+            <td>Haircut</td>
+            <td>Hairdresser</td>
+            <td>12/09</td>
+            <td>Great idea</td>
+            <td>30</td>
+          </tr>
+          <tr>
+            <td>Lasagna</td>
+            <td>Restaurant</td>
+            <td>12/09</td>
+            <td>Regrets</td>
+            <td>18</td>
+          </tr>
+          <tr>
+            <td>Shoes</td>
+            <td>Shoeshop</td>
+            <td>13/09</td>
+            <td>Big regrets</td>
+            <td>65</td>
+          </tr>
+          <tr>
+            <td>Toothpaste</td>
+            <td>Supermarket</td>
+            <td>13/09</td>
+            <td>Good</td>
+            <td>5</td>
+          </tr>
+        </tbody>
+    </table>
+
+  </body>
+</html>
+```
+
+{{ EmbedLiveSample('Hidden_example', '100%', 300) }}
+
+> **Примечание:** Этот пример можно также найти на GitHub по ссылке [spending-record-finished.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/spending-record-finished.html) ([живой пример](http://mdn.github.io/learning-area/html/tables/advanced/spending-record-finished.html)).
+
+## Вложенные таблицы
+
+В одну таблицу вкладывать другую таблицу возможно, если вы используете полную структуру включая элемент `<table>`. Это как правило не рекомендуется, так как делает разметку более запутанной и менее доступной для пользователей скринридеров, так в большинстве случаев вы можете просто вставить дополнительные ячейки/строки/столбцы в существующую таблицу. Однако, иногда это необходимо, например, если вы хотите легко импортировать контент из других источников.
+
+Разметка простой вложенной таблицы:
+
+```html
+<table id="table1">
   <tr>
-   <td></td>
-   <td></td>
-   <th colspan="3" scope="colgroup">Clothes</th>
-   <th colspan="2" scope="colgroup">Accessories</th>
+    <th>title1</th>
+    <th>title2</th>
+    <th>title3</th>
   </tr>
   <tr>
-   <td></td>
-   <td></td>
-   <th scope="col">Trousers</th>
-   <th scope="col">Skirts</th>
-   <th scope="col">Dresses</th>
-   <th scope="col">Bracelets</th>
-   <th scope="col">Rings</th>
+    <td id="nested">
+      <table id="table2">
+        <tr>
+          <td>cell1</td>
+          <td>cell2</td>
+          <td>cell3</td>
+        </tr>
+      </table>
+    </td>
+    <td>cell2</td>
+    <td>cell3</td>
   </tr>
   <tr>
-   <th rowspan="3" scope="rowgroup">Belgium</th>
-   <th scope="row">Antwerp</th>
-   <td>56</td>
-   <td>22</td>
-   <td>43</td>
-   <td>72</td>
-   <td>23</td>
+    <td>cell4</td>
+    <td>cell5</td>
+    <td>cell6</td>
   </tr>
-  <tr>
-   <th scope="row">Gent</th>
-   <td>46</td>
-   <td>18</td>
-   <td>50</td>
-   <td>61</td>
-   <td>15</td>
-  </tr>
-  <tr>
-   <th scope="row">Brussels</th>
-   <td>51</td>
-   <td>27</td>
-   <td>38</td>
-   <td>69</td>
-   <td>28</td>
-  </tr>
-  <tr>
-   <th rowspan="2" scope="rowgroup">The Netherlands</th>
-   <th scope="row">Amsterdam</th>
-   <td>89</td>
-   <td>34</td>
-   <td>69</td>
-   <td>85</td>
-   <td>38</td>
-  </tr>
-  <tr>
-   <th scope="row">Utrecht</th>
-   <td>80</td>
-   <td>12</td>
-   <td>43</td>
-   <td>36</td>
-   <td>19</td>
-  </tr>
- </tbody>
+</table>
+```
+
+## Таблицы для пользователей с ограниченными возможностями
+
+Давайте кратко опишем как мы используем данные таблицы. Таблицы могут быть удобным инструментом, который даёт нам быстрый доступ к данным и позволяет искать разные значения. Например, быстрого взгляда на таблицу ниже достаточно, чтобы найти сколько колец было продано в Амстердаме в августе 2016. Чтобы понять эту информацию, мы проводим визуальные ассоциации между данными в этой таблице и её заголовками колонок и/или строк.
+
+<table>
+  <caption>
+    Items Sold August 2016
+  </caption>
+  <tbody>
+    <tr>
+      <td></td>
+      <td></td>
+      <th colspan="3" scope="colgroup">Clothes</th>
+      <th colspan="2" scope="colgroup">Accessories</th>
+    </tr>
+    <tr>
+      <td></td>
+      <td></td>
+      <th scope="col">Trousers</th>
+      <th scope="col">Skirts</th>
+      <th scope="col">Dresses</th>
+      <th scope="col">Bracelets</th>
+      <th scope="col">Rings</th>
+    </tr>
+    <tr>
+      <th rowspan="3" scope="rowgroup">Belgium</th>
+      <th scope="row">Antwerp</th>
+      <td>56</td>
+      <td>22</td>
+      <td>43</td>
+      <td>72</td>
+      <td>23</td>
+    </tr>
+    <tr>
+      <th scope="row">Gent</th>
+      <td>46</td>
+      <td>18</td>
+      <td>50</td>
+      <td>61</td>
+      <td>15</td>
+    </tr>
+    <tr>
+      <th scope="row">Brussels</th>
+      <td>51</td>
+      <td>27</td>
+      <td>38</td>
+      <td>69</td>
+      <td>28</td>
+    </tr>
+    <tr>
+      <th rowspan="2" scope="rowgroup">The Netherlands</th>
+      <th scope="row">Amsterdam</th>
+      <td>89</td>
+      <td>34</td>
+      <td>69</td>
+      <td>85</td>
+      <td>38</td>
+    </tr>
+    <tr>
+      <th scope="row">Utrecht</th>
+      <td>80</td>
+      <td>12</td>
+      <td>43</td>
+      <td>36</td>
+      <td>19</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.</p>
+Но что если вы не можете провести эти визуальные ассоциации? Как тогда вы сможете прочитать таблицу выше? Люди с ослабленным зрением часто используют скринридер, который читает им информацию с веб-страницы. Это не проблема когда вы читаете простой текст, но интерпретация таблицы может быть сложной проблемой для слепых людей. Тем не менее, вместе с правильной разметкой мы можем заменить визуальные ассоциации программными.
 
-<p>В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.</p>
+В этой части статьи приводятся дополнительные способы которые делают таблицы более доступными.
 
-<h3 class="attTitle" id="Использование_заголовков_столбцов_и_строк">Использование заголовков столбцов и строк</h3>
+### Использование заголовков столбцов и строк
 
-<p>Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.</p>
+Скринридеры будут определять все заголовки и использовать их создавая программные ассоциации между этими заголовками и ячейками к которым они относятся. Сочетание заголовков столбцов и строк будет определять и интерпретировать данные в каждой ячейке так, что пользователи скринридеров могут интерпретировать таблицу также как это делают зрячие пользователи.
 
-<p>Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements">Добавление заголовков с помощью элемента &lt;th&gt;</a>.</p>
+Мы уже разобрали заголовки в предыдущей статье, смотри по ссылке [Добавление заголовков с помощью элемента \<th>](/ru/docs/Learn/HTML/Tables/Basics#Adding_headers_with_%3Cth%3E_elements).
 
-<h3 class="attTitle" id="Атрибут_scope">Атрибут scope</h3>
+### Атрибут scope
 
-<p>Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу <code>&lt;th&gt;</code> он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:</p>
+Новая тема в этой статье это атрибут {{htmlattrxref("scope","th")}}, который может быть добавлен к элементу `<th>` он сообщает скринридеру какие ячейки точно являются заголовками — например, заголовок строки в которой он находится или столбца. Возвращаясь назад к нашему примеру с записями расходов, вы могли однозначно определить заголовки столбцов как здесь:
 
-<pre class="brush: html">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th scope="col"&gt;Purchase&lt;/th&gt;
-    &lt;th scope="col"&gt;Location&lt;/th&gt;
-    &lt;th scope="col"&gt;Date&lt;/th&gt;
-    &lt;th scope="col"&gt;Evaluation&lt;/th&gt;
-    &lt;th scope="col"&gt;Cost (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;</pre>
+```html
+<thead>
+  <tr>
+    <th scope="col">Purchase</th>
+    <th scope="col">Location</th>
+    <th scope="col">Date</th>
+    <th scope="col">Evaluation</th>
+    <th scope="col">Cost (€)</th>
+  </tr>
+</thead>
+```
 
-<p>И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):</p>
+И у каждой строки может быть определён заголовок, как здесь (если мы добавили заголовки строк и заголовки столбцов):
 
-<pre class="brush: html">&lt;tr&gt;
-  &lt;th scope="row"&gt;Haircut&lt;/th&gt;
-  &lt;td&gt;Hairdresser&lt;/td&gt;
-  &lt;td&gt;12/09&lt;/td&gt;
-  &lt;td&gt;Great idea&lt;/td&gt;
-  &lt;td&gt;30&lt;/td&gt;
-&lt;/tr&gt;</pre>
+```html
+<tr>
+  <th scope="row">Haircut</th>
+  <td>Hairdresser</td>
+  <td>12/09</td>
+  <td>Great idea</td>
+  <td>30</td>
+</tr>
+```
 
-<p>Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.</p>
+Скринридер распознает разметку структурированную таким образом, что позволяют пользователям прочитать весь столбец или строку целиком.
 
-<p>Атрибут <code>scope</code> имеет ещё два возможных значения — <code>colgroup</code> и <code>rowgroup</code>. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (<code>&lt;th&gt;</code>), но "Clothes"  заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут <code>scope="colgroup"</code>, тогда как другие получат атрибут <code>scope="col"</code>.</p>
+Атрибут `scope` имеет ещё два возможных значения — `colgroup` и `rowgroup`. Они используются для заголовков, которые располагаются вверху ваших столбцов или строк. Если вы посмотрите на таблицу "Items sold..." в начале этого раздела статьи, вы увидите что ячейка с "Clothes" находится над ячейками "Trousers", "Skirts" и "Dresses". Все эти ячейки должны быть помечены как заголовки (`<th>`), но "Clothes" заголовок который находится сверху и определяет остальные три подзаголовка. Поэтому "Clothes" должна получить атрибут `scope="colgroup"`, тогда как другие получат атрибут `scope="col"`.
 
-<h3 class="attTitle" id="Атрибуты_id_и_headers">Атрибуты id и headers</h3>
+### Атрибуты id и headers
 
-<p>Альтернатива атрибута <code>scope</code> это использование атрибутов {{htmlattrxref("id")}} и {{htmlattrxref("headers", "td")}} задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:</p>
+Альтернатива атрибута `scope` это использование атрибутов {{htmlattrxref("id")}} и {{htmlattrxref("headers", "td")}} задавая ассоциации между заголовками и ячейками. Этот способ выглядит следующим образом:
 
-<ol>
- <li>Вы устанавливаете уникальный <code>id</code> для каждого<code>&lt;th&gt;</code> элемента.</li>
- <li>Вы устанавливаете атрибут <code>headers</code> для каждого <code>&lt;td&gt;</code> элемента. Каждый <code>headers</code> атрибут должен содержать список всех <code>id</code> , разделённый пробелами, ко всем <code>&lt;th&gt;</code> элементам которые действуют как заголовок для этой ячейки.</li>
-</ol>
+1.  Вы устанавливаете уникальный `id` для каждого`<th>` элемента.
+2.  Вы устанавливаете атрибут `headers` для каждого `<td>` элемента. Каждый `headers` атрибут должен содержать список всех `id` , разделённый пробелами, ко всем `<th>` элементам которые действуют как заголовок для этой ячейки.
 
-<p>Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.</p>
+Это обеспечивает явное определение позиции для каждой ячейки вашей HTML таблицы, определяет заголовки столбцов и строк таблицы. Для того чтобы это работало реально хорошо таблице нужно определить и заголовки столбцов, и заголовки строк.
 
-<p>Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:</p>
+Вернёмся к нашему примеру с расчётом затрат, его можно переписать следующим образом:
 
-<pre class="brush: html">&lt;thead&gt;
-  &lt;tr&gt;
-    &lt;th id="purchase"&gt;Purchase&lt;/th&gt;
-    &lt;th id="location"&gt;Location&lt;/th&gt;
-    &lt;th id="date"&gt;Date&lt;/th&gt;
-    &lt;th id="evaluation"&gt;Evaluation&lt;/th&gt;
-    &lt;th id="cost"&gt;Cost (€)&lt;/th&gt;
-  &lt;/tr&gt;
-&lt;/thead&gt;
-&lt;tbody&gt;
-&lt;tr&gt;
-  &lt;th id="haircut"&gt;Haircut&lt;/th&gt;
-  &lt;td headers="location haircut"&gt;Hairdresser&lt;/td&gt;
-  &lt;td headers="date haircut"&gt;12/09&lt;/td&gt;
-  &lt;td headers="evaluation haircut"&gt;Great idea&lt;/td&gt;
-  &lt;td headers="cost haircut"&gt;30&lt;/td&gt;
-&lt;/tr&gt;
+```html
+<thead>
+  <tr>
+    <th id="purchase">Purchase</th>
+    <th id="location">Location</th>
+    <th id="date">Date</th>
+    <th id="evaluation">Evaluation</th>
+    <th id="cost">Cost (€)</th>
+  </tr>
+</thead>
+<tbody>
+<tr>
+  <th id="haircut">Haircut</th>
+  <td headers="location haircut">Hairdresser</td>
+  <td headers="date haircut">12/09</td>
+  <td headers="evaluation haircut">Great idea</td>
+  <td headers="cost haircut">30</td>
+</tr>
 
   ...
 
-&lt;/tbody&gt;</pre>
+</tbody>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует <strong>гораздо</strong> больше разметки и оставляет обширное пространство для ошибок.  Атрибута <code>scope</code> обычно достаточно для большинства таблиц.</p>
-</div>
+> **Примечание:** Этот метод создания очень точного определения ассоциаций между заголовками и данными в ячейках, но использует **гораздо** больше разметки и оставляет обширное пространство для ошибок. Атрибута `scope` обычно достаточно для большинства таблиц.
 
-<h3 id="Упражнение_играем_со_scope_и_headers">Упражнение: играем со scope и headers</h3>
+### Упражнение: играем со scope и headers
 
-<ol>
- <li>Для заключительного упражнения мы, вначале создадим копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html">items-sold.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css">minimal-table.css</a> в новой папке.</li>
- <li>Теперь попробуем добавить соответствующий атрибут <code>scope</code>, который наиболее соответствует этой таблице.</li>
- <li>И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты <code>id</code> и <code>headers</code>.</li>
-</ol>
+1.  Для заключительного упражнения мы, вначале создадим копию [items-sold.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold.html) и [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/minimal-table.css) в новой папке.
+2.  Теперь попробуем добавить соответствующий атрибут `scope`, который наиболее соответствует этой таблице.
+3.  И наконец попробуем сделать другую копию изначальных файлов, на этот раз делая таблицу более доступной используя атрибуты `id` и `headers`.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете проверить как работает последние примеры здесь <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html">items-sold-scope.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html">also see this live</a>) и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html">items-sold-headers.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html">see this live too</a>).</p>
-</div>
+> **Примечание:** вы можете проверить как работает последние примеры здесь [items-sold-scope.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-scope.html) ([also see this live](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-scope.html)) и [items-sold-headers.html](https://github.com/mdn/learning-area/blob/master/html/tables/advanced/items-sold-headers.html) ([see this live too](http://mdn.github.io/learning-area/html/tables/advanced/items-sold-headers.html)).
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью <a href="/ru/docs/Learn/CSS/Styling_boxes/Styling_tables">"Стилизация таблиц"</a>.</p>
+Есть ещё некоторые вещи которые можно узнать о HTML таблицах, но мы действительно дали всё что нужно на настоящий момент. Дальше вы возможно захотите больше узнать о стилизации HTML таблиц, посмотрите статью ["Стилизация таблиц"](/ru/docs/Learn/CSS/Styling_boxes/Styling_tables).
 
-<div>{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}</div>
+{{PreviousMenuNext("Learn/HTML/Tables/Basics", "Learn/HTML/Tables/Structuring_planet_data", "Learn/HTML/Tables")}}
 
-<div>
-<h2 id="В_этом_блоке">В этом блоке</h2>
+## В этом блоке
 
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Tables/Basics">HTML таблицы основы</a></li>
- <li><a href="/ru/docs/Learn/HTML/Tables/Advanced">HTML таблицы продвинутые возможности и доступность</a></li>
- <li><a href="/ru/docs/Learn/HTML/Tables/Structuring_planet_data">Структурирование данных о планетах</a></li>
-</ul>
-</div>
+- [HTML таблицы основы](/ru/docs/Learn/HTML/Tables/Basics)
+- [HTML таблицы продвинутые возможности и доступность](/ru/docs/Learn/HTML/Tables/Advanced)
+- [Структурирование данных о планетах](/ru/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/ru/learn/html/tables/basics/index.md b/files/ru/learn/html/tables/basics/index.md
index 4d37cb182d2e36..a14d00eddb32d4 100644
--- a/files/ru/learn/html/tables/basics/index.md
+++ b/files/ru/learn/html/tables/basics/index.md
@@ -3,528 +3,378 @@ title: HTML таблицы основы
 slug: Learn/HTML/Tables/Basics
 translation_of: Learn/HTML/Tables/Basics
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
 
-<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия - строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.
 
-<p class="summary">Этот раздел познакомит вас с таблицами HTML, представив самые базовые понятия - строки и ячейки, заголовки, слияние строк и столбцов, а также объединение всех ячеек в столбце в целях стилизации.</p>
+| Начальные условия: | Знание основ HTML (читайте [Введение в HTML - Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)). |
+| ------------------ | --------------------------------------------------------------------------------------------------------------- |
+| Цель:              | Общее знакомство с таблицами HTML.                                                                              |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Начальные условия:</th>
-   <td>Знание основ HTML (читайте <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML - Introduction to HTML</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Общее знакомство с таблицами HTML.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое таблица ?
 
-<h2 id="Что_такое_таблица">Что такое таблица ?</h2>
+Таблица - это структурированный набор данных, состоящий из строк и столбцов (**табличных данных**). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.
 
-<p>Таблица - это структурированный набор данных, состоящий из строк и столбцов (<strong>табличных данных</strong>). Таблицы позволяют быстро и легко посмотреть значения, показывающие некоторую взаимосвязь между различными типами данных, например - человек и его возраст, или расписание в плавательном бассейне.</p>
+![A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47.](numbers-table.png)
 
-<p><img alt="A sample table showing names and ages of some people - Chris 38, Dennis 45, Sarah 29, Karen 47." src="numbers-table.png" style="display: block; margin: 0px auto;"></p>
+![A swimming timetable showing a sample data table](swimming-timetable.png)
 
-<p><img alt="A swimming timetable showing a sample data table" src="swimming-timetable.png" style="display: block; margin: 0px auto;"></p>
+Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:
 
-<p>Люди постоянно используют таблицы, причём уже давно, как показывает документ по переписи в США, относящийся к 1800 году:</p>
+![A very old parchment document; the data is not easily readable, but it clearly shows a data table being used.](1800-census.jpg)
 
-<p><img alt="A very old parchment document; the data is not easily readable, but it clearly shows a data table being used." src="1800-census.jpg" style="display: block; margin: 0px auto;"></p>
+Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.
 
-<p>Так что не удивительно, что создатели HTML включили в него средства для структурирования и представления табличных данных в сети.</p>
+### Как работает таблица?
 
-<h3 id="Как_работает_таблица">Как работает таблица?</h3>
-
-<p>Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.</p>
+Смысл таблицы в том, что она жёсткая. Информацию легко интерпретировать, визуально сопоставляя заголовки строк и столбцов. Например, посмотрите на приведённую ниже таблицу и найдите единственное личное местоимение, используемое в третьем лице , с полом ♀, выступающее в качестве объекта в предложении. Ответ можно найти, сопоставив соответствующие заголовки столбцов и строк.
 
 <table>
- <caption>Personal pronouns</caption>
- <tbody>
-  <tr>
-   <th colspan="3"></th>
-   <th scope="col">Субъект</th>
-   <th scope="col">Объект</th>
-  </tr>
-  <tr>
-   <th rowspan="5" scope="rowgroup">Единствен. числ.</th>
-   <th colspan="2" scope="row">1 Лицо</th>
-   <td>Я</td>
-   <td>меня</td>
-  </tr>
-  <tr>
-   <th colspan="2" scope="row">2 Лицо</th>
-   <td>ты</td>
-   <td>тебя</td>
-  </tr>
-  <tr>
-   <th rowspan="3" scope="rowgroup">3 Лицо</th>
-   <th scope="row">♂</th>
-   <td>он</td>
-   <td>его</td>
-  </tr>
-  <tr>
-   <th scope="row">♀</th>
-   <td>она</td>
-   <td>её</td>
-  </tr>
-  <tr>
-   <th scope="row">o</th>
-   <td>оно</td>
-   <td>его</td>
-  </tr>
-  <tr>
-   <th rowspan="3" scope="rowgroup">Множ.числ.</th>
-   <th colspan="2" scope="row">1 Лицо</th>
-   <td>мы</td>
-   <td>нас</td>
-  </tr>
-  <tr>
-   <th colspan="2" scope="row">2 Лицо</th>
-   <td>вы</td>
-   <td>вас</td>
-  </tr>
-  <tr>
-   <th colspan="2" scope="row">2 Лицо</th>
-   <td>они</td>
-   <td>их</td>
-  </tr>
- </tbody>
+  <caption>
+    Personal pronouns
+  </caption>
+  <tbody>
+    <tr>
+      <th colspan="3"></th>
+      <th scope="col">Субъект</th>
+      <th scope="col">Объект</th>
+    </tr>
+    <tr>
+      <th rowspan="5" scope="rowgroup">Единствен. числ.</th>
+      <th colspan="2" scope="row">1 Лицо</th>
+      <td>Я</td>
+      <td>меня</td>
+    </tr>
+    <tr>
+      <th colspan="2" scope="row">2 Лицо</th>
+      <td>ты</td>
+      <td>тебя</td>
+    </tr>
+    <tr>
+      <th rowspan="3" scope="rowgroup">3 Лицо</th>
+      <th scope="row">♂</th>
+      <td>он</td>
+      <td>его</td>
+    </tr>
+    <tr>
+      <th scope="row">♀</th>
+      <td>она</td>
+      <td>её</td>
+    </tr>
+    <tr>
+      <th scope="row">o</th>
+      <td>оно</td>
+      <td>его</td>
+    </tr>
+    <tr>
+      <th rowspan="3" scope="rowgroup">Множ.числ.</th>
+      <th colspan="2" scope="row">1 Лицо</th>
+      <td>мы</td>
+      <td>нас</td>
+    </tr>
+    <tr>
+      <th colspan="2" scope="row">2 Лицо</th>
+      <td>вы</td>
+      <td>вас</td>
+    </tr>
+    <tr>
+      <th colspan="2" scope="row">2 Лицо</th>
+      <td>они</td>
+      <td>их</td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.</p>
+Если правильно представить таблицу HTML, интерпретировать её данные смогут даже люди, имеющие проблемы со зрением.
 
-<h3 id="Оформление_таблиц">Оформление таблиц</h3>
+### Оформление таблиц
 
-<p><a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html">Исходный код HTML (HTML source code)</a> вышеприведённой таблице есть в GitHub; посмотрите его и <a href="https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html">живой пример (look at the live example)</a>! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.</p>
+[Исходный код HTML (HTML source code)](https://github.com/mdn/learning-area/blob/master/html/tables/basic/personal-pronouns.html) вышеприведённой таблице есть в GitHub; посмотрите его и [живой пример (look at the live example)](https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns.html)! Вы заметите, что таблица там выглядит иначе — это потому, что на сайте MDN к этим данным была применена таблица стилей, а приведённый в GitHub пример информации о стиле не имеет.
 
-<p>Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей (<a href="/en-US/docs/Learn/CSS">CSS</a>). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье <a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a>.</p>
+Не питайте ложных иллюзий - чтобы эффективно представлять таблицы в веб, необходимо придать им хорошую структуру в HTML и применить к ним таблицы стилей ([CSS](/ru/docs/Learn/CSS)). В данном разделе мы сфокусируемся на HTML, чтобы узнать о том, что касается CSS, вам надо обратиться к статье [Стилизация таблиц](/ru/docs/Learn/CSS/Building_blocks/Styling_tables).
 
-<p>В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">здесь</a>, можно также использовать <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">шаблон HTML</a>, применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.</p>
+В этом разделе мы не фокусируемся на CSS, но всё же дали простейшую таблицу стилей CSS, чтобы сделать таблицы более читабельными. Эту таблицу стилей можно найти [здесь](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css), можно также использовать [шаблон HTML](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html), применяющий эту стаблицу стилей — вместе они дадут вам хорошую основу для экспериментов с таблицами HTML.
 
-<div class="note">
-<p><strong>Примечание</strong>: Посмотрите также <a href="https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html">таблицу personal_pronouns с применённым к ней стилем</a>, чтобы получить представление о том, как она выглядит.</p>
-</div>
+> **Примечание:** Посмотрите также [таблицу personal_pronouns с применённым к ней стилем](https://mdn.github.io/learning-area/html/tables/basic/personal-pronouns-styled.html), чтобы получить представление о том, как она выглядит.
 
-<h3 id="Когда_не_надо_использовать_таблицы_HTML">Когда не надо использовать таблицы HTML?</h3>
+### Когда не надо использовать таблицы HTML?
 
-<p>HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе <a href="/ru/docs/Learn/Accessibility/HTML#%d0%92%d1%91%d1%80%d1%81%d1%82%d0%ba%d0%b0">Вёрстка</a> на <a href="/ru/docs/Learn/Accessibility">Начальном обучающем модуле доступности</a>. Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.</p>
+HTML-таблицы следует использовать для табличных данных — это то, для чего они предназначены. К сожалению, многие используют таблицы HTML для оформления веб-страниц, например, одна строка для заголовка, одна для содержимого, одна для сносок, и тому подобное. Подробнее об этом можно узнать в разделе [Вёрстка](/ru/docs/Learn/Accessibility/HTML#%d0%92%d1%91%d1%80%d1%81%d1%82%d0%ba%d0%b0) на [Начальном обучающем модуле доступности](/ru/docs/Learn/Accessibility). Это происходило из-за плохой поддержки CSS в разных браузерах; в наше время такое встречается гораздо реже, но иногда всё же попадается.
 
-<p>Короче говоря, использование таблиц в целях оформления вместо <a href="/en-US/docs/Learn/CSS/CSS_layout">методов CSS</a> является плохой идеей по следующим причинам :</p>
+Короче говоря, использование таблиц в целях оформления вместо [методов CSS](/ru/docs/Learn/CSS/CSS_layout) является плохой идеей по следующим причинам :
 
-<ol>
- <li><strong>Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders">Скринридеры (Screenreaders</a>), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.</li>
- <li><strong>Таблицы создают путаницу тегов</strong>: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.</li>
- <li><strong>Таблицы не реагируют автоматически на тип устройства</strong>: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.</li>
-</ol>
+1.  **Таблицы, используемые для оформления, уменьшают доступность страниц для людей, имеющих проблемы со зрением**: [Скринридеры (Screenreaders](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#screenreaders)), используемые ими, интерпретируют HTML-теги и читают содержимое пользователю. Поскольку таблицы не являются средством для представления структуры таблицы, и разметка получается сложнее, чем при использовании методов CSS, скринридеры вводят пользователей в заблуждение.
+2.  **Таблицы создают путаницу тегов**: Как уже упоминалось, оформление страниц с помощью таблиц даёт более сложную структуру разметки, чем специально предназначенные для этого методы. Соответственно, такой код труднее писать, поддерживать и отлаживать.
+3.  **Таблицы не реагируют автоматически на тип устройства**: У надлежащих контейнеров (например, {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, или {{htmlelement("div")}}) ширина по умолчанию равна 100% от их родительского элемента. У таблиц же размер по умолчанию подстраивается под их содержимое, так что чтобы они одинаково хорошо работали на разных типах устройств необходимо принимать дополнительные меры.
 
-<h2 id="Упражнение_Ваша_первая_таблица">Упражнение: ваша первая таблица</h2>
+## Упражнение: ваша первая таблица
 
-<p>Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.</p>
+Итак, мы уже достаточно говорили о теории, теперь возьмём конкретный пример и построим таблицу.
 
-<ol>
- <li>Прежде всего, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере.</li>
- <li>Содержимое любой таблицы заключается между двумя тегами : <strong><code><a href="/en-US/docs/Web/HTML/Element/table">&lt;table&gt;&lt;/table&gt;</a></code></strong>. Добавьте их в тело HTML.</li>
- <li>Самым маленьким контейнером в таблице является ячейка, она создаётся элементом <strong><code><a href="/en-US/docs/Web/HTML/Element/td">&lt;td&gt;</a></code></strong> ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:
-  <pre class="brush: html">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;</pre>
- </li>
- <li>Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
-  <pre class="brush: html">&lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
-&lt;td&gt;I'm your second cell.&lt;/td&gt;
-&lt;td&gt;I'm your third cell.&lt;/td&gt;
-&lt;td&gt;I'm your fourth cell.&lt;/td&gt;</pre>
- </li>
-</ol>
+1.  Прежде всего, создайте локальную копию [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html) и [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) в новой папке на вашем компьютере.
+2.  Содержимое любой таблицы заключается между двумя тегами : **[`<table></table>`](/en-US/docs/Web/HTML/Element/table)**. Добавьте их в тело HTML.
+3.  Самым маленьким контейнером в таблице является ячейка, она создаётся элементом **[`<td>`](/en-US/docs/Web/HTML/Element/td)** ('td' - сокращение от 'table data'). Введите внутри тегов table следующее:
 
-<p>Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент <code>&lt;td&gt; </code>создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.</p>
+    ```html
+    <td>Hi, I'm your first cell.</td>
+    ```
 
-<p>Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/tr">&lt;tr&gt;</a></code></strong> ('tr' - сокращение от 'table row'). Попробуем, как это получится.</p>
+4.  Чтобы получить строку из четырёх ячеек, необходимо скопировать эти теги три раза. Обновите содержимое таблицы так, чтобы она выглядела следующим образом:
 
-<ol>
- <li>Поместите четыре уже созданных ячейки между тегами <code>&lt;tr&gt;</code> как здесь показано:
+    ```html
+    <td>Hi, I'm your first cell.</td>
+    <td>I'm your second cell.</td>
+    <td>I'm your third cell.</td>
+    <td>I'm your fourth cell.</td>
+    ```
 
-  <pre class="brush: html">&lt;tr&gt;
-  &lt;td&gt;Hi, I'm your first cell.&lt;/td&gt;
-  &lt;td&gt;I'm your second cell.&lt;/td&gt;
-  &lt;td&gt;I'm your third cell.&lt;/td&gt;
-  &lt;td&gt;I'm your fourth cell.&lt;/td&gt;
-&lt;/tr&gt;</pre>
- </li>
- <li>Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент <code>&lt;tr&gt;</code>, а каждая ячейка должна быть внутри <code>элемента &lt;td&gt;</code>.</li>
-</ol>
+Как видите, ячейки не располагаются одна под другой, на самом деле они автоматически выравниваются по отношению к другим ячейкам той же строки. Каждый элемент `<td> `создаёт отдельную ячейку, а все вместе они создают первую строку. Каждая добавленная ячейка удлиняет эту строку.
 
-<p>В результате получится таблица, которая будет выглядеть примерно так:</p>
+Чтобы эта строка перестала расти, а новые ячейки перешли на вторую строку, необходимо использовать элемент **[`<tr>`](/en-US/docs/Web/HTML/Element/tr)** ('tr' - сокращение от 'table row'). Попробуем, как это получится.
 
-<table>
- <tbody>
-  <tr>
-   <td>Hi, I'm your first cell.</td>
-   <td>I'm your second cell.</td>
-   <td>I'm your third cell.</td>
-   <td>I'm your fourth cell.</td>
-  </tr>
-  <tr>
-   <td>Second row, first cell.</td>
-   <td>Cell 2.</td>
-   <td>Cell 3.</td>
-   <td>Cell 4.</td>
-  </tr>
- </tbody>
-</table>
+1.  Поместите четыре уже созданных ячейки между тегами `<tr>` как здесь показано:
+
+    ```html
+    <tr>
+      <td>Hi, I'm your first cell.</td>
+      <td>I'm your second cell.</td>
+      <td>I'm your third cell.</td>
+      <td>I'm your fourth cell.</td>
+    </tr>
+    ```
+
+2.  Теперь, когда одна строка уже есть, добавим ещё — каждую строку надо вложить в дополнительный элемент `<tr>`, а каждая ячейка должна быть внутри `элемента <td>`.
+
+В результате получится таблица, которая будет выглядеть примерно так:
+
+| Hi, I'm your first cell. | I'm your second cell. | I'm your third cell. | I'm your fourth cell. |
+| ------------------------ | --------------------- | -------------------- | --------------------- |
+| Second row, first cell.  | Cell 2.               | Cell 3.              | Cell 4.               |
+
+> **Примечание:** Этот пример можно также найти на GitHub под названием [simple-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html) ([see it live also](https://mdn.github.io/learning-area/html/tables/basic/simple-table.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример можно также найти на GitHub под названием <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p>
-</div>
-
-<h2 id="Добавление_заголовков_с_помощью_элементов_&lt;th>">Добавление заголовков с помощью элементов &lt;th&gt;</h2>
-
-<p>Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;td&gt;&amp;nbsp;&lt;/td&gt;
-    &lt;td&gt;Knocky&lt;/td&gt;
-    &lt;td&gt;Flor&lt;/td&gt;
-    &lt;td&gt;Ella&lt;/td&gt;
-    &lt;td&gt;Juan&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Breed&lt;/td&gt;
-    &lt;td&gt;Jack Russell&lt;/td&gt;
-    &lt;td&gt;Poodle&lt;/td&gt;
-    &lt;td&gt;Streetdog&lt;/td&gt;
-    &lt;td&gt;Cocker Spaniel&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Age&lt;/td&gt;
-    &lt;td&gt;16&lt;/td&gt;
-    &lt;td&gt;9&lt;/td&gt;
-    &lt;td&gt;10&lt;/td&gt;
-    &lt;td&gt;5&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Owner&lt;/td&gt;
-    &lt;td&gt;Mother-in-law&lt;/td&gt;
-    &lt;td&gt;Me&lt;/td&gt;
-    &lt;td&gt;Me&lt;/td&gt;
-    &lt;td&gt;Sister-in-law&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Eating Habits&lt;/td&gt;
-    &lt;td&gt;Eats everyone's leftovers&lt;/td&gt;
-    &lt;td&gt;Nibbles at food&lt;/td&gt;
-    &lt;td&gt;Hearty eater&lt;/td&gt;
-    &lt;td&gt;Will eat till he explodes&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Теперь как выглядит таблица:</p>
+## Добавление заголовков с помощью элементов \<th>
 
+Теперь обратимся к табличным заголовкам — особым ячейкам, которые идут вначале строки или столбца и определяют тип данных, которые содержит данная строка или столбец (как "Person" и "Age" в первом примере данной статьи). Чтобы показать, для чего они нужны, возьмём следующий пример. Сначала исходный код:
+
+```html
 <table>
- <tbody>
   <tr>
-   <td></td>
-   <td>Knocky</td>
-   <td>Flor</td>
-   <td>Ella</td>
-   <td>Juan</td>
+    <td>&nbsp;</td>
+    <td>Knocky</td>
+    <td>Flor</td>
+    <td>Ella</td>
+    <td>Juan</td>
   </tr>
   <tr>
-   <td>Breed</td>
-   <td>Jack Russell</td>
-   <td>Poodle</td>
-   <td>Streetdog</td>
-   <td>Cocker Spaniel</td>
+    <td>Breed</td>
+    <td>Jack Russell</td>
+    <td>Poodle</td>
+    <td>Streetdog</td>
+    <td>Cocker Spaniel</td>
   </tr>
   <tr>
-   <td>Age</td>
-   <td>16</td>
-   <td>9</td>
-   <td>10</td>
-   <td>5</td>
+    <td>Age</td>
+    <td>16</td>
+    <td>9</td>
+    <td>10</td>
+    <td>5</td>
   </tr>
   <tr>
-   <td>Owner</td>
-   <td>Mother-in-law</td>
-   <td>Me</td>
-   <td>Me</td>
-   <td>Sister-in-law</td>
+    <td>Owner</td>
+    <td>Mother-in-law</td>
+    <td>Me</td>
+    <td>Me</td>
+    <td>Sister-in-law</td>
   </tr>
   <tr>
-   <td>Eating Habits</td>
-   <td>Eats everyone's leftovers</td>
-   <td>Nibbles at food</td>
-   <td>Hearty eater</td>
-   <td>Will eat till he explodes</td>
+    <td>Eating Habits</td>
+    <td>Eats everyone's leftovers</td>
+    <td>Nibbles at food</td>
+    <td>Hearty eater</td>
+    <td>Will eat till he explodes</td>
   </tr>
- </tbody>
 </table>
+```
 
-<p>Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.</p>
+Теперь как выглядит таблица:
 
-<h3 id="Упражнение_заголовки">Упражнение: заголовки</h3>
+|               | Knocky                    | Flor            | Ella         | Juan                      |
+| ------------- | ------------------------- | --------------- | ------------ | ------------------------- |
+| Breed         | Jack Russell              | Poodle          | Streetdog    | Cocker Spaniel            |
+| Age           | 16                        | 9               | 10           | 5                         |
+| Owner         | Mother-in-law             | Me              | Me           | Sister-in-law             |
+| Eating Habits | Eats everyone's leftovers | Nibbles at food | Hearty eater | Will eat till he explodes |
 
-<p>Попробуем улучшить эту таблицу.</p>
+Проблема в том, что, хотя вы и можете представить, о чем идёт речь, ссылаться на эти данные не так легко, как хотелось бы. Лучше, чтобы строка и столбец с заголовками как-то выделялись.
 
-<ol>
- <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.</li>
- <li>Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент <strong><code><a href="/en-US/docs/Web/HTML/Element/th">&lt;th&gt;</a></code></strong> ('th' сокращение от 'table header'). Он работает в точности как <code>&lt;td&gt;</code>, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы <code>&lt;td&gt;</code>, содержащие заголовки, на элементы <code>&lt;th&gt;</code>.</li>
- <li>Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.</li>
-</ol>
+### Упражнение: заголовки
 
-<div class="note">
-<p><strong>Примечание</strong>: Законченный пример можно найти на <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> в GitHub (<a href="https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">посмотрите живой пример</a>).</p>
-</div>
+Попробуем улучшить эту таблицу.
 
-<h3 id="Для_чего_нужны_заголовки">Для чего нужны заголовки?</h3>
+1.  Сначала создайте локальную копию [dogs-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html) и [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) в новой папке на вашем компьютере. HTML содержит пример Dogs, который вы уже видели выше.
+2.  Чтобы опознавать заголовки таблицы в качестве заголовков, визуально и семантически, можно использовать элемент **[`<th>`](/en-US/docs/Web/HTML/Element/th)** ('th' сокращение от 'table header'). Он работает в точности как `<td>`, за исключением того, что обозначает заголовок, а не обычную ячейку. Замените в своём HTML все элементы `<td>`, содержащие заголовки, на элементы `<th>`.
+3.  Сохраните HTML и загрузите его в браузер, и вы увидите, что заголовки теперь выглядят как заголовки.
 
-<p>Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.</p>
+> **Примечание:** Законченный пример можно найти на [dogs-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html) в GitHub ([посмотрите живой пример](https://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.</p>
-</div>
+### Для чего нужны заголовки?
 
-<p>Заголовки дают дополнительное преимущество — вместе с атрибутом <code>scope</code> (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно</p>
+Мы уже частично ответили на этот вопрос — когда заголовки выделяются, легче искать данные и таблица выглядит лучше.
 
-<h2 id="Слияние_нескольких_строк_или_столбцов">Слияние нескольких строк или столбцов</h2>
+> **Примечание:** По умолчанию к заголовкам таблицы применяется определённый стиль — они выделены жирным шрифтом и выровнены по центру, даже если вы не задавали для них стиль специально.
 
-<p>Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.</p>
+Заголовки дают дополнительное преимущество — вместе с атрибутом `scope` (который мы будем изучать в следующей статье) они помогают улучшить связь каждого заголовка со всеми данными строки или столбца одновременно, что довольно полезно
 
-<p>Исходная разметка выглядит так:</p>
+## Слияние нескольких строк или столбцов
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Animals&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Hippopotamus&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Horse&lt;/th&gt;
-    &lt;td&gt;Mare&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Stallion&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Crocodile&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Chicken&lt;/th&gt;
-    &lt;td&gt;Cock&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Rooster&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+Иногда нам нужно, чтобы ячейки распространялись на несколько строк или столбцов. Возьмём простой пример, в котором приведены имена животных. Иногда бывает нужно вывести имена людей рядом с именами животных. А иногда это не требуется, и тогда мы хотим, чтобы имя животного занимало всю ширину.
 
-<p>Но результат не такой, как хотелось бы:</p>
+Исходная разметка выглядит так:
 
+```html
 <table>
- <tbody>
   <tr>
-   <th>Animals</th>
+    <th>Animals</th>
   </tr>
   <tr>
-   <th>Hippopotamus</th>
+    <th>Hippopotamus</th>
   </tr>
   <tr>
-   <th>Horse</th>
-   <td>Mare</td>
+    <th>Horse</th>
+    <td>Mare</td>
   </tr>
   <tr>
-   <td>Stallion</td>
+    <td>Stallion</td>
   </tr>
   <tr>
-   <th>Crocodile</th>
+    <th>Crocodile</th>
   </tr>
   <tr>
-   <th>Chicken</th>
-   <td>Cock</td>
+    <th>Chicken</th>
+    <td>Cock</td>
   </tr>
   <tr>
-   <td>Rooster</td>
+    <td>Rooster</td>
   </tr>
- </tbody>
 </table>
+```
 
-<p>Нужно, чтобы  "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse" и "Chicken" - на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты <code>colspan</code> <code>и rowspan</code>, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, <code>colspan="2"</code> распространяет ячейку на два столбца.</p>
-
-<p>Воспользуемся <code>colspan</code> и <code>rowspan</code> чтобы улучшить таблицу.</p>
+Но результат не такой, как хотелось бы:
 
-<ol>
- <li>Сначала создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.</li>
- <li>Затем используйте атрибут <code>colspan</code> чтобы распространить "Animals", "Hippopotamus" и "Crocodile" на два столбца.</li>
- <li>Наконец, используйте атрибут <code>rowspan</code> чтобы распространить  "Horse" и "Chicken" на две строки.</li>
- <li>Сохраните код и откройте его в браузере, чтобы увидеть улучшения.</li>
-</ol>
+| Animals      |      |
+| ------------ | ---- |
+| Hippopotamus |      |
+| Horse        | Mare |
+| Stallion     |      |
+| Crocodile    |      |
+| Chicken      | Cock |
+| Rooster      |      |
 
-<div class="note">
-<p><strong>Примечание</strong>: Законченный пример можно посмотреть в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> на GitHub (<a href="https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">живой пример</a>).</p>
-</div>
+Нужно, чтобы "Animals", "Hippopotamus" и "Crocodile" распространялись на два столбца, а "Horse" и "Chicken" - на две строки. К счастью, табличные заголовки и ячейки имеют атрибуты `colspan` `и rowspan`, которые позволяют это сделать. Оба принимают безразмерное числовое значение, которое равно количеству строк или столбцов, на которые должны распространяться ячейки. Например, `colspan="2"` распространяет ячейку на два столбца.
 
-<table id="tabular" style="background-color: white;">
-</table>
+Воспользуемся `colspan` и `rowspan` чтобы улучшить таблицу.
 
-<h2 id="Стилизация_столбцов">Стилизация столбцов</h2>
+1.  Сначала создайте локальную копию [animals-table.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html) и [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css) в новой папке на вашем компьютере. Код HTML содержит пример с животными, который вы уже видели выше.
+2.  Затем используйте атрибут `colspan` чтобы распространить "Animals", "Hippopotamus" и "Crocodile" на два столбца.
+3.  Наконец, используйте атрибут `rowspan` чтобы распространить "Horse" и "Chicken" на две строки.
+4.  Сохраните код и откройте его в браузере, чтобы увидеть улучшения.
 
-<p>И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы  <strong><code><a href="/en-US/docs/Web/HTML/Element/col">&lt;col&gt;</a></code></strong> и <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup">&lt;colgroup&gt;</a></code></strong>. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.</p>
+> **Примечание:** Законченный пример можно посмотреть в [animals-table-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html) на GitHub ([живой пример](https://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html)).
 
-<p>Возьмём простой пример:</p>
+## Стилизация столбцов
 
-<pre class="brush: html">&lt;table&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Data 1&lt;/th&gt;
-    &lt;th style="background-color: yellow"&gt;Data 2&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Calcutta&lt;/td&gt;
-    &lt;td style="background-color: yellow"&gt;Orange&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Robots&lt;/td&gt;
-    &lt;td style="background-color: yellow"&gt;Jazz&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
+И последняя возможность, о которой рассказывается в данной статье. HTML позволяет указать, какой стиль нужно применять к целому столбцу данных сразу — для этого применяют элементы **[`<col>`](/en-US/docs/Web/HTML/Element/col)** и **[`<colgroup>`](/en-US/docs/Web/HTML/Element/colgroup)**. Их ввели, поскольку задавать стиль для каждой ячейки в отдельности или использовать сложный селектор вроде {{cssxref(":nth-child()")}} было бы слишком утомительно.
 
-<p>Что даёт нам:</p>
+Возьмём простой пример:
 
+```html
 <table>
- <tbody>
   <tr>
-   <th>Data 1</th>
-   <th style="background-color: yellow;">Data 2</th>
+    <th>Data 1</th>
+    <th style="background-color: yellow">Data 2</th>
   </tr>
   <tr>
-   <td>Calcutta</td>
-   <td style="background-color: yellow;">Orange</td>
+    <td>Calcutta</td>
+    <td style="background-color: yellow">Orange</td>
   </tr>
   <tr>
-   <td>Robots</td>
-   <td style="background-color: yellow;">Jazz</td>
+    <td>Robots</td>
+    <td style="background-color: yellow">Jazz</td>
   </tr>
- </tbody>
 </table>
+```
 
-<p>Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить <code>class</code> на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе <code>&lt;col&gt;</code>. <code>Элемент &lt;col&gt;</code> задаётся в контейнере <code>&lt;colgroup&gt;</code> сразу же за открывающим тегом <code>&lt;table&gt;</code>. Эффект, который мы видели выше, можно задать так:</p>
-
-<pre class="brush: html">&lt;table&gt;
-  &lt;colgroup&gt;
-    &lt;col&gt;
-    &lt;col style="background-color: yellow"&gt;
-  &lt;/colgroup&gt;
-  &lt;tr&gt;
-    &lt;th&gt;Data 1&lt;/th&gt;
-    &lt;th&gt;Data 2&lt;/th&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Calcutta&lt;/td&gt;
-    &lt;td&gt;Orange&lt;/td&gt;
-  &lt;/tr&gt;
-  &lt;tr&gt;
-    &lt;td&gt;Robots&lt;/td&gt;
-    &lt;td&gt;Jazz&lt;/td&gt;
-  &lt;/tr&gt;
-&lt;/table&gt;</pre>
-
-<p>Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент <code>&lt;col&gt;</code> ввести необходимо — иначе к первому столбцу не будет применён стиль.</p>
-
-<p>Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент <code>&lt;col&gt;</code> с атрибутом span, таким образом:</p>
-
-<pre class="brush: html">&lt;colgroup&gt;
-  &lt;col style="background-color: yellow" span="2"&gt;
-&lt;/colgroup&gt;</pre>
+Что даёт нам:
 
-<p>Подобно <code>colspan</code> и <code>rowspan</code>, <code>span</code> принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.</p>
+| Data 1   | Data 2 |
+| -------- | ------ |
+| Calcutta | Orange |
+| Robots   | Jazz   |
 
-<h3 id="Упражнение_colgroup_и_col">Упражнение: colgroup и col</h3>
-
-<p>Теперь попробуйте сами.</p>
-
-<p>Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch),  кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.</p>
+Он не идеален, поскольку нам пришлось повторить информацию о стиле для всех трёх ячеек в столбце (в реальном проекте, возможно, придётся вводить `class` на всех трёх и вводит правило в таблице стилей). Вместо этого, мы можем задать информацию один раз, в элементе `<col>`. `Элемент <col>` задаётся в контейнере `<colgroup>` сразу же за открывающим тегом `<table>`. Эффект, который мы видели выше, можно задать так:
 
+```html
 <table>
- <colgroup>
-  <col>
-  <col style="background-color: #97DB9A;">
-  <col style="width: 42px;">
-  <col style="background-color: #97DB9A;">
-  <col style="background-color: #DCC48E; border: 4px solid #C1437A;">
-  <col style="width: 42px;">
- </colgroup>
- <tbody>
-  <tr>
-   <td></td>
-   <th>Mon</th>
-   <th>Tues</th>
-   <th>Wed</th>
-   <th>Thurs</th>
-   <th>Fri</th>
-   <th>Sat</th>
-   <th>Sun</th>
-  </tr>
+  <colgroup>
+    <col>
+    <col style="background-color: yellow">
+  </colgroup>
   <tr>
-   <th>1st period</th>
-   <td>English</td>
-   <td></td>
-   <td></td>
-   <td>German</td>
-   <td>Dutch</td>
-   <td></td>
-   <td></td>
+    <th>Data 1</th>
+    <th>Data 2</th>
   </tr>
   <tr>
-   <th>2nd period</th>
-   <td>English</td>
-   <td>English</td>
-   <td></td>
-   <td>German</td>
-   <td>Dutch</td>
-   <td></td>
-   <td></td>
+    <td>Calcutta</td>
+    <td>Orange</td>
   </tr>
   <tr>
-   <th>3rd period</th>
-   <td></td>
-   <td>German</td>
-   <td></td>
-   <td>German</td>
-   <td>Dutch</td>
-   <td></td>
-   <td></td>
+    <td>Robots</td>
+    <td>Jazz</td>
   </tr>
-  <tr>
-   <th>4th period</th>
-   <td></td>
-   <td>English</td>
-   <td></td>
-   <td>English</td>
-   <td>Dutch</td>
-   <td></td>
-   <td></td>
-  </tr>
- </tbody>
 </table>
+```
+
+Мы определяем два "стилизующих столбца". Мы не применяем стиль к первому столбцу, но пустой элемент `<col>` ввести необходимо — иначе к первому столбцу не будет применён стиль.
+
+Если бы мы хотели применить информацию о стиле к обоим столбцам, мы могли бы просто ввести один элемент `<col>` с атрибутом span, таким образом:
+
+```html
+<colgroup>
+  <col style="background-color: yellow" span="2">
+</colgroup>
+```
+
+Подобно `colspan` и `rowspan`, `span` принимает безразмерное числовое значение, указывающее, к какому количеству столбцов нужно применить данный стиль.
+
+### Упражнение: colgroup и col
+
+Теперь попробуйте сами.
+
+Ниже приведена таблица уроков по языкам. В пятницу (Friday) новый класс целый день изучает голландский (Dutch), кроме того, во вторник (Tuesday) и четверг (Thursdays) есть занятия по немецкому (German). Учительница хочет выделить столбцы, соответствующие дням, когда она преподаёт.
+
+|            | Mon     | Tues    | Wed | Thurs   | Fri   | Sat | Sun |
+| ---------- | ------- | ------- | --- | ------- | ----- | --- | --- |
+| 1st period | English |         |     | German  | Dutch |     |     |
+| 2nd period | English | English |     | German  | Dutch |     |     |
+| 3rd period |         | German  |     | German  | Dutch |     |     |
+| 4th period |         | English |     | English | Dutch |     |     |
 
-<p>Заново создайте таблицу, проделав указанные ниже действия.</p>
+Заново создайте таблицу, проделав указанные ниже действия.
 
-<ol>
- <li>Сначала создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.</li>
- <li>Добавьте элемент <code>&lt;colgroup&gt;</code> вверху таблицы, сразу же под тегом <code>&lt;table&gt;</code>, куда вы сможете вставлять элементы <code>&lt;col&gt;</code>.</li>
- <li>Первые два столбца надо оставить без стиля..</li>
- <li>Добавьте цвет фона для третьего столбца. Значением атрибута <code>style</code> будет  <code>background-color:#97DB9A;</code></li>
- <li>Задайте ширину для четвёртого столбца. <code>Значением атрибута style</code> будет <code>width: 42px;</code></li>
- <li>Добавьте цвет фона для пятого столбца. Значением атрибута <code>style</code> будет <code>background-color: #97DB9A;</code></li>
- <li>Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута <code>style</code> будут: <code>background-color:#DCC48E; border:4px solid #C1437A;</code></li>
- <li>Последние два дня выходные; значением атрибута style <code>будет width: 42px;</code></li>
-</ol>
+1.  Сначала создайте локальную копию файла [timetable.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html) в новой папке на вашем компьютере. Код HTML содержит таблицу, которую вы уже видели выше, но без информации о стиле.
+2.  Добавьте элемент `<colgroup>` вверху таблицы, сразу же под тегом `<table>`, куда вы сможете вставлять элементы `<col>`.
+3.  Первые два столбца надо оставить без стиля..
+4.  Добавьте цвет фона для третьего столбца. Значением атрибута `style` будет `background-color:#97DB9A;`
+5.  Задайте ширину для четвёртого столбца. `Значением атрибута style` будет `width: 42px;`
+6.  Добавьте цвет фона для пятого столбца. Значением атрибута `style` будет `background-color: #97DB9A;`
+7.  Добавьте другой цвет фона и границу для шестого столбца, чтобы показать, что это особый день и она ведёт новый класс. Значениями атрибута `style` будут: `background-color:#DCC48E; border:4px solid #C1437A;`
+8.  Последние два дня выходные; значением атрибута style `будет width: 42px;`
 
-<p>Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">timetable-fixed.html</a> (<a href="https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">посмотрите живой пример</a>).</p>
+Посмотрите, что у вас получилось. Если застрянете, или захотите себя проверить, можете посмотреть нашу версию в [timetable-fixed.html](https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html) ([посмотрите живой пример](https://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html)).
 
-<h2 id="Итог">Итог</h2>
+## Итог
 
-<p>Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.</p>
+Здесь приведены практически все базовые сведения о таблицах HTML. В следующей статье вы получите более продвинутые сведения на эту тему.
 
-<div>{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+{{NextMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
diff --git a/files/ru/learn/html/tables/index.md b/files/ru/learn/html/tables/index.md
index 3bd50bb5ca5523..8e1c1eebe3c457 100644
--- a/files/ru/learn/html/tables/index.md
+++ b/files/ru/learn/html/tables/index.md
@@ -3,32 +3,26 @@ title: HTML таблицы
 slug: Learn/HTML/Tables
 translation_of: Learn/HTML/Tables
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей (<a href="/ru-RU/docs/Learn/CSS">CSS</a>) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.</p>
+Структурирование табличных данных является в HTML самой обычной задачей, для этой цели есть множество элементов и атрибутов. С добавлением таблиц стилей ([CSS](/ru/docs/Learn/CSS)) HTML с лёгкостью позволяет выводить в веб различные таблицы, например, расписание школьных уроков, график посещения бассейна, или статистические данные о ваших любимых динозаврах или футбольных командах. В данном разделе вы узнаете все, что вам потребуется для структурирования табличных данных с помощью HTML.
 
-<h2 id="Необходимые_условия">Необходимые условия</h2>
+## Необходимые условия
 
-<p>Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите <a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML (Introduction to HTML</a>).</p>
+Прежде чем приступить к данному разделу, вы должны ознакомиться с основами HTML — смотрите [Введение в HTML (Introduction to HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** Если компьютер/планшет/другое устройство, на котором вы работаете, не позволяет вам самостоятельно создавать файлы, то приводимые здесь примеры кода можно посмотреть в онлайновых программах для кодирования, например [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<p>Данный раздел содержит следующие статьи:</p>
+Данный раздел содержит следующие статьи:
 
-<dl>
- <dt><a href="/ru-RU/docs/Learn/HTML/Tables/Basics">Основы работы с таблицами HTML</a></dt>
- <dd>Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями - строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.</dd>
- <dt><a href="/ru/docs/Learn/HTML/Tables/Advanced">Продвинутые возможности таблиц HTML и доступность</a></dt>
- <dd>Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: "голову" (head), "тело" (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.</dd>
-</dl>
+- [Основы работы с таблицами HTML](/ru/docs/Learn/HTML/Tables/Basics)
+  - : Эта статья поможет вам начать работу с таблицами HTML, познакомив с самыми базовыми понятиями - строками и ячейками, заголовками, слиянием строк или столбцов, а также с тем, как объединять все ячейки столбца для оформительских целей.
+- [Продвинутые возможности таблиц HTML и доступность](/ru/docs/Learn/HTML/Tables/Advanced)
+  - : Во второй статье данного раздела мы рассмотрим более продвинутые возможности таблиц HTML — заголовки/подписи, а также разбиение строк таблицы на три части: "голову" (head), "тело" (body) и нижний колонтитул (footer) — а также исследуем, как можно представлять таблицы для людей, имеющих проблемы со зрением.
 
-<h2 id="Проверка_знаний">Проверка знаний</h2>
+## Проверка знаний
 
-<dl>
- <dt><a href="/ru-RU/docs/Learn/HTML/Tables/Structuring_planet_data">Структурирование данных о планетах</a></dt>
- <dd>Для проверки усвоенных знаний мы дадим вам ряд данных, касающихся планет солнечной системы, чтобы представить их в виде таблицы HTML.</dd>
-</dl>
+- [Структурирование данных о планетах](/ru/docs/Learn/HTML/Tables/Structuring_planet_data)
+  - : Для проверки усвоенных знаний мы дадим вам ряд данных, касающихся планет солнечной системы, чтобы представить их в виде таблицы HTML.
diff --git a/files/ru/learn/html/tables/structuring_planet_data/index.md b/files/ru/learn/html/tables/structuring_planet_data/index.md
index 3a815eabb9a4a2..e62b6560183d0b 100644
--- a/files/ru/learn/html/tables/structuring_planet_data/index.md
+++ b/files/ru/learn/html/tables/structuring_planet_data/index.md
@@ -7,90 +7,64 @@ tags:
   - таблицы
 translation_of: Learn/HTML/Tables/Structuring_planet_data
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
 
-<div>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</div>
+В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.
 
-<p class="summary">В нашей аттестации, мы предоставим вам некоторые данные о планетах солнечной системы, и убедим вас структурировать их в HTML таблицу.</p>
+| Необходимые навыки: | Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле. |
+| ------------------- | ------------------------------------------------------------------------------------------------------- |
+| Цели:               | Проверить знания о HTML таблицах и связанными с ними возможностями.                                     |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Перед тем, как попытаться пройти эту аттестацию, вы должны были уже разобрать все статьи в этом модуле.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цели:</th>
-   <td>Проверить знания о HTML таблицах и связанными с ними возможностями.</td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Для того, чтобы начать аттестацию, скопируйте [blank-template.html](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html), [minimal-table.css](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css), и [planets-data.txt](https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt) в новую директорию на вашем компьютере.
 
-<p>Для того, чтобы начать аттестацию, скопируйте <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/blank-template.html">blank-template.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/minimal-table.css">minimal-table.css</a>, и <a href="https://github.com/mdn/learning-area/blob/master/html/tables/assessment-start/planets-data.txt">planets-data.txt</a> в новую директорию на вашем компьютере.</p>
+> **Примечание:** В качестве альтернативы, вы можете использовать такие сайты, как [JSBin](https://jsbin.com/) или [Glitch](https://glitch.com/), чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять `<script>`/`<style>` элементы в HTML страницу.
 
-<div class="note">
-<p><strong>Примечание</strong>: В качестве альтернативы, вы можете использовать такие сайты, как  <a class="external external-icon" href="https://jsbin.com/">JSBin</a> или <a href="https://glitch.com/">Glitch</a>, чтобы пройти аттестацию. Вы можете вставлять HTML, CSS и JavaScript в один из этих онлайн редакторов. Если используемый вами онлайн редактор не имеет отдельных JavaScript/CSS панелей, не стесняйтесь вставлять <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> элементы в HTML страницу.</p>
-</div>
+## Краткое описание проекта
 
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.
 
-<p>Вы работаете в школе. В настоящее время ваши ученики изучают планеты солнечной системы, и вы хотите обеспечить их наглядным пособием для поиска фактов и данных о планетах. Таблица HTML была бы идеальным вариантом — вам необходимо взять необработанные данные, которые у вас есть, и превратить их в таблицу, следуя нижеприведённым инструкциям.</p>
+Готовая таблица должна выглядеть так:
 
-<p>Готовая таблица должна выглядеть так:</p>
+![](https://mdn.mozillademos.org/files/14609/assessment-table.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14609/assessment-table.png" style="display: block; margin: 0 auto;"></p>
+Вы можете также[ посмотреть на готовый вариант здесь](https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html) (не смотрите на исходный код — не жульничайте!).
 
-<p>Вы можете также<a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html"> посмотреть на готовый вариант здесь</a> (не смотрите на исходный код — не жульничайте!).</p>
+## Шаги для завершения
 
-<ul>
-</ul>
+Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле `planets-data.txt`. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.
 
-<h2 id="Шаги_для_завершения">Шаги для завершения</h2>
+1.  Откройте вашу копию `blank-template.html` , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.
+2.  Добавьте предоставленную подпись к вашей таблице ("Caption" в конце `planets-data.txt`).
+3.  Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.
+4.  Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть _семантически_.
+5.  Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.
+6.  Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.
+7.  Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.
 
-<p>Следующие шаги описывают что вам нужно сделать, чтобы завершить пример таблицы. Все данные, что вам нужны находятся в файле <code>planets-data.txt</code>. Если у вас возникли проблемы с визуализацией данных, посмотрите приведённый выше пример или попробуйте нарисовать диаграмму.</p>
+## Подсказки и советы
 
-<ol>
- <li>Откройте вашу копию <code>blank-template.html</code> , и запустите таблицу, предоставив ей внешний контейнер, заголовок и тело таблицы. Вам не нужен нижний колонтитул (footer) для этого примера.</li>
- <li>Добавьте предоставленную подпись к вашей таблице ("Caption" в конце <code>planets-data.txt</code>).</li>
- <li>Добавьте строку в заголовок таблицы, содержащую все заголовки столбцов.</li>
- <li>Создайте все строки содержимого внутри тела таблицы, помня, что все заголовки строк должны быть <em>семантически</em>.</li>
- <li>Убедитесь, что весь контент помещён в нужные ячейки - в исходных данных каждая строка данных о планете отображается рядом со связанной с ней планетой.</li>
- <li>Добавьте атрибуты, чтобы заголовки строк и столбцов были однозначно связаны со строками, столбцами или группами строк, для которых они выступают в качестве заголовков.</li>
- <li>Добавьте чёрную рамку вокруг столбца, который содержит все заголовки строк с именами планет.</li>
-</ol>
+- Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.
+- Заголовки групповых строк (например, _Jovian planets_), которые расположены слева от заголовков строк с именами планет (например, _Saturn_), немного сложно разобрать - необходимо убедиться, что каждый из них охватывает правильное количество строк и столбцов.
+- Один из способов связать заголовки с их строками / столбцами намного проще, чем другой.
 
-<h2 id="Подсказки_и_советы">Подсказки и советы</h2>
+## Аттестация или дальнейшая помощь
 
-<ul>
- <li>Первая ячейка строки заголовка должна быть пустой, и занимать два столбца.</li>
- <li>Заголовки групповых строк (например, <em>Jovian planets</em>), которые расположены слева от заголовков строк с именами планет (например, <em>Saturn</em>), немного сложно разобрать - необходимо убедиться, что каждый из них охватывает правильное количество строк и столбцов.</li>
- <li>Один из способов связать заголовки с их строками / столбцами намного проще, чем другой.</li>
-</ul>
+Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:
 
-<h2 id="Аттестация_или_дальнейшая_помощь">Аттестация или дальнейшая помощь</h2>
+1.  Разместите свою работу в онлайн-редакторе, таком как [CodePen](https://codepen.io/), [jsFiddle ](https://jsfiddle.net/)или [Glitch](https://glitch.com/).
+2.  Напишите сообщение с просьбой об оценке и/или помощи в [разделе обучения на форуме MDN Discourse](https://discourse.mozilla.org/c/mdn/learn). Ваш пост должен включать:
 
-<p>Если вы хотите, чтобы ваша работа была оценена, или вы застряли и хотите обратиться за помощью:</p>
+    - Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».
+    - Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.
+    - Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.
+    - Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.
 
-<ol>
- <li>Разместите свою работу в онлайн-редакторе, таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle </a>или <a href="https://glitch.com/">Glitch</a>.</li>
- <li>Напишите сообщение с просьбой об оценке и/или помощи в <a href="https://discourse.mozilla.org/c/mdn/learn">разделе обучения на форуме MDN Discourse</a>. Ваш пост должен включать:
-  <ul>
-   <li>Описательный заголовок, такой как «Требуется оценка для структурирования данных планеты».</li>
-   <li>Детали того, что вы уже пробовали, и что вы хотели бы, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите оценить свою работу.</li>
-   <li>Ссылка на пример, который вы хотите оценить или в котором вам нужна помощь, в онлайн-редакторе (как упомянуто в шаге 1 выше). Это хорошая практика в решении проблем - очень сложно помочь кому-то с проблемой кода, если вы не видите его код.</li>
-   <li>Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вам нужно помочь.</li>
-  </ul>
- </li>
-</ol>
+{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}
 
-<p>{{PreviousMenu("Learn/HTML/Tables/Advanced", "Learn/HTML/Tables")}}</p>
+## В этом модуле
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">HTML table basics</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">HTML table advanced features and accessibility</a></li>
- <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Structuring planet data</a></li>
-</ul>
+- [HTML table basics](/ru/docs/Learn/HTML/Tables/Basics)
+- [HTML table advanced features and accessibility](/ru/docs/Learn/HTML/Tables/Advanced)
+- [Structuring planet data](/ru/docs/Learn/HTML/Tables/Structuring_planet_data)
diff --git a/files/ru/learn/index.md b/files/ru/learn/index.md
index 083bdc114f05a9..791a1de99a2012 100644
--- a/files/ru/learn/index.md
+++ b/files/ru/learn/index.md
@@ -15,112 +15,101 @@ tags:
   - Обучение
 translation_of: Learn
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Добро пожаловать в обучающий раздел MDN. Эта серия статей направлена на то, чтобы предоставить начинающим с нуля в веб-программировании всё необходимое для того, чтобы начать разрабатывать сайты.</p>
+Добро пожаловать в обучающий раздел MDN. Эта серия статей направлена на то, чтобы предоставить начинающим с нуля в веб-программировании всё необходимое для того, чтобы начать разрабатывать сайты.
 
-<p>Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая <a href="https://developer.mozilla.org/ru/">остальные материалы MDN</a> и другие средние и продвинутые материалы, предполагающие существенные начальные знания.</p>
+Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая [остальные материалы MDN](https://developer.mozilla.org/ru/) и другие средние и продвинутые материалы, предполагающие существенные начальные знания.
 
-<p>Если вы начинаете с нуля, веб-разработка может оказаться непростой — мы будем держать вас за руку и давать вам достаточно подробностей, чтобы вы чувствовали себя комфортно и как следует изучили темы. Вы можете чувствовать себя как дома, будь вы студентом, изучающим веб-разработку (самостоятельно или на занятиях), преподавателем, ищущим материал для занятий, любителем или тем, кто просто хочет лучше разобраться в том, как работают веб-технологии.</p>
+Если вы начинаете с нуля, веб-разработка может оказаться непростой — мы будем держать вас за руку и давать вам достаточно подробностей, чтобы вы чувствовали себя комфортно и как следует изучили темы. Вы можете чувствовать себя как дома, будь вы студентом, изучающим веб-разработку (самостоятельно или на занятиях), преподавателем, ищущим материал для занятий, любителем или тем, кто просто хочет лучше разобраться в том, как работают веб-технологии.
 
-<h2 id="Что_нового">Что нового</h2>
+## Что нового
 
-<p>Контент в обучающем разделе регулярно пополняется. Мы начали вести <a href="/en-US/docs/Learn/Release_notes">примечания к версии обучающего раздела</a>, чтобы показать, что изменилось.</p>
+Контент в обучающем разделе регулярно пополняется. Мы начали вести [примечания к версии обучающего раздела](/ru/docs/Learn/Release_notes), чтобы показать, что изменилось.
 
-<p>Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем <a href="https://discourse.mozilla.org/c/mdn/236">форуме Discourse</a>.</p>
+Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем [форуме Discourse](https://discourse.mozilla.org/c/mdn/236).
 
-<div class="callout">
-<h3 id="Хотите_стать_фронтенд-разработчиком">Хотите стать фронтенд-разработчиком?</h3>
+> **Сноска:** ### Хотите стать фронтенд-разработчиком?Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.[Начать](/docs/Learn/Front-end_web_developer)
 
-<p>Мы составили курс, который включает всю важную информацию, необходимую для достижения вашей цели.</p>
+## С чего начать
 
-<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Начать</a></p>
-</div>
+- Я новичок Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «[Начало работы с вебом](/ru/docs/Learn/Getting_started_with_the_web)», которая представляет собой практическое вступление в веб-разработку.
+- Уже что-то знаю Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение {{glossary("HTML")}} и {{glossary("CSS")}} во всех подробностях: начните с нашей статьи «[Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)», а затем загляните в статью «[Вступление в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)».
+- Погружаемся в программирование Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в {{glossary("JavaScript")}} или разработку на стороне сервера. Загляните в разделы «[Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/First_steps)» и «[Первые шаги в программировании веб-сайтов на стороне сервера](/ru/docs/Learn/Server-side/First_steps)».
+- Фреймворки и инструменты Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению [инструментов веб-разработки на стороне клиента](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools), а затем углубиться в [JavaScript-фреймворки для фронтенда](/ru/docs/Learn/Tools_and_testing/%D0%A4%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4_JavaScript_%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8) и [программирование веб-сайтов на стороне сервера](/ru/docs/Learn/Server-side).
 
-<h2 id="С_чего_начать">С чего начать</h2>
+> **Примечание:** в нашем [глоссарии](/ru/docs/Glossary) вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «[Распространённые вопросы](/ru/docs/Learn/Common_questions)».
 
-<ul>
- <li>Я новичок Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «<a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с вебом</a>», которая представляет собой практическое вступление в веб-разработку.</li>
- <li>Уже что-то знаю Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение {{glossary("HTML")}} и {{glossary("CSS")}} во всех подробностях: начните с нашей статьи «<a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a>», а затем загляните в статью «<a href="/ru/docs/Learn/CSS/Introduction_to_CSS">Вступление в CSS</a>».</li>
- <li>Погружаемся в программирование Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в {{glossary("JavaScript")}} или разработку на стороне сервера. Загляните в разделы «<a href="/ru/docs/Learn/JavaScript/First_steps">Первые шаги в JavaScript</a>» и «<a href="/ru/docs/Learn/Server-side/First_steps">Первые шаги в программировании веб-сайтов на стороне сервера</a>».</li>
- <li>Фреймворки и инструменты Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools">инструментов веб-разработки на стороне клиента</a>, а затем углубиться в <a href="/ru/docs/Learn/Tools_and_testing/%D0%A4%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4_JavaScript_%D1%84%D1%80%D0%B5%D0%B9%D0%BC%D0%B2%D0%BE%D1%80%D0%BA%D0%B8">JavaScript-фреймворки для фронтенда</a> и <a href="/ru/docs/Learn/Server-side">программирование веб-сайтов на стороне сервера</a>.</li>
-</ul>
+## Изучаемые темы
 
-<div class="note">
-<p><strong>Примечание:</strong> в нашем <a href="/ru/docs/Glossary">глоссарии</a> вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «<a href="/ru/docs/Learn/Common_questions">Распространённые вопросы</a>».</p>
-</div>
+Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.
 
-<h2 id="Изучаемые_темы">Изучаемые темы</h2>
+- [Начало работы с вебом](/ru/docs/Learn/Getting_started_with_the_web)
+  - : Практическое введение в веб-разработку для начинающих.
+- [Изучение HTML: руководства и уроки](/ru/docs/Learn/HTML)
+  - : HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.
+- [CSS: стилизация веб-страниц](/ru/docs/Learn/CSS)
+  - : CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.
+- [JavaScript: разработка клиентских скриптов для динамических веб-страниц](/ru/docs/Learn/JavaScript)
+  - : JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.
+- [Веб-формы: работа с пользовательскими данными](/ru/docs/Learn/HTML/Forms)
+  - : Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.
+- [Доступность: сделаем интернет доступным для всех](/ru/docs/Learn/Доступность)
+  - : Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.
+- [Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми](/ru/docs/Learn/Performance)
+  - : Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
+- [Инструменты и тестирование](/ru/docs/Learn/Tools_and_testing)
+  - : В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.
+- [Серверное программирование веб-сайтов](/ru/docs/Learn/Server-side)
+  - : Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).
 
-<p>Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.</p>
+## Получение наших примеров кода
 
-<dl>
- <dt><a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с вебом</a></dt>
- <dd>Практическое введение в веб-разработку для начинающих.</dd>
- <dt><a href="/ru/docs/Learn/HTML">Изучение HTML: руководства и уроки </a></dt>
- <dd>HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.</dd>
- <dt><a href="/ru/docs/Learn/CSS">CSS: стилизация веб-страниц</a></dt>
- <dd>CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript">JavaScript: разработка клиентских скриптов для динамических веб-страниц </a></dt>
- <dd>JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.</dd>
- <dt><a href="/ru/docs/Learn/HTML/Forms">Веб-формы: работа с пользовательскими данными </a></dt>
- <dd>Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.</dd>
- <dt><a href="/ru/docs/Learn/Доступность">Доступность: сделаем интернет доступным для всех </a></dt>
- <dd>Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.</dd>
- <dt><a href="/ru/docs/Learn/Performance">Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми </a></dt>
- <dd>Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing">Инструменты и тестирование</a></dt>
- <dd>В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.</dd>
- <dt><a href="/ru/docs/Learn/Server-side">Серверное программирование веб-сайтов</a></dt>
- <dd>Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.js).</dd>
-</dl>
+Представленные в обучающем разделе примеры кода [доступны на GitHub](https://github.com/mdn/learning-area/). Если вы хотите скопировать их все на свой компьютер, самый простой способ — [загрузить ZIP-архив с последней веткой основного кода](https://github.com/mdn/learning-area/archive/master.zip).
 
-<h2 id="Получение_наших_примеров_кода">Получение наших примеров кода</h2>
+Если вы предпочитаете копировать репозиторий более гибким способом, позволяющим автоматические обновления, вы можете использовать следующую, более сложную инструкцию:
 
-<p>Представленные в обучающем разделе примеры кода <a href="https://github.com/mdn/learning-area/">доступны на GitHub</a>. Если вы хотите скопировать их все на свой компьютер, самый простой способ — <a href="https://github.com/mdn/learning-area/archive/master.zip">загрузить ZIP-архив с последней веткой основного кода</a>.</p>
+1.  [Установите Git](https://git-scm.com/downloads) на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.
+2.  Откройте [командную строку](https://www.lifewire.com/how-to-open-command-prompt-2618089) (Windows) или терминал ([Linux](https://help.ubuntu.com/community/UsingTheTerminal), [macOS](https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line)).
+3.  Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду:
 
-<p>Если вы предпочитаете копировать репозиторий более гибким способом, позволяющим автоматические обновления, вы можете использовать следующую, более сложную инструкцию:</p>
+    ```
+    git clone https://github.com/mdn/learning-area
+    ```
 
-<ol>
- <li><a href="https://git-scm.com/downloads">Установите Git</a> на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.</li>
- <li>Откройте <a href="https://www.lifewire.com/how-to-open-command-prompt-2618089">командную строку</a> (Windows) или терминал (<a href="https://help.ubuntu.com/community/UsingTheTerminal">Linux</a>, <a href="https://blog.teamtreehouse.com/introduction-to-the-mac-os-x-command-line">macOS</a>).</li>
- <li>Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду:
-  <pre>git clone https://github.com/mdn/learning-area</pre>
- </li>
- <li>Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо <a href="https://ru.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)">команды cd</a>).</li>
-</ol>
+4.  Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо [команды cd](<https://ru.wikipedia.org/wiki/Cd_(%D0%BA%D0%BE%D0%BC%D0%B0%D0%BD%D0%B4%D0%B0)>)).
 
-<p>Вы можете обновить репозиторий <code>learning-area</code> и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:</p>
+Вы можете обновить репозиторий `learning-area` и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:
 
-<ol>
- <li>В командной строке / терминале войдите в директорию <code>learning-area</code> командой <code>cd</code>. Например, если вы в родительском каталоге:
+1.  В командной строке / терминале войдите в директорию `learning-area` командой `cd`. Например, если вы в родительском каталоге:
 
-  <pre>cd learning-area</pre>
- </li>
- <li>Обновите репозиторий, выполнив следующую команду:
-  <pre>git pull</pre>
- </li>
-</ol>
+    ```
+    cd learning-area
+    ```
 
-<h2 id="Связаться_с_нами">Связаться с нами</h2>
+2.  Обновите репозиторий, выполнив следующую команду:
 
-<p>Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши <a href="/ru/docs/MDN/Community/Conversations#Asynchronous_discussions">списки рассылки</a> или <a href="https://developer.mozilla.org/ru/docs/MDN/Community/Conversations#Chat_in_IRC">IRC-каналы</a>. Мы хотели бы услышать от вас о том, что на нашем сайте что-то отсутствует или неправильно, запросы новых тем по обучению, просьбы помощи с аспектами, которые вы не понимаете, или что-то ещё.</p>
+    ```
+    git pull
+    ```
 
-<p>Если вам интересно создание или улучшение контента, посмотрите, <a href="/ru/Learn/How_to_contribute">как вы можете помочь</a>, и оставайтесь на связи! Мы будем очень рады поговорить с вами, будь вы обучающийся, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.</p>
+## Связаться с нами
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+Если вы хотите оставаться с нами на связи, то лучший способ — отправить сообщение в наши [списки рассылки](/ru/docs/MDN/Community/Conversations#Asynchronous_discussions) или [IRC-каналы](/ru/docs/MDN/Community/Conversations#Chat_in_IRC). Мы хотели бы услышать от вас о том, что на нашем сайте что-то отсутствует или неправильно, запросы новых тем по обучению, просьбы помощи с аспектами, которые вы не понимаете, или что-то ещё.
 
-<dl>
- <dt><a href="https://www.codecademy.com/">Codecademy</a></dt>
- <dd>Крутой интерактивный сайт для изучения языков программирования с нуля.</dd>
- <dt><a href="https://code.org/">Code.org</a></dt>
- <dd>Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.</dd>
- <dt><a href="https://exlskills.com/learn-en/courses">EXLskills</a> </dt>
- <dd>бесплатный и открытые курсы для обучения техническим навыкам, с наставничеством и обучением на основе проектов</dd>
- <dt><a href="https://teach.mozilla.org/web-literacy/">Карта веб-грамотности</a></dt>
- <dd>Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.</dd>
- <dt><a href="https://teach.mozilla.org/activities">Преподавательская деятельность</a></dt>
- <dd>Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.</dd>
- <dt><a href="https://edabit.com/challenges">Edabit</a></dt>
- <dd>Тысячи интерактивных задач JavaScript.</dd>
-</dl>
+Если вам интересно создание или улучшение контента, посмотрите, [как вы можете помочь](/ru/Learn/How_to_contribute), и оставайтесь на связи! Мы будем очень рады поговорить с вами, будь вы обучающийся, преподаватель, опытный веб-разработчик или кто-либо другой, заинтересованный в улучшении обучения.
+
+## Смотрите также
+
+- [Codecademy](https://www.codecademy.com/)
+  - : Крутой интерактивный сайт для изучения языков программирования с нуля.
+- [Code.org](https://code.org/)
+  - : Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.
+- [EXLskills](https://exlskills.com/learn-en/courses)
+  - : бесплатный и открытые курсы для обучения техническим навыкам, с наставничеством и обучением на основе проектов
+- [Карта веб-грамотности](https://teach.mozilla.org/web-literacy/)
+  - : Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.
+- [Преподавательская деятельность](https://teach.mozilla.org/activities)
+  - : Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.
+- [Edabit](https://edabit.com/challenges)
+  - : Тысячи интерактивных задач JavaScript.
diff --git a/files/ru/learn/javascript/asynchronous/index.md b/files/ru/learn/javascript/asynchronous/index.md
index fb1ab33af600e2..27bdcaaa3db6da 100644
--- a/files/ru/learn/javascript/asynchronous/index.md
+++ b/files/ru/learn/javascript/asynchronous/index.md
@@ -19,41 +19,33 @@ tags:
   - асинхронное программирование
 translation_of: Learn/JavaScript/Asynchronous
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">В этом модуле мы рассмотрим {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, почему это важно, и как это поможет эффективно справляться с потенциальной блокировкой операций, таких как получение ресурсов с сервера или запись в файл.</p>
+В этом модуле мы рассмотрим {{Glossary("asynchronous")}} {{Glossary("JavaScript")}}, почему это важно, и как это поможет эффективно справляться с потенциальной блокировкой операций, таких как получение ресурсов с сервера или запись в файл.
 
-<h2 id="Необходимые_знания">Необходимые знания</h2>
+## Необходимые знания
 
-<p>Асинхронный JavaScript довольно сложная тема, и мы советуем пройти <a href="/ru/docs/Learn/JavaScript/First_steps">Первые шаги в JavaScript</a> и <a href="/ru/docs/Learn/JavaScript/Building_blocks">Блоки в JavaScript</a> прежде чем начать эту тему.</p>
+Асинхронный JavaScript довольно сложная тема, и мы советуем пройти [Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/First_steps) и [Блоки в JavaScript](/ru/docs/Learn/JavaScript/Building_blocks) прежде чем начать эту тему.
 
-<p>Если вы ещё не знакомы с концепциями асинхронного программирования, вам стоит начать со статьи <a href="/ru/docs/Learn/JavaScript/Asynchronous/Concepts">Основные концепции асинхронного программирования</a> в этом модуле. А если уже знакомы, то можете сразу переходить к статье <a href="/ru/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a>.</p>
+Если вы ещё не знакомы с концепциями асинхронного программирования, вам стоит начать со статьи [Основные концепции асинхронного программирования](/ru/docs/Learn/JavaScript/Asynchronous/Concepts) в этом модуле. А если уже знакомы, то можете сразу переходить к статье [Введение в асинхронный JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing).
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы работаете за компьютером/планшетом/другим устройством где у вас нет возможности создавать собственные файлы, вы можете попробовать(почти все) примеры кода в одном из веб-приложений, таких, как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** Если вы работаете за компьютером/планшетом/другим устройством где у вас нет возможности создавать собственные файлы, вы можете попробовать(почти все) примеры кода в одном из веб-приложений, таких, как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Concepts">Основные концепции асинхронного программирования</a></dt>
- <dd>
- <p>В этой статье мы пройдёмся по нескольким важным концепциям касающихся асинхронного программирования, и того как это выглядит в браузерах и JavaScript. Вы должны усвоить эти концепции прежде чем изучать другие статьи в этом модуле.</p>
- </dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Introducing">Введение в асинхронный JavaScript</a></dt>
- <dd>В этой статье мы кратко расскажем о проблемах связанных с синхронным JavaScript-ом, и взглянем на различные техники асинхронного программирования с которыми вы столкнётесь, покажем вам как эти техники помогают решать проблемы синхронного JavaScript.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals">Кооперативная асинхронность в JavaScript: Таймауты и интервалы</a></dt>
- <dd>Здесь мы рассматриваем традиционные методы JavaScript, которые позволяют запускать код асинхронно по истечению заданного времени, или с регулярным интервалом (например: заданное количество раз в секунду), обсудим их пользу, а так же их неотъемлемые проблемы.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Promises">Изящная обработка асинхронных операций с Промисами</a></dt>
- <dd>Промисы это достаточно новая функция в языке JavaScript, которая позволяет вам откладывать дальнейшие операции, пока предыдущая не выполнится, или реагировать на её неудачное выполнение. Это очень полезно, для установки нужной последовательности операций для корректной работы. Эта статья показывает как работают промисы, и вы рассмотрите то, как они работают в WebAPIs, и узнаете как писать свои собственные.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Async_await">Делаем асинхронное программирование проще с async и await</a></dt>
- <dd>Промисы могут быть достаточно сложными для написания и понимания, поэтому современные браузеры ввели функцию <code>async</code> и оператор <code>await</code> — где первый позволяет стандартным функциям неявно асинхронно работать с промисами, а последний может использоваться внутри <code>async</code> функций, для ожидания промиса, прежде чем функция продолжит свою работу, что делает работу с промисами проще и улучшает читабельность кода.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Выбор правильного подхода</a></dt>
- <dd>В завершение этого модуля, мы рассмотрим технологии и функции, которые мы обсуждали, рассмотрим когда и где их надо использовать. А так же дадим рекомендации и расскажем о распространённых подводных камнях, там где это будет необходимо.</dd>
-</dl>
+- [Основные концепции асинхронного программирования](/ru/docs/Learn/JavaScript/Asynchronous/Concepts)
+  - : В этой статье мы пройдёмся по нескольким важным концепциям касающихся асинхронного программирования, и того как это выглядит в браузерах и JavaScript. Вы должны усвоить эти концепции прежде чем изучать другие статьи в этом модуле.
+- [Введение в асинхронный JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing)
+  - : В этой статье мы кратко расскажем о проблемах связанных с синхронным JavaScript-ом, и взглянем на различные техники асинхронного программирования с которыми вы столкнётесь, покажем вам как эти техники помогают решать проблемы синхронного JavaScript.
+- [Кооперативная асинхронность в JavaScript: Таймауты и интервалы](/ru/docs/Learn/JavaScript/Asynchronous/Loops_and_intervals)
+  - : Здесь мы рассматриваем традиционные методы JavaScript, которые позволяют запускать код асинхронно по истечению заданного времени, или с регулярным интервалом (например: заданное количество раз в секунду), обсудим их пользу, а так же их неотъемлемые проблемы.
+- [Изящная обработка асинхронных операций с Промисами](/ru/docs/Learn/JavaScript/Asynchronous/Promises)
+  - : Промисы это достаточно новая функция в языке JavaScript, которая позволяет вам откладывать дальнейшие операции, пока предыдущая не выполнится, или реагировать на её неудачное выполнение. Это очень полезно, для установки нужной последовательности операций для корректной работы. Эта статья показывает как работают промисы, и вы рассмотрите то, как они работают в WebAPIs, и узнаете как писать свои собственные.
+- [Делаем асинхронное программирование проще с async и await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await)
+  - : Промисы могут быть достаточно сложными для написания и понимания, поэтому современные браузеры ввели функцию `async` и оператор `await` — где первый позволяет стандартным функциям неявно асинхронно работать с промисами, а последний может использоваться внутри `async` функций, для ожидания промиса, прежде чем функция продолжит свою работу, что делает работу с промисами проще и улучшает читабельность кода.
+- [Выбор правильного подхода](/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
+  - : В завершение этого модуля, мы рассмотрим технологии и функции, которые мы обсуждали, рассмотрим когда и где их надо использовать. А так же дадим рекомендации и расскажем о распространённых подводных камнях, там где это будет необходимо.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://eloquentjavascript.net/11_async.html">Асинхронное программирование</a> из фантастической онлайн книги Марина Хавербеке, <a href="https://karmazzin.gitbooks.io/eloquentjavascript_ru/">Выразительный JavaScript</a>.</li>
-</ul>
+- [Асинхронное программирование](https://eloquentjavascript.net/11_async.html) из фантастической онлайн книги Марина Хавербеке, [Выразительный JavaScript](https://karmazzin.gitbooks.io/eloquentjavascript_ru/).
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.md b/files/ru/learn/javascript/asynchronous/introducing/index.md
index cc448c7628b28c..db2c23122f606e 100644
--- a/files/ru/learn/javascript/asynchronous/introducing/index.md
+++ b/files/ru/learn/javascript/asynchronous/introducing/index.md
@@ -11,104 +11,93 @@ tags:
   - колбэк
 translation_of: Learn/JavaScript/Asynchronous/Introducing
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</div>
+В этой статье мы кратко остановимся на проблемах, связанных с синхронным Javascript, а также ознакомимся с несколькими асинхронными методами, демонстрирующими как они могут помочь нам подобные проблемы решить.
 
-<p class="summary">В этой статье мы кратко остановимся на проблемах, связанных с синхронным Javascript, а также ознакомимся с несколькими асинхронными методами, демонстрирующими как они могут помочь нам подобные проблемы решить.</p>
+| Необходимое условие: | Базовая компьютерная грамотность, достаточное понимание основ JavaScript.                                              |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Ознакомиться с тем, что такое асинхронный JavaScript, чем он отличается от синхронного и в каких случаях используется. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимое условие:</th>
-   <td>Базовая компьютерная грамотность, достаточное понимание основ JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомиться с тем, что такое асинхронный JavaScript, чем он отличается от синхронного и в каких случаях используется.</td>
-  </tr>
- </tbody>
-</table>
+## Синхронный JavaScript
 
-<h2 id="Синхронный_JavaScript">Синхронный JavaScript</h2>
+Чтобы (позволить нам) понять что есть **{{Glossary("асинхронный")}}** JavaScript, нам следовало бы для начала убедиться, что мы понимаем что такое **{{Glossary("синхронный")}}** JavaScript. Этот раздел резюмирует некоторую информацию из прошлой статьи.
 
-<p>Чтобы (позволить нам) понять что есть <strong>{{Glossary("асинхронный")}}</strong> JavaScript, нам следовало бы для начала убедиться, что мы понимаем что такое <strong>{{Glossary("синхронный")}}</strong> JavaScript. Этот раздел резюмирует некоторую информацию из прошлой статьи.</p>
+Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите [онлайн](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html), как это работает и посмотрите [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html)):
 
-<p>Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">онлайн</a>, как это работает и посмотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">исходный код</a>):</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
-btn.addEventListener('click', () =&gt; {
+```js
+const btn = document.querySelector('button');
+btn.addEventListener('click', () => {
   alert('You clicked me!');
 
   let pElem = document.createElement('p');
   pElem.textContent = 'This is a newly-added paragraph.';
   document.body.appendChild(pElem);
 });
-</pre>
+```
+
+В этом блоке кода команды выполняются одна за другой:
 
-<p>В этом блоке кода команды выполняются одна за другой:</p>
+1.  Получаем ссылку на элемент {{htmlelement("button")}}, который уже есть в DOM.
+2.  Добавляем к кнопке обработчик события [`click`](/en-US/docs/Web/API/Element/click_event) так, что при нажатии на неё:
 
-<ol>
- <li>Получаем ссылку на элемент {{htmlelement("button")}}, который уже есть в DOM.</li>
- <li>Добавляем к кнопке обработчик события <code><a href="/en-US/docs/Web/API/Element/click_event">click</a></code> так, что при нажатии на неё:
-  <ol>
-   <li>Выводится сообщение <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code>.</li>
-   <li>После закрытия сообщения создаём элемент {{htmlelement("p")}} (абзац).</li>
-   <li>Затем добавляем в абзац текст.</li>
-   <li>В конце добавляем созданный абзац в тело документа.</li>
-  </ol>
- </li>
-</ol>
+    1.  Выводится сообщение [`alert()`](/en-US/docs/Web/API/Window/alert).
+    2.  После закрытия сообщения создаём элемент {{htmlelement("p")}} (абзац).
+    3.  Затем добавляем в абзац текст.
+    4.  В конце добавляем созданный абзац в тело документа.
 
-<p>Пока выполняется каждая операция, ничего больше не может произойти — обработка (отображение) документа приостановлена. Так происходит, как было сказано <a href="/ru/docs/Learn/JavaScript/Asynchronous/Introducing">в предыдущей статье</a>, потому что <a href="/ru/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_%D0%BE%D0%B4%D0%BD%D0%BE%D0%BF%D0%BE%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D0%B9">JavaScript является однопоточным</a>. В каждый момент времени может выполняться только одна команда, обрабатываемая в единственном — главном потоке. Все остальные действия блокируются до окончания выполнения текущей команды.</p>
+Пока выполняется каждая операция, ничего больше не может произойти — обработка (отображение) документа приостановлена. Так происходит, как было сказано [в предыдущей статье](/ru/docs/Learn/JavaScript/Asynchronous/Introducing), потому что [JavaScript является однопоточным](/ru/docs/Learn/JavaScript/Asynchronous/Concepts#JavaScript_%D0%BE%D0%B4%D0%BD%D0%BE%D0%BF%D0%BE%D1%82%D0%BE%D1%87%D0%BD%D1%8B%D0%B9). В каждый момент времени может выполняться только одна команда, обрабатываемая в единственном — главном потоке. Все остальные действия блокируются до окончания выполнения текущей команды.
 
-<p>Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:</p>
+Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:
 
-<div class="hidden">
-<pre class="brush: html">&lt;button&gt;Нажми меня&lt;/button&gt;</pre>
-</div>
+```html hidden
+<button>Нажми меня</button>
+```
 
-<p>{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}</p>
+{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Важно помнить, что <code><a href="/en-US/docs/Web/API/Window/alert">alert()</a></code>, хоть и часто используется для демонстрации синхронных блокирующих операций, сильно не рекомендован к использованию в реальных приложениях.</p>
-</div>
+> **Примечание:** Важно помнить, что [`alert()`](/en-US/docs/Web/API/Window/alert), хоть и часто используется для демонстрации синхронных блокирующих операций, сильно не рекомендован к использованию в реальных приложениях.
 
-<h2 id="Асинхронный_JavaScript">Асинхронный JavaScript</h2>
+## Асинхронный JavaScript
 
-<p>По причинам, упомянутым ранее (например, относящимся к блокировке), множество Web API особенностей теперь используют асинхронный код, особенно те,что имеют доступ к внешним устройствам или получают от них некоторые ресурсы, такие как получение файла из сети, запрос к базе данных и получение данных из базы, доступ к потоковому видео на веб-камере, просмотр дисплея на гарнитуре виртуальной реальности.</p>
+По причинам, упомянутым ранее (например, относящимся к блокировке), множество Web API особенностей теперь используют асинхронный код, особенно те,что имеют доступ к внешним устройствам или получают от них некоторые ресурсы, такие как получение файла из сети, запрос к базе данных и получение данных из базы, доступ к потоковому видео на веб-камере, просмотр дисплея на гарнитуре виртуальной реальности.
 
-<p>Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:</p>
+Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:
 
-<pre class="brush: js">let response = fetch('myImage.png');
+```js
+let response = fetch('myImage.png');
 let blob = response.blob();
-// display your image blob in the UI somehow</pre>
+// display your image blob in the UI somehow
+```
 
-<p>Это происходит потому что вы не знаете сколько времени займёт загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что response ещё не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнейшие инструкции.</p>
+Это происходит потому что вы не знаете сколько времени займёт загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что response ещё не доступен. Вместо этого, ваш код должен дождаться возвращения response до того, как попытается выполнить дальнейшие инструкции.
 
-<p>Есть два типа стиля асинхронного кода, с которыми вы столкнётесь в коде JavaScript, старый метод — колбэки (callbacks) и более новый — промисы (promises). В следующих разделах мы познакомимся с каждым из них. </p>
+Есть два типа стиля асинхронного кода, с которыми вы столкнётесь в коде JavaScript, старый метод — колбэки (callbacks) и более новый — промисы (promises). В следующих разделах мы познакомимся с каждым из них.
 
-<h2 id="Асинхронные_колбэки">Асинхронные колбэки</h2>
+## Асинхронные колбэки
 
-<p>Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнёт выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все ещё употребляются в некоторых старомодных, но часто используемых API.</p>
+Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнёт выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все ещё употребляются в некоторых старомодных, но часто используемых API.
 
-<p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p>
+Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):
 
-<pre class="brush: js">btn.addEventListener('click', () =&gt; {
+```js
+btn.addEventListener('click', () => {
   alert('You clicked me!');
 
   let pElem = document.createElement('p');
   pElem.textContent = 'This is a newly-added paragraph.';
   document.body.appendChild(pElem);
-});</pre>
+});
+```
 
-<p>Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.</p>
+Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.
 
-<p>При передаче колбэк-функции как аргумента в другую функцию, мы передаём только ссылку на функцию как аргумент, следовательно колбэк-функция <strong>не</strong> выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.</p>
+При передаче колбэк-функции как аргумента в другую функцию, мы передаём только ссылку на функцию как аргумент, следовательно колбэк-функция **не** выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.
 
-<p>Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p>
+Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через [`XMLHttpRequest` API](/ru/docs/Web/API/XMLHttpRequest) ([запустите пример](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html), и [посмотрите исходный код](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html)):
 
-<pre class="brush: js">function loadAsset(url, type, callback) {
+```js
+function loadAsset(url, type, callback) {
   const xhr = new XMLHttpRequest();
   xhr.open('GET', url);
   xhr.responseType = type;
@@ -128,27 +117,31 @@ function displayImage(blob) {
   document.body.appendChild(image);
 }
 
-loadAsset('coffee.jpg', 'blob', displayImage);</pre>
+loadAsset('coffee.jpg', 'blob', displayImage);
+```
 
-<p>Мы создали  функцию <code>displayImage()</code>, которая представляет blob, переданный в неё, как объект URL, и создаёт картинку, в которой отображается URL, добавляя её в элемент документа <code>&lt;body&gt;</code>. Однако, далее мы создаём функцию <code>loadAsset()</code>, которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется <code>XMLHttpRequest</code> (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждёт, пока XHR закончит загрузку данных (используя обработчик события <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) перед отправкой данных в колбэк-функцию.</p>
+Мы создали функцию `displayImage()`, которая представляет blob, переданный в неё, как объект URL, и создаёт картинку, в которой отображается URL, добавляя её в элемент документа `<body>`. Однако, далее мы создаём функцию `loadAsset()`, которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется `XMLHttpRequest` (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждёт, пока XHR закончит загрузку данных (используя обработчик события [`onload`](/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload)) перед отправкой данных в колбэк-функцию.
 
-<p>Колбэк-функции универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как  <code>processJSON()</code>, <code>displayText()</code>, и другие.</p>
+Колбэк-функции универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как `processJSON()`, `displayText()`, и другие.
 
-<p>Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">посмотрите исходный код</a>):</p>
+Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива ([запустите пример](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html), и [посмотрите исходный код](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html)):
 
-<pre class="brush: js">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+```js
+const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
 
 gods.forEach(function (eachName, index){
   console.log(index + '. ' + eachName);
-});</pre>
+});
+```
 
-<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это Колбэк-функция, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p>
+В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для `forEach() `— это Колбэк-функция, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.
 
-<h2 id="Промисы">Промисы</h2>
+## Промисы
 
-<p>Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>:</p>
+Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является [`fetch()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch) API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data):
 
-<pre class="brush: js">fetch('products.json')
+```js
+fetch('products.json')
   .then( response => {
     if (!response.ok) {
       throw new Error(`HTTP error: ${response.status}`);
@@ -156,133 +149,123 @@ gods.forEach(function (eachName, index){
     return response.json();
   })
   .then( json => initialize(json) )
-  .catch( err => console.error(`Fetch problem: ${err.message}`) );</pre>
+  .catch( err => console.error(`Fetch problem: ${err.message}`) );
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы можете посмотреть законченную версию на github (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">посмотрите исходный код</a> и <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">запустите пример</a>).</p>
-</div>
+> **Примечание:** вы можете посмотреть законченную версию на github ([посмотрите исходный код](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js) и [запустите пример](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/)).
 
-<p>В примере видно, как <code>fetch()</code> принимает один параметр — URL ресурса, который нужно  получить из сети, — и возвращает <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">промис</a>. Промис — это объект, представляющий асинхронную операцию, выполненную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее", поэтому в дословном переводе "промис" (promise) означает "обещание".</p>
+В примере видно, как `fetch()` принимает один параметр — URL ресурса, который нужно получить из сети, — и возвращает [промис](/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise). Промис — это объект, представляющий асинхронную операцию, выполненную удачно или неудачно. Он представляет собой как бы промежуточное состояние. По сути, это способ браузера сказать: "я обещаю вернуться к вам с ответом как можно скорее", поэтому в дословном переводе "промис" (promise) означает "обещание".
 
-<p>Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов ещё не произошёл, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после <code>fetch()</code>:</p>
+Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов ещё не произошёл, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после `fetch()`:
 
-<ul>
- <li>Два <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> блока. Оба включают в себя функцию обратного вызова, которая запустится, если предыдущая операция закончилась успешно, и каждая колбэк-функция принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый <code>.then()</code> блок возвращает новый promise, это значит что вы можете объединять в цепочки блоки <code>.then()</code>, таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.</li>
- <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> блок описывается в конце и будет запущен если какой-либо <code>.then()</code> блок завершится с ошибкой — это аналогично синхронному <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>, ошибка становится доступной внутри <code>catch()</code>, что может быть использовано для сообщения пользователю о типе возникшей ошибки. Однако синхронный <code>try...catch</code> не будет работать с promise, хотя будет работать с <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, с которыми вы познакомитесь позже.</li>
-</ul>
+- Два [`then()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then) блока. Оба включают в себя функцию обратного вызова, которая запустится, если предыдущая операция закончилась успешно, и каждая колбэк-функция принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый `.then()` блок возвращает новый promise, это значит что вы можете объединять в цепочки блоки `.then()`, таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.
+- [`catch()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch) блок описывается в конце и будет запущен если какой-либо `.then()` блок завершится с ошибкой — это аналогично синхронному [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch), ошибка становится доступной внутри `catch()`, что может быть использовано для сообщения пользователю о типе возникшей ошибки. Однако синхронный `try...catch` не будет работать с promise, хотя будет работать с [async/await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await), с которыми вы познакомитесь позже.
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: вы узнаете намного больше о promise позже в этом модуле, так что не волнуйтесь если вы что-нибудь не поняли.</p>
-</div>
+> **Примечание:** вы узнаете намного больше о promise позже в этом модуле, так что не волнуйтесь если вы что-нибудь не поняли.
 
-<h3 id="Очередь_событий">Очередь событий</h3>
+### Очередь событий
 
-<p>Асинхронные операции, такие как промисы, помещаются в <strong>очередь событий</strong>, которая запускается после завершения обработки основного потока, чтобы они <em>не блокировали</em> выполнение JavaScript-кода. Поставленные в очередь операции завершатся как можно скорее, а затем вернут свои результаты в среду JavaScript.</p>
+Асинхронные операции, такие как промисы, помещаются в **очередь событий**, которая запускается после завершения обработки основного потока, чтобы они _не блокировали_ выполнение JavaScript-кода. Поставленные в очередь операции завершатся как можно скорее, а затем вернут свои результаты в среду JavaScript.
 
-<h3 id="Промисы_и_колбэк-функции">Промисы и колбэк-функции</h3>
+### Промисы и колбэк-функции
 
-<p>Промисы имеют некоторое сходство со старомодными колбэк-функциями. По сути, они являются возвращаемым объектом, к которому вы присоединяете колбэк-функции, вместо того, чтобы передавать колбэки в функцию.</p>
+Промисы имеют некоторое сходство со старомодными колбэк-функциями. По сути, они являются возвращаемым объектом, к которому вы присоединяете колбэк-функции, вместо того, чтобы передавать колбэки в функцию.
 
-<p>Тем не менее, промисы сделаны специально для обработки асинхронных операций, и имеют много преимуществ по сравнению с колбэками:</p>
+Тем не менее, промисы сделаны специально для обработки асинхронных операций, и имеют много преимуществ по сравнению с колбэками:
 
-<ul>
- <li>Вы можете объединить несколько асинхронных операций вместе, используя несколько операций<code>.then()</code>, передавая результат одного в следующий в качестве входных данных. Это гораздо сложнее сделать с колбэками, которые часто заканчиваются массивным «адом колбэков» (также известным как <a href="http://callbackhell.com/">callback hell</a>).</li>
- <li>Обратные вызовы Promise всегда вызываются в строгом порядке, который они помещают в очередь событий..</li>
- <li>Обработка ошибок намного лучше — все ошибки обрабатываются одним блоком <code>.catch ()</code> в конце блока, а не обрабатываются индивидуально на каждом уровне «пирамиды».</li>
- <li>Промисы избегают инверсии управления, в отличие от колбэков, которые теряют полный контроль над тем, как будет выполняться функция при передаче колбэка в стороннюю библиотеку.</li>
-</ul>
+- Вы можете объединить несколько асинхронных операций вместе, используя несколько операций`.then()`, передавая результат одного в следующий в качестве входных данных. Это гораздо сложнее сделать с колбэками, которые часто заканчиваются массивным «адом колбэков» (также известным как [callback hell](http://callbackhell.com/)).
+- Обратные вызовы Promise всегда вызываются в строгом порядке, который они помещают в очередь событий..
+- Обработка ошибок намного лучше — все ошибки обрабатываются одним блоком `.catch ()` в конце блока, а не обрабатываются индивидуально на каждом уровне «пирамиды».
+- Промисы избегают инверсии управления, в отличие от колбэков, которые теряют полный контроль над тем, как будет выполняться функция при передаче колбэка в стороннюю библиотеку.
 
-<h2 id="Природа_асинхронного_кода">Природа асинхронного кода</h2>
+## Природа асинхронного кода
 
-<p>Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше. Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.</p>
+Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше. Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.
 
-<pre class="brush: js">console.log ('Starting');
+```js
+console.log ('Starting');
 let image;
 
-fetch('coffee.jpg').then((response) =&gt; {
+fetch('coffee.jpg').then((response) => {
   console.log('It worked :)')
   return response.blob();
-}).then((myBlob) =&gt; {
+}).then((myBlob) => {
   const objectURL = URL.createObjectURL(myBlob);
   image = document.createElement('img');
   image.src = objectURL;
   document.body.appendChild(image);
-}).catch((error) =&gt; {
+}).catch((error) => {
   console.log('There has been a problem with your fetch operation: ' + error.message);
 });
 
-console.log ('All done!');</pre>
+console.log ('All done!');
+```
 
-<p>Браузер начнёт выполнение кода, увидит первый консольный оператор <code>(Starting)</code> и выполнит его, а затем создаст переменную <code>image</code>.</p>
+Браузер начнёт выполнение кода, увидит первый консольный оператор `(Starting)` и выполнит его, а затем создаст переменную `image`.
 
-<p>Затем он переместится на следующую строку и начнёт выполнять блок <code>fetch ()</code>, но, поскольку <code>fetch ()</code> выполняется асинхронно без блокировки, выполнение кода продолжается после кода, связанного с промисом, тем самым достигая окончательного оператора (<code>All done!</code>) и выводя его на консоль.</p>
+Затем он переместится на следующую строку и начнёт выполнять блок `fetch ()`, но, поскольку `fetch ()` выполняется асинхронно без блокировки, выполнение кода продолжается после кода, связанного с промисом, тем самым достигая окончательного оператора (`All done!`) и выводя его на консоль.
 
-<p>Только после того, как блок <code>fetch ()</code> полностью завершит работу и доставит свой результат через блоки <code>.then ()</code>, мы наконец увидим второе сообщение <code>console.log ()</code> (<code>It worked ;)</code>). Таким образом, сообщения появились не в том порядке, который вы могли ожидать:</p>
+Только после того, как блок `fetch ()` полностью завершит работу и доставит свой результат через блоки `.then ()`, мы наконец увидим второе сообщение `console.log ()` (`It worked ;)`). Таким образом, сообщения появились не в том порядке, который вы могли ожидать:
 
-<ul>
- <li>Starting</li>
- <li>All done!</li>
- <li>It worked :)</li>
-</ul>
+- Starting
+- All done!
+- It worked :)
 
-<p>Если вы запутались, рассмотрим следующий небольшой пример:</p>
+Если вы запутались, рассмотрим следующий небольшой пример:
 
-<pre class="brush: js">console.log("registering click handler");
+```js
+console.log("registering click handler");
 
-button.addEventListener('click', () =&gt; {
+button.addEventListener('click', () => {
   console.log("get click");
 });
 
-console.log("all done");</pre>
-
-<p>Этот пример очень схож с предыдущим в своём поведении —  первое и третье сообщения <code>console.log ()</code> будут показаны немедленно, но второе будет заблокировано, пока кто-то не нажмёт кнопку мыши. Предыдущий пример работает аналогичным образом, за исключением того, что в этом случае второе сообщение блокируется цепочкой промисов, получая ресурс, а затем отображая его на экране, а не щелчком мыши.</p>
+console.log("all done");
+```
 
-<p>В менее простом примере кода такая система может вызвать проблему — вы не можете включить блок асинхронного кода, который возвращает результат, на который вы потом будете полагаться в блоке синхронного кода. Вы просто не можете гарантировать, что асинхронная функция вернётся до того, как браузер обработает синхронный блок.</p>
+Этот пример очень схож с предыдущим в своём поведении — первое и третье сообщения `console.log ()` будут показаны немедленно, но второе будет заблокировано, пока кто-то не нажмёт кнопку мыши. Предыдущий пример работает аналогичным образом, за исключением того, что в этом случае второе сообщение блокируется цепочкой промисов, получая ресурс, а затем отображая его на экране, а не щелчком мыши.
 
-<p>Чтобы увидеть это в действии, попробуйте взять локальную копию нашего <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">примера</a> и измените третий вызов <code>console.log ()</code> следующим образом:</p>
+В менее простом примере кода такая система может вызвать проблему — вы не можете включить блок асинхронного кода, который возвращает результат, на который вы потом будете полагаться в блоке синхронного кода. Вы просто не можете гарантировать, что асинхронная функция вернётся до того, как браузер обработает синхронный блок.
 
-<pre class="brush: js">console.log ('All done! ' + image + 'displayed.');</pre>
+Чтобы увидеть это в действии, попробуйте взять локальную копию нашего [примера](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html) и измените третий вызов `console.log ()` следующим образом:
 
-<p>Теперь вместо третьего сообщения должна возникнуть следующая ошибка:</p>
+```js
+console.log ('All done! ' + image + 'displayed.');
+```
 
-<pre>TypeError: image is undefined; can't access its "src" property</pre>
+Теперь вместо третьего сообщения должна возникнуть следующая ошибка:
 
-<p>Это происходит потому, что в то же время браузер пытается запустить третий <code>console.log()</code>, блок <code>fetch()</code> ещё не закончил выполнение, поэтому переменная <code>image</code> ещё не имеет значения.</p>
+```
+TypeError: image is undefined; can't access its "src" property
+```
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Из соображений безопасности вы не можете применять <code>fetch() </code> к файлам из вашей локальной системы (или запустить другие такие операции локально); чтобы запустить локально пример выше вам необходимо запустить его через <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">локальный веб-сервер</a>.</p>
-</div>
+Это происходит потому, что в то же время браузер пытается запустить третий `console.log()`, блок `fetch()` ещё не закончил выполнение, поэтому переменная `image` ещё не имеет значения.
 
-<h2 id="Активное_обучение_сделайте_все_это_асинхронно!">Активное обучение: сделайте все это асинхронно!</h2>
+> **Примечание:** Из соображений безопасности вы не можете применять `fetch() `к файлам из вашей локальной системы (или запустить другие такие операции локально); чтобы запустить локально пример выше вам необходимо запустить его через [локальный веб-сервер](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server).
 
-<p>Чтобы исправить проблемный пример с  <code>fetch()</code> и заставить все три сообщения <code>console.log()</code> появиться в желаемом порядке, вы можете также запустить третье сообщение <code>console.log()</code> асинхронно. Этого можно добиться, переместив его внутрь другого блока <code>.then()</code> присоединённого к концу второго, или просто переместив его внутрь второго блока  <code>then()</code>. Попробуйте исправить это сейчас..</p>
+## Активное обучение: сделайте все это асинхронно!
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Если вы застряли, вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html">найти ответ здесь</a> (также можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html">запущенный пример</a>). Также вы можете найти много информации о промисах в нашем гайде <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Основные понятия асинхронного программирования</a> позднее в этом модуле.</p>
-</div>
+Чтобы исправить проблемный пример с `fetch()` и заставить все три сообщения `console.log()` появиться в желаемом порядке, вы можете также запустить третье сообщение `console.log()` асинхронно. Этого можно добиться, переместив его внутрь другого блока `.then()` присоединённого к концу второго, или просто переместив его внутрь второго блока `then()`. Попробуйте исправить это сейчас..
 
-<h2 id="Заключение">Заключение</h2>
+> **Примечание:** Если вы застряли, вы можете [найти ответ здесь](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync-fixed.html) (также можно посмотреть [запущенный пример](https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync-fixed.html)). Также вы можете найти много информации о промисах в нашем гайде [Основные понятия асинхронного программирования](/ru/docs/Learn/JavaScript/Asynchronous/Promises) позднее в этом модуле.
 
-<p>В своей основной форме JavaScript является синхронным, блокирующим, однопоточным языком, в котором одновременно может выполняться только одна операция. Но веб-браузеры определяют функции и API, которые позволяют нам регистрировать функции, которые не должны выполняться синхронно, а должны вызываться асинхронно, когда происходит какое-либо событие (время, взаимодействие пользователя с мышью или получение данных по сети, например). Это означает, что вы можете позволить своему коду делать несколько вещей одновременно, не останавливая и не блокируя основной поток.</p>
+## Заключение
 
-<p>Будем ли мы запускать код синхронно или асинхронно, будет зависеть от того, что мы пытаемся сделать.</p>
+В своей основной форме JavaScript является синхронным, блокирующим, однопоточным языком, в котором одновременно может выполняться только одна операция. Но веб-браузеры определяют функции и API, которые позволяют нам регистрировать функции, которые не должны выполняться синхронно, а должны вызываться асинхронно, когда происходит какое-либо событие (время, взаимодействие пользователя с мышью или получение данных по сети, например). Это означает, что вы можете позволить своему коду делать несколько вещей одновременно, не останавливая и не блокируя основной поток.
 
-<p>Есть моменты, когда мы хотим, чтобы все загружалось и происходило прямо сейчас. Например, при применении некоторых пользовательских стилей к веб-странице вы хотите, чтобы стили применялись как можно быстрее.</p>
+Будем ли мы запускать код синхронно или асинхронно, будет зависеть от того, что мы пытаемся сделать.
 
-<p>Если мы выполняем операцию, которая требует времени, например, запрос к базе данных и использование полученных результатов для заполнения шаблонов, лучше вытолкнуть это из основного потока и выполнить задачу асинхронно. Со временем вы узнаете, когда имеет смысл выбирать асинхронную технику вместо синхронной.</p>
+Есть моменты, когда мы хотим, чтобы все загружалось и происходило прямо сейчас. Например, при применении некоторых пользовательских стилей к веб-странице вы хотите, чтобы стили применялись как можно быстрее.
 
-<ul>
-</ul>
+Если мы выполняем операцию, которая требует времени, например, запрос к базе данных и использование полученных результатов для заполнения шаблонов, лучше вытолкнуть это из основного потока и выполнить задачу асинхронно. Со временем вы узнаете, когда имеет смысл выбирать асинхронную технику вместо синхронной.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Concepts", "Learn/JavaScript/Asynchronous/Timeouts_and_intervals", "Learn/JavaScript/Asynchronous")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/JavaScript/Asynchronous/Concepts">Основные понятия асинхронного программирования</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
+- [Основные понятия асинхронного программирования](/ru/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introducing asynchronous JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [Cooperative asynchronous JavaScript: Timeouts and intervals](/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Graceful asynchronous programming with Promises](/ru/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Making asynchronous programming easier with async and await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choosing the right approach](/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/ru/learn/javascript/asynchronous/promises/index.md b/files/ru/learn/javascript/asynchronous/promises/index.md
index 08a56746c103f7..59c04ce27e0070 100644
--- a/files/ru/learn/javascript/asynchronous/promises/index.md
+++ b/files/ru/learn/javascript/asynchronous/promises/index.md
@@ -8,110 +8,115 @@ tags:
 translation_of: Learn/JavaScript/Asynchronous/Async_await
 original_slug: Learn/JavaScript/Asynchronous/Async_await
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</div>
+В ECMAScript версии 2017 появились [async functions](/ru/docs/Web/JavaScript/Reference/Statements/async_function) и ключевое слово [`await`](/en-US/docs/Web/JavaScript/Reference/Operators/await) ([ECMAScript Next support in Mozilla](/ru/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla)). По существу, такие функции есть синтаксический сахар над Promises и Generator functions ([ts39](https://tc39.es/ecmascript-asyncawait/)). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.
 
-<p class="summary">В ECMAScript версии 2017 появились <a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async functions</a> и ключевое слово <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a></code> (<a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_Next_support_in_Mozilla">ECMAScript Next support in Mozilla</a>). По существу, такие функции есть синтаксический сахар над Promises и Generator functions (<a href="https://tc39.es/ecmascript-asyncawait/">ts39</a>). С их помощью легче писать/читать асинхронный код, ведь они позволяют использовать привычный синхронный стиль написания. В этой статье мы на базовом уровне разберёмся в их устройстве.</p>
+| Примечания:     | Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises. |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель материала: | Научить писать современный асинхронный код с использованием Promises и async functions.                                                        |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Примечания:</th>
-   <td>Чтобы лучше понять материал, желательно перед чтением ознакомиться с основами JavaScript, асинхронными операциями вообще и объектами Promises.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель материала:</th>
-   <td>Научить писать современный асинхронный код с использованием Promises и async functions.</td>
-  </tr>
- </tbody>
-</table>
+## Основы async/await
 
-<h2 id="Основы_asyncawait">Основы async/await</h2>
+### Ключевое слово async
 
-<h3 id="Ключевое_слово_async">Ключевое слово async</h3>
+Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию ([async function](/ru/docs/Web/JavaScript/Reference/Statements/async_function)). Такая функция делает две вещи:
+\- Оборачивает возвращаемое значение в Promise
+\- Позволяет использовать ключевое слово await (см. дальше)
 
-<p>Ключевое слово async позволяет сделать из обычной функции (function declaration или function expression) асинхронную функцию (<a href="/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async function</a>). Такая функция делает две вещи:<br>
- - Оборачивает возвращаемое значение в Promise<br>
- - Позволяет использовать ключевое слово await (см. дальше)</p>
+Попробуйте выполнить в консоли браузера следующий код:
 
-<p>Попробуйте выполнить в консоли браузера следующий код:</p>
+```js
+function hello() { return "Hello" };
+hello();
+```
 
-<pre class="brush: js">function hello() { return "Hello" };
-hello();</pre>
+Функция возвращает "Hello" — ничего необычного, верно ?
 
-<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
+Но что если мы сделаем её асинхронной ? Проверим:
 
-<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
+```js
+async function hello() { return "Hello" };
+hello();
+```
 
-<pre class="brush: js">async function hello() { return "Hello" };
-hello();</pre>
+Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.
 
-<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
+Вот пример с [async function expression](/ru/docs/Web/JavaScript/Reference/Operators/async_function):
 
-<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
+```js
+let hello = async function() { return "Hello" };
+hello();
+```
 
-<pre class="brush: js">let hello = async function() { return "Hello" };
-hello();</pre>
+Также можно использовать стрелочные функции:
 
-<p>Также можно использовать стрелочные функции:</p>
+```js
+let hello = async () => { return "Hello" };
+```
 
-<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
+Все они в общем случае делают одно и то же.
 
-<p>Все они в общем случае делают одно и то же.</p>
+Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод `.then()`:
 
-<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
+```js
+hello().then((value) => console.log(value))
+```
 
-<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
+или ещё короче
 
-<p>или ещё короче</p>
+```js
+hello().then(console.log)
+```
 
-<pre class="brush: js">hello().then(console.log)
-</pre>
+Итак, ключевое слово `async`, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.
 
-<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
+### Ключевое слово await
 
-<h3 id="Ключевое_слово_await">Ключевое слово await</h3>
+Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово [await](/ru/docs/Web/JavaScript/Reference/Operators/await) — по факту, **`await` работает только в асинхронных функциях**. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.
 
-<p>Асинхронные функции становятся по настоящему мощными, когда вы используете ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Operators/await">await</a>  — по факту, <strong><code>await</code> работает только в асинхронных функциях</strong>. Мы можем использовать await перед promise-based функцией, чтобы остановить поток выполнения и дождаться результата её выполнения (результат Promise). В то же время, остальной код нашего приложения не блокируется и продолжает работать.</p>
+Вы можете использовать `await` перед любой функцией, что возвращает Promise, включая Browser API функции.
 
-<p>Вы можете использовать <code>await</code> перед любой функцией, что возвращает Promise, включая Browser API функции.</p>
+Небольшой пример:
 
-<p>Небольшой пример:</p>
-
-<pre class="brush: js">async function hello() {
+```js
+async function hello() {
   return greeting = await Promise.resolve("Hello");
 };
 
-hello().then(alert);</pre>
+hello().then(alert);
+```
 
-<p>Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.</p>
+Конечно, на практике код выше бесполезен, но в учебных целях он иллюстрирует синтаксис асинхронных функций. Теперь давайте перейдём к реальным примерам.
 
-<h2 id="Переписываем_Promises_с_использованием_asyncawait">Переписываем Promises с использованием async/await</h2>
+## Переписываем Promises с использованием async/await
 
-<p>Давайте посмотрим на пример из предыдущей статьи:</p>
+Давайте посмотрим на пример из предыдущей статьи:
 
-<pre class="brush: js">fetch('coffee.jpg')
-.then(response =&gt; {
+```js
+fetch('coffee.jpg')
+.then(response => {
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
   } else {
     return response.blob();
   }
 })
-.then(myBlob =&gt; {
+.then(myBlob => {
   let objectURL = URL.createObjectURL(myBlob);
   let image = document.createElement('img');
   image.src = objectURL;
   document.body.appendChild(image);
 })
-.catch(e =&gt; {
+.catch(e => {
   console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
+});
+```
 
-<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
+К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.
 
-<pre class="brush: js">async function myFetch() {
+```js
+async function myFetch() {
   let response = await fetch('coffee.jpg');
 
   if (!response.ok) {
@@ -127,15 +132,17 @@ hello().then(alert);</pre>
 }
 
 myFetch()
-.catch(e =&gt; {
+.catch(e => {
   console.log('There has been a problem with your fetch operation: ' + e.message);
-});</pre>
+});
+```
 
-<p>Согласитесь, что код стал короче и понятнее — больше никаких блоков <code>.then()</code> по всему скрипту!</p>
+Согласитесь, что код стал короче и понятнее — больше никаких блоков `.then()` по всему скрипту!
 
-<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
+Так как ключевое слово `async` заставляет функцию вернуть Promise, мы можем использовать гибридный подход:
 
-<pre class="brush: js">async function myFetch() {
+```js
+async function myFetch() {
   let response = await fetch('coffee.jpg');
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
@@ -144,39 +151,42 @@ myFetch()
   }
 }
 
-myFetch().then((blob) =&gt; {
+myFetch().then((blob) => {
   let objectURL = URL.createObjectURL(blob);
   let image = document.createElement('img');
   image.src = objectURL;
   document.body.appendChild(image);
-}).catch(e =&gt; console.log(e));</pre>
+}).catch(e => console.log(e));
+```
+
+Можете попрактиковаться самостоятельно, или запустить наш [live example](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html) (а также [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html)).
+
+### Минуточку, а как это все работает ?
 
-<p>Можете попрактиковаться самостоятельно, или запустить наш <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await.html">live example</a> (а также <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await.html">source code</a>).</p>
+Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью `async`. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.
 
-<h3 id="Минуточку_а_как_это_все_работает">Минуточку, а как это все работает ?</h3>
+Внутри `myFetch()` находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков `.then()` мы просто использует ключевое слово `await` перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово `await` говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.
 
-<p>Вы могли заметить, что мы обернули наш код в функцию и сделали её асинхронной с помощью <code>async</code>. Это было обязательно - нам надо создать контейнер, внутри которого будет запускаться асинхронный код и будет возможность дождаться его результата с помощью await, не блокируя остальной код нашего скрипта.</p>
+Пример:
 
-<p>Внутри <code>myFetch()</code> находится код, который слегка напоминает версию на Promise, но есть важные отличия. Вместо того, чтобы писать цепочку блоков <code>.then()</code> мы просто использует ключевое слово <code>await</code> перед вызовом promise-based функции и присваиваем результат в переменную. Ключевое слово <code>await</code> говорит JavaScript runtime приостановить код в этой строке, не блокируя остальной код скрипта за пределами асинхронной функции. Когда вызов promise-based функции будет готов вернуть результат, выполнение продолжится с этой строки дальше.<br>
- <br>
- Пример:</p>
+```js
+let response = await fetch('coffee.jpg');
+```
 
-<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
+Значение Promise, которое вернёт `fetch()` будет присвоено переменной `response` только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект [`Blob`](/en-US/docs/Web/API/Blob) из результата Promise. В этой строке, кстати, также используется `await`, потому что метод `.blob()` также возвращает Promise. Когда результат готов, мы возвращаем его наружу из `myFetch()`.
 
-<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
+Обратите внимание, когда мы вызываем `myFetch()`, она возвращает Promise, поэтому мы можем вызвать `.then()` на результате, чтобы отобразить его на экране.
 
-<p>Обратите внимание, когда мы вызываем <code>myFetch()</code>, она возвращает Promise, поэтому мы можем вызвать <code>.then()</code> на результате, чтобы отобразить его на экране.<br>
- <br>
- К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков <code>.then()</code>, тем легче читать код.</p>
+К этому моменту вы наверное думаете "Это реально круто!", и вы правы - чем меньше блоков `.then()`, тем легче читать код.
 
-<h3 id="Добавляем_обработку_ошибок">Добавляем обработку ошибок</h3>
+### Добавляем обработку ошибок
 
-<p><br>
- Чтобы обработать ошибки у нас есть несколько вариантов</p>
+Чтобы обработать ошибки у нас есть несколько вариантов
 
-<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
+Мы можем использовать синхронную [`try...catch`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) структуру с `async`/`await`. Вот изменённая версия первого примера выше:
 
-<pre class="brush: js">async function myFetch() {
+```js
+async function myFetch() {
   try {
     let response = await fetch('coffee.jpg');
 
@@ -194,13 +204,15 @@ myFetch().then((blob) =&gt; {
   }
 }
 
-myFetch();</pre>
+myFetch();
+```
 
-<p>В блок <code>catch() {}</code> передаётся объект ошибки, который мы назвали <code>e</code>; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.</p>
+В блок `catch() {}` передаётся объект ошибки, который мы назвали `e`; мы можем вывести его в консоль, чтобы посмотреть детали: где и почему возникла ошибка.
 
-<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
+Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок `.catch()` после блока `.then()` вот так:
 
-<pre class="brush: js">async function myFetch() {
+```js
+async function myFetch() {
   let response = await fetch('coffee.jpg');
   if (!response.ok) {
     throw new Error(`HTTP error! status: ${response.status}`);
@@ -209,32 +221,32 @@ myFetch();</pre>
   }
 }
 
-myFetch().then((blob) =&gt; {
+myFetch().then((blob) => {
   let objectURL = URL.createObjectURL(blob);
   let image = document.createElement('img');
   image.src = objectURL;
   document.body.appendChild(image);
 })
-.catch((e) =&gt;
+.catch((e) =>
   console.log(e)
-);</pre>
+);
+```
 
-<p>Так лучше, потому что блок <code>.catch()</code> словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок <code>try</code>/<code>catch</code>, мы бы не словили ошибку, которая произошла в самой <code>myFetch()</code> функции.</p>
+Так лучше, потому что блок `.catch()` словит ошибки как из асинхронной функции, так и из Promise. Если бы мы использовали блок `try`/`catch`, мы бы не словили ошибку, которая произошла в самой `myFetch()` функции.
 
-<p>Вы можете посмотреть оба примера на GitHub:</p>
+Вы можете посмотреть оба примера на GitHub:
 
-<ul>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">simple-fetch-async-await-try-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html">source code</a>)</li>
- <li><a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">simple-fetch-async-await-promise-catch.html</a> (смотреть <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html">source code</a>)</li>
-</ul>
+- [simple-fetch-async-await-try-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html) (смотреть [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-try-catch.html))
+- [simple-fetch-async-await-promise-catch.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html) (смотреть [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/simple-fetch-async-await-promise-catch.html))
 
-<h2 id="Await_и_Promise.all">Await и Promise.all()</h2>
+## Await и Promise.all()
 
-<p>Как вы помните, асинхронные функции построены поверх <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">promises</a>, поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all">Promise.all()</a></code>, присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html">примеру, рассмотренному в предыдущей статье</a>. Откройте пример в соседней вкладке, чтобы лучше понять разницу.</p>
+Как вы помните, асинхронные функции построены поверх [promises](/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise), поэтому они совместимы со всеми возможностями последних. Мы легко можем подождать выполнение [`Promise.all()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all), присвоить результат в переменную и все это сделать используя синхронный стиль. Опять, вернёмся к [примеру, рассмотренному в предыдущей статье](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/promises/promise-all.html). Откройте пример в соседней вкладке, чтобы лучше понять разницу.
 
-<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
+Версия с async/await (смотрите [live demo](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html) и [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html)), сейчас выглядит так:
 
-<pre class="brush: js">async function fetchAndDecode(url, type) {
+```js
+async function fetchAndDecode(url, type) {
   let response = await fetch(url);
 
   let content;
@@ -277,74 +289,84 @@ async function displayContent() {
 }
 
 displayContent()
-.catch((e) =&gt;
+.catch((e) =>
   console.log(e)
-);</pre>
+);
+```
+
+Вы видите, что мы легко изменили `fetchAndDecode()` функцию в асинхронный вариант. Взгляните на строку с `Promise.all()`:
+
+```js
+let values = await Promise.all([coffee, tea, description]);
+```
+
+С помощью `await` мы ждём массив результатов всех трёх Promises и присваиваем его в переменную `values`. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.
 
-<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
+Мы должны обернуть весь код в синхронную функцию, `displayContent()`, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока `.then()`, за счёт чего наш код стал гораздо чище.
 
-<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
+Для обработки ошибок мы добавили блок `.catch()` для функции `displayContent()`; Это позволило нам отловить ошибки в обоих функциях.
 
-<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
- <br>
- Мы должны обернуть весь код в синхронную функцию, <code>displayContent()</code>, и мы не сильно сэкономили на количестве кода, но мы извлекли код блока <code>.then()</code>, за счёт чего наш код стал гораздо чище.</p>
+> **Примечание:** Мы также можем использовать синхронный блок [`finally`](/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause) внутри асинхронной функции, вместо асинхронного `.finally()`, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем [live example](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html) (смотрите [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html)).
 
-<p>Для обработки ошибок мы добавили блок <code>.catch()</code> для функции <code>displayContent()</code>; Это позволило нам отловить ошибки в обоих функциях.</p>
+## Недостатки async/await
 
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: Мы также можем использовать синхронный блок <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">finally</a></code> внутри асинхронной функции, вместо асинхронного <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch#The_finally_clause">.finally</a>()</code>, чтобы получить информацию о результате нашей операции — смотрите в действии в нашем <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-finally-async-await.html">live example</a> (смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-finally-async-await.html">source code</a>).</p>
-</div>
+Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.
 
-<h2 id="Недостатки_asyncawait">Недостатки async/await</h2>
+Async/await позволяет вам писать код в синхронном стиле. Ключевое слово `await` блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.
 
-<p>Асинхронные функции с async/await бывают очень удобными, но есть несколько замечаний, о которых полезно знать.</p>
+ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый `await` должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.
 
-<p>Async/await позволяет вам писать код в синхронном стиле. Ключевое слово <code>await</code> блокирует приостанавливает выполнение ptomise-based функции до того момента, пока promise примет статус fulfilled. Это не блокирует код за пределами вашей асинхронной функции, тем не менее важно помнить, что внутри асинхронной функции поток выполнения блокируется.<br>
- <br>
- ваш код может стать медленнее за счёт большого количества awaited promises, которые идут один за другим. Каждый <code>await</code> должен дождаться выполнения предыдущего, тогда как на самом деле мы хотим, чтобы наши Promises выполнялись одновременно, как если бы мы не использовали async/await.<br>
- <br>
- Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.</p>
+Есть подход, который позволяет обойти эту проблему - сохранить все выполняющиеся Promises в переменные, а уже после этого дожидаться (awaiting) их результата. Давайте посмотрим на несколько примеров.
 
-<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
+Мы подготовили два примера — [slow-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html) (см. [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html)) и [fast-async-await.html](https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html) (см. [source code](https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html)). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова [`setTimeout()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout):
 
-<pre class="brush: js">function timeoutPromise(interval) {
-  return new Promise((resolve, reject) =&gt; {
+```js
+function timeoutPromise(interval) {
+  return new Promise((resolve, reject) => {
     setTimeout(function(){
       resolve("done");
     }, interval);
   });
-};</pre>
+};
+```
 
-<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
+Далее в каждом примере есть асинхронная функция `timeTest()` ожидающая три вызова `timeoutPromise()`:
 
-<pre class="brush: js">async function timeTest() {
+```js
+async function timeTest() {
   ...
-}</pre>
+}
+```
 
-<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
+В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение `timeTest()` промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:
 
-<pre class="brush: js">let startTime = Date.now();
-timeTest().then(() =&gt; {
+```js
+let startTime = Date.now();
+timeTest().then(() => {
   let finishTime = Date.now();
   let timeTaken = finishTime - startTime;
   alert("Time taken in milliseconds: " + timeTaken);
-})</pre>
+})
+```
 
-<p>Далее представлена асинхронная функция <code>timeTest()</code> различная для каждого из примеров.</p>
+Далее представлена асинхронная функция `timeTest()` различная для каждого из примеров.
 
-<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
+В случае с медленным примером `slow-async-await.html`, `timeTest()` выглядит:
 
-<pre class="brush: js">async function timeTest() {
+```js
+async function timeTest() {
   await timeoutPromise(3000);
   await timeoutPromise(3000);
   await timeoutPromise(3000);
-}</pre>
+}
+```
 
-<p>Здесь мы просто ждём все три  <code>timeoutPromise()</code> напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (<code>slow-async-await.html</code>) вы увидите alert сообщающий время выполнения около 9 секунд. </p>
+Здесь мы просто ждём все три `timeoutPromise()` напрямую, блокируя выполнение на данного блока на 3 секунды при каждом вызове. Все последующие вызовы вынуждены ждать пока разрешится предыдущий. Если вы запустите первый пример (`slow-async-await.html`) вы увидите alert сообщающий время выполнения около 9 секунд.
 
-<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
+Во втором `fast-async-await.html` примере, функция `timeTest()` выглядит как:
 
-<pre class="brush: js">async function timeTest() {
+```js
+async function timeTest() {
   const timeoutPromise1 = timeoutPromise(3000);
   const timeoutPromise2 = timeoutPromise(3000);
   const timeoutPromise3 = timeoutPromise(3000);
@@ -352,21 +374,21 @@ timeTest().then(() =&gt; {
   await timeoutPromise1;
   await timeoutPromise2;
   await timeoutPromise3;
-}</pre>
-
-<p>В данном случае мы храним три объекта <code>Promise</code> в переменных,  каждый из которых может разрешиться независимо от других.</p>
+}
+```
 
-<p>Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.</p>
+В данном случае мы храним три объекта `Promise` в переменных, каждый из которых может разрешиться независимо от других.
 
-<p>Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.</p>
+Ниже мы ожидаем разрешения промисов из объекта в результат, так как они были запущенны одновременно, блокируя поток, то и разрешатся одновременно. Если вы запустите второй пример вы увидите alert, сообщающий время выполнения около 3 секунд.
 
-<p>
- </p><h2 id="Asyncawait_class_methods">Async/await class methods</h2>
+Важно не забывать о быстродействии применяя await, проверяйте количество блокировок.
 
+## Async/await class methods
 
-<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
+В качестве последнего замечания, вы можете использовать `async` перед методами классов или объектов, вынуждая их возвращать promises. А также await внутри методов объявленных таким образом. Посмотрите на пример [ES class code, который мы наблюдали в статье object-oriented JavaScript](/ru/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes), и сравните его с модифицированной (асинхронной) `async` версией ниже:
 
-<pre class="brush: js">class Person {
+```js
+class Person {
   constructor(first, last, age, gender, interests) {
     this.name = {
       first,
@@ -386,31 +408,32 @@ timeTest().then(() =&gt; {
   };
 }
 
-let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
+let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);
+```
 
-<p>Первый метод класса теперь можно использовать таким образом:</p>
+Первый метод класса теперь можно использовать таким образом:
 
-<pre class="brush: js">han.greeting().then(console.log);</pre>
+```js
+han.greeting().then(console.log);
+```
 
-<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
+## Browser support (Поддержка браузерами)
 
-<p>One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.</p>
+One consideration when deciding whether to use async/await is support for older browsers. They are available in modern versions of most browsers, the same as promises; the main support problems come with Internet Explorer and Opera Mini.
 
-<p>If you want to use async/await but are concerned about older browser support, you could consider using the <a href="https://babeljs.io/">BabelJS</a> library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.</p>
+If you want to use async/await but are concerned about older browser support, you could consider using the [BabelJS](https://babeljs.io/) library — this allows you to write your applications using the latest JavaScript and let Babel figure out what changes if any are needed for your user’s browsers. On encountering a browser that does not support async/await, Babel's polyfill can automatically provide fallbacks that work in older browsers.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.</p>
+Вот пожалуй и все - async/await позволяют писать асинхронный код, который легче читать и поддерживать. Даже учитывая, что поддержка со стороны браузеров несколько хуже, чем у promise.then, всё же стоит обратить на него внимание.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Asynchronous/Promises", "Learn/JavaScript/Asynchronous/Choosing_the_right_approach", "Learn/JavaScript/Asynchronous")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Concepts">General asynchronous programming concepts</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Introducing">Introducing asynchronous JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">Cooperative asynchronous JavaScript: Timeouts and intervals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Promises">Graceful asynchronous programming with Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">Making asynchronous programming easier with async and await</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">Choosing the right approach</a></li>
-</ul>
+- [General asynchronous programming concepts](/ru/docs/Learn/JavaScript/Asynchronous/Concepts)
+- [Introducing asynchronous JavaScript](/ru/docs/Learn/JavaScript/Asynchronous/Introducing)
+- [Cooperative asynchronous JavaScript: Timeouts and intervals](/ru/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals)
+- [Graceful asynchronous programming with Promises](/ru/docs/Learn/JavaScript/Asynchronous/Promises)
+- [Making asynchronous programming easier with async and await](/ru/docs/Learn/JavaScript/Asynchronous/Async_await)
+- [Choosing the right approach](/ru/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach)
diff --git a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.md b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.md
index 22ff8b6cc74359..86ec68c1004e54 100644
--- a/files/ru/learn/javascript/building_blocks/build_your_own_function/index.md
+++ b/files/ru/learn/javascript/building_blocks/build_your_own_function/index.md
@@ -3,62 +3,90 @@ title: Создаём свою функцию
 slug: Learn/JavaScript/Building_blocks/Build_your_own_function
 translation_of: Learn/JavaScript/Building_blocks/Build_your_own_function
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</div>
+Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в[ предыдущей статье](/ru/docs/Learn/JavaScript/Building_blocks/Functions). Попутно мы также объясним некоторые важные детали работы с функциями.
 
-<p class="summary">Эта статья призвана дать практический опыт на основе теоретических знаний приведённых в<a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions"> предыдущей статье</a>. Попутно мы также объясним некоторые важные детали работы с функциями.<br>
-  </p>
+| Предпосылки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, [первые шаги в JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги), [Функции — блоки кода используемые многократно](/ru/docs/Learn/JavaScript/Building_blocks/Functions). |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.                                                                                                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, <a href="/ru/docs/Learn/JavaScript/Первые_шаги">первые шаги в JavaScript</a>, <a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — блоки кода используемые многократно</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научить создавать пользовательской функции и объяснить ещё несколько полезных деталей.</td>
-  </tr>
- </tbody>
-</table>
+## Активное обучение: построение функции
 
-<h2 id="Активное_обучение_построение_функции">Активное обучение: построение функции</h2>
+Пользовательская функция, которую мы собираемся построить, будет называться `displayMessage()`. Она отобразит настраиваемое окно сообщения на веб-странице и будет действовать как настраиваемая замена встроенной в браузер функции [alert()](/ru/docs/Web/API/Window/alert). Мы видели эту функцию раньше. Введите следующую команду в консоли JavaScript браузера на любой странице:
 
-<p>Пользовательская функция, которую мы собираемся построить, будет называться <code>displayMessage()</code>. Она отобразит настраиваемое окно сообщения на веб-странице и будет действовать как настраиваемая замена встроенной в браузер функции <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/alert">alert()</a>. Мы видели эту функцию раньше. Введите следующую команду в консоли JavaScript браузера на любой странице:</p>
+```js
+alert('This is a message');
+```
 
-<pre class="brush: js">alert('This is a message');</pre>
+Функция `alert` принимает один аргумент - строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.
 
-<p>Функция <code>alert</code> принимает один аргумент - строку, которая отображается в окне сообщения на веб-странице Попробуйте изменить строку, чтобы изменить сообщение.</p>
+Функция `alert` ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.
 
-<p>Функция <code>alert</code> ограничена: вы можете изменить текст сообщения, но не получится изменить его стиль, например, цвет, значок или что-то ещё. Создадим сообщение, более интересное по стилю.</p>
+> **Примечание:** Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример будет работать во всех современных браузерах, но стиль может выглядеть немного смешным в более старых браузерах. Мы рекомендуем вам выполнять это упражнение в современном браузере, таком как Firefox, Opera или Chrome.</p>
-</div>
+## Основная функция
 
-<h2 id="Основная_функция">Основная функция</h2>
+Для начала давайте соберём основную функцию.
 
-<p>Для начала давайте соберём основную функцию.</p>
+> **Примечание:** Для согласований имён функций нужно следовать тем же правилам, что и [правила именования переменных](/ru/docs/Learn/JavaScript/Первые_шаги/Variables#Правила_именования_переменных). Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.
 
-<div class="note">
-<p><strong>Примечание</strong>: Для согласований имён функций нужно следовать тем же правилам, что и <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Variables#Правила_именования_переменных">правила именования переменных</a>. Отличить имена функций от имён переменных просто: после имён функций указываются круглые скобки, а после имён переменных их нет.</p>
-</div>
+1.  Откройте файл [function-start.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html) и скопируйте его себе на компьютер. Код HTML в нем предельно прост: body содержит только одну кнопку. Также здесь представлен базовый CSS для создания настраиваемого окна сообщений и пустой элемент {{htmlelement ("script")}} для размещения нашего JavaScript.
+2.  Затем добавьте строку внутри элемента `<script>`:
+
+    ```js
+    function displayMessage() {
+
+    }
+    ```
+
+    Мы начинаем с ключевого слова `function`, что означает, что мы определяем функцию. За ним следует имя, которое мы хотим дать нашей функции, набор круглых скобок и набор фигурных скобок. Любые параметры, которые мы хотим задать нашей функции, заключают в круглые скобки, а код, который запускается при вызове функции, находится внутри фигурных скобок.
+
+3.  Наконец, добавьте следующий код внутри фигурных скобок:
+
+    ```js
+    var html = document.querySelector('html');
+
+    var panel = document.createElement('div');
+    panel.setAttribute('class', 'msgBox');
+    html.appendChild(panel);
+
+    var msg = document.createElement('p');
+    msg.textContent = 'This is a message box';
+    panel.appendChild(msg);
+
+    var closeBtn = document.createElement('button');
+    closeBtn.textContent = 'x';
+    panel.appendChild(closeBtn);
 
-<ol>
- <li>Откройте файл <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-start.html">function-start.html</a> и скопируйте его себе на компьютер. Код HTML в нем предельно прост: body содержит только одну кнопку. Также здесь представлен базовый CSS для создания настраиваемого окна сообщений и пустой элемент {{htmlelement ("script")}} для размещения нашего JavaScript.</li>
- <li>Затем добавьте строку внутри элемента <code>&lt;script&gt;</code>:
-  <pre class="brush: js">function displayMessage() {
+    closeBtn.onclick = function() {
+      panel.parentNode.removeChild(panel);
+    }
+    ```
 
-}</pre>
-  Мы начинаем с ключевого слова <code>function</code>, что означает, что мы определяем функцию. За ним следует имя, которое мы хотим дать нашей функции, набор круглых скобок и набор фигурных скобок. Любые параметры, которые мы хотим задать нашей функции, заключают в круглые скобки, а код, который запускается при вызове функции, находится внутри фигурных скобок.</li>
- <li>Наконец, добавьте следующий код внутри фигурных скобок:
-  <pre class="brush: js">var html = document.querySelector('html');
+Рассмотрим этот код по строкам (прим. - в оригинале статьи: "bit by bit").
 
+В первой строке используется функция DOM API под именем {{domxref ("document.querySelector()")}} для выбора элемента {{htmlelement ("html")}}, сохраняющая ссылку на него в переменной `html`, чтобы позже мы могли с ней что-то сделать:
+
+```js
+var html = document.querySelector('html');
+```
+
+В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой `panel`. Этот элемент будет внешним контейнером нашего окна сообщений.
+
+Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут `class` на нашей панели со значением `msgBox`. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса `.msgBox` для стилизации окна сообщения и его содержимого.
+
+Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной `html`, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель `<div>` как дочерний элемент, который мы хотим вложить внутрь элемента `<html>`. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.
+
+```js
 var panel = document.createElement('div');
 panel.setAttribute('class', 'msgBox');
 html.appendChild(panel);
+```
 
+В следующих двух разделах используются те же функции `createElement()` и `appendChild()`, которые мы уже видели, чтобы создать два новых элемента: {{htmlelement ("p")}} и {{htmlelement ("button")}}, и вставить их на страницу, как дочерних элементов панели `<div>`. Мы используем свойство {{domxref ("Node.textContent")}}, которое представляет текстовое содержимое элемента, для вставки сообщения внутри абзаца и символ «x» внутрь кнопки. Нажатие/активация этой кнопки будет закрывать окно сообщения.
+
+```js
 var msg = document.createElement('p');
 msg.textContent = 'This is a message box';
 panel.appendChild(msg);
@@ -66,189 +94,195 @@ panel.appendChild(msg);
 var closeBtn = document.createElement('button');
 closeBtn.textContent = 'x';
 panel.appendChild(closeBtn);
+```
+
+В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.
 
+Вкратце, обработчик `onclick` — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик `onclick` равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель `<div>`.
+
+```js
 closeBtn.onclick = function() {
   panel.parentNode.removeChild(panel);
-}</pre>
- </li>
-</ol>
+}
+```
 
-<p>Рассмотрим этот код по строкам (прим. - в оригинале статьи: "bit by bit").</p>
+В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:
 
-<p>В первой строке используется функция DOM API под именем {{domxref ("document.querySelector()")}} для выбора элемента {{htmlelement ("html")}}, сохраняющая ссылку на него в переменной <code>html</code>, чтобы позже мы могли с ней что-то сделать:</p>
+```html
+<div class="msgBox">
+  <p>This is a message box</p>
+  <button>x</button>
+</div>
+```
 
-<pre class="brush: js">var html = document.querySelector('html');</pre>
+Вам не обязательно запоминать сейчас, как работает каждый элемент во всем этом коде. Основная задача — понять структуру и использование функции, при этом мы хотели показать что-то интересное для этого примера.
 
-<p>В следующем разделе используется другая функция DOM API, называемая {{domxref ("Document.createElement()")}}, применяется для создания элемента {{htmlelement ("div")}} и сохраняет ссылку на него в переменной, называемой <code>panel</code>. Этот элемент будет внешним контейнером нашего окна сообщений.</p>
+## Вызов функции
 
-<p>Затем мы используем ещё одну функцию DOM API, называемую {{domxref ("Element.setAttribute()")}}, чтобы установить атрибут <code>class</code> на нашей панели со значением <code>msgBox</code>. Это упрощает стилизацию элемента. Если вы посмотрите на CSS на странице, вы увидите, что мы используем селектор класса <code>.msgBox</code> для стилизации окна сообщения и его содержимого.</p>
+Теперь у вас есть определение функции, написанное в вашем элементе `<script>`, но оно ничего не будет делать в том виде, в каком оно есть.
 
-<p>Наконец, мы вызываем функцию DOM с именем {{domxref ("Node.appendChild()")}} в переменной <code>html</code>, которую мы сохранили ранее, которая вкладывает один элемент в другой как его дочерний элемент. Указываем панель <code>&lt;div&gt;</code> как дочерний элемент, который мы хотим вложить внутрь элемента <code>&lt;html&gt;</code>. То есть, когда мы создаём какой-то элемент, он не просто будет отображаться на странице сам по себе, нам нужно указать, куда его поместить.</p>
+1.  Попробуйте написать следующую строку под своей функцией, чтобы вызвать её:
 
-<pre class="brush: js">var panel = document.createElement('div');
-panel.setAttribute('class', 'msgBox');
-html.appendChild(panel);</pre>
+    ```js
+    displayMessage();
+    ```
 
-<p>В следующих двух разделах используются те же функции <code>createElement()</code> и <code>appendChild()</code>, которые мы уже видели, чтобы создать два новых элемента: {{htmlelement ("p")}} и {{htmlelement ("button")}}, и вставить их на страницу, как дочерних элементов панели <code>&lt;div&gt;</code>. Мы используем свойство {{domxref ("Node.textContent")}}, которое представляет текстовое содержимое элемента, для вставки сообщения внутри абзаца и символ «x» внутрь кнопки. Нажатие/активация этой кнопки будет закрывать окно сообщения.</p>
+    Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.
 
-<pre class="brush: js">var msg = document.createElement('p');
-msg.textContent = 'This is a message box';
-panel.appendChild(msg);
+2.  Теперь откройте инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите эту строку. Вы увидите, что окно появится снова! Теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.
 
-var closeBtn = document.createElement('button');
-closeBtn.textContent = 'x';
-panel.appendChild(closeBtn);</pre>
+    Но мы, вероятно, хотим, чтобы оно появлялось в ответ на действия пользователя и системы. В реальном приложении такое окно сообщения, вероятно, будет вызвано в ответ на доступность новых данных или, если произошла ошибка, или, например, если пользователь пытается удалить свой профиль («вы уверены в этом?»), или если пользователь добавляет новый контакт и операция успешно завершена и т. д.
 
-<p>В заключении мы используем обработчик событий {{domxref ("GlobalEventHandlers.onclick")}}, чтобы при нажатии кнопки был запущен некоторый код для удаления всей панели со страницы, т.е. для закрытия окна сообщения.</p>
+    В этой демонстрации мы получим окно сообщения, когда пользователь нажимает кнопку.
 
-<p>Вкратце, обработчик <code>onclick</code> — это свойство, доступное для кнопки (или, фактически, для любого элемента страницы), которое можно установить в функцию, чтобы указать, какой код следует запускать при нажатии кнопки. Вы узнаете об этом больше в нашей статье о последующих событиях. Мы делаем обработчик <code>onclick</code> равным анонимной функции, которая содержит код, запускаемый при нажатии кнопки. Строка внутри функции использует функцию {{domxref ("Node.removeChild()")}} DOM API, чтобы указать, что мы хотим удалить определённый дочерний элемент внутри HTML — в данном случае панель <code>&lt;div&gt;</code>.</p>
+3.  Удалите предыдущую добавленную строку.
+4.  Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции:
 
-<pre class="brush: js">closeBtn.onclick = function() {
-  panel.parentNode.removeChild(panel);
-}</pre>
+    ```js
+    var btn = document.querySelector('button');
+    ```
 
-<p>В принципе, весь этот блок кода генерирует блок HTML, который выглядит так и вставляет его на страницу:</p>
+5.  Наконец, добавьте следующую строку ниже предыдущей:
 
-<pre class="brush: html">&lt;div class="msgBox"&gt;
-  &lt;p&gt;This is a message box&lt;/p&gt;
-  &lt;button&gt;x&lt;/button&gt;
-&lt;/div&gt;</pre>
+    ```js
+    btn.onclick = displayMessage;
+    ```
 
-<p>Вам не обязательно запоминать сейчас, как работает каждый элемент во всем этом коде. Основная задача — понять структуру и использование функции, при этом мы хотели показать что-то интересное для этого примера.</p>
+    Аналогично нашей строке `closeBtn.onclick...` внутри функции здесь мы вызываем некоторый код в ответ на нажатие кнопки. Но в этом случае вместо вызова анонимной функции, содержащей некоторый код, мы вызываем имя нашей функции напрямую.
 
-<h2 id="Вызов_функции">Вызов функции</h2>
+6.  Сохраните и обновите страницу. Теперь вы должны увидеть окно с сообщением, когда вы нажимаете кнопку.
 
-<p>Теперь у вас есть определение функции, написанное в вашем элементе <code>&lt;script&gt;</code>, но оно ничего не будет делать в том виде, в каком оно есть.</p>
+Возможно, вам интересно, почему мы не включили круглые скобки после имени функции. Это связано с тем, что нам нужно не сразу вызвать функцию, а только после нажатия кнопки. Если вы попытаетесь изменить строку на
 
-<ol>
- <li>Попробуйте написать следующую строку под своей функцией, чтобы вызвать её:
-  <pre class="brush: js">displayMessage();</pre>
-  Эта строка вызывает функцию, немедленно запуская её. Когда вы сохраните код и перезагрузите его в браузере, вы увидите, что небольшое окно сообщения появляется сразу и только один раз.</li>
- <li>
-  <p>Теперь откройте инструменты разработчика браузера на странице примера, перейдите в консоль JavaScript и снова введите эту строку. Вы увидите, что окно появится снова! Теперь у нас есть функция многократного использования, которую мы можем вызвать в любое время.</p>
+```js
+btn.onclick = displayMessage();
+```
 
-  <p>Но мы, вероятно, хотим, чтобы оно появлялось в ответ на действия пользователя и системы. В реальном приложении такое окно сообщения, вероятно, будет вызвано в ответ на доступность новых данных или, если произошла ошибка, или, например, если пользователь пытается удалить свой профиль («вы уверены в этом?»), или если пользователь добавляет новый контакт и операция успешно завершена и т. д.</p>
+сохраните и перезагрузите страницу, вы увидите, что окно сообщения появляется без нажатия кнопки! Скобки в этом контексте иногда называют «оператором вызова функции». Вы используете их только в том случае, если хотите немедленно запустить функцию в текущей области. В этом же отношении код внутри анонимной функции не запускается сразу, так как он находится внутри области функций.
 
-  <p>В этой демонстрации мы получим окно сообщения, когда пользователь нажимает кнопку.</p>
- </li>
- <li>Удалите предыдущую добавленную строку.</li>
- <li>Затем мы выберем кнопку и сохраним ссылку на неё в переменной. Добавьте следующую строку в свой код, над определением функции:
-  <pre class="brush: js">var btn = document.querySelector('button');</pre>
- </li>
- <li>Наконец, добавьте следующую строку ниже предыдущей:
-  <pre class="brush: js">btn.onclick = displayMessage;</pre>
-  Аналогично нашей строке <code>closeBtn.onclick...</code> внутри функции здесь мы вызываем некоторый код в ответ на нажатие кнопки. Но в этом случае вместо вызова анонимной функции, содержащей некоторый код, мы вызываем имя нашей функции напрямую.</li>
- <li>Сохраните и обновите страницу. Теперь вы должны увидеть окно с сообщением, когда вы нажимаете кнопку.</li>
-</ol>
+Если вы пробовали последний эксперимент, перед тем, как продолжить, обязательно отмените последнее изменение.
 
-<p>Возможно, вам интересно, почему мы не включили круглые скобки после имени функции. Это связано с тем, что нам нужно не сразу вызвать функцию, а только после нажатия кнопки. Если вы попытаетесь изменить строку на</p>
+## Улучшение функции с параметрами
 
-<pre class="brush: js">btn.onclick = displayMessage();</pre>
+В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.
 
-<p>сохраните и перезагрузите страницу, вы увидите, что окно сообщения появляется без нажатия кнопки! Скобки в этом контексте иногда называют «оператором вызова функции». Вы используете их только в том случае, если хотите немедленно запустить функцию в текущей области. В этом же отношении код внутри анонимной функции не запускается сразу, так как он находится внутри области функций.</p>
+1.  Прежде всего, обновите первую строку функции:
 
-<p>Если вы пробовали последний эксперимент, перед тем, как продолжить, обязательно отмените последнее изменение.</p>
+    ```js
+    function displayMessage() {
+    ```
 
-<h2 id="Улучшение_функции_с_параметрами">Улучшение функции с параметрами</h2>
+    к этому:
 
-<p>В нынешнем виде функция по-прежнему не очень полезна — мы не хотим показывать одно и то же сообщение по умолчанию каждый раз. Давайте улучшим нашу функцию, добавив некоторые параметры, позволяющие нам называть её различными вариантами.</p>
+    ```js
+    function displayMessage(msgText, msgType) {
+    ```
 
-<ol>
- <li>
-  <p>Прежде всего, обновите первую строку функции:</p>
+    Теперь, когда мы вызываем функцию, мы можем предоставить два значения переменных в круглых скобках, чтобы указать сообщение для отображения в окне сообщения, а также тип сообщения.
 
-  <pre class="brush: js">function displayMessage() {</pre>
+2.  Чтобы использовать первый параметр, обновите следующую строку внутри своей функции:
 
-  <p>к этому:</p>
+    ```js
+    msg.textContent = 'This is a message box';
+    ```
 
-  <pre class="brush: js">function displayMessage(msgText, msgType) {</pre>
-  Теперь, когда мы вызываем функцию, мы можем предоставить два значения переменных в круглых скобках, чтобы указать сообщение для отображения в окне сообщения, а также тип сообщения.</li>
- <li>Чтобы использовать первый параметр, обновите следующую строку внутри своей функции:
-  <pre class="brush: js">msg.textContent = 'This is a message box';</pre>
+    к этому:
 
-  <p>к этому:</p>
+    ```js
+    msg.textContent = msgText;
+    ```
 
-  <pre class="brush: js">msg.textContent = msgText;</pre>
- </li>
- <li>И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку:
-  <pre class="brush: js">btn.onclick = displayMessage;</pre>
+3.  И последнее, но не менее важное: теперь вам нужно обновить вызов функции, чтобы включить в него обновлённый текст сообщения. Измените следующую строку:
 
-  <p>к этому блоку:</p>
+    ```js
+    btn.onclick = displayMessage;
+    ```
 
-  <pre class="brush: js">btn.onclick = function() {
-  displayMessage('Woo, this is a different message!');
-};</pre>
-  Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.</li>
- <li>Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.</li>
-</ol>
+    к этому блоку:
 
-<h3 id="Более_сложный_параметр">Более сложный параметр</h3>
+    ```js
+    btn.onclick = function() {
+      displayMessage('Woo, this is a different message!');
+    };
+    ```
 
-<p>Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр <code>msgType</code> установлен, функция отображала другой значок и другой цвет фона.</p>
+    Если мы хотим указать параметры в круглых скобках для вызываемой нами функции, то мы не можем назвать её напрямую, нам нужно поместить её в анонимную функцию, чтобы она не находилась непосредственно в области видимости и, следовательно, не вызывалась немедленно. Теперь она не будет вызываться до нажатия кнопки.
 
-<ol>
- <li>Для начала, загрузите значки, необходимые для этого упражнения (<a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png">warning</a> и <a href="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png">chat</a> [тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке <code>icons</code> в том же месте, что и ваш HTML-файл.
+4.  Перезагрузите и протестируйте код ещё раз, и вы увидите, что он по-прежнему работает, только теперь вы также можете изменять сообщение внутри параметра, чтобы отображать разные сообщения в окне.
 
-  <div class="note"><strong>Примечание</strong>: иконки <a href="https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon">warning</a> и <a href="https://www.iconfinder.com/icons/1031441/chat_message_text_icon">chat</a> были найдены на <a href="https://www.iconfinder.com/" rel="noopener">iconfinder.com</a>, и разработаны <a href="https://www.iconfinder.com/nazarr">Nazarrudin Ansyari</a>. Спасибо! (Фактические страницы значков были перемещены или удалены.) </div>
- </li>
- <li>Затем найдите CSS внутри вашего HTML-файла. Мы сделаем несколько изменений, чтобы освободить место для иконок. Во-первых, обновите ширину <code>.msgBox</code>:
-  <pre class="brush: css">width: 200px;</pre>
+### Более сложный параметр
 
-  <p>измените на:</p>
+Переход к следующему параметру. Это потребует немного больше работы. Установим его так, чтобы в зависимости от того, какой параметр `msgType` установлен, функция отображала другой значок и другой цвет фона.
 
-  <pre class="brush: css">width: 242px;</pre>
- </li>
- <li>Затем добавьте следующие строки в правило <code>.msgBox p { ... }</code> :
-  <pre class="brush: css">padding-left: 82px;
-background-position: 25px center;
-background-repeat: no-repeat;</pre>
- </li>
- <li>Теперь нам нужно добавить код в нашу функцию <code>displayMessage()</code>для обработки отображений значков. Добавьте следующий блок чуть выше закрывающей фигурной скобки "<code>}</code>" вашей функции:
-  <pre class="brush: js">if (msgType === 'warning') {
-  msg.style.backgroundImage = 'url(icons/warning.png)';
-  panel.style.backgroundColor = 'red';
-} else if (msgType === 'chat') {
-  msg.style.backgroundImage = 'url(icons/chat.png)';
-  panel.style.backgroundColor = 'aqua';
-} else {
-  msg.style.paddingLeft = '20px';
-}</pre>
-  Здесь, если параметр <code>msgType</code> установлен как <code>'warning'</code>, отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение<code>'chat'</code>, отображается значок чата, а цвет фона панели становится голубым. Если параметр <code>msgType</code> не задан вообще (или задано что-то другое), тогда вступает в действие <code>else {...}</code>, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр <code>msgType</code>, что означает, что это необязательный параметр!</li>
- <li>Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого:
-  <pre class="brush: js">displayMessage('Woo, this is a different message!');</pre>
+1.  Для начала, загрузите значки, необходимые для этого упражнения ([warning](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/warning.png) и [chat](https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/functions/icons/chat.png) \[тут чёрные иконки на чёрном фоне... тролли на GitHub]) из GitHub. Сохраните их в новой папке `icons` в том же месте, что и ваш HTML-файл.
 
-  <p>к одному из них:</p>
-
-  <pre class="brush: js">displayMessage('Your inbox is almost full — delete some mails', 'warning');
-displayMessage('Brian: Hi there, how are you today?','chat');</pre>
-  Вот, насколько полезной становится наша (теперь не очень) маленькая функция.</li>
-</ol>
+    > **Примечание:** иконки [warning](https://www.iconfinder.com/icons/1031466/alarm_alert_error_warning_icon) и [chat](https://www.iconfinder.com/icons/1031441/chat_message_text_icon) были найдены на [iconfinder.com](https://www.iconfinder.com/), и разработаны [Nazarrudin Ansyari](https://www.iconfinder.com/nazarr). Спасибо! (Фактические страницы значков были перемещены или удалены.)
 
-<div class="note">
-<p><strong>Примечание</strong>: Если у вас возникли проблемы с запуском примера, не стесняйтесь проверять свой код на готовой версии <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html">GitHub</a> (см. также <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html">в режиме реального времени</a>) или обратитесь к нам за помощью.</p>
-</div>
+2.  Затем найдите CSS внутри вашего HTML-файла. Мы сделаем несколько изменений, чтобы освободить место для иконок. Во-первых, обновите ширину `.msgBox`:
+
+    ```css
+    width: 200px;
+    ```
+
+    измените на:
+
+    ```css
+    width: 242px;
+    ```
+
+3.  Затем добавьте следующие строки в правило `.msgBox p { ... }` :
+
+    ```css
+    padding-left: 82px;
+    background-position: 25px center;
+    background-repeat: no-repeat;
+    ```
+
+4.  Теперь нам нужно добавить код в нашу функцию `displayMessage()`для обработки отображений значков. Добавьте следующий блок чуть выше закрывающей фигурной скобки "`}`" вашей функции:
+
+    ```js
+    if (msgType === 'warning') {
+      msg.style.backgroundImage = 'url(icons/warning.png)';
+      panel.style.backgroundColor = 'red';
+    } else if (msgType === 'chat') {
+      msg.style.backgroundImage = 'url(icons/chat.png)';
+      panel.style.backgroundColor = 'aqua';
+    } else {
+      msg.style.paddingLeft = '20px';
+    }
+    ```
+
+    Здесь, если параметр `msgType` установлен как `'warning'`, отображается значок предупреждения, а цвет фона панели устанавливается красным. Если для него установлено значение`'chat'`, отображается значок чата, а цвет фона панели становится голубым. Если параметр `msgType` не задан вообще (или задано что-то другое), тогда вступает в действие `else {...}`, а абзацу просто присваиваются заданные по умолчанию отступы, нет никакого значка, при этом не задаётся цвет фона окна сообщения. Это обеспечивает состояние по умолчанию, если не указан параметр `msgType`, что означает, что это необязательный параметр!
+
+5.  Давайте протестируем нашу обновлённую функцию, попробуем обновить вызов displayMessage () из этого:
+
+    ```js
+    displayMessage('Woo, this is a different message!');
+    ```
+
+    к одному из них:
 
-<h2 id="Вывод">Вывод</h2>
+    ```js
+    displayMessage('Your inbox is almost full — delete some mails', 'warning');
+    displayMessage('Brian: Hi there, how are you today?','chat');
+    ```
 
-<p>В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.</p>
+    Вот, насколько полезной становится наша (теперь не очень) маленькая функция.
 
-<ul>
-</ul>
+> **Примечание:** Если у вас возникли проблемы с запуском примера, не стесняйтесь проверять свой код на готовой версии [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html) (см. также [в режиме реального времени](https://mdn.github.io/learning-area/javascript/building-blocks/functions/function-stage-4.html)) или обратитесь к нам за помощью.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}</p>
+## Вывод
 
-<p> </p>
+В этой статье мы познакомились со всем процессом создания практической пользовательской функции, которую с небольшими доработками можно перенести в реальный проект. В следующей статье мы рассмотрим ещё одну важную концепцию — возвращаемые значения функций.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Functions","Learn/JavaScript/Building_blocks/Return_values", "Learn/JavaScript/Building_blocks")}}
 
-<ul>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в вашем коде — условные конструкции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — Переиспользуемые блоки кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою собственную функцию</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемое значение функции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/События">Введение в события</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery">Создание галереи</a></li>
-</ul>
+## В этом модуле
 
-<p> </p>
+- [Принятие решений в вашем коде — условные конструкции](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Зацикливание кода](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [Функции — Переиспользуемые блоки кода](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Создайте свою собственную функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [Возвращаемое значение функции](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Введение в события](/ru/docs/Learn/JavaScript/Building_blocks/События)
+- [Создание галереи](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/ru/learn/javascript/building_blocks/conditionals/index.md b/files/ru/learn/javascript/building_blocks/conditionals/index.md
index 57ced9be083630..ec3597259bd296 100644
--- a/files/ru/learn/javascript/building_blocks/conditionals/index.md
+++ b/files/ru/learn/javascript/building_blocks/conditionals/index.md
@@ -11,112 +11,108 @@ tags:
   - Статья
 translation_of: Learn/JavaScript/Building_blocks/conditionals
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</div>
+Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в JavaScript работают так называемые "условия".
 
-<p class="summary">Во многих языках программирования код должен иметь возможность принимать решения на основе введённых пользователем данных. Например, в игре, если у пользователя осталось 0 жизней, то игра завершается. В приложении о погоде утром отображается восход солнца, а вечером звезды и луна. В этой статье мы рассмотрим как в  JavaScript работают так называемые "условия".</p>
+| Необходимое условие: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, [JavaScript first steps](/ru/docs/Learn/JavaScript/First_steps). |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Понять принципы использования операторов условий в JavaScript.                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимое условие:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять принципы использования операторов условий в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Выбор одного условия!..
 
-<h2 id="Выбор_одного_условия!..">Выбор одного условия!..</h2>
+Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых ("стоит ли мне съесть одну печеньку или две?") до жизнеопределяющих ("стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?")
 
-<p>Люди (и животные) принимают какие-либо решения всю жизнь, от малозначимых ("стоит ли мне съесть одну печеньку или две?") до жизнеопределяющих ("стоит ли мне остаться дома и работать на ферме отца или переехать в другую страну и изучать астрофизику?")</p>
+Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все ещё буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня поругает за то, что я съел все сладости".
 
-<p>Операторы условия в JavaScript позволяют нам указать разного рода действия в зависимости от выбранного пользователем или системой ответа (например одна печенька или две) и связать его с действием (результатом), например, результатом "съесть одну печеньку" будет "все ещё буду чувствовать себя голодным", а результатом "съесть две печеньки" будет "буду чувствовать себя сытым, но мама меня поругает за то, что я съел все сладости". </p>
+![](https://mdn.mozillademos.org/files/13703/cookie-choice-small.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13703/cookie-choice-small.png" style="display: block; margin: 0 auto;"></p>
+## Оператор if ... else
 
-<h2 id="Оператор_if_..._else">Оператор if ... else</h2>
+Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — [`if ... else`](/ru/docs/Web/JavaScript/Reference/Statements/if...else)[ оператор](/ru/docs/Web/JavaScript/Reference/Statements/if...else).
 
-<p>Давайте глянем на наиболее распространённый тип условного оператора, который вы будете использовать в JavaScript — <code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else">if ... else</a></code><a href="/ru/docs/Web/JavaScript/Reference/Statements/if...else"> оператор</a>.</p>
+### Базовый if ... else синтаксис
 
-<h3 id="Базовый_if_..._else_синтаксис">Базовый if ... else синтаксис</h3>
+Базовый `if...else` синтаксис выглядит как {{glossary("pseudocode")}}:
 
-<p>Базовый <code>if...else</code> синтаксис выглядит как {{glossary("pseudocode")}}:</p>
-
-<pre>if (condition) {
+```
+if (condition) {
   code to run if condition is true
 } else {
   run some other code instead
-}</pre>
+}
+```
 
-<p>Что мы имеем:</p>
+Что мы имеем:
 
-<ol>
- <li>Ключевое слово <code>if</code> расположено перед круглыми скобками.</li>
- <li>Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения (<a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">comparison operators</a>), которые мы изучим позже, и возвратит нам <code>true</code> или <code>false</code>.</li>
- <li>Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (<code>true)</code>.</li>
- <li>Ключевое слово <code>else (иначе)</code>.</li>
- <li>Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не <code>true)</code>.</li>
-</ol>
+1.  Ключевое слово `if` расположено перед круглыми скобками.
+2.  Условие для проверки (condition), расположено внутри круглых скобок (например "это значение больше другого значения?", или "это значение существует?"). Это условие использует операторы сравнения ([comparison operators](/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators)), которые мы изучим позже, и возвратит нам `true` или `false`.
+3.  Внутри скобок { } расположен код, который будет выполняться только в том случае, если условие (condition) верно (`true)`.
+4.  Ключевое слово `else (иначе)`.
+5.  Ещё скобки { }, код внутри которых выполнится, только если условие не верно (не `true)`.
 
-<p>Этот код довольно читабелен — он говорит "<strong>if (если)</strong>  <strong>condition (условие) </strong>возвращает <code>true (истина)</code>, запусти код A, <strong>else (иначе) </strong>запусти B"</p>
+Этот код довольно читабелен — он говорит "**if (если)** **condition (условие)** возвращает `true (истина)`, запусти код A, **else (иначе)** запусти B"
 
-<p>Стоит заметить, что  <code>else</code> и второй блок скобок { } не обязателен — следующий код так же будет работать:</p>
+Стоит заметить, что `else` и второй блок скобок { } не обязателен — следующий код так же будет работать:
 
-<pre>if (condition) {
+```
+if (condition) {
   код, который должен выполнить, если условие истина
 }
 
-какой-то другой код</pre>
+какой-то другой код
+```
 
-<p>Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться <strong>всегда</strong>. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода <em>или </em>другой, но не оба.</p>
+Тем не менее, следует быть осторожным — в случае, если код внутри вторых скобок { } не контролируется условием, то этот код будет выполняться **всегда**. Это не плохо, просто вы должны помнить об этом, чаще вы хотите запустить один кусок кода _или_ другой, но не оба.
 
-<p>И, наконец, иногда вы можете встретить код <code>if...else</code> без фигурных скобок в сокращённой форме:</p>
+И, наконец, иногда вы можете встретить код `if...else` без фигурных скобок в сокращённой форме:
 
-<pre>if (condition) code to run if condition is true
-else run some other code instead</pre>
+```
+if (condition) code to run if condition is true
+else run some other code instead
+```
 
-<p>Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.</p>
+Это абсолютно рабочий код, но он менее читаем, лучше использовать фигурные скобки, новые строки и отступы.
 
-<h3 id="Реальный_пример">Реальный пример</h3>
+### Реальный пример
 
-<p>Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка.  Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь".  В JavaScript, мы можем представить это так: </p>
+Чтобы лучше понять синтаксис, давайте рассмотрим реальный пример. Представьте, что мать или отец попросили помочь с работой по дому своего ребёнка. Родитель может сказать: "Если ты поможешь мне с покупками, то я дам тебе дополнительные деньги на карманные расходы, которые ты сможешь потратить на игрушку, какую захочешь". В JavaScript, мы можем представить это так:
 
-<pre class="brush: js">var shoppingDone = false;
+```js
+var shoppingDone = false;
 
 if (shoppingDone === true) {
   var childsAllowance = 10;
 } else {
   var childsAllowance = 5;
-}</pre>
+}
+```
 
-<p>В этом коде, как показано, всегда будет <code>shoppingDone</code> равный <code>false</code>, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной <code>shoppingDone</code> значение  <code>true</code> , если ребёнок помог с покупками.</p>
+В этом коде, как показано, всегда будет `shoppingDone` равный `false`, что означает разочарование для нашего бедного ребёнка. Мы должны предоставить механизм для родителя, чтобы установить для переменной `shoppingDone` значение `true` , если ребёнок помог с покупками.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете увидеть больше в <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html">полной версии этого примера на GitHub</a> (также посмотреть как он <a href="http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html">работает вживую</a>.)</p>
-</div>
+> **Примечание:** вы можете увидеть больше в [полной версии этого примера на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/allowance-updater.html) (также посмотреть как он [работает вживую](http://mdn.github.io/learning-area/javascript/building-blocks/allowance-updater.html).)
 
-<h3 id="else_if">else if</h3>
+### else if
 
-<p>В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?</p>
+В предыдущем примере предоставлено два выбора, или результата — но что, если мы хотим больше, чем два?
 
-<p>Существует способ привязать дополнительные варианты/результаты к вашему <code>if...else</code> — использовать<code>else if</code>. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между <code>if() { ... }</code> и <code>else { ... }</code> — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:</p>
+Существует способ привязать дополнительные варианты/результаты к вашему `if...else` — использовать`else if`. Для каждого дополнительного выбора требуется дополнительный блок, который нужно расположить между `if() { ... }` и `else { ... }` — проверьте следующий более сложный пример, который может быть частью простого приложения прогноза погоды:
 
-<pre class="brush: html">&lt;label for="weather"&gt;Выберите тип погоды сегодня: &lt;/label&gt;
-&lt;select id="weather"&gt;
-  &lt;option value=""&gt;--Сделайте выбор--&lt;/option&gt;
-  &lt;option value="sunny"&gt;Солнечно&lt;/option&gt;
-  &lt;option value="rainy"&gt;Дождливо&lt;/option&gt;
-  &lt;option value="snowing"&gt;Снежно&lt;/option&gt;
-  &lt;option value="overcast"&gt;Облачно&lt;/option&gt;
-&lt;/select&gt;
+```html
+<label for="weather">Выберите тип погоды сегодня: </label>
+<select id="weather">
+  <option value="">--Сделайте выбор--</option>
+  <option value="sunny">Солнечно</option>
+  <option value="rainy">Дождливо</option>
+  <option value="snowing">Снежно</option>
+  <option value="overcast">Облачно</option>
+</select>
 
-&lt;p&gt;&lt;/p&gt;</pre>
+<p></p>
+```
 
-<pre class="brush: js">var select = document.querySelector('select');
+```js
+var select = document.querySelector('select');
 var para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -136,133 +132,141 @@ function setWeather() {
     para.textContent = '';
   }
 }
+```
 
-</pre>
+{{ EmbedLiveSample('else_if', '100%', 100) }}
 
-<p>{{ EmbedLiveSample('else_if', '100%', 100) }}</p>
+1.  Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.
+2.  В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента `<select>`, чтобы при его изменении значения запускалась функция `setWeather()`.
+3.  Когда функция будет запущена, первоначально мы определим значение переменной `choice`, которая равна выбранному значению в элементе `<select>`. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной `choice`. Обратите внимание, как все условия проверяются в `else if() {...}` блоках, за исключением первого, который использует `if() {...}`блок.
+4.  Последний выбор, внутри `else {...}` блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет `true`. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.
 
-<ol>
- <li>Здесь у нас есть элемент HTML {{htmlelement("select")}} который позволяет нам выбирать разные варианты погоды и простой абзац.</li>
- <li>В JavaScript мы создаём ссылки на элементы {{htmlelement("select")}} и {{htmlelement("p")}} и добавляем обработчик события элемента <code>&lt;select&gt;</code>, чтобы при его изменении значения запускалась функция <code>setWeather()</code>.</li>
- <li>Когда функция будет запущена, первоначально мы определим значение переменной <code>choice</code>, которая равна выбранному значению в элементе  <code>&lt;select&gt;</code>. Затем мы используем условный оператор для отображения текста внутри абзаца в зависимости от того, какое значение у переменной  <code>choice</code>. Обратите внимание, как все условия проверяются в <code>else if() {...}</code> блоках, за исключением первого, который использует <code>if() {...}</code>блок.</li>
- <li>Последний выбор, внутри  <code>else {...}</code> блока, в основном является «последним средством» — код внутри него будет запущен, если ни одно из условий не будет <code>true</code>. В этом случае он служит для удаления текста из абзаца, если ничего не выбрано, например, если пользователь решает повторно выбрать опцию "--Сделайте выбор--" которая указана в начале.</li>
-</ol>
+> **Примечание:** вы можете [найти этот пример на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html) (также [увидеть как он работает](http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html))
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-else-if.html">найти этот пример на GitHub</a> (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-else-if.html">увидеть как он работает</a>)</p>
-</div>
-
-<h3 id="Примечание_об_операторах_сравнения">Примечание об операторах сравнения</h3>
+### Примечание об операторах сравнения
 
-<p>Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в  нашей статье <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Comparison_operators">Базовая математика в JavaScript — цифры и операторы</a> . Наш выбор это:</p>
+Операторы сравнения используют для проверки условий внутри наших условных операторов. Сначала мы посмотрели на операторы сравнения в нашей статье [Базовая математика в JavaScript — цифры и операторы](/ru/docs/Learn/JavaScript/Первые_шаги/Math#Comparison_operators) . Наш выбор это:
 
-<ul>
- <li><code>===</code> и <code>!==</code> — проверяет одно значение идентично или не идентично другому.</li>
- <li><code>&lt;</code> и <code>&gt;</code> — проверяет одно значение меньше или больше, чем другое.</li>
- <li><code>&lt;=</code> и <code>&gt;=</code> — проверяет одно значение меньше или равно, либо больше или равно другому.</li>
-</ul>
+- `===` и `!==` — проверяет одно значение идентично или не идентично другому.
+- `<` и `>` — проверяет одно значение меньше или больше, чем другое.
+- `<=` и `>=` — проверяет одно значение меньше или равно, либо больше или равно другому.
 
-<div class="note">
-<p><strong>Примечание</strong>: Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.</p>
-</div>
+> **Примечание:** Просмотрите материал по предыдущей ссылке, если вы хотите освежить свою память.
 
-<p>Мы хотели бы особо обратить внимание на проверку булевых значений (<code>true</code>/<code>false</code>),  и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть  <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>NaN</code>, или пустая строка (<code>''</code>) фактически возвращает <code>true</code> при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она <code>true</code>, или существует (т. е. переменная не равна undefined). Например:</p>
+Мы хотели бы особо обратить внимание на проверку булевых значений (`true`/`false`), и общий шаблон, который вы будете встречать снова и снова. Любое значение, которое не есть `false`, `undefined`, `null`, `0`, `NaN`, или пустая строка (`''`) фактически возвращает `true` при тестировании как условного оператора. Поэтому вы можете просто использовать имя собственной переменной, чтобы проверить, равна ли она `true`, или существует (т. е. переменная не равна undefined). Например:
 
-<pre class="brush: js">var cheese = 'Cheddar';
+```js
+var cheese = 'Cheddar';
 
 if (cheese) {
   console.log('Ура! Есть сыр для приготовления бутерброда.');
 } else {
   console.log('Сегодня нет сыра для бутерброда.');
-}</pre>
+}
+```
 
-<p>И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:</p>
+И, возвращаясь к нашему предыдущему примеру о ребёнке, выполняющем поручение своего родителя, вы можете это записать так:
 
-<pre class="brush: js">var shoppingDone = false;
+```js
+var shoppingDone = false;
 
 if (shoppingDone) { // не нужно явно указывать '=== true'
   var childsAllowance = 10;
 } else {
   var childsAllowance = 5;
-}</pre>
+}
+```
 
-<h3 id="Вложенность_if_..._else">Вложенность if ... else</h3>
+### Вложенность if ... else
 
-<p>Вполне нормально использовать один условный оператор <code>if...else</code> внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:</p>
+Вполне нормально использовать один условный оператор `if...else` внутри другого — вложить их. Например, мы могли бы обновить наше приложение прогноза погоды, чтобы показать ещё один набор вариантов в зависимости от температуры:
 
-<pre class="brush: js">if (choice === 'sunny') {
-  if (temperature &lt; 86) {
+```js
+if (choice === 'sunny') {
+  if (temperature < 86) {
     para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
-  } else if (temperature &gt;= 86) {
+  } else if (temperature >= 86) {
     para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
   }
-}</pre>
+}
+```
 
-<p>Несмотря на то, что весь код работает вместе, каждый условный оператор <code>if...else</code> работает полностью отдельно от другого.</p>
+Несмотря на то, что весь код работает вместе, каждый условный оператор `if...else` работает полностью отдельно от другого.
 
-<h3 id="Логические_операторы_И_ИЛИ_и_НЕ">Логические операторы: И, ИЛИ и НЕ</h3>
+### Логические операторы: И, ИЛИ и НЕ
 
-<p>Если вы хотите проверить несколько условий без записи вложенных <code>if...else</code> условий, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators">логические операторы</a> помогут вам. При использовании в условиях, первые два оператора делают следующее:</p>
+Если вы хотите проверить несколько условий без записи вложенных `if...else` условий, [логические операторы](/ru/docs/Web/JavaScript/Reference/Operators/Logical_Operators) помогут вам. При использовании в условиях, первые два оператора делают следующее:
 
-<ul>
- <li><code>&amp;&amp;</code> — И; позволяет объединить два или более выражения так, что каждое из них отдельно должно иметь значение <code>true</code> , чтобы в итоге общее выражение имело значение <code>true</code>.</li>
- <li><code>||</code> — ИЛИ; позволяет объединить два или более выражения так, что одно или несколько из них должно иметь значение <code>true</code> , чтобы в итоге общее выражение имело значение<code>true</code>.</li>
-</ul>
+- `&&` — И; позволяет объединить два или более выражения так, что каждое из них отдельно должно иметь значение `true` , чтобы в итоге общее выражение имело значение `true`.
+- `||` — ИЛИ; позволяет объединить два или более выражения так, что одно или несколько из них должно иметь значение `true` , чтобы в итоге общее выражение имело значение`true`.
 
-<p>Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:</p>
+Чтобы дать вам пример оператора И, предыдущий фрагмент кода можно переписать так:
 
-<pre class="brush: js">if (choice === 'sunny' &amp;&amp; temperature &lt; 86) {
+```js
+if (choice === 'sunny' && temperature < 86) {
   para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — хорошо и солнечно. Идите на пляж, или в парк, и купите мороженое.';
-} else if (choice === 'sunny' &amp;&amp; temperature &gt;= 86) {
+} else if (choice === 'sunny' && temperature >= 86) {
   para.textContent = 'Сейчас ' + temperature + ' градусов по фаренгейту — Жара! Если вы хотите выйти на улицу, обязательно используйте солнцезащитный крем.';
-}</pre>
+}
+```
 
-<p>Так, для примера, первый блок кода выполнится только в том случае, если  <code>choice === 'sunny'</code> <em>и</em><code>temperature &lt; 86</code> вернут значение <code>true</code>.</p>
+Так, для примера, первый блок кода выполнится только в том случае, если `choice === 'sunny'` _и_`temperature < 86` вернут значение `true`.
 
-<p>Давайте посмотрим на быстрый пример оператора ИЛИ:</p>
+Давайте посмотрим на быстрый пример оператора ИЛИ:
 
-<pre class="brush: js">if (iceCreamVanOutside || houseStatus === 'в огне') {
+```js
+if (iceCreamVanOutside || houseStatus === 'в огне') {
   //если подъехал фургон с мороженым или дом горит
   console.log('Вы должны быстро покинуть дом.');
 } else {
   console.log('Вероятно, можно в нем оставаться.');
-}</pre>
+}
+```
 
-<p>Последний тип логического оператора НЕ, выраженный <code>!</code> оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:</p>
+Последний тип логического оператора НЕ, выраженный `!` оператором, можно использовать для отрицания выражения. Давайте объединим его с ИЛИ в приведённом выше примере:
 
-<pre class="brush: js">if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
+```js
+if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
   console.log('Вероятно, можно в нем оставаться.');
 } else {
   console.log('Вы должны быстро покинуть дом.');
-}</pre>
+}
+```
 
-<p>В этом фрагменте, если условие ИЛИ возвращает <code>true</code>, оператор НЕ будет отрицать это и выражение вернёт <code>false</code>.</p>
+В этом фрагменте, если условие ИЛИ возвращает `true`, оператор НЕ будет отрицать это и выражение вернёт `false`.
 
-<p>Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:</p>
+Можно сочетать любое количество логических операторов, в любой последовательности и в любой комбинации. В следующем примере код в блоке будет выполняться только в том случае, если оба условия с ИЛИ возвращают true, а следовательно, и оператор И возвращает true:
 
-<pre class="brush: js">if ((x === 5 || y &gt; 3 || z &lt;= 10) &amp;&amp; (loggedIn || userName === 'Steve')) {
+```js
+if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
   // код выполняется
-}</pre>
+}
+```
 
-<p>Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами <code>||</code> (ИЛИ). Например.</p>
+Распространённой ошибкой при использовании логического оператора ИЛИ в условном выражении является указание переменной, значение которой нужно проверить со списком возможных значений этой переменной, разделённых операторами `||` (ИЛИ). Например.
 
-<pre class="example-bad brush: js">if (x === 5 || 7 || 10 || 20) {
+```js example-bad
+if (x === 5 || 7 || 10 || 20) {
   // выполнить код
-}</pre>
+}
+```
 
-<p>В данном примере условие в <code>if(...)</code>  всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:</p>
+В данном примере условие в `if(...)` всегда будет оцениваться как true, поскольку 7 (или любое другое ненулевое значение) всегда будет оцениваться как true. Фактически, это условие гласит «если х равен 5, или 7 является true». Но нам требуется совсем не это. Чтобы достичь нужной цели, придётся выполнять полноценную проверку после каждого оператора ИЛИ:
 
-<pre class="brush: js">if (x === 5 || x === 7 || x === 10 ||x === 20) {
+```js
+if (x === 5 || x === 7 || x === 10 ||x === 20) {
   // выполнить код
-}</pre>
+}
+```
 
-<h2 id="Оператор_switch">Оператор switch</h2>
+## Оператор switch
 
-<p>Выражения <code>if...else</code> отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.</p>
+Выражения `if...else` отлично справляются с добавлением условного кода, однако они не лишены недостатков. Они хорошо подходят для ситуации, когда имеется всего пара вариантов развития событий, каждый из которых имеет блок с приемлемым количеством кода, а также в случаях, когда условие является довольно сложным и включает несколько логических операторов. Если же нам требуется всего лишь задать переменную для определённого выбранного значения или напечатать конкретную фразу при определённом условии, изученный нами синтаксис может оказаться довольно громоздким, особенно если имеется большое количество вариантов выбора.
 
-<p>В этом случае нам поможет <a href="/en-US/docs/Web/JavaScript/Reference/Statements/switch">оператор <code>switch</code> </a>– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:</p>
+В этом случае нам поможет [оператор `switch` ](/ru/docs/Web/JavaScript/Reference/Statements/switch)– он принимает одно единственное выражение или значение, а затем просматривает ряд вариантов, пока не найдут вариант, соответствующий этому значению, после чего выполняет код, назначенный этому варианту. Вот пример использования этого оператора:
 
-<pre>switch (выражение) {
+```
+switch (выражение) {
   case choice1:
     выполнить этот код
     break;
@@ -275,40 +279,40 @@ if (shoppingDone) { // не нужно явно указывать '=== true'
 
   default:
     а вообще-то, выполнить только этот код
-}</pre>
-
-<p>Что мы имеем:</p>
-
-<ol>
- <li>Ключевое слово <code>switch</code>, за которым следует пара круглых скобок.</li>
- <li>В скобках приводится выражение или значение.</li>
- <li>Ключевое слово <code>case</code>, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.</li>
- <li>Код, который будет выполняться, если вариант совпадает с выражением.</li>
- <li>Оператор <code>break</code>, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора <code>break</code>, и перейдёт к выполнению кода, расположенного после оператора switch.</li>
- <li>Вариантов выбора (пункты 3–5) может быть любое количество.</li>
- <li>Ключевое слово <code>default</code> используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после <code>default</code> нет других вариантов выбора, поэтому инструкция <code>break</code> не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание.</strong> Вариант выбора <code>default</code> может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант <code>default</code> необходим.</p>
-</div>
+}
+```
+
+Что мы имеем:
 
-<h3 id="Пример_оператора_switch">Пример оператора switch</h3>
+1.  Ключевое слово `switch`, за которым следует пара круглых скобок.
+2.  В скобках приводится выражение или значение.
+3.  Ключевое слово `case`, за которым следует вариант выбора (именно он проверяется на соответствие выражению или значению) и двоеточие.
+4.  Код, который будет выполняться, если вариант совпадает с выражением.
+5.  Оператор `break`, за которым следует точка с запятой. Если вариант совпал с выражением или значением, браузер закончит выполнять блок кода, дойдя до оператора `break`, и перейдёт к выполнению кода, расположенного после оператора switch.
+6.  Вариантов выбора (пункты 3–5) может быть любое количество.
+7.  Ключевое слово `default` используется точно также, как любой другой вариант выбора (пункты 3–5) за тем исключением, что после `default` нет других вариантов выбора, поэтому инструкция `break` не требуется, никакого кода дальше нет. Это вариант выбора по умолчанию, выбираемый, если ни один из других вариантов не совпал с выражением.
 
-<p>Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:</p>
+> **Примечание:** **Примечание.** Вариант выбора `default` может быть пропущен, если выражение гарантированно совпадёт с одним из вариантов выбора. В противном случае вариант `default` необходим.
 
-<pre class="brush: html">&lt;label for="weather"&gt;Выберите тип погоды сегодня: &lt;/label&gt;
-&lt;select id="weather"&gt;
-  &lt;option value=""&gt;--Сделайте выбор--&lt;/option&gt;
-  &lt;option value="sunny"&gt;Солнечно&lt;/option&gt;
-  &lt;option value="rainy"&gt;Дождливо&lt;/option&gt;
-  &lt;option value="snowing"&gt;Снежно&lt;/option&gt;
-  &lt;option value="overcast"&gt;Облачно&lt;/option&gt;
-&lt;/select&gt;
+### Пример оператора switch
 
-&lt;p&gt;&lt;/p&gt;</pre>
+Давайте рассмотрим реальный пример — перепишем наше приложение прогноза погоды с использованием оператора switch:
 
-<pre class="brush: js">var select = document.querySelector('select');
+```html
+<label for="weather">Выберите тип погоды сегодня: </label>
+<select id="weather">
+  <option value="">--Сделайте выбор--</option>
+  <option value="sunny">Солнечно</option>
+  <option value="rainy">Дождливо</option>
+  <option value="snowing">Снежно</option>
+  <option value="overcast">Облачно</option>
+</select>
+
+<p></p>
+```
+
+```js
+var select = document.querySelector('select');
 var para = document.querySelector('p');
 
 select.addEventListener('change', setWeather);
@@ -333,39 +337,45 @@ function setWeather() {
     default:
       para.textContent = '';
   }
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('Пример_оператора_switch', '100%', 100) }}</p>
+{{ EmbedLiveSample('Пример_оператора_switch', '100%', 100) }}
 
-<div class="note">
-<p><strong>Note</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html">найти этот пример на GitHub</a> (также увидеть <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html">как он работает</a>.)</p>
-</div>
+> **Примечание:** вы можете [найти этот пример на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-switch.html) (также увидеть [как он работает](http://mdn.github.io/learning-area/javascript/building-blocks/simple-switch.html).)
 
-<h2 id="Тернарный_оператор">Тернарный оператор</h2>
+## Тернарный оператор
 
-<p>Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Тернарный или условный оператор</a> имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является <code>true</code>, и другое значение/выражение, если условие является <code>false</code>. Часто это очень удобная альтернатива блоку <code>if...else</code>, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия <code>true</code>/<code>false</code>. Общая схема оператора:</p>
+Это последний теоретический раздел данной статьи и мы перейдём к практическим упражнениям. [Тернарный или условный оператор](/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) имеет простой синтаксис: он проверяет условие и возвращает одно значение или выражение, если условие является `true`, и другое значение/выражение, если условие является `false`. Часто это очень удобная альтернатива блоку `if...else`, позволяющая затрачивать меньшие усилия на написание кода, когда имеется всего лишь два варианта, выбираемых на основе условия `true`/`false`. Общая схема оператора:
 
-<pre>( условие) ? выполнить этот код : выполнить этот код вместо первого</pre>
+```
+( условие) ? выполнить этот код : выполнить этот код вместо первого
+```
 
-<p>Приведём простой пример:</p>
+Приведём простой пример:
 
-<pre class="brush: js">var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';</pre>
+```js
+var greeting = ( isBirthday ) ? 'С днём рождения, г-н Кузнецов! Хорошо вам повеселиться!' : 'Доброе утро, г-н Кузнецов.';
+```
 
-<p>У нас есть переменная <code>isBirthday</code> , если она <code>true</code>, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.</p>
+У нас есть переменная `isBirthday` , если она `true`, мы отправляем посетителю поздравление с днём рождения; если нет – выдаём стандартное приветствие.
 
-<h3 id="Пример_тернарного_оператора">Пример тернарного оператора</h3>
+### Пример тернарного оператора
 
-<p>При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.</p>
+При использовании тернарного оператора не обязательно ограничиваться лишь значениями переменной, можно выполнять функции или строки кода; все, что угодно. В следующем примере показано простое средство выбора темы, задающее внешний вид веб-сайта с помощью тернарного оператора.
 
-<pre class="brush: html">&lt;label for="theme"&gt;Выберите тему: &lt;/label&gt;
-&lt;select id="theme"&gt;
-  &lt;option value="white"&gt;Белая&lt;/option&gt;
-  &lt;option value="black"&gt;Чёрная&lt;/option&gt;
-&lt;/select&gt;
+```html
+<label for="theme">Выберите тему: </label>
+<select id="theme">
+  <option value="white">Белая</option>
+  <option value="black">Чёрная</option>
+</select>
 
-&lt;h1&gt;Это мой веб-сайт&lt;/h1&gt;</pre>
+<h1>Это мой веб-сайт</h1>
+```
 
-<pre class="brush: js">var select = document.querySelector('select');
+```js
+var select = document.querySelector('select');
 var html = document.querySelector('html');
 document.body.style.padding = '10px';
 
@@ -377,76 +387,64 @@ function update(bgColor, textColor) {
 select.onchange = function() {
   ( select.value === 'black' ) ? update('black','white') : update('white','black');
 }
-</pre>
+```
 
-<p>{{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}</p>
+{{ EmbedLiveSample('Пример_тернарного_оператора', '100%', 300) }}
 
-<p>Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция <code>update()</code>, принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.</p>
+Мы используем элемент {{htmlelement('select')}} для выбора темы (чёрная или белая), а также простой {{htmlelement('h1')}} для отображения заголовка веб-сайта. Кроме того, у нас есть функция `update()`, принимающая в качестве параметров (входных данных) два цвета. В качестве фона используется первый переданный цвет, а в качестве цвета текста – второй переданный цвет.
 
-<p>Наконец, у нас есть обработчик событий <a href="/en-US/docs/Web/API/GlobalEventHandlers/onchange">onchange</a> , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — <code>select.value === 'black'</code>. Если возвращается <code>true</code>, мы запускаем функцию <code>update()</code> с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается <code>false</code>, мы запускаем функцию <code>update()</code> с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.</p>
+Наконец, у нас есть обработчик событий [onchange](/ru/docs/Web/API/GlobalEventHandlers/onchange) , использующийся для запуска функции, содержащей тернарный оператор. Сначала она проверяет условие — `select.value === 'black'`. Если возвращается `true`, мы запускаем функцию `update()` с параметрами чёрного и белого, в результате чего получаем чёрный цвет фона и белый цвет текста. Если возвращается `false`, мы запускаем функцию `update()` с параметрами белого и чёрного, в результате чего цвета веб-сайта меняются на противоположные.
 
-<div class="note">
-<p><strong>Note</strong>: вы можете <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html">найти этот пример на GitHub</a> (также увидеть <a href="http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html">как он работает</a>.)</p>
-</div>
+> **Примечание:** вы можете [найти этот пример на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/simple-ternary.html) (также увидеть [как он работает](http://mdn.github.io/learning-area/javascript/building-blocks/simple-ternary.html).)
 
-<h2 id="Практическое_упражнение_простой_календарь">Практическое упражнение: простой календарь</h2>
+## Практическое упражнение: простой календарь
 
-<p>В данном примере вы поможете нам закончить простое приложение календаря. Код включает:</p>
+В данном примере вы поможете нам закончить простое приложение календаря. Код включает:
 
-<ul>
- <li>Элемент {{htmlelement("select")}}, позволяющий пользователю выбирать разные месяцы.</li>
- <li>Обработчик событий <code>onchange</code> для обнаружения изменения значения, выбранного в меню <code>&lt;select&gt;</code>.</li>
- <li>Функция <code>createCalendar()</code> , рисующая календарь и отображающая правильный месяц в элементе {{htmlelement("h1")}}.</li>
-</ul>
+- Элемент {{htmlelement("select")}}, позволяющий пользователю выбирать разные месяцы.
+- Обработчик событий `onchange` для обнаружения изменения значения, выбранного в меню `<select>`.
+- Функция `createCalendar()` , рисующая календарь и отображающая правильный месяц в элементе {{htmlelement("h1")}}.
 
-<p>Вы должны написать условную конструкцию в функции обработчика <code>onchange</code> , сразу после комментария <code>// ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ</code>. Конструкция должна:</p>
+Вы должны написать условную конструкцию в функции обработчика `onchange` , сразу после комментария `// ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ`. Конструкция должна:
 
-<ol>
- <li>Проверить выбранный месяц (хранящийся в переменной <code>choice</code>. Это будет значение элемента <code>&lt;select&gt;</code> после изменения значения, например, "Январь".)</li>
- <li>Задать переменную, скажем, <code>days</code>, равную количеству дней в выбранном месяце. Для этого нужно будет проверить количество дней в каждом месяце. Високосный год можно не учитывать.</li>
-</ol>
+1.  Проверить выбранный месяц (хранящийся в переменной `choice`. Это будет значение элемента `<select>` после изменения значения, например, "Январь".)
+2.  Задать переменную, скажем, `days`, равную количеству дней в выбранном месяце. Для этого нужно будет проверить количество дней в каждом месяце. Високосный год можно не учитывать.
 
-<p>Советы:</p>
+Советы:
 
-<ul>
- <li>Советуем использовать логический оператор OR для группировки нескольких месяцев в рамках одного условия; многие месяцы имеют одинаковое количество дней.</li>
- <li>Подумайте, какое количество дней в месяце встречается чаще всего и используйте его в качестве варианта по умолчанию.</li>
-</ul>
+- Советуем использовать логический оператор OR для группировки нескольких месяцев в рамках одного условия; многие месяцы имеют одинаковое количество дней.
+- Подумайте, какое количество дней в месяце встречается чаще всего и используйте его в качестве варианта по умолчанию.
 
-<p>Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».</p>
+Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».
 
-<div class="blockIndicator note">
-<p>В HTML коде внутри <code>&lt;select&gt;</code> названия месяцев <code>value=""</code> введены на русском языке. Соответственно ссылки на них из вашего скрипта так же на русском. Не забываем про синтаксис. (прим. - <a href="/ru/profiles/ConstantineZz">ConstantineZz</a>)</p>
-</div>
+> **Примечание:** В HTML коде внутри `<select>` названия месяцев `value=""` введены на русском языке. Соответственно ссылки на них из вашего скрипта так же на русском. Не забываем про синтаксис. (прим. - [ConstantineZz](/ru/profiles/ConstantineZz))
+
+```html hidden
+<h2>Live output</h2>
+<div class="output" style="height: 500px;overflow: auto;">
+<label for="month">Выберите месяц: </label>
+<select id="month">
+<option value="Январь">Январь</option>
+<option value="Февраль">Февраль</option>
+<option value="Март">Март</option>
+<option value="Апрель">Апрель</option>
+<option value="Май">Май</option>
+<option value="Июнь">Июнь</option>
+<option value="Июль">Июль</option>
+<option value="Август">Август</option>
+<option value="Сентябрь">Сентябрь</option>
+<option value="Октябрь">Октябрь</option>
+<option value="Ноябрь">Ноябрь</option>
+<option value="Декабрь">Декабрь</option>
+</select>
+<h1></h1>
+<ul></ul> </div>
+
+<h2>Editable code</h2>
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
-&lt;div class="output" style="height: 500px;overflow: auto;"&gt;
-&lt;label for="month"&gt;Выберите месяц: &lt;/label&gt;
-&lt;select id="month"&gt;
-&lt;option value="Январь"&gt;Январь&lt;/option&gt;
-&lt;option value="Февраль"&gt;Февраль&lt;/option&gt;
-&lt;option value="Март"&gt;Март&lt;/option&gt;
-&lt;option value="Апрель"&gt;Апрель&lt;/option&gt;
-&lt;option value="Май"&gt;Май&lt;/option&gt;
-&lt;option value="Июнь"&gt;Июнь&lt;/option&gt;
-&lt;option value="Июль"&gt;Июль&lt;/option&gt;
-&lt;option value="Август"&gt;Август&lt;/option&gt;
-&lt;option value="Сентябрь"&gt;Сентябрь&lt;/option&gt;
-&lt;option value="Октябрь"&gt;Октябрь&lt;/option&gt;
-&lt;option value="Ноябрь"&gt;Ноябрь&lt;/option&gt;
-&lt;option value="Декабрь"&gt;Декабрь&lt;/option&gt;
-&lt;/select&gt;
-&lt;h1&gt;&lt;/h1&gt;
-&lt;ul&gt;&lt;/ul&gt; &lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 var select = document.querySelector('select');
 var list = document.querySelector('ul');
 var h1 = document.querySelector('h1');
@@ -454,7 +452,7 @@ var h1 = document.querySelector('h1');
 select.onchange = function() {
   var choice = select.value;
 
-  // <code>ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ</code>
+  // ДОБАВЬТЕ СЮДА УСЛОВНОЕ ВЫРАЖЕНИЕ
 
   createCalendar(days, choice);
 }
@@ -462,7 +460,7 @@ select.onchange = function() {
 function createCalendar(days, choice) {
   list.innerHTML = '';
   h1.textContent = choice;
-  for (var i = 1; i &lt;= days; i++) {
+  for (var i = 1; i <= days; i++) {
     var listItem = document.createElement('li');
     listItem.textContent = i;
     list.appendChild(listItem);
@@ -470,14 +468,16 @@ function createCalendar(days, choice) {
 }
 
 createCalendar(31,'Январь');
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
- &lt;input id="reset" type="button" value="Сброс"&gt;
- &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+ <input id="reset" type="button" value="Сброс">
+ <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">.output * {
+```css hidden
+.output * {
   box-sizing: border-box;
 }
 
@@ -514,9 +514,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -545,7 +547,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'Февраль\') {\n days = 28;\n } else if(choice === \'Апрель\' || choice === \'Июнь\' || choice === \'Сентябрь\'|| choice === \'Ноябрь\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i &lt;= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'Январь\');';
+var jsSolution = 'var select = document.querySelector(\'select\');\nvar list = document.querySelector(\'ul\');\nvar h1 = document.querySelector(\'h1\');\n\nselect.onchange = function() {\n var choice = select.value;\n var days = 31;\n if(choice === \'Февраль\') {\n days = 28;\n } else if(choice === \'Апрель\' || choice === \'Июнь\' || choice === \'Сентябрь\'|| choice === \'Ноябрь\') {\n days = 30;\n }\n\n createCalendar(days, choice);\n}\n\nfunction createCalendar(days, choice) {\n list.innerHTML = \'\';\n h1.textContent = choice;\n for(var i = 1; i <= days; i++) {\n var listItem = document.createElement(\'li\');\n listItem.textContent = i;\n list.appendChild(listItem);\n }\n }\n\ncreateCalendar(31,\'Январь\');';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -591,42 +593,38 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', '100%', 1110) }}</p>
+};
+```
 
-<h2 id="Практическое_упражнение_расширяем_выбор_цветов">Практическое упражнение: расширяем выбор цветов</h2>
+{{ EmbedLiveSample('Playable_code', '100%', 1110) }}
 
-<p>В данном примере вы будете использовать пример тернарного оператора, который мы рассматривали ранее, и превратите тернарный оператор в инструкцию switch, что позволит увеличить количество вариантов выбора для простого веб-сайта. Посмотрите на {{htmlelement("select")}} — на этот раз он включает не два, а целых пять вариантов тем. Нужно добавить инструкцию switch сразу под комментарием <code>// ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH</code>:</p>
+## Практическое упражнение: расширяем выбор цветов
 
-<ul>
- <li>Она должна принимать переменную <code>choice</code> в качестве входного выражения.</li>
- <li>Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.</li>
- <li>В блоке каждого элемента case необходимо вызывать функцию <code>update()</code>, которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.</li>
-</ul>
+В данном примере вы будете использовать пример тернарного оператора, который мы рассматривали ранее, и превратите тернарный оператор в инструкцию switch, что позволит увеличить количество вариантов выбора для простого веб-сайта. Посмотрите на {{htmlelement("select")}} — на этот раз он включает не два, а целых пять вариантов тем. Нужно добавить инструкцию switch сразу под комментарием `// ДОБАВЬТЕ ИНСТРУКЦИЮ SWITCH`:
 
-<p>Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».</p>
+- Она должна принимать переменную `choice` в качестве входного выражения.
+- Каждый элемент case должен содержать вариант выбора, соответствующий одному из доступных для выбора значений: белая, чёрная, лиловая, жёлтая или психоделическая тема.
+- В блоке каждого элемента case необходимо вызывать функцию `update()`, которой передаётся два цвета: первый – это цвет фона, а второй – цвет текста. Помните, что значения цветов – это строковые значения, поэтому их нужно заключать в кавычки.
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
+Если допустили ошибку, используйте кнопку «Сброс», чтобы вернуться к исходному виду примера. Если у вас совсем ничего не получается, нажмите «Показать решение».
 
-<pre class="brush: html">&lt;div class="output" style="height: 300px;"&gt;
-  &lt;label for="theme"&gt;Выберите тему: &lt;/label&gt;
-  &lt;select id="theme"&gt;
-    &lt;option value="white"&gt;Белая&lt;/option&gt;
-    &lt;option value="black"&gt;Чёрная&lt;/option&gt;
-    &lt;option value="purple"&gt;Лиловая&lt;/option&gt;
-    &lt;option value="yellow"&gt;Жёлтая&lt;/option&gt;
-    &lt;option value="psychedelic"&gt;Психоделическая&lt;/option&gt;
-  &lt;/select&gt;
+```html hidden
+<div class="output" style="height: 300px;">
+  <label for="theme">Выберите тему: </label>
+  <select id="theme">
+    <option value="white">Белая</option>
+    <option value="black">Чёрная</option>
+    <option value="purple">Лиловая</option>
+    <option value="yellow">Жёлтая</option>
+    <option value="psychedelic">Психоделическая</option>
+  </select>
 
-  &lt;h1&gt;Это мой веб-сайт&lt;/h1&gt;
-&lt;/div&gt;
+  <h1>Это мой веб-сайт</h1>
+</div>
 
-&lt;hr&gt;
+<hr>
 
-&lt;textarea id="code" class="playable-code" style="height: 450px;"&gt;
+<textarea id="code" class="playable-code" style="height: 450px;">
 var select = document.querySelector('select');
 var html = document.querySelector('.output');
 
@@ -639,15 +637,16 @@ select.onchange = function() {
 function update(bgColor, textColor) {
   html.style.backgroundColor = bgColor;
   html.style.color = textColor;
-}&lt;/textarea&gt;
+}</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сброс"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сброс">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -724,23 +723,19 @@ textarea.onkeyup = function(){
 updateCode();
 
 };
+```
 
-</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', '100%', 650) }}</p>
+{{ EmbedLiveSample('Playable_code_2', '100%', 650) }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a>.</p>
+Это все, что вам нужно знать на данный момент об условных логических структурах! Уверены, вы хорошо разобрались в теоретическом материале и с лёгкостью справились с предложенными упражнениями. Если же что-то осталось для вас непонятным, перечитайте статью ещё раз или [свяжитесь с нами](/en-US/Learn#Contact_us).
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators">Comparison operators</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements">Conditional statements in detail</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if...else reference</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional (ternary) operator reference</a></li>
-</ul>
+- [Comparison operators](/en-US/Learn/JavaScript/First_steps/Math#Comparison_operators)
+- [Conditional statements in detail](/ru/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Conditional_statements)
+- [if...else reference](/ru/docs/Web/JavaScript/Reference/Statements/if...else)
+- [Conditional (ternary) operator reference](/ru/docs/Web/JavaScript/Reference/Operators/Conditional_Operator)
 
-<p>{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}</p>
+{{NextMenu("Learn/JavaScript/Building_blocks/Looping_code", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ru/learn/javascript/building_blocks/events/index.md b/files/ru/learn/javascript/building_blocks/events/index.md
index 6d794a27812644..1fa9310b2f95c0 100644
--- a/files/ru/learn/javascript/building_blocks/events/index.md
+++ b/files/ru/learn/javascript/building_blocks/events/index.md
@@ -9,64 +9,52 @@ tags:
 translation_of: Learn/JavaScript/Building_blocks/Events
 original_slug: Learn/JavaScript/Building_blocks/События
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>
+События — это действия или случаи, возникающие в программируемой вами системе, о которых система сообщает вам для того, чтобы вы могли с ними взаимодействовать. Например, если пользователь нажимает кнопку на веб-странице, вы можете ответить на это действие, отобразив информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах. Эта статья не является исчерпывающим источником по этой теме — здесь только то, что вам нужно знать на этом этапе.
 
-<p class="summary">События — это действия или случаи, возникающие в программируемой вами системе, о которых система сообщает вам для того, чтобы вы могли с ними взаимодействовать. Например, если пользователь нажимает кнопку на веб-странице, вы можете ответить на это действие, отобразив информационное окно. В этой статье мы обсудим некоторые важные концепции, связанные с событиями, и посмотрим, как они работают в браузерах. Эта статья не является исчерпывающим источником по этой теме — здесь только то, что вам нужно знать на этом этапе.</p>
+| Предпосылки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, [Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги).    |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:      | Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, <a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги в JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять фундаментальную теорию событий, как они работают в браузерах и как события могут различаться в разных средах программирования.</td>
-  </tr>
- </tbody>
-</table>
+## Серия удачных событий
 
-<h2 id="Серия_удачных_событий">Серия удачных событий</h2>
+При возникновении **события** система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.
 
-<p>При возникновении <strong>события</strong> система генерирует сигнал, а также предоставляет механизм, с помощью которого можно автоматически предпринимать какие-либо действия (например, выполнить определённый код), когда происходит событие. Например, в аэропорту, когда взлётно-посадочная полоса свободна для взлёта самолёта, сигнал передаётся пилоту, и в результате они приступают к взлёту.</p>
+![](https://mdn.mozillademos.org/files/17376/MDN-mozilla-events-runway.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/17376/MDN-mozilla-events-runway.png" style="height: 443px; width: 700px;"></p>
+В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:
 
-<p>В Web события запускаются внутри окна браузера и, как правило, прикрепляются к конкретному элементу, который в нем находится. Это может быть один элемент, набор элементов, документ HTML, загруженный на текущей вкладке, или все окно браузера. Существует множество различных видов событий, которые могут произойти, например:</p>
+- Пользователь кликает мышью или наводит курсор на определённый элемент.
+- Пользователь нажимает клавишу на клавиатуре.
+- Пользователь изменяет размер или закрывает окно браузера.
+- Завершение загрузки веб-страницы.
+- Отправка данных через формы.
+- Воспроизведение видео, пауза или завершение воспроизведения.
+- Произошла ошибка.
 
-<ul>
- <li>Пользователь кликает мышью или наводит курсор на определённый элемент.</li>
- <li>Пользователь нажимает клавишу на клавиатуре.</li>
- <li>Пользователь изменяет размер или закрывает окно браузера.</li>
- <li>Завершение загрузки веб-страницы.</li>
- <li>Отправка данных через формы.</li>
- <li>Воспроизведение видео, пауза или завершение воспроизведения.</li>
- <li>Произошла ошибка.</li>
-</ul>
+Подробнее о событиях можно посмотреть в [Справочнике по событиям](/ru/docs/Web/Events).
 
-<p>Подробнее о событиях можно посмотреть в <a href="/ru/docs/Web/Events">Справочнике по событиям</a>.</p>
+Каждое доступное событие имеет **обработчик событий** \***\*— блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы **регистрируем обработчик событий**. Обратите внимание, что обработчики событий иногда называют **слушателями событий (от англ. event listeners).\*\* Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.
 
-<p>Каждое доступное событие имеет <strong>обработчик событий<strong> </strong></strong>— блок кода (обычно это функция JavaScript, вводимая вами в качестве разработчика), который будет запускаться при срабатывании события. Когда такой блок кода определён на запуск в ответ на возникновение события, мы говорим, что мы <strong>регистрируем обработчик событий</strong>. Обратите внимание, что обработчики событий иногда называют <strong>слушателями событий (от англ. event listeners).</strong> Они в значительной степени взаимозаменяемы для наших целей, хотя, строго говоря, они работают вместе. Слушатель отслеживает событие, а обработчик — это код, который запускается в ответ на событие.</p>
+> **Примечание:** Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.
 
-<div class="note">
-<p><strong>Примечание:</strong> Важно отметить, что веб-события не являются частью основного языка JavaScript. Они определены как часть JavaScript-API, встроенных в браузер.</p>
-</div>
+### Простой пример
 
-<h3 id="Простой_пример">Простой пример</h3>
+Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:
 
-<p>Рассмотрим простой пример. Вы уже видели события и обработчики событий во многих примерах в этом курсе, но давайте повторим для закрепления информации. В этом примере у нас есть кнопка {{htmlelement ("button")}}, при нажатии которой цвет фона изменяется случайным образом:</p>
+```html
+<button>Change color</button>
+```
 
-<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>
+```css hidden
+button { margin: 10px };
+```
 
-<div class="hidden">
-<pre class="brush: css">button { margin: 10px };</pre>
-</div>
+JavaScript выглядит так:
 
-<p>JavaScript выглядит так:</p>
-
-<pre class="brush: js">const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 
 function random(number) {
   return Math.floor(Math.random() * (number+1));
@@ -75,234 +63,246 @@ function random(number) {
 btn.onclick = function() {
   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
 
-<p>В этом коде мы сохраняем ссылку на кнопку внутри переменной <code>btn</code> типа <code>const</code>, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — <a href="#Свойства_обработчика_событий">обработчик события</a>. Переменная <code>btn</code> указывает на элемент <code>&lt;button&gt;</code> — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события <code>onclick</code> с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента <code>&lt;body&gt;</code>.</p>
+В этом коде мы сохраняем ссылку на кнопку внутри переменной `btn` типа `const`, используя функцию {{domxref ("Document.querySelector()")}}. Мы также определяем функцию, которая возвращает случайное число. Третья часть кода — [обработчик события](#Свойства_обработчика_событий). Переменная `btn` указывает на элемент `<button>` — для этого типа объекта существуют возникающие при определённом взаимодействии с ним события, а значит, возможно использование обработчиков событий. Мы отслеживаем момент возникновения события при щелчке мышью, связывая свойство обработчика события `onclick` с анонимной функцией, генерирующей случайный цвет RGB и устанавливающей его в качестве цвета фона элемента `<body>`.
 
-<p>Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент <code>&lt;button&gt;</code> — всякий раз, когда пользователь щёлкает по нему.</p>
+Этот код теперь будет запускаться всякий раз, когда возникает событие при нажатии на элемент `<button>` — всякий раз, когда пользователь щёлкает по нему.
 
-<p>Пример вывода выглядит следующим образом:</p>
+Пример вывода выглядит следующим образом:
 
-<p>{{ EmbedLiveSample('Простой_пример', '100%', 200, "") }}</p>
+{{ EmbedLiveSample('Простой_пример', '100%', 200, "") }}
 
-<h3 id="События_не_только_для_веб-страниц">События не только для веб-страниц</h3>
+### События не только для веб-страниц
 
-<p>События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.</p>
+События, как понятие, относятся не только к JavaScript — большинство языков программирования имеют модель событий, способ работы которой часто отличается от модели в JavaScript. Фактически, даже модель событий в JavaScript для веб-страниц отличается от модели событий для просто JavaScript, поскольку используются они в разных средах.
 
-<p>Например, <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Модель событий Node.js</a> основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция <code>on()</code> для регистрации обработчиков событий, и функция <code>once()</code> для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a>.</p>
+Например, [Node.js](/ru/docs/Learn/Server-side/Express_Nodejs) — очень популярная среда исполнения JavaScript, которая позволяет разработчикам использовать JavaScript для создания сетевых и серверных приложений. [Модель событий Node.js](https://nodejs.org/docs/latest-v5.x/api/events.html) основана на том, что существуют обработчики, отслеживающие события, и эмиттеры (передатчики), которые периодически генерируют события. В общем-то, это похоже на модель событий в JavaScript для веб-страниц, но код совсем другой. В этой модели используется функция `on()` для регистрации обработчиков событий, и функция `once()` для регистрации обработчика событий, который отключается после первого срабатывания. Хорошим примером использования являются протоколы событий [HTTP connect event docs](https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect).
 
-<p>Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии <a href="https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>. В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре <a href="https://ru.wikipedia.org/wiki/CamelCase">CamelCase</a> (например, <code>onMessage</code>, а не <code>onmessage</code>) и должны сочетаться с функцией <code>addListener</code>. См. <a href="https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples">runtime.onMessage page</a> для примера.</p>
+Вы также можете использовать JavaScript для создания кросс-браузерных расширений — улучшения функциональности браузера с помощью технологии [WebExtensions](/ru/docs/Mozilla/Add-ons/WebExtensions). В отличии от модели веб-событий здесь свойства обработчиков событий пишутся в так называемом регистре [CamelCase](https://ru.wikipedia.org/wiki/CamelCase) (например, `onMessage`, а не `onmessage`) и должны сочетаться с функцией `addListener`. См. [runtime.onMessage page](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/runtime/onMessage#Examples) для примера.
 
-<p>На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы <em>событий</em> в них отличается.</p>
+На данном этапе обучения вам не нужно особо разбираться в различных средах программирования, однако важно понимать, что принцип работы _событий_ в них отличается.
 
-<h2 id="Способы_использования_веб-событий">Способы использования веб-событий</h2>
+## Способы использования веб-событий
 
-<p>Существует множество различных способов добавления кода обработчика событий на веб-страницы так, чтобы он срабатывал при возникновении соответствующего события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них следует использовать.</p>
+Существует множество различных способов добавления кода обработчика событий на веб-страницы так, чтобы он срабатывал при возникновении соответствующего события. В этом разделе мы рассмотрим различные механизмы и обсудим, какие из них следует использовать.
 
-<h3 id="Свойства_обработчика_событий">Свойства обработчика событий</h3>
+### Свойства обработчика событий
 
-<p>В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:</p>
+В этом курсе вы уже сталкивались со свойствами, связываемыми с алгоритмом работы обработчика событий. Вернёмся к приведённому выше примеру:
 
-<pre class="brush: js">const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 
 btn.onclick = function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
 
-<p>В данной ситуации свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code> или <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).</p>
+В данной ситуации свойство [`onclick`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick) — это свойство обработчика события. В принципе это обычное свойство кнопки как элемента (наравне с [`btn.textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) или [`btn.style`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style)), но оно относится к особому типу. Если вы установите его равным какому-нибудь коду, этот код будет запущен при возникновении события (при нажатии на кнопку).
 
-<p>Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье <a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою функцию</a>):</p>
+Для получения того же результата, вы также можете присвоить свойству обработчика имя уже описанной функции (как мы видели в статье [Создайте свою функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)):
 
-<pre class="brush: js">const btn = document.querySelector('button');
+```js
+const btn = document.querySelector('button');
 
 function bgChange() {
   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.onclick = bgChange;</pre>
+btn.onclick = bgChange;
+```
 
-<p>Давайте теперь поэкспериментируем с другими свойствами обработчика событий.</p>
+Давайте теперь поэкспериментируем с другими свойствами обработчика событий.
 
-<p>Создайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a> и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить <code>btn.onclick</code> на следующие значения и понаблюдайте за результатами:</p>
+Создайте локальную копию файла [random-color-eventhandlerproperty.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html) и откройте её в своём браузере. Это всего лишь копия простого примера про случайные цвета, который мы уже разобрали в этой статье. Теперь попробуйте изменить `btn.onclick` на следующие значения и понаблюдайте за результатами:
 
-<ul>
- <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — Цвет будет изменяться только при двойном щелчке.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — Цвет будет меняться при нажатии клавиши на клавиатуре, причём <code>keypress</code> ссылается на обычное нажатие (нажатие кнопки и последующее её отпускание <em>как одно целое</em>), в то время как <code>keydown</code> и <code>keyup</code> <em>разделяют</em> действия на нажатие клавиши и отпускание, и ссылаются на них соответственно. Обратите внимание, что это не работает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке - его нужно зарегистрировать на объекте <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window">window</a>, который представляет все окно браузера.</li>
- <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> и <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.</li>
-</ul>
+- [`btn.onfocus`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onfocus) и [`btn.onblur`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onblur) — Цвет изменится, когда кнопка будет сфокусирована или не сфокусирована (попробуйте нажать Tab, чтобы выбрать кнопку или убрать выбор). Эти свойства часто применяются для отображения информации о том, как заполнить поля формы, когда они сфокусированы, или отобразить сообщение об ошибке, если поле формы было заполнено с неправильным значением.
+- [`btn.ondblclick`](/en-US/docs/Web/API/GlobalEventHandlers/ondblclick) — Цвет будет изменяться только при двойном щелчке.
+- [`window.onkeypress`](/en-US/docs/Web/API/GlobalEventHandlers/onkeypress), [`window.onkeydown`](/en-US/docs/Web/API/GlobalEventHandlers/onkeydown), [`window.onkeyup`](/en-US/docs/Web/API/GlobalEventHandlers/onkeyup) — Цвет будет меняться при нажатии клавиши на клавиатуре, причём `keypress` ссылается на обычное нажатие (нажатие кнопки и последующее её отпускание _как одно целое_), в то время как `keydown` и `keyup` _разделяют_ действия на нажатие клавиши и отпускание, и ссылаются на них соответственно. Обратите внимание, что это не работает, если вы попытаетесь зарегистрировать этот обработчик событий на самой кнопке - его нужно зарегистрировать на объекте [window](/ru/docs/Web/API/Window), который представляет все окно браузера.
+- [`btn.onmouseover`](/en-US/docs/Web/API/GlobalEventHandlers/onmouseover) и [`btn.onmouseout`](/en-US/docs/Web/API/GlobalEventHandlers/onmouseout) — Цвет будет меняться при наведении указателя мыши на кнопку или когда указатель будет отводиться от кнопки соответственно.
 
-<p>Некоторые события очень общие и доступны практически в любом месте (например, обработчик <code>onclick</code> может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> только для определённых элементов, таких как {{htmlelement ("video")}}).</p>
+Некоторые события очень общие и доступны практически в любом месте (например, обработчик `onclick` может быть зарегистрирован практически для любого элемента), тогда как некоторые из них более конкретны и полезны только в определённых ситуациях (например, имеет смысл использовать [onplay](/ru/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay) только для определённых элементов, таких как {{htmlelement ("video")}}).
 
-<h3 id="Встроенные_обработчики_событий_-_не_используйте_их">Встроенные обработчики событий - не используйте их</h3>
+### Встроенные обработчики событий - не используйте их
 
-<p>Самый ранний из введённых в сеть Web методов регистрации <em>обработчиков событий</em> базируется на <strong>HTML атрибутах </strong>(<strong>встроенные обработчики событий</strong>):</p>
+Самый ранний из введённых в сеть Web методов регистрации _обработчиков событий_ базируется на **HTML атрибутах** (**встроенные обработчики событий**):
 
-<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
-</pre>
+```html
+<button onclick="bgChange()">Press me</button>
+```
 
-<pre class="brush: js">function bgChange() {
+```js
+function bgChange() {
   const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">полный исходник кода</a> из этого примера на GitHub (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">взгляните на его выполнение</a>).</p>
-</div>
+> **Примечание:** вы можете найти [полный исходник кода](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html) из этого примера на GitHub (также [взгляните на его выполнение](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
 
-<p>Значение атрибута —  это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:</p>
+Значение атрибута — это буквально код JavaScript, который вы хотите запустить при возникновении события. В приведённом выше примере вызывается функция, определённая внутри элемента {{htmlelement ("script")}} на той же странице, но вы также можете вставить JavaScript непосредственно внутри атрибута, например:
 
-<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>
+```html
+<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>
+```
 
-<p>Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.</p>
+Для многих свойств обработчика событий существуют эквиваленты в виде атрибутов HTML. Однако, не рекомендуется их использовать — это считается плохой практикой. Использование атрибутов для регистрации обработчика событий кажется простым и быстрым методом, но такое описание обработчиков также скоро становится неудобным и неэффективным.
 
-<p>Более того, не рекомендуется смешивать HTML и JavaScript файлы, так как в дальнейшем такой код становится сложнее с точки зрения обработки (парсинга). Лучше держать весь JavaScript в одном месте. Также, если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.</p>
+Более того, не рекомендуется смешивать HTML и JavaScript файлы, так как в дальнейшем такой код становится сложнее с точки зрения обработки (парсинга). Лучше держать весь JavaScript в одном месте. Также, если он находится в отдельном файле, вы можете применить его к нескольким документам HTML.
 
-<p>Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.</p>
+Даже при работе только в одном файле использование встроенных обработчиков не является хорошей идеей. Ладно, если у вас одна кнопка, но что, если у вас их 100? Вам нужно добавить в файл 100 атрибутов; обслуживание такого кода очень быстро превратится в кошмар. С помощью JavaScript вы можете легко добавить функцию обработчика событий ко всем кнопкам на странице независимо от того, сколько их было.
 
-<p>Например:</p>
+Например:
 
-<pre class="brush: js">const buttons = document.querySelectorAll('button');
+```js
+const buttons = document.querySelectorAll('button');
 
-for (var i = 0; i &lt; buttons.length; i++) {
+for (var i = 0; i < buttons.length; i++) {
   buttons[i].onclick = bgChange;
-}</pre>
+}
+```
 
-<p>Обратите внимание, что для перебора всех элементов, которые содержит объект <code><a href="/en-US/docs/Web/API/NodeList">NodeList</a></code>, можно воспользоваться встроенным методом <code><a href="/en-US/docs/Web/API/NodeList/forEach">forEach()</a></code>:</p>
+Обратите внимание, что для перебора всех элементов, которые содержит объект [`NodeList`](/en-US/docs/Web/API/NodeList), можно воспользоваться встроенным методом [`forEach()`](/en-US/docs/Web/API/NodeList/forEach):
 
-<pre class="brush: js">buttons.forEach(function(button) {
+```js
+buttons.forEach(function(button) {
   button.onclick = bgChange;
-});</pre>
+});
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Разделение логики вашей программы и вашего контента также делает ваш сайт более дружественным к поисковым системам.</p>
-</div>
+> **Примечание:** Разделение логики вашей программы и вашего контента также делает ваш сайт более дружественным к поисковым системам.
 
-<h3 id="Функции_addEventListener_и_removeEventListener">Функции addEventListener() и removeEventListener()</h3>
+### Функции addEventListener() и removeEventListener()
 
-<p>Новый тип механизма событий определён в спецификации <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a>, которая предоставляет браузеру новую функцию — <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:</p>
+Новый тип механизма событий определён в спецификации [Document Object Model (DOM) Level 2 Events](https://www.w3.org/TR/DOM-Level-2-Events/), которая предоставляет браузеру новую функцию — [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). Работает она аналогично свойствам обработчика событий, но синтаксис совсем другой. Наш пример со случайным цветом мог бы выглядеть и так:
 
-<pre class="brush: js">var btn = document.querySelector('button');
+```js
+var btn = document.querySelector('button');
 
 function bgChange() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
 }
 
-btn.addEventListener('click', bgChange);</pre>
+btn.addEventListener('click', bgChange);
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">исходный код</a> из этого примера на GitHub (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">взгляните на его выполнение</a>).</p>
-</div>
+> **Примечание:** вы можете найти [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html) из этого примера на GitHub (также [взгляните на его выполнение](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
-<p>Внутри функции <code>addEventListener()</code> мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции <code>addEventListener()</code> в анонимную функцию, например:</p>
+Внутри функции `addEventListener()` мы указываем два параметра — имя события, для которого мы хотим зарегистрировать этот обработчик, и код, содержащий функцию обработчика, которую мы хотим запустить в ответ. Обратите внимание, что будет целесообразно поместить весь код внутри функции `addEventListener()` в анонимную функцию, например:
 
-<pre class="brush: js">btn.addEventListener('click', function() {
+```js
+btn.addEventListener('click', function() {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   document.body.style.backgroundColor = rndCol;
-});</pre>
+});
+```
 
-<p>Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>, которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:</p>
+Этот механизм имеет некоторые преимущества по сравнению с более старыми механизмами, рассмотренными ранее. Например, существует аналогичная функция [`removeEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener), которая удаляет ранее добавленный обработчик. Это приведёт к удалению набора обработчиков в первом блоке кода в этом разделе:
 
-<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>
+```js
+btn.removeEventListener('click', bgChange);
+```
 
-<p>Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.</p>
+Это не важно для простых небольших программ, но для более крупных и более сложных программ он может повысить эффективность очистки старых неиспользуемых обработчиков событий. Кроме того, это позволяет вам иметь одну и ту же кнопку, выполняющую различные действия в разных обстоятельствах — все, что вам нужно сделать, это добавить/удалить обработчики событий, если это необходимо.
 
-<p>Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:</p>
+Также вы можете зарегистрировать несколько обработчиков для одного и того же события на элементе. Следующие два обработчика не будут применяться:
 
-<pre class="brush: js">myElement.onclick = functionA;
-myElement.onclick = functionB;</pre>
+```js
+myElement.onclick = functionA;
+myElement.onclick = functionB;
+```
 
-<p>Поскольку вторая строка будет перезаписывать значение <code>onclick</code>, установленное первой. Однако, если:</p>
+Поскольку вторая строка будет перезаписывать значение `onclick`, установленное первой. Однако, если:
 
-<pre class="brush: js">myElement.addEventListener('click', functionA);
-myElement.addEventListener('click', functionB);</pre>
+```js
+myElement.addEventListener('click', functionA);
+myElement.addEventListener('click', functionB);
+```
 
-<p>Обе функции будут выполняться при щелчке элемента.</p>
+Обе функции будут выполняться при щелчке элемента.
 
-<p>Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: <a href="/ru/docs/Web/API/EventTarget/addEventListener">Метод Event​Target​.add​Event​Listener()</a> и <a href="/ru/docs/Web/API/EventTarget/removeEventListener">Метод Event​Target​.remove​Event​Listener()</a>.</p>
+Кроме того, в этом механизме событий имеется ряд других мощных функций и опций. Эта тема выходит за рамки данной статьи, но если вы хотите изучить подробнее, переходите по ссылкам: [Метод Event​Target​.add​Event​Listener()](/ru/docs/Web/API/EventTarget/addEventListener) и [Метод Event​Target​.remove​Event​Listener()](/ru/docs/Web/API/EventTarget/removeEventListener).
 
-<h3 id="Какой_механизм_мне_использовать">Какой механизм мне использовать?</h3>
+### Какой механизм мне использовать?
 
-<p>Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.</p>
+Из трёх механизмов определённо не нужно использовать атрибуты событий HTML. Как упоминалось выше, это устаревшая и плохая практика.
 
-<p>Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей</p>
+Остальные два являются относительно взаимозаменяемыми, по крайней мере для простых целей
 
-<ul>
- <li>Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.</li>
- <li>События уровня 2 DOM (<code>addEventListener()</code> и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.</li>
-</ul>
+- Свойства обработчика событий имеют меньшую мощность и параметры, но лучше совместимость между браузерами (поддерживается ещё в Internet Explorer 8). Вероятно, вам следует начать с них, когда вы учитесь.
+- События уровня 2 DOM (`addEventListener()` и т. д.) являются более мощными, но также могут стать более сложными и хуже поддерживаться (поддерживается ещё в Internet Explorer 9). Вам также стоит поэкспериментировать с ними и стремиться использовать их там, где это возможно.
 
-<p>Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя <code>removeEventListener()</code>, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать <code>addEventListener('click', function() {...})</code> для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:</p>
+Основные преимущества третьего механизма заключаются в том, что при необходимости можно удалить код обработчика событий, используя `removeEventListener()`, и так же можно добавить несколько элементов-обработчиков того же типа к элементам. Например, вы можете вызвать `addEventListener('click', function() {...})` для элемента несколько раз, с разными функциями, указанными во втором аргументе. Это невозможно при использовании свойств обработчика событий, поскольку любые последующие попытки установить свойство будут перезаписывать более ранние, например:
 
-<pre class="brush: js">element.onclick = function1;
+```js
+element.onclick = function1;
 element.onclick = function2;
-etc.</pre>
+etc.
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, <code>jQuery</code>) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.</p>
-</div>
+> **Примечание:** Если вам требуется поддержка браузеров старше Internet Explorer 8 в вашем проекте, вы можете столкнуться с трудностями, так как такие старые браузеры используют старые модели событий из более новых браузеров. Но не бойтесь, большинство библиотек JavaScript (например, `jQuery`) имеют встроенные функции, которые абстрагируют различия между браузерами. Не беспокойтесь об этом слишком много на этапе вашего учебного путешествия.
 
-<h2 id="Другие_концепции_событий">Другие концепции событий</h2>
+## Другие концепции событий
 
-<p>Рассмотрим некоторые современные концепции, имеющие отношение к событиям. На данный момент не обязательно понимать их полностью, но представление о них поможет лучше понять некоторые модели кода, с которыми вы, вероятно, столкнётесь.</p>
+Рассмотрим некоторые современные концепции, имеющие отношение к событиям. На данный момент не обязательно понимать их полностью, но представление о них поможет лучше понять некоторые модели кода, с которыми вы, вероятно, столкнётесь.
 
-<h3 id="Объекты_событий">   Объекты событий</h3>
+### Объекты событий
 
-<p>Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как <code>event</code>, <code>evt</code> или просто <code>e</code>. Называется он <strong>объектом события</strong> и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:</p>
+Иногда внутри функции обработчика событий вы можете увидеть параметр, заданный с таким именем, как `event`, `evt` или просто `e`. Называется он **объектом события** и он автоматически передаётся обработчикам событий для предоставления дополнительных функций и информации. Например, давайте немного перепишем наш пример со случайным цветом:
 
-<pre class="brush: js">function bgChange(e) {
+```js
+function bgChange(e) {
   var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
   e.target.style.backgroundColor = rndCol;
   console.log(e);
 }
 
-btn.addEventListener('click', bgChange);</pre>
+btn.addEventListener('click', bgChange);
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">исходник кода</a> для этого примера на GitHub (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">взгляните на его выполнение</a>).</p>
-</div>
+> **Примечание:** вы можете найти [исходник кода](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html) для этого примера на GitHub (также [взгляните на его выполнение](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
-<p>Итак в коде выше мы включаем объект события <strong><code>e</code></strong> в функцию, а в функции — настройку стиля фона для <code>e.target</code>, который является кнопкой. Свойство объекта события <code>target</code> всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.</p>
+Итак в коде выше мы включаем объект события **`e`** в функцию, а в функции — настройку стиля фона для `e.target`, который является кнопкой. Свойство объекта события `target` всегда является ссылкой на элемент, с которым только что произошло событие. Поэтому в этом примере мы устанавливаем случайный цвет фона на кнопке, а не на странице.
 
-<div class="note">
-<p><strong>Примечание:</strong> Вместо <code>e</code>/<code>evt</code>/<code>event</code> можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. <code>e</code>/<code>evt</code>/<code>event</code> чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.</p>
-</div>
+> **Примечание:** Вместо `e`/`evt`/`event` можно использовать любое имя для объекта события, которое затем можно использовать для ссылки на него в функции обработчика событий. `e`/`evt`/`event` чаще всего используются разработчиками, потому что они короткие и легко запоминаются. И хорошо придерживаться стандарта.
 
-<p><code>e.target</code> применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как <code>e.target</code>, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a>,а как он работает можно посмотреть <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">здесь</a>), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла <code>for</code> выберем каждый из них, добавив обработчик <code>onclick</code> к каждому так, чтобы случайный цвет применялся к каждому клику:</p>
+`e.target` применяют, когда нужно установить один и тот же обработчик событий на несколько элементов и, когда на них происходит событие, применить определённое действие к ним ко всем. Например, у вас может быть набор из 16 плиток, которые исчезают при нажатии. Полезно всегда иметь возможность просто указать, чтобы объект исчез, как `e.target`, вместо того, чтобы выбирать его более сложным способом. В следующем примере (см. исходный код на [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html),а как он работает можно посмотреть [здесь](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)), мы создаём 16 элементов {{htmlelement ("div")}} с использованием JavaScript. Затем мы выберем все из них, используя {{domxref ("document.querySelectorAll()")}}, и с помощью цикла `for` выберем каждый из них, добавив обработчик `onclick` к каждому так, чтобы случайный цвет применялся к каждому клику:
 
-<pre class="brush: js">var divs = document.querySelectorAll('div');
+```js
+var divs = document.querySelectorAll('div');
 
-for (var i = 0; i &lt; divs.length; i++) {
+for (var i = 0; i < divs.length; i++) {
   divs[i].onclick = function(e) {
     e.target.style.backgroundColor = bgChange();
   }
-}</pre>
+}
+```
 
-<p>Результат выглядит следующим образом (попробуйте щёлкнуть по нему):</p>
+Результат выглядит следующим образом (попробуйте щёлкнуть по нему):
 
-<div class="hidden">
-<h6 id="Hidden_example">Hidden example</h6>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Useful event target example&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Useful event target example</title>
+    <style>
       div {
         background-color: #ff6600;
         height: 100px;
         width: 25%;
         float: left;
       }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;script&gt;
-      for (var i = 1; i &lt;= 16; i++) {
+    </style>
+  </head>
+  <body>
+    <script>
+      for (var i = 1; i <= 16; i++) {
         var myDiv = document.createElement('div');
         document.body.appendChild(myDiv);
       }
@@ -318,53 +318,55 @@ for (var i = 0; i &lt; divs.length; i++) {
 
       var divs = document.querySelectorAll('div');
 
-      for (var i = 0; i &lt; divs.length; i++) {
+      for (var i = 0; i < divs.length; i++) {
         divs[i].onclick = function(e) {
           e.target.style.backgroundColor = bgChange();
         }
       }
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 400) }}</p>
-
-<p>Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. {{domxref("Event")}} для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a> имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события <a href="https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a> handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.</p>
-
-<h3 id="Предотвращение_поведения_по_умолчанию">    Предотвращение поведения по умолчанию</h3>
-
-<p>Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространённым примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).</p>
-
-<p>Но если пользователь отправил данные не правильно, как разработчик, вы хотите остановить отправку на сервер и выдать сообщение об ошибке с информацией о том, что не так и что нужно сделать. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.</p>
-
-<p>Простая форма HTML, в которой требуется ввести ваше имя и фамилию:</p>
-
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="fname"&gt;Имя: &lt;/label&gt;
-    &lt;input id="fname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="lname"&gt;Фамилия: &lt;/label&gt;
-    &lt;input id="lname" type="text"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-     &lt;input id="submit" type="submit"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;
-&lt;p&gt;&lt;/p&gt;</pre>
-
-<div class="hidden">
-<pre class="brush: css">div {
+    </script>
+  </body>
+</html>
+```
+
+{{ EmbedLiveSample('Hidden_example', '100%', 400) }}
+
+Большинство обработчиков событий, с которыми вы столкнулись, имеют только стандартный набор свойств и функций (методов), доступных для объекта события (см. {{domxref("Event")}} для ссылки на полный список). Однако некоторые более продвинутые обработчики добавляют специальные свойства, содержащие дополнительные данные, которые им необходимо выполнять. Например, [Media Recorder API](/ru/docs/Web/API/MediaRecorder_API) имеет событие, доступное для данных, которое срабатывает, когда записано какое-либо аудио или видео и доступно для выполнения чего-либо (например, для сохранения или воспроизведения). Соответствующий объект события [ondataavailable](/ru/docs/Web/API/MediaRecorder/ondataavailable) handler имеет свойство данных, содержащее записанные аудио- или видеоданные, чтобы вы могли получить к нему доступ и что-то сделать с ним.
+
+### Предотвращение поведения по умолчанию
+
+Иногда бывают ситуации, когда нужно остановить событие, выполняющее то, что оно делает по умолчанию. Наиболее распространённым примером является веб-форма, например, пользовательская форма регистрации. Когда вы вводите данные и нажимаете кнопку отправки, естественное поведение заключается в том, что данные должны быть отправлены на указанную страницу на сервере для обработки, а браузер перенаправляется на страницу с сообщением об успехе (или остаться на той же странице, если другое не указано).
+
+Но если пользователь отправил данные не правильно, как разработчик, вы хотите остановить отправку на сервер и выдать сообщение об ошибке с информацией о том, что не так и что нужно сделать. Некоторые браузеры поддерживают функции автоматической проверки данных формы, но, поскольку многие этого не делают, вам не следует полагаться на них и выполнять свои собственные проверки валидации. Давайте посмотрим на простой пример.
+
+Простая форма HTML, в которой требуется ввести ваше имя и фамилию:
+
+```html
+<form>
+  <div>
+    <label for="fname">Имя: </label>
+    <input id="fname" type="text">
+  </div>
+  <div>
+    <label for="lname">Фамилия: </label>
+    <input id="lname" type="text">
+  </div>
+  <div>
+     <input id="submit" type="submit">
+  </div>
+</form>
+<p></p>
+```
+
+```css hidden
+div {
   margin-bottom: 10px;
 }
-</pre>
-</div>
+```
 
-<p>В JavaScript мы реализуем очень простую проверку внутри обработчика события <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a> (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:</p>
+В JavaScript мы реализуем очень простую проверку внутри обработчика события [onsubmit](/ru/docs/Web/API/GlobalEventHandlers/onsubmit) (событие "отправить" запускается в форме, когда оно отправлено), который проверяет, пусты ли текстовые поля. Если они пусты, мы вызываем функцию [`preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) объекта события, которая останавливает отправку формы, а затем выводит сообщение об ошибке в абзаце ниже нашей формы, чтобы сообщить пользователю, что не так:
 
-<pre class="brush: js">var form = document.querySelector('form');
+```js
+var form = document.querySelector('form');
 var fname = document.getElementById('fname');
 var lname = document.getElementById('lname');
 var submit = document.getElementById('submit');
@@ -375,29 +377,26 @@ form.onsubmit = function(e) {
     e.preventDefault();
     para.textContent = 'Оба поля должны быть заполнены!';
   }
-}</pre>
+}
+```
 
-<p>Очевидно, что это довольно слабая проверка формы - это не помешает пользователю отправить форму с пробелами или цифрами, введёнными в поля, но для примера подходит. Вывод выглядит следующим образом:</p>
+Очевидно, что это довольно слабая проверка формы - это не помешает пользователю отправить форму с пробелами или цифрами, введёнными в поля, но для примера подходит. Вывод выглядит следующим образом:
 
-<p>{{ EmbedLiveSample('Предотвращение_поведения_по_умолчанию', '100%', 140) }}</p>
+{{ EmbedLiveSample('Предотвращение_поведения_по_умолчанию', '100%', 140) }}
 
-<div class="note">
-<p><strong>Примечание</strong>: чтобы увидеть исходный код, откройте <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (также <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">запустите</a> здесь).</p>
-</div>
+> **Примечание:** чтобы увидеть исходный код, откройте [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (также [запустите](http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html) здесь).
 
-<h3 id="Всплытие_и_перехват_событий">Всплытие и перехват событий</h3>
+### Всплытие и перехват событий
 
-<p>Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. <em>Всплытие</em> и <em>перехват событий</em> — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> в одной вкладке и <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">исходный код </a>в другой вкладке. Он также представлен ниже:</p>
+Последним предметом для рассмотрения в этой теме является то, с чем вы не часто будете сталкиваться, но это может стать настоящей головной болью, если вы не поймёте, как работает следующий механизм. _Всплытие_ и _перехват событий_ — два механизма, описывающих, что происходит, когда два обработчика одного и того же события активируются на одном элементе. Посмотрим на пример. Чтобы сделать это проще — откройте пример [show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) в одной вкладке и [исходный код ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)в другой вкладке. Он также представлен ниже:
 
-<div class="hidden">
-<h6 id="Hidden_video_example">Hidden video example</h6>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Show video box example&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Show video box example</title>
+    <style>
       div {
         position: absolute;
         top: 50%;
@@ -423,20 +422,20 @@ form.onsubmit = function(e) {
         margin: 50px auto;
       }
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-    &lt;button&gt;Display video&lt;/button&gt;
+    </style>
+  </head>
+  <body>
+    <button>Display video</button>
 
-    &lt;div class="hidden"&gt;
-      &lt;video&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
-        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
-        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-      &lt;/video&gt;
-    &lt;/div&gt;
+    <div class="hidden">
+      <video>
+        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4">
+        <source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm">
+        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+      </video>
+    </div>
 
-    &lt;script&gt;
+    <script>
 
       var btn = document.querySelector('button');
       var videoBox = document.querySelector('div');
@@ -460,28 +459,31 @@ form.onsubmit = function(e) {
         video.play();
       });
 
-    &lt;/script&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
+    </script>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500) }}</p>
+{{ EmbedLiveSample('Hidden_video_example', '100%', 500) }}
 
-<p>Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:</p>
+Это довольно простой пример, который показывает и скрывает {{htmlelement ("div")}} с элементом {{htmlelement ("video")}} внутри него:
 
-<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;
+```html
+<button>Display video</button>
 
-&lt;div class="hidden"&gt;
-  &lt;video&gt;
-    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
-    &lt;source src="rabbit320.webm" type="video/webm"&gt;
-    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
-  &lt;/video&gt;
-&lt;/div&gt;</pre>
+<div class="hidden">
+  <video>
+    <source src="rabbit320.mp4" type="video/mp4">
+    <source src="rabbit320.webm" type="video/webm">
+    <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
+  </video>
+</div>
+```
 
-<p>При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента <code>&lt;div&gt;</code> с <code>hidden</code> на <code>showing</code> (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):</p>
+При нажатии на кнопку {{htmlelement ("button")}}, изменяется атрибут класса элемента `<div>` с `hidden` на `showing` (CSS примера содержит эти два класса, которые размещают блок вне экрана и на экране соответственно):
 
-<pre class="brush: css">div {
+```css
+div {
         position: absolute;
         top: 50%;
         transform: translate(-50%,-50%);
@@ -492,16 +494,20 @@ form.onsubmit = function(e) {
   }
 .showing {
    left: 50%;
-  }</pre>
+  }
+```
 
-<pre class="brush: js">var btn = document.querySelector('button');
+```js
+var btn = document.querySelector('button');
 btn.onclick = function() {
   videoBox.setAttribute('class', 'showing');
-}</pre>
+}
+```
 
-<p>Затем мы добавляем ещё пару обработчиков событий <code>onclick.</code> Первый к <code>&lt;div&gt;</code>, а второй к <code>&lt;video&gt;</code>. Идея заключается в том, чтобы при щелчке по области <code>&lt;div&gt;</code> вне зоны видео поле снова скрылось, а при клике в области <code>&lt;video&gt;</code>  видео начало воспроизводиться.</p>
+Затем мы добавляем ещё пару обработчиков событий `onclick.` Первый к `<div>`, а второй к `<video>`. Идея заключается в том, чтобы при щелчке по области `<div>` вне зоны видео поле снова скрылось, а при клике в области `<video>` видео начало воспроизводиться.
 
-<pre class="brush: js">var videoBox = document.querySelector('div');
+```js
+var videoBox = document.querySelector('div');
 var video = document.querySelector('video');
 
 videoBox.onclick = function() {
@@ -510,92 +516,83 @@ videoBox.onclick = function() {
 
 video.onclick = function() {
   video.play();
-};</pre>
+};
+```
 
-<p>Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие <code>&lt;div&gt;</code>. Это связано с тем, что видео находится внутри <code>&lt;div&gt;,</code> это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.</p>
+Но есть проблема: когда вы нажимаете на видео, оно начинает воспроизводиться, но одновременно вызывает скрытие `<div>`. Это связано с тем, что видео находится внутри `<div>,` это часть его, поэтому нажатие на видео фактически запускает оба вышеуказанных обработчика событий.
 
-<h4 id="Всплытие_и_перехват_событий_—_концепция_выполнения"><strong>Всплытие и перехват событий — концепция выполнения</strong></h4>
+#### Всплытие и перехват событий — концепция выполнения
 
-<p>Когда событие инициируется элементом, который имеет родительские элементы (например, {{htmlelement ("video")}} в нашем случае), современные браузеры выполняют две разные фазы —  фазу  <strong>захвата</strong> и фазу <strong>всплытия</strong>.</p>
+Когда событие инициируется элементом, который имеет родительские элементы (например, {{htmlelement ("video")}} в нашем случае), современные браузеры выполняют две разные фазы — фазу **захвата** и фазу **всплытия**.
 
-<p>На стадии <strong>захвата </strong>происходит следующее:</p>
+На стадии **захвата** происходит следующее:
 
-<ul>
- <li>Браузер проверяет, имеет ли самый внешний элемент ({{htmlelement ("html")}}) обработчик события <code>onclick</code>, зарегистрированный на нем на этапе захвата и запускает его, если это так.</li>
- <li>Затем он переходит к следующему элементу внутри <code>&lt;html&gt;</code> и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента, на который на самом деле нажали.</li>
-</ul>
+- Браузер проверяет, имеет ли самый внешний элемент ({{htmlelement ("html")}}) обработчик события `onclick`, зарегистрированный на нем на этапе захвата и запускает его, если это так.
+- Затем он переходит к следующему элементу внутри `<html>` и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента, на который на самом деле нажали.
 
-<p>На стадии <strong>всплытия</strong> происходит полная противоположность:</p>
+На стадии **всплытия** происходит полная противоположность:
 
-<ul>
- <li>Браузер проверяет, имеет ли элемент, который был фактически нажат, обработчик события <code>onclick</code>, зарегистрированный на нем в фазе всплытия, и запускает его, если это так.</li>
- <li>Затем он переходит к следующему непосредственному родительскому элементу и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента <code>&lt;html&gt;</code>.</li>
-</ul>
+- Браузер проверяет, имеет ли элемент, который был фактически нажат, обработчик события `onclick`, зарегистрированный на нем в фазе всплытия, и запускает его, если это так.
+- Затем он переходит к следующему непосредственному родительскому элементу и выполняет то же самое, затем следующее и так далее, пока не достигнет элемента `<html>`.
 
-<p><a href="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>
+[![](https://mdn.mozillademos.org/files/14075/bubbling-capturing.png)](https://mdn.mozillademos.org/files/14075/bubbling-capturing.png)
 
-<p>(Нажмите на изображение, чтобы увеличить диаграмму)</p>
+(Нажмите на изображение, чтобы увеличить диаграмму)
 
-<p>В современных браузерах по умолчанию все обработчики событий регистрируются в фазе <strong><em>всплытия</em></strong>. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента <code>&lt;video&gt;</code> наружу, в элемент <code>&lt;html&gt;</code>. По пути:</p>
+В современных браузерах по умолчанию все обработчики событий регистрируются в фазе **_всплытия_**. Итак, в нашем текущем примере, когда вы нажимаете видео, событие click вызывается из элемента `<video>` наружу, в элемент `<html>`. По пути:
 
-<ul>
- <li>Он находит обработчик <code>video.onclick...</code> и запускает его, поэтому видео сначала начинает воспроизводиться.</li>
- <li>Затем он находит обработчик <code>videoBox.onclick...</code> и запускает его, поэтому видео также скрывается.</li>
-</ul>
+- Он находит обработчик `video.onclick...` и запускает его, поэтому видео сначала начинает воспроизводиться.
+- Затем он находит обработчик `videoBox.onclick...` и запускает его, поэтому видео также скрывается.
 
-<h4 id="Исправление_проблемы_с_помощью_stopPropagation">Исправление проблемы с помощью stopPropagation()</h4>
+#### Исправление проблемы с помощью stopPropagation()
 
-<p>Чтобы исправить это раздражающее поведение, стандартный объект события имеет функцию, называемую <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, которая при вызове в обработчике событий объекта делает так, чтобы обработчик выполнялся, но событие не всплывало дальше по цепочке, поэтому не будут запускаться другие обработчики.</p>
+Чтобы исправить это раздражающее поведение, стандартный объект события имеет функцию, называемую [`stopPropagation()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation), которая при вызове в обработчике событий объекта делает так, чтобы обработчик выполнялся, но событие не всплывало дальше по цепочке, поэтому не будут запускаться другие обработчики.
 
-<p>Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:</p>
+Поэтому мы можем исправить нашу текущую проблему, изменив вторую функцию-обработчик в предыдущем блоке кода:
 
-<pre class="brush: js">video.onclick = function(e) {
+```js
+video.onclick = function(e) {
   e.stopPropagation();
   video.play();
-};</pre>
+};
+```
 
-<p>Вы можете попробовать создать локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> и попробовать его самостоятельно исправить или просмотреть исправленный результат в <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (также см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">исходный код здесь</a>).</p>
+Вы можете попробовать создать локальную копию [show-video-box.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html) и попробовать его самостоятельно исправить или просмотреть исправленный результат в [show-video-box-fixed.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (также см. [исходный код здесь](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
 
-<div class="note"><strong>Примечание</strong>: Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.</div>
+> **Примечание:** Зачем беспокоиться как с захватом, так и с всплыванием? Что ж, в старые добрые времена, когда браузеры были менее совместимы, чем сейчас, Netscape использовал только захват событий, а Internet Explorer использовал только всплывающие события. Когда W3C решил попытаться стандартизировать поведение и достичь консенсуса, они в итоге получили эту систему, которая включала в себя и то, и другое, что реализовано в одном из современных браузеров.
 
-<div class="note">
-<p><strong>Примечание</strong>: Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе всплытия и это имеет смысл в большинстве случаев. Если вы действительно хотите зарегистрировать событие в фазе захвата, вы можете сделать это, зарегистрировав обработчик с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> и установив для третьего дополнительного свойства значение <code>true</code>.</p>
-</div>
+> **Примечание:** Как упоминалось выше, по умолчанию все обработчики событий регистрируются в фазе всплытия и это имеет смысл в большинстве случаев. Если вы действительно хотите зарегистрировать событие в фазе захвата, вы можете сделать это, зарегистрировав обработчик с помощью [`addEventListener()`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) и установив для третьего дополнительного свойства значение `true`.
 
-<h4 id="Делегирование_события"><strong>Делегирование</strong> события</h4>
+#### **Делегирование** события
 
-<p>Всплытие также позволяет нам использовать <strong>делегирование событий. </strong> Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определённый код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.</p>
+Всплытие также позволяет нам использовать **делегирование событий.** Если у какого-либо родительского элемента есть множество дочерних элементов, и вы хотите, чтобы определённый код выполнялся при щелчке (событии) на каждом из дочерних элементов, можно установить обработчик событий на родительском элементе и события, происходящие на дочерних элементах будут всплывать до их родителя. При этом не нужно устанавливать обработчик событий на каждом дочернем элементе.
 
-<p>Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить обработчик событий <code>click</code> для родительского элемента <code>&lt;ul&gt;</code> и он будет всплывать в элементах списка.</p>
+Хорошим примером является серия элементов списка. Если вы хотите, чтобы каждый из них, например, отображал сообщение при нажатии, вы можете установить обработчик событий `click` для родительского элемента `<ul>` и он будет всплывать в элементах списка.
 
-<p>Эту концепцию объясняет в своём блоге Дэвид Уолш, где приводит несколько примеров. (см. <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.)</p>
+Эту концепцию объясняет в своём блоге Дэвид Уолш, где приводит несколько примеров. (см. [How JavaScript Event Delegation Works](https://davidwalsh.name/event-delegate).)
 
-<h2 id="Вывод">Вывод</h2>
+## Вывод
 
-<p>Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера (<a href="/ru/docs/Web/API">Web API</a>).</p>
+Это все, что вам нужно знать о веб-событиях на этом этапе. Как уже упоминалось, события не являются частью основного JavaScript — они определены в веб-интерфейсах браузера ([Web API](/ru/docs/Web/API)).
 
-<p>Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.</p>
+Кроме того, важно понимать, что различные контексты, в которых используется JavaScript, обычно имеют разные модели событий — от веб-API до других областей, таких как браузерные WebExtensions и Node.js (серверный JavaScript). Может сейчас вы не особо в этом разбираетесь, но по мере изучения веб-разработки начнёт приходить более ясное понимание тематики.
 
-<p>Если у вас возникли вопросы, попробуйте прочесть статью снова или <a href="https://developer.mozilla.org/en-US/docs/Learn#Contact_us">обратитесь за помощью к нам</a>.</p>
+Если у вас возникли вопросы, попробуйте прочесть статью снова или [обратитесь за помощью к нам](/ru/docs/Learn#Contact_us).
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (обсуждение захвата и всплытий) — превосходно детализированная часть от Peter-Paul Koch.</li>
- <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.</li>
- <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
-</ul>
+- [Event order](http://www.quirksmode.org/js/events_order.html) (обсуждение захвата и всплытий) — превосходно детализированная часть от Peter-Paul Koch.
+- [Event accessing](http://www.quirksmode.org/js/events_access.html) (discussing of the event object) — another excellently detailed piece by Peter-Paul Koch.
+- [Event reference](/ru/docs/Web/Events)
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в вашем коде — условные конструкции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — Переиспользуемые блоки кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою собственную функцию</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемое значение функции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/События">Введение в события</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery">Создание галереи</a></li>
-</ul>
+- [Принятие решений в вашем коде — условные конструкции](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Зацикливание кода](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [Функции — Переиспользуемые блоки кода](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Создайте свою собственную функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [Возвращаемое значение функции](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Введение в события](/ru/docs/Learn/JavaScript/Building_blocks/События)
+- [Создание галереи](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/ru/learn/javascript/building_blocks/functions/index.md b/files/ru/learn/javascript/building_blocks/functions/index.md
index d440da05ad664b..1c6e00081b783b 100644
--- a/files/ru/learn/javascript/building_blocks/functions/index.md
+++ b/files/ru/learn/javascript/building_blocks/functions/index.md
@@ -8,328 +8,374 @@ tags:
   - параметры
 translation_of: Learn/JavaScript/Building_blocks/Functions
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</div>
+Другая важная концепция в кодировании — **функции** — позволяют хранить фрагмент кода, который выполняет одну задачу внутри определённого блока, а затем вызывать этот код всякий раз, когда вам это нужно, используя одну короткую команду, вместо того, чтобы вводить один и тот же код несколько раз.
 
-<p class="summary">Другая важная концепция в кодировании —  <strong>функции </strong>— позволяют хранить фрагмент кода, который выполняет одну задачу внутри определённого блока, а затем вызывать этот код всякий раз, когда вам это нужно, используя одну короткую команду, вместо того, чтобы вводить один и тот же код несколько раз.</p>
+В этой статье мы рассмотрим фундаментальные концепции функций, такие как базовый синтаксис, способы вызова и их определения, область действия и параметры.
 
-<p class="summary">В этой статье мы рассмотрим фундаментальные концепции функций, такие как базовый синтаксис, способы вызова и их определения, область действия и параметры.</p>
+| Предпосылки: | Начальная компьютерная грамотность, основы HTML и CSS, [первые шаги JavaScript](/ru/docs/Learn/JavaScript/First_steps). |
+| ------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| Цель:        | Понять фундаментальные основы функций языка JavaScript.                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Начальная компьютерная грамотность, основы HTML и CSS, <a href="/ru/docs/Learn/JavaScript/First_steps">первые шаги JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять фундаментальные основы функций языка JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Где можно встретить функции?
 
-<h2 id="Где_можно_встретить_функции">Где можно встретить функции?</h2>
+В JavaScript, вы везде уведите функции. На самом деле, мы пользовались функциями на протяжении всего курса; только мы не говорили об этом слишком часто. Теперь наступило время, чтобы поговорить о функциях более конкретно и разобрать их синтаксис.
 
-<p>В JavaScript, вы везде уведите функции. На самом деле, мы пользовались функциями на протяжении всего курса; только мы не говорили об этом слишком часто. Теперь наступило время, чтобы поговорить о функциях более конкретно и разобрать их синтаксис.</p>
+В значительном количестве случаев, когда вы пользуетесь структурой JavaScript, в которой есть пара обычных скобок — `()` — и при этом, это не является структурой типа [цикл for ](/ru/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop), [while, или do...while цикл](/ru/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while), или [if...else конструкция](/ru/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements), вы используете функцию.
 
-<p>В значительном количестве случаев, когда вы пользуетесь структурой JavaScript, в которой есть пара обычных скобок — <code>()</code> — и при этом, это не является структурой типа <a href="/ru/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">цикл for </a>, <a href="/ru/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">while, или do...while цикл</a>, или <a href="/ru/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">if...else конструкция</a>, вы используете функцию.</p>
+## Встроенные функции браузера
 
-<h2 id="Встроенные_функции_браузера">Встроенные функции браузера</h2>
+В этом курсе мы использовали функции, встроенные в браузер. Каждый раз, когда мы манипулировали текстовой строкой, например:
 
-<p>В этом курсе мы использовали функции, встроенные в браузер. Каждый раз, когда мы манипулировали текстовой строкой, например:</p>
-
-<pre class="brush: js">var myText = 'Я строка';
+```js
+var myText = 'Я строка';
 var newString = myText.replace('строка', 'сосиска');
 console.log(newString);
 // Функция строки replace() принимает строку,
 // заменяет одну строку на другую, и возвращает
-// новую строку с заменённым содержимым</pre>
+// новую строку с заменённым содержимым
+```
 
-<p>Или каждый раз, когда мы манипулировали массивом:</p>
+Или каждый раз, когда мы манипулировали массивом:
 
-<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек'];
+```js
+var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек'];
 var madeAString = myArray.join(' ');
 console.log(madeAString);
 // Функция join() принимает массив, соединяет
 // все элементы массива вместе в одну строку,
-// и возвращает эту новую строку</pre>
+// и возвращает эту новую строку
+```
 
-<p>Или каждый раз, когда мы генерировали случайное число:</p>
+Или каждый раз, когда мы генерировали случайное число:
 
-<pre class="brush: js">var myNumber = Math.random()
+```js
+var myNumber = Math.random()
 // Функция random() генерирует случайное число от 0 до 1,
-// и возвращает это число</pre>
+// и возвращает это число
+```
 
-<p>...мы использовали функции!</p>
+...мы использовали функции!
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете вставить эти строки в консоль вашего браузера, чтобы посмотреть, как работают эти функции.</p>
-</div>
+> **Примечание:** вы можете вставить эти строки в консоль вашего браузера, чтобы посмотреть, как работают эти функции.
 
-<p>Фактически, часть кода, который вы вызываете, когда ссылаетесь на встроенную функцию браузера  (воображаемое слово для её запуска или выполнения), не может быть написана на JavaScript — многие из этих функций вызывают части фонового кода браузера, который написан в основном на системных языках низкого уровня, таких как C ++, а не на веб-языках, таких как JavaScript.</p>
+Фактически, часть кода, который вы вызываете, когда ссылаетесь на встроенную функцию браузера (воображаемое слово для её запуска или выполнения), не может быть написана на JavaScript — многие из этих функций вызывают части фонового кода браузера, который написан в основном на системных языках низкого уровня, таких как C ++, а не на веб-языках, таких как JavaScript.
 
-<p>Имейте в виду, что некоторые встроенные функции браузера не являются частью основного языка JavaScript — некоторые из них являются частью API браузера, которые основываются на языке по умолчанию, чтобы обеспечить ещё большую функциональность (подробнее см. <a href="/ru/docs/Learn/JavaScript/Первые_шаги/What_is_JavaScript#Так_что_же_он_действительно_может_делать">один из предыдущих разделов этого курса</a>). Более подробно рассмотрим использование API браузера в более позднем модуле курса.</p>
+Имейте в виду, что некоторые встроенные функции браузера не являются частью основного языка JavaScript — некоторые из них являются частью API браузера, которые основываются на языке по умолчанию, чтобы обеспечить ещё большую функциональность (подробнее см. [один из предыдущих разделов этого курса](/ru/docs/Learn/JavaScript/Первые_шаги/What_is_JavaScript#Так_что_же_он_действительно_может_делать)). Более подробно рассмотрим использование API браузера в более позднем модуле курса.
 
-<h2 id="Функции_или_методы">Функции или методы</h2>
+## Функции или методы
 
-<p>Одну вещь, которую нам нужно прояснить, прежде чем двигаться дальше - технически, встроенные функции браузера не являются функциями — это <strong>методы</strong>. Это звучит немного страшно и запутанно, но не волнуйтесь — функции и методы слова во многом взаимозаменяемы, по крайней мере для наших целей, на данном этапе вашего обучения.</p>
+Одну вещь, которую нам нужно прояснить, прежде чем двигаться дальше - технически, встроенные функции браузера не являются функциями — это **методы**. Это звучит немного страшно и запутанно, но не волнуйтесь — функции и методы слова во многом взаимозаменяемы, по крайней мере для наших целей, на данном этапе вашего обучения.
 
-<p>Разница между методом и функцией лишь в том, что методы - это функции, определённые внутри объектов. Встроенные функции (методы) браузера и переменные (так называемые <strong>свойства</strong>) хранятся внутри структурированных объектов, чтобы сделать код более эффективным и более простым в использовании.</p>
+Разница между методом и функцией лишь в том, что методы - это функции, определённые внутри объектов. Встроенные функции (методы) браузера и переменные (так называемые **свойства**) хранятся внутри структурированных объектов, чтобы сделать код более эффективным и более простым в использовании.
 
-<p>Вам пока не нужно изучать внутреннюю работу структурированных объектов JavaScript - вы можете подождать, пока наш более поздний модуль не научит вас внутренним работам объектов и тому, как создавать свои собственные. На данный момент мы просто хотим устранить любую возможную путаницу метода, в сравнении с функциями - вы, вероятно, встретите оба термина, когда будете смотреть на доступные связанные ресурсы через Интернет.</p>
+Вам пока не нужно изучать внутреннюю работу структурированных объектов JavaScript - вы можете подождать, пока наш более поздний модуль не научит вас внутренним работам объектов и тому, как создавать свои собственные. На данный момент мы просто хотим устранить любую возможную путаницу метода, в сравнении с функциями - вы, вероятно, встретите оба термина, когда будете смотреть на доступные связанные ресурсы через Интернет.
 
-<h2 id="Пользовательские_функции">Пользовательские функции</h2>
+## Пользовательские функции
 
-<p>В этом курсе так же использовались <strong>пользовательские функции</strong> — это функции, которые вы определяете в своём коде, а не внутри браузера. Каждый раз, когда вы видели произвольное слово (имя функции) с круглыми скобками прямо после него, вы использовали пользовательскую функцию. В нашем примере <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a> (подробнее см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">исходный код</a>) из нашей <a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">статьи о циклах</a> мы включили пользовательскую функцию <code>draw()</code>, которая выглядит так:</p>
+В этом курсе так же использовались **пользовательские функции** — это функции, которые вы определяете в своём коде, а не внутри браузера. Каждый раз, когда вы видели произвольное слово (имя функции) с круглыми скобками прямо после него, вы использовали пользовательскую функцию. В нашем примере [random-canvas-circles.html](http://mdn.github.io/learning-area/javascript/building-blocks/loops/random-canvas-circles.html) (подробнее см. [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html)) из нашей [статьи о циклах](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code) мы включили пользовательскую функцию `draw()`, которая выглядит так:
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i &lt; 100; i++) {
+  for (var i = 0; i < 100; i++) {
     ctx.beginPath();
     ctx.fillStyle = 'rgba(255,0,0,0.5)';
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
-}</pre>
+}
+```
 
-<p>Эта функция рисует 100 случайных кругов внутри элемента {{htmlelement("canvas")}}. Каждый раз, когда мы хотим это сделать, мы можем вызвать эту функцию следующим образом</p>
+Эта функция рисует 100 случайных кругов внутри элемента {{htmlelement("canvas")}}. Каждый раз, когда мы хотим это сделать, мы можем вызвать эту функцию следующим образом
 
-<pre class="brush: js">draw();</pre>
+```js
+draw();
+```
 
-<p>вместо того, чтобы каждый раз, когда мы хотим повторить этот код, не писать его заново. И функции могут содержать любой код, который вам нравится - вы можете даже вызывать другие функции внутри своих функций. Вышеупомянутая функция, например, вызывает функцию <code>random()</code> три раза, которая выглядит следующим образом:</p>
+вместо того, чтобы каждый раз, когда мы хотим повторить этот код, не писать его заново. И функции могут содержать любой код, который вам нравится - вы можете даже вызывать другие функции внутри своих функций. Вышеупомянутая функция, например, вызывает функцию `random()` три раза, которая выглядит следующим образом:
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   return Math.floor(Math.random()*number);
-}</pre>
+}
+```
 
-<p>Нам понадобилась эта функция, потому что встроенная в браузер функция <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> генерирует случайное дробное число от 0 до 1. Но мы хотим случайное целое число от 0 до указанного числа.</p>
+Нам понадобилась эта функция, потому что встроенная в браузер функция [Math.random()](/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random) генерирует случайное дробное число от 0 до 1. Но мы хотим случайное целое число от 0 до указанного числа.
 
-<h2 id="Вызов_функций">Вызов функций</h2>
+## Вызов функций
 
-<p>Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать её. Это делается путём включения имени функции в код где-нибудь, за которым следуют скобки.</p>
+Скорее всего, вы уже поняли это, но на всякий случай ... чтобы использовать функцию после того, как она была определена, вам нужно запустить или вызвать её. Это делается путём включения имени функции в код где-нибудь, за которым следуют скобки.
 
-<pre class="brush: js">function myFunction() {
+```js
+function myFunction() {
   alert('привет');
 }
 
 myFunction()
-// Единовременный вызов функции</pre>
+// Единовременный вызов функции
+```
 
-<h2 id="Безымянные_функции">Безымянные функции</h2>
+## Безымянные функции
 
-<p>Вы можете видеть функции, определённые и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:</p>
+Вы можете видеть функции, определённые и вызываемые несколькими разными способами. До этого мы создавали функции таким способом:
 
-<pre class="brush: js">function myFunction() {
+```js
+function myFunction() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>Но вы также можете создавать функции без имени:</p>
+Но вы также можете создавать функции без имени:
 
-<pre class="brush: js">function() {
+```js
+function() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>Такая функция называется <strong>безымянная функция</strong> (или анонимная) — она не имеет имени! Она сама по себе ничего не делает. Обычно такие функции используются вместе с обработчиком событий, например, следующее будет вызывать код внутри функции каждый раз, по нажатию соответствующей кнопки:</p>
+Такая функция называется **безымянная функция** (или анонимная) — она не имеет имени! Она сама по себе ничего не делает. Обычно такие функции используются вместе с обработчиком событий, например, следующее будет вызывать код внутри функции каждый раз, по нажатию соответствующей кнопки:
 
-<pre class="brush: js">var myButton = document.querySelector('button');
+```js
+var myButton = document.querySelector('button');
 
 myButton.onclick = function() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>В приведённом примере требуется, чтобы на странице был элемент {{htmlelement ("button")}} (кнопка), которую нужно нажать. Вы уже видели такую структуру несколько раз на протяжении всего курса, подробнее о ней вы узнаете из следующей статьи.</p>
+В приведённом примере требуется, чтобы на странице был элемент {{htmlelement ("button")}} (кнопка), которую нужно нажать. Вы уже видели такую структуру несколько раз на протяжении всего курса, подробнее о ней вы узнаете из следующей статьи.
 
-<p>Вы также можете присвоить к переменной анонимную функцию, например:</p>
+Вы также можете присвоить к переменной анонимную функцию, например:
 
-<pre class="brush: js">var myGreeting = function() {
+```js
+var myGreeting = function() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>Теперь эту функцию можно вызвать, используя:</p>
+Теперь эту функцию можно вызвать, используя:
 
-<pre class="brush: js">myGreeting();</pre>
+```js
+myGreeting();
+```
 
-<p>Фактически такой способ присваивает переменной имя; вы также можете присвоить функцию значением нескольких переменных, например:</p>
+Фактически такой способ присваивает переменной имя; вы также можете присвоить функцию значением нескольких переменных, например:
 
-<pre class="brush: js">var anotherGreeting = function() {
+```js
+var anotherGreeting = function() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>Теперь функцию можно вызвать, используя любую из переменных</p>
+Теперь функцию можно вызвать, используя любую из переменных
 
-<pre class="brush: js">myGreeting();
-anotherGreeting();</pre>
+```js
+myGreeting();
+anotherGreeting();
+```
 
-<p>Но это может ввести в заблуждение, так что не стоит так делать! При создании функций лучше всего придерживаться следующего вида:</p>
+Но это может ввести в заблуждение, так что не стоит так делать! При создании функций лучше всего придерживаться следующего вида:
 
-<pre class="brush: js">function myGreeting() {
+```js
+function myGreeting() {
   alert('привет');
-}</pre>
+}
+```
 
-<p>Чаще всего вы будете использовать анонимные функции, чтобы просто запускать код при срабатывания события - например, нажатие кнопки - с помощью обработчика событий. Опять же, это выглядит примерно так:</p>
+Чаще всего вы будете использовать анонимные функции, чтобы просто запускать код при срабатывания события - например, нажатие кнопки - с помощью обработчика событий. Опять же, это выглядит примерно так:
 
-<pre class="brush: js">myButton.onclick = function() {
+```js
+myButton.onclick = function() {
   alert('привет');
   // При желании, внутри этой функции
   // можно написать много кода.
-}</pre>
+}
+```
 
-<h2 id="Параметры_функции">Параметры функции</h2>
+## Параметры функции
 
-<p>Некоторые функции при их вызове требуют указание параметров — это значения, которые должны быть вставлены в круглые скобки функции, необходимые для корректной работы функции.</p>
+Некоторые функции при их вызове требуют указание параметров — это значения, которые должны быть вставлены в круглые скобки функции, необходимые для корректной работы функции.
 
-<div class="note">
-<p><strong>Примечание</strong>: Параметры иногда называются аргументами, свойствами или атрибутами.</p>
-</div>
+> **Примечание:** Параметры иногда называются аргументами, свойствами или атрибутами.
 
-<p>Например встроенная в браузер функция <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a> не требует параметров. При вызове, она всегда возвращает случайное число от 0 до 1:</p>
+Например встроенная в браузер функция [Math.random()](/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/random) не требует параметров. При вызове, она всегда возвращает случайное число от 0 до 1:
 
-<pre class="brush: js">var myNumber = Math.random();</pre>
+```js
+var myNumber = Math.random();
+```
 
-<p>Браузерная встроенная функция, работающая со строкой, <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> ожидает два параметра — это подстрока для поиска в основной строке и строка, на которую происходит замена в основной строке:</p>
+Браузерная встроенная функция, работающая со строкой, [replace()](/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace) ожидает два параметра — это подстрока для поиска в основной строке и строка, на которую происходит замена в основной строке:
 
-<pre class="brush: js">var myText = 'Я строка';
-var newString = myText.replace('строка', 'сосиска');</pre>
+```js
+var myText = 'Я строка';
+var newString = myText.replace('строка', 'сосиска');
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Если необходимо указать несколько параметров, их разделяют запятыми.</p>
-</div>
+> **Примечание:** Если необходимо указать несколько параметров, их разделяют запятыми.
 
-<p>Следует также отметить, что иногда параметры являются необязательными - вам не нужно их указывать. Если вы этого не сделаете, функция, как правило, примет какое-то поведение по умолчанию. В качестве примера параметр функции массива <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/join">join()</a> необязателен:</p>
+Следует также отметить, что иногда параметры являются необязательными - вам не нужно их указывать. Если вы этого не сделаете, функция, как правило, примет какое-то поведение по умолчанию. В качестве примера параметр функции массива [join()](/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/join) необязателен:
 
-<pre class="brush: js">var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек'];
+```js
+var myArray = ['Я', 'люблю', 'шоколадных', 'лягушек'];
 var madeAString = myArray.join(' ');
 // Вернёт 'Я люблю шоколадных лягушек'
 var madeAString = myArray.join();
-// Вернёт 'Я,люблю,шоколадных,лягушек'</pre>
+// Вернёт 'Я,люблю,шоколадных,лягушек'
+```
 
-<p>Если не указан параметр для символа соединения / разграничения, по умолчанию используется запятая.</p>
+Если не указан параметр для символа соединения / разграничения, по умолчанию используется запятая.
 
-<h2 id="Область_видимости_функции_и_конфликты">Область видимости функции и конфликты</h2>
+## Область видимости функции и конфликты
 
-<p>Давайте немного поговорим о {{glossary("scope")}} - очень важная концепция при работе с функциями. Когда вы создаёте функцию, переменные и другие вещи, определённые внутри функции, находятся внутри их отдельной <strong>области (scope)</strong>, что означает, что они заперты в своих отдельных отсеках, недоступных из других функций или из кода вне функций.</p>
+Давайте немного поговорим о {{glossary("scope")}} - очень важная концепция при работе с функциями. Когда вы создаёте функцию, переменные и другие вещи, определённые внутри функции, находятся внутри их отдельной **области (scope)**, что означает, что они заперты в своих отдельных отсеках, недоступных из других функций или из кода вне функций.
 
-<p>Верхний уровень за пределами всех ваших функций называется <strong>глобальной областью (global scope)</strong>. Значения, определённые в глобальном масштабе, доступны извне в коде.</p>
+Верхний уровень за пределами всех ваших функций называется **глобальной областью (global scope)**. Значения, определённые в глобальном масштабе, доступны извне в коде.
 
-<p>JavaScript настроен таким образом по разным причинам - но главным образом из-за безопасности и организации. Иногда вы не хотите, чтобы переменные были доступны извне в коде - внешние скрипты, которые вы вызывали из других источников, могут начать работать с вашим кодом и вызывать проблемы, потому что они используют одни и те же имена переменных, как и другие части кода , вызывая конфликты. Это может быть сделано злонамеренно или просто случайно.</p>
+JavaScript настроен таким образом по разным причинам - но главным образом из-за безопасности и организации. Иногда вы не хотите, чтобы переменные были доступны извне в коде - внешние скрипты, которые вы вызывали из других источников, могут начать работать с вашим кодом и вызывать проблемы, потому что они используют одни и те же имена переменных, как и другие части кода , вызывая конфликты. Это может быть сделано злонамеренно или просто случайно.
 
-<p>Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определённую функцию, которые используют одно и то же имя:</p>
+Например, скажем, у вас есть файл HTML, который вызывается в двух внешних файлах JavaScript, и оба они имеют переменную и определённую функцию, которые используют одно и то же имя:
 
-<pre class="brush: html">&lt;!-- Excerpt from my HTML --&gt;
-&lt;script src="first.js"&gt;&lt;/script&gt;
-&lt;script src="second.js"&gt;&lt;/script&gt;
-&lt;script&gt;
+```html
+<!-- Excerpt from my HTML -->
+<script src="first.js"></script>
+<script src="second.js"></script>
+<script>
   greeting();
-&lt;/script&gt;</pre>
+</script>
+```
 
-<pre class="brush: js">// first.js
+```js
+// first.js
 var name = 'Chris';
 function greeting() {
   alert('Hello ' + name + ': welcome to our company.');
-}</pre>
+}
+```
 
-<pre class="brush: js">// second.js
+```js
+// second.js
 var name = 'Zaptec';
 function greeting() {
   alert('Our company is called ' + name + '.');
-}</pre>
+}
+```
 
-<p>Обе функции, которые вы хотите вызвать, называются <code>greeting()</code>, но вы можете получить доступ только к функции <code>greeting()</code> файла <code>first.js</code> (функция файла <code>second.js</code> игнорируется). Кроме того, попытка объявить переменную <code>name</code> второй раз через <code>let</code> в файле <code>second.js</code> приведёт к ошибке.</p>
+Обе функции, которые вы хотите вызвать, называются `greeting()`, но вы можете получить доступ только к функции `greeting()` файла `first.js` (функция файла `second.js` игнорируется). Кроме того, попытка объявить переменную `name` второй раз через `let` в файле `second.js` приведёт к ошибке.
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот пример можно увидеть в режиме <a href="https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html">Live на GitHub</a> (см. также <a href="/ru/docs/https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions">исходный код</a>).</p>
-</div>
+> **Примечание:** Этот пример можно увидеть в режиме [Live на GitHub](https://mdn.github.io/learning-area/javascript/building-blocks/functions/conflict.html) (см. также [исходный код](/ru/docs/https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/functions)).
 
-<p>Хранение частей вашего кода, заблокированных функциями, позволяет избежать таких проблем и считается наилучшей практикой.</p>
+Хранение частей вашего кода, заблокированных функциями, позволяет избежать таких проблем и считается наилучшей практикой.
 
-<p>Это немного похоже на зоопарк. Львы, зебры, тигры и пингвины находятся в своих собственных ограждениях и имеют доступ только к вещам внутри их вольеров - таким же образом, как и в области функций. Если бы они смогли попасть в другие вольеры, возникли проблемы. В лучшем случае разные животные будут чувствовать себя неудобно в незнакомых местах обитания - лев или тигр будут чувствовать себя ужасно внутри водянистой, ледяной области пингвинов. В худшем случае львы и тигры могут попытаться съесть пингвинов!</p>
+Это немного похоже на зоопарк. Львы, зебры, тигры и пингвины находятся в своих собственных ограждениях и имеют доступ только к вещам внутри их вольеров - таким же образом, как и в области функций. Если бы они смогли попасть в другие вольеры, возникли проблемы. В лучшем случае разные животные будут чувствовать себя неудобно в незнакомых местах обитания - лев или тигр будут чувствовать себя ужасно внутри водянистой, ледяной области пингвинов. В худшем случае львы и тигры могут попытаться съесть пингвинов!
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/14079/MDN-mozilla-zoo.png)
 
-<p>Хранитель зоопарка подобен глобальной переменной - он или она имеет ключи для доступа к каждому вольеру, для пополнения запасов пищи, ухода за больными животными и т. д.</p>
+Хранитель зоопарка подобен глобальной переменной - он или она имеет ключи для доступа к каждому вольеру, для пополнения запасов пищи, ухода за больными животными и т. д.
 
-<h3 id="Активное_обучение_игра_с_scope">Активное обучение: игра с scope</h3>
+### Активное обучение: игра с scope
 
-<p>Давайте посмотрим на реальный пример, демонстрирующий обзор.</p>
+Давайте посмотрим на реальный пример, демонстрирующий обзор.
 
-<ol>
- <li>Сначала создайте локальную копию нашего примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html">function-scope.html</a>. Это содержит две функции, называемые <code>a()</code> и <code>b()</code>, и три переменные - <code>x</code>, <code>y</code> и <code>z</code> - две из которых определены внутри функций и одна в глобальной области. Он также содержит третью функцию, называемую <code>output()</code>, которая принимает один параметр и выводит его в абзаце на странице.</li>
- <li>Откройте пример в браузере и в текстовом редакторе.</li>
- <li>Откройте консоль JavaScript в инструментах разработчика вашего браузера. В консоли JavaScript введите следующую команду:
-  <pre class="brush: js">output(x);</pre>
-  вы должны увидеть значение переменной <code>x</code> вывод на экране.</li>
- <li>Теперь попробуйте ввести следующее в консоли
-  <pre class="brush: js">output(y);
-output(z);</pre>
-  Оба из них должны возвращать ошибку в строке "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: y is not defined</a>". Почему это? Из-за функции scope - <code>y</code> и <code>z</code> блокируются внутри функций <code>a() </code>и <code>b()</code>, поэтому <code>output()</code> не может получить к ним доступ при вызове из глобальной области.</li>
- <li>Однако как насчёт того, когда он вызван изнутри другой функции? Попробуйте отредактировать функции <code>a()</code> и <code>b()</code>, чтобы они выглядели следующим образом:
-  <pre class="brush: js">function a() {
-  var y = 2;
-  output(y);
-}
+1.  Сначала создайте локальную копию нашего примера [function-scope.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-scope.html). Это содержит две функции, называемые `a()` и `b()`, и три переменные - `x`, `y` и `z` - две из которых определены внутри функций и одна в глобальной области. Он также содержит третью функцию, называемую `output()`, которая принимает один параметр и выводит его в абзаце на странице.
+2.  Откройте пример в браузере и в текстовом редакторе.
+3.  Откройте консоль JavaScript в инструментах разработчика вашего браузера. В консоли JavaScript введите следующую команду:
 
-function b() {
-  var z = 3;
-  output(z);
-}</pre>
-  Сохраните код и перезагрузите его в своём браузере, затем попробуйте вызвать функции <code>a()</code> и <code>b()</code> из консоли JavaScript:
-
-  <pre class="brush: js">a();
-b();</pre>
-  вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция <code>output() </code>вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. <code>output()</code> доступен из любого места, поскольку он определён в глобальной области.</li>
- <li>Теперь попробуйте обновить свой код следующим образом:
-  <pre class="brush: js">function a() {
-  var y = 2;
-  output(x);
-}
+    ```js
+    output(x);
+    ```
 
-function b() {
-  var z = 3;
-  output(x);
-}</pre>
-  Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li>
- <li>
-  <pre class="brush: js"><code>a();
-b();</code></pre>
-
-  <p>Оба вызова <code>a()</code> и <code>b()</code> должны выводить значение x - 1. Они работают нормально, потому что, хотя вызовы <code>output()</code> не находятся в той же области, где определено <code>x</code>, <code>x</code> - глобальная переменная, поэтому она доступна внутри всего кода, везде</p>
- </li>
- <li>Наконец, попробуйте обновить свой код следующим образом:
-  <pre class="brush: js"><code>function a() {
-  var y = 2;
-  output(z);
-}
+    вы должны увидеть значение переменной `x` вывод на экране.
+
+4.  Теперь попробуйте ввести следующее в консоли
 
-function b() {
-  var z = 3;
-  output(y);
-}</code></pre>
-  Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:</li>
- <li>
-  <pre class="brush: js"><code>a();
-b();</code></pre>
- </li>
-</ol>
+    ```js
+    output(y);
+    output(z);
+    ```
 
-<p>На этот раз вызовы <code>a()</code> и <code>b()</code> возвратят эту раздражающую ошибку "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: z is not defined</a>" - это потому, что вызовы <code>output()</code> и переменные, которые они пытаются распечатать, не определены внутри одних и тех же областей функций - переменные эффективно невидимы для этих вызовов функций.</p>
+    Оба из них должны возвращать ошибку в строке "[ReferenceError: y is not defined](/ru/docs/Web/JavaScript/Reference/Errors/Not_defined)". Почему это? Из-за функции scope - `y` и `z` блокируются внутри функций `a() `и `b()`, поэтому `output()` не может получить к ним доступ при вызове из глобальной области.
 
-<div class="note">
-<p><strong>Примечание</strong>: Те же правила определения не применяются к циклу (например, <code>for() { ... }</code>) и условным блокам (например, <code>if() { ... }</code>) - они выглядят очень похожими, но это не одно и то же! Старайтесь не путать их.</p>
-</div>
+5.  Однако как насчёт того, когда он вызван изнутри другой функции? Попробуйте отредактировать функции `a()` и `b()`, чтобы они выглядели следующим образом:
 
-<div class="note">
-<p><strong>Примечание:</strong> <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined">ReferenceError: "x" is not defined</a>. Ошибка - это одна из наиболее распространённых проблем, с которой вы столкнётесь. Если вы получите эту ошибку, и вы уверены, что определили эту переменную, проверьте, в какой области она находится.</p>
-</div>
+    ```js
+    function a() {
+      var y = 2;
+      output(y);
+    }
 
-<ul>
-</ul>
+    function b() {
+      var z = 3;
+      output(z);
+    }
+    ```
 
-<h3 id="Функции_внутри_функций">Функции внутри функций</h3>
+    Сохраните код и перезагрузите его в своём браузере, затем попробуйте вызвать функции `a()` и `b()` из консоли JavaScript:
 
-<p>Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции.  Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, её легче понять, если разбить её на несколько подфункций:</p>
+    ```js
+    a();
+    b();
+    ```
 
-<pre class="brush: js">function myBigFunction() {
+    вы должны увидеть значения y и z, выводимые на странице. Это отлично работает, так как функция `output() `вызывается внутри других функций - в той же области, где переменные, которые она печатает, определяются в каждом случае. `output()` доступен из любого места, поскольку он определён в глобальной области.
+
+6.  Теперь попробуйте обновить свой код следующим образом:
+
+    ```js
+    function a() {
+      var y = 2;
+      output(x);
+    }
+
+    function b() {
+      var z = 3;
+      output(x);
+    }
+    ```
+
+    Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:
+
+7.  ```js
+    a();
+    b();
+    ```
+
+    Оба вызова `a()` и `b()` должны выводить значение x - 1. Они работают нормально, потому что, хотя вызовы `output()` не находятся в той же области, где определено `x`, `x` - глобальная переменная, поэтому она доступна внутри всего кода, везде
+
+8.  Наконец, попробуйте обновить свой код следующим образом:
+
+    ```js
+    function a() {
+      var y = 2;
+      output(z);
+    }
+
+    function b() {
+      var z = 3;
+      output(y);
+    }
+    ```
+
+    Сохраните и перезагрузите снова и повторите попытку в консоли JavaScript:
+
+9.  ```js
+    a();
+    b();
+    ```
+
+На этот раз вызовы `a()` и `b()` возвратят эту раздражающую ошибку "[ReferenceError: z is not defined](/ru/docs/Web/JavaScript/Reference/Errors/Not_defined)" - это потому, что вызовы `output()` и переменные, которые они пытаются распечатать, не определены внутри одних и тех же областей функций - переменные эффективно невидимы для этих вызовов функций.
+
+> **Примечание:** Те же правила определения не применяются к циклу (например, `for() { ... }`) и условным блокам (например, `if() { ... }`) - они выглядят очень похожими, но это не одно и то же! Старайтесь не путать их.
+
+> **Примечание:** [ReferenceError: "x" is not defined](/ru/docs/Web/JavaScript/Reference/Errors/Not_defined). Ошибка - это одна из наиболее распространённых проблем, с которой вы столкнётесь. Если вы получите эту ошибку, и вы уверены, что определили эту переменную, проверьте, в какой области она находится.
+
+### Функции внутри функций
+
+Имейте в виду, что вы можете вызывать функцию из любого места, даже если она внутри другой функции. Это часто используется как способ поддержания чистоты кода. Если у вас есть большая сложная функция, её легче понять, если разбить её на несколько подфункций:
+
+```js
+function myBigFunction() {
   var myValue;
 
   subFunction1();
@@ -348,11 +394,12 @@ function subFunction2() {
 function subFunction3() {
   console.log(myValue);
 }
-</pre>
+```
 
-<p>Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведённом выше примере выдаётся ошибка <code>ReferenceError: MyValue is not defined</code>, поскольку хотя переменная <code>myValue</code> определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:</p>
+Просто убедитесь, что значения, используемые внутри функции, находятся в области видимости. В приведённом выше примере выдаётся ошибка `ReferenceError: MyValue is not defined`, поскольку хотя переменная `myValue` определена в той же области, что и вызовы функций, она не определена в определениях функций - фактический код, который запускается при вызове функций. Чтобы это работало, вам нужно передать значение в функцию в качестве параметра, например так:
 
-<pre class="brush: js">function myBigFunction() {
+```js
+function myBigFunction() {
   var myValue = 1;
 
   subFunction1(myValue);
@@ -370,21 +417,19 @@ function subFunction2(value) {
 
 function subFunction3(value) {
   console.log(value);
-}</pre>
+}
+```
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>В этой статье были рассмотрены основные понятия, лежащие в основе функций, позволяющие освоить следующий материал, в котором мы получим практические навыки, и научимся создавать собственные функции.</p>
+В этой статье были рассмотрены основные понятия, лежащие в основе функций, позволяющие освоить следующий материал, в котором мы получим практические навыки, и научимся создавать собственные функции.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="/ru/docs/Web/JavaScript/Guide/Functions">Детальное руководство по функциям</a> — описание некоторых дополнительных функций, не описанных в этой статье.</li>
- <li><a href="/ru/docs/Web/JavaScript/Reference/Functions">Описание функций</a></li>
- <li><a href="/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters">Параметры по умолчанию</a>, <a href="/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Стрелочные функции</a> — продвинутая документация</li>
-</ul>
+- [Детальное руководство по функциям](/ru/docs/Web/JavaScript/Guide/Functions) — описание некоторых дополнительных функций, не описанных в этой статье.
+- [Описание функций](/ru/docs/Web/JavaScript/Reference/Functions)
+- [Параметры по умолчанию](/ru/docs/Web/JavaScript/Reference/Functions/Default_parameters), [Стрелочные функции](/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) — продвинутая документация
 
-<ul>
-</ul>
+<!---->
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Looping_code","Learn/JavaScript/Building_blocks/Build_your_own_function", "Learn/JavaScript/Building_blocks")}}
diff --git a/files/ru/learn/javascript/building_blocks/image_gallery/index.md b/files/ru/learn/javascript/building_blocks/image_gallery/index.md
index 8485306f3a7c66..eaa6d162790e93 100644
--- a/files/ru/learn/javascript/building_blocks/image_gallery/index.md
+++ b/files/ru/learn/javascript/building_blocks/image_gallery/index.md
@@ -9,138 +9,108 @@ tags:
   - циклы
 translation_of: Learn/JavaScript/Building_blocks/Image_gallery
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</div>
+Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.
 
-<p class="summary">Теперь, после изучения основ JavaScript, мы проверим ваши знания циклов, функций, условных операторов и событий предложив вам написать популярный элемент который вы увидите на многих сайтах - галерея на JavaScript.</p>
+| Необходимые знания: | Перед выполнением этого задания вы должны проработать все статьи в этом модуле.  |
+| ------------------- | -------------------------------------------------------------------------------- |
+| Цель:               | Проверить понимание циклов, функций, условных операторов и событий в JavaScript. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Перед выполнением этого задания вы должны проработать все статьи в этом модуле.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Проверить понимание циклов, функций, условных операторов и событий в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Отправная точка
 
-<h2 id="Отправная_точка">Отправная точка</h2>
+Для начала скачайте [ZIP файл](https://github.com/ConstantineZz/learning-area/raw/master/javascript/building-blocks/gallery/gallery-start-rv.zip) для примера и распакуйте его содержимое у себя на компьютере.
 
-<p>Для начала скачайте <a href="https://github.com/ConstantineZz/learning-area/raw/master/javascript/building-blocks/gallery/gallery-start-rv.zip">ZIP файл</a> для примера и распакуйте его содержимое у себя на компьютере.</p>
+> **Примечание:** **Замечание**: вы также можете использовать такие сайты как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/) для выполнения задания. Вы можете скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги `<script>`/`<style>` расположенные на самой HTML странице.
 
-<div class="note">
-<p><strong>Замечание</strong>: вы также можете использовать такие сайты как    <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для выполнения задания. Вы можете скопировать HTML, CSS и JavaScript в один из этих редакторов. Если онлайн редактор, который вы выбрали, не имеет отдельных панелей для JavaScript/CSS, вы можете выставить код в теги <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code> расположенные на самой HTML странице.</p>
-</div>
-
-<h2 id="Обзор_проекта">Обзор проекта</h2>
-
-<p>В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript-кода. Вам нужно написать недостающий JavaScript-код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:</p>
+## Обзор проекта
 
-<pre class="brush: html">&lt;h1&gt;Пример фотогалереи&lt;/h1&gt;
+В примере вы увидите несколько файлов HTML, CSS и изображений и несколько строк JavaScript-кода. Вам нужно написать недостающий JavaScript-код для того чтобы галерея заработала. Каркас HTML страницы выглядит так:
 
-&lt;div class="full-img"&gt;
-  &lt;img class="displayed-img" src="images/pic1.jpg"&gt;
-  &lt;div class="overlay"&gt;&lt;/div&gt;
-  &lt;button class="dark"&gt;Темнее&lt;/button&gt;
-&lt;/div&gt;
+```html
+<h1>Пример фотогалереи</h1>
 
-&lt;div class="thumb-bar"&gt;
+<div class="full-img">
+  <img class="displayed-img" src="images/pic1.jpg">
+  <div class="overlay"></div>
+  <button class="dark">Темнее</button>
+</div>
 
-&lt;/div&gt;</pre>
+<div class="thumb-bar">
 
-<p>Результат выглядит следующим образом:</p>
+</div>
+```
 
-<p><img alt="" src="https://github.com/ConstantineZz/javaScript/blob/master/gallery.png?raw=true" style="height: 639px; width: 827px;"></p>
+Результат выглядит следующим образом:
 
-<ul>
-</ul>
+![](https://github.com/ConstantineZz/javaScript/blob/master/gallery.png?raw=true)
 
-<p>Наиболее интересные части CSS файла из примера:</p>
+Наиболее интересные части CSS файла из примера:
 
-<ul>
- <li>Абсолютно позиционированы три элемента внутри <code>&lt;div class="full-img"&gt;</code>:  <code>&lt;img&gt;</code>, в котором отображается полноразмерное изображение, пустой <code>&lt;div class="overlay"&gt;</code>, размер которого имеет тот же размер, что и <code>&lt;img&gt;</code> помещается прямо над предыдущим div-ом (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и <code>&lt;button&gt;</code>, который используется для управления эффектом затемнения.</li>
- <li>Задана ширина  любых изображений внутри <code>&lt;div class="thumb-bar"&gt;</code> (так называемые «уменьшенные изображения») до 20% и размещены слева так, чтобы они следовали друг за другом на линии.</li>
-</ul>
+- Абсолютно позиционированы три элемента внутри `<div class="full-img">`: `<img>`, в котором отображается полноразмерное изображение, пустой `<div class="overlay">`, размер которого имеет тот же размер, что и `<img>` помещается прямо над предыдущим div-ом (это используется для нанесения эффекта затемнения на изображение через полупрозрачный цвет фона) и `<button>`, который используется для управления эффектом затемнения.
+- Задана ширина любых изображений внутри `<div class="thumb-bar">` (так называемые «уменьшенные изображения») до 20% и размещены слева так, чтобы они следовали друг за другом на линии.
 
-<p>Ваш JavaScript должен:</p>
+Ваш JavaScript должен:
 
-<ul>
- <li>Переберите все изображения, и для каждого вставьте элемент <code>&lt;img&gt;</code> внутри <code>thumb-bar &lt;div&gt;</code>, который будет вставлять это изображение на страницу.</li>
- <li>Прикрепите обработчик <code>onclick</code> к каждому <code>&lt;img&gt;</code> внутри <code>thumb-bar &lt;div&gt;</code>, чтобы при нажатии на них соответствующее изображение отображалось в элементе <code>display-img &lt;img&gt;</code>.</li>
- <li>Прикрепите обработчик <code>onclick</code> к кнопке <code>&lt;button&gt;</code>, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.</li>
-</ul>
+- Переберите все изображения, и для каждого вставьте элемент `<img>` внутри `thumb-bar <div>`, который будет вставлять это изображение на страницу.
+- Прикрепите обработчик `onclick` к каждому `<img>` внутри `thumb-bar <div>`, чтобы при нажатии на них соответствующее изображение отображалось в элементе `display-img <img>`.
+- Прикрепите обработчик `onclick` к кнопке `<button>`, чтобы при нажатии на неё к полноразмерному изображению был применён эффект затемнения. При повторном нажатии эффект затемнения снова удаляется.
 
-<p>Чтобы лучше понять идею, посмотрите на <a href="https://mdn.github.io/learning-area/javascript/building-blocks/gallery/">готовый пример</a> (не заглядывая в исходный код!).</p>
+Чтобы лучше понять идею, посмотрите на [готовый пример](https://mdn.github.io/learning-area/javascript/building-blocks/gallery/) (не заглядывая в исходный код!).
 
-<h2 id="Этапы_выполнения">Этапы выполнения</h2>
+## Этапы выполнения
 
-<p>В следующих разделах описывается, что вам нужно делать.</p>
+В следующих разделах описывается, что вам нужно делать.
 
-<h3 id="Зацикливание_изображений">Зацикливание изображений</h3>
+### Зацикливание изображений
 
-<p>В файле main.js уже предоставлены строки, в которых хранится ссылка на <code>thumb-bar &lt;div&gt;</code> внутри переменной с именем <code>thumbBar</code>, создают новый элемент <code>&lt;img&gt;</code>, устанавливают его атрибут <code>src</code> на значение placeholder <code>xxx</code> и добавляют этот новый <code>&lt;img&gt;</code> элемент внутри <code>thumbBar</code>.</p>
+В файле main.js уже предоставлены строки, в которых хранится ссылка на `thumb-bar <div>` внутри переменной с именем `thumbBar`, создают новый элемент `<img>`, устанавливают его атрибут `src` на значение placeholder `xxx` и добавляют этот новый `<img>` элемент внутри `thumbBar`.
 
-<p>Нужно сделать:</p>
+Нужно сделать:
 
-<ol>
- <li>Поместите раздел кода под комментарием <code>/* Looping through images */</code> внутри цикла, который перебирает все 5 изображений - вам просто нужно перебрать пять чисел, каждое из которых представляет каждое изображение.</li>
- <li>В каждой итерации цикла замените значение-заполнитель <code>xxx</code> строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута <code>src</code> для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - <code>pic1.jpg</code>, <code>pic2.jpg</code> и т.д.</li>
-</ol>
+1.  Поместите раздел кода под комментарием `/* Looping through images */` внутри цикла, который перебирает все 5 изображений - вам просто нужно перебрать пять чисел, каждое из которых представляет каждое изображение.
+2.  В каждой итерации цикла замените значение-заполнитель `xxx` строкой, которая будет равна пути к изображению в каждом случае. Мы устанавливаем значение атрибута `src` для этого значения в каждом случае. Имейте в виду, что в каждом случае изображение находится внутри каталога изображений, а его имя - `pic1.jpg`, `pic2.jpg` и т.д.
 
-<h3 id="Добавление_обработчика_onclick_к_каждому_уменьшенному_изображению">Добавление обработчика onclick к каждому уменьшенному изображению</h3>
+### Добавление обработчика onclick к каждому уменьшенному изображению
 
-<p>В каждой итерации цикла вам нужно добавить обработчик <code>onclick</code> к текущему <code>newImage</code>:</p>
+В каждой итерации цикла вам нужно добавить обработчик `onclick` к текущему `newImage`:
 
-<ol>
- <li>Найдите значение атрибута <code>src</code> текущего изображения. Это можно сделать, запустив функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute">getAttribute()</a></code> в <code>&lt;img&gt;</code> в каждом случае и передав ей параметр <code>«src»</code> в каждом случае. Но как получить изображение? Использование <code>newImage</code> не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение <code>src</code> последнего <code>&lt;img&gt;</code> будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события <code>&lt;img&gt;</code> является целью обработчика. Как получить информацию от объекта события?</li>
- <li>Запустите функцию, передав ей возвращаемое значение <code>src</code> в качестве параметра. Вы можете вызвать эту функцию, как хотите.</li>
- <li>Эта функция обработчика событий должна установить значение атрибута <code>src</code> <code>displayed-img &lt;img&gt;</code> равным значению <code>src</code>, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий <code>&lt;img&gt;</code> в переменной с именем <code>displayedImg</code>. Обратите внимание, что здесь нам нужна определённая именованная функция.</li>
-</ol>
+1.  Найдите значение атрибута `src` текущего изображения. Это можно сделать, запустив функцию [`getAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute) в `<img>` в каждом случае и передав ей параметр `«src»` в каждом случае. Но как получить изображение? Использование `newImage` не будет работать, так как цикл завершается до применения обработчиков событий; это приведёт к тому, что значение `src` последнего `<img>` будет возвращено в каждом случае. Чтобы решить это, имейте в виду, что в случае каждого обработчика события `<img>` является целью обработчика. Как получить информацию от объекта события?
+2.  Запустите функцию, передав ей возвращаемое значение `src` в качестве параметра. Вы можете вызвать эту функцию, как хотите.
+3.  Эта функция обработчика событий должна установить значение атрибута `src` `displayed-img <img>` равным значению `src`, переданному в качестве параметра. Мы уже предоставили вам строку, в которой хранится ссылка на соответствующий `<img>` в переменной с именем `displayedImg`. Обратите внимание, что здесь нам нужна определённая именованная функция.
 
-<h3 id="Написание_обработчика_который_запускает_кнопку_затемнения_подсветки">Написание обработчика, который запускает кнопку затемнения / подсветки</h3>
+### Написание обработчика, который запускает кнопку затемнения / подсветки
 
-<p>Мы уже предоставили строку, в которой хранится ссылка на <code>&lt;button&gt;</code> в переменной <code>btn</code>. Вам нужно добавить обработчик <code>onclick</code>, который:</p>
+Мы уже предоставили строку, в которой хранится ссылка на `<button>` в переменной `btn`. Вам нужно добавить обработчик `onclick`, который:
 
-<ol>
- <li>Проверяет текущее имя класса, установленное на кнопке <code>&lt;button&gt;</code> — для этого снова можно использовать <code>getAttribute()</code>.</li>
- <li>Если имя класса <code>"dark"</code>, изменяет класс <code>&lt;button&gt;</code> на <code>"light"</code> (с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute">setAttribute()</a></code>), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения <code>&lt;div&gt;</code> на <code>"rgba (0,0,0,0.5)"</code>.</li>
- <li>Если имя класса не «тёмное», изменяет класс <code>&lt;button&gt;</code> на <code>"dark"</code>, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения <code>&lt;div&gt;</code> на <code>"rgba(0,0,0,0)"</code>.</li>
-</ol>
+1.  Проверяет текущее имя класса, установленное на кнопке `<button>` — для этого снова можно использовать `getAttribute()`.
+2.  Если имя класса `"dark"`, изменяет класс `<button>` на `"light"` (с помощью [`setAttribute()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)), его текстовое содержимое на "Светлее" и {{cssxref("background-color")}} наложения `<div>` на `"rgba (0,0,0,0.5)"`.
+3.  Если имя класса не «тёмное», изменяет класс `<button>` на `"dark"`, его текстовое содержимое обратно на "Темнее" и {{cssxref("background-color")}} наложения `<div>` на `"rgba(0,0,0,0)"`.
 
-<p>Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.</p>
+Следующие строки служат основой для достижения изменений, указанных в пунктах 2 и 3 выше.
 
-<pre class="brush: js">btn.setAttribute('class', xxx);
+```js
+btn.setAttribute('class', xxx);
 btn.textContent = xxx;
-overlay.style.backgroundColor = xxx;</pre>
-
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+overlay.style.backgroundColor = xxx;
+```
 
-<ul>
- <li>Вам не нужно каким-либо образом редактировать HTML или CSS.</li>
-</ul>
+## Советы и подсказки
 
-<h2 id="Оценка">Оценка</h2>
+- Вам не нужно каким-либо образом редактировать HTML или CSS.
 
-<p>Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему <a href="https://discourse.mozilla.org/t/image-gallery-assessment/24687">обсуждения об этом упражнении</a> или в IRC-канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте упражнение - ничего не выиграть от обмана!</p>
+## Оценка
 
-<p>{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю/наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав тему [обсуждения об этом упражнении](https://discourse.mozilla.org/t/image-gallery-assessment/24687) или в IRC-канале [#mdn](irc://irc.mozilla.org/mdn) в [Mozilla IRC](https://wiki.mozilla.org/IRC). Сначала попробуйте упражнение - ничего не выиграть от обмана!
 
-<p> </p>
+{{PreviousMenu("Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в вашем коде — условные конструкции</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — Переиспользуемые блоки кода</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою собственную функцию</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемое значение функции</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F">Введение в события</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery">Создание галереи</a></li>
-</ul>
+- [Принятие решений в вашем коде — условные конструкции](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Зацикливание кода](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [Функции — Переиспользуемые блоки кода](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Создайте свою собственную функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [Возвращаемое значение функции](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Введение в события](/ru/docs/Learn/JavaScript/Building_blocks/%D0%A1%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F)
+- [Создание галереи](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/ru/learn/javascript/building_blocks/index.md b/files/ru/learn/javascript/building_blocks/index.md
index f52cfbaf704df2..0ecc5d8f901413 100644
--- a/files/ru/learn/javascript/building_blocks/index.md
+++ b/files/ru/learn/javascript/building_blocks/index.md
@@ -22,40 +22,34 @@ tags:
   - циклы
 translation_of: Learn/JavaScript/Building_blocks
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">В данном разделе мы продолжим знакомство с ключевыми основами JavaScript, обратим внимание на часто используемые приёмы программирования, такие как условные выражения, циклы, функции и события. Все они уже встречались вам ранее в данном курсе, но только поверхностно, далее они будут рассмотрены подробнее.</p>
+В данном разделе мы продолжим знакомство с ключевыми основами JavaScript, обратим внимание на часто используемые приёмы программирования, такие как условные выражения, циклы, функции и события. Все они уже встречались вам ранее в данном курсе, но только поверхностно, далее они будут рассмотрены подробнее.
 
-<h2 id="Предварительное_условие">Предварительное условие</h2>
+## Предварительное условие
 
-<p>До начала изучения следующего раздела вам нужно тщательно ознакомиться с основами <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> и <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a>, так же обязательно прочтите курс "<a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8">Первые шаги в JavaScript</a>".</p>
+До начала изучения следующего раздела вам нужно тщательно ознакомиться с основами [HTML](/ru/docs/Learn/HTML/Introduction_to_HTML) и [CSS](/ru/docs/Learn/CSS/Introduction_to_CSS), так же обязательно прочтите курс "[Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8)".
 
-<div class="note">
-<p><strong>Примечание</strong>: если устройство на котором вы изучаете данный курс не позволяет создавать/сохранять файлы, в большинстве случаев примеры кода могут быть запущены в таких онлайн приложениях как <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** если устройство на котором вы изучаете данный курс не позволяет создавать/сохранять файлы, в большинстве случаев примеры кода могут быть запущены в таких онлайн приложениях как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в вашем коде — условные конструкции</a></dt>
- <dd>В любом языке программирования необходимо принимать решения и совершать действия в зависимости от полученных в процессе исполнения программы или введённых пользователем данных. Например, игра должна завершиться, когда число жизней персонажа игрока достигает нуля. В приложении для прогноза погоды отображается картинка с восходящим солнцем, если смотреть утром, со звёздами и луной — ночью. В данной статье исследуется работа условных конструкций в JavaScript.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></dt>
- <dd>Иногда требуется, чтобы действие исполнялось несколько раз подряд. Например, при просмотре списка имён. В программировании для данной цели успешно применяются циклы.  Здесь мы познакомимся с использованием циклов в JavaScript.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — блоки кода используемые многократно</a></dt>
- <dd>Другая необходимая концепция в программировании это <strong>функции</strong>. <strong>Функции</strong> позволяют сохранить часть кода для решения определённой задачи в определённом блоке, и затем вызывать этот код, тогда, когда это тебе необходимо при помощи короткой команды — это намного лучше, чем писать один и тот же код несколько раз. В статье будут рассмотрена фундаментальная концепция функции: основной синтаксис, как вызывать и как определять функции,  области видимости и параметры.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создай свою функцию</a></dt>
- <dd>В отличие от большинства предыдущих статей,  рассматривающих только теорию, эта статья даёт практический опыт. Здесь вы получите практику создания собственных функций. На ряду с возможностями, мы также объясним дополнительные полезные подробности, связанные с функциями.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Функции возвращают значения</a></dt>
- <dd>Есть одно из существенных понятий для нас, представленное в этом курсе, которое достойно пристального внимания — возврат значений функции. Некоторые функции не возвращают значений после завершения,  но другие делают это. Главное понять, что это за значения, как использовать их в вашем коде, и как заставить Вашу собственную функцию возвратить необходимые значения. </dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks/События">Введение в события</a></dt>
- <dd>События — это действия или явления, которые происходят в системе во время программирования, о которых система сообщает, и, при желании, на которые можно ответить. Например, когда пользователь кликает на кнопку на странице, возможно вы захотите вывести на экран блок с информацией, как ответ на это событие. В последней статье мы обсудим важные концепции, связанные с событиями, и увидим, как они работают в браузерах.</dd>
-</dl>
+- [Принятие решений в вашем коде — условные конструкции](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+  - : В любом языке программирования необходимо принимать решения и совершать действия в зависимости от полученных в процессе исполнения программы или введённых пользователем данных. Например, игра должна завершиться, когда число жизней персонажа игрока достигает нуля. В приложении для прогноза погоды отображается картинка с восходящим солнцем, если смотреть утром, со звёздами и луной — ночью. В данной статье исследуется работа условных конструкций в JavaScript.
+- [Зацикливание кода](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+  - : Иногда требуется, чтобы действие исполнялось несколько раз подряд. Например, при просмотре списка имён. В программировании для данной цели успешно применяются циклы. Здесь мы познакомимся с использованием циклов в JavaScript.
+- [Функции — блоки кода используемые многократно](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+  - : Другая необходимая концепция в программировании это **функции**. **Функции** позволяют сохранить часть кода для решения определённой задачи в определённом блоке, и затем вызывать этот код, тогда, когда это тебе необходимо при помощи короткой команды — это намного лучше, чем писать один и тот же код несколько раз. В статье будут рассмотрена фундаментальная концепция функции: основной синтаксис, как вызывать и как определять функции, области видимости и параметры.
+- [Создай свою функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+  - : В отличие от большинства предыдущих статей, рассматривающих только теорию, эта статья даёт практический опыт. Здесь вы получите практику создания собственных функций. На ряду с возможностями, мы также объясним дополнительные полезные подробности, связанные с функциями.
+- [Функции возвращают значения](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+  - : Есть одно из существенных понятий для нас, представленное в этом курсе, которое достойно пристального внимания — возврат значений функции. Некоторые функции не возвращают значений после завершения, но другие делают это. Главное понять, что это за значения, как использовать их в вашем коде, и как заставить Вашу собственную функцию возвратить необходимые значения.
+- [Введение в события](/ru/docs/Learn/JavaScript/Building_blocks/События)
+  - : События — это действия или явления, которые происходят в системе во время программирования, о которых система сообщает, и, при желании, на которые можно ответить. Например, когда пользователь кликает на кнопку на странице, возможно вы захотите вывести на экран блок с информацией, как ответ на это событие. В последней статье мы обсудим важные концепции, связанные с событиями, и увидим, как они работают в браузерах.
 
-<h2 id="Проверка_знаний">Проверка знаний</h2>
+## Проверка знаний
 
-<p>Следующая оценка проверит ваше понимание основ JavaScript, описанных в данном руководстве.</p>
+Следующая оценка проверит ваше понимание основ JavaScript, описанных в данном руководстве.
 
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Фотогалерея</a></dt>
- <dd>Теперь, когда мы рассмотрели основные блоки JavaScript, мы проверим твои знания о циклах, функциях, регулярных выражениях и событиях, создав довольно общий элемент, который вы увидите на многих сайтах - галерея изображений, работающей с помощью JavaScript.</dd>
-</dl>
+- [Фотогалерея](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
+  - : Теперь, когда мы рассмотрели основные блоки JavaScript, мы проверим твои знания о циклах, функциях, регулярных выражениях и событиях, создав довольно общий элемент, который вы увидите на многих сайтах - галерея изображений, работающей с помощью JavaScript.
diff --git a/files/ru/learn/javascript/building_blocks/looping_code/index.md b/files/ru/learn/javascript/building_blocks/looping_code/index.md
index 94ba7ffb013cb6..9c8161bb296d4e 100644
--- a/files/ru/learn/javascript/building_blocks/looping_code/index.md
+++ b/files/ru/learn/javascript/building_blocks/looping_code/index.md
@@ -3,45 +3,32 @@ title: Зацикливание кода
 slug: Learn/JavaScript/Building_blocks/Looping_code
 translation_of: Learn/JavaScript/Building_blocks/Looping_code
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</div>
+Языки программирования очень полезны для быстрой реализации повторяющихся задач. От базовых числовых операций до любой другой ситуации, когда у вас есть много похожих операций, которые нужно выполнить. В этой статье мы рассмотрим структуры циклов, доступные в JavaScript, которые можно использовать для этих целей.
 
-<p class="summary">Языки программирования очень полезны для быстрой реализации повторяющихся задач. От базовых числовых операций до любой другой ситуации, когда у вас есть много похожих операций, которые нужно выполнить. В этой статье мы рассмотрим структуры циклов, доступные в JavaScript, которые можно использовать для этих целей.</p>
+| Требования: | Базовые значения компьютерной системы и базовое понимание HTML и CSS, [JavaScript первые шаги](/ru/docs/Learn/JavaScript/First_steps). |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понять как работают циклы в JavaScript.                                                                                                |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Базовые значения компьютерной системы и базовое понимание HTML и CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript первые шаги</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять как работают циклы в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Циклы в коде
 
-<h2 id="Циклы_в_коде">Циклы в коде</h2>
+Циклы являются важной концепцией в программировании. Их использование основано на повторении одного и того же, что в программировании называется **итерацией**.
 
-<p>Циклы являются важной концепцией в программировании. Их использование основано на повторении одного и того же, что в программировании называется <strong>итерацией</strong>.</p>
+Давайте рассмотрим работу фермера, который следит за тем, чтобы у него было достаточно еды, чтобы кормить всю свою семью в течении недели. Его работу можно представить в виде цикла:
 
-<p>Давайте рассмотрим работу фермера, который следит за тем, чтобы у него было достаточно еды, чтобы кормить всю свою семью в течении недели. Его работу можно представить в виде цикла:</p>
+![](https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png)
 
-<p><br>
- <img alt="" src="https://mdn.mozillademos.org/files/13755/loop_js-02-farm.png" style="display: block; margin: 0 auto;"></p>
+Цикл обычно составляет одну или несколько из следующих функций:
 
-<p>Цикл обычно составляет одну или несколько из следующих функций:</p>
+- **Счётчик**, который инициализируется с определённого значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")
+- **Условие выхода** — критерий, при котором цикл останавливается, — обычно наступает, когда цикл достигает определённого значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.
+- **Итератор** постепенно увеличивает счётчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.
 
-<ul>
- <li> <strong>Счётчик</strong>, который инициализируется с определённого значения — начальной точки цикла (На рисунке выше первый этап: "у меня нет еды (i have no food)")</li>
- <li><strong>Условие выхода </strong>— критерий, при котором цикл останавливается, — обычно наступает, когда цикл достигает определённого значения. Это иллюстрируется выше словами "Достаточно ли у меня еды? (Do I have enough food?)". Предположим, фермеру нужно 10 порций еды, чтобы прокормить семью.</li>
- <li><strong>Итератор </strong>постепенно увеличивает счётчик на некоторое значение на каждом шаге цикла, пока не достигнуто условия выхода. Мы явно не показали это в изображении, но если предположить что фермер собирает две порции еды в час, то после каждого часа, количество еды, которое у него имеется, увеличивается на две порции, и он проверяет достаточно ли у него еды сейчас. Если у него собралось 10 порций (условие выхода), он может остановить сбор и вернуться домой.</li>
-</ul>
+В [псевдокоде](/ru/docs/Glossary/Pseudocode) это будет выглядеть следующим образом:
 
-<p>В <a href="/ru/docs/Glossary/Pseudocode">псевдокоде</a> это будет выглядеть следующим образом:</p>
-
-<pre>loop(food = 0; foodNeeded = 10) {
+```
+loop(food = 0; foodNeeded = 10) {
   if (food = foodNeeded) {
     exit loop;
     // У нас достаточно еды, пора домой
@@ -49,27 +36,26 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
     food += 2; // Прошёл час, количество еды увеличилось на 2
     // переход на следующую итерацию цикла.
   }
-}</pre>
-
-<p>Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает ещё 2 порции и снова переходит к проверке.</p>
+}
+```
 
-<h3 id="Зачем_это_нужно">Зачем это нужно?</h3>
+Таким образом, необходимое количество еды устанавливается равным 10, а изначально фермер не имеет ни одной порции, т.е. начало равно 0. На каждой итерации цикла проверяем, соответствует ли собранное количество еды, с тем количеством, которое ему необходимо. Если это так, можно выйти из цикла, если нет, фермер собирает ещё 2 порции и снова переходит к проверке.
 
-<p>Итак вы разобрались, как работают циклы. Но, вероятно, думаете: "Хорошо, но как это мне поможет писать код на JavaScript". Как мы писали ранее, <strong>циклы постоянно повторяют одно и тоже действие</strong>, что отлично подходит для <strong>быстрого выполнения повторяющихся задач</strong>.</p>
+### Зачем это нужно?
 
-<p>Часто код будет немного отличаться на каждой последующей итерации цикла. Это означает, что вы можете выполнять задачи, которые похожи, но у них есть некоторые различия. Например, если вам нужно выполнить много вычислений, немного отличающихся на каждой итерации.</p>
+Итак вы разобрались, как работают циклы. Но, вероятно, думаете: "Хорошо, но как это мне поможет писать код на JavaScript". Как мы писали ранее, **циклы постоянно повторяют одно и тоже действие**, что отлично подходит для **быстрого выполнения повторяющихся задач**.
 
-<p>На следующем примере попробуем показать, почему циклы так полезны. Предположим мы хотели нарисовать 100 случайных кругов на элементе {{htmlelement("canvas")}}. Нажмите кнопку "Обновить", чтобы снова и снова запускать пример и увидеть, что круги рисуются случайным образом.</p>
+Часто код будет немного отличаться на каждой последующей итерации цикла. Это означает, что вы можете выполнять задачи, которые похожи, но у них есть некоторые различия. Например, если вам нужно выполнить много вычислений, немного отличающихся на каждой итерации.
 
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
+На следующем примере попробуем показать, почему циклы так полезны. Предположим мы хотели нарисовать 100 случайных кругов на элементе {{htmlelement("canvas")}}. Нажмите кнопку "Обновить", чтобы снова и снова запускать пример и увидеть, что круги рисуются случайным образом.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Random canvas circles&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Random canvas circles</title>
+    <style>
       html {
         width: 100%;
         height: inherit;
@@ -89,16 +75,16 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
         top: 5px;
         left: 5px;
       }
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
-  &lt;button&gt;Обновить&lt;/button&gt;
+  <button>Обновить</button>
 
-  &lt;canvas&gt;&lt;/canvas&gt;
+  <canvas></canvas>
 
 
-    &lt;script&gt;
+    <script>
     var btn = document.querySelector('button');
     var canvas = document.querySelector('canvas');
     var ctx = canvas.getContext('2d');
@@ -115,7 +101,7 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
 
     function draw() {
       ctx.clearRect(0,0,WIDTH,HEIGHT);
-      for (var i = 0; i &lt; 100; i++) {
+      for (var i = 0; i < 100; i++) {
         ctx.beginPath();
         ctx.fillStyle = 'rgba(255,0,0,0.5)';
         ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
@@ -125,181 +111,172 @@ translation_of: Learn/JavaScript/Building_blocks/Looping_code
 
     btn.addEventListener('click',draw);
 
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_code', '100%', 400) }}</p>
+{{ EmbedLiveSample('Hidden_code', '100%', 400) }}
 
-<p>Вам необязательно понимать все части кода, но давайте посмотрим на место, где рисуются 100 кругов.</p>
+Вам необязательно понимать все части кода, но давайте посмотрим на место, где рисуются 100 кругов.
 
-<pre class="brush: js">for (var i = 0; i &lt; 100; i++) {
+```js
+for (var i = 0; i < 100; i++) {
   ctx.beginPath();
   ctx.fillStyle = 'rgba(255,0,0,0.5)';
   ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
   ctx.fill();
-}</pre>
+}
+```
 
-<ul>
- <li><code>random()</code>, описанная в коде, возвращает случайное число между <code>0</code> и <code>x-1</code>.</li>
- <li><code>WIDTH</code> и <code>HEIGHT</code> — это высота и ширина  окна браузера.</li>
-</ul>
+- `random()`, описанная в коде, возвращает случайное число между `0` и `x-1`.
+- `WIDTH` и `HEIGHT` — это высота и ширина окна браузера.
 
-<p>Вы должны понять основную идею: мы используем цикл для запуска 100 итераций этого кода, каждая из которых рисует круг в случайном месте в окне. Количество кода было бы одинаковым, если бы нам нужно было нарисовать 10, 100 или 1000 кругов, поменяется лишь одно число.</p>
+Вы должны понять основную идею: мы используем цикл для запуска 100 итераций этого кода, каждая из которых рисует круг в случайном месте в окне. Количество кода было бы одинаковым, если бы нам нужно было нарисовать 10, 100 или 1000 кругов, поменяется лишь одно число.
 
-<p>Если бы мы не использовали циклы, нам бы пришлось повторить следующий код, для отрисовки каждого круга:</p>
+Если бы мы не использовали циклы, нам бы пришлось повторить следующий код, для отрисовки каждого круга:
 
-<pre class="brush: js">ctx.beginPath();
+```js
+ctx.beginPath();
 ctx.fillStyle = 'rgba(255,0,0,0.5)';
 ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
-ctx.fill();</pre>
+ctx.fill();
+```
 
-<p>Это множество лишнего кода очень усложнило бы поддержку кода в будущем, т.к. если бы вам захотелось что-то изменить, в каждой итерации цикла, пришлось бы изменять все части кода по отдельности. А ещё это усложняет поиск ошибок, т.к. если вдруг вы совершите логическую ошибку при описании одной из итераций, придётся потратить много времени на её поиски.</p>
+Это множество лишнего кода очень усложнило бы поддержку кода в будущем, т.к. если бы вам захотелось что-то изменить, в каждой итерации цикла, пришлось бы изменять все части кода по отдельности. А ещё это усложняет поиск ошибок, т.к. если вдруг вы совершите логическую ошибку при описании одной из итераций, придётся потратить много времени на её поиски.
 
-<h2 id="Правила_записи_цикла">Правила записи цикла</h2>
+## Правила записи цикла
 
-<p>Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for</a>. Он имеет следующий синтаксис:</p>
+Рассмотрим некоторые конкретные конструкции циклов. Первый вариант, который вы будете использовать чаще всего, это цикл [for](/ru/docs/Web/JavaScript/Reference/Statements/for). Он имеет следующий синтаксис:
 
-<pre>for (initializer; exit-condition; final-expression) {
+```
+for (initializer; exit-condition; final-expression) {
   // код для выполнения
-}</pre>
+}
+```
+
+Тут имеем:
 
-<p>Тут имеем:</p>
+1.  Ключевое слово [for](ru/docs/Web/JavaScript/Reference/Statements/for), за которым следуют круглые скобки.
+2.  В круглых скобках у нас есть три части, разделённые точкой с запятой:
 
-<ol>
- <li>Ключевое слово <a href="ru/docs/Web/JavaScript/Reference/Statements/for">for</a>, за которым следуют круглые скобки.</li>
- <li>В круглых скобках у нас есть три части, разделённые точкой с запятой:
-  <ol>
-   <li><strong>Инициализатор</strong> — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Её также называет <strong>счётчиком</strong>.</li>
-   <li><strong>Условие выхода</strong> — как упоминалось ранее, определяет, когда цикл должен остановиться. Обычно это выражение с оператором сравнения проверяющим, выполнено ли условие выхода.</li>
-   <li><strong>Окончательное выражение</strong> — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной <strong>счётчика</strong>, чтобы приблизить её значение к условию выхода.</li>
-  </ol>
- </li>
- <li>Фигурные скобки, содержащие блок кода. Этот код будет запускаться на каждой итерации цикла.</li>
-</ol>
+    1.  **Инициализатор** — обычно это переменная численного типа, которая увеличивается каждую итерацию, чтобы посчитать количество шагов цикла. Её также называет **счётчиком**.
+    2.  **Условие выхода** — как упоминалось ранее, определяет, когда цикл должен остановиться. Обычно это выражение с оператором сравнения проверяющим, выполнено ли условие выхода.
+    3.  **Окончательное выражение** — вычисляется (или выполняется) каждый раз, когда цикл проходит полную итерацию. Обычно оно служит для увеличения (или уменьшения) переменной **счётчика**, чтобы приблизить её значение к условию выхода.
 
-<p>Посмотрим на пример, чтобы разобраться в этом более детально.</p>
+3.  Фигурные скобки, содержащие блок кода. Этот код будет запускаться на каждой итерации цикла.
 
-<pre class="brush: js">var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин'];
+Посмотрим на пример, чтобы разобраться в этом более детально.
+
+```js
+var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин'];
 var info = 'Моих кошек зовут ';
 var para = document.querySelector('p');
 
-for (var i = 0; i &lt; cats.length; i++) {
+for (var i = 0; i < cats.length; i++) {
   info += cats[i] + ', ';
 }
 
-para.textContent = info;</pre>
-
-<p>Этот блок кода будет иметь следующий результат:</p>
+para.textContent = info;
+```
 
-<div class="hidden">
-<h6 id="Hidden_code_2">Hidden code 2</h6>
+Этот блок кода будет иметь следующий результат:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Пример цикла For&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Пример цикла For</title>
+    <style>
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
-  &lt;p&gt;&lt;/p&gt;
+  <p></p>
 
 
-    &lt;script&gt;
+    <script>
     var cats = ['Билл', 'Макс', 'Пикси', 'Алиса', 'Жасмин'];
     var info = 'Моих кошек зовут: ';
     var para = document.querySelector('p');
 
-    for (var i = 0; i &lt; cats.length; i++) {
+    for (var i = 0; i < cats.length; i++) {
       info += cats[i] + ', ';
     }
 
     para.textContent = info;
 
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}</p>
+{{ EmbedLiveSample('Hidden_code_2', '100%', 60) }}
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот  <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html">пример на GitHub</a> или  <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html">посмотреть онлайн</a>.</p>
-</div>
+> **Примечание:** вы можете найти этот [пример на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for.html) или [посмотреть онлайн](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for.html).
 
-<p>Здесь показан цикл, используемый для перебора элементов в массиве и выполнения определённых действий с каждым из них — очень распространённый шаблон в JavaScript<br>
- Подробнее:</p>
-
-<ol>
- <li>Итератор, <code>i</code>, начинается с <code>0</code> (<code>var i = 0</code>).</li>
- <li>Цикл запускается, пока значение итератора не будет больше длины массива кошек. Это важно - условие выхода показывает когда именно цикл должен работать, а когда нужно выйти из цикла. Поэтому в случае, пока <code>i &lt; cats.lenght</code> по-прежнему возвращает <code>true</code>, цикл будет работать.</li>
- <li>Внутри тела цикла мы соединяем текущий элемент цикла (<code>cats[i]</code> это <code>cats</code>[независимо от того, чем <code>i</code> является в данный момент]) с запятой и пробелом. Итак:
-  <ol>
-   <li>В начале, <code>i = 0</code>, поэтому <code>cats[0] + ', '</code> соединятся в ("Билл, ").</li>
-   <li>На втором шаге, <code>i = 1</code>, поэтому <code>cats[1] + ', '</code> соединятся в ("Макс, ")</li>
-   <li>И так далее. В конце каждого цикла <code>i</code> увеличится на 1 (<code>i++</code>) , и процесс будет начинаться заново.</li>
-  </ol>
- </li>
- <li>Когда <code>i</code> достигнет величины <code>cats.length</code> цикл остановится и браузер перейдёт к следующему фрагменту кода после цикла.</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание</strong>: Мы добавили условия выхода <code>i &lt; cats.length</code>, а не <code>i &lt;= cats.length</code>, потому что компьютеры считают с  0,  а не с 1 — в начале <code>i = 0</code> и увеличивается до <code>i = 4</code> (индекс последнего элемента массива). <code>cats.length</code> возвращает 5, т.к. в массиве 5 элементов, но нам не нужно увеличивать до <code>i = 5</code>, т.к. <code>cats[5] </code>вернёт <code>undefined</code> (в массиве нет элемента с индексом 5). Таким образом мы хотим придти к результату на 1 меньше, поэтому <code>i &lt; cats.length</code>, не одно и тоже что <code>i &lt;= cats.length</code>.</p>
-</div>
+Здесь показан цикл, используемый для перебора элементов в массиве и выполнения определённых действий с каждым из них — очень распространённый шаблон в JavaScript
+Подробнее:
 
-<div class="note">
-<p><strong>Примечание</strong>: Стандартной ошибкой с условием выхода является использование условия "равный" (<code>===</code>) ,а не "меньше или равно" (<code>&lt;=</code>). Если нам нужно увеличить счётчик до <code>i = 5</code>, условие выхода должно быть <code>i &lt;= cats.length</code>. Если мы установим <code>i === cats.length</code>, цикл не начнётся, т.к. <code>i</code> не равно <code>5</code> на самой первой итерации, поэтому цикл остановится сразу.</p>
-</div>
+1.  Итератор, `i`, начинается с `0` (`var i = 0`).
+2.  Цикл запускается, пока значение итератора не будет больше длины массива кошек. Это важно - условие выхода показывает когда именно цикл должен работать, а когда нужно выйти из цикла. Поэтому в случае, пока `i < cats.lenght` по-прежнему возвращает `true`, цикл будет работать.
+3.  Внутри тела цикла мы соединяем текущий элемент цикла (`cats[i]` это `cats`\[независимо от того, чем `i` является в данный момент]) с запятой и пробелом. Итак:
+
+    1.  В начале, `i = 0`, поэтому `cats[0] + ', '` соединятся в ("Билл, ").
+    2.  На втором шаге, `i = 1`, поэтому `cats[1] + ', '` соединятся в ("Макс, ")
+    3.  И так далее. В конце каждого цикла `i` увеличится на 1 (`i++`) , и процесс будет начинаться заново.
 
-<p>Остаётся одна небольшая проблема: выходная строка сформирована не совсем корректно:</p>
+4.  Когда `i` достигнет величины `cats.length` цикл остановится и браузер перейдёт к следующему фрагменту кода после цикла.
 
-<blockquote>
-<p>Моих кошек зовут  Билл, Макс, Пикси, Алиса, Жасмин,</p>
-</blockquote>
+> **Примечание:** Мы добавили условия выхода `i < cats.length`, а не `i <= cats.length`, потому что компьютеры считают с 0, а не с 1 — в начале `i = 0` и увеличивается до `i = 4` (индекс последнего элемента массива). `cats.length` возвращает 5, т.к. в массиве 5 элементов, но нам не нужно увеличивать до `i = 5`, т.к. `cats[5] `вернёт `undefined` (в массиве нет элемента с индексом 5). Таким образом мы хотим придти к результату на 1 меньше, поэтому `i < cats.length`, не одно и тоже что `i <= cats.length`.
 
-<p>В идеале мы хотим изменить конкатенацию на последней итерации цикла так, чтобы у нас не было запятой в конце предложения. Для этого нужно добавить условное выражение внутрь цикла <code>for</code> для обработки этого особого случая:</p>
+> **Примечание:** Стандартной ошибкой с условием выхода является использование условия "равный" (`===`) ,а не "меньше или равно" (`<=`). Если нам нужно увеличить счётчик до `i = 5`, условие выхода должно быть `i <= cats.length`. Если мы установим `i === cats.length`, цикл не начнётся, т.к. `i` не равно `5` на самой первой итерации, поэтому цикл остановится сразу.
 
-<pre class="brush: js">for (var i = 0; i &lt; cats.length; i++) {
+Остаётся одна небольшая проблема: выходная строка сформирована не совсем корректно:
+
+> Моих кошек зовут Билл, Макс, Пикси, Алиса, Жасмин,
+
+В идеале мы хотим изменить конкатенацию на последней итерации цикла так, чтобы у нас не было запятой в конце предложения. Для этого нужно добавить условное выражение внутрь цикла `for` для обработки этого особого случая:
+
+```js
+for (var i = 0; i < cats.length; i++) {
   if (i === cats.length - 1) {
     info += 'и ' + cats[i] + '.';
   } else {
     info += cats[i] + ', ';
   }
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете найти этот <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html">пример на GitHub</a> или <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html">посмотреть онлайн</a>.</p>
-</div>
+> **Примечание:** вы можете найти этот [пример на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/basic-for-improved.html) или [посмотреть онлайн](http://mdn.github.io/learning-area/javascript/building-blocks/loops/basic-for-improved.html).
 
-<div class="warning">
-<p><strong>Важно</strong>: С циклом <strong>for</strong>, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется <strong>бесконечным циклом</strong>.</p>
-</div>
+> **Предупреждение:** **Важно**: С циклом **for**, также как и с другими циклами, вы должны убедиться что инициализатор (счётчик) и окончательное выражение построены так, что они достигнут условия выхода. Если этого не произойдёт, то цикл будет продолжаться вечно. В итоге браузер или заставит его остановиться, или выдаст ошибку. Это называется **бесконечным циклом**.
 
-<h2 id="Выход_из_цикла_с_помощью_break">Выход из цикла с помощью break</h2>
+## Выход из цикла с помощью break
 
-<p>Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a> . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор <a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Оператор_switch">switch</a>: когда происходит событие, соответствующее условию, прописанному ключевым словом <code>case</code> внутри оператора <code>switch</code>, условие break моментально выходит из конструкции <code>switch</code> и запускает следующий после неё код.</p>
+Если вы хотите выйти из цикла до завершения всех итераций, вы можете использовать оператор [break](/ru/docs/Web/JavaScript/Reference/Statements/break) . Мы уже встречались с ним в предыдущей статье, когда рассматривали оператор [switch](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Оператор_switch): когда происходит событие, соответствующее условию, прописанному ключевым словом `case` внутри оператора `switch`, условие break моментально выходит из конструкции `switch` и запускает следующий после неё код.
 
-<p>Тоже самое и с циклами — условие <code>break</code> моментально закончит цикл и заставит браузер запустить следующий после цикла код.</p>
+Тоже самое и с циклами — условие `break` моментально закончит цикл и заставит браузер запустить следующий после цикла код.
 
-<p>Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.<br>
- Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:</p>
+Предположим, в массиве данных мы хотим найти имена контактов и телефонные номера, а вернуть только номер, который мы нашли.
+Начнём с разметки HTML: поле {{htmlelement("input")}} позволяет нам ввести имя для поиска, элемент (кнопка) {{htmlelement("button")}} для подтверждения поиска, и элемент {{htmlelement("p")}} для отображения результата:
 
-<pre class="brush: html">&lt;label for="search"&gt;Поиск по имени: &lt;/label&gt;
-&lt;input id="search" type="text"&gt;
-&lt;button&gt;Поиск&lt;/button&gt;
+```html
+<label for="search">Поиск по имени: </label>
+<input id="search" type="text">
+<button>Поиск</button>
 
-&lt;p&gt;&lt;/p&gt;</pre>
+<p></p>
+```
 
-<p>Теперь в JavaScript:</p>
+Теперь в JavaScript:
 
-<pre class="brush: js">var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975'];
+```js
+var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975'];
 var para = document.querySelector('p');
 var input = document.querySelector('input');
 var btn = document.querySelector('button');
@@ -308,7 +285,7 @@ btn.addEventListener('click', function() {
   var searchName = input.value;
   input.value = '';
   input.focus();
-  for (var i = 0; i &lt; contacts.length; i++) {
+  for (var i = 0; i < contacts.length; i++) {
     var splitContact = contacts[i].split(':');
     if (splitContact[0] === searchName) {
       para.textContent = splitContact[0] + ', тел.: ' + splitContact[1] + '.';
@@ -317,30 +294,29 @@ btn.addEventListener('click', function() {
       para.textContent = 'Контакт не найден.';
     }
   }
-});</pre>
-
-<div class="hidden">
-<h6 id="Hidden_code_3">Hidden code 3</h6>
+});
+```
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Simple contact search example&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple contact search example</title>
+    <style>
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
-  &lt;label for="search"&gt;Найти имя контакта: &lt;/label&gt;
-  &lt;input id="search" type="text"&gt;
-  &lt;button&gt;Поиск&lt;/button&gt;
+  <label for="search">Найти имя контакта: </label>
+  <input id="search" type="text">
+  <button>Поиск</button>
 
-  &lt;p&gt;&lt;/p&gt;
+  <p></p>
 
 
-    &lt;script&gt;
+    <script>
     var contacts = ['Григорий:2232322', 'Марина:3453456', 'Василий:7654322', 'Наталья:9998769', 'Диана:9384975'];
     var para = document.querySelector('p');
     var input = document.querySelector('input');
@@ -350,7 +326,7 @@ btn.addEventListener('click', function() {
       var searchName = input.value;
       input.value = '';
       input.focus();
-      for (var i = 0; i &lt; contacts.length; i++) {
+      for (var i = 0; i < contacts.length; i++) {
         var splitContact = contacts[i].split(':');
         if (splitContact[0] === searchName) {
           para.textContent = splitContact[0] + ', тел.: ' + splitContact[1] + '.';
@@ -359,77 +335,70 @@ btn.addEventListener('click', function() {
               para.textContent = 'Контакт не найден.';
         }
     });
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}</p>
-
-<ol>
- <li>Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.</li>
- <li>Далее мы применяем обработчик события кнопки (<code>btn</code>), чтобы при её нажатии запускался код для поиска и отображения результатов.</li>
- <li>Мы сохраняем значение, введённое в текстовое поле, в переменную  <code>searchName</code>, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.</li>
- <li>Теперь перейдём к интересующей нас части — к циклу <code>for</code>:
-  <ol>
-   <li>Мы начали счётчик с <code>0</code>, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент <code>i</code> увеличиваем на 1 после каждой итерации цикла.</li>
-   <li>Внутри цикла мы сначала разделяем текущий контакт (<code>contacts[i]</code>) на символе двоеточия, и сохраняем полученные два значения в массиве с  названием <code>splitContact</code>.</li>
-   <li>Затем мы используем условный оператор, чтобы проверить, равно ли <code>splitContact[0]</code> (имя контакта) введённому <code>searchName</code>. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем <code>break</code> для завершения цикла.</li>
-  </ol>
- </li>
- <li>
-  <p>После <a href="https://ru.wikipedia.org/wiki/%D0%98%D1%82%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)">итерации</a> <code>(contacts.length-1)</code>, если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.</p>
- </li>
-</ol>
-
-<div class="note">
-<p>Примечание: вы можете посмотреть исходный код на <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html">GitHub</a>  или запустить его (also <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html">see it running live</a>).</p>
-</div>
+{{ EmbedLiveSample('Hidden_code_3', '100%', 100) }}
+
+1.  Прежде всего у нас определены некоторые переменные: у нас есть массив с контактной информацией, каждый элемент которого это строка, содержащая в себе имя и номер телефона, которые разделены двоеточием.
+2.  Далее мы применяем обработчик события кнопки (`btn`), чтобы при её нажатии запускался код для поиска и отображения результатов.
+3.  Мы сохраняем значение, введённое в текстовое поле, в переменную `searchName`, затем очищаем введённый текст и снова фокусируемся на текстовом поле для нового поиска.
+4.  Теперь перейдём к интересующей нас части — к циклу `for`:
+
+    1.  Мы начали счётчик с `0`, запускаем цикл до тех пор, пока счётчик всё ещё меньше, чем contacts.length, а инкремент `i` увеличиваем на 1 после каждой итерации цикла.
+    2.  Внутри цикла мы сначала разделяем текущий контакт (`contacts[i]`) на символе двоеточия, и сохраняем полученные два значения в массиве с названием `splitContact`.
+    3.  Затем мы используем условный оператор, чтобы проверить, равно ли `splitContact[0]` (имя контакта) введённому `searchName`. Если это так, мы выводим строку в абзац, чтобы сообщить, каков номер контакта, и используем `break` для завершения цикла.
+
+5.  После [итерации](<https://ru.wikipedia.org/wiki/%D0%98%D1%82%D0%B5%D1%80%D0%B0%D1%86%D0%B8%D1%8F_(%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F)>) `(contacts.length-1)`, если имя контакта не совпадает с введённым именем в поисковом запросе, для текста абзаца устанавливается: «Контакт не найден.», и цикл продолжает повторяться.
 
-<h2 id="Пропуск_итераций_с_продолжением">Пропуск итераций с продолжением</h2>
+> **Примечание:** Примечание: вы можете посмотреть исходный код на [GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/contact-search.html) или запустить его (also [see it running live](http://mdn.github.io/learning-area/javascript/building-blocks/loops/contact-search.html)).
 
-<p>Оператор <a href="/ru/docs/Web/JavaScript/Reference/Statements/continue">continue</a> работает аналогичным образом, как и <code>break</code>, но вместо полного выхода из цикла он переходит к следующей итерации цикла.</p>
+## Пропуск итераций с продолжением
 
-<p>Рассмотрим другой пример, в котором в качестве вводных данных принимается число, а возвращаются только числа, которые являются квадратами целых чисел.</p>
+Оператор [continue](/ru/docs/Web/JavaScript/Reference/Statements/continue) работает аналогичным образом, как и `break`, но вместо полного выхода из цикла он переходит к следующей итерации цикла.
 
-<p>Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода.  JavaScript в основном такой же, хотя сам цикл немного другой:</p>
+Рассмотрим другой пример, в котором в качестве вводных данных принимается число, а возвращаются только числа, которые являются квадратами целых чисел.
 
-<pre class="brush: js">var num = input.value;
+Код HTML в основном такой же, как и в предыдущем примере — простой ввод текста и абзац для вывода. JavaScript в основном такой же, хотя сам цикл немного другой:
 
-for (var i = 1; i &lt;= num; i++) {
+```js
+var num = input.value;
+
+for (var i = 1; i <= num; i++) {
   var sqRoot = Math.sqrt(i);
   if (Math.floor(sqRoot) !== sqRoot) {
     continue;
   }
 
   para.textContent += i + ' ';
-}</pre>
-
-<p>Вывод:</p>
+}
+```
 
-<div class="hidden">
-<h6 id="Hidden_code_4">Hidden code 4</h6>
+Вывод:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Генератор целочисленных квадратов&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Генератор целочисленных квадратов</title>
+    <style>
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
-  &lt;label for="number"&gt;Введите число: &lt;/label&gt;
-  &lt;input id="number" type="text"&gt;
-  &lt;button&gt;Генерация целочисленных квадратов&lt;/button&gt;
+  <label for="number">Введите число: </label>
+  <input id="number" type="text">
+  <button>Генерация целочисленных квадратов</button>
 
-  &lt;p&gt;Результат: &lt;/p&gt;
+  <p>Результат: </p>
 
 
-    &lt;script&gt;
+    <script>
     var para = document.querySelector('p');
     var input = document.querySelector('input');
     var btn = document.querySelector('button');
@@ -439,7 +408,7 @@ for (var i = 1; i &lt;= num; i++) {
       input.value = '';
       input.focus();
       para.textContent = 'Вы ввели: ' + num + '. Результат: ';
-      for (var i = 1; i &lt;= num; i++) {
+      for (var i = 1; i <= num; i++) {
         var sqRoot = Math.sqrt(i);
         if (Math.floor(sqRoot) !== sqRoot) {
           continue;
@@ -448,49 +417,48 @@ for (var i = 1; i &lt;= num; i++) {
         para.textContent += i + ' ';
       }
     });
-    &lt;/script&gt;
+    </script>
 
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
-</div>
+  </body>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}</p>
+{{ EmbedLiveSample('Hidden_code_4', '100%', 100) }}
 
-<ol>
- <li>В этом случае на входе должно быть число (<code>num</code>). Циклу <code>for</code> присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного <code>num</code>, а итератор добавляет 1 к счётчику каждый раз.</li>
- <li>Внутри цикла мы находим квадратный корень каждого числа с помощью <a href="/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt">Math.sqrt(i)</a>, а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что <code>Math.floor ()</code> делает с числом, которое передаёт).</li>
- <li>Если квадратный корень и округлённый вниз квадратный корень не равны друг другу <code>(! ==)</code>, значит квадратный корень не является целым числом, поэтому нас он не интересует.  В таком случае мы используем оператор <code>continue</code>, чтобы перейти к следующей итерации цикла без записи этого числа.</li>
- <li>Если квадратный корень <em>является целым числом</em>, мы пропускаем блок <code>if</code> полностью, поэтому оператор <code>continue</code> не выполняется; вместо этого объединяется текущее значение <code>i</code> с пробелом в конце содержимого абзаца.</li>
-</ol>
+1.  В этом случае на входе должно быть число (`num`). Циклу `for` присваивается счётчик, начинающийся с 1 (поскольку в данном случае нас не интересует 0), условие выхода, которое говорит, что цикл остановится, когда счётчик станет больше входного `num`, а итератор добавляет 1 к счётчику каждый раз.
+2.  Внутри цикла мы находим квадратный корень каждого числа с помощью [Math.sqrt(i)](/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/sqrt), а затем проверяем, является ли квадратный корень целым числом, проверяя, совпадает ли он с самим собой, когда он был округлён до ближайшего целого числа (это то, что `Math.floor ()` делает с числом, которое передаёт).
+3.  Если квадратный корень и округлённый вниз квадратный корень не равны друг другу `(! ==)`, значит квадратный корень не является целым числом, поэтому нас он не интересует. В таком случае мы используем оператор `continue`, чтобы перейти к следующей итерации цикла без записи этого числа.
+4.  Если квадратный корень _является целым числом_, мы пропускаем блок `if` полностью, поэтому оператор `continue` не выполняется; вместо этого объединяется текущее значение `i` с пробелом в конце содержимого абзаца.
 
-<div class="note">
-<p><strong>Примечание. </strong>Вы также можете просмотреть полный исходный код на<strong> </strong><a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html"> GitHub</a> (так же смотри <a href="https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html">этот код вживую</a>).</p>
-</div>
+> **Примечание:** **Примечание.** Вы также можете просмотреть полный исходный код на\*\* \*\*[GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/integer-squares.html) (так же смотри [этот код вживую](https://mdn.github.io/learning-area/javascript/building-blocks/loops/integer-squares.html)).
 
-<h2 id="Циклы_while_и_do...while">Циклы <code>while</code> и <code>do...while</code></h2>
+## Циклы `while` и `do...while`
 
-<p><code><strong>for</strong> </code>— <code>не единственный тип цикла, доступный в JavaScript.</code> На самом деле существует множество других типов циклов. И хотя сейчас не обязательно знать их все, стоит взглянуть на структуру нескольких других, чтобы вы могли распознать те же функции, но в работе немного по-другому.</p>
+`for `— `не единственный тип цикла, доступный в JavaScript.` На самом деле существует множество других типов циклов. И хотя сейчас не обязательно знать их все, стоит взглянуть на структуру нескольких других, чтобы вы могли распознать те же функции, но в работе немного по-другому.
 
-<p>Рассмотрим цикл <a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a>. Синтаксис этого цикла выглядит так:</p>
+Рассмотрим цикл [while](/ru/docs/Web/JavaScript/Reference/Statements/while). Синтаксис этого цикла выглядит так:
 
-<pre>initializer
+```
+initializer
 while (exit-condition) {
   // code to run
 
   final-expression
-}</pre>
+}
+```
 
-<p>Его действие очень похоже на цикл <code>for</code>, но переменная инициализатора устанавливается перед циклом, а заключительное выражение включается в цикл после запуска кода. Напомним, у цикла <code>for</code> эти два элемента заключены в круглых скобках. Здесь же после ключевого слова <code>while в круглых скобках заключено условие выхода из цикла.</code></p>
+Его действие очень похоже на цикл `for`, но переменная инициализатора устанавливается перед циклом, а заключительное выражение включается в цикл после запуска кода. Напомним, у цикла `for` эти два элемента заключены в круглых скобках. Здесь же после ключевого слова `while в круглых скобках заключено условие выхода из цикла.`
 
-<p>Здесь присутствуют те же три элемента и в том же порядке, что и в цикле <code>for</code>. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.</p>
+Здесь присутствуют те же три элемента и в том же порядке, что и в цикле `for`. Это важно, так как вам нужно определить инициализатор, прежде чем получится проверить, достиг ли цикл условия выхода.
 
-<p>Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.</p>
+Окончательное условие выполняется после выполнения кода внутри цикла (итерация завершена), и оно выполняется только в том случае, если условие выхода ещё не достигнуто.
 
-<p>Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла <code>while:</code></p>
+Посмотрим ещё раз пример со списком кошек с кодом переписанным под использование цикла `while:`
 
-<pre class="brush: js">var i = 0;
+```js
+var i = 0;
 
-while (i &lt; cats.length) {
+while (i < cats.length) {
   if (i === cats.length - 1) {
     info += 'and ' + cats[i] + '.';
   } else {
@@ -498,28 +466,30 @@ while (i &lt; cats.length) {
   }
 
   i++;
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Примечание: </strong>цикл все ещё работает так же, как и ожидалось - посмотрите, <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html">как он работает на GitHub</a> (также посмотрите <a href="https://github.com/ConstantineZz/javaScript/blob/master/while.html">полный исходный код</a>).</p>
-</div>
+> **Примечание:**цикл все ещё работает так же, как и ожидалось - посмотрите, [как он работает на GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/while.html) (также посмотрите [полный исходный код](https://github.com/ConstantineZz/javaScript/blob/master/while.html)).
 
-<p>Цикл<strong> <a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a></strong> представляет собой вариацию структуры цикла <code>while</code>:</p>
+Цикл** [do...while](/ru/docs/Web/JavaScript/Reference/Statements/do...while)** представляет собой вариацию структуры цикла `while`:
 
-<pre>initializer
+```
+initializer
 do {
   // code to run
 
   final-expression
-} while (exit-condition)</pre>
+} while (exit-condition)
+```
 
-<p>В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово <code>do</code> непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.</p>
+В этом случае инициализатор снова указывается прежде, чем цикл запускается. Ключевое слово `do` непосредственно предшествует фигурным скобкам, содержащим код для запуска и конечное выражение.
 
-<p>Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова <code>while</code>. В цикле <code>do...while</code> код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в <code>while</code> и <code>for</code> проверка идёт первой, поэтому код может быть не выполнен).</p>
+Различие состоит в том, что условие выхода идёт после всего остального, заключённое в скобки после ключевого слова `while`. В цикле `do...while` код внутри фигурных скобок всегда запускается один раз, прежде чем выполняется проверка, чтобы увидеть, должна ли она быть выполнена снова (в `while` и `for` проверка идёт первой, поэтому код может быть не выполнен).
 
-<p>Перепишем наш пример с кошками, чтобы использовать цикл <code>do...while</code>:</p>
+Перепишем наш пример с кошками, чтобы использовать цикл `do...while`:
 
-<pre class="brush: js">var i = 0;
+```js
+var i = 0;
 
 do {
   if (i === cats.length - 1) {
@@ -529,53 +499,44 @@ do {
   }
 
   i++;
-} while (i &lt; cats.length);</pre>
+} while (i < cats.length);
+```
 
-<div class="note">
-<p><strong>Примечание: </strong>И снова это работает так же, как и ожидалось - посмотрите, как он работает <a href="http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html">на GitHub</a> (также посмотрите полный <a href="https://github.com/ConstantineZz/javaScript/blob/master/do-while.html">исходный код</a>).</p>
-</div>
+> **Примечание:**И снова это работает так же, как и ожидалось - посмотрите, как он работает [на GitHub](http://mdn.github.io/learning-area/javascript/building-blocks/loops/do-while.html) (также посмотрите полный [исходный код](https://github.com/ConstantineZz/javaScript/blob/master/do-while.html)).
 
-<div class="warning">
-<p><strong>Замечание</strong>: Применяя циклы <code>while</code> and <code>do...while</code> , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется <em><s>доктор Стрэндж и Дормамму</s></em> <strong>бесконечным циклом</strong>. </p>
-</div>
+> **Предупреждение:** **Замечание**: Применяя циклы `while` and `do...while` , как и все циклы, убедитесь, что инициализатор повторяется так, чтобы он в конце концов достиг условия выхода. Если это не так, цикл будет продолжаться вечно, и либо браузер заставит его остановиться, либо произойдёт сбой. Это называется _~~доктор Стрэндж и Дормамму~~_ **бесконечным циклом**.
+
+## Практическое упражнение: запускаем обратный отсчёт!
 
-<h2 id="Практическое_упражнение_запускаем_обратный_отсчёт!">Практическое упражнение:  запускаем обратный отсчёт!</h2>
+В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!" В частности, мы хотим, чтобы вы:
 
-<p>В этом упражнении мы хотим, чтобы вы написали простой отсчёт времени запуска до поля вывода, от 10 до "Пуск!"  В частности, мы хотим, чтобы вы:</p>
+- Цикл от 10 до 0. Мы предоставляем вам инициализатор: `var i = 10;`.
+- Для каждой итерации создайте новый абзац и добавьте его к выходному элементу `<div>`, который мы выбрали, используя `var output = document.querySelector ('.output');`. В комментариях мы предоставили вам три строки кода, которые необходимо использовать где-то внутри цикла:
 
-<ul>
- <li>Цикл от 10 до 0. Мы предоставляем вам инициализатор: <code>var i = 10;</code>.</li>
- <li>Для каждой итерации создайте новый абзац и добавьте его к выходному элементу <code>&lt;div&gt;</code>, который мы выбрали, используя <code>var output = document.querySelector ('.output');</code>. В комментариях мы предоставили вам три строки кода, которые необходимо использовать где-то внутри цикла:
-  <ul>
-   <li><code>var para = document.createElement('p');</code> — создать новый абзац.</li>
-   <li><code>output.appendChild(para);</code> — добавляет абзац к выводу <code>&lt;div&gt;</code>.</li>
-   <li><code>para.textContent =</code> — делает текст внутри абзаца равным значению, которое вы расположили справа, после знака равенства.</li>
-  </ul>
- </li>
- <li>Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько<code> para.textContent = lines</code><br>
+  - `var para = document.createElement('p');` — создать новый абзац.
+  - `output.appendChild(para);` — добавляет абзац к выводу `<div>`.
+  - `para.textContent =` — делает текст внутри абзаца равным значению, которое вы расположили справа, после знака равенства.
+
+- Разные номера итераций требуют, чтобы в абзаце для каждой итерации помещался свой текст (вам понадобится условный оператор и несколько` para.textContent = lines`
   ):
-  <ul>
-   <li>Если число равно 10, выведите в абзаце «Обратный отсчёт 10».</li>
-   <li>Если число равно 0, выведите в абзаце «Пуск!»</li>
-   <li>Для любого другого числа выведите в абзаце только число.</li>
-  </ul>
- </li>
- <li>Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам <strong>не</strong> нужен <code>i ++</code>. Как выполнить итерацию вниз?</li>
-</ul>
 
-<p>Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.</p>
+  - Если число равно 10, выведите в абзаце «Обратный отсчёт 10».
+  - Если число равно 0, выведите в абзаце «Пуск!»
+  - Для любого другого числа выведите в абзаце только число.
+
+- Не забудьте включить итератор! Однако в этом примере мы ведём обратный отсчёт после каждой итерации, а не вверх, поэтому вам **не** нужен `i ++`. Как выполнить итерацию вниз?
 
-<div class="hidden">
-<h6 id="Active_learning">Active learning</h6>
+Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Show solution», чтобы увидеть решение.
 
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
-&lt;div class="output" style="height: 410px;overflow: auto;"&gt;
+```html hidden
+<h2>Live output</h2>
+<div class="output" style="height: 410px;overflow: auto;">
 
-&lt;/div&gt;
+</div>
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-&lt;textarea id="code" class="playable-code" style="height: 300px;width: 95%"&gt;
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<textarea id="code" class="playable-code" style="height: 300px;width: 95%">
 var output = document.querySelector('.output');
 output.innerHTML = '';
 
@@ -584,15 +545,16 @@ output.innerHTML = '';
 // var para = document.createElement('p');
 // para.textContent = ;
 // output.appendChild(para);
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -610,9 +572,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -641,7 +605,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i &gt;= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
+var jsSolution = 'var output = document.querySelector(\'.output\');\noutput.innerHTML = \'\';\n\nvar i = 10;\n\nwhile(i >= 0) {\n var para = document.createElement(\'p\');\n if(i === 10) {\n para.textContent = \'Countdown \' + i;\n } else if(i === 0) {\n  para.textContent = \'Blast off!\';\n } else {\n para.textContent = i;\n }\n\n output.appendChild(para);\n\n i--;\n}';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -687,53 +651,44 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Active_learning', '100%', 880, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Практическое_упражнение_Заполнение_списка_гостей">Практическое упражнение:   Заполнение списка гостей</h2>
+## Практическое упражнение: Заполнение списка гостей
 
-<p>Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.</p>
+Возьмите список имён, хранящихся в массиве, и поместите их в список гостей. Тут не всё так просто: мы не хотим приглашать Фила и Лолу, потому что они наглые и всё сожрут! У нас есть два списка. Один для тех, кого мы хотим пригласить, второй для тех, кого приглашать не нужно.
 
-<p>Для этого нужно сделать следующее:</p>
+Для этого нужно сделать следующее:
 
-<ul>
- <li>Напишите цикл, который будет повторяться от 0 до длины массива <code>people</code>.<br>
-  Вам нужно начать с инициализатора <code>var i = 0;</code> , но какое нужно использовать условие выхода?</li>
- <li>Во время каждой итерации цикла нужно проверять, соответствует ли текущий элемент массива именам "Фил" или "Лола", используя условный оператор:
-  <ul>
-   <li>Если это так, привяжите этот элемент массива в конец <code>textContent</code> абзаца <code>refused</code>, за которым следуют запятая и пробел. </li>
-   <li>Если это не так, привяжите этот элемент массива в конец <code>textContent</code> абзаца <code>admitted</code>, за которым следуют запятая и пробел.</li>
-  </ul>
- </li>
-</ul>
+- Напишите цикл, который будет повторяться от 0 до длины массива `people`.
+  Вам нужно начать с инициализатора `var i = 0;` , но какое нужно использовать условие выхода?
+- Во время каждой итерации цикла нужно проверять, соответствует ли текущий элемент массива именам "Фил" или "Лола", используя условный оператор:
 
-<p>Мы уже предоставили вам:</p>
+  - Если это так, привяжите этот элемент массива в конец `textContent` абзаца `refused`, за которым следуют запятая и пробел.
+  - Если это не так, привяжите этот элемент массива в конец `textContent` абзаца `admitted`, за которым следуют запятая и пробел.
 
-<ul>
- <li><code>var i = 0;</code> — ваш инициализатор.</li>
- <li><code>refused.textContent +=</code> — начало строки, которая объединит что-то до конца <code>refused.textContent</code>.</li>
- <li><code>admitted.textContent +=</code> — начало строки, которая объединит что-то до конца <code>admitted.textContent</code>.</li>
-</ul>
+Мы уже предоставили вам:
 
-<p>Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «<a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>».</p>
+- `var i = 0;` — ваш инициализатор.
+- `refused.textContent +=` — начало строки, которая объединит что-то до конца `refused.textContent`.
+- `admitted.textContent +=` — начало строки, которая объединит что-то до конца `admitted.textContent`.
 
-<p>Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.</p>
+Дополнительный бонусный вопрос - после успешного выполнения вышеупомянутых задач у вас останется два списка имён, разделённых запятыми, но они будут составлены некорректно: в конце каждого списка будет запятая. Сможете ли вы составить эти списки так, чтобы в конце каждой строки вместо запятой была точка. За помощью можно обратиться к статье «[Полезные строковые методы](/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods)».
 
-<div class="hidden">
-<h6 id="Active_learning_2">Active learning 2</h6>
+Если вы допустили ошибку, вы всегда можете сбросить пример с помощью кнопки «Сброс» (Reset). Если у вас совсем ничего не получается, нажмите «Показать решение», чтобы увидеть решение.
 
-<pre class="brush: html">&lt;h2&gt;Live output&lt;/h2&gt;
-&lt;div class="output" style="height: 100px;overflow: auto;"&gt;
-  &lt;p class="admitted"&gt;Пригласить: &lt;/p&gt;
-  &lt;p class="refused"&gt;Не приглашать(!): &lt;/p&gt;
-&lt;/div&gt;
+```html hidden
+<h2>Live output</h2>
+<div class="output" style="height: 100px;overflow: auto;">
+  <p class="admitted">Пригласить: </p>
+  <p class="refused">Не приглашать(!): </p>
+</div>
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-&lt;textarea id="code" class="playable-code" style="height: 400px;width: 95%"&gt;
+<h2>Editable code</h2>
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+<textarea id="code" class="playable-code" style="height: 400px;width: 95%">
 var people = ['Крис', 'Анна', 'Колин', 'Терри', 'Фил', 'Лола', 'Сём', 'Кай', 'Брюс'];
 
 var admitted = document.querySelector('.admitted');
@@ -746,15 +701,16 @@ refused.textContent = 'Не приглашать(!): '
 // refused.textContent += ;
 // admitted.textContent += ;
 
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сброс"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сброс">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -772,9 +728,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -803,7 +761,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i &lt; people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
+var jsSolution = 'var people = [\'Крис\', \'Анна\', \'Колин\', \'Терри\', \'Фил\', \'Лола\', \'Сём\', \'Кай\', \'Брюс\'];\n\nvar admitted = document.querySelector(\'.admitted\');\nvar refused = document.querySelector(\'.refused\');\n\nadmitted.textContent = \'Пригласить: \';\nrefused.textContent = \'Не приглашать(!): \'\nvar i = 0;\n\ndo {\n if(people[i] === \'Фил\' || people[i] === \'Лола\') {\n refused.textContent += people[i] + \', \';\n } else {\n admitted.textContent += people[i] + \', \';\n }\n i++;\n} while(i < people.length);\n\nrefused.textContent = refused.textContent.slice(0,refused.textContent.length-2) + \'.\';\nadmitted.textContent = admitted.textContent.slice(0,admitted.textContent.length-2) + \'.\';';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -849,71 +807,71 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Active_learning_2', '100%', 680) }}</p>
+{{ EmbedLiveSample('Active_learning_2', '100%', 680) }}
 
-<h2 id="Так_какой_тип_цикла_использовать">Так какой тип цикла использовать?</h2>
+## Так какой тип цикла использовать?
 
-<p>В основном, используют <code>for</code>, <code>while</code> и <code>do...while</code> циклы, и они во многом взаимозаменяемы. Все они могут быть использованы для выполнения одних и тех же задач и какой из них вы будете использовать, во многом зависит от ваших личных предпочтений. Используйте тот, который вам проще всего запомнить или наиболее интуитивно понятен. Давайте вспомним каждый из них.</p>
+В основном, используют `for`, `while` и `do...while` циклы, и они во многом взаимозаменяемы. Все они могут быть использованы для выполнения одних и тех же задач и какой из них вы будете использовать, во многом зависит от ваших личных предпочтений. Используйте тот, который вам проще всего запомнить или наиболее интуитивно понятен. Давайте вспомним каждый из них.
 
-<p><strong><code>For</code></strong>:</p>
+**`For`**:
 
-<pre>for (initializer; exit-condition; final-expression) {
+```
+for (initializer; exit-condition; final-expression) {
   // code to run
-}</pre>
+}
+```
 
-<p><strong><code>while</code></strong>:</p>
+**`while`**:
 
-<pre>initializer
+```
+initializer
 while (exit-condition) {
   // code to run
 
   final-expression
-}</pre>
+}
+```
 
-<p><strong><code>do...while</code></strong>:</p>
+**`do...while`**:
 
-<pre>initializer
+```
+initializer
 do {
   // code to run
 
   final-expression
-} while (exit-condition)</pre>
+} while (exit-condition)
+```
 
-<p>Для начала мы бы порекомендовали <code>for</code>, так как его проще запомнить: инициализатор, условие выхода и конечное выражение аккуратно заключено в скобки, поэтому их легко отследить, чтобы их не пропускать.</p>
+Для начала мы бы порекомендовали `for`, так как его проще запомнить: инициализатор, условие выхода и конечное выражение аккуратно заключено в скобки, поэтому их легко отследить, чтобы их не пропускать.
 
-<div class="note">
-<p><strong>Примечание. </strong>Существуют и другие типы и функции цикла, которые полезны в сложных или специализированных ситуациях и выходят за рамки данной статьи. Если вы хотите подробнее изучить тему циклов, прочитайте наше расширенное<a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации"> руководство по циклам и итерациям.</a> </p>
-</div>
+> **Примечание:** **Примечание.** Существуют и другие типы и функции цикла, которые полезны в сложных или специализированных ситуациях и выходят за рамки данной статьи. Если вы хотите подробнее изучить тему циклов, прочитайте наше расширенное[ руководство по циклам и итерациям.](/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации)
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Эта статья раскрывает основные концепции и различные опции, доступные при циклическом кодировании в JavaScript. Теперь вам должно быть понятно, почему циклы являются хорошим механизмом для работы с повторяющимся кодом. Старайтесь использовать их в своих собственных примерах!</p>
+Эта статья раскрывает основные концепции и различные опции, доступные при циклическом кодировании в JavaScript. Теперь вам должно быть понятно, почему циклы являются хорошим механизмом для работы с повторяющимся кодом. Старайтесь использовать их в своих собственных примерах!
 
-<p>Если вы чего-то не поняли, пробуйте читать статью снова или <a href="/ru/docs/Learn#Связаться_с_нами">свяжитесь с нами</a>, мы поможем разобраться.</p>
+Если вы чего-то не поняли, пробуйте читать статью снова или [свяжитесь с нами](/ru/docs/Learn#Связаться_с_нами), мы поможем разобраться.
 
-<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+## Дополнительная информация
 
-<ul>
- <li><a href="/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации">Циклы и итерации</a></li>
- <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/for">for свойства и характеристики</a></li>
- <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/while">while</a> и <a href="/ru/docs/Web/JavaScript/Reference/Statements/do...while">do...while</a> описание</li>
- <li><a href="/ru/docs/Web/JavaScript/Reference/Statements/break">break</a> и <a href="/ru/docs/Web/JavaScript/Reference/Statements/continue">continue</a> описание</li>
- <li><a href="https://www.impressivewebs.com/javascript-for-loop/">What’s the Best Way to Write a JavaScript For Loop?</a> — статья о практическом применении циклов</li>
-</ul>
+- [Циклы и итерации](/ru/docs/Web/JavaScript/Guide/Циклы_и_итерации)
+- [for свойства и характеристики](/ru/docs/Web/JavaScript/Reference/Statements/for)
+- [while](/ru/docs/Web/JavaScript/Reference/Statements/while) и [do...while](/ru/docs/Web/JavaScript/Reference/Statements/do...while) описание
+- [break](/ru/docs/Web/JavaScript/Reference/Statements/break) и [continue](/ru/docs/Web/JavaScript/Reference/Statements/continue) описание
+- [What’s the Best Way to Write a JavaScript For Loop?](https://www.impressivewebs.com/javascript-for-loop/) — статья о практическом применении циклов
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/conditionals","Learn/JavaScript/Building_blocks/Functions", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/conditionals">Принятие решений в вашем коде — условные конструкции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Looping_code">Зацикливание кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Functions">Функции — Переиспользуемые блоки кода</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Создайте свою собственную функцию</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемое значение функции</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/События">Введение в события</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery">Создание галереи</a></li>
-</ul>
+- [Принятие решений в вашем коде — условные конструкции](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Зацикливание кода](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [Функции — Переиспользуемые блоки кода](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Создайте свою собственную функцию](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [Возвращаемое значение функции](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Введение в события](/ru/docs/Learn/JavaScript/Building_blocks/События)
+- [Создание галереи](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/ru/learn/javascript/building_blocks/return_values/index.md b/files/ru/learn/javascript/building_blocks/return_values/index.md
index bf9aaaa50da9bd..5b376067ef1484 100644
--- a/files/ru/learn/javascript/building_blocks/return_values/index.md
+++ b/files/ru/learn/javascript/building_blocks/return_values/index.md
@@ -3,170 +3,162 @@ title: Возвращаемые значения функций
 slug: Learn/JavaScript/Building_blocks/Return_values
 translation_of: Learn/JavaScript/Building_blocks/Return_values
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/События", "Learn/JavaScript/Building_blocks")}}</div>
+Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже.
 
-<p class="summary">Для нас в этом курсе имеется ещё один важный момент. Посмотрим внимательнее на возвращаемое значение функций. Некоторые функции не возвращают существенное значение после завершения, но некоторые возвращают, и важно понимать что это за значение и как использовать его в своём коде и как сделать так чтобы ваши собственные функции возвращали полезные значения. Мы объясним всё это ниже. </p>
+| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS, [JavaScript first steps](/ru/docs/Learn/JavaScript/First_steps), [Functions — reusable blocks of code](/ru/docs/Learn/JavaScript/Building_blocks/Functions). |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цели:               | Понять что такое возвращаемое значение функции и как его использовать.                                                                                                                                                  |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>
-    <p>Базовая компьютерная грамотность, знание основ HTML и CSS, <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цели:</th>
-   <td>Понять что такое возвращаемое значение функции и как его использовать.</td>
-  </tr>
- </tbody>
-</table>
+## Что из себя представляют возвращаемые значения?
 
-<h2 id="Что_из_себя_представляют_возвращаемые_значения">Что из себя представляют возвращаемые значения?</h2>
+**Возвращаемые значения** - это на самом деле просто значения, которые функция возвращает после своего завершения. Вы уже неоднократно встречали возвращаемые значения, хотя, возможно, и не осознавали этого. Напишем небольшой код:
 
-<p><strong>Возвращаемые значения </strong>- это на самом деле просто значения, которые функция возвращает после своего завершения. Вы уже неоднократно встречали возвращаемые значения, хотя, возможно, и не осознавали этого. Напишем небольшой код: </p>
-
-<pre class="brush: js">var myText = 'I am a string';
+```js
+var myText = 'I am a string';
 var newString = myText.replace('string', 'sausage');
 console.log(newString);
 // функция replace() принимает строку,
 // заменяет одну подстроку другой и возвращает
-// новую строку со сделанными заменами</pre>
+// новую строку со сделанными заменами
+```
 
-<p>Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a> на строке <code>myText</code> и передаём ей 2 параметра —  заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами.  В коде выше мы сохраняем это возвращаемое значение как значение переменной <code>newString</code>.</p>
+Мы уже видели этот блок кода в нашей первой статье про функции. Мы вызываем функцию [replace()](/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace) на строке `myText` и передаём ей 2 параметра — заменяемую подстроку и подстроку, которой будем заменять. Когда функция завершит выполнение, она вернёт значение, которым является новая строка со сделанными в ней заменами. В коде выше мы сохраняем это возвращаемое значение как значение переменной `newString`.
 
-<p>Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value">Return value</a>.  Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.</p>
+Если вы посмотрите на функцию replace() на MDN reference page, вы увидите секцию под названием [Return value](/ru/docs/Web/JavaScript/Reference/Global_Objects/String/replace#Return_value). Очень важно знать и понимать какие значения возвращаются функциями, так что мы пытаемся включать эту информацию везде, где это возможно.
 
-<p>Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как <code>void</code> или <code>undefined</code> в таких случаях). Например, в функции <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50">displayMessage()</a> которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.</p>
+Некоторые функции не возвращают значения( на наших reference pages, возвращаемое значение обозначено как `void` или `undefined` в таких случаях). Например, в функции [displayMessage()](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-stage-4.html#L50) которую мы сделали в прошлой статье, в результате выполнения функции не возвращается никакого значения. Функция всего лишь отображает что-то где-то на экране.
 
-<p>В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.</p>
+В основном, возвращаемое значение используется там, где функция является чем-то вроде вспомогательного звена при вычислениях. Вы хотите получить результат, который включает в себя некоторые значения. Эти значения вычисляются функцией, которая возвращает результат так, что он может быть использован в следующих стадиях вычисления.
 
-<h3 id="Использование_возвращаемых_значений_в_ваших_собственных_функциях">Использование возвращаемых значений в ваших собственных функциях</h3>
+### Использование возвращаемых значений в ваших собственных функциях
 
-<p>Чтобы вернуть значение своей функции, вы должны использовать ключевое слово <a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a>. Мы видели это в действии недавно - в нашем примере <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html">random-canvas-circles.html</a>. Наша функция<code>draw()</code>отрисовывает где-то на экране 100 случайных кружков. </p>
+Чтобы вернуть значение своей функции, вы должны использовать ключевое слово [return](/ru/docs/Web/JavaScript/Reference/Statements/return). Мы видели это в действии недавно - в нашем примере [random-canvas-circles.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/loops/random-canvas-circles.html). Наша функция`draw()`отрисовывает где-то на экране 100 случайных кружков.
 
-<p>{{htmlelement("canvas")}}:</p>
+{{htmlelement("canvas")}}:
 
-<pre class="brush: js">function draw() {
+```js
+function draw() {
   ctx.clearRect(0,0,WIDTH,HEIGHT);
-  for (var i = 0; i &lt; 100; i++) {
+  for (var i = 0; i < 100; i++) {
     ctx.beginPath();
     ctx.fillStyle = 'rgba(255,0,0,0.5)';
     ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
     ctx.fill();
   }
-}</pre>
+}
+```
 
-<p>Внутри каждой итерации есть 3 вызова функции <code>random()</code>. Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция <code>random()</code> принимает 1 параметр (целое число) и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так: </p>
+Внутри каждой итерации есть 3 вызова функции `random()`. Это сделано чтобы сгенерировать случайное значение для текущей координаты x, y и для радиуса. Функция `random()` принимает 1 параметр (целое число) и возвращает случайное число в диапазоне от 0 до этого числа. Выглядит это вот так:
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   return Math.floor(Math.random()*number);
-}</pre>
+}
+```
 
-<p>Тоже самое может быть написано вот так:</p>
+Тоже самое может быть написано вот так:
 
-<pre class="brush: js">function random(number) {
+```js
+function random(number) {
   var result = Math.floor(Math.random()*number);
   return result;
-}</pre>
+}
+```
 
-<p>Но первую версию написать быстрее и она более компактна.</p>
+Но первую версию написать быстрее и она более компактна.
 
-<p>Мы возвращаем результат вычисления <code>Math.floor(Math.random()*number)</code> каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:</p>
+Мы возвращаем результат вычисления `Math.floor(Math.random()*number)` каждый раз когда функция вызывается. Это возвращаемое значение появляется в момент вызова функции и код продолжается. Так, например, если мы выполним следующую строчку:
 
-<pre class="brush: js">ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);</pre>
+```js
+ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
+```
 
-<p>и 3 вызова <code>random()</code> вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:</p>
+и 3 вызова `random()` вернут значения 500, 200 и 35, соответственно, строчка будет выполнена как если бы она была такой:
 
-<pre class="brush: js">ctx.arc(500, 200, 35, 0, 2 * Math.PI);
-</pre>
+```js
+ctx.arc(500, 200, 35, 0, 2 * Math.PI);
+```
 
-<p>Сначала выполняются вызовы функции <code>random()</code>, на место которых подставляются возвращаемые ей значения, а затем выполнятся сама строка.</p>
+Сначала выполняются вызовы функции `random()`, на место которых подставляются возвращаемые ей значения, а затем выполнятся сама строка.
 
-<h2 id="Активное_обучение_наша_собственная_возвращающая_значение_функция">Активное обучение: наша собственная, возвращающая значение функция</h2>
+## Активное обучение: наша собственная, возвращающая значение функция
 
-<p>Теперь напишем нашу собственную возвращающую значение функцию.</p>
+Теперь напишем нашу собственную возвращающую значение функцию.
 
-<ol>
- <li>Первым делом, сделайте локальную копию файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html">function-library.html</a> из GitHub. Это простая HTML страничка, содержащая текстовое поле {{htmlelement("input")}} и параграф Также там есть элемент {{htmlelement("script")}} в котором мы храним в 2ух переменных ссылки на оба HTML-элемента. Это маленькая страничка позволит вам ввести число в text box и отобразит различные, относящиеся к нему числа в параграфе ниже.</li>
- <li>Теперь добавим несколько полезных функций в элемент <code>&lt;script&gt;</code> . Ниже двух существующих строчек JavaScript, добавьте следующие описания функций:
-  <pre class="brush: js">function squared(num) {
-  return num * num;
-}
+1.  Первым делом, сделайте локальную копию файла [function-library.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library.html) из GitHub. Это простая HTML страничка, содержащая текстовое поле {{htmlelement("input")}} и параграф Также там есть элемент {{htmlelement("script")}} в котором мы храним в 2ух переменных ссылки на оба HTML-элемента. Это маленькая страничка позволит вам ввести число в text box и отобразит различные, относящиеся к нему числа в параграфе ниже.
+2.  Теперь добавим несколько полезных функций в элемент `<script>` . Ниже двух существующих строчек JavaScript, добавьте следующие описания функций:
 
-function cubed(num) {
-  return num * num * num;
-}
+    ```js
+    function squared(num) {
+      return num * num;
+    }
 
-function factorial(num) {
-  var x = num;
-  while (x &gt; 1) {
-    num *= x-1;
-    x--;
-  }
-  return num;
-}</pre>
-  <code>Ф</code>функции <code>squared()</code> и <code>cubed()</code> довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция <code>factorial()</code> возвращает <a href="https://en.wikipedia.org/wiki/Factorial">factorial</a> переданного числа.</li>
- <li>Далее мы добавим способ выводить нашу информацию введённым в  text input числе. Добавьте обработчик событий ниже существующих функций:
-  <pre class="brush: js">input.onchange = function() {
-  var num = input.value;
-  if (isNaN(num)) {
-    para.textContent = 'You need to enter a number!';
-  } else {
-    para.textContent = num + ' squared is ' + squared(num) + '. ' +
-                       num + ' cubed is ' + cubed(num) + '. ' +
-                       num + ' factorial is ' + factorial(num) + '.';
-  }
-}</pre>
+    function cubed(num) {
+      return num * num * num;
+    }
+
+    function factorial(num) {
+      var x = num;
+      while (x > 1) {
+        num *= x-1;
+        x--;
+      }
+      return num;
+    }
+    ```
+
+    `Ф`функции `squared()` и `cubed()` довольно очевидны— они возвращают квадрат или куб переданного как параметр числа. Функция `factorial()` возвращает [factorial](https://en.wikipedia.org/wiki/Factorial) переданного числа.
+
+3.  Далее мы добавим способ выводить нашу информацию введённым в text input числе. Добавьте обработчик событий ниже существующих функций:
+
+    ```js
+    input.onchange = function() {
+      var num = input.value;
+      if (isNaN(num)) {
+        para.textContent = 'You need to enter a number!';
+      } else {
+        para.textContent = num + ' squared is ' + squared(num) + '. ' +
+                           num + ' cubed is ' + cubed(num) + '. ' +
+                           num + ' factorial is ' + factorial(num) + '.';
+      }
+    }
+    ```
+
+    Здесь мы создаём обработчик событий `onchange` который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной `num` .
 
-  <p>Здесь мы создаём обработчик событий <code>onchange</code>  который срабатывает когда меняется когда новое значение вводится в text input и подтверждается (введите значение и, например, нажмите tab). Когда анонимная функция срабатывает, введённое в input значение сохраняется в переменной <code>num</code> .</p>
- </li>
- <li>
-  <p>Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение <code>isNaN(num)</code>  true. Мы используем функцию <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/isNaN">isNaN()</a> чтобы проверить что значение переменной num не число — если так то функция возвращает<code>true</code>, если нет- <code>false</code>.</p>
- </li>
- <li>
-  <p>Если тест возвращает <code>false</code>, значение переменной <code>num</code>число, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает  функции <code>squared()</code>, <code>cubed() и</code><code>factorial()</code> чтобы получить нужные значения. Сохраните ваш код, загрузите его в браузере и посмотрите на то что получилось.</p>
- </li>
-</ol>
+4.  Далее мы делаем условный тест — если введённое значение не является числом, мы выводим в параграф сообщение об ошибке . Тест смотрит возвращает ли выражение `isNaN(num)` true. Мы используем функцию [isNaN()](/ru/docs/Web/JavaScript/Reference/Global_Objects/isNaN) чтобы проверить что значение переменной num не число — если так то функция возвращает`true`, если нет- `false`.
+5.  Если тест возвращает `false`, значение переменной `num`число, и поэтому мы выводим сообщение внутри параграфа о значениях квадрата, куба и факториала числа. Предложение вызывает функции `squared()`, ` cubed() и``factorial() ` чтобы получить нужные значения. Сохраните ваш код, загрузите его в браузере и посмотрите на то что получилось.
 
-<div class="note">
-<p><strong>Замечание</strong>:  Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html">finished version on GitHub</a> (или <a href="http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html">смотрите живой пример</a>), или спросите нас.</p>
-</div>
+> **Примечание:** **Замечание**: Если у вас проблемы с работой данного примера, не стесняйтесь сверить ваш код с работающей версией [finished version on GitHub](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/functions/function-library-finished.html) (или [смотрите живой пример](http://mdn.github.io/learning-area/javascript/building-blocks/functions/function-library-finished.html)), или спросите нас.
 
-<p>К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу <code>num</code>?</p>
+К этому моменту мы хотели бы чтобы вы написали парочку собственных функций и добавили их в библиотеку. Как на счёт квадратного или кубического корня числа или длины окружности круга с длиной радиуса равной числу `num`?
 
-<p>Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово <code>return</code> . В дополнение:</p>
+Это упражнение привнесло парочку важных понятий в изучении того, как использовать ключевое слово `return` . В дополнение:
 
-<ul>
- <li>Приведите другой пример написание обработчика ошибок. Это довольно хорошая идея проверять что важные параметры предоставлены в правильном типе и если они опциональны то предусматривать для них значения по умолчанию. В таком случая ваша программа с меньшей вероятность подвержена ошибкам. </li>
- <li>Поразмышляйте о идее создания библиотеки функций. Чем дальше вы будите расти в профессиональном плане, тем больше будете сталкиваться с однотипными вещами. Это хорошая идея начать собирать свою собственную библиотеку функций, которые вы часто используют — в таком случае вы сможете просто скопировать их в ваш новый код или просто добавить их в любую HTML страничку, где это требуется.</li>
-</ul>
+- Приведите другой пример написание обработчика ошибок. Это довольно хорошая идея проверять что важные параметры предоставлены в правильном типе и если они опциональны то предусматривать для них значения по умолчанию. В таком случая ваша программа с меньшей вероятность подвержена ошибкам.
+- Поразмышляйте о идее создания библиотеки функций. Чем дальше вы будите расти в профессиональном плане, тем больше будете сталкиваться с однотипными вещами. Это хорошая идея начать собирать свою собственную библиотеку функций, которые вы часто используют — в таком случае вы сможете просто скопировать их в ваш новый код или просто добавить их в любую HTML страничку, где это требуется.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Функции очень полезны и несмотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.</p>
+Функции очень полезны и несмотря на то, что об их синтаксисе и функциональности можно говорить долго, у нас есть довольно понятные статьи для дальнейшего обучения.
 
-<p>Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или <a href="/en-US/Learn#Contact_us">свяжитесь с нами</a> для получения помощи.</p>
+Если в статье есть что-то что вы не поняли, не стесняйтесь перечитать статью ещё раз или [свяжитесь с нами](/en-US/Learn#Contact_us) для получения помощи.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions">Функции более подробно</a> — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.</li>
- <li><a href="https://www.impressivewebs.com/callback-functions-javascript/">Колбэк-функции в JavaScript</a> — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.</li>
-</ul>
+- [Функции более подробно](/ru/docs/Web/JavaScript/Reference/Functions) — подробное руководство, охватывающее более продвинутую информацию, связанную с функциями.
+- [Колбэк-функции в JavaScript](https://www.impressivewebs.com/callback-functions-javascript/) — распространённый паттерн JavaScript для передачи функции в другую функцию как аргумент, который затем вызывается внутри первой функции.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Build_your_own_function","Learn/JavaScript/Building_blocks/Events", "Learn/JavaScript/Building_blocks")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">Making decisions in your code — conditionals</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">Looping code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Functions — reusable blocks of code</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Build your own function</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Function return values</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Image_gallery">Image gallery</a></li>
-</ul>
+- [Making decisions in your code — conditionals](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Looping code](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [Functions — reusable blocks of code](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Build your own function](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [Function return values](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Introduction to events](/ru/docs/Learn/JavaScript/Building_blocks/Events)
+- [Image gallery](/ru/docs/Learn/JavaScript/Building_blocks/Image_gallery)
diff --git a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
index dd534cf7f6f7f7..74494c27d70ad2 100644
--- a/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
+++ b/files/ru/learn/javascript/building_blocks/test_your_skills_colon__functions/index.md
@@ -1,99 +1,81 @@
 ---
 title: 'Проверь свои навыки: Функции'
-slug: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'
+slug: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 tags:
   - JavaScript
   - Изучение
   - Новичок
   - Функции
-translation_of: 'Learn/JavaScript/Building_blocks/Test_your_skills:_Functions'
+translation_of: Learn/JavaScript/Building_blocks/Test_your_skills:_Functions
 ---
-<div>{{learnsidebar}}</div>
+{{learnsidebar}}
 
-<p>Целью данного теста навыков является оценка понимания таких статей, как: <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">Функций — многократное использование блоков кода</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">Построение своих собственных функций</a> и <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">Возвращаемые значения функции</a>.</p>
+Целью данного теста навыков является оценка понимания таких статей, как: [Функций — многократное использование блоков кода](/ru/docs/Learn/JavaScript/Building_blocks/Functions), [Построение своих собственных функций](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function) и [Возвращаемые значения функции](/ru/docs/Learn/JavaScript/Building_blocks/Return_values).
 
-<div class="blockIndicator note">
-<p>Примечание: вы можете проверить решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструменты, такие как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> для работы над задачами.<br>
- <br>
- Если у вас возникла проблема, то попросите нас о помощи - см. раздел <a href="#анализ_или_дальнейшая_помощь">Анализ или дальнейшая помощь</a> внизу этой страницы.</p>
-</div>
+> **Примечание:** Примечание: вы можете проверить решения в интерактивных редакторах ниже, однако может быть полезно загрузить код и использовать онлайн-инструменты, такие как [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) для работы над задачами.
+>
+> Если у вас возникла проблема, то попросите нас о помощи - см. раздел [Анализ или дальнейшая помощь](#анализ_или_дальнейшая_помощь) внизу этой страницы.
 
-<div class="blockIndicator note">
-<p>Примечание: В примерах ниже, если в вашем коде есть ошибка, она будет выведена на панель результатов этой страницы, чтобы помочь вам попытаться выяснить ответ (или в JavaScript консоли браузера, в случае загружаемой версии).</p>
-</div>
+> **Примечание:** Примечание: В примерах ниже, если в вашем коде есть ошибка, она будет выведена на панель результатов этой страницы, чтобы помочь вам попытаться выяснить ответ (или в JavaScript консоли браузера, в случае загружаемой версии).
 
-<h2 id="Управление_структурой_DOM_рекомендуется">Управление структурой DOM: рекомендуется</h2>
+## Управление структурой DOM: рекомендуется
 
-<p>Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой <a href="/en-US/docs/Glossary/DOM">DOM</a> для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.</p>
+Некоторые из вопросов, приведённых ниже, требуют написания кода для управления структурой [DOM](/ru/docs/Glossary/DOM) для их решения - например, создание новых HTML-элементов, установка их текстового содержимого в соответствие с определёнными значениями строк, и вложение их внутри существующих элементов на странице - и все это с помощью JavaScript.
 
-<p>Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a>.</p>
+Мы ещё не обучали этому прямо в курсе, но вы увидите некоторые примеры, которые используют данную структуру, и мы хотели бы, чтобы вы провели некоторые исследования в отношении того, какие DOM API вам нужны, чтобы успешно ответить на эти вопросы. Хорошим началом будет наше учебное пособие [Управление документами](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
 
-<h2 id="Функции_1">Функции 1</h2>
+## Функции 1
 
-<p>Для решения первой задачи вам нужно создать простую функцию — <code>chooseName()</code>, которая выполнит выборку случайного имени из данного массива (<code>names</code>) и выведет его в предоставленный параграф (<code>para</code>). А затем необходимо запустить эту функцию один раз.</p>
+Для решения первой задачи вам нужно создать простую функцию — `chooseName()`, которая выполнит выборку случайного имени из данного массива (`names`) и выведет его в предоставленный параграф (`para`). А затем необходимо запустить эту функцию один раз.
 
-<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
+Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
 
-<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions1.html", '100%', 400)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions1-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл с исходным кодом для этой задачи](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions1-download.html) для работы в собственном редакторе или в онлайн-редакторе.
 
-<h2 id="Функции_2">Функции 2</h2>
+## Функции 2
 
-<p>Для решения второй задачи, связанной с функциями, необходимо создать функцию, которая рисует прямоугольник на заданном элементе <code>&lt;canvas&gt;</code> (исходная переменная <code>canvas</code>, контекст доступен в <code>ctx</code>), основанном на пяти предоставленных входящих значениях:</p>
+Для решения второй задачи, связанной с функциями, необходимо создать функцию, которая рисует прямоугольник на заданном элементе `<canvas>` (исходная переменная `canvas`, контекст доступен в `ctx`), основанном на пяти предоставленных входящих значениях:
 
-<ul>
- <li><code>x</code> — x координата прямоугольника.</li>
- <li><code>y</code> — y координата прямоугольника.</li>
- <li><code>width</code> — ширина прямоугольника.</li>
- <li><code>height</code> — высота прямоугольника.</li>
- <li><code>color</code> — цвет прямоугольника.</li>
-</ul>
+- `x` — x координата прямоугольника.
+- `y` — y координата прямоугольника.
+- `width` — ширина прямоугольника.
+- `height` — высота прямоугольника.
+- `color` — цвет прямоугольника.
 
-<p>Перед рисованием вам нужно будет очистить содержимое элемента canvas , чтобы при обновлении кода в случае с рабочей версией, вы не получили много прямоугольников, находящихся друг на друге.</p>
+Перед рисованием вам нужно будет очистить содержимое элемента canvas , чтобы при обновлении кода в случае с рабочей версией, вы не получили много прямоугольников, находящихся друг на друге.
 
-<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
+Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
 
-<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions2.html", '100%', 400)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions2-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл с исходным кодом для этой задачи](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions2-download.html) для работы в собственном редакторе или в онлайн-редакторе.
 
-<h2 id="Функции_3">Функции 3</h2>
+## Функции 3
 
-<p>В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:</p>
+В этой задаче вы возвращаетесь к проблеме, поставленной в Задаче 1, с целью её улучшения. Мы хотим, чтобы вы сделали три улучшения:
 
-<ol>
- <li>Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию <code>random()</code>, которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.</li>
- <li>Обновите функцию <code>chooseName()</code> таким образом, чтобы она использовала функцию случайных чисел, принимала массив для выбора в качестве параметра (что делает его более гибким) и возвращала результат.</li>
- <li>Вывести возвращаемый результат в параграф (<code>para</code>) с помощью свойства <code>textContent</code>. </li>
-</ol>
+1.  Выполните рефакторинг (реорганизацию) кода, который отвечает за генерацию случайного числа в отдельную функцию `random()`, которая принимает в качестве параметров две общие границы, между которыми должно находиться случайное число и возвращает результат.
+2.  Обновите функцию `chooseName()` таким образом, чтобы она использовала функцию случайных чисел, принимала массив для выбора в качестве параметра (что делает его более гибким) и возвращала результат.
+3.  Вывести возвращаемый результат в параграф (`para`) с помощью свойства `textContent`.
 
-<p>Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:</p>
+Попробуйте обновить рабочий код ниже, чтобы воссоздать готовый пример:
 
-<p>{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}</p>
+{{EmbedGHLiveSample("learning-area/javascript/building-blocks/tasks/functions/functions3.html", '100%', 400)}}
 
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions3-download.html">Загрузите файл с исходным кодом для этой задачи</a> для работы в собственном редакторе или в онлайн-редакторе.</p>
-</div>
+> **Примечание:** [Загрузите файл с исходным кодом для этой задачи](https://github.com/mdn/learning-area/tree/master/javascript/building-blocks/tasks/functions/functions3-download.html) для работы в собственном редакторе или в онлайн-редакторе.
 
-<h2 id="Анализ_или_дальнейшая_помощь">Анализ или дальнейшая помощь</h2>
+## Анализ или дальнейшая помощь
 
-<p>Вы можете попрактиковаться на этих примерах в интерактивных редакторах выше.</p>
+Вы можете попрактиковаться на этих примерах в интерактивных редакторах выше.
 
-<p>Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:</p>
+Если же вы хотите, чтобы вашу работу проанализировали, или у вас проблема и вы хотите попросить о помощи:
 
-<ol>
- <li>Поместите свой код в онлайн-редактор <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> или <a href="https://glitch.com/">Glitch</a> с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.</li>
- <li>Напишите сообщение с просьбой о проведении анализа и/или помощи в категории <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Ваше сообщение должно включать в себя следующие пункты:
-  <ul>
-   <li>Описательный заголовок, например "Анализ для теста навыков: Функции 1".</li>
-   <li>Детали того, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите получить анализ проблемы.</li>
-   <li>Ссылка на пример, который вы хотели бы рассмотреть или с которым вам нужна помощь, в онлайн-редакторе, доступном для совместного использования (как упоминалось в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой, если вы не видите его код.</li>
-   <li>Ссылка на фактическую задачу или страницу рассмотрения проблемы, чтобы мы могли найти вопрос, по которому вам нужна помощь.</li>
-  </ul>
- </li>
-</ol>
+1.  Поместите свой код в онлайн-редактор [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/) или [Glitch](https://glitch.com/) с возможностью совместного использования. Вы можете написать код самостоятельно или использовать файлы с исходным кодом, ссылки на которые приведены в вышеприведённых разделах.
+2.  Напишите сообщение с просьбой о проведении анализа и/или помощи в категории [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn). Ваше сообщение должно включать в себя следующие пункты:
+
+    - Описательный заголовок, например "Анализ для теста навыков: Функции 1".
+    - Детали того, что вы уже пробовали, и что бы вы хотели, чтобы мы сделали, например, если вы застряли и нуждаетесь в помощи, или хотите получить анализ проблемы.
+    - Ссылка на пример, который вы хотели бы рассмотреть или с которым вам нужна помощь, в онлайн-редакторе, доступном для совместного использования (как упоминалось в шаге 1 выше). Это хорошая практика - очень сложно помочь кому-то с проблемой, если вы не видите его код.
+    - Ссылка на фактическую задачу или страницу рассмотрения проблемы, чтобы мы могли найти вопрос, по которому вам нужна помощь.
diff --git a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md
index b0fec281a83538..4a996d652a1647 100644
--- a/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/client-side_storage/index.md
@@ -3,393 +3,365 @@ title: Client-side storage
 slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
 translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
 ---
-<p>{{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
+Современные веб-браузеры поддерживают несколько способов хранения данных из веб-сайтов на компьютере пользователя - с разрешения пользователя - чтобы потом получать их, когда это необходимо. Это позволяет долгосрочно хранить данные, сохранять сайты или документы для использования без подключения к сети, сохранять пользовательские настройки для вашего сайта и многое другое. В этой статье объясняются основы того, как это все работает.
 
+| Что нужно знать: | JavaScript basics (see [first steps](/ru/docs/Learn/JavaScript/First_steps), [building blocks](/ru/docs/Learn/JavaScript/Building_blocks), [JavaScript objects](/ru/docs/Learn/JavaScript/Objects)), the [basics of Client-side APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель статьи:     | To learn how to use client-side storage APIs to store application data.                                                                                                                                                                                                                            |
 
-<p class="summary">Современные веб-браузеры поддерживают несколько способов хранения данных из веб-сайтов на компьютере пользователя - с разрешения пользователя - чтобы потом получать их, когда это необходимо. Это позволяет долгосрочно хранить данные, сохранять сайты или документы для использования без подключения к сети, сохранять пользовательские настройки для вашего сайта и многое другое. В этой статье объясняются основы того, как это все работает.</p>
+## Хранение данных на стороне клиента?
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Что нужно знать:</th>
-   <td>JavaScript basics (see <a href="/en-US/docs/Learn/JavaScript/First_steps">first steps</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">JavaScript objects</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">basics of Client-side APIs</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель статьи:</th>
-   <td>To learn how to use client-side storage APIs to store application data.</td>
-  </tr>
- </tbody>
-</table>
+Ранее, мы говорили о разнице между [статическими](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites) и [динамическими сайтами](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites). Большинство современных веб-сайтов являются динамическими - они хранят данные на сервере, используя какую-то базу данных (серверное хранилище), а затем запускают код [на стороне сервера](/ru/docs/Learn/Server-side) чтобы извлечь необходимые данные, вставить их в шаблоны статических страниц и передать полученный HTML-код клиенту для отображения в браузере пользователя.
 
-<h2 id="Хранение_данных_на_стороне_клиента">Хранение данных на стороне клиента?</h2>
+Хранилище на стороне клиента работает по схожим принципам, но используется по-другому. Оно состоит из API-интерфейсов JavaScript, которые позволяют вам хранить данные на клиенте (то есть на компьютере пользователя), а затем извлекать их при необходимости. Это имеет много разных применений, таких как:
 
-<p>Ранее, мы говорили о разнице между <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Static_sites">статическими</a> и <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview#Dynamic_sites">динамическими сайтами</a>. Большинство современных веб-сайтов являются динамическими - они хранят данные на сервере, используя какую-то базу данных (серверное хранилище), а затем запускают код <a href="/en-US/docs/Learn/Server-side">на стороне сервера</a> чтобы извлечь необходимые данные, вставить их в шаблоны статических страниц и передать полученный HTML-код клиенту для отображения в браузере пользователя.</p>
+- Персонализация настроек сайта (например, отображение выбранных пользователем виджетов, цветовой схемы или размера шрифта).
+- Сохранение предыдущей активности на сайте (например, сохранение содержимого корзины покупок из предыдущего сеанса, запоминание, был ли пользователь ранее авторизован в системе).
+- Сохранение данных и ресурсов локально, так что сайт будет быстрее (и, возможно, экономичнее) загружаться или использоваться без подключения к сети.
+- Сохранение созданных веб-приложением документов локально для использования в автономном режиме.
 
-<p>Хранилище на стороне клиента работает по схожим принципам, но используется по-другому. Оно состоит из API-интерфейсов JavaScript, которые позволяют вам хранить данные на клиенте (то есть на компьютере пользователя), а затем извлекать их при необходимости. Это имеет много разных применений, таких как:</p>
+Часто, хранилища на сторонах клиента и сервера используются совместно. К примеру, вы должны загрузить из базы данных пакет музыкальных файлов для веб-игры, или музыкальный плеер хранит их в базе данных на стороне клиента, и воспроизводит по мере необходимости.
 
-<ul>
- <li>Персонализация настроек сайта (например, отображение выбранных пользователем виджетов, цветовой схемы или размера шрифта).</li>
- <li>Сохранение предыдущей активности на сайте (например, сохранение содержимого корзины покупок из предыдущего сеанса, запоминание, был ли пользователь ранее авторизован в системе).</li>
- <li>Сохранение данных и ресурсов локально, так что сайт будет быстрее (и, возможно, экономичнее) загружаться или использоваться без подключения к сети.</li>
- <li>Сохранение созданных веб-приложением документов локально для использования в автономном режиме.</li>
-</ul>
+Пользователь должен будет загрузить музыкальные файлы только один раз - при последующих посещениях они будут извлечены из локальной базы данных.
 
-<p>Часто, хранилища на сторонах клиента и сервера используются совместно. К примеру, вы должны загрузить из базы данных пакет музыкальных файлов для веб-игры, или музыкальный плеер хранит их в базе данных на стороне клиента, и воспроизводит по мере необходимости.</p>
+> **Примечание:** **Примечание.** Существуют ограничения на объем данных, которые вы можете хранить с помощью API-интерфейсов на стороне клиента (возможно, как для отдельных API, так и в совокупности). Точный лимит варьируется в зависимости от браузера и, возможно, в зависимости от пользовательских настроек. Смотри [Ограничения хранилища браузера и критерии переполнения](/ru/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria) для большей информации.
 
-<p>Пользователь должен будет загрузить музыкальные файлы только один раз - при последующих посещениях они будут извлечены из локальной базы данных.</p>
+### Старый подход: куки
 
-<div class="note">
-<p><strong>Примечание.</strong> Существуют ограничения на объем данных, которые вы можете хранить с помощью API-интерфейсов на стороне клиента (возможно, как для отдельных API, так и в совокупности). Точный лимит варьируется в зависимости от браузера и, возможно, в зависимости от пользовательских настроек. Смотри <a href="/en-US/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">Ограничения хранилища браузера и критерии переполнения</a> для большей информации.</p>
-</div>
+Концепция хранения на стороне клиента существует уже давно. С первых дней Интернета, использовали [cookies](/ru/docs/Web/HTTP/Cookies) для хранения информации, чтобы персонализировать пользовательский опыт на веб-сайтах. Это самая ранняя форма хранилища на стороне клиента, обычно используемая в Интернете.
 
-<h3 id="Старый_подход_куки">Старый подход: куки</h3>
+Из-за этого возраста существует ряд проблем - как технических, так и с точки зрения пользовательского опыта - связанных с файлами cookie. Эти проблемы настолько значительны, что при первом посещении сайта людям, живущим в Европе, показываются сообщения, информирующие их о том, будут ли они использовать файлы cookie для хранения данных о них. Это связано с частью законодательства Европейского Союза, известного как [EU Cookie directive](/ru/docs/Web/HTTP/Cookies#EU_cookie_directive).
 
-<p>Концепция хранения на стороне клиента существует уже давно. С первых дней Интернета, использовали <a href="/en-US/docs/Web/HTTP/Cookies">cookies</a> для хранения информации, чтобы персонализировать пользовательский опыт на веб-сайтах. Это самая ранняя форма хранилища на стороне клиента, обычно используемая в Интернете.</p>
+![](https://mdn.mozillademos.org/files/15734/cookies-notice.png)
 
-<p>Из-за этого возраста существует ряд проблем - как технических, так и с точки зрения пользовательского опыта - связанных с файлами cookie. Эти проблемы настолько значительны, что при первом посещении сайта людям, живущим в Европе, показываются сообщения, информирующие их о том, будут ли они использовать файлы cookie для хранения данных о них. Это связано с частью законодательства Европейского Союза, известного как  <a href="/en-US/docs/Web/HTTP/Cookies#EU_cookie_directive">EU Cookie directive</a>.</p>
+По этим причинам мы не будем учить вас, как использовать куки в этой статье. Они устарели, у них множество [проблем с безопасностью](/ru/docs/Web/HTTP/Cookies#Security), и неспособны хранить сложные данные. При этом существуют лучшие, более современные, способы хранения более широкого спектра данных на компьютере пользователя.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15734/cookies-notice.png" style="display: block; margin: 0 auto;"></p>
+Единственным преимуществом файлов cookie является то, что они поддерживаются очень старыми браузерами, поэтому, если ваш проект требует, чтобы вы поддерживали устаревшие браузеры (например, Internet Explorer 8 или более ранние версии), файлы cookie могут по-прежнему быть полезными, но для большинства проектов вы не нужно больше прибегать к ним.
 
-<p>По этим причинам мы не будем учить вас, как использовать куки в этой статье. Они устарели, у них множество <a href="/en-US/docs/Web/HTTP/Cookies#Security">проблем с безопасностью</a>, и неспособны хранить сложные данные. При этом существуют лучшие, более современные, способы хранения более широкого спектра данных на компьютере пользователя.</p>
+> **Примечание:** Почему по-прежнему создаются новые сайты с использованием файлов cookie? Это происходит главным образом из-за привычек разработчиков, использования старых библиотек, которые всё ещё используют куки-файлы, и наличия множества веб-сайтов, предоставляющих устаревшие справочные и учебные материалы для обучения хранению данных.
 
-<p>Единственным преимуществом файлов cookie является то, что они поддерживаются очень старыми браузерами, поэтому, если ваш проект требует, чтобы вы поддерживали устаревшие браузеры (например, Internet Explorer 8 или более ранние версии), файлы cookie могут по-прежнему быть полезными, но для большинства проектов вы не нужно больше прибегать к ним.</p>
+### Новый подход: Web Storage и IndexedDB
 
-<div class="note">
-<p>Почему по-прежнему создаются новые сайты с использованием файлов cookie? Это происходит главным образом из-за привычек разработчиков, использования старых библиотек, которые всё ещё используют куки-файлы, и наличия множества веб-сайтов, предоставляющих устаревшие справочные и учебные материалы для обучения хранению данных.</p>
-</div>
+Современные браузеры имеют гораздо более простые и эффективные API для хранения данных на стороне клиента, чем при использовании файлов cookie.
 
-<h3 id="Новый_подход_Web_Storage_и_IndexedDB">Новый подход: Web Storage и IndexedDB</h3>
+- The [Web Storage API](/ru/docs/Web/API/Web_Storage_API) обеспечивает очень простой синтаксис для хранения и извлечения данных, состоящих из пар 'ключ' : 'значение'. Это полезно, когда вам просто нужно сохранить некоторые простые данные, такие как имя пользователя, вошли ли они в систему, какой цвет использовать для фона экрана и т. д.
+- The [IndexedDB API](/ru/docs/Web/API/IndexedDB_API) обеспечивает браузер полной базой данных для хранения сложных данных. Это может быть использовано для хранения полных наборов записей клиентов и даже до сложных типов данных, таких как аудио или видео файлы.
 
-<p>Современные браузеры имеют гораздо более простые и эффективные API для хранения данных на стороне клиента, чем при использовании файлов cookie.</p>
+Вы узнаете больше об этих API ниже.
 
-<ul>
- <li>The <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> обеспечивает очень простой синтаксис для хранения и извлечения данных, состоящих из пар 'ключ' : 'значение'. Это полезно, когда вам просто нужно сохранить некоторые простые данные, такие как имя пользователя, вошли ли они в систему, какой цвет использовать для фона экрана и т. д.</li>
- <li>The <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> обеспечивает браузер полной базой данных для хранения сложных данных. Это может быть использовано для хранения полных наборов записей клиентов и даже до сложных типов данных, таких как аудио или видео файлы.</li>
-</ul>
+### Что нас ждёт в будущем: Cache API
 
-<p>Вы узнаете больше об этих API ниже.</p>
+Некоторые современные браузеры поддерживают новое {{domxref("Cache")}} API. Этот API предназначен для хранения HTTP-ответов на конкретные запросы и очень полезен для таких вещей, как хранение ресурсов сайта в автономном режиме, чтобы впоследствии сайт можно было использовать без сетевого подключения. Cache обычно используется в сочетании с [Service Worker API](/ru/docs/Web/API/Service_Worker_API), однако это не обязательно.
 
-<h3 id="Что_нас_ждёт_в_будущем_Cache_API">Что нас ждёт в будущем: Cache API</h3>
+Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведём простой пример [Offline asset storage](#offline_asset_storage) в разделе ниже.
 
-<p>Некоторые современные браузеры поддерживают новое {{domxref("Cache")}} API. Этот API предназначен для хранения HTTP-ответов на конкретные запросы и очень полезен для таких вещей, как хранение ресурсов сайта в автономном режиме, чтобы впоследствии сайт можно было использовать без сетевого подключения. Cache обычно используется в сочетании с <a href="/en-US/docs/Web/API/Service_Worker_API">Service Worker API</a>, однако это не обязательно.</p>
+## Хранение простых данных — web storage
 
-<p>Использование Cache и Service Workers - сложная тема, и мы не будем подробно останавливаться на ней в этой статье, хотя приведём простой пример <a href="#offline_asset_storage">Offline asset storage</a> в разделе ниже.</p>
+[Web Storage API](/ru/docs/Web/API/Web_Storage_API) очень легко использовать — вы храните простые пары данных имя/значение (только строки, цифры и т.п.) и получаете их, когда необходимо.
 
-<h2 id="Хранение_простых_данных_—_web_storage">Хранение простых данных — web storage</h2>
+### Базовый синтаксис
 
-<p><a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> очень легко использовать — вы храните простые пары данных имя/значение (только строки, цифры и т.п.) и получаете их, когда необходимо.</p>
+Посмотрите:
 
-<h3 id="Базовый_синтаксис">Базовый синтаксис</h3>
+1.  Во-первых, посмотрите наши [web storage шаблоны](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html) на GitHub (откройте в новой вкладке).
+2.  Откройте консоль инструментов JavaScript разработчика вашего браузера.
+3.  Все данные вашего веб-хранилища содержатся в двух объектоподобных структурах внутри браузера: {{domxref("Window.sessionStorage", "sessionStorage")}} и {{domxref("Window.localStorage", "localStorage")}}. Первый сохраняет данные до тех пор, пока браузер открыт (данные теряются при закрытии браузера), а второй сохраняет данные даже после того, как браузер закрыт, а затем снова открыт. Мы будем использовать второй в этой статье, так как он, как правило, более полезен.
 
-<p>Посмотрите:</p>
+    {{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):
 
-<ol>
- <li>
-  <p>Во-первых, посмотрите наши <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">web storage шаблоны</a> на GitHub (откройте в новой вкладке).</p>
- </li>
- <li>
-  <p>Откройте консоль инструментов JavaScript разработчика вашего браузера.</p>
- </li>
- <li>
-  <p>Все данные вашего веб-хранилища содержатся в двух объектоподобных структурах внутри браузера: {{domxref("Window.sessionStorage", "sessionStorage")}} и {{domxref("Window.localStorage", "localStorage")}}. Первый сохраняет данные до тех пор, пока браузер открыт (данные теряются при закрытии браузера), а второй сохраняет данные даже после того, как браузер закрыт, а затем снова открыт. Мы будем использовать второй в этой статье, так как он, как правило, более полезен.</p>
+    ```js
+    localStorage.setItem('name','Chris');
+    ```
 
-  <p>{{domxref("Storage.setItem()")}} метод позволяет сохранить элемент данных в хранилище - он принимает два параметра: имя элемента и его значение. Попробуйте ввести это в свою консоль JavaScript (измените значение на своё собственное имя, если хотите!):</p>
+4.  {{domxref("Storage.getItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите получить - и возвращает значение элемента. Теперь введите эти строки в вашу консоль JavaScript:
 
-  <pre class="brush: js">localStorage.setItem('name','Chris');</pre>
- </li>
- <li>
-  <p>{{domxref("Storage.getItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите получить - и возвращает значение элемента. Теперь введите эти строки в вашу консоль JavaScript:</p>
+    ```js
+    var myName = localStorage.getItem('name');
+    myName
+    ```
 
-  <pre class="brush: js">var myName = localStorage.getItem('name');
-myName</pre>
+    После ввода во второй строке вы должны увидеть, что переменная `myName` теперь содержит значение элемента данных `name`.
 
-  <p>После ввода во второй строке вы должны увидеть, что переменная <code>myName</code> теперь содержит значение элемента данных <code>name</code>.</p>
- </li>
- <li>
-  <p>{{domxref("Storage.removeItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите удалить, - и удаляет этот элемент из веб-хранилища. Введите следующие строки в вашу консоль JavaScript:</p>
+5.  {{domxref("Storage.removeItem()")}} метод принимает один параметр - имя элемента данных, который вы хотите удалить, - и удаляет этот элемент из веб-хранилища. Введите следующие строки в вашу консоль JavaScript:
 
-  <pre class="brush: js">localStorage.removeItem('name');
-var myName = localStorage.getItem('name');
-myName</pre>
+    ```js
+    localStorage.removeItem('name');
+    var myName = localStorage.getItem('name');
+    myName
+    ```
 
-  <p>Третья строка должна теперь возвращать ноль - элемент <code>name</code> больше не существует в веб-хранилище.</p>
- </li>
-</ol>
+    Третья строка должна теперь возвращать ноль - элемент `name` больше не существует в веб-хранилище.
 
-<h3 id="Данные_сохраняются!">Данные сохраняются!</h3>
+### Данные сохраняются!
 
-<p>Одной из ключевых особенностей веб-хранилища является то, что данные сохраняются между загрузками страниц (и даже в случае закрытия браузера, в случае <code>localStorage</code>). Давайте посмотрим на это в действии.</p>
+Одной из ключевых особенностей веб-хранилища является то, что данные сохраняются между загрузками страниц (и даже в случае закрытия браузера, в случае `localStorage`). Давайте посмотрим на это в действии.
 
-<ol>
- <li>
-  <p>Снова откройте пустой шаблон нашего веб-хранилища, но на этот раз в другом браузере, отличном от того, в котором вы открыли этот учебник! Так будет удобнее.</p>
- </li>
- <li>
-  <p>Введите эти строки в консоль JavaScript браузера:</p>
+1.  Снова откройте пустой шаблон нашего веб-хранилища, но на этот раз в другом браузере, отличном от того, в котором вы открыли этот учебник! Так будет удобнее.
+2.  Введите эти строки в консоль JavaScript браузера:
 
-  <pre class="brush: js">localStorage.setItem('name','Chris');
-var myName = localStorage.getItem('name');
-myName</pre>
+    ```js
+    localStorage.setItem('name','Chris');
+    var myName = localStorage.getItem('name');
+    myName
+    ```
 
-  <p>Вы должны увидеть возвращённое имя элемента.</p>
- </li>
- <li>
-  <p>Теперь закройте браузер и откройте его снова.</p>
- </li>
- <li>
-  <p>Введите следующий код:</p>
+    Вы должны увидеть возвращённое имя элемента.
 
-  <pre class="brush: js">var myName = localStorage.getItem('name');
-myName</pre>
+3.  Теперь закройте браузер и откройте его снова.
+4.  Введите следующий код:
 
-  <p>Вы должны увидеть, что значение всё ещё доступно, даже после закрытия / открытия браузера.</p>
- </li>
-</ol>
+    ```js
+    var myName = localStorage.getItem('name');
+    myName
+    ```
 
-<h3 id="Для_каждого_домена_отдельное_хранилище">Для каждого домена отдельное хранилище</h3>
+    Вы должны увидеть, что значение всё ещё доступно, даже после закрытия / открытия браузера.
 
-<p>Существуют отдельные хранилища данных для каждого домена (каждый отдельный веб-адрес загружается в браузер). Вы увидите, что если вы загрузите два веб-сайта (например, google.com и amazon.com) и попытаетесь сохранить элемент на одном веб-сайте, он не будет доступен для другого веб-сайта.</p>
+### Для каждого домена отдельное хранилище
 
-<p>Это имеет смысл - вы можете представить себе проблемы безопасности, которые могут возникнуть, если веб-сайты смогут видеть данные друг друга!</p>
+Существуют отдельные хранилища данных для каждого домена (каждый отдельный веб-адрес загружается в браузер). Вы увидите, что если вы загрузите два веб-сайта (например, google.com и amazon.com) и попытаетесь сохранить элемент на одном веб-сайте, он не будет доступен для другого веб-сайта.
 
-<h3 id="Более_развёрнутый_пример">Более развёрнутый пример</h3>
+Это имеет смысл - вы можете представить себе проблемы безопасности, которые могут возникнуть, если веб-сайты смогут видеть данные друг друга!
 
-<p>Давайте применим эти новые знания, написав простой рабочий пример, чтобы дать вам представление о том, как можно использовать веб-хранилище. Наш пример позволит вам ввести имя, после чего страница обновится, чтобы дать вам персональное приветствие. Это состояние также будет сохраняться при перезагрузке страницы / браузера, поскольку имя хранится в веб-хранилище.</p>
+### Более развёрнутый пример
 
-<p>Вы можете найти пример HTML на <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> — он содержит простой веб-сайт с заголовком, контентом и нижним колонтитулом, а также форму для ввода вашего имени.</p>
+Давайте применим эти новые знания, написав простой рабочий пример, чтобы дать вам представление о том, как можно использовать веб-хранилище. Наш пример позволит вам ввести имя, после чего страница обновится, чтобы дать вам персональное приветствие. Это состояние также будет сохраняться при перезагрузке страницы / браузера, поскольку имя хранится в веб-хранилище.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>
+Вы можете найти пример HTML на [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) — он содержит простой веб-сайт с заголовком, контентом и нижним колонтитулом, а также форму для ввода вашего имени.
 
-<p>Давайте создадим пример, чтобы вы могли понять, как он работает.</p>
+![](https://mdn.mozillademos.org/files/15735/web-storage-demo.png)
 
-<ol>
- <li>
-  <p>Во-первых, сделайте локальную копию нашего  <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> файла в новом каталоге на вашем компьютере.</p>
- </li>
- <li>
-  <p>Далее обратите внимание, как наш HTML ссылается на файл JavaScript с именем <code>index.js</code> (см. строку 40). Нам нужно создать его, и записать в него наш код JavaScript. Создайте файл <code>index.js</code> в том же каталоге, что и ваш HTML-файл.</p>
- </li>
- <li>
-  <p>Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:</p>
+Давайте создадим пример, чтобы вы могли понять, как он работает.
 
-  <pre class="brush: js">// create needed constants
-const rememberDiv = document.querySelector('.remember');
-const forgetDiv = document.querySelector('.forget');
-const form = document.querySelector('form');
-const nameInput = document.querySelector('#entername');
-const submitBtn = document.querySelector('#submitname');
-const forgetBtn = document.querySelector('#forgetname');
+1.  Во-первых, сделайте локальную копию нашего [personal-greeting.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html) файла в новом каталоге на вашем компьютере.
+2.  Далее обратите внимание, как наш HTML ссылается на файл JavaScript с именем `index.js` (см. строку 40). Нам нужно создать его, и записать в него наш код JavaScript. Создайте файл `index.js` в том же каталоге, что и ваш HTML-файл.
+3.  Мы начнём с создания ссылок на все функции HTML, которыми мы должны манипулировать в этом примере - мы создадим их все как константы, поскольку эти ссылки не нужно изменять в жизненном цикле приложения. Добавьте следующие строки в ваш файл JavaScript:
 
-const h1 = document.querySelector('h1');
-const personalGreeting = document.querySelector('.personal-greeting');</pre>
- </li>
- <li>
-  <p>Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:</p>
+    ```js
+    // create needed constants
+    const rememberDiv = document.querySelector('.remember');
+    const forgetDiv = document.querySelector('.forget');
+    const form = document.querySelector('form');
+    const nameInput = document.querySelector('#entername');
+    const submitBtn = document.querySelector('#submitname');
+    const forgetBtn = document.querySelector('#forgetname');
 
-  <pre class="brush: js">// Stop the form from submitting when a button is pressed
-form.addEventListener('submit', function(e) {
-  e.preventDefault();
-});</pre>
- </li>
- <li>
-  <p>Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью <code>setItem()</code>, затем запускаем функцию <code>nameDisplayCheck()</code>, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец: </p>
-
-  <pre class="brush: js">// run function when the 'Say hello' button is clicked
-submitBtn.addEventListener('click', function() {
-  // store the entered name in web storage
-  localStorage.setItem('name', nameInput.value);
-  // run nameDisplayCheck() to sort out displaying the
-  // personalized greetings and updating the form display
-  nameDisplayCheck();
-});</pre>
- </li>
- <li>
-  <p>На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную <code>name</code> из веб-хранилища используя <code>removeItem()</code>, затем снова запускаем <code>nameDisplayCheck()</code> для обновления. Добавьте этот код в конец:</p>
-
-  <pre class="brush: js">// run function when the 'Forget' button is clicked
-forgetBtn.addEventListener('click', function() {
-  // Remove the stored name from web storage
-  localStorage.removeItem('name');
-  // run nameDisplayCheck() to sort out displaying the
-  // generic greeting again and updating the form display
-  nameDisplayCheck();
-});</pre>
- </li>
- <li>
-  <p>Самое время для определения самой функции <code>nameDisplayCheck()</code>. Здесь мы проверяем была ли переменная <code>name</code> сохранена в веб-хранилище с помощью <code>localStorage.getItem('name')</code> в качестве условия. Если переменная <code>name</code> была сохранена, то вызов вернёт - <code>true</code>; если же нет, то - <code>false</code>. Если <code>true</code>, мы показываем персональное приветствие, отображаем кнопку «Forget», и скрываем кнопку «Say hello». Если же <code>false</code>, мы отображаем общее приветствие и делаем обратное. Опять же, добавьте следующий код в конец:</p>
-
-  <pre class="brush: js">// define the nameDisplayCheck() function
-function nameDisplayCheck() {
-  // check whether the 'name' data item is stored in web Storage
-  if(localStorage.getItem('name')) {
-    // If it is, display personalized greeting
-    let name = localStorage.getItem('name');
-    h1.textContent = 'Welcome, ' + name;
-    personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
-    // hide the 'remember' part of the form and show the 'forget' part
-    forgetDiv.style.display = 'block';
-    rememberDiv.style.display = 'none';
-  } else {
-    // if not, display generic greeting
-    h1.textContent = 'Welcome to our website ';
-    personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
-    // hide the 'forget' part of the form and show the 'remember' part
-    forgetDiv.style.display = 'none';
-    rememberDiv.style.display = 'block';
-  }
-}</pre>
- </li>
- <li>
-  <p>Последнее но не менее важное, нам необходимо запускать функцию <code>nameDisplayCheck()</code> при каждой загрузке страницы. Если мы не сделаем этого, персональное приветствие не будет сохранятся после перезагрузки страницы. Добавьте следующий фрагмент в конец вашего кода:</p>
+    const h1 = document.querySelector('h1');
+    const personalGreeting = document.querySelector('.personal-greeting');
+    ```
+
+4.  Далее нам нужно включить небольшой обработчик событий, чтобы форма фактически не отправляла себя при нажатии кнопки отправки, так как это не то поведение, которое нам нужно. Добавьте этот фрагмент ниже вашего предыдущего кода:
+
+    ```js
+    // Stop the form from submitting when a button is pressed
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+    });
+    ```
+
+5.  Теперь нам нужно добавить обработчик событий, функция-обработчик которого будет запускаться при нажатии кнопки «Say hello». В комментариях подробно объясняется, что делает каждый бит, но в сущности здесь мы берём имя, которое пользователь ввёл в поле ввода текста, и сохраняем его в веб-хранилище с помощью `setItem()`, затем запускаем функцию `nameDisplayCheck()`, которая будет обрабатывать обновление фактического текста сайта. Добавьте это в конец:
+
+    ```js
+    // run function when the 'Say hello' button is clicked
+    submitBtn.addEventListener('click', function() {
+      // store the entered name in web storage
+      localStorage.setItem('name', nameInput.value);
+      // run nameDisplayCheck() to sort out displaying the
+      // personalized greetings and updating the form display
+      nameDisplayCheck();
+    });
+    ```
+
+6.  На этом этапе нам также необходим обработчик событий для запуска функции при нажатии кнопки «Forget» — она будет отображена только после того как кнопка «Say hello» будет нажата (две формы состояния для переключения между ними). В этой функции мы удаляем переменную `name` из веб-хранилища используя `removeItem()`, затем снова запускаем `nameDisplayCheck()` для обновления. Добавьте этот код в конец:
+
+    ```js
+    // run function when the 'Forget' button is clicked
+    forgetBtn.addEventListener('click', function() {
+      // Remove the stored name from web storage
+      localStorage.removeItem('name');
+      // run nameDisplayCheck() to sort out displaying the
+      // generic greeting again and updating the form display
+      nameDisplayCheck();
+    });
+    ```
+
+7.  Самое время для определения самой функции `nameDisplayCheck()`. Здесь мы проверяем была ли переменная `name` сохранена в веб-хранилище с помощью `localStorage.getItem('name')` в качестве условия. Если переменная `name` была сохранена, то вызов вернёт - `true`; если же нет, то - `false`. Если `true`, мы показываем персональное приветствие, отображаем кнопку «Forget», и скрываем кнопку «Say hello». Если же `false`, мы отображаем общее приветствие и делаем обратное. Опять же, добавьте следующий код в конец:
+
+    ```js
+    // define the nameDisplayCheck() function
+    function nameDisplayCheck() {
+      // check whether the 'name' data item is stored in web Storage
+      if(localStorage.getItem('name')) {
+        // If it is, display personalized greeting
+        let name = localStorage.getItem('name');
+        h1.textContent = 'Welcome, ' + name;
+        personalGreeting.textContent = 'Welcome to our website, ' + name + '! We hope you have fun while you are here.';
+        // hide the 'remember' part of the form and show the 'forget' part
+        forgetDiv.style.display = 'block';
+        rememberDiv.style.display = 'none';
+      } else {
+        // if not, display generic greeting
+        h1.textContent = 'Welcome to our website ';
+        personalGreeting.textContent = 'Welcome to our website. We hope you have fun while you are here.';
+        // hide the 'forget' part of the form and show the 'remember' part
+        forgetDiv.style.display = 'none';
+        rememberDiv.style.display = 'block';
+      }
+    }
+    ```
 
-  <pre class="brush: js">document.body.onload = nameDisplayCheck;</pre>
- </li>
-</ol>
+8.  Последнее но не менее важное, нам необходимо запускать функцию `nameDisplayCheck()` при каждой загрузке страницы. Если мы не сделаем этого, персональное приветствие не будет сохранятся после перезагрузки страницы. Добавьте следующий фрагмент в конец вашего кода:
 
-<p>Ваш пример закончен — отличная работа! Всё что теперь осталось это сохранить ваш код и протестировать вашу HTML страницу в браузере. Вы можете посмотреть нашу <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">завершённую версию работающую здесь</a>.</p>
+    ```js
+    document.body.onload = nameDisplayCheck;
+    ```
 
-<div class="note">
-<p>Есть и другой, немного более комплексный пример описываемый в <a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Using the Web Storage API</a>.</p>
-</div>
+Ваш пример закончен — отличная работа! Всё что теперь осталось это сохранить ваш код и протестировать вашу HTML страницу в браузере. Вы можете посмотреть нашу [завершённую версию работающую здесь](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html).
 
-<h2 id="Храним_более_сложную_информацию_в_IndexedDB">Храним более сложную информацию в IndexedDB</h2>
+> **Примечание:** Есть и другой, немного более комплексный пример описываемый в [Using the Web Storage API](/ru/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API).
 
-<p><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a> (иногда сокращают до IDB) это полная база данных, доступная в браузере, в которой вы можете хранить сложные связанные данные, типы которых не ограничиваются простыми значениями, такими как строки или числа.</p>
+## Храним более сложную информацию в IndexedDB
 
-<p>Вы можете сохранить видео, фото, и почти все остальные файлы с IndexedDB. </p>
+[IndexedDB API](/ru/docs/Web/API/IndexedDB_API) (иногда сокращают до IDB) это полная база данных, доступная в браузере, в которой вы можете хранить сложные связанные данные, типы которых не ограничиваются простыми значениями, такими как строки или числа.
 
-<p dir="ltr" id="tw-target-text">Однако это обходится дорого: IndexedDB гораздо сложнее в использовании, чем Web Storage API.</p>
+Вы можете сохранить видео, фото, и почти все остальные файлы с IndexedDB.
 
-<p dir="ltr" id="tw-target-text">В этом разделе мы действительно только коснёмся того, на что он способен, но мы дадим вам достаточно, чтобы начать.</p>
+Однако это обходится дорого: IndexedDB гораздо сложнее в использовании, чем Web Storage API.
 
-<h3 dir="ltr" id="Работа_с_примером_хранения_заметок">Работа с примером хранения заметок</h3>
+В этом разделе мы действительно только коснёмся того, на что он способен, но мы дадим вам достаточно, чтобы начать.
 
-<p>Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.</p>
+### Работа с примером хранения заметок
 
-<p>The app looks something like this:</p>
+Here we'll run you through an example that allows you to store notes in your browser and view and delete them whenever you like, getting you to build it up for yourself and explaining the most fundamental parts of IDB as we go along.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+The app looks something like this:
 
-<p>Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.</p>
+![](https://mdn.mozillademos.org/files/15744/idb-demo.png)
 
-<h3 id="Предустановка">Предустановка</h3>
+Each note has a title and some body text, each individually editable. The JavaScript code we'll go through below has detailed comments to help you understand what's going on.
 
-<ol>
- <li>First of all, make local copies of our <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css">style.css</a></code>, and <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js">index-start.js</a></code> files into a new directory on your local machine.</li>
- <li>Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.</li>
- <li>Rename your JavaScript file to <code>index.js</code>. You are now ready to start adding code to it.</li>
-</ol>
+### Предустановка
 
-<h3 id="Настраиваем_базу_данных">Настраиваем базу данных</h3>
+1.  First of all, make local copies of our [`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css), and [`index-start.js`](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js) files into a new directory on your local machine.
+2.  Have a look at the files. You'll see that the HTML is pretty simple: a web site with a header and footer, as well as a main content area that contains a place to display notes, and a form for entering new notes into the database. The CSS provides some simple styling to make it clearer what is going on. The JavaScript file contains five declared constants containing references to the {{htmlelement("ul")}} element the notes will be displayed in, the title and body {{htmlelement("input")}} elements, the {{htmlelement("form")}} itself, and the {{htmlelement("button")}}.
+3.  Rename your JavaScript file to `index.js`. You are now ready to start adding code to it.
 
-<p>Now let's look at what we have to do in the first place, to actually set up a database.</p>
+### Настраиваем базу данных
 
-<ol>
- <li>
-  <p>Below the constant declarations, add the following lines:</p>
+Now let's look at what we have to do in the first place, to actually set up a database.
 
-  <pre class="brush: js">// Create an instance of a db object for us to store the open database in
-let db;</pre>
+1.  Below the constant declarations, add the following lines:
 
-  <p>Here we are declaring a variable called <code>db</code> — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.</p>
- </li>
- <li>
-  <p>Next, add the following to the bottom of your code:</p>
+    ```js
+    // Create an instance of a db object for us to store the open database in
+    let db;
+    ```
 
-  <pre class="brush: js">window.onload = function() {
+    Here we are declaring a variable called `db` — this will later be used to store an object representing our database. We will use this in a few places, so we've declared it globally here to make things easier.
 
-};</pre>
+2.  Next, add the following to the bottom of your code:
 
-  <p>We will write all of our subsequent code inside this <code>window.onload</code> event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).</p>
- </li>
- <li>
-  <p>Inside the <code>window.onload</code> handler, add the following:</p>
+    ```js
+    window.onload = function() {
 
-  <pre class="brush: js">// Open our database; it is created if it doesn't already exist
-// (see onupgradeneeded below)
-let request = window.indexedDB.open('notes', 1);</pre>
+    };
+    ```
 
-  <p>This line creates a <code>request</code> to open version <code>1</code> of a database called <code>notes</code>. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.</p>
+    We will write all of our subsequent code inside this `window.onload` event handler function, called when the window's {{event("load")}} event fires, to make sure we don't try to use IndexedDB functionality before the app has completely finished loading (it could fail if we don't).
 
-  <p>To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it <code>request</code> so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.</p>
+3.  Inside the `window.onload` handler, add the following:
 
-  <div class="note">
-  <p><strong>Note</strong>: The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the <code>onupgradeneeded</code> handler (see below), etc. We won't cover upgrading databases in this simple tutorial.</p>
-  </div>
- </li>
- <li>
-  <p>Now add the following event handlers just below your previous addition — again inside the <code>window.onload</code> handler:</p>
+    ```js
+    // Open our database; it is created if it doesn't already exist
+    // (see onupgradeneeded below)
+    let request = window.indexedDB.open('notes', 1);
+    ```
 
-  <pre class="brush: js">// onerror handler signifies that the database didn't open successfully
-request.onerror = function() {
-  console.log('Database failed to open');
-};
+    This line creates a `request` to open version `1` of a database called `notes`. If this doesn't already exist, it will be created for you by subsequent code. You will see this request pattern used very often throughout IndexedDB. Database operations take time. You don't want to hang the browser while you wait for the results, so database operations are {{Glossary("asynchronous")}}, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.
 
-// onsuccess handler signifies that the database opened successfully
-request.onsuccess = function() {
-  console.log('Database opened successfully');
+    To handle this in IndexedDB, you create a request object (which can be called anything you like — we called it `request` so it is obvious what it is for). You then use event handlers to run code when the request completes, fails, etc., which you'll see in use below.
 
-  // Store the opened database object in the db variable. This is used a lot below
-  db = request.result;
+    > **Примечание:** The version number is important. If you want to upgrade your database (for example, by changing the table structure), you have to run your code again with an increased version number, different schema specified inside the `onupgradeneeded` handler (see below), etc. We won't cover upgrading databases in this simple tutorial.
 
-  // Run the displayData() function to display the notes already in the IDB
-  displayData();
-};</pre>
+4.  Now add the following event handlers just below your previous addition — again inside the `window.onload` handler:
 
-  <p>The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.</p>
+    ```js
+    // onerror handler signifies that the database didn't open successfully
+    request.onerror = function() {
+      console.log('Database failed to open');
+    };
 
-  <p>The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the <code>db</code> variable we created earlier for later use. We also run a custom function called <code>displayData()</code>, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.</p>
- </li>
- <li>
-  <p>Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:</p>
+    // onsuccess handler signifies that the database opened successfully
+    request.onsuccess = function() {
+      console.log('Database opened successfully');
 
-  <pre class="brush: js">// Setup the database tables if this has not already been done
-request.onupgradeneeded = function(e) {
-  // Grab a reference to the opened database
-  let db = e.target.result;
+      // Store the opened database object in the db variable. This is used a lot below
+      db = request.result;
 
-  // Create an objectStore to store our notes in (basically like a single table)
-  // including a auto-incrementing key
-  let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+      // Run the displayData() function to display the notes already in the IDB
+      displayData();
+    };
+    ```
 
-  // Define what data items the objectStore will contain
-  objectStore.createIndex('title', 'title', { unique: false });
-  objectStore.createIndex('body', 'body', { unique: false });
+    The {{domxref("IDBRequest.onerror", "request.onerror")}} handler will run if the system comes back saying that the request failed. This allows you to respond to this problem. In our simple example, we just print a message to the JavaScript console.
 
-  console.log('Database setup complete');
-};</pre>
+    The {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} handler on the other hand will run if the request returns successfully, meaning the database was successfully opened. If this is the case, an object representing the opened database becomes available in the {{domxref("IDBRequest.result", "request.result")}} property, allowing us to manipulate the database. We store this in the `db` variable we created earlier for later use. We also run a custom function called `displayData()`, which displays the data in the database inside the {{HTMLElement("ul")}}. We run it now so that the notes already in the database are displayed as soon as the page loads. You'll see this defined later on.
 
-  <p>This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from <code>e.target.result</code> (the event target's <code>result</code> property), which is the <code>request</code> object. This is equivalent to the line <code>db = request.result;</code> inside the <code>onsuccess</code> handler, but we need to do this separately here because the <code>onupgradeneeded</code> handler (if needed) will run before the <code>onsuccess</code> handler, meaning that the <code>db</code> value wouldn't be available if we didn't do this.</p>
+5.  Finally for this section, we'll add probably the most important event handler for setting up the database: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupdateneeded")}}. This handler runs if the database has not already been set up, or if the database is opened with a bigger version number than the existing stored database (when performing an upgrade). Add the following code, below your previous handler:
+
+    ```js
+    // Setup the database tables if this has not already been done
+    request.onupgradeneeded = function(e) {
+      // Grab a reference to the opened database
+      let db = e.target.result;
+
+      // Create an objectStore to store our notes in (basically like a single table)
+      // including a auto-incrementing key
+      let objectStore = db.createObjectStore('notes', { keyPath: 'id', autoIncrement:true });
+
+      // Define what data items the objectStore will contain
+      objectStore.createIndex('title', 'title', { unique: false });
+      objectStore.createIndex('body', 'body', { unique: false });
+
+      console.log('Database setup complete');
+    };
+    ```
 
-  <p>We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an <code>autoIncrement</code> key field called <code>id</code> — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the <code>id</code> field will be used to uniquely identify records, such as when deleting or displaying a record.</p>
+    This is where we define the schema (structure) of our database; that is, the set of columns (or fields) it contains. Here we first grab a reference to the existing database from `e.target.result` (the event target's `result` property), which is the `request` object. This is equivalent to the line `db = request.result;` inside the `onsuccess` handler, but we need to do this separately here because the `onupgradeneeded` handler (if needed) will run before the `onsuccess` handler, meaning that the `db` value wouldn't be available if we didn't do this.
 
-  <p>We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: <code>title</code> (which will contain a title for each note), and <code>body</code> (which will contain the body text of the note).</p>
- </li>
-</ol>
+    We then use {{domxref("IDBDatabase.createObjectStore()")}} to create a new object store inside our opened database. This is equivalent to a single table in a conventional database system. We've given it the name notes, and also specified an `autoIncrement` key field called `id` — in each new record this will automatically be given an incremented value — the developer doesn't need to set this explicitly. Being the key, the `id` field will be used to uniquely identify records, such as when deleting or displaying a record.
 
-<p>So with this simple database schema set up, when we start adding records to the database each one will be represented as an object along these lines:</p>
+    We also create two other indexes (fields) using the {{domxref("IDBObjectStore.createIndex()")}} method: `title` (which will contain a title for each note), and `body` (which will contain the body text of the note).
 
-<pre class="brush: js">{
+So with this simple database schema set up, when we start adding records to the database each one will be represented as an object along these lines:
+
+```js
+{
   title: "Buy milk",
   body: "Need both cows milk and soya.",
   id: 8
-}</pre>
+}
+```
 
-<h3 id="Добавляем_данные_в_базу_данных">Добавляем данные в базу данных</h3>
+### Добавляем данные в базу данных
 
-<p>Now let's look at how we can add records to the database. This will be done using the form on our page.</p>
+Now let's look at how we can add records to the database. This will be done using the form on our page.
 
-<p>Below your previous event handler (but still inside the <code>window.onload</code> handler), add the following line, which sets up an <code>onsubmit</code> handler that runs a function called <code>addData()</code> when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):</p>
+Below your previous event handler (but still inside the `window.onload` handler), add the following line, which sets up an `onsubmit` handler that runs a function called `addData()` when the form is submitted (when the submit {{htmlelement("button")}} is pressed leading to a successful form submission):
 
-<pre class="brush: js">// Create an onsubmit handler so that when the form is submitted the addData() function is run
-form.onsubmit = addData;</pre>
+```js
+// Create an onsubmit handler so that when the form is submitted the addData() function is run
+form.onsubmit = addData;
+```
 
-<p>Now let's define the <code>addData()</code> function. Add this below your previous line:</p>
+Now let's define the `addData()` function. Add this below your previous line:
 
-<pre class="brush: js">// Define the addData() function
+```js
+// Define the addData() function
 function addData(e) {
   // prevent default - we don't want the form to submit in the conventional way
   e.preventDefault();
@@ -422,24 +394,24 @@ function addData(e) {
   transaction.onerror = function() {
     console.log('Transaction not opened due to error');
   };
-}</pre>
+}
+```
 
-<p>This is quite complex; breaking it down, we:</p>
+This is quite complex; breaking it down, we:
 
-<ul>
- <li>Run {{domxref("Event.preventDefault()")}} on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience).</li>
- <li>Create an object representing a record to enter into the database, populating it with values from the form inputs. note that we don't have to explicitly include an <code>id</code> value — as we expained early, this is auto-populated.</li>
- <li>Open a <code>readwrite</code> transaction against the <code>notes</code> object store using the {{domxref("IDBDatabase.transaction()")}} method. This transaction object allows us to access the object store so we can do something to it, e.g. add a new record.</li>
- <li>Access the object store using the {{domxref("IDBTransaction.objectStore")}} property, saving it in the <code>objectStore</code> variable.</li>
- <li>Add the new record to the database using {{domxref("IDBObjectStore.add()")}}. This creates a request object, in the same fashion as we've seen before.</li>
- <li>Add a bunch of event handlers to the <code>request</code> and the <code>transaction</code> to run code at critical points in the lifecycle. Once the request has succeeded, we clear the form inputs ready for entering the next note. Once the transaction has completed, we run the <code>displayData()</code> function again to update the display of notes on the page.</li>
-</ul>
+- Run {{domxref("Event.preventDefault()")}} on the event object to stop the form actually submitting in the conventional manner (this would cause a page refresh and spoil the experience).
+- Create an object representing a record to enter into the database, populating it with values from the form inputs. note that we don't have to explicitly include an `id` value — as we expained early, this is auto-populated.
+- Open a `readwrite` transaction against the `notes` object store using the {{domxref("IDBDatabase.transaction()")}} method. This transaction object allows us to access the object store so we can do something to it, e.g. add a new record.
+- Access the object store using the {{domxref("IDBTransaction.objectStore")}} property, saving it in the `objectStore` variable.
+- Add the new record to the database using {{domxref("IDBObjectStore.add()")}}. This creates a request object, in the same fashion as we've seen before.
+- Add a bunch of event handlers to the `request` and the `transaction` to run code at critical points in the lifecycle. Once the request has succeeded, we clear the form inputs ready for entering the next note. Once the transaction has completed, we run the `displayData()` function again to update the display of notes on the page.
 
-<h3 id="Отображаем_данные">Отображаем данные</h3>
+### Отображаем данные
 
-<p>We've referenced <code>displayData()</code> twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:</p>
+We've referenced `displayData()` twice in our code already, so we'd probably better define it. Add this to your code, below the previous function definition:
 
-<pre class="brush: js">// Define the displayData() function
+```js
+// Define the displayData() function
 function displayData() {
   // Here we empty the contents of the list element each time the display is updated
   // If you ddn't do this, you'd get duplicates listed each time a new note is added
@@ -498,25 +470,25 @@ function displayData() {
       console.log('Notes all displayed');
     }
   };
-}</pre>
+}
+```
 
-<p>Again, let's break this down:</p>
+Again, let's break this down:
 
-<ul>
- <li>First we empty out the {{htmlelement("ul")}} element's content, before then filling it with the updated content. If you didn't do this, you'd end up with a huge list of duplicated content being added to with each update.</li>
- <li>Next, we get a reference to the <code>notes</code> object store using {{domxref("IDBDatabase.transaction()")}} and {{domxref("IDBTransaction.objectStore")}} like we did in <code>addData()</code>, except here we are chaining them together in one line.</li>
- <li>The next step is to use {{domxref("IDBObjectStore.openCursor()")}} method to open a request for a cursor — this is a construct that can be used to iterate over the records in an object store. We chain an <code>onsuccess</code> handler on to the end of this line to make the code more concise — when the cursor is successfully returned, the handler is run.</li>
- <li>We get a reference to the cursor itself (an {{domxref("IDBCursor")}} object) using let <code>cursor = e.target.result</code>.</li>
- <li>Next, we check to see if the cursor contains a record from the datastore (<code>if(cursor){ ... }</code>) — if so, we create a DOM fragment, populate it with the data from the record, and insert it into the page (inside the <code>&lt;ul&gt;</code> element). We also include a delete button that, when clicked, will delete that note by running the <code>deleteItem()</code> function, which we will look at in the next section.</li>
- <li>At the end of the <code>if</code> block, we use the {{domxref("IDBCursor.continue()")}} method to advance the cursor to the next record in the datastore, and run the content of the <code>if</code> block again. If there is another record to iterate to, this causes it to be inserted into the page, and then <code>continue()</code> is run again, and so on.</li>
- <li>When there are no more records to iterate over, <code>cursor</code> will return <code>undefined</code>, and therefore the <code>else</code> block will run instead of the <code>if</code> block. This block checks whether any notes were inserted into the <code>&lt;ul&gt;</code> — if not, it inserts a message to say no note was stored.</li>
-</ul>
+- First we empty out the {{htmlelement("ul")}} element's content, before then filling it with the updated content. If you didn't do this, you'd end up with a huge list of duplicated content being added to with each update.
+- Next, we get a reference to the `notes` object store using {{domxref("IDBDatabase.transaction()")}} and {{domxref("IDBTransaction.objectStore")}} like we did in `addData()`, except here we are chaining them together in one line.
+- The next step is to use {{domxref("IDBObjectStore.openCursor()")}} method to open a request for a cursor — this is a construct that can be used to iterate over the records in an object store. We chain an `onsuccess` handler on to the end of this line to make the code more concise — when the cursor is successfully returned, the handler is run.
+- We get a reference to the cursor itself (an {{domxref("IDBCursor")}} object) using let `cursor = e.target.result`.
+- Next, we check to see if the cursor contains a record from the datastore (`if(cursor){ ... }`) — if so, we create a DOM fragment, populate it with the data from the record, and insert it into the page (inside the `<ul>` element). We also include a delete button that, when clicked, will delete that note by running the `deleteItem()` function, which we will look at in the next section.
+- At the end of the `if` block, we use the {{domxref("IDBCursor.continue()")}} method to advance the cursor to the next record in the datastore, and run the content of the `if` block again. If there is another record to iterate to, this causes it to be inserted into the page, and then `continue()` is run again, and so on.
+- When there are no more records to iterate over, `cursor` will return `undefined`, and therefore the `else` block will run instead of the `if` block. This block checks whether any notes were inserted into the `<ul>` — if not, it inserts a message to say no note was stored.
 
-<h3 id="Удаляем_данные">Удаляем данные</h3>
+### Удаляем данные
 
-<p>As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the <code>deleteItem()</code> function, which looks like so:</p>
+As stated above, when a note's delete button is pressed, the note is deleted. This is achieved by the `deleteItem()` function, which looks like so:
 
-<pre class="brush: js">// Define the deleteItem() function
+```js
+// Define the deleteItem() function
 function deleteItem(e) {
   // retrieve the name of the task we want to delete. We need
   // to convert it to a number before trying it use it with IDB; IDB key
@@ -542,181 +514,181 @@ function deleteItem(e) {
       list.appendChild(listItem);
     }
   };
-}</pre>
-
-<ul>
- <li>The first part of this could use some explaining — we retrieve the ID of the record to be deleted using <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — recall that the ID of the record was saved in a <code>data-note-id</code> attribute on the <code>&lt;li&gt;</code> when it was first displayed. We do however need to pass the attribute through the global built-in <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a> object, as it is currently a string, and otherwise won't be recognized by the database.</li>
- <li>We then get a reference to the object store using the same pattern we've seen previously, and use the {{domxref("IDBObjectStore.delete()")}} method to delete the record from the database, passing it the ID.</li>
- <li>When the database transaction is complete, we delete the note's <code>&lt;li&gt;</code> from the DOM, and again do the check to see if the <code>&lt;ul&gt;</code> is now empty, inserting a note as appropriate.</li>
-</ul>
-
-<p>So that's it! Your example should now work.</p>
-
-<p>If you are having trouble with it, feel free to <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">check it against our live example</a> (see the <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">source code</a> also).</p>
-
-<h3 id="Храним_сложные_данные_через_IndexedDB">Храним сложные данные через IndexedDB</h3>
-
-<p>As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.</p>
-
-<p>To demonstrate how to do it, we've written another example called <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">IndexedDB video store</a> (see it <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">running live here also</a>). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead befoire displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.</p>
-
-<p>Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.</p>
-
-<ol>
- <li>
-  <p>For this simple example, we've stored the names of the videos to fetch in an array of objects:</p>
+}
+```
+
+- The first part of this could use some explaining — we retrieve the ID of the record to be deleted using `Number(e.target.parentNode.getAttribute('data-note-id'))` — recall that the ID of the record was saved in a `data-note-id` attribute on the `<li>` when it was first displayed. We do however need to pass the attribute through the global built-in [Number()](/ru/docs/Web/JavaScript/Reference/Global_Objects/Number) object, as it is currently a string, and otherwise won't be recognized by the database.
+- We then get a reference to the object store using the same pattern we've seen previously, and use the {{domxref("IDBObjectStore.delete()")}} method to delete the record from the database, passing it the ID.
+- When the database transaction is complete, we delete the note's `<li>` from the DOM, and again do the check to see if the `<ul>` is now empty, inserting a note as appropriate.
+
+So that's it! Your example should now work.
+
+If you are having trouble with it, feel free to [check it against our live example](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/) (see the [source code](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js) also).
+
+### Храним сложные данные через IndexedDB
+
+As we mentioned above, IndexedDB can be used to store more than just simple text strings. You can store just about anything you want, including complex objects such as video or image blobs. And it isn't much more difficult to achieve than any other type of data.
+
+To demonstrate how to do it, we've written another example called [IndexedDB video store](https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store) (see it [running live here also](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/)). When you first run the example, it downloads all the videos from the network, stores them in an IndexedDB database, and then displays the videos in the UI inside {{htmlelement("video")}} elements. The second time you run it, it finds the videos in the database and gets them from there instead befoire displaying them — this makes subsequent loads much quicker and less bandwidth-hungry.
+
+Let's walk through the most interesting parts of the example. We won't look at it all — a lot of it is similar to the previous example, and the code is well-commented.
+
+1.  For this simple example, we've stored the names of the videos to fetch in an array of objects:
+
+    ```js
+    const videos = [
+      { 'name' : 'crystal' },
+      { 'name' : 'elf' },
+      { 'name' : 'frog' },
+      { 'name' : 'monster' },
+      { 'name' : 'pig' },
+      { 'name' : 'rabbit' }
+    ];
+    ```
+
+2.  To start with, once the database is successfully opened we run an `init()` function. This loops through the different video names, trying to load a record identified by each name from the `videos` database.
+
+    If each video is found in the database (easily checked by seeing whether `request.result` evaluates to `true` — if the record is not present, it will be `undefined`), its video files (stored as blobs) and the video name are passed straight to the `displayVideo()` function to place them in the UI. If not, the video name is passed to the `fetchVideoFromNetwork()` function to ... you guessed it — fetch the video from the network.
+
+    ```js
+    function init() {
+      // Loop through the video names one by one
+      for(let i = 0; i < videos.length; i++) {
+        // Open transaction, get object store, and get() each video by name
+        let objectStore = db.transaction('videos').objectStore('videos');
+        let request = objectStore.get(videos[i].name);
+        request.onsuccess = function() {
+          // If the result exists in the database (is not undefined)
+          if(request.result) {
+            // Grab the videos from IDB and display them using displayVideo()
+            console.log('taking videos from IDB');
+            displayVideo(request.result.mp4, request.result.webm, request.result.name);
+          } else {
+            // Fetch the videos from the network
+            fetchVideoFromNetwork(videos[i]);
+          }
+        };
+      }
+    }
+    ```
+
+3.  The following snippet is taken from inside `fetchVideoFromNetwork()` — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.
+
+    We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.
+
+    When all those promises have fulfilled, the `all()` promise fulfills with an array containing all the individual fulfillment values. Inside the `all()` block, you can see that we then call the `displayVideo()` function like we did before to display the videos in the UI, then we also call the `storeVideo()` function to store those videos inside the database.
+
+    ```js
+    let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =>
+      response.blob()
+    );
+    let webmBlob = fetch('videos/' + video.name + '.webm').then(response =>
+      response.blob()
+    );;
+
+    // Only run the next code when both promises have fulfilled
+    Promise.all([mp4Blob, webmBlob]).then(function(values) {
+      // display the video fetched from the network with displayVideo()
+      displayVideo(values[0], values[1], video.name);
+      // store it in the IDB using storeVideo()
+      storeVideo(values[0], values[1], video.name);
+    });
+    ```
+
+4.  Let's look at `storeVideo()` first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a `readwrite` transaction and get an object store reference our `videos`, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.
+
+    ```js
+    function storeVideo(mp4Blob, webmBlob, name) {
+      // Open transaction, get object store; make it a readwrite so we can write to the IDB
+      let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
+      // Create a record to add to the IDB
+      let record = {
+        mp4 : mp4Blob,
+        webm : webmBlob,
+        name : name
+      }
 
-  <pre class="brush: js">const videos = [
-  { 'name' : 'crystal' },
-  { 'name' : 'elf' },
-  { 'name' : 'frog' },
-  { 'name' : 'monster' },
-  { 'name' : 'pig' },
-  { 'name' : 'rabbit' }
-];</pre>
- </li>
- <li>
-  <p>To start with, once the database is successfully opened we run an <code>init()</code> function. This loops through the different video names, trying to load a record identified by each name from the <code>videos</code> database.</p>
+      // Add the record to the IDB using add()
+      let request = objectStore.add(record);
 
-  <p>If each video is found in the database (easily checked by seeing whether <code>request.result</code> evaluates to <code>true</code> — if the record is not present, it will be <code>undefined</code>), its video files (stored as blobs) and the video name are passed straight to the <code>displayVideo()</code> function to place them in the UI. If not, the video name is passed to the <code>fetchVideoFromNetwork()</code> function to ... you guessed it — fetch the video from the network.</p>
+      ...
 
-  <pre class="brush: js">function init() {
-  // Loop through the video names one by one
-  for(let i = 0; i &lt; videos.length; i++) {
-    // Open transaction, get object store, and get() each video by name
-    let objectStore = db.transaction('videos').objectStore('videos');
-    let request = objectStore.get(videos[i].name);
-    request.onsuccess = function() {
-      // If the result exists in the database (is not undefined)
-      if(request.result) {
-        // Grab the videos from IDB and display them using displayVideo()
-        console.log('taking videos from IDB');
-        displayVideo(request.result.mp4, request.result.webm, request.result.name);
-      } else {
-        // Fetch the videos from the network
-        fetchVideoFromNetwork(videos[i]);
-      }
     };
-  }
-}</pre>
- </li>
- <li>
-  <p>The following snippet is taken from inside <code>fetchVideoFromNetwork()</code> — here we fetch MP4 and WebM versions of the video using two separate {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}} requests. We then use the {{domxref("blob()", "Body.blob()")}} method to extract each response's body as a blob, giving us an object representation of the videos that can be stored and displayed later on.</p>
-
-  <p>We have a problem here though — these two requests are both asynchronous, but we only want to try to display or store the video when both promises have fulfilled. Fortunately there is a built-in method that handles such a problem — {{jsxref("Promise.all()")}}. This takes one argument — references to all the individual promises you want to check for fulfillment placed in an array — and is itself promise-based.</p>
-
-  <p>When all those promises have fulfilled, the <code>all()</code> promise fulfills with an array containing all the individual fulfillment values. Inside the <code>all()</code> block, you can see that we then call the <code>displayVideo()</code> function like we did before to display the videos in the UI, then we also call the <code>storeVideo()</code> function to store those videos inside the database.</p>
-
-  <pre class="brush: js">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
-  response.blob()
-);
-let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
-  response.blob()
-);;
-
-// Only run the next code when both promises have fulfilled
-Promise.all([mp4Blob, webmBlob]).then(function(values) {
-  // display the video fetched from the network with displayVideo()
-  displayVideo(values[0], values[1], video.name);
-  // store it in the IDB using storeVideo()
-  storeVideo(values[0], values[1], video.name);
-});</pre>
- </li>
- <li>
-  <p>Let's look at <code>storeVideo()</code> first. This is very similar to the pattern you saw in the previous example for adding data to the database — we open a <code>readwrite</code> transaction and get an object store reference our <code>videos</code>, create an object representing the record to add to the database, then simply add it using {{domxref("IDBObjectStore.add()")}}.</p>
-
-  <pre class="brush: js">function storeVideo(mp4Blob, webmBlob, name) {
-  // Open transaction, get object store; make it a readwrite so we can write to the IDB
-  let objectStore = db.transaction(['videos'], 'readwrite').objectStore('videos');
-  // Create a record to add to the IDB
-  let record = {
-    mp4 : mp4Blob,
-    webm : webmBlob,
-    name : name
-  }
-
-  // Add the record to the IDB using add()
-  let request = objectStore.add(record);
-
-  ...
+    ```
 
-};</pre>
- </li>
- <li>
-  <p>Last but not least, we have <code>displayVideo()</code>, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a <code>&lt;video&gt;</code> element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the vaues of our {{htmlelement("source")}} element's <code>src</code> attributes, and it works fine.</p>
+5.  Last but not least, we have `displayVideo()`, which creates the DOM elements needed to insert the video in the UI and then appends them to the page. The most interesting parts of this are those shown below — to actually display our video blobs in a `<video>` element, we need to create object URLs (internal URLs that point to the video blobs stored in memory) using the {{domxref("URL.createObjectURL()")}} method. Once that is done, we can set the object URLs to be the vaues of our {{htmlelement("source")}} element's `src` attributes, and it works fine.
 
-  <pre class="brush: js">function displayVideo(mp4Blob, webmBlob, title) {
-  // Create object URLs out of the blobs
-  let mp4URL = URL.createObjectURL(mp4Blob);
-  let webmURL = URL.createObjectURL(webmBlob);
+    ```js
+    function displayVideo(mp4Blob, webmBlob, title) {
+      // Create object URLs out of the blobs
+      let mp4URL = URL.createObjectURL(mp4Blob);
+      let webmURL = URL.createObjectURL(webmBlob);
 
-  ...
+      ...
 
-  let video = document.createElement('video');
-  video.controls = true;
-  let source1 = document.createElement('source');
-  source1.src = mp4URL;
-  source1.type = 'video/mp4';
-  let source2 = document.createElement('source');
-  source2.src = webmURL;
-  source2.type = 'video/webm';
+      let video = document.createElement('video');
+      video.controls = true;
+      let source1 = document.createElement('source');
+      source1.src = mp4URL;
+      source1.type = 'video/mp4';
+      let source2 = document.createElement('source');
+      source2.src = webmURL;
+      source2.type = 'video/webm';
 
-  ...
-}</pre>
- </li>
-</ol>
+      ...
+    }
+    ```
 
-<h2 id="Офлайн_хранение_данных">Офлайн-хранение данных</h2>
+## Офлайн-хранение данных
 
-<p>Пример ниже показывает, как создать приложение, которое будет хранить данные большого объёма в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все ещё нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.</p>
+Пример ниже показывает, как создать приложение, которое будет хранить данные большого объёма в хранилище IndexedDB, избегая необходимости скачивать их повторно. Это важное улучшение пользовательского опыта, но есть одно замечание — основной HTML, CSS, и файлы JavaScript все ещё нужно загружать каждый раз при запросе сайта, это значит, что данный пример не будет работать при отсутствии сетевого соединения.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>
+![](https://mdn.mozillademos.org/files/15759/ff-offline.png)
 
-<p>Это тот случай, когда <a href="/en-US/docs/Web/API/Service_Worker_API">Service workers</a> и <a href="/en-US/docs/Web/API/Cache">Cache API</a> приходят на помощь.</p>
+Это тот случай, когда [Service workers](/ru/docs/Web/API/Service_Worker_API) и [Cache API](/ru/docs/Web/API/Cache) приходят на помощь.
 
-<p>Сервис-воркер это файл JavaScript, который регистрируется на конкретном источнике (веб-сайте или части сайта на конкретном домене) при обращении браузером. После регистрации, он может управлять страницами на этом источнике. Воркер находится между загруженной страницей и сетевым соединением, перехватывая сетевые запросы источника.</p>
+Сервис-воркер это файл JavaScript, который регистрируется на конкретном источнике (веб-сайте или части сайта на конкретном домене) при обращении браузером. После регистрации, он может управлять страницами на этом источнике. Воркер находится между загруженной страницей и сетевым соединением, перехватывая сетевые запросы источника.
 
-<p>Когда worker перехватывает запрос, он может делать многие вещи (смотри <a href="/en-US/docs/Web/API/Service_Worker_API#Other_use_case_ideas">идеи для использования сервис-воркеров</a>), но классический пример это сохранение сетевых ответов и затем доступ к ним при запросе, вместо запросов по сети. В результате, это позволяет сделать веб-сайт полностью работающим в офлайне.</p>
+Когда worker перехватывает запрос, он может делать многие вещи (смотри [идеи для использования сервис-воркеров](/ru/docs/Web/API/Service_Worker_API#Other_use_case_ideas)), но классический пример это сохранение сетевых ответов и затем доступ к ним при запросе, вместо запросов по сети. В результате, это позволяет сделать веб-сайт полностью работающим в офлайне.
 
-<p><a href="/en-US/docs/Web/API/Cache">Cache API</a> это ещё один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.</p>
+[Cache API](/ru/docs/Web/API/Cache) это ещё один механизм хранения данных на клиенте с небольшим отличием — он разработан для хранения HTTP ответов, и прекрасно работает с сервис-воркерами.
 
-<div class="note">
-<p><strong>Note</strong>: Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari ещё не имел реализации, но скоро должна быть.</p>
-</div>
+> **Примечание:** Service workers и Cache доступны в большинстве современных браузеров. В момент написания статьи, Safari ещё не имел реализации, но скоро должна быть.
 
-<h3 id="Пример_сервис_воркера">Пример сервис воркера</h3>
+### Пример сервис воркера
 
-<p>Давайте взглянем на пример, чтобы дать вам немного мыслей о том, что из этого может выйти. Мы создали другую версию примера хранения видео, который использовался в предыдущей секции — эта функциональность идентична, за исключением того, что этот пример также сохраняет HTML, CSS, и JavaScript в Cache API посредством сервис-воркеров, что позволяет приложению работать полностью в офлайне!</p>
+Давайте взглянем на пример, чтобы дать вам немного мыслей о том, что из этого может выйти. Мы создали другую версию примера хранения видео, который использовался в предыдущей секции — эта функциональность идентична, за исключением того, что этот пример также сохраняет HTML, CSS, и JavaScript в Cache API посредством сервис-воркеров, что позволяет приложению работать полностью в офлайне!
 
-<p>Смотри пример <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">хранилище видео с IndexedDB и сервис-воркером</a>, и его <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">исходный код</a>.</p>
+Смотри пример [хранилище видео с IndexedDB и сервис-воркером](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/), и его [исходный код](https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline).
 
-<h4 id="Регистрируем_сервис_воркер">Регистрируем сервис воркер</h4>
+#### Регистрируем сервис воркер
 
-<p>Первое, что нужно заметить, это дополнительный кусок кода, расположенный в основном JavaScript файле (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). Первое,что мы делаем, это проверка на то, что <code>serviceWorker</code> доступен в объекте {{domxref("Navigator")}}. Если этот так, тогда мы знаем, что как минимум, базовые функции сервис-воркера доступны. Внутри проверки мы используем метод {{domxref("ServiceWorkerContainer.register()")}} для регистрации сервис-воркера, находящегося в файле <code>sw.js</code> на текущем источнике, таким образом, он может управлять страницами в текущей или внутренних директориях. Когда промис выполнится, сервис-воркер считается зарегистрированным.</p>
+Первое, что нужно заметить, это дополнительный кусок кода, расположенный в основном JavaScript файле (см. [index.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js)). Первое,что мы делаем, это проверка на то, что `serviceWorker` доступен в объекте {{domxref("Navigator")}}. Если этот так, тогда мы знаем, что как минимум, базовые функции сервис-воркера доступны. Внутри проверки мы используем метод {{domxref("ServiceWorkerContainer.register()")}} для регистрации сервис-воркера, находящегося в файле `sw.js` на текущем источнике, таким образом, он может управлять страницами в текущей или внутренних директориях. Когда промис выполнится, сервис-воркер считается зарегистрированным.
 
-<pre class="brush: js">  // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне
+```js
+  // Регистрация сервис-воркера для обеспечения доступности сайта в офлайне
 
   if('serviceWorker' in navigator) {
     navigator.serviceWorker
              .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
              .then(function() { console.log('Service Worker зарегистрирован'); });
-  }</pre>
+  }
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Путь к файлу <code>sw.js</code> указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Корень -  <code>https://mdn.github.io</code>, и следовательно указываемый путь должен быть <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Если вы хотите использовать данный пример на своём сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.</p>
-</div>
+> **Примечание:** Путь к файлу `sw.js` указан относительно корня сайта, а не JavaScript файла, содержащего основной код. Полный путь - `https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. Корень - `https://mdn.github.io`, и следовательно указываемый путь должен быть `/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js`. Если вы хотите использовать данный пример на своём сервере, вы также должны изменить путь к скрипту. Это довольно запутанно, но обязано так работать по причинам безопасности.
 
-<h4 id="Устанавливаем_сервис_воркер">Устанавливаем сервис воркер</h4>
+#### Устанавливаем сервис воркер
 
-<p>В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнёт контролировать её. Когда это произойдёт, событие <code>install</code> будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.</p>
+В следующий раз, когда страница с сервис-воркером будет запрошена (например когда страница будет перезагружена), сервис-воркер запустится на этой странице и начнёт контролировать её. Когда это произойдёт, событие `install` будет вызвано в сервис-воркере; вы можете написать код внутри сервис-воркера, который будет вызван в процессе установки.
 
-<p>Давайте взглянем на файл сервис-воркера <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a>. Вы можете видеть, что обработчик события <code>install</code> зарегистрирован на <code>self</code>. Ключевое слово <code>self</code> это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.</p>
+Давайте взглянем на файл сервис-воркера [sw.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js). Вы можете видеть, что обработчик события `install` зарегистрирован на `self`. Ключевое слово `self` это способ ссылки на глобальную область видимости сервис-воркера из файла с сервис-воркером.
 
-<p>Внутри обработчика <code>install</code> мы используем метод {{domxref("ExtendableEvent.waitUntil()")}}, доступном в объекте события, чтобы сигнализировать, что работа продолжается, и браузер не должен завершать установку, пока все задачи внутри блока не будут выполнены.</p>
+Внутри обработчика `install` мы используем метод {{domxref("ExtendableEvent.waitUntil()")}}, доступном в объекте события, чтобы сигнализировать, что работа продолжается, и браузер не должен завершать установку, пока все задачи внутри блока не будут выполнены.
 
-<p>Здесь мы видим Cache API в действии. Мы используем метод {{domxref("CacheStorage.open()")}} для открытия нового объекта кеша, в котором ответы могут быть сохранены (похоже на объект хранилища IndexedDB). Промис выполнится с объектом {{domxref("Cache")}}, представляющим собой кеш <code>video-store</code> . Затем мы используем метод {{domxref("Cache.addAll()")}} для получения ресурсов и добавления ответов в кеш.</p>
+Здесь мы видим Cache API в действии. Мы используем метод {{domxref("CacheStorage.open()")}} для открытия нового объекта кеша, в котором ответы могут быть сохранены (похоже на объект хранилища IndexedDB). Промис выполнится с объектом {{domxref("Cache")}}, представляющим собой кеш `video-store` . Затем мы используем метод {{domxref("Cache.addAll()")}} для получения ресурсов и добавления ответов в кеш.
 
-<pre class="brush: js">self.addEventListener('install', function(e) {
+```js
+self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('video-store').then(function(cache) {
      return cache.addAll([
@@ -727,68 +699,65 @@ Promise.all([mp4Blob, webmBlob]).then(function(values) {
      ]);
    })
  );
-});</pre>
+});
+```
 
-<p>На этом установка завершена.</p>
+На этом установка завершена.
 
-<h4 id="Отвечаем_на_последующие_запросы">Отвечаем на последующие запросы</h4>
+#### Отвечаем на последующие запросы
 
-<p>Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кеш, все практически готово. Нужно сделать ещё одну вещь - написать код для ответа на дальнейшие сетевые запросы.</p>
+Когда сервис-воркер зарегистрирован и установлен на странице HTML и сопутствующие ресурсы добавлены в кеш, все практически готово. Нужно сделать ещё одну вещь - написать код для ответа на дальнейшие сетевые запросы.
 
-<p>Это то, что делает вторая часть кода файла <code>sw.js</code>. Мы добавили ещё один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии <code>fetch</code>. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.</p>
+Это то, что делает вторая часть кода файла `sw.js`. Мы добавили ещё один обработчик к сервис-воркеру в глобальной области видимости, который запускает функцию-обработчик при событии `fetch`. Это происходит всякий раз, когда браузер делает запрос ресурса в директорию, где зарегистрирован сервис-воркер.
 
-<p>Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаём особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.</p>
+Внутри обработчика, мы сначала выводим в консоль URL запрашиваемого ресурса. Затем отдаём особый ответ на запрос, используя метод {{domxref("FetchEvent.respondWith()")}}.
 
-<p>Внутри блока мы используем {{domxref("CacheStorage.match()")}} чтобы проверить, можно ли найти соответствующий запрос (т.е. совпадение по URL) в кеше. Промис возвращает найденный ответ или <code>undefined</code>, если ничего не нашлось.</p>
+Внутри блока мы используем {{domxref("CacheStorage.match()")}} чтобы проверить, можно ли найти соответствующий запрос (т.е. совпадение по URL) в кеше. Промис возвращает найденный ответ или `undefined`, если ничего не нашлось.
 
-<p>Если совпадение нашлось, то просто возвращаем его как особый ответ. В противном случае, используем <a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a> для запроса ресурса из сети.</p>
+Если совпадение нашлось, то просто возвращаем его как особый ответ. В противном случае, используем [fetch()](/ru/docs/Web/API/WindowOrWorkerGlobalScope/fetch) для запроса ресурса из сети.
 
-<pre class="brush: js">self.addEventListener('fetch', function(e) {
+```js
+self.addEventListener('fetch', function(e) {
   console.log(e.request.url);
   e.respondWith(
     caches.match(e.request).then(function(response) {
       return response || fetch(e.request);
     })
   );
-});</pre>
+});
+```
 
-<p>На этом все для нашего простого сервис-воркера. Используя подобный метод, вы можете сделать гораздо больше вещей — для получения доп. информации смотрите <a href="https://serviceworke.rs/">рецепты использования сервис-воркеров</a>. Спасибо Paul Kinlan за его статью <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Adding a Service Worker and Offline into your Web App</a>, которая вдохновила на написание данного примера.</p>
+На этом все для нашего простого сервис-воркера. Используя подобный метод, вы можете сделать гораздо больше вещей — для получения доп. информации смотрите [рецепты использования сервис-воркеров](https://serviceworke.rs/). Спасибо Paul Kinlan за его статью [Adding a Service Worker and Offline into your Web App](https://developers.google.com/web/fundamentals/codelabs/offline/), которая вдохновила на написание данного примера.
 
-<h4 id="Тестируем_наш_пример_офлайн">Тестируем наш пример офлайн</h4>
+#### Тестируем наш пример офлайн
 
-<p>Для тестирования <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">примера</a>, вам нужно загрузить его несколько раз, чтобы быть уверенным, что сервис-воркер точно установлен. Когда это сделано, вы можете:</p>
+Для тестирования [примера](https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/), вам нужно загрузить его несколько раз, чтобы быть уверенным, что сервис-воркер точно установлен. Когда это сделано, вы можете:
 
-<ul>
- <li>отключиться от сетевого соединения.</li>
- <li>нажмите <em>Файл &gt; Перейти в офлайн, </em>если вы используете<em> </em>Firefox.</li>
- <li>перейдите в инструменты разработчика, выберите <em>Application &gt; Service Workers</em>, нажмите галочку <em>Offline</em>, если используете Chrome.</li>
-</ul>
+- отключиться от сетевого соединения.
+- нажмите _Файл > Перейти в офлайн,_ если вы используете\_ \_Firefox.
+- перейдите в инструменты разработчика, выберите _Application > Service Workers_, нажмите галочку _Offline_, если используете Chrome.
 
-<p>Если обновите страницу с примером снова, вы увидите, что все работает как обычно. Все данные хранятся в офлайн хранилище — ресурсы страницы в кеше, а видео в базе данных IndexedDB.</p>
+Если обновите страницу с примером снова, вы увидите, что все работает как обычно. Все данные хранятся в офлайн хранилище — ресурсы страницы в кеше, а видео в базе данных IndexedDB.
 
-<h2 id="Итого">Итого</h2>
+## Итого
 
-<p>Это всё, пока что. Мы надеемся наш краткий обзор <code>client-side storage</code> окажется полезным для вас.</p>
+Это всё, пока что. Мы надеемся наш краткий обзор `client-side storage` окажется полезным для вас.
 
-<h2 id="Также_стоит_почитать">Также стоит почитать</h2>
+## Также стоит почитать
 
-<ul>
- <li><a href="/en-US/docs/Web/API/Web_Storage_API">Web storage API</a></li>
- <li><a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Cookies">Cookies</a></li>
- <li><a href="/en-US/docs/Web/API/Service_Worker_API">Service worker API</a></li>
-</ul>
+- [Web storage API](/ru/docs/Web/API/Web_Storage_API)
+- [IndexedDB API](/ru/docs/Web/API/IndexedDB_API)
+- [Cookies](/ru/docs/Web/HTTP/Cookies)
+- [Service worker API](/ru/docs/Web/API/Service_Worker_API)
 
-<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
-</ul>
+- [Introduction to web APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Manipulating documents](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [Third party APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [Drawing graphics](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Video and audio APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [Client-side storage](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
diff --git a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md
index dc4270f4e67656..7a9fc90f99ce28 100644
--- a/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/fetching_data/index.md
@@ -10,275 +10,269 @@ tags:
   - Новичку
 translation_of: Learn/JavaScript/Client-side_web_APIs/Fetching_data
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+Другой очень распространённой задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.
 
-<p class="summary">Другой очень распространённой задачей в современных веб-сайтах и ​​приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки всей новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые делают это возможным, например XMLHttpRequest и API Fetch.</p>
+| Необходимые условия: | Основы JavaScript (см. [первые шаги](/ru/docs/Learn/JavaScript/First_steps), [структурные элементы](/ru/docs/Learn/JavaScript/Building_blocks), [объекты JavaScript](/ru/docs/Learn/JavaScript/Objects)), [основы клиентских API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) |
+| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:              | Узнать, как извлекать данные с сервера и использовать их для обновления содержимого веб-страницы.                                                                                                                                                                                              |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Основы JavaScript (см. <a href="/en-US/docs/Learn/JavaScript/First_steps">первые шаги</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">структурные элементы</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">объекты JavaScript</a>), <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">основы клиентских API</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, как извлекать данные с сервера и использовать их для обновления содержимого веб-страницы.</td>
-  </tr>
- </tbody>
-</table>
+## В чем проблема?
 
-<h2 id="В_чем_проблема">В чем проблема?</h2>
+Первоначальная загрузка страницы в Интернете была простой - вы отправляли запрос на сервер web-сайта, и если всё работает, как и должно, то вся необходимая информация о странице будет загружена и отображена на вашем компьютере.
 
-<p>Первоначальная загрузка страницы в Интернете была простой - вы отправляли запрос на сервер  web-сайта, и если всё работает, как и должно, то вся необходимая информация о странице будет загружена и отображена на вашем компьютере.</p>
+![A basic representation of a web site architecture](https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png)
 
-<p><img alt="A basic representation of a web site architecture" src="https://mdn.mozillademos.org/files/6475/web-site-architechture@2x.png" style="display: block; height: 134px; margin: 0px auto; width: 484px;"></p>
+Проблема с этой моделью заключается в том, что всякий раз, когда вы хотите обновить любую часть страницы, например, чтобы отобразить новый набор продуктов или загрузить новую страницу, вам нужно снова загрузить всю страницу. Это очень расточительно и приводит к плохому пользовательскому опыту, особенно по мере того, как страницы становятся все более сложными.
 
-<p>Проблема с этой моделью заключается в том, что всякий раз, когда вы хотите обновить любую часть страницы, например, чтобы отобразить новый набор продуктов или загрузить новую страницу, вам нужно снова загрузить всю страницу. Это очень расточительно и приводит к плохому пользовательскому опыту, особенно по мере того, как страницы становятся все более сложными.</p>
+### Появление Ajax
 
-<h3 id="Появление_Ajax">Появление Ajax</h3>
+Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, [HTML](/ru/docs/Web/HTML), {{glossary("XML")}}, [JSON](/ru/docs/Learn/JavaScript/Objects/JSON) или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.
 
-<p>Это привело к созданию технологий, позволяющих веб-страницам запрашивать небольшие фрагменты данных (например, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML</a>, {{glossary("XML")}}, <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/JSON">JSON</a> или обычный текст) и отображать их только при необходимости, помогая решать проблему, описанную выше.</p>
+Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - [Fetch API](/ru/docs/Web/API/Fetch_API). Эти технологии позволяют веб-страницам напрямую обрабатывать запросы [HTTP](/ru/docs/Web/HTTP) для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.
 
-<p>Это достигается с помощью таких API, как {{domxref("XMLHttpRequest")}} или - более новой - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Эти технологии позволяют веб-страницам напрямую обрабатывать запросы <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP">HTTP</a> для определённых ресурсов, доступных на сервере, и форматировать результирующие данные по мере необходимости перед их отображением.</p>
+> **Примечание:** Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала {{domxref("XMLHttpRequest")}} для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать `XMLHttpRequest` или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.
 
-<div class="note">
-<p><strong>Примечание</strong>: Вначале эта общая техника была известна как Асинхронный JavaScript и XML (Ajax), поскольку она, как правило, использовала {{domxref("XMLHttpRequest")}} для запроса данных XML. В наши дни это обычно не так (вы, скорее всего, будете использовать <code>XMLHttpRequest</code> или Fetch для запроса JSON), но результат все тот же, и термин «Ajax» по-прежнему часто используется для описания этой техники.</p>
-</div>
+![A simple modern architecture for web sites](https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png)
 
-<p><img alt="A simple modern architecture for web sites" src="https://mdn.mozillademos.org/files/6477/moderne-web-site-architechture@2x.png" style="display: block; height: 235px; margin: 0px auto; width: 559px;"></p>
+Модель Ajax предполагает использование веб-API в качестве прокси для более разумного запроса данных, а не просто для того, чтобы браузер перезагружал всю страницу. Давайте подумаем о значении этого:
 
-<p>Модель Ajax предполагает использование веб-API в качестве прокси для более разумного запроса данных, а не просто для того, чтобы браузер перезагружал всю страницу. Давайте подумаем о значении этого:</p>
+1.  Перейдите на один из ваших любимых сайтов, богатых информацией, таких как Amazon, YouTube, CNN и т.д., и загрузите его.
+2.  Теперь найдите что-нибудь, например, новый продукт. Основной контент изменится, но большая часть информации, подобной заголовку, нижнему колонтитулу, навигационному меню и т. д., останется неизменной.
 
-<ol>
- <li>Перейдите на один из ваших любимых сайтов, богатых информацией, таких как Amazon, YouTube, CNN и т.д., и загрузите его.</li>
- <li>Теперь найдите что-нибудь, например, новый продукт. Основной контент изменится, но большая часть информации, подобной заголовку, нижнему колонтитулу, навигационному меню и т. д., останется неизменной.</li>
-</ol>
+Это действительно хорошо, потому что:
 
-<p>Это действительно хорошо, потому что:</p>
+- Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.
+- Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.
 
-<ul>
- <li>Обновления страницы намного быстрее, и вам не нужно ждать перезагрузки страницы, а это означает, что сайт работает быстрее и воспринимается более отзывчивым.</li>
- <li>Меньше данных загружается при каждом обновлении, что означает меньшее потребление пропускной способности. Это не может быть такой большой проблемой на рабочем столе в широкополосном подключении, но это серьёзная проблема на мобильных устройствах и в развивающихся странах, которые не имеют повсеместного быстрого интернет-сервиса.</li>
-</ul>
+Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий, как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.
 
-<p>Чтобы ускорить работу, некоторые сайты также сохраняют необходимые файлы и данные на компьютере пользователя при первом обращении к сайту, а это означает, что при последующих посещениях они используют локальные версии вместо загрузки свежих копий,  как при первой загрузке страницы. Содержимое загружается с сервера только при его обновлении.</p>
+![A basic web app data flow architecture](https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png)
 
-<p><img alt="A basic web app data flow architecture" src="https://mdn.mozillademos.org/files/6479/web-app-architecture@2x.png" style="display: block; height: 383px; margin: 0px auto; width: 562px;"></p>
+## Основной запрос Ajax
 
-<h2 id="Основной_запрос_Ajax">Основной запрос Ajax</h2>
+Давайте посмотрим, как обрабатывается такой запрос, используя как {{domxref ("XMLHttpRequest")}}, так и [Fetch](/ru/docs/Web/API/Fetch_API). В этих примерах мы будем запрашивать данные из нескольких текстовых файлов и использовать их для заполнения области содержимого.
 
-<p>Давайте посмотрим, как обрабатывается такой запрос, используя как {{domxref ("XMLHttpRequest")}}, так и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a>. В этих примерах мы будем запрашивать данные из нескольких текстовых файлов и использовать их для заполнения области содержимого.</p>
+Этот набор файлов будет действовать как наша поддельная база данных; в реальном приложении мы с большей вероятностью будем использовать серверный язык, такой как PHP, Python или Node, чтобы запрашивать наши данные из базы данных. Здесь, однако, мы хотим сохранить его простым и сосредоточиться на стороне клиента.
 
-<p>Этот набор файлов будет действовать как наша поддельная база данных; в реальном приложении мы с большей вероятностью будем использовать серверный язык, такой как PHP, Python или Node, чтобы запрашивать наши данные из базы данных. Здесь, однако, мы хотим сохранить его простым и сосредоточиться на стороне клиента.</p>
+### XMLHttpRequest
 
-<h3 id="XMLHttpRequest">XMLHttpRequest</h3>
+`XMLHttpRequest` (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.
 
-<p><code>XMLHttpRequest</code> (который часто сокращается до XHR) является довольно старой технологией сейчас - он был изобретён Microsoft в конце 1990-х годов и уже довольно долго стандартизирован в браузерах.</p>
+1.  Чтобы начать этот пример, создайте локальную копию [ajax-start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html) и четырёх текстовых файлов - [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt) и [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt) - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.
+2.  Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции `updateDisplay()` в качестве параметра.
 
-<ol>
- <li>
-  <p>Чтобы начать этот пример, создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/ajax-start.html">ajax-start.html</a> и четырёх текстовых файлов - <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a> - в новом каталоге на вашем компьютере. В этом примере мы загрузим другое стихотворение (который вы вполне можете распознать) через XHR, когда он будет выбран в выпадающем меню.</p>
- </li>
- <li>
-  <p>Внутри элемента {{htmlelement("script")}} добавьте следующий код. В нем хранится ссылка на элементы {{htmlelement("select")}} и {{htmlelement("pre")}} в переменных и определяется {{domxref ("GlobalEventHandlers.onchange", "onchange")}} обработчика событий, так что, когда значение select изменяется, его значение передаётся вызываемой функции <code>updateDisplay()</code> в качестве параметра.</p>
+    ```js
+    var verseChoose = document.querySelector('select');
+    var poemDisplay = document.querySelector('pre');
 
-  <pre class="brush: js">var verseChoose = document.querySelector('select');
-var poemDisplay = document.querySelector('pre');
+    verseChoose.onchange = function() {
+      var verse = verseChoose.value;
+      updateDisplay(verse);
+    };
+    ```
 
-verseChoose.onchange = function() {
-  var verse = verseChoose.value;
-  updateDisplay(verse);
-};</pre>
- </li>
- <li>
-  <p>Давайте определим нашу функцию <code>updateDisplay()</code>. Прежде всего, поставьте следующее ниже своего предыдущего блока кода - это пустая оболочка функции:</p>
+3.  Давайте определим нашу функцию `updateDisplay()`. Прежде всего, поставьте следующее ниже своего предыдущего блока кода - это пустая оболочка функции:
 
-  <pre class="brush: js">function updateDisplay(verse) {
+    ```js
+    function updateDisplay(verse) {
 
-};</pre>
- </li>
- <li>
-  <p>Мы начнём нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.</p>
+    };
+    ```
 
-  <p>Тем не менее, веб-серверы, как правило, чувствительны к регистру, и имя файла не имеет символа "пробела". Чтобы преобразовать «Verse 1» в «verse1.txt», нам нужно преобразовать V в нижний регистр, удалить пробел и добавить .txt в конец. Это можно сделать с помощью {{jsxref("String.replace", "replace ()")}}, {{jsxref("String.toLowerCase", "toLowerCase ()")}} и простой <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">конкатенации строк</a>. Добавьте следующие строки внутри функции <code>updateDisplay()</code>:</p>
+4.  Мы начнём нашу функцию с создания относительного URL-адреса, указывающего на текстовый файл, который мы хотим загрузить и который понадобится нам позже. Значение элемента {{htmlelement("select")}} в любой момент совпадает с текстом внутри выбранного {{htmlelement("option")}} (если вы не укажете другое значение в атрибуте value) - например, «Verse 1». Соответствующий текстовый файл стиха является «verse1.txt» и находится в том же каталоге, что и файл HTML, поэтому будет использоваться только имя файла.
 
-  <pre class="brush: js">verse = verse.replace(" ", "");
-verse = verse.toLowerCase();
-var url = verse + '.txt';</pre>
- </li>
- <li>
-  <p>Чтобы начать создание запроса XHR, вам нужно создать новый объект запроса, используя конструктор {{domxref("XMLHttpRequest()")}}. Вы можете назвать этот объект так, как вам нравится, но мы будем называть его <code>request</code> (запросом), чтобы все было просто. Добавьте следующие ниже строки:</p>
+    Тем не менее, веб-серверы, как правило, чувствительны к регистру, и имя файла не имеет символа "пробела". Чтобы преобразовать «Verse 1» в «verse1.txt», нам нужно преобразовать V в нижний регистр, удалить пробел и добавить .txt в конец. Это можно сделать с помощью {{jsxref("String.replace", "replace ()")}}, {{jsxref("String.toLowerCase", "toLowerCase ()")}} и простой [конкатенации строк](/ru/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings). Добавьте следующие строки внутри функции `updateDisplay()`:
 
-  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
- </li>
- <li>
-  <p>Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP request method</a> использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> здесь и задаём URL как нашу переменную <code>url</code>. Добавьте это ниже вашей предыдущей строки:</p>
+    ```js
+    verse = verse.replace(" ", "");
+    verse = verse.toLowerCase();
+    var url = verse + '.txt';
+    ```
 
-  <pre class="brush: js">request.open('GET', url);</pre>
- </li>
- <li>
-  <p>Затем мы зададим тип ожидаемого ответа, который определяется как свойство {{domxref("XMLHttpRequest.responseType", "responseType")}} - как <code>text</code>. Здесь это не является абсолютно необходимым - XHR возвращает текст по умолчанию - но это хорошая идея, чтобы привыкнуть к настройке этого, если вы хотите получить другие типы данных в будущем. Добавьте следующее:</p>
+5.  Чтобы начать создание запроса XHR, вам нужно создать новый объект запроса, используя конструктор {{domxref("XMLHttpRequest()")}}. Вы можете назвать этот объект так, как вам нравится, но мы будем называть его `request` (запросом), чтобы все было просто. Добавьте следующие ниже строки:
 
-  <pre class="brush: js">request.responseType = 'text';</pre>
- </li>
- <li>
-  <p>Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдёт, данные ответа будут доступны в свойстве <code>response</code> (ответ) объекта запроса XHR.</p>
+    ```js
+    var request = new XMLHttpRequest();
+    ```
 
-  <p>Добавьте следующее ниже вашего последнего дополнения. Вы увидите, что внутри обработчика события <code>onload</code> мы устанавливаем textContent <code>poemDisplay</code> (элемент {{htmlelement("pre")}}) в значение {{domxref("XMLHttpRequest.response", "request. response ")}}.</p>
+6.  Затем вам нужно использовать метод {{domxref("XMLHttpRequest.open", "open()")}}, чтобы указать, какой [HTTP request method](/ru/docs/Web/HTTP/Methods) использовать для запроса ресурса из сети и какой его URL-адрес. Мы просто используем метод [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) здесь и задаём URL как нашу переменную `url`. Добавьте это ниже вашей предыдущей строки:
 
-  <pre class="brush: js">request.onload = function() {
-  poemDisplay.textContent = request.response;
-};</pre>
- </li>
- <li>
-  <p>Вышеприведённая конфигурация запроса XHR  фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:</p>
+    ```js
+    request.open('GET', url);
+    ```
 
-  <pre class="brush: js">request.send();</pre>
- </li>
- <li>
-  <p>Одна из проблем с примером заключается в том, что он не покажет ни одного стихотворения, когда он впервые загружается. Чтобы исправить это, добавьте следующие две строки внизу вашего кода (чуть выше закрывающего тега <code>&lt;/script&gt;</code>), чтобы загрузить стих 1 по умолчанию и убедитесь, что элемент {{htmlelement("select")}} всегда показывает правильное значение:</p>
+7.  Затем мы зададим тип ожидаемого ответа, который определяется как свойство {{domxref("XMLHttpRequest.responseType", "responseType")}} - как `text`. Здесь это не является абсолютно необходимым - XHR возвращает текст по умолчанию - но это хорошая идея, чтобы привыкнуть к настройке этого, если вы хотите получить другие типы данных в будущем. Добавьте следующее:
 
-  <pre class="brush: js">updateDisplay('Verse 1');
-verseChoose.value = 'Verse 1';</pre>
- </li>
-</ol>
+    ```js
+    request.responseType = 'text';
+    ```
 
-<h3 id="Обслуживание_вашего_примера_с_сервера">Обслуживание вашего примера с сервера</h3>
+8.  Получение ресурса из сети - это {{glossary("asynchronous")}} операция, означающая, что вам нужно дождаться завершения этой операции (например, ресурс возвращается из сети), прежде чем вы сможете сделать что-либо с этим ответом, иначе будет выброшена ошибка. XHR позволяет вам обрабатывать это, используя обработчик события {{domxref("XMLHttpRequest.onload", "onload")}} - он запускается при возникновении события {{event("load")}} (когда ответ вернулся). Когда это произойдёт, данные ответа будут доступны в свойстве `response` (ответ) объекта запроса XHR.
 
-<p>Некоторые браузеры (включая Chrome) не будут запускать запросы XHR, если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с <a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a>).</p>
+    Добавьте следующее ниже вашего последнего дополнения. Вы увидите, что внутри обработчика события `onload` мы устанавливаем textContent `poemDisplay` (элемент {{htmlelement("pre")}}) в значение {{domxref("XMLHttpRequest.response", "request. response ")}}.
 
-<p>Чтобы обойти это, нам нужно протестировать пример, запустив его через локальный веб-сервер. Чтобы узнать, как это сделать, прочитайте <a href="/en-US/docs/Learn/Common_questions/set_up_a_local_testing_server">Как настроить локальный тестовый сервер?</a></p>
+    ```js
+    request.onload = function() {
+      poemDisplay.textContent = request.response;
+    };
+    ```
 
-<h3 id="Fetch">Fetch</h3>
+9.  Вышеприведённая конфигурация запроса XHR фактически не будет выполняться до тех пор, пока мы не вызовем метод {{domxref("XMLHttpRequest.send", "send()")}}. Добавьте следующее ниже вашего предыдущего дополнения для вызова функции:
 
-<p>API-интерфейс Fetch - это, в основном, современная замена XHR - недавно он был представлен в браузерах для упрощения асинхронных HTTP-запросов в JavaScript, как для разработчиков, так и для других API, которые строятся поверх Fetch.</p>
+    ```js
+    request.send();
+    ```
 
-<p>Давайте преобразуем последний пример, чтобы использовать Fetch!</p>
+10. Одна из проблем с примером заключается в том, что он не покажет ни одного стихотворения, когда он впервые загружается. Чтобы исправить это, добавьте следующие две строки внизу вашего кода (чуть выше закрывающего тега `</script>`), чтобы загрузить стих 1 по умолчанию и убедитесь, что элемент {{htmlelement("select")}} всегда показывает правильное значение:
 
-<ol>
- <li>
-  <p>Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">xhr-basic.html</a> и четырёх текстовых файлов — <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt">verse1.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt">verse2.txt</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt">verse3.txt</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt">verse4.txt</a>.)</p>
- </li>
- <li>
-  <p>Внутри функции <code>updateDisplay()</code> найдите код XHR:</p>
+    ```js
+    updateDisplay('Verse 1');
+    verseChoose.value = 'Verse 1';
+    ```
 
-  <pre class="brush: js">var request = new XMLHttpRequest();
-request.open('GET', url);
-request.responseType = 'text';
+### Обслуживание вашего примера с сервера
 
-request.onload = function() {
-  poemDisplay.textContent = request.response;
-};
+Некоторые браузеры (включая Chrome) не будут запускать запросы XHR, если вы просто запускаете пример из локального файла. Это связано с ограничениями безопасности (для получения дополнительной информации о безопасности в Интернете, ознакомьтесь с [Website security](/ru/docs/Learn/Server-side/First_steps/Website_security)).
 
-request.send();</pre>
- </li>
- <li>
-  <p>Замените весь XHR-код следующим:</p>
+Чтобы обойти это, нам нужно протестировать пример, запустив его через локальный веб-сервер. Чтобы узнать, как это сделать, прочитайте [Как настроить локальный тестовый сервер?](/ru/docs/Learn/Common_questions/set_up_a_local_testing_server)
 
-  <pre class="brush: js">fetch(url).then(function(response) {
-  response.text().then(function(text) {
-    poemDisplay.textContent = text;
-  });
-});</pre>
- </li>
- <li>
-  <p>Загрузите пример в свой браузер (запустите его через веб-сервер), и он должен работать так же, как и версия XHR, при условии, что вы используете современный браузер.</p>
- </li>
-</ol>
+### Fetch
+
+API-интерфейс Fetch - это, в основном, современная замена XHR - недавно он был представлен в браузерах для упрощения асинхронных HTTP-запросов в JavaScript, как для разработчиков, так и для других API, которые строятся поверх Fetch.
+
+Давайте преобразуем последний пример, чтобы использовать Fetch!
+
+1.  Сделайте копию своего предыдущего готового каталога примеров. (Если вы не работали над предыдущим упражнением, создайте новый каталог и внутри него создайте копии [xhr-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html) и четырёх текстовых файлов — [verse1.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse1.txt), [verse2.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse2.txt), [verse3.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse3.txt) и [verse4.txt](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/verse4.txt).)
+2.  Внутри функции `updateDisplay()` найдите код XHR:
+
+    ```js
+    var request = new XMLHttpRequest();
+    request.open('GET', url);
+    request.responseType = 'text';
 
-<h4 id="Итак_что_происходит_в_коде_Fetch">Итак, что происходит в коде Fetch?</h4>
+    request.onload = function() {
+      poemDisplay.textContent = request.response;
+    };
 
-<p>Прежде всего, мы вызываем метод {{domxref("WorkerOrWindowGlobalScope.fetch()", "fetch()")}}, передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент {{domxref("XMLHttpRequest.open", "request.open()")}} в XHR, плюс вам не нужен эквивалент <code>.send()</code>.</p>
+    request.send();
+    ```
 
-<p>После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец <code>fetch()</code> - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. <code>fetch()</code> возвращает промис, который разрешает ответ, отправленный обратно с сервера, - мы используем <code>.then()</code> для запуска некоторого последующего кода после того, как промис будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события <code>onload</code> в XHR-версии.</p>
+3.  Замените весь XHR-код следующим:
 
-<p>Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает <code>fetch()</code>. Внутри функции мы берём ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент <code>request.responseType = 'text'</code> в версии XHR.</p>
+    ```js
+    fetch(url).then(function(response) {
+      response.text().then(function(text) {
+        poemDisplay.textContent = text;
+      });
+    });
+    ```
+
+4.  Загрузите пример в свой браузер (запустите его через веб-сервер), и он должен работать так же, как и версия XHR, при условии, что вы используете современный браузер.
+
+#### Итак, что происходит в коде Fetch?
+
+Прежде всего, мы вызываем метод {{domxref("WorkerOrWindowGlobalScope.fetch()", "fetch()")}}, передавая ему URL-адрес ресурса, который мы хотим получить. Это современный эквивалент {{domxref("XMLHttpRequest.open", "request.open()")}} в XHR, плюс вам не нужен эквивалент `.send()`.
 
-<p>Вы увидите, что <code>text()</code> также возвращает промис, поэтому мы привязываем к нему другой <code>.then()</code>, внутри которого мы определяем функцию для получения необработанного текста, который выполняет <code>text()</code>.</p>
+После этого вы можете увидеть метод {{jsxref("Promise.then", ".then()")}}, прикреплённый в конец `fetch()` - этот метод является частью {{jsxref("Promise","Promises")}} - современная функция JavaScript для выполнения асинхронных операций. `fetch()` возвращает промис, который разрешает ответ, отправленный обратно с сервера, - мы используем `.then()` для запуска некоторого последующего кода после того, как промис будет разрешено, что является функцией, которую мы определили внутри неё. Это эквивалент обработчика события `onload` в XHR-версии.
 
-<p>Внутри функции внутреннего промиса мы делаем то же самое, что и в версии XHR, - устанавливаем текстовое содержимое {{htmlelement("pre")}} в текстовое значение.</p>
+Эта функция автоматически передаёт ответ от сервера в качестве параметра, когда обещает `fetch()`. Внутри функции мы берём ответ и запускаем его метод {{domxref("Body.text", "text()")}}, который в основном возвращает ответ как необработанный текст. Это эквивалент `request.responseType = 'text'` в версии XHR.
 
-<h3 id="Помимо_промисов">Помимо промисов</h3>
+Вы увидите, что `text()` также возвращает промис, поэтому мы привязываем к нему другой `.then()`, внутри которого мы определяем функцию для получения необработанного текста, который выполняет `text()`.
 
-<p>Промисы немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на промисах.</p>
+Внутри функции внутреннего промиса мы делаем то же самое, что и в версии XHR, - устанавливаем текстовое содержимое {{htmlelement("pre")}} в текстовое значение.
 
-<p>Давайте посмотрим на структуру промисов сверху, чтобы увидеть, можем ли мы ещё немного понять это:</p>
+### Помимо промисов
 
-<pre class="brush: js">fetch(url).then(function(response) {
+Промисы немного запутывают первый раз, когда вы их встречаете, но не беспокойтесь об этом слишком долго. Через некоторое время вы привыкнете к ним, особенно, когда вы узнаете больше о современных JavaScript-API. Большинство из них в большей степени основаны на промисах.
+
+Давайте посмотрим на структуру промисов сверху, чтобы увидеть, можем ли мы ещё немного понять это:
+
+```js
+fetch(url).then(function(response) {
   response.text().then(function(text) {
     poemDisplay.textContent = text;
   });
-});</pre>
+});
+```
 
-<p>В первой строке говорится: «Получить ресурс, расположенный по адресу url» <code>(fetch(url)</code>) и «затем запустить указанную функцию, когда промис будет разрешено» (<code>.then(function() { ... })</code>). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.</p>
+В первой строке говорится: «Получить ресурс, расположенный по адресу url» `(fetch(url)`) и «затем запустить указанную функцию, когда промис будет разрешено» (`.then(function() { ... })`). «Resolve» означает «завершить выполнение указанной операции в какой-то момент в будущем». Указанная операция в этом случае заключается в извлечении ресурса с указанного URL (с использованием HTTP-запроса) и возврата ответа для нас, чтобы что-то сделать.
 
-<p>Фактически, функция, переданная в <code>then()</code>, представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё промис в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:</p>
+Фактически, функция, переданная в `then()`, представляет собой кусок кода, который не запускается немедленно - вместо этого он будет работать в какой-то момент в будущем, когда ответ будет возвращён. Обратите внимание, что вы также можете сохранить своё промис в переменной и цепочку {{jsxref("Promise.then", ".then()")}} вместо этого. Ниже код будет делать то же самое:
 
-<pre class="brush: js">var myFetch = fetch(url);
+```js
+var myFetch = fetch(url);
 
 myFetch.then(function(response) {
   response.text().then(function(text) {
     poemDisplay.textContent = text;
   });
-});</pre>
+});
+```
 
-<p>Поскольку метод <code>fetch()</code> возвращает промис, который разрешает HTTP-ответ, любая функция, которую вы определяете внутри <code>.then()</code>, прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведённый ниже пример будет работать:</p>
+Поскольку метод `fetch()` возвращает промис, который разрешает HTTP-ответ, любая функция, которую вы определяете внутри `.then()`, прикованная к концу, будет автоматически передаваться как параметр. Вы можете вызвать параметр, который вам нравится - приведённый ниже пример будет работать:
 
-<pre class="brush: js">fetch(url).then(function(dogBiscuits) {
+```js
+fetch(url).then(function(dogBiscuits) {
   dogBiscuits.text().then(function(text) {
     poemDisplay.textContent = text;
   });
-});</pre>
+});
+```
 
-<p>Но имеет смысл называть параметр тем, что описывает его содержимое!</p>
+Но имеет смысл называть параметр тем, что описывает его содержимое!
 
-<p>Теперь давайте сосредоточимся только на функции:</p>
+Теперь давайте сосредоточимся только на функции:
 
-<pre class="brush: js">function(response) {
+```js
+function(response) {
   response.text().then(function(text) {
     poemDisplay.textContent = text;
   });
-}</pre>
+}
+```
 
-<p>Объект ответа имеет метод {{domxref("Body.text", "text()")}}, который берёт необработанные данные, содержащиеся в теле ответа, и превращает его в обычный текст, который является форматом, который мы хотим в нем А также возвращает промис (который разрешает полученную текстовую строку), поэтому здесь мы используем другой {{jsxref("Promise.then", ".then()")}}, внутри которого мы определяем другую функцию, которая диктует что мы хотим сделать с этой текстовой строкой. Мы просто устанавливаем свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> элемента {{htmlelement("pre")}} нашего стихотворения равным текстовой строке, так что это получается довольно просто.</p>
+Объект ответа имеет метод {{domxref("Body.text", "text()")}}, который берёт необработанные данные, содержащиеся в теле ответа, и превращает его в обычный текст, который является форматом, который мы хотим в нем А также возвращает промис (который разрешает полученную текстовую строку), поэтому здесь мы используем другой {{jsxref("Promise.then", ".then()")}}, внутри которого мы определяем другую функцию, которая диктует что мы хотим сделать с этой текстовой строкой. Мы просто устанавливаем свойство [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) элемента {{htmlelement("pre")}} нашего стихотворения равным текстовой строке, так что это получается довольно просто.
 
-<p>Также стоит отметить, что вы можете напрямую связывать несколько блоков промисов (<code>.then()</code>, но есть и другие типы) на конце друг друга, передавая результат каждого блока следующему блоку по мере продвижения по цепочке , Это делает промисы очень мощными.</p>
+Также стоит отметить, что вы можете напрямую связывать несколько блоков промисов (`.then()`, но есть и другие типы) на конце друг друга, передавая результат каждого блока следующему блоку по мере продвижения по цепочке , Это делает промисы очень мощными.
 
-<p>Следующий блок делает то же самое, что и наш оригинальный пример, но написан в другом стиле:</p>
+Следующий блок делает то же самое, что и наш оригинальный пример, но написан в другом стиле:
 
-<pre class="brush: js">fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   return response.text()
 }).then(function(text) {
   poemDisplay.textContent = text;
-});</pre>
+});
+```
 
-<p>Многие разработчики любят этот стиль больше, поскольку он более плоский и, возможно, легче читать для более длинных цепочек промисов - каждое последующее промис приходит после предыдущего, а не внутри предыдущего (что может стать громоздким). Единственное отличие состоит в том, что мы должны были включить оператор <code><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">return</a></code> перед <code>response.text()</code>, чтобы заставить его передать результат в следующую ссылку в цепочке.</p>
+Многие разработчики любят этот стиль больше, поскольку он более плоский и, возможно, легче читать для более длинных цепочек промисов - каждое последующее промис приходит после предыдущего, а не внутри предыдущего (что может стать громоздким). Единственное отличие состоит в том, что мы должны были включить оператор [`return`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Return_values) перед `response.text()`, чтобы заставить его передать результат в следующую ссылку в цепочке.
 
-<h3 id="Какой_механизм_следует_использовать">Какой механизм следует использовать?</h3>
+### Какой механизм следует использовать?
 
-<p>Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).</p>
+Это действительно зависит от того, над каким проектом вы работаете. XHR существует уже давно и имеет отличную кросс-браузерную поддержку. Fetch and Promises, с другой стороны, являются более поздним дополнением к веб-платформе, хотя они хорошо поддерживаются в браузере, за исключением Internet Explorer и Safari (которые на момент написания Fetch были доступны в своём предварительный просмотр технологии).
 
-<p>Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.</p>
+Если вам необходимо поддерживать старые браузеры, тогда может быть предпочтительным решение XHR. Если, однако, вы работаете над более прогрессивным проектом и не так обеспокоены старыми браузерами, то Fetch может быть хорошим выбором.
 
-<p>Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.</p>
+Вам действительно нужно учиться - Fetch станет более популярным, так как Internet Explorer отказывается от использования (IE больше не разрабатывается, в пользу нового браузера Microsoft Edge), но вам может понадобиться XHR ещё некоторое время.
 
-<h2 id="Более_сложный_пример">Более сложный пример</h2>
+## Более сложный пример
 
-<p>Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/">в прямом эфире на GitHub</a> и <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store">посмотреть исходный код</a>.</p>
+Чтобы завершить статью, мы рассмотрим несколько более сложный пример, который показывает более интересные применения Fetch. Мы создали образец сайта под названием The Can Store - это вымышленный супермаркет, который продаёт только консервы. Вы можете найти этот пример [в прямом эфире на GitHub](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store/) и [посмотреть исходный код](https://github.com/mdn/learning-area/tree/master/javascript/apis/fetching-data/can-store).
 
-<p><img alt="A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column." src="https://mdn.mozillademos.org/files/14779/can-store.png" style="display: block; margin: 0 auto;"></p>
+![A fake ecommerce site showing search options in the left hand column, and product search results in the right hand column.](https://mdn.mozillademos.org/files/14779/can-store.png)
 
-<p>По умолчанию на сайте отображаются все продукты, но вы можете использовать элементы управления формы в столбце слева, чтобы отфильтровать их по категориям, поисковому запросу или и тому и другому.</p>
+По умолчанию на сайте отображаются все продукты, но вы можете использовать элементы управления формы в столбце слева, чтобы отфильтровать их по категориям, поисковому запросу или и тому и другому.
 
-<p>Существует довольно много сложного кода, который включает фильтрацию продуктов по категориям и поисковым запросам, манипулирование строками, чтобы данные отображались правильно в пользовательском интерфейсе и т.д. Мы не будем обсуждать все это в статье, но вы можете найти обширные комментарии в коде (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js">can-script.js</a>).</p>
+Существует довольно много сложного кода, который включает фильтрацию продуктов по категориям и поисковым запросам, манипулирование строками, чтобы данные отображались правильно в пользовательском интерфейсе и т.д. Мы не будем обсуждать все это в статье, но вы можете найти обширные комментарии в коде (см. [can-script.js](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-script.js)).
 
-<p>Однако мы объясним код Fetch.</p>
+Однако мы объясним код Fetch.
 
-<p>Первый блок, который использует Fetch, можно найти в начале JavaScript:</p>
+Первый блок, который использует Fetch, можно найти в начале JavaScript:
 
-<pre class="brush: js">fetch('products.json').then(function(response) {
+```js
+fetch('products.json').then(function(response) {
   if(response.ok) {
     response.json().then(function(json) {
       products = json;
@@ -287,26 +281,26 @@ myFetch.then(function(response) {
   } else {
     console.log('Network request for products.json failed with response ' + response.status + ': ' + response.statusText);
   }
-});</pre>
+});
+```
 
-<p>Это похоже на то, что мы видели раньше, за исключением того, что второй промис находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое <code>true</code>, если ответ был в порядке (например, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200">200 meaning "OK"</a>) или <code>false</code>, если он не увенчался успехом.</p>
+Это похоже на то, что мы видели раньше, за исключением того, что второй промис находится в условном выражении. В этом случае мы проверяем, был ли возвращённый ответ успешным - свойство {{domxref("response.ok")}} содержит логическое значение, которое `true`, если ответ был в порядке (например, [200 meaning "OK"](/ru/docs/Web/HTTP/Status/200)) или `false`, если он не увенчался успехом.
 
-<p>Если ответ был успешным, мы выполняем второй промис - на этот раз мы используем {{domxref("Body.json", "json()")}}, а не {{domxref("Body.text", "text()")}}, так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.</p>
+Если ответ был успешным, мы выполняем второй промис - на этот раз мы используем {{domxref("Body.json", "json()")}}, а не {{domxref("Body.text", "text()")}}, так как мы хотим вернуть наш ответ как структурированные данные JSON, а не обычный текст.
 
-<p>Если ответ не увенчался успехом, мы выводим сообщение об ошибке в консоль, в котором сообщается о сбое сетевого запроса, который сообщает о статусе сети и описательном сообщении ответа (содержащемся в {{domxref("response.status")}} и {{domxref("response.statusText")}}, соответственно). Конечно, полный веб-сайт будет обрабатывать эту ошибку более грациозно, отображая сообщение на экране пользователя и, возможно, предлагая варианты для исправления ситуации.</p>
+Если ответ не увенчался успехом, мы выводим сообщение об ошибке в консоль, в котором сообщается о сбое сетевого запроса, который сообщает о статусе сети и описательном сообщении ответа (содержащемся в {{domxref("response.status")}} и {{domxref("response.statusText")}}, соответственно). Конечно, полный веб-сайт будет обрабатывать эту ошибку более грациозно, отображая сообщение на экране пользователя и, возможно, предлагая варианты для исправления ситуации.
 
-<p>Вы можете проверить сам случай отказа:</p>
+Вы можете проверить сам случай отказа:
 
-<ol>
- <li>Создание локальной копии файлов примеров (загрузка и распаковка <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">the can-store ZIP file</a>)</li>
- <li>Запустите код через веб-сервер (как описано выше, в <a href="#serving_your_example_from_a_server">Serving your example from a server</a>)</li>
- <li>Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)</li>
- <li>Теперь загрузите индексный файл в свой браузер (например, через <code>localhost:8000</code>) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»</li>
-</ol>
+1.  Создание локальной копии файлов примеров (загрузка и распаковка [the can-store ZIP file](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true))
+2.  Запустите код через веб-сервер (как описано выше, в [Serving your example from a server](#serving_your_example_from_a_server))
+3.  Измените путь к извлечённому файлу, например, «product.json» (т.е. убедитесь, что он написан неправильно)
+4.  Теперь загрузите индексный файл в свой браузер (например, через `localhost:8000`) и посмотрите в консоли разработчика браузера. Вы увидите сообщение в строке «Запрос сети для продуктов.json не удалось с ответом 404: Файл не найден»
 
-<p>Второй блок Fetch можно найти внутри функции <code>fetchBlob()</code>:</p>
+Второй блок Fetch можно найти внутри функции `fetchBlob()`:
 
-<pre class="brush: js">fetch(url).then(function(response) {
+```js
+fetch(url).then(function(response) {
   if(response.ok) {
     response.blob().then(function(blob) {
       objectURL = URL.createObjectURL(blob);
@@ -315,65 +309,56 @@ myFetch.then(function(response) {
   } else {
     console.log('Network request for "' + product.name + '" image failed with response ' + response.status + ': ' + response.statusText);
   }
-});</pre>
+});
+```
+
+Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования {{domxref("Body.json", "json()")}} мы используем {{domxref("Body.blob", "blob()")}} - в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого - [Blob](/ru/docs/Web/API/Blob) - этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.
 
-<p>Это работает во многом так же, как и предыдущий, за исключением того, что вместо использования {{domxref("Body.json", "json()")}} мы используем {{domxref("Body.blob", "blob()")}} - в этом случае мы хотим вернуть наш ответ в виде файла изображения, а формат данных, который мы используем для этого - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a> - этот термин является аббревиатурой от« Binary Large Object »и может в основном использоваться для представляют собой большие файловые объекты, такие как изображения или видеофайлы.</p>
+После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:
 
-<p>После того как мы успешно получили наш blob, мы создаём URL-адрес объекта, используя {{domxref("URL.createObjectURL()", "createObjectURL()")}}. Это возвращает временный внутренний URL-адрес, указывающий на объект, указанный в браузере. Они не очень читаемы, но вы можете видеть, как выглядит, открывая приложение Can Store, Ctrl-/щёлкнуть правой кнопкой мыши по изображению и выбрать опцию «Просмотр изображения» (которая может немного отличаться в зависимости от того, какой браузер вы ). URL-адрес объекта будет отображаться внутри адресной строки и должен выглядеть примерно так:</p>
+```
+blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4
+```
 
-<pre>blob:http://localhost:7800/9b75250e-5279-e249-884f-d03eb1fd84f4</pre>
+### Вызов: XHR версия the Can Store
 
-<h3 id="Вызов_XHR_версия_the_Can_Store">Вызов: XHR версия the Can Store</h3>
+Мы хотели бы, чтобы вы решили преобразовать версию приложения Fetch для использования XHR в качестве полезной части практики. Возьмите [копию ZIP файла](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true) и попробуйте изменить JavaScript, если это необходимо.
 
-<p>Мы хотели бы, чтобы вы решили преобразовать версию приложения Fetch для использования XHR в качестве полезной части практики. Возьмите <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store/can-store.zip?raw=true">копию ZIP файла</a> и попробуйте изменить JavaScript, если это необходимо.</p>
+Некоторые полезные советы:
 
-<p>Некоторые полезные советы:</p>
+- Вы можете найти полезный справочный материал {{domxref("XMLHttpRequest")}}.
+- Вам в основном нужно использовать тот же шаблон, что и раньше, в примере [XHR-basic.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html).
+- Однако вам нужно будет добавить обработку ошибок, которые мы показали вам в версии Fetch Can Store:
 
-<ul>
- <li>Вы можете найти полезный справочный материал {{domxref("XMLHttpRequest")}}.</li>
- <li>Вам в основном нужно использовать тот же шаблон, что и раньше, в примере <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/xhr-basic.html">XHR-basic.html</a>.</li>
- <li>Однако вам нужно будет добавить обработку ошибок, которые мы показали вам в версии Fetch Can Store:
-  <ul>
-   <li>Ответ найден в <code>request.response</code> после того, как событие <code>load</code> запущено, а не в промисе <code>then()</code>.</li>
-   <li>О наилучшем эквиваленте Fetch's <code>response.ok</code> в XHR следует проверить, является ли {{domxref("XMLHttpRequest.status","request.status")}} равным 200 или если {{domxref("XMLHttpRequest.readyState","request.readyState")}} равно 4.</li>
-   <li>Свойства для получения статуса и сообщения состояния одинаковы, но они находятся на объекте <code>request</code> (XHR), а не в объекте <code>response</code>.</li>
-  </ul>
- </li>
-</ul>
+  - Ответ найден в `request.response` после того, как событие `load` запущено, а не в промисе `then()`.
+  - О наилучшем эквиваленте Fetch's `response.ok` в XHR следует проверить, является ли {{domxref("XMLHttpRequest.status","request.status")}} равным 200 или если {{domxref("XMLHttpRequest.readyState","request.readyState")}} равно 4.
+  - Свойства для получения статуса и сообщения состояния одинаковы, но они находятся на объекте `request` (XHR), а не в объекте `response`.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если у вас есть проблемы с этим, не стесняйтесь сравнить свой код с готовой версией на GitHub (<a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js">см. исходник здесь</a>, а также <a href="https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/">см. это в действии</a>).</p>
-</div>
+> **Примечание:** Если у вас есть проблемы с этим, не стесняйтесь сравнить свой код с готовой версией на GitHub ([см. исходник здесь](https://github.com/mdn/learning-area/blob/master/javascript/apis/fetching-data/can-store-xhr/can-script.js), а также [см. это в действии](https://mdn.github.io/learning-area/javascript/apis/fetching-data/can-store-xhr/)).
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Это завершает нашу статью по извлечению данных с сервера. К этому моменту вы должны иметь представление о том, как начать работать как с XHR, так и с Fetch.</p>
+Это завершает нашу статью по извлечению данных с сервера. К этому моменту вы должны иметь представление о том, как начать работать как с XHR, так и с Fetch.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<p>Однако в этой статье обсуждается много разных тем, которые только поцарапали поверхность. Для получения более подробной информации по этим темам, попробуйте следующие статьи:</p>
+Однако в этой статье обсуждается много разных тем, которые только поцарапали поверхность. Для получения более подробной информации по этим темам, попробуйте следующие статьи:
 
-<ul>
- <li><a href="/en-US/docs/AJAX/Getting_Started">Введение в Ajax</a></li>
- <li><a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Применение Fetch</a></li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Работа с JSON данными</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Overview">Обзор HTTP</a></li>
- <li><a href="/en-US/docs/Learn/Server-side">Программирование веб-сайта на стороне сервера</a></li>
-</ul>
+- [Введение в Ajax](/ru/docs/AJAX/Getting_Started)
+- [Применение Fetch](/ru/docs/Web/API/Fetch_API/Using_Fetch)
+- [Promises](/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise)
+- [Работа с JSON данными](/ru/docs/Learn/JavaScript/Objects/JSON)
+- [Обзор HTTP](/ru/docs/Web/HTTP/Overview)
+- [Программирование веб-сайта на стороне сервера](/ru/docs/Learn/Server-side)
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<div>
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Введение в web API</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Манипулирование документами</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Сторонние API</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Видео и аудио API</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Клиентское хранилище</a></li>
-</ul>
-</div>
+- [Введение в web API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Манипулирование документами](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [Получение данных с сервера](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [Сторонние API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [Рисование графики](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Видео и аудио API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [Клиентское хранилище](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
diff --git a/files/ru/learn/javascript/client-side_web_apis/index.md b/files/ru/learn/javascript/client-side_web_apis/index.md
index 40d6bc0c02822f..2ca508a02a4b15 100644
--- a/files/ru/learn/javascript/client-side_web_apis/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/index.md
@@ -19,35 +19,31 @@ tags:
   - data
 translation_of: Learn/JavaScript/Client-side_web_APIs
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">При написании клиентского JavaScript для приложений или веб-сайтов вам не приходится слишком сильно углубляться, пока вы не начнёте использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространённые из них, с которыми вы можете столкнуться в разработке.</p>
+При написании клиентского JavaScript для приложений или веб-сайтов вам не приходится слишком сильно углубляться, пока вы не начнёте использовать API — интерфейсы управления различными аспектами браузера или операционной системы на которой этот сайт работает, или же с данными с других веб-сайтов или сервисов. В этом модуле мы рассмотрим что API из себя представляет и как использовать самые распространённые из них, с которыми вы можете столкнуться в разработке.
 
-<h2 id="Прежде_чем_начать">Прежде чем начать</h2>
+## Прежде чем начать
 
-<p>Убедитесь, что вы прочли и хорошо разбираетесь в следующих модулях (<a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8">Первые шаги</a>, <a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы</a>, и <a href="/en-US/docs/Learn/JavaScript/Objects">Введение в объекты</a>). Эти модули включали в себя простое использование API, так как зачастую без них сложно писать примеры клиентского кода JavaScript. В данном модуле мы предполагаем, что вы хорошо знакомы с основами JavaScript, и немного подробнее рассмотрим общие веб-API.</p>
+Убедитесь, что вы прочли и хорошо разбираетесь в следующих модулях ([Первые шаги](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8), [Структурные элементы](/ru/docs/Learn/JavaScript/Building_blocks), и [Введение в объекты](/ru/docs/Learn/JavaScript/Objects)). Эти модули включали в себя простое использование API, так как зачастую без них сложно писать примеры клиентского кода JavaScript. В данном модуле мы предполагаем, что вы хорошо знакомы с основами JavaScript, и немного подробнее рассмотрим общие веб-API.
 
-<p>Естественно знание <a href="/en-US/docs/Learn/HTML">HTML</a> и <a href="/en-US/docs/Learn/CSS">CSS</a> здесь также необходимо.</p>
+Естественно знание [HTML](/ru/docs/Learn/HTML) и [CSS](/ru/docs/Learn/CSS) здесь также необходимо.
 
-<div class="note">
-<p><strong>Примечание:</strong> Если вы работаете на устройстве, где у вас нет возможности создавать свои собственные файлы, вы можете проверить большинство примеров кода в онлайн-программах вроде <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** Если вы работаете на устройстве, где у вас нет возможности создавать свои собственные файлы, вы можете проверить большинство примеров кода в онлайн-программах вроде [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Введение в различные web API</a></dt>
- <dd>Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Управление документами</a></dt>
- <dd>При написании веб-страниц и приложений вы чаще всего будете управлять каким-либо образом веб-документами. Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a></dt>
- <dd>Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Сторонние API</a></dt>
- <dd>API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Рисование графики</a></dt>
- <dd>В браузере содержатся очень мощные инструменты графического программирования, начиная с языка Scalable Vector Graphics (<a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>) и заканчивая API для рисования элементов HTML {{htmlelement("canvas")}} (см. <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">The Canvas API</a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API">WebGL</a>). В статье содержится введение в Canvas API и дополнительные ресурсы, чтобы вы могли узнать больше.</dd>
- <dt><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Видео и аудио API</a></dt>
- <dd>HTML5 поставляется с элементами для размещения мультимедийных материалов в документах - {{htmlelement("video")}} и {{htmlelement("audio")}} - которые, в свою очередь, имеют свои собственные API для управления воспроизведением, поиском и т. д. В статье показано, как выполнять общие задачи, такие как создание пользовательских элементов управления воспроизведением.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Клиентское хранилище</a></dt>
- <dd>Современные веб-браузеры имеют ряд различных технологий, которые позволяют хранить данные, связанные с веб-сайтами, и извлекать их, когда это необходимо, что позволяет вам сохранять данные в долгосрочной перспективе, сохранять сайты в автономном режиме и многое другое. В этой статье объясняются самые основы того, как они работают.</dd>
-</dl>
+- [Введение в различные web API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+  - : Прежде всего, мы начнём изучение API с основ - что это такое, как это работает, как вы используете их в своём коде и как они структурированы? Мы также рассмотрим, что представляют собой различные основные классы API, и как их можно использовать.
+- [Управление документами](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+  - : При написании веб-страниц и приложений вы чаще всего будете управлять каким-либо образом веб-документами. Обычно это делается с помощью Document Object Model (DOM), набора API-интерфейсов для управления HTML-разметкой и стилями, которые используют объект {{domxref ("Document")}}. В этой статье мы рассмотрим, как использовать DOM, а также некоторые интересные API, которые могут изменить рабочую среду интересными способами.
+- [Получение данных с сервера](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+  - : Другой очень распространённой задачей в современных веб-сайтах и приложениях является получение отдельных элементов данных с сервера для обновления разделов веб-страницы без необходимости загрузки абсолютно новой страницы. Эта, казалось бы, небольшая деталь оказала огромное влияние на производительность и поведение сайтов, поэтому в этой статье мы объясним концепцию и рассмотрим технологии, которые позволяют это, например {{domxref("XMLHttpRequest")}} и [Fetch API](/ru/docs/Web/API/Fetch_API).
+- [Сторонние API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+  - : API, которые мы рассматривали до сих пор, встроены в браузер, но не все API встроены в браузер. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т.д. предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш Twitter-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или с помощью входа в систему Facebook для входа в систему пользователей). В этой статье рассматривается различие между API браузера и сторонними API и показано типичное использование последнего.
+- [Рисование графики](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+  - : В браузере содержатся очень мощные инструменты графического программирования, начиная с языка Scalable Vector Graphics ([SVG](/ru/docs/Web/SVG)) и заканчивая API для рисования элементов HTML {{htmlelement("canvas")}} (см. [The Canvas API](/ru/docs/Web/API/Canvas_API) и [WebGL](/ru/docs/Web/API/WebGL_API)). В статье содержится введение в Canvas API и дополнительные ресурсы, чтобы вы могли узнать больше.
+- [Видео и аудио API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+  - : HTML5 поставляется с элементами для размещения мультимедийных материалов в документах - {{htmlelement("video")}} и {{htmlelement("audio")}} - которые, в свою очередь, имеют свои собственные API для управления воспроизведением, поиском и т. д. В статье показано, как выполнять общие задачи, такие как создание пользовательских элементов управления воспроизведением.
+- [Клиентское хранилище](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
+  - : Современные веб-браузеры имеют ряд различных технологий, которые позволяют хранить данные, связанные с веб-сайтами, и извлекать их, когда это необходимо, что позволяет вам сохранять данные в долгосрочной перспективе, сохранять сайты в автономном режиме и многое другое. В этой статье объясняются самые основы того, как они работают.
diff --git a/files/ru/learn/javascript/client-side_web_apis/introduction/index.md b/files/ru/learn/javascript/client-side_web_apis/introduction/index.md
index bcb12f14af9e18..e04639a15cbb68 100644
--- a/files/ru/learn/javascript/client-side_web_apis/introduction/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/introduction/index.md
@@ -3,120 +3,94 @@ title: Введение в web APIs
 slug: Learn/JavaScript/Client-side_web_APIs/Introduction
 translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<div>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+Начнём с рассмотрения того что представляют собой API на высоком уровне и выясним, как они работают, как их использовать в своих программах и как они структурированы. Также рассмотрим основные виды API и их применение.
 
-<p class="summary">Начнём с рассмотрения того что представляют собой API на высоком уровне и выясним, как они работают, как их использовать в своих программах и как они структурированы. Также рассмотрим основные виды API и их применение.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, понимание основ [HTML](/ru/docs/Learn/HTML) и [CSS](/ru/docs/Learn/CSS), основы JavaScript (см. [первые шаги](/ru/docs/Learn/JavaScript/First_steps), [building blocks](/ru/docs/Learn/JavaScript/Building_blocks), [объекты JavaScript](/ru/docs/Learn/JavaScript/Objects)). |
+| ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Познакомиться с API, выяснить что они могут делать и как их использовать.                                                                                                                                                                                                                                       |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, понимание основ <a href="/en-US/docs/Learn/HTML">HTML</a> и <a href="/en-US/docs/Learn/CSS">CSS</a>,  основы JavaScript (см. <a href="/en-US/docs/Learn/JavaScript/First_steps">первые шаги</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">building blocks</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">объекты JavaScript</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Познакомиться с API, выяснить что они могут делать и как их использовать.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое API?
 
-<h2 id="Что_такое_API">Что такое API?</h2>
+Интерфейс прикладного программирования (Application Programming Interfaces, APIs) - это готовые конструкции языка программирования, позволяющие разработчику строить сложную функциональность с меньшими усилиями. Они "скрывают" более сложный код от программиста, обеспечивая простоту использования.
 
-<p>Интерфейс прикладного программирования (Application Programming Interfaces, APIs) - это готовые конструкции языка программирования, позволяющие разработчику строить сложную функциональность с меньшими усилиями. Они "скрывают" более сложный код от программиста, обеспечивая простоту использования.</p>
+Для лучшего понимания рассмотрим аналогию с домашними электросетями. Когда вы хотите использовать какой-то электроприбор, вы просто подключаете его к розетке, и всё работает. Вы не пытаетесь подключить провода напрямую к источнику тока — делать это бесполезно и, если вы не электрик, сложно и опасно.
 
-<p>Для лучшего понимания рассмотрим аналогию с домашними электросетями. Когда вы хотите использовать какой-то электроприбор, вы просто подключаете его к розетке, и всё работает. Вы не пытаетесь подключить провода напрямую к источнику тока — делать это бесполезно и, если вы не электрик, сложно и опасно.</p>
+![](https://mdn.mozillademos.org/files/14317/plug-socket.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14317/plug-socket.png" style="display: block; height: 472px; margin: 0px auto; width: 700px;"></p>
+_Image source: [Overloaded plug socket](https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/) by [The Clear Communication People](https://www.flickr.com/photos/easy-pics/), on Flickr._
 
-<p><em>Image source: <a href="https://www.flickr.com/photos/easy-pics/9518184890/in/photostream/lightbox/">Overloaded plug socket</a> by <a href="https://www.flickr.com/photos/easy-pics/">The Clear Communication People</a>, on Flickr.</em></p>
+Точно также, если мы хотим, например, программировать 3D графику, гораздо легче сделать это с использованием API, написанных на языках высокого уровня, таких как JavaScript или Python.
 
-<p>Точно также, если мы хотим, например, программировать 3D графику, гораздо легче сделать это с использованием API, написанных на языках высокого уровня, таких как JavaScript или Python.</p>
+> **Примечание:** Смотрите также [API в словаре](/ru/docs/Glossary/API).
 
-<div class="note">
-<p><strong>Note</strong>: Смотрите также <a href="/en-US/docs/Glossary/API">API в словаре</a>.</p>
-</div>
+### API клиентской части JavaScript
 
-<h3 id="API_клиентской_части_JavaScript">API клиентской части JavaScript</h3>
+Для JavaScript на стороне клиента, в частности, существует множество API. Они не являются частью языка, а построены с помощью встроенных функций JavaScript для того, чтобы увеличить ваши возможности при написании кода. Их можно разделить на две категории:
 
-<p>Для JavaScript на стороне клиента, в частности, существует множество API. Они не являются частью языка, а построены с помощью встроенных функций JavaScript для того, чтобы увеличить ваши возможности при написании кода. Их можно разделить на две категории:</p>
+- **API браузера** встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, [API Геолокации (Geolocation API)](/ru/docs/Web/API/Geolocation/Using_geolocation) предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.
+- **Сторонние API** не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, [Twitter API](https://dev.twitter.com/overview/documentation) позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.
 
-<ul>
- <li><strong>API браузера</strong> встроены в веб-браузер и способны использовать данные браузера и компьютерной среды для осуществления более сложных действий с этими данными. К примеру, <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">API Геолокации (Geolocation API)</a> предоставляет простые в использовании конструкции JavaScript для работы с данными местоположения, так что вы сможете, допустим, отметить своё расположение на карте Google Map. На самом деле, в браузере выполняется сложный низкоуровневый код (например, на C++) для подключения к устройству GPS (или любому другому устройству геолокации), получения данных и передачи их браузеру для обработки вашей программой, но, как было сказано выше, эти детали скрыты благодаря API.</li>
- <li><strong>Сторонние API</strong> не встроены в браузер по умолчанию. Такие API и информацию о них обычно необходимо искать в интернете. Например, <a href="https://dev.twitter.com/overview/documentation">Twitter API</a> позволяет размещать последние твиты (tweets) на вашем веб-сайте. В данном API определён набор конструкций, осуществляющих запросы к сервисам Twitter и возвращающих определённые данные.</li>
-</ul>
+![](https://mdn.mozillademos.org/files/13508/browser.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+### Взаимодействие JavaScript, API и других средств JavaScript
 
-<h3 id="Взаимодействие_JavaScript_API_и_других_средств_JavaScript">Взаимодействие JavaScript, API и других средств JavaScript</h3>
+Итак, выше мы поговорили о том, что такое JavaScript API клиентской части и как они связаны с языком JavaScript. Давайте теперь тезисно запишем основные понятия и определим назначение других инструментов JavaScript:
 
-<p>Итак, выше мы поговорили о том, что такое JavaScript API клиентской части и как они связаны с языком JavaScript. Давайте теперь тезисно запишем основные понятия и определим назначение других инструментов JavaScript:</p>
+- JavaScript — Язык программирования сценариев высокого уровня, встроенный в браузер, позволяющий создавать функциональность веб-страниц/приложений. Отметим, что JavaScript также доступен на других программных платформах, таких как [Node](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction). Но пока не будем останавливаться на этом.
+- API браузера (Browser APIs) — конструкции, встроенные в браузер, построенные на основе языка JavaScript, предназначенные для облегчения разработки функциональности.
+- Сторонние API (Third party APIs) — конструкции, встроенные в сторонние платформы (такие как Twitter, Facebook) позволяющие вам использовать часть функциональности этих платформ в своих собственных веб-страницах/приложениях (например, показывать последние Твиты на вашей странице).
+- Библиотеки JavaScript — Обычно один или несколько файлов, содержащих [пользовательские (custom) функции](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions). Такие файлы можно прикрепить к веб-странице, чтобы ускорить или предоставить инструменты для написания общего функциональности. Примеры: jQuery, Mootools и React.
+- JavaScript фреймворки (frameworks) — Следующий шаг в развитии разработки после библиотек. Фреймворки JavaScript (такие как Angular и Ember) стремятся к тому, чтобы быть набором HTML, CSS, JavaScript и других технологий, после установки которого можно "писать" веб-приложение с нуля. Главное различие между фреймворками и библиотеками - "Обратное направление управления" ( “Inversion of Control” ). Вызов метода из библиотеки происходит по требованию разработчика. При использовании фреймворка - наоборот, фреймворк производит вызов кода разработчика.
 
-<ul>
- <li>JavaScript — Язык программирования сценариев высокого уровня, встроенный в браузер, позволяющий создавать функциональность веб-страниц/приложений. Отметим, что JavaScript также доступен на других программных платформах, таких как <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Node</a>. Но пока не будем останавливаться на этом.</li>
- <li>API браузера (Browser APIs) — конструкции, встроенные в браузер, построенные на основе языка JavaScript, предназначенные для облегчения разработки функциональности.</li>
- <li>Сторонние API (Third party APIs) — конструкции, встроенные в сторонние платформы (такие как Twitter, Facebook) позволяющие вам использовать часть функциональности этих платформ в своих собственных веб-страницах/приложениях (например, показывать последние Твиты на вашей странице).</li>
- <li>Библиотеки JavaScript — Обычно один или несколько файлов, содержащих <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Custom_functions">пользовательские (custom) функции</a>. Такие файлы можно прикрепить к веб-странице, чтобы ускорить или предоставить инструменты для написания общего функциональности. Примеры: jQuery, Mootools и React.</li>
- <li>JavaScript фреймворки (frameworks) — Следующий шаг в развитии разработки после библиотек. Фреймворки JavaScript (такие как Angular и Ember) стремятся к тому, чтобы быть набором HTML, CSS, JavaScript и других технологий, после установки которого можно "писать" веб-приложение с нуля. Главное различие между фреймворками и библиотеками - "Обратное направление управления" ( “Inversion of Control” ). Вызов метода из библиотеки происходит по требованию разработчика. При использовании фреймворка - наоборот, фреймворк производит вызов кода разработчика.</li>
-</ul>
+## На что способны API?
 
-<h2 id="На_что_способны_API">На что способны API?</h2>
+Широкое разнообразие API в современных браузерах позволяет наделить ваше приложение большими возможностями. Достаточно посмотреть список на странице [MDN APIs index page](/ru/docs/Web/API).
 
-<p>Широкое разнообразие API в современных браузерах позволяет наделить ваше приложение большими возможностями. Достаточно посмотреть список на странице <a href="https://developer.mozilla.org/en-US/docs/Web/API">MDN APIs index page</a>.</p>
+### Распространённые API браузера
 
-<h3 id="Распространённые_API_браузера">Распространённые API браузера</h3>
+В частности, к наиболее часто используемым категориям API (и которые мы рассмотрим далее в этом модуле) относятся :
 
-<p>В частности, к наиболее часто используемым категориям API (и которые мы рассмотрим далее в этом модуле) относятся :</p>
+- **API для работы с документами**, загруженными в браузер. Явный пример - [DOM (Document Object Model) API](/ru/docs/Web/API/Document_Object_Model), позволяющий работать с HTML и CSS — создавать, удалять и изменять HTML, динамически изменять вид страницы и т.д. Любое всплывающее окно на странице или появляющееся "на ходу" содержимое - всё это благодаря DOM. Узнайте больше об этой категории API на странице [Работа с документами](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents).
+- **API, принимающие данные от сервера**, часто используются, чтобы обновить небольшие части веб-страницы. Эта, казалось бы, малая деталь оказывает огромное влияние на производительность и поведение сайтов, так как нет необходимости перезагружать всю страницу целиком, если вам нужно просто обновить список товаров или новых доступных историй. Это также сделает приложение или сайт более отзывчивым и "живым". Список API, благодаря которым это возможно, включает: [`XMLHttpRequest`](/ru/docs/Web/API/XMLHttpRequest "XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing.") и [Fetch API](/ru/docs/Web/API/Fetch_API). Вы также могли встретить термин **Ajax**, описывающий эту технологию. Узнать больше об этой категории API на странице [Получение данных от сервера](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data).
+- **API для работы с графикой** широко поддерживаются браузерами, самые популярные: [Canvas](/ru/docs/Web/API/Canvas_API) и [WebGL](/ru/docs/Web/API/WebGL_API), позволяющие программно изменять данные о пикселях, содержащиеся в элементе HTML {{htmlelement("canvas")}} для создания 2D и 3D изображений. Например, вы можете нарисовать фигуры, скажем, прямоугольники или круги, импортировать изображение в canvas и применить к нему фильтры, такие как сепия или оттенки серого с помощью Canvas API, или создать сложное 3D-изображение с освещением и текстурами, используя WebGL. Такие API часто используют в сочетании с API создания анимационных циклов (таких как {{domxref("window.requestAnimationFrame()")}}) и другими для создания постоянно меняющегося изображения на экране, как в мультфильмах или играх .
+- **[Аудио и Видео API](https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery)** как {{domxref("HTMLMediaElement")}}, [Web Audio API](/ru/docs/Web/API/Web_Audio_API), и [WebRTC](/ru/docs/Web/API/WebRTC_API) позволяют делать действительно интересные вещи с мультимедиа. Например, создать собственный пользовательский интерфейс (User Interface, UI) для проигрывания аудио/видео, вывод на экран субтитров, записывать видео с веб-камеры для обработки в canvas (см. выше) или для передачи на другой компьютер в видео-конференции, применять звуковые эффекты к аудио-файлам (такие как gain, distortion, panning и т.д.).
+- **API устройств** - в основном, API для обработки и считывания данных с современных устройств удобным для работы веб-приложений образом. Мы уже говорили об API Геолокации, позволяющем считать данные о местоположении устройства. Другие примеры включают уведомление пользователя о появившемся обновлении для веб-приложения с помощью системных уведомлений (см. [Notifications API](/ru/docs/Web/API/Notifications_API)) или вибрации (см. [Vibration API](/ru/docs/Web/API/Vibration_API)).
+- **API хранения данных на стороне пользователя** приобретают всё большее распространение в веб-браузерах — возможность хранить информацию на стороне клиента очень полезна, когда необходимо создать приложение, которое будет сохранять своё состояние между перезагрузками страницы, или даже работать, когда устройство не в сети. В данный момент доступно немало таких API. Например, простое хранилище данных в формате имя/значение (name/value) [Web Storage API](/ru/docs/Web/API/Web_Storage_API) или хранилище данных в формате таблиц [IndexedDB API](/ru/docs/Web/API/IndexedDB_API).
 
-<ul>
- <li><strong>API для работы с документами</strong>, загруженными в браузер. Явный пример - <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model">DOM (Document Object Model) API</a>, позволяющий работать с HTML и CSS — создавать, удалять и изменять HTML, динамически изменять вид страницы и т.д. Любое всплывающее окно на странице или появляющееся "на ходу" содержимое - всё это благодаря DOM. Узнайте больше об этой категории API на странице <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Работа с документами</a>.</li>
- <li><strong>API, принимающие данные от сервера</strong>, часто используются, чтобы обновить небольшие части веб-страницы. Эта, казалось бы, малая деталь оказывает огромное влияние на производительность и поведение сайтов, так как нет необходимости перезагружать всю страницу целиком, если вам нужно просто обновить список товаров или новых доступных историй. Это также сделает приложение или сайт более отзывчивым и "живым". Список API, благодаря которым это возможно, включает: <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest" title="XMLHttpRequest is an API that provides client functionality for transferring data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page refresh. This enables a Web page to update just a part of the page without disrupting what the user is doing."><code>XMLHttpRequest</code></a> и <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch API</a>. Вы также могли встретить термин <strong>Ajax</strong>, описывающий эту технологию. Узнать больше об этой категории API на странице <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных от сервера</a>.</li>
- <li><strong>API для работы с графикой</strong> широко поддерживаются браузерами,  самые популярные: <a href="/en-US/docs/Web/API/Canvas_API">Canvas</a> и <a href="/en-US/docs/Web/API/WebGL_API">WebGL</a>, позволяющие программно изменять данные о пикселях, содержащиеся в элементе HTML  {{htmlelement("canvas")}}  для создания 2D и 3D изображений. Например, вы можете нарисовать фигуры, скажем, прямоугольники или круги, импортировать изображение в canvas и применить к нему фильтры, такие как сепия или оттенки серого с помощью Canvas API, или создать сложное 3D-изображение с освещением и текстурами, используя WebGL. Такие API часто используют в сочетании с API создания анимационных циклов (таких как {{domxref("window.requestAnimationFrame()")}}) и другими для создания постоянно меняющегося изображения на экране, как в мультфильмах или играх .</li>
- <li><strong><a href="https://developer.mozilla.org/en-US/Apps/Fundamentals/Audio_and_video_delivery">Аудио и Видео API</a></strong> как {{domxref("HTMLMediaElement")}}, <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>, и <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> позволяют делать действительно интересные вещи с мультимедиа. Например, создать собственный пользовательский интерфейс (User Interface, UI) для проигрывания аудио/видео, вывод на экран субтитров, записывать видео с веб-камеры для обработки в canvas (см. выше) или для передачи на другой компьютер в видео-конференции, применять звуковые эффекты к аудио-файлам (такие как gain, distortion, panning и т.д.).</li>
- <li><strong>API устройств</strong> - в основном, API для обработки и считывания данных с современных устройств удобным для работы веб-приложений образом. Мы уже говорили об API Геолокации, позволяющем считать данные о местоположении устройства. Другие примеры включают уведомление пользователя о появившемся обновлении для веб-приложения с помощью системных уведомлений (см. <a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a>) или вибрации (см. <a href="/en-US/docs/Web/API/Vibration_API">Vibration API</a>).</li>
- <li><strong>API хранения данных на стороне пользователя</strong> приобретают всё большее распространение в веб-браузерах — возможность хранить информацию на стороне клиента очень полезна, когда необходимо создать приложение, которое будет сохранять своё состояние между перезагрузками страницы, или даже работать, когда устройство не в сети. В данный момент доступно немало таких API. Например, простое хранилище данных в формате имя/значение (name/value)  <a href="/en-US/docs/Web/API/Web_Storage_API">Web Storage API</a> или хранилище данных в формате таблиц <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB API</a>.</li>
-</ul>
+### Распространённые сторонние API
 
-<h3 id="Распространённые_сторонние_API">Распространённые сторонние API</h3>
+Существует множество сторонних API; некоторые из наиболее популярных, которые вы рано или поздно будете использовать, включают:
 
-<p>Существует множество сторонних API; некоторые из наиболее популярных, которые вы рано или поздно будете использовать, включают:</p>
+- [Twitter API](https://dev.twitter.com/overview/documentation) для добавления такой функциональности, как показ последних твитов на сайте.
+- [Google Maps API](https://developers.google.com/maps/) для работы с картами на веб-странице (интересно, что Google Maps также использует этот API). Теперь это целый набор API, который может справляться с широким спектром задач, как свидетельствует [Google Maps API Picker](https://developers.google.com/maps/documentation/api-picker).
+- [Набор Facebook API](https://developers.facebook.com/docs/) позволяет использовать различные части платформы Facebook в вашем приложении, предоставляя, например, возможность входа в систему с логином Facebook, оплаты покупок в приложении, демонстрация целевой рекламы и т.д.
+- [YouTube API](https://developers.google.com/youtube/), предоставляющий возможность встраивать видео с YouTube на вашем сайте, производить поиск, создавать плейлисты и т.д.
+- [Twilio API](https://www.twilio.com/) - фреймворк для встраивания функциональности голосовой и видео связи в вашем приложении, отправки SMS/MMS из приложения и т.д.
 
-<ul>
- <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> для добавления такой функциональности, как показ последних твитов на сайте.</li>
- <li><a href="https://developers.google.com/maps/">Google Maps API</a> для работы с картами на веб-странице (интересно, что Google Maps также использует этот API). Теперь это целый набор API, который может справляться с широким спектром задач, как свидетельствует <a href="https://developers.google.com/maps/documentation/api-picker">Google Maps API Picker</a>.</li>
- <li><a href="https://developers.facebook.com/docs/">Набор Facebook API</a> позволяет использовать различные части платформы Facebook в вашем приложении, предоставляя, например, возможность входа в систему с логином Facebook, оплаты покупок в приложении, демонстрация целевой рекламы и т.д.</li>
- <li><a href="https://developers.google.com/youtube/">YouTube API</a>, предоставляющий возможность встраивать видео с YouTube на вашем сайте, производить поиск, создавать плейлисты и т.д.</li>
- <li><a href="https://www.twilio.com/">Twilio API</a> - фреймворк для встраивания функциональности голосовой и видео связи в вашем приложении, отправки SMS/MMS из приложения и т.д.</li>
-</ul>
+> **Примечание:** вы можете найти информацию о гораздо большем количестве сторонних API в [Каталоге Web API](http://www.programmableweb.com/category/all/apis).
 
-<div class="note">
-<p><strong>Note</strong>: вы можете найти информацию о гораздо большем количестве сторонних API в <a href="http://www.programmableweb.com/category/all/apis">Каталоге Web API</a>.</p>
-</div>
+## Как работает API?
 
-<h2 id="Как_работает_API">Как работает API?</h2>
+Работа разных JavaScript API немного отличается, но, в основном, у них похожие функции и принцип работы.
 
-<p>Работа разных JavaScript API немного отличается, но, в основном, у них похожие функции и принцип работы.</p>
+### Они основаны на объектах
 
-<h3 id="Они_основаны_на_объектах">Они основаны на объектах</h3>
+Взаимодействие с API в коде происходит через один или больше [объектов JavaScript](/ru/docs/Learn/JavaScript/Objects), которые служат контейнерами для информации, с которой работает API (содержится в свойствах объекта), и реализуют функциональность, которую предоставляет API (содержится в методах объекта).
 
-<p>Взаимодействие с API в коде происходит через один или больше <a href="/en-US/docs/Learn/JavaScript/Objects">объектов JavaScript</a>, которые служат контейнерами для информации, с которой работает API (содержится в свойствах объекта), и реализуют функциональность, которую предоставляет API (содержится в методах объекта).</p>
+> **Примечание:** Если вам ещё не известно как работают объекты, советуем вернуться назад и изучить модуль [Основы объектов JavaScript](/ru/docs/Learn/JavaScript/Objects) прежде чем продолжать.
 
-<div class="note">
-<p><strong>Note</strong>: Если вам ещё не известно как работают объекты, советуем вернуться назад и изучить модуль <a href="/en-US/docs/Learn/JavaScript/Objects">Основы объектов JavaScript</a> прежде чем продолжать.</p>
-</div>
+Вернёмся к примеру с API Геолокации — очень простой API, состоящий из нескольких простых объектов:
 
-<p>Вернёмся к примеру с API Геолокации — очень простой API, состоящий из нескольких простых объектов:</p>
+- {{domxref("Geolocation")}}, содержит три метода для контроля и получения геоданных.
+- {{domxref("Position")}}, предоставляет данные о местоположении устройства в заданный момент времени — содержит {{domxref("Coordinates")}} - объект, хранящий координаты и отметку о текущем времени.
+- {{domxref("Coordinates")}}, содержит много полезной информации о расположении устройства, включая широту и долготу, высоту, скорость и направление движения и т.д.
 
-<ul>
- <li>{{domxref("Geolocation")}}, содержит три метода для контроля и получения геоданных.</li>
- <li>{{domxref("Position")}}, предоставляет данные о местоположении устройства в заданный момент времени — содержит {{domxref("Coordinates")}} - объект, хранящий координаты и отметку о текущем времени.</li>
- <li>{{domxref("Coordinates")}}, содержит много полезной информации о расположении устройства, включая широту и долготу, высоту, скорость и направление движения и т.д.</li>
-</ul>
+Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример [maps-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html) ([see it live also](http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)), вы увидите следующий код:
 
-<p>Так как же эти объекты взаимодействуют? Если вы посмотрите на наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">maps-example.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">see it live also</a>), вы увидите следующий код:</p>
-
-<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) {
+```js
+navigator.geolocation.getCurrentPosition(function(position) {
   var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
   var myOptions = {
     zoom: 8,
@@ -125,106 +99,116 @@ translation_of: Learn/JavaScript/Client-side_web_APIs/Introduction
     disableDefaultUI: true
   }
   var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
-});</pre>
+});
+```
 
-<div class="note">
-<p><strong>Note</strong>: Когда вы впервые загрузите приведённый выше пример, появится диалоговое окно, запрашивающее разрешение на передачу данных о местонахождении этому приложению (см. раздел <a href="#у_них_есть_дополнительные_средства_безопасности_там,_где_это_необходимо">У них есть дополнительные средства безопасности там, где это необходимо</a> далее в этой статье). Вам нужно разрешить передачу данных, чтобы иметь возможность отметить своё местоположение на карте. Если вы всё ещё не видите карту, возможно, требуется установить разрешения вручную; это делается разными способами в зависимости от вашего браузера; например, в Firefox перейдите &gt; <em>Tools</em> &gt; <em>Page Info</em> &gt; <em>Permissions</em>, затем измените настройки <em>Share Location</em>; в Chrome перейдите<em> Settings</em> &gt; <em>Privacy</em> &gt; <em>Show advanced settings</em> &gt; <em>Content settings</em> и измените настройки <em>Location</em>.</p>
-</div>
+> **Примечание:** Когда вы впервые загрузите приведённый выше пример, появится диалоговое окно, запрашивающее разрешение на передачу данных о местонахождении этому приложению (см. раздел [У них есть дополнительные средства безопасности там, где это необходимо](#у_них_есть_дополнительные_средства_безопасности_там,_где_это_необходимо) далее в этой статье). Вам нужно разрешить передачу данных, чтобы иметь возможность отметить своё местоположение на карте. Если вы всё ещё не видите карту, возможно, требуется установить разрешения вручную; это делается разными способами в зависимости от вашего браузера; например, в Firefox перейдите > _Tools_ > _Page Info_ > _Permissions_, затем измените настройки _Share Location_; в Chrome перейдите _Settings_ > _Privacy_ > _Show advanced settings_ > _Content settings_ и измените настройки _Location_.
 
-<p>Во-первых, мы хотим использовать метод {{domxref("Geolocation.getCurrentPosition()")}}, чтобы получить текущее положение нашего устройства. Доступ к объекту браузера {{domxref("Geolocation")}} производится с помощью свойства {{domxref("Navigator.geolocation")}}, так что мы начнём с</p>
+Во-первых, мы хотим использовать метод {{domxref("Geolocation.getCurrentPosition()")}}, чтобы получить текущее положение нашего устройства. Доступ к объекту браузера {{domxref("Geolocation")}} производится с помощью свойства {{domxref("Navigator.geolocation")}}, так что мы начнём с
 
-<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>
+```js
+navigator.geolocation.getCurrentPosition(function(position) { ... });
+```
 
-<p>Это эквивалентно следующему коду</p>
+Это эквивалентно следующему коду
 
-<pre class="brush: js">var myGeo = navigator.geolocation;
-myGeo.getCurrentPosition(function(position) { ... });</pre>
+```js
+var myGeo = navigator.geolocation;
+myGeo.getCurrentPosition(function(position) { ... });
+```
 
-<p>Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.</p>
+Но мы можем использовать точки, чтобы связать доступ к свойствам/методам объекта в одно выражение, уменьшая количество строк в программе.
 
-<p>Метод {{domxref("Geolocation.getCurrentPosition()")}} имеет один обязательный параметр - анонимную функцию, которая запустится, когда текущее положение устройства будет успешно считано. Сама эта функция принимает параметр, являющийся объектом {{domxref("Position")}}, представляющим данные о текущем местоположении.</p>
+Метод {{domxref("Geolocation.getCurrentPosition()")}} имеет один обязательный параметр - анонимную функцию, которая запустится, когда текущее положение устройства будет успешно считано. Сама эта функция принимает параметр, являющийся объектом {{domxref("Position")}}, представляющим данные о текущем местоположении.
 
-<div class="note">
-<p><strong>Note</strong>: Функция, которая передаётся другой функции в качестве параметра, называется <a href="/en-US/docs/Glossary/Callback_function">колбэк-функцией (callback function)</a>.</p>
-</div>
+> **Примечание:** Функция, которая передаётся другой функции в качестве параметра, называется [колбэк-функцией (callback function)](/ru/docs/Glossary/Callback_function).
 
-<p>Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (<strong><a href="/en-US/docs/Glossary/Asynchronous">asynchronous</a> operations)</strong>. Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:</p>
+Такой подход, при котором функция вызывается только тогда, когда операция была завершена, очень распространён в JavaScript API — убедиться, что операция была завершена прежде, чем пытаться использовать данные, которые она возвращает, в другой операции. Такие операции также называют асинхронными операциями (**[asynchronous](/ru/docs/Glossary/Asynchronous) operations)**. Учитывая, что получение данных геолокации производится из внешнего устройства (GPS-устройства или другого устройства геолокации), мы не можем быть уверены, что операция считывания будет завершена вовремя и мы сможем незамедлительно использовать возвращаемые ею данные. Поэтому такой код не будет работать:
 
-<pre class="brush: js example-bad">var position = navigator.geolocation.getCurrentPosition();
-var myLatitude = position.coords.latitude;</pre>
+```js example-bad
+var position = navigator.geolocation.getCurrentPosition();
+var myLatitude = position.coords.latitude;
+```
 
-<p>Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием {{glossary("callback function")}}, или более современной системы <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">промисов</a>, которая появилась в ECMAScript 6 и широко используются в новых API.</p>
+Если первая строка ещё не вернула результат, вторая вызовет ошибку из-за того, что данные геолокации ещё не стали доступны. По этой причине, API, использующие асинхронные операции, разрабатываются с использованием {{glossary("callback function")}}, или более современной системы [промисов](/ru/docs/Web/JavaScript/Reference/Global_Objects/Promise), которая появилась в ECMAScript 6 и широко используются в новых API.
 
-<p>Мы совмещаем API Геолокации со сторонним API - Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое  <code>getCurrentPosition()</code> , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:</p>
+Мы совмещаем API Геолокации со сторонним API - Google Maps API, который используем для того, чтобы отметить расположение, возвращаемое `getCurrentPosition()` , на Google Map. Чтобы Google Maps API стал доступен на нашей странице, мы включаем его в HTML документ:
 
-<pre class="brush: html">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>
+```html
+<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+```
 
-<p>Чтобы использовать этот API, во-первых создадим объект <code>LatLng</code> с помощью конструктора <code>google.maps.LatLng()</code> , принимающим данные геолокации {{domxref("Coordinates.latitude")}} и {{domxref("Coordinates.longitude")}} :</p>
+Чтобы использовать этот API, во-первых создадим объект `LatLng` с помощью конструктора `google.maps.LatLng()` , принимающим данные геолокации {{domxref("Coordinates.latitude")}} и {{domxref("Coordinates.longitude")}} :
 
-<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);</pre>
+```js
+var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+```
 
-<p>Этот объект сам является значением свойства <code>center</code> объекта настроек (options), который мы назвали <code>myOptions</code>. Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор <code>google.maps.Map()</code> и передавая ему два параметра — ссылку на элемент {{htmlelement("div")}}, на котором мы хотим отрисовывать карту (с ID <code>map_canvas</code>), и объект настроек (options), который мы определили выше.</p>
+Этот объект сам является значением свойства `center` объекта настроек (options), который мы назвали `myOptions`. Затем мы создаём экземпляр объекта, представляющего нашу карту, вызывая конструктор `google.maps.Map()` и передавая ему два параметра — ссылку на элемент {{htmlelement("div")}}, на котором мы хотим отрисовывать карту (с ID `map_canvas`), и объект настроек (options), который мы определили выше.
 
-<pre class="brush: js">var myOptions = {
+```js
+var myOptions = {
   zoom: 8,
   center: latlng,
   mapTypeId: google.maps.MapTypeId.TERRAIN,
   disableDefaultUI: true
 }
 
-var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);</pre>
+var map = new google.maps.Map(document.querySelector("#map_canvas"), myOptions);
+```
 
-<p>Когда это сделано, наша карта отрисовывается.</p>
+Когда это сделано, наша карта отрисовывается.
 
-<p>Последний блок кода демонстрирует два распространённых подхода, которые вы увидите во многих API:</p>
+Последний блок кода демонстрирует два распространённых подхода, которые вы увидите во многих API:
 
-<ul>
- <li>Во-первых, объекты API обычно содержат конструкторы, которые вызываются для создания экземпляров объектов, используемых при написании программы.</li>
- <li>Во-вторых, объекты API зачастую имеют несколько вариантов (options), которые можно настроить и получить именно ту среду для разработки, которую вы хотите. API конструкторы обычно принимают объекты вариантов (options) в качестве параметров, с помощью которых и происходит настройка.</li>
-</ul>
+- Во-первых, объекты API обычно содержат конструкторы, которые вызываются для создания экземпляров объектов, используемых при написании программы.
+- Во-вторых, объекты API зачастую имеют несколько вариантов (options), которые можно настроить и получить именно ту среду для разработки, которую вы хотите. API конструкторы обычно принимают объекты вариантов (options) в качестве параметров, с помощью которых и происходит настройка.
 
-<div class="note">
-<p><strong>Note</strong>: Не отчаивайтесь, если вы что-то не поняли из этого примера сразу. Мы рассмотрим использование сторонних API более подробно в следующих статьях.</p>
-</div>
+> **Примечание:** Не отчаивайтесь, если вы что-то не поняли из этого примера сразу. Мы рассмотрим использование сторонних API более подробно в следующих статьях.
 
-<h3 id="У_них_узнаваемые_точки_входа">У них узнаваемые точки входа</h3>
+### У них узнаваемые точки входа
 
-<p>При использовании API убедитесь, что вы знаете где точка входа для API. В API Геолокации это довольно просто — это свойство {{domxref("Navigator.geolocation")}}, возвращающее объект браузера {{domxref("Geolocation")}}, внутри которого доступны все полезные методы геолокации.</p>
+При использовании API убедитесь, что вы знаете где точка входа для API. В API Геолокации это довольно просто — это свойство {{domxref("Navigator.geolocation")}}, возвращающее объект браузера {{domxref("Geolocation")}}, внутри которого доступны все полезные методы геолокации.
 
-<p>Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект {{domxref("Document")}}, или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:</p>
+Найти точку входа Document Object Model (DOM) API ещё проще — при применении этого API используется объект {{domxref("Document")}}, или экземпляр элемента HTML, с которым вы хотите каким-либо образом взаимодействовать, к примеру:
 
-<pre class="brush: js">var em = document.createElement('em'); // создаёт новый элемент em
+```js
+var em = document.createElement('em'); // создаёт новый элемент em
 var para = document.querySelector('p'); // ссылка на существующий элемент p
 em.textContent = 'Hello there!'; // присвоение текстового содержимого
-para.appendChild(em); // встроить em внутрь para</pre>
+para.appendChild(em); // встроить em внутрь para
+```
 
-<p>Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент {{htmlelement("canvas")}}, на котором вы хотите рисовать, а затем необходимо вызвать метод {{domxref("HTMLCanvasElement.getContext()")}}:</p>
+Точки входа других API немного сложнее, часто подразумевается создание особого контекста, в котором будет написан код API. Например, объект контекста Canvas API создаётся получением ссылки на элемент {{htmlelement("canvas")}}, на котором вы хотите рисовать, а затем необходимо вызвать метод {{domxref("HTMLCanvasElement.getContext()")}}:
 
-<pre class="brush: js">var canvas = document.querySelector('canvas');
-var ctx = canvas.getContext('2d');</pre>
+```js
+var canvas = document.querySelector('canvas');
+var ctx = canvas.getContext('2d');
+```
 
-<p>Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром {{domxref("CanvasRenderingContext2D")}}), например:</p>
+Всё, что мы хотим сделать с canvas после этого, достигается вызовом свойств и методов объекта содержимого (content) (который является экземпляром {{domxref("CanvasRenderingContext2D")}}), например:
 
-<pre class="brush: js">Ball.prototype.draw = function() {
+```js
+Ball.prototype.draw = function() {
   ctx.beginPath();
   ctx.fillStyle = this.color;
   ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
   ctx.fill();
-};</pre>
+};
+```
 
-<div class="note">
-<p><strong>Note</strong>: вы можете увидеть этот код в действии в нашем <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html">bouncing balls demo</a> (see it <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html">running live</a> also).</p>
-</div>
+> **Примечание:** вы можете увидеть этот код в действии в нашем [bouncing balls demo](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/bouncing-balls.html) (see it [running live](http://mdn.github.io/learning-area/javascript/apis/introduction/bouncing-balls.html) also).
 
-<h3 id="Они_используют_события_для_управления_состоянием">Они используют события для управления состоянием</h3>
+### Они используют события для управления состоянием
 
-<p>Мы уже обсуждали события ранее в этом курсе, в нашей статье <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">Introduction to events</a> — в этой статье детально описываются события на стороне клиента и их применение. Если вы ещё не знакомы с тем, как работают события клиентской части, рекомендуем прочитать эту статью прежде, чем продолжить.</p>
+Мы уже обсуждали события ранее в этом курсе, в нашей статье [Introduction to events](/ru/docs/Learn/JavaScript/Building_blocks/Events) — в этой статье детально описываются события на стороне клиента и их применение. Если вы ещё не знакомы с тем, как работают события клиентской части, рекомендуем прочитать эту статью прежде, чем продолжить.
 
-<p>В некоторых API содержится ряд различных событий, в некоторых - событий нет. Свойства обработчика, позволяющие запускать функции при совершении какого-либо события по большей части перечислены в нашем материале отдельного раздела "Обработчики событий (Event handlers)". Как простой пример, экземпляры объекта <code><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code> (каждый представляет собой HTTP-запрос к серверу на получение каких-либо ресурсов (resource)) имеют несколько доступных событий, например, событие <code>load</code> происходит, когда ответ с запрашиваемым ресурсом был успешно возвращён и доступен в данный момент.</p>
+В некоторых API содержится ряд различных событий, в некоторых - событий нет. Свойства обработчика, позволяющие запускать функции при совершении какого-либо события по большей части перечислены в нашем материале отдельного раздела "Обработчики событий (Event handlers)". Как простой пример, экземпляры объекта [`XMLHttpRequest`](/en-US/docs/Web/API/XMLHttpRequest) (каждый представляет собой HTTP-запрос к серверу на получение каких-либо ресурсов (resource)) имеют несколько доступных событий, например, событие `load` происходит, когда ответ с запрашиваемым ресурсом был успешно возвращён и доступен в данный момент.
 
-<p>Следующий код содержит простой пример использования событий:</p>
+Следующий код содержит простой пример использования событий:
 
-<pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+```js
+var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
 var request = new XMLHttpRequest();
 request.open('GET', requestURL);
 request.responseType = 'json';
@@ -234,44 +218,41 @@ request.onload = function() {
   var superHeroes = request.response;
   populateHeader(superHeroes);
   showHeroes(superHeroes);
-}</pre>
+}
+```
 
-<div class="note">
-<p><strong>Note</strong>: вы можете увидеть этот код в действии в примере <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html">ajax.html</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html">see it live</a> also).</p>
-</div>
+> **Примечание:** вы можете увидеть этот код в действии в примере [ajax.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/ajax.html) ([see it live](http://mdn.github.io/learning-area/javascript/apis/introduction/ajax.html) also).
 
-<p>В первых пяти строках мы задаём расположение ресурса, который хотим получить, создаём экземпляр объекта запроса с помощью конструктора <code>XMLHttpRequest()</code>, открываем HTTP-запрос <code>GET</code>, чтобы получить запрашиваемый ресурс, определяем, что мы хотим получить этот ресурс в формате json, после чего отсылаем запрос.</p>
+В первых пяти строках мы задаём расположение ресурса, который хотим получить, создаём экземпляр объекта запроса с помощью конструктора `XMLHttpRequest()`, открываем HTTP-запрос `GET`, чтобы получить запрашиваемый ресурс, определяем, что мы хотим получить этот ресурс в формате json, после чего отсылаем запрос.
 
-<p>Затем функция-обработчик <code>onload</code> определяет наши действия по обработке ответа сервера. Нам известно, что ответ успешно возвращён и доступен после наступления события load (и если не произойдёт ошибка), так что мы сохраняем ответ, содержащий возвращённый сервером объект JSON в переменной <code>superHeroes</code>, которую затем передаём двум различным функциям для дальнейшей обработки.</p>
+Затем функция-обработчик `onload` определяет наши действия по обработке ответа сервера. Нам известно, что ответ успешно возвращён и доступен после наступления события load (и если не произойдёт ошибка), так что мы сохраняем ответ, содержащий возвращённый сервером объект JSON в переменной `superHeroes`, которую затем передаём двум различным функциям для дальнейшей обработки.
 
-<h3 id="У_них_есть_дополнительные_средства_безопасности_там_где_это_необходимо">У них есть дополнительные средства безопасности там, где это необходимо</h3>
+### У них есть дополнительные средства безопасности там, где это необходимо
 
-<p>Функциональность WebAPI подвержена тем же соображениям безопасности, что и JavaScript или другие веб-технологии (например, <a href="/en-US/docs/Web/Security/Same-origin_policy">same-origin policy</a>), но иногда они содержат дополнительные механизмы защиты. К примеру, некоторые из наиболее современных WebAPI работают только со страницами, обслуживаемыми через HTTPS в связи с передачей конфиденциальных данных (примеры: <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a> и <a href="/en-US/docs/Web/API/Push_API">Push</a>).</p>
+Функциональность WebAPI подвержена тем же соображениям безопасности, что и JavaScript или другие веб-технологии (например, [same-origin policy](/ru/docs/Web/Security/Same-origin_policy)), но иногда они содержат дополнительные механизмы защиты. К примеру, некоторые из наиболее современных WebAPI работают только со страницами, обслуживаемыми через HTTPS в связи с передачей конфиденциальных данных (примеры: [Service Workers](/ru/docs/Web/API/Service_Worker_API) и [Push](/ru/docs/Web/API/Push_API)).
 
-<p>К тому же, некоторые WebAPI запрашивают разрешение от пользователя, как только к ним происходит вызов в коде. В качестве примера, вы, возможно, встречали такое диалоговое окно при загрузке нашего примера <a href="/en-US/docs/Web/API/Geolocation">Geolocation</a> ранее:</p>
+К тому же, некоторые WebAPI запрашивают разрешение от пользователя, как только к ним происходит вызов в коде. В качестве примера, вы, возможно, встречали такое диалоговое окно при загрузке нашего примера [Geolocation](/ru/docs/Web/API/Geolocation) ранее:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14313/location-permission.png" style="border-style: solid; border-width: 1px; display: block; height: 188px; margin: 0px auto; width: 413px;"></p>
+![](https://mdn.mozillademos.org/files/14313/location-permission.png)
 
-<p><a href="/en-US/docs/Web/API/Notifications_API">Notifications API</a> запрашивает разрешение подобным образом:</p>
+[Notifications API](/ru/docs/Web/API/Notifications_API) запрашивает разрешение подобным образом:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14315/notification-permission.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+![](https://mdn.mozillademos.org/files/14315/notification-permission.png)
 
-<p>Запросы разрешений необходимы для обеспечения безопасности пользователей — не будь их, сайты могли бы скрытно отследить ваше местоположение, не создавая множество надоедливых уведомлений.</p>
+Запросы разрешений необходимы для обеспечения безопасности пользователей — не будь их, сайты могли бы скрытно отследить ваше местоположение, не создавая множество надоедливых уведомлений.
 
-<h2 id="Итоги">Итоги</h2>
+## Итоги
 
-<p>На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript-коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).</p>
+На данном этапе, у вас должно сформироваться представление о том, что такое API, как они работают и как вы можете применить их в своём JavaScript-коде. Вам наверняка не терпится начать делать по-настоящему интересные вещи с конкретными API, так вперёд! В следующий раз мы рассмотрим работу с документом с помощью Document Object Model (DOM).
 
-<p>{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+{{NextMenu("Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Введение в web APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
-</ul>
+- [Введение в web APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Manipulating documents](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [Third party APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [Drawing graphics](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Video and audio APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [Client-side storage](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
diff --git a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md
index 7639b978d37911..c86a92b1302fb8 100644
--- a/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/manipulating_documents/index.md
@@ -10,312 +10,312 @@ tags:
   - Окно
 translation_of: Learn/JavaScript/Client-side_web_APIs/Manipulating_documents
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
-
-<p class="summary">При написании веб-страниц и приложений вам придётся часто каким-либо образом управлять структурой документа. Обычно это делается с помощью Document Object Model (DOM), набора API для управления разметкой HTML и стилями, которая сильно использует объект {{domxref ("Document")}}. В этой статье мы подробно рассмотрим, как использовать DOM и некоторые другие интересные API, которые могут изменить вашу среду интересными способами.</p>
+При написании веб-страниц и приложений вам придётся часто каким-либо образом управлять структурой документа. Обычно это делается с помощью Document Object Model (DOM), набора API для управления разметкой HTML и стилями, которая сильно использует объект {{domxref ("Document")}}. В этой статье мы подробно рассмотрим, как использовать DOM и некоторые другие интересные API, которые могут изменить вашу среду интересными способами.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript - включая объекты JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Познакомиться с основными DOM API и другими API, обычно связанными с DOM, и манипулированием документами</td>
-  </tr>
- </tbody>
-</table>
+| Предпосылки: | Базовая компьютерная грамотность, базовое понимание HTML, CSS и JavaScript - включая объекты JavaScript. |
+| ------------ | -------------------------------------------------------------------------------------------------------- |
+| Задача:      | Познакомиться с основными DOM API и другими API, обычно связанными с DOM, и манипулированием документами |
 
-<h2 id="Важные_элементы_веб-браузера">Важные элементы веб-браузера</h2>
-
-<p>Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут контролироваться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохранённым паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?</p>
-
-<p>Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своём коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14557/document-window-navigator.png" style="display: block; margin: 0 auto;"></p>
-
-<ul>
- <li>Окно - это вкладка браузера, в которую загружается веб-страница; это представлено в JavaScript объектом {{domxref("Window")}}. Используя методы, доступные для этого объекта, вы можете делать такие вещи, как возврат размера окна (см. {{Domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}), манипулировать документом, загруженным в этот window, хранить данные, специфичные для этого документа на стороне клиента (например, используя локальную базу данных или другой механизм хранения), присоединить обработчик событий (<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events">event handler</a>) к текущему окну и многое другое.</li>
- <li>Навигатор представляет состояние и идентификатор браузера (т. е. пользовательский агент), как он существует в Интернете. В JavaScript это представлено объектом {{domxref("Navigator")}}. Вы можете использовать этот объект для извлечения таких вещей, как геолокационная информация, предпочтительный язык пользователя, медиапоток с веб-камеры пользователя и т. д.</li>
- <li>Документ (представленный DOM в браузерах) представляет собой фактическую страницу, загруженную в окно, и представлен в JavaScript объектом {{domxref("Document")}}. Вы можете использовать этот объект для возврата и обработки информации о HTML и CSS, содержащей документ, например, получить ссылку на элемент в DOM, изменить его текстовый контент, применить к нему новые стили, создать новые элементы и добавить их в текущий элемент как дочерний элемент, или даже вообще удалить его.</li>
-</ul>
-
-<p>В этой статье мы сосредоточимся главным образом на манипулировании документом, но мы покажем ещё несколько полезных моментов.</p>
-
-<h2 id="Объектная_модель_документа">Объектная модель документа</h2>
-
-<p>Документ, загруженный в каждый из ваших вкладок браузера, представлен объектной моделью документа. Это представление «древовидной структуры», созданное браузером, которое позволяет легко получить доступ к структуре HTML с помощью языков программирования - например, сам браузер использует его для применения стиля и другой информации к правильным элементам, поскольку он отображает страницу, а разработчики (как Вы) могут манипулировать DOM с JavaScript после того, как страница была отображена.</p>
-
-<p>Мы создали простую страницу примера в <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html">см. также live</a>). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:</p>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Simple DOM example&lt;/title&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
-      &lt;section&gt;
-        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
-        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
-      &lt;/section&gt;
-  &lt;/body&gt;
-&lt;/html&gt;</pre>
+## Важные элементы веб-браузера
 
-<p>DOM, с другой стороны, выглядит так:</p>
+Веб-браузеры - очень сложные части программного обеспечения с множеством движущихся частей, многие из которых не могут контролироваться или управляться веб-разработчиком с использованием JavaScript. Вы можете подумать, что такие ограничения - это плохо, но браузеры заблокированы по уважительным причинам (в основном ради безопасности). Представьте себе, что веб-сайт может получить доступ к вашим сохранённым паролям или другой конфиденциальной информации и войти на веб-сайты так, как если бы это были вы?
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14559/dom-screenshot.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+Несмотря на ограничения, Web API по-прежнему дают нам доступ к множеству функциональных возможностей, которые позволяют нам многое делать с веб-страницами. Есть несколько действительно очевидных моментов, на которые вы будете регулярно ссылаться в своём коде. Рассмотрим следующую диаграмму, которая представляет основные части браузера, непосредственно участвующие в просмотре веб-страниц:
 
-<div class="note">
-<p><strong>Примечание</strong>. Эта диаграмма дерева DOM была создана с использованием <a href="https://software.hixie.ch/utilities/js/live-dom-viewer/">Live DOM viewer</a> Яна Хиксона.</p>
-</div>
+![](https://mdn.mozillademos.org/files/14557/document-window-navigator.png)
 
-<p>Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется <strong>узлом</strong> (<strong>node)</strong>. Вы также столкнётесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:</p>
+- Окно - это вкладка браузера, в которую загружается веб-страница; это представлено в JavaScript объектом {{domxref("Window")}}. Используя методы, доступные для этого объекта, вы можете делать такие вещи, как возврат размера окна (см. {{Domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}), манипулировать документом, загруженным в этот window, хранить данные, специфичные для этого документа на стороне клиента (например, используя локальную базу данных или другой механизм хранения), присоединить обработчик событий ([event handler](/ru/docs/Learn/JavaScript/Building_blocks/Events#A_series_of_fortunate_events)) к текущему окну и многое другое.
+- Навигатор представляет состояние и идентификатор браузера (т. е. пользовательский агент), как он существует в Интернете. В JavaScript это представлено объектом {{domxref("Navigator")}}. Вы можете использовать этот объект для извлечения таких вещей, как геолокационная информация, предпочтительный язык пользователя, медиапоток с веб-камеры пользователя и т. д.
+- Документ (представленный DOM в браузерах) представляет собой фактическую страницу, загруженную в окно, и представлен в JavaScript объектом {{domxref("Document")}}. Вы можете использовать этот объект для возврата и обработки информации о HTML и CSS, содержащей документ, например, получить ссылку на элемент в DOM, изменить его текстовый контент, применить к нему новые стили, создать новые элементы и добавить их в текущий элемент как дочерний элемент, или даже вообще удалить его.
 
-<ul>
- <li><strong>Element node</strong>: элемент, как он существует в DOM.</li>
- <li><strong>Root node</strong>: верхний узел в дереве, который в случае <code>HTML</code> всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..</li>
- <li><strong>Child node</strong>: узел <em>непосредственно</em> внутри другого узла. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведённом выше примере.</li>
- <li><strong>Descendant node</strong> (узел потомок): узел внутри дочернего элемента. Например, <code>IMG</code> является дочерним элементом <code>SECTION</code> в приведённом выше примере, и он также является потомком для родителя <code>SECTION</code>. <code>IMG</code> не является ребёнком <code>BODY</code>, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком <code>BODY</code>.</li>
- <li><strong>Parent node</strong>: узел, в котором текущий узел. Например, <code>BODY</code> является родительским узлом <code>SECTION</code> в приведённом выше примере.</li>
- <li><strong>Sibling nodes</strong> (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, <code>IMG</code> и <code>P</code> являются братьями и сёстрами в приведённом выше примере.</li>
- <li><strong>Text node</strong>: узел, содержащий текстовую строку.</li>
-</ul>
+В этой статье мы сосредоточимся главным образом на манипулировании документом, но мы покажем ещё несколько полезных моментов.
 
-<p>Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнётесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).</p>
+## Объектная модель документа
 
-<h2 id="Активное_обучение_основы_управления_структурой_DOM">Активное обучение: основы управления структурой DOM</h2>
+Документ, загруженный в каждый из ваших вкладок браузера, представлен объектной моделью документа. Это представление «древовидной структуры», созданное браузером, которое позволяет легко получить доступ к структуре HTML с помощью языков программирования - например, сам браузер использует его для применения стиля и другой информации к правильным элементам, поскольку он отображает страницу, а разработчики (как Вы) могут манипулировать DOM с JavaScript после того, как страница была отображена.
 
-<p>Чтобы начать изучение по управлению структуры DOM, давайте начнём с практического примера.</p>
+Мы создали простую страницу примера в [dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) ([см. также live](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example.html)). Попробуйте открыть это в своём браузере - это очень простая страница, содержащая элемент {{htmlelement("section")}}, внутри которого вы можете найти изображение и абзац со ссылкой внутри. Исходный код HTML выглядит так:
 
-<ol>
- <li>Возьмите локальную копию страницы <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html">dom-example.html page</a> и изображение, которое вместе с ним.</li>
- <li>Добавьте элемент <code>&lt;script&gt;&lt;/script&gt;</code> чуть выше закрывающего тега <code>&lt;/body&gt;</code>.</li>
- <li>Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку:
-  <pre class="brush: js">var link = document.querySelector('a');</pre>
- </li>
- <li>Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей:
-  <pre class="brush: js">link.textContent = 'Mozilla Developer Network';</pre>
- </li>
- <li>Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу:
-  <pre class="brush: js">link.href = 'https://developer.mozilla.org';</pre>
- </li>
-</ol>
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Simple DOM example</title>
+  </head>
+  <body>
+      <section>
+        <img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth.">
+        <p>Here we will add a link to the <a href="https://www.mozilla.org/">Mozilla homepage</a></p>
+      </section>
+  </body>
+</html>
+```
 
-<div>
-<p>Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос <code>querySelector()</code> будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays">массива</a>-подобном объекте, называемом NodeList.</p>
-
-<p>Существуют более старые методы для захвата ссылок на элементы, например:</p>
-
-<ul>
- <li>{{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута <code>id</code>, например <code>&lt;p id="myId"&gt;Мой абзац&lt;/p&gt;</code>. Идентификатор передаётся функции как параметр, т.е. <code>var elementRef = document.getElementById('myId')</code>.</li>
- <li>{{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например <code>&lt;p&gt;</code>, <code>&lt;a&gt;</code> и т.д. Тип элемента передаётся к функции в качестве параметра, то есть <code>var elementRefArray = document.getElementsByTagName('p')</code>.</li>
-</ul>
-
-<p>Эти два работают в более старых браузерах, чем современные методы, такие как <code>querySelector()</code>, но не так удобны. Осмотритесь и вы увидите, что ещё можно найти!</p>
-</div>
-
-<h3 id="Создание_и_размещение_новых_узлов">Создание и размещение новых узлов</h3>
+DOM, с другой стороны, выглядит так:
 
-<p>Вышесказанное дало вам немного представления о том, что вы можете сделать, но давайте продолжим и посмотрим, как мы можем создавать новые элементы.</p>
+![](https://mdn.mozillademos.org/files/14559/dom-screenshot.png)
 
-<ol>
- <li>Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками):
-  <pre class="brush: js">var sect = document.querySelector('section');</pre>
- </li>
- <li>Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше:
-  <pre class="brush: js">var para = document.createElement('p');
-para.textContent = 'We hope you enjoyed the ride.';</pre>
- </li>
- <li>Теперь вы можете добавить новый абзац в конце раздела, используя {{domxref("Node.appendChild()")}}:
-  <pre class="brush: js">sect.appendChild(para);</pre>
- </li>
- <li>Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}:
-  <pre class="brush: js">var text = document.createTextNode(' — the premier source for web development knowledge.');</pre>
- </li>
- <li>Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел:
-  <pre class="brush: js">var linkPara = document.querySelector('p');
-linkPara.appendChild(text);</pre>
- </li>
-</ol>
-
-<p>Это большая часть того, что вам нужно для добавления узлов в DOM - вы будете использовать эти методы при построении динамических интерфейсов (мы рассмотрим некоторые примеры позже).</p>
-
-<h3 id="Перемещение_и_удаление_элементов">Перемещение и удаление элементов</h3>
-
-<p>Могут быть моменты, когда вы хотите переместить узлы или вообще удалить их из DOM. Это вполне возможно.</p>
-
-<p>Если бы мы хотели переместить абзац со ссылкой внутри него в нижней части раздела, мы могли бы просто сделать это:</p>
-
-<pre class="brush: js">sect.appendChild(linkPara);</pre>
-
-<p>Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - <code>linkPara</code> - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.</p>
-
-<p>Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:</p>
-
-<pre>sect.removeChild(linkPara);</pre>
-
-<p>Он становится немного сложнее, если вы хотите удалить узел, основанный только на ссылке на себя, что довольно распространено. Нет способа сообщить узлу удалить себя, поэтому вам нужно будет сделать следующее.</p>
-
-<pre class="brush: js">linkPara.parentNode.removeChild(linkPara);</pre>
-
-<p>Попробуйте добавить вышеуказанные строки в свой код.</p>
-
-<h3 id="Управление_стилями">Управление стилями</h3>
-
-<p>Можно управлять стилями CSS с помощью JavaScript различными способами.</p>
-
-<p>Для начала вы можете получить список всех таблиц стилей, прикреплённых к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.</p>
-
-<p>Первый способ - добавить встроенные стили непосредственно на элементы, которые вы хотите динамически стилизовать. Это делается с помощью свойства {{domxref("HTMLElement.style")}}, которое содержит встроенную информацию о стиле для каждого элемента документа. Вы можете установить свойства этого объекта для непосредственного обновления стилей элементов.</p>
-
-<ol>
- <li>В качестве примера попробуйте добавить эти строки в наш текущий пример:
-  <pre class="brush: js">para.style.color = 'white';
-para.style.backgroundColor = 'black';
-para.style.padding = '10px';
-para.style.width = '250px';
-para.style.textAlign = 'center';</pre>
- </li>
- <li>Перезагрузите страницу, и вы увидите, что стили были применены к абзацу. Если вы посмотрите на этот параграф в инспекторе <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector">Page Inspector/DOM inspector </a>вашего браузера, вы увидите, что эти строки действительно добавляют встроенные стили в документ:
-  <pre class="brush: html">&lt;p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;"&gt;We hope you enjoyed the ride.&lt;/p&gt;</pre>
- </li>
-</ol>
-
-<div class="note">
-<p>Примечание: Обратите внимание на то, как версии свойств JavaScript стилей CSS пишутся в нижнем регистре верблюжьего стиля (lower camel case), в то время как версии свойств стилей CSS используют дефисы  (например, <code>backgroundColor</code> и <code>background-color</code>). Убедитесь, что вы не перепутали их, иначе это не сработает.</p>
-</div>
-
-<p>Существует ещё один распространённый способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.</p>
-
-<ol>
- <li>Удалите предыдущие пять строк, добавленных в JavaScript.</li>
- <li>Добавьте в свой HTML-код следующее: {{htmlelement("head")}}:
-  <pre>&lt;style&gt;
-.highlight {
-  color: white;
-  background-color: black;
-  padding: 10px;
-  width: 250px;
-  text-align: center;
-}
-&lt;/style&gt;</pre>
- </li>
- <li>Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце:
-  <pre class="brush: js">para.setAttribute('class', 'highlight');</pre>
- </li>
- <li>Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.</li>
-</ol>
+> **Примечание:** . Эта диаграмма дерева DOM была создана с использованием [Live DOM viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/) Яна Хиксона.
 
-<p>Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнёте создавать более крупные приложения, вы, вероятно, начнёте использовать второй метод больше, но это действительно зависит от вас.</p>
+Вы можете видеть здесь, что каждый элемент и бит текста в документе имеют свою собственную запись в дереве - каждый из них называется **узлом** (**node)**. Вы также столкнётесь с различными терминами, используемыми для описания типа узла, и их положением в дереве относительно друг друга:
 
-<p>На данный момент мы не сделали ничего полезного! Нет смысла использовать JavaScript для создания статического контента - вы можете просто записать его в свой HTML и не использовать JavaScript. Это сложнее, чем HTML, и для создания вашего контента с помощью JavaScript также есть другие связанные с ним проблемы (например, не читаемые поисковыми системами).</p>
+- **Element node**: элемент, как он существует в DOM.
+- **Root node**: верхний узел в дереве, который в случае `HTML` всегда является узлом HTML (другие словари разметки, такие как SVG и пользовательский XML, будут иметь разные корневые элементы)..
+- **Child node**: узел _непосредственно_ внутри другого узла. Например, `IMG` является дочерним элементом `SECTION` в приведённом выше примере.
+- **Descendant node** (узел потомок): узел внутри дочернего элемента. Например, `IMG` является дочерним элементом `SECTION` в приведённом выше примере, и он также является потомком для родителя `SECTION`. `IMG` не является ребёнком `BODY`, так как он находится на двух уровнях ниже дерева в дереве, но он является потомком `BODY`.
+- **Parent node**: узел, в котором текущий узел. Например, `BODY` является родительским узлом `SECTION` в приведённом выше примере.
+- **Sibling nodes** (одноуровневый узел): узлы, которые расположены на одном уровне в дереве DOM. Например, `IMG` и `P` являются братьями и сёстрами в приведённом выше примере.
+- **Text node**: узел, содержащий текстовую строку.
 
-<p>В следующих параграфах мы рассмотрим ещё несколько практических применений DOM API.</p>
-
-<div class="note">
-<p>Примечание. Вы можете найти наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html">finished version of the dom-example.html</a> на GitHub (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html">см. также live</a>).</p>
-</div>
-
-<h2 id="Активное_обучение_получение_полезной_информации_из_объекта_window">Активное обучение: Получение полезной информации из объекта Window</h2>
-
-<p>До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию <a href="http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">maps-example.html</a> из последней статьи - там мы извлекли некоторые данные о местоположении и использовали её для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.</p>
-
-<p>В этом примере мы решим общую проблему: убедитесь, что ваше приложение имеет размер как окно, в котором он просматривается, независимо от его размера. Это часто полезно в таких ситуациях, как игры, где вы хотите использовать как можно большую площадь экрана, чтобы играть в игру.</p>
-
-<p>Для начала создайте локальную копию наших демо-файлов <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html">window-resize-example.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png">bgtile.png</a>. Откройте его и посмотрите - вы увидите, что у нас есть элемент {{htmlelement("div")}}, который покрывает небольшую часть экрана, на который нанесена фоновая плитка. Мы будем использовать это, чтобы представить нашу область пользовательского интерфейса приложения.</p>
-
-<ol>
- <li>Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}:
-  <pre class="brush: js">var div = document.querySelector('div');
-var WIDTH = window.innerWidth;
-var HEIGHT = window.innerHeight;</pre>
- </li>
- <li>Затем мы динамически изменяем ширину и высоту div, равную ширине окна просмотра. Добавьте следующие две строки ниже своих первых:
-  <pre class="brush: js">div.style.width = WIDTH + 'px';
-div.style.height = HEIGHT + 'px';</pre>
- </li>
- <li>Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.</li>
- <li>Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода:
-  <pre class="brush: js">window.onresize = function() {
-  WIDTH = window.innerWidth;
-  HEIGHT = window.innerHeight;
-  div.style.width = WIDTH + 'px';
-  div.style.height = HEIGHT + 'px';
-}</pre>
- </li>
-</ol>
+Полезно ознакомиться с этой терминологией перед тем, как работать с DOM, поскольку некоторые термины кода, с которыми вы столкнётесь, используют их.. Возможно, вы уже сталкивались с ними, если вы изучали CSS (например, селектор потомков, дочерний селектор).
 
-<div class="note">
-<p><strong>Примечание</strong>. Если у вас возникла проблема, посмотрите на наш <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html">законченный пример изменения размера окна</a> (<a href="https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html">см. также live</a>).</p>
-</div>
-
-<h2 id="Активное_обучение_динамический_список_покупок">Активное обучение: динамический список покупок</h2>
-
-<p>Чтобы завершить статью, мы хотели бы задать вам небольшой вызов - мы хотим сделать простой пример списка покупок, который позволяет динамически добавлять элементы в список с помощью ввода формы и кнопки. Когда вы добавляете элемент на вход и нажимаете кнопку:</p>
-
-<ul>
- <li>Элемент должен появиться в списке.</li>
- <li>Каждому элементу должна быть предоставлена кнопка, которую можно нажать, чтобы удалить этот элемент из списка.</li>
- <li>Вход должен быть опустошён и сфокусирован, чтобы вы могли ввести другой элемент.</li>
-</ul>
-
-<p>Готовое демо будет выглядеть примерно так:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/14563/shopping-list.png" style="border-style: solid; border-width: 1px; display: block; height: 225px; margin: 0px auto; width: 369px;"></p>
-
-<p>Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведёт себя так, как описано выше.</p>
-
-<ol>
- <li>Для начала загрузите копию нашего начального файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html">shopping-list.html</a> и скопируйте его где-нибудь. Вы увидите, что у него есть минимальный CSS, список с меткой, ввод и кнопка, пустой список и элемент {{htmlelement("script")}}. Вы будете делать все свои дополнения внутри скрипта.</li>
- <li>Создайте три переменные, содержащие ссылки на список ({{htmlelement("ul")}}, {{htmlelement("input")}} и {{htmlelement("button")}} элементы.</li>
- <li>Создайте <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Functions">function</a>, которая будет запускаться в ответ на нажатие кнопки.</li>
- <li>Внутри тела функции начните с сохранения текущего значения (<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#Properties">value</a>) входного элемента в переменной.</li>
- <li>Затем очистите элемент ввода, установив его значение в пустую строку — <code>''</code>.</li>
- <li>Создайте три новых элемента - элемент списка ({{htmlelement('li')}}), {{htmlelement('span')}} и {{htmlelement('button')}} и сохраните их в переменных.</li>
- <li>Добавьте диапазон и кнопку в качестве дочерних элементов списка.</li>
- <li>Установите текстовое содержимое диапазона на значение входного элемента, которое вы сохранили ранее, и текстовое содержимое кнопки «Удалить».</li>
- <li>Добавить элемент списка в качестве дочернего списка.</li>
- <li>Прикрепите обработчик события к кнопке удаления, чтобы при щелчке удалял весь элемент списка, внутри которого он находится.</li>
- <li>Наконец, используйте метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus">focus()</a></code>, чтобы сфокусировать входной элемент, готовый для входа в следующий элемент списка покупок.</li>
-</ol>
-
-<div class="note">
-<p>Примечание: Если у вас возникла действительно сложная проблема, взгляните на наши примеры <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html">finished shopping list</a> (<a href="http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html">see it running live also</a>.)</p>
-</div>
-
-<h2 id="Краткая_информация">Краткая информация</h2>
-
-<p>Мы закончили изучение документа и манипулирования DOM. На этом этапе вы должны понимать, что важная часть веб-браузера связана с управлением документами и другими аспектами веб-интерфейса пользователя. Самое главное, вы должны понять, что такое Document Object Model, и как манипулировать им для создания полезных функций.</p>
-
-<h2 id="Дополнительная_информация">Дополнительная информация</h2>
-
-<p>Есть много возможностей, которые можно использовать для управления вашими документами. Ознакомьтесь с некоторыми нашими рекомендациями и узнайте, что вы можете обнаружить:</p>
-
-<ul>
- <li>{{domxref("Document")}}</li>
- <li>{{domxref("Window")}}</li>
- <li>{{domxref("Node")}}</li>
- <li>{{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.</li>
-</ul>
-
-<p>(Полный список веб-индексов API, задокументированных MDN: <a href="https://developer.mozilla.org/en-US/docs/Web/API">Web API index</a>)</p>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}</div>
-
-<div>
-<h2 id="В_этот_модуль_входит">В этот модуль входит</h2>
+## Активное обучение: основы управления структурой DOM
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
-</ul>
-</div>
+Чтобы начать изучение по управлению структуры DOM, давайте начнём с практического примера.
+
+1.  Возьмите локальную копию страницы [dom-example.html page](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example.html) и изображение, которое вместе с ним.
+2.  Добавьте элемент `<script></script>` чуть выше закрывающего тега `</body>`.
+3.  Чтобы управлять элементом внутри DOM, вам сначала нужно выбрать его и сохранить ссылку на него внутри переменной. Внутри вашего скриптового элемента добавьте следующую строку:
+
+    ```js
+    var link = document.querySelector('a');
+    ```
+
+4.  Теперь у нас есть ссылка на элемент, хранящаяся в переменной, мы можем начать её манипулировать с использованием доступных ему свойств и методов (они определены на таких интерфейсах, как {{domxref("HTMLAnchorElement")}} в случае {{htmlelement ("a")}}, его более общий родительский интерфейс {{domxref ("HTMLElement")}} и {{domxref("Node")}} - который представляет все узлы в DOM). Прежде всего, давайте изменим текст внутри ссылки, обновив значение свойства {{domxref("Node.textContent")}}. Добавьте следующую строку ниже предыдущей:
+
+    ```js
+    link.textContent = 'Mozilla Developer Network';
+    ```
+
+5.  Мы также должны изменить URL-адрес, на который указывает ссылка, чтобы он не попадал в неправильное место при нажатии. Добавьте следующую строку, опять внизу:
+
+    ```js
+    link.href = 'https://developer.mozilla.org';
+    ```
+
+Обратите внимание, что, как и во многих вещах в JavaScript, существует множество способов выбора элемента и хранения ссылки на него в переменной. {{domxref("Document.querySelector()")}} - рекомендуемый современный подход, который считается удобным, потому что он позволяет вам выбирать элементы с помощью селекторов CSS. Вышеупомянутый запрос `querySelector()` будет соответствовать первому элементу {{htmlelement("a")}}, который появляется в документе. Если вы хотите совместить и делать что-то с несколькими элементами, вы можете использовать {{domxref ("Document.querySelectorAll()")}}, который соответствует каждому элементу документа, который соответствует селектору и сохраняет ссылки на них в массиве [массива](/ru/docs/Learn/JavaScript/First_steps/Arrays)-подобном объекте, называемом NodeList.
+
+Существуют более старые методы для захвата ссылок на элементы, например:
+
+- {{domxref("Document.getElementById()")}}, который выбирает элемент с заданным значением атрибута `id`, например `<p id="myId">Мой абзац</p>`. Идентификатор передаётся функции как параметр, т.е. `var elementRef = document.getElementById('myId')`.
+- {{domxref("Document.getElementsByTagName()")}}, который возвращает массив, содержащий все элементы на странице данного типа, например `<p>`, `<a>` и т.д. Тип элемента передаётся к функции в качестве параметра, то есть `var elementRefArray = document.getElementsByTagName('p')`.
+
+Эти два работают в более старых браузерах, чем современные методы, такие как `querySelector()`, но не так удобны. Осмотритесь и вы увидите, что ещё можно найти!
+
+### Создание и размещение новых узлов
+
+Вышесказанное дало вам немного представления о том, что вы можете сделать, но давайте продолжим и посмотрим, как мы можем создавать новые элементы.
+
+1.  Возвращаясь к текущему примеру, давайте начнём с захвата ссылки на наш элемент {{htmlelement("section")}} - добавьте следующий код внизу существующего скрипта (сделайте то же самое с другими строками):
+
+    ```js
+    var sect = document.querySelector('section');
+    ```
+
+2.  Теперь давайте создадим новый абзац, используя {{domxref("Document.createElement()")}} и передадим ему текстовое содержимое так же, как и раньше:
+
+    ```js
+    var para = document.createElement('p');
+    para.textContent = 'We hope you enjoyed the ride.';
+    ```
+
+3.  Теперь вы можете добавить новый абзац в конце раздела, используя {{domxref("Node.appendChild()")}}:
+
+    ```js
+    sect.appendChild(para);
+    ```
+
+4.  Наконец, для этой части, давайте добавим текстовый узел в абзац, где находится ссылка, чтобы оформить предложение красиво. Сначала мы создадим текстовый узел, используя {{domxref("Document.createTextNode()")}}:
+
+    ```js
+    var text = document.createTextNode(' — the premier source for web development knowledge.');
+    ```
+
+5.  Теперь мы возьмём ссылку на абзац, в котором находится ссылка, и добавим к нему текстовый узел:
+
+    ```js
+    var linkPara = document.querySelector('p');
+    linkPara.appendChild(text);
+    ```
+
+Это большая часть того, что вам нужно для добавления узлов в DOM - вы будете использовать эти методы при построении динамических интерфейсов (мы рассмотрим некоторые примеры позже).
+
+### Перемещение и удаление элементов
+
+Могут быть моменты, когда вы хотите переместить узлы или вообще удалить их из DOM. Это вполне возможно.
+
+Если бы мы хотели переместить абзац со ссылкой внутри него в нижней части раздела, мы могли бы просто сделать это:
+
+```js
+sect.appendChild(linkPara);
+```
+
+Это переводит абзац вниз в нижнюю часть раздела. Вы могли подумать, что это сделает вторую копию, но это не так - `linkPara` - ссылка на единственную копию этого абзаца. Если вы хотите сделать копию и добавить её также, вам нужно будет использовать {{domxref("Node.cloneNode()")}}.
+
+Удаление узла довольно просто, по крайней мере, когда у вас есть ссылка на удаляемый узел и его родительский элемент. В нашем случае мы просто используем {{domxref("Node.removeChild()")}}, например:
+
+```
+sect.removeChild(linkPara);
+```
+
+Он становится немного сложнее, если вы хотите удалить узел, основанный только на ссылке на себя, что довольно распространено. Нет способа сообщить узлу удалить себя, поэтому вам нужно будет сделать следующее.
+
+```js
+linkPara.parentNode.removeChild(linkPara);
+```
+
+Попробуйте добавить вышеуказанные строки в свой код.
+
+### Управление стилями
+
+Можно управлять стилями CSS с помощью JavaScript различными способами.
+
+Для начала вы можете получить список всех таблиц стилей, прикреплённых к документу, с помощью {{domxref("Document.stylesheets")}}, который возвращает массив объектов {{domxref("CSSStyleSheet")}}. Затем вы можете добавлять / удалять стили по желанию. Однако мы не будем расширять эти функции, потому что они являются несколько архаичным и трудным способом манипулирования стилем. Есть гораздо более простые способы.
+
+Первый способ - добавить встроенные стили непосредственно на элементы, которые вы хотите динамически стилизовать. Это делается с помощью свойства {{domxref("HTMLElement.style")}}, которое содержит встроенную информацию о стиле для каждого элемента документа. Вы можете установить свойства этого объекта для непосредственного обновления стилей элементов.
+
+1.  В качестве примера попробуйте добавить эти строки в наш текущий пример:
+
+    ```js
+    para.style.color = 'white';
+    para.style.backgroundColor = 'black';
+    para.style.padding = '10px';
+    para.style.width = '250px';
+    para.style.textAlign = 'center';
+    ```
+
+2.  Перезагрузите страницу, и вы увидите, что стили были применены к абзацу. Если вы посмотрите на этот параграф в инспекторе [Page Inspector/DOM inspector ](/ru/docs/Tools/Page_Inspector)вашего браузера, вы увидите, что эти строки действительно добавляют встроенные стили в документ:
+
+    ```html
+    <p style="color: white; background-color: black; padding: 10px; width: 250px; text-align: center;">We hope you enjoyed the ride.</p>
+    ```
+
+> **Примечание:** Примечание: Обратите внимание на то, как версии свойств JavaScript стилей CSS пишутся в нижнем регистре верблюжьего стиля (lower camel case), в то время как версии свойств стилей CSS используют дефисы (например, `backgroundColor` и `background-color`). Убедитесь, что вы не перепутали их, иначе это не сработает.
+
+Существует ещё один распространённый способ динамического управления стилями вашего документа, который мы рассмотрим сейчас.
+
+1.  Удалите предыдущие пять строк, добавленных в JavaScript.
+2.  Добавьте в свой HTML-код следующее: {{htmlelement("head")}}:
+
+    ```
+    <style>
+    .highlight {
+      color: white;
+      background-color: black;
+      padding: 10px;
+      width: 250px;
+      text-align: center;
+    }
+    </style>
+    ```
+
+3.  Теперь мы перейдём к очень полезному методу для общего манипулирования HTML - {{domxref("Element.setAttribute()")}} - это принимает два аргумента, атрибут, который вы хотите установить для элемента, и значение, которое вы хотите для его установки. В этом случае мы укажем имя класса выделения в нашем абзаце:
+
+    ```js
+    para.setAttribute('class', 'highlight');
+    ```
+
+4.  Обновите свою страницу, и вы не увидите изменений - CSS по-прежнему применяется к абзацу, но на этот раз, предоставив ему класс, который выбран нашим правилом CSS, а не как встроенные стили CSS.
+
+Какой метод вы выбираете, зависит от вас; оба имеют свои преимущества и недостатки. Первый метод принимает меньше настроек и хорош для простого использования, тогда как второй метод более пурист (без смешивания CSS и JavaScript, без встроенных стилей, которые рассматриваются как плохая практика). Когда вы начнёте создавать более крупные приложения, вы, вероятно, начнёте использовать второй метод больше, но это действительно зависит от вас.
+
+На данный момент мы не сделали ничего полезного! Нет смысла использовать JavaScript для создания статического контента - вы можете просто записать его в свой HTML и не использовать JavaScript. Это сложнее, чем HTML, и для создания вашего контента с помощью JavaScript также есть другие связанные с ним проблемы (например, не читаемые поисковыми системами).
+
+В следующих параграфах мы рассмотрим ещё несколько практических применений DOM API.
+
+> **Примечание:** Примечание. Вы можете найти наш пример [finished version of the dom-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/dom-example-manipulated.html) на GitHub ([см. также live](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/dom-example-manipulated.html)).
+
+## Активное обучение: Получение полезной информации из объекта Window
+
+До сих пор мы действительно смотрели на использование функций {{domxref("Node")}} и {{domxref("Document")}} для управления документами, но нет причин, по которым вы не можете получить данные из других источников и использовать его в пользовательском интерфейсе. Вспомните нашу простую демонстрацию [maps-example.html](http://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html) из последней статьи - там мы извлекли некоторые данные о местоположении и использовали её для отображения карты вашей области. Вам просто нужно убедиться, что ваши данные в правильном формате; JavaScript упрощает работу, чем многие другие языки, будучи слабо типизированным - например, числа автоматически преобразуются в строки, когда вы хотите распечатать их на экране.
+
+В этом примере мы решим общую проблему: убедитесь, что ваше приложение имеет размер как окно, в котором он просматривается, независимо от его размера. Это часто полезно в таких ситуациях, как игры, где вы хотите использовать как можно большую площадь экрана, чтобы играть в игру.
+
+Для начала создайте локальную копию наших демо-файлов [window-resize-example.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example.html) и [bgtile.png](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/bgtile.png). Откройте его и посмотрите - вы увидите, что у нас есть элемент {{htmlelement("div")}}, который покрывает небольшую часть экрана, на который нанесена фоновая плитка. Мы будем использовать это, чтобы представить нашу область пользовательского интерфейса приложения.
+
+1.  Прежде всего, давайте возьмём ссылку на div, а затем возьмём ширину и высоту окна просмотра (внутреннее окно, где отображается ваш документ) и сохраните их в переменных - эти два значения удобно содержатся в {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}. Добавьте следующие строки внутри существующего элемента {{htmlelement("script")}}:
+
+    ```js
+    var div = document.querySelector('div');
+    var WIDTH = window.innerWidth;
+    var HEIGHT = window.innerHeight;
+    ```
+
+2.  Затем мы динамически изменяем ширину и высоту div, равную ширине окна просмотра. Добавьте следующие две строки ниже своих первых:
+
+    ```js
+    div.style.width = WIDTH + 'px';
+    div.style.height = HEIGHT + 'px';
+    ```
+
+3.  Сохраните и попробуйте обновить браузер - теперь вы должны увидеть, что div становится таким же большим, как ваш видовой экран, независимо от того, какой размер экрана вы используете. Если теперь вы попытаетесь изменить размер окна, чтобы увеличить его, вы увидите, что div остаётся одного размера - мы устанавливаем его только один раз.
+4.  Как насчёт того, чтобы мы использовали событие, чтобы размер div изменялся при изменении размера окна? Объект {{domxref("Window")}} имеет событие, имеющееся на нем с именем resize, которое запускается каждый раз при изменении размера окна - давайте обратимся к нему через обработчик событий {{domxref("Window.onresize")}} и повторяйте наш размерный код каждый раз, когда он изменяется. Добавьте нижеследующую часть кода:
+
+    ```js
+    window.onresize = function() {
+      WIDTH = window.innerWidth;
+      HEIGHT = window.innerHeight;
+      div.style.width = WIDTH + 'px';
+      div.style.height = HEIGHT + 'px';
+    }
+    ```
+
+> **Примечание:** . Если у вас возникла проблема, посмотрите на наш [законченный пример изменения размера окна](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/window-resize-example-finished.html) ([см. также live](https://mdn.github.io/learning-area/javascript/apis/document-manipulation/window-resize-example-finished.html)).
+
+## Активное обучение: динамический список покупок
+
+Чтобы завершить статью, мы хотели бы задать вам небольшой вызов - мы хотим сделать простой пример списка покупок, который позволяет динамически добавлять элементы в список с помощью ввода формы и кнопки. Когда вы добавляете элемент на вход и нажимаете кнопку:
+
+- Элемент должен появиться в списке.
+- Каждому элементу должна быть предоставлена кнопка, которую можно нажать, чтобы удалить этот элемент из списка.
+- Вход должен быть опустошён и сфокусирован, чтобы вы могли ввести другой элемент.
+
+Готовое демо будет выглядеть примерно так:
+
+![](https://mdn.mozillademos.org/files/14563/shopping-list.png)
+
+Чтобы завершить упражнение, выполните следующие действия и убедитесь, что список ведёт себя так, как описано выше.
+
+1.  Для начала загрузите копию нашего начального файла [shopping-list.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list.html) и скопируйте его где-нибудь. Вы увидите, что у него есть минимальный CSS, список с меткой, ввод и кнопка, пустой список и элемент {{htmlelement("script")}}. Вы будете делать все свои дополнения внутри скрипта.
+2.  Создайте три переменные, содержащие ссылки на список ({{htmlelement("ul")}}, {{htmlelement("input")}} и {{htmlelement("button")}} элементы.
+3.  Создайте [function](/ru/docs/Learn/JavaScript/Building_blocks/Functions), которая будет запускаться в ответ на нажатие кнопки.
+4.  Внутри тела функции начните с сохранения текущего значения ([value](/ru/docs/Web/API/HTMLInputElement#Properties)) входного элемента в переменной.
+5.  Затем очистите элемент ввода, установив его значение в пустую строку — `''`.
+6.  Создайте три новых элемента - элемент списка ({{htmlelement('li')}}), {{htmlelement('span')}} и {{htmlelement('button')}} и сохраните их в переменных.
+7.  Добавьте диапазон и кнопку в качестве дочерних элементов списка.
+8.  Установите текстовое содержимое диапазона на значение входного элемента, которое вы сохранили ранее, и текстовое содержимое кнопки «Удалить».
+9.  Добавить элемент списка в качестве дочернего списка.
+10. Прикрепите обработчик события к кнопке удаления, чтобы при щелчке удалял весь элемент списка, внутри которого он находится.
+11. Наконец, используйте метод [`focus()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus), чтобы сфокусировать входной элемент, готовый для входа в следующий элемент списка покупок.
+
+> **Примечание:** Примечание: Если у вас возникла действительно сложная проблема, взгляните на наши примеры [finished shopping list](https://github.com/mdn/learning-area/blob/master/javascript/apis/document-manipulation/shopping-list-finished.html) ([see it running live also](http://mdn.github.io/learning-area/javascript/apis/document-manipulation/shopping-list-finished.html).)
+
+## Краткая информация
+
+Мы закончили изучение документа и манипулирования DOM. На этом этапе вы должны понимать, что важная часть веб-браузера связана с управлением документами и другими аспектами веб-интерфейса пользователя. Самое главное, вы должны понять, что такое Document Object Model, и как манипулировать им для создания полезных функций.
+
+## Дополнительная информация
+
+Есть много возможностей, которые можно использовать для управления вашими документами. Ознакомьтесь с некоторыми нашими рекомендациями и узнайте, что вы можете обнаружить:
+
+- {{domxref("Document")}}
+- {{domxref("Window")}}
+- {{domxref("Node")}}
+- {{domxref("HTMLElement")}}, {{domxref("HTMLInputElement")}}, {{domxref("HTMLImageElement")}}, etc.
+
+(Полный список веб-индексов API, задокументированных MDN: [Web API index](/ru/docs/Web/API))
+
+{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Introduction", "Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs")}}
+
+## В этот модуль входит
+
+- [Introduction to web APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Manipulating documents](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [Third party APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [Drawing graphics](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Video and audio APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [Client-side storage](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
diff --git a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md
index 27698b2901649a..242112a9b0ed30 100644
--- a/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md
+++ b/files/ru/learn/javascript/client-side_web_apis/third_party_apis/index.md
@@ -8,50 +8,42 @@ tags:
   - Новичку
 translation_of: Learn/JavaScript/Client-side_web_APIs/Third_party_APIs
 ---
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<p class="summary">API, которые мы рассмотрели до сих пор, встроены в браузер, но не все API таковы. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т. д., Предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш твиттер-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или использование логина Facebook для входа в систему ваших пользователей). В этой статье рассматривается различие между API-интерфейсами браузера и сторонними API и показано типичное использование последних.</p>
+API, которые мы рассмотрели до сих пор, встроены в браузер, но не все API таковы. Многие крупные веб-сайты и сервисы, такие как Google Maps, Twitter, Facebook, PayPal и т. д., Предоставляют API-интерфейсы, позволяющие разработчикам использовать свои данные (например, показывать ваш твиттер-поток в вашем блоге) или сервисы (например, отображение пользовательских карт Google на вашем сайте, или использование логина Facebook для входа в систему ваших пользователей). В этой статье рассматривается различие между API-интерфейсами браузера и сторонними API и показано типичное использование последних.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Основы JavaScript (см. <a href="/en-US/docs/Learn/JavaScript/First_steps">первые шаги</a>, <a href="/en-US/docs/Learn/JavaScript/Building_blocks">структурные элементы</a>, <a href="/en-US/docs/Learn/JavaScript/Objects">объекты JavaScript</a>), the <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">основы клиентских API</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Изучить, как работают сторонние API, и как использовать их для улучшения ваших сайтов.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые условия: | Основы JavaScript (см. [первые шаги](/ru/docs/Learn/JavaScript/First_steps), [структурные элементы](/ru/docs/Learn/JavaScript/Building_blocks), [объекты JavaScript](/ru/docs/Learn/JavaScript/Objects)), the [основы клиентских API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction) |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:              | Изучить, как работают сторонние API, и как использовать их для улучшения ваших сайтов.                                                                                                                                                                                                             |
 
-<h2 id="Что_такое_сторонние_API">Что такое сторонние API?</h2>
+## Что такое сторонние API?
 
-<p>Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своём собственном сайте. Как мы показали в нашей <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">вводной статье об API</a>, одним из наиболее очевидных примеров является использование <a href="https://developers.google.com/maps/">Google Maps APIs</a> для отображения пользовательских карт на ваших страницах.</p>
+Сторонние API - это API, предоставляемые третьими лицами — как правило, такими компаниями, как Facebook, Twitter, or Google — чтобы вы могли получить доступ к их функциям с помощью JavaScript и использовать его на своём собственном сайте. Как мы показали в нашей [вводной статье об API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction), одним из наиболее очевидных примеров является использование [Google Maps APIs](https://developers.google.com/maps/) для отображения пользовательских карт на ваших страницах.
 
-<p>Давайте снова посмотрим на наш пример карты (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html">исходный код на GitHub</a>; <a href="https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html">см. это в действии</a>),  и используем его для иллюстрации того, как сторонние API отличаются от API-интерфейсов браузера.</p>
+Давайте снова посмотрим на наш пример карты (см. [исходный код на GitHub](https://github.com/mdn/learning-area/blob/master/javascript/apis/introduction/maps-example.html); [см. это в действии](https://mdn.github.io/learning-area/javascript/apis/introduction/maps-example.html)), и используем его для иллюстрации того, как сторонние API отличаются от API-интерфейсов браузера.
 
-<div class="note">
-<p><strong>Примечание</strong>: По умолчанию использование сторонних API на вашем сайте позволит им отслеживать файлы cookie своих доменов, устанавливать файлы cookie в исходное состояние, получать заголовки ссылок, определяющие посещаемые страницы, и разрешать им выполнять JavaScript на страницах, на которых они загружаются с теми же разрешениями (например, выполнить запросы AJAX на ваши серверы с теми же кукисами сеанса). Должны быть оценены вопросы регулирования, безопасности и конфиденциальности.</p>
-</div>
+> **Примечание:** По умолчанию использование сторонних API на вашем сайте позволит им отслеживать файлы cookie своих доменов, устанавливать файлы cookie в исходное состояние, получать заголовки ссылок, определяющие посещаемые страницы, и разрешать им выполнять JavaScript на страницах, на которых они загружаются с теми же разрешениями (например, выполнить запросы AJAX на ваши серверы с теми же кукисами сеанса). Должны быть оценены вопросы регулирования, безопасности и конфиденциальности.
 
-<div class="note">
-<p><strong>Примечание</strong>: Возможно, вы захотите сразу <a href="/en-US/docs/Learn#Getting_our_code_examples">получить все наши примеры кода</a>, в этом случае вы можете просто искать репо для файлов примеров, которые вам нужны в каждом разделе.</p>
-</div>
+> **Примечание:** Возможно, вы захотите сразу [получить все наши примеры кода](/ru/docs/Learn#Getting_our_code_examples), в этом случае вы можете просто искать репо для файлов примеров, которые вам нужны в каждом разделе.
 
-<h3 id="Они_находятся_на_сторонних_серверах">Они находятся на сторонних серверах</h3>
+### Они находятся на сторонних серверах
 
-<p>API браузера встроены в браузер - вы можете получить к ним доступ сразу из JavaScript. Например, <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">API геолокации</a>, доступный в нашем примере, осуществляется с использованием свойства геолокации объекта <code><a href="/en-US/docs/Web/API/Navigator">Navigator</a></code>, которое возвращает объект <code><a href="/en-US/docs/Web/API/Geolocation">Geolocation</a></code>. Этот пример использует метод <code><a href="/en-US/docs/Web/API/Geolocation/getCurrentPosition">getCurrentPosition()</a></code> этого объекта, для запроса текущего положения устройства:</p>
+API браузера встроены в браузер - вы можете получить к ним доступ сразу из JavaScript. Например, [API геолокации](/ru/docs/Web/API/Geolocation/Using_geolocation), доступный в нашем примере, осуществляется с использованием свойства геолокации объекта [`Navigator`](/en-US/docs/Web/API/Navigator), которое возвращает объект [`Geolocation`](/en-US/docs/Web/API/Geolocation). Этот пример использует метод [`getCurrentPosition()`](/en-US/docs/Web/API/Geolocation/getCurrentPosition) этого объекта, для запроса текущего положения устройства:
 
-<pre class="brush: js">navigator.geolocation.getCurrentPosition(function(position) { ... });</pre>
+```js
+navigator.geolocation.getCurrentPosition(function(position) { ... });
+```
 
-<p>Сторонние API, с другой стороны, расположены на сторонних серверах. Чтобы получить доступ к ним из JavaScript, вам сначала нужно подключиться к функциям API и сделать его доступным на вашей странице. Обычно это связано с первой ссылкой на библиотеку JavaScript, доступную на сервере через элемент {{htmlelement("script")}}, как показано в нашем примере:</p>
+Сторонние API, с другой стороны, расположены на сторонних серверах. Чтобы получить доступ к ним из JavaScript, вам сначала нужно подключиться к функциям API и сделать его доступным на вашей странице. Обычно это связано с первой ссылкой на библиотеку JavaScript, доступную на сервере через элемент {{htmlelement("script")}}, как показано в нашем примере:
 
-<pre class="brush: js">&lt;script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"&gt;&lt;/script&gt;</pre>
+```js
+<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA"></script>
+```
 
-<p>Затем вы можете начать использовать объекты, доступные в этой библиотеке. Например:</p>
+Затем вы можете начать использовать объекты, доступные в этой библиотеке. Например:
 
-<pre class="brush: js">var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+```js
+var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
 var myOptions = {
   zoom: 8,
   center: latlng,
@@ -59,282 +51,253 @@ var myOptions = {
   disableDefaultUI: true
 }
 
-var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);</pre>
+var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+```
 
-<p>Здесь мы создаём новый объект <code>LatLng</code>, используя конструктор <code>google.maps.LatLng()</code>, который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаём объект опций (<code>myOptions</code>), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаём карту, используя конструктор <code>google.maps.Map()</code>, который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.</p>
+Здесь мы создаём новый объект `LatLng`, используя конструктор `google.maps.LatLng()`, который содержит широту и долготу местоположения, которое мы хотим показать, полученные из API геолокации. Затем мы создаём объект опций (`myOptions`), содержащий эту и другую информацию, связанную с отображением карты. Наконец, мы фактически создаём карту, используя конструктор `google.maps.Map()`, который принимает в качестве параметров элемент, на котором мы хотим нарисовать карту, и объект опций.
 
-<p>Это вся информация, которую API Карт Google требует для построения простой карты. Сервер, к которому вы подключаетесь, обрабатывает все сложные вещи, такие как отображение правильных фрагментов карты для отображаемой области и т. д.</p>
+Это вся информация, которую API Карт Google требует для построения простой карты. Сервер, к которому вы подключаетесь, обрабатывает все сложные вещи, такие как отображение правильных фрагментов карты для отображаемой области и т. д.
 
-<div class="note">
-<p><strong>Примечание</strong>: Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Получение данных с сервера</a>) на определённый шаблон URL для получения определённых данных. Они называются RESTful API, и мы покажем пример этого позже в статье.</p>
-</div>
+> **Примечание:** Некоторые API обрабатывают доступ к их функциям несколько иначе, требуя от разработчика сделать HTTP-запрос (см. [Получение данных с сервера](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)) на определённый шаблон URL для получения определённых данных. Они называются RESTful API, и мы покажем пример этого позже в статье.
 
-<h3 id="Разрешения_обрабатываются_по-разному">Разрешения обрабатываются по-разному</h3>
+### Разрешения обрабатываются по-разному
 
-<p>Безопасность API-интерфейсов браузеров, как правило, обрабатывается запросами разрешения, как <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#They_have_additional_security_mechanisms_where_appropriate">описано в нашей первой статье</a>. Целью этого является то, что пользователь знает, что происходит на сайтах, которые он посещает, и с меньшей вероятностью может стать жертвой того, кто использует API, злонамеренно.</p>
+Безопасность API-интерфейсов браузеров, как правило, обрабатывается запросами разрешения, как [описано в нашей первой статье](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#They_have_additional_security_mechanisms_where_appropriate). Целью этого является то, что пользователь знает, что происходит на сайтах, которые он посещает, и с меньшей вероятностью может стать жертвой того, кто использует API, злонамеренно.
 
-<p>Сторонние API имеют немного другую систему разрешений - они, как правило, используют ключевые коды, чтобы позволить разработчикам получить доступ к функциям API. Просмотрите URL-адрес библиотеки API Карт Google, с которой мы связались:</p>
+Сторонние API имеют немного другую систему разрешений - они, как правило, используют ключевые коды, чтобы позволить разработчикам получить доступ к функциям API. Просмотрите URL-адрес библиотеки API Карт Google, с которой мы связались:
 
-<pre>https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA</pre>
+```
+https://maps.google.com/maps/api/js?key=AIzaSyDDuGt0E5IEGkcE6ZfrKfUtE9Ko_de66pA
+```
 
-<p>Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определённым образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаёте заявку на получение ключа на <a href="https://console.cloud.google.com/">Google Cloud Platform</a>.</p>
+Параметр URL, указанный в конце URL-адреса, является ключом разработчика - разработчик приложения должен применять его для получения ключа, а затем включать его в свой код определённым образом, чтобы иметь доступ к функциям API. В случае с Картами Google (и другими API Google) вы подаёте заявку на получение ключа на [Google Cloud Platform](https://console.cloud.google.com/).
 
-<p>Другие API могут потребовать, чтобы вы включили ключ немного по-другому, но шаблон для большинства из них довольно схож. <br>
-  <br>
- Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчётности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.</p>
+Другие API могут потребовать, чтобы вы включили ключ немного по-другому, но шаблон для большинства из них довольно схож.
 
-<h2 id="Расширенный_пример_Карт_Google">Расширенный пример Карт Google</h2>
+Требование к ключу заключается в том, что не каждый может использовать функциональность API без какой-либо подотчётности. Когда разработчик зарегистрировался для ключа, они затем известны поставщику API, и действие может быть предпринято, если они начинают делать что-то вредоносное с помощью API (например, отслеживать местоположение пользователей или пытаться спамить API с множеством запросов для остановки его работы, например). Самое простое действие - просто отменить их привилегии API.
 
-<p>Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим ещё несколько функций, чтобы показать, как использовать некоторые другие функции API.</p>
+## Расширенный пример Карт Google
 
-<ol>
- <li>
-  <p>Чтобы начать этот раздел, сделайте себе копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/google-maps/maps_start.html">исходного файла Карт Google</a>, в новой папке. Если вы уже <a href="/en-US/docs/Learn#Getting_our_code_examples">клонировали репозиторий примеров</a>, у вас уже есть копия этого файла, которую вы можете найти в папке the <em>javascript/apis/third-party-apis/google-maps</em>.</p>
- </li>
- <li>
-  <p>Затем получите свой собственный ключ разработчика, выполнив следующие шаги:</p>
+Теперь когда мы рассмотрели пример API Карт Google и посмотрели, как он работает, добавим ещё несколько функций, чтобы показать, как использовать некоторые другие функции API.
 
-  <ol>
-   <li>Перейдите в <a href="https://console.cloud.google.com/apis/dashboard">панель управления API-интерфейсом Google Cloud Platform</a>.</li>
-   <li>Создайте новый проект, если у вас его ещё нет.</li>
-   <li>Нажмите кнопку <em>Enable API</em>.</li>
-   <li>Выберите <em>Google Maps JavaScript API</em>.</li>
-   <li>Нажмите кнопку <em>Enable</em>.</li>
-   <li>Нажмите <em>Create credentials</em>, затем выберите <em>API key</em>.</li>
-   <li>Скопируйте свой ключ API и замените существующий ключ в первом элементе {{htmlelement ('script')}} примера вашим собственным (фрагмент между <code>?key=</code> и меткой закрытия закрытия атрибута (<code>"</code>).)</li>
-  </ol>
+1.  Чтобы начать этот раздел, сделайте себе копию [исходного файла Карт Google](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/google-maps/maps_start.html), в новой папке. Если вы уже [клонировали репозиторий примеров](/ru/docs/Learn#Getting_our_code_examples), у вас уже есть копия этого файла, которую вы можете найти в папке the _javascript/apis/third-party-apis/google-maps_.
+2.  Затем получите свой собственный ключ разработчика, выполнив следующие шаги:
 
-  <div class="note">
-  <p><strong>Примечание</strong>: Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учётная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — <a href="/en-US/docs/Learn#Contact_us">Свяжитесь с нами</a>.</p>
-  </div>
- </li>
- <li>Откройте исходный файл Карт Google, найдите строку <code>INSERT-YOUR-API-KEY-HERE</code>, и замените её фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.</li>
-</ol>
+    1.  Перейдите в [панель управления API-интерфейсом Google Cloud Platform](https://console.cloud.google.com/apis/dashboard).
+    2.  Создайте новый проект, если у вас его ещё нет.
+    3.  Нажмите кнопку _Enable API_.
+    4.  Выберите _Google Maps JavaScript API_.
+    5.  Нажмите кнопку _Enable_.
+    6.  Нажмите _Create credentials_, затем выберите _API key_.
+    7.  Скопируйте свой ключ API и замените существующий ключ в первом элементе {{htmlelement ('script')}} примера вашим собственным (фрагмент между `?key=` и меткой закрытия закрытия атрибута (`"`).)
 
-<h3 id="Adding_a_custom_marker">Adding a custom marker</h3>
+    > **Примечание:** Получение ключей API, связанных с Google, может быть немного затруднительным: в Менеджере API Google Cloud Platform много разных экранов, и рабочий процесс может немного отличаться в зависимости от того, как у вас уже установлена ​​учётная запись. Если у вас возникнут проблемы с этим шагом, мы будем рады помочь — [Свяжитесь с нами](/ru/docs/Learn#Contact_us).
 
-<p>Adding a marker (icon) at a certain point on the map is easy — you just need to create a new marker using the <code>google.maps.Marker()</code> constructor, passing it an options object containing the position to display the marker at (as a <code>LatLng</code> object), and the <code>Map</code> object to display it on.</p>
+3.  Откройте исходный файл Карт Google, найдите строку `INSERT-YOUR-API-KEY-HERE`, и замените её фактическим ключом API, который вы получили из панели управления Google Cloud Platform API Manager.
 
-<ol>
- <li>
-  <p>Add the following just below the <code>var map ...</code> line:</p>
+### Adding a custom marker
 
-  <pre class="brush: js">var marker = new google.maps.Marker({
-  position: latlng,
-  map: map
-});</pre>
+Adding a marker (icon) at a certain point on the map is easy — you just need to create a new marker using the `google.maps.Marker()` constructor, passing it an options object containing the position to display the marker at (as a `LatLng` object), and the `Map` object to display it on.
 
-  <p>Now if you refresh your page, you'll see a nice little marker pop up in the centre of the map. This is cool, but it is not exactly a custom marker — it is using the default marker icon.</p>
- </li>
- <li>
-  <p>To use a custom icon, we need to specify it when we create the marker, using its URL. First of all, add the following line above the previous block you added:</p>
+1.  Add the following just below the `var map ...` line:
 
-  <pre class="brush: js">var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';</pre>
+    ```js
+    var marker = new google.maps.Marker({
+      position: latlng,
+      map: map
+    });
+    ```
 
-  <p>This defines the base URL where all the official Google Maps icons are stored (you could also specify your own icon location if you wished).</p>
- </li>
- <li>
-  <p>The icon location is specified in the <code>icon</code> property of the options object. Update the constructor like so:</p>
+    Now if you refresh your page, you'll see a nice little marker pop up in the centre of the map. This is cool, but it is not exactly a custom marker — it is using the default marker icon.
 
-  <pre class="brush: js">var marker = new google.maps.Marker({
-  position: latlng,
-  icon: iconBase + 'flag_maps.png',
-  map: map
-});</pre>
+2.  To use a custom icon, we need to specify it when we create the marker, using its URL. First of all, add the following line above the previous block you added:
 
-  <p>Here we specify the icon property value as the <code>iconBase</code> plus the icon filename, to create the complete URL. Now try reloading your example and you'll see a custom marker displayed on your map!</p>
- </li>
-</ol>
+    ```js
+    var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
+    ```
 
-<div class="note">
-<p><strong>Note</strong>: See <a href="https://developers.google.com/maps/documentation/javascript/custom-markers">Customizing a Google Map: Custom Markers</a> for more information.</p>
-</div>
+    This defines the base URL where all the official Google Maps icons are stored (you could also specify your own icon location if you wished).
 
-<div class="note">
-<p><strong>Note</strong>: See <a href="https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3">Map marker or Icon names</a> to find out what other icons are available, and see what their reference names are. Their file name will be the icon name they display when you click on them, with ".png" added on the end.</p>
-</div>
+3.  The icon location is specified in the `icon` property of the options object. Update the constructor like so:
 
-<h3 id="Displaying_a_popup_when_the_marker_is_clicked">Displaying a popup when the marker is clicked</h3>
+    ```js
+    var marker = new google.maps.Marker({
+      position: latlng,
+      icon: iconBase + 'flag_maps.png',
+      map: map
+    });
+    ```
 
-<p>Another common use case for Google Maps is displaying more information about a place when its name or marker is clicked (popups are called <strong>info windows</strong> in the Google Maps API). This is also very simple to achieve, so let's have a look at it.</p>
+    Here we specify the icon property value as the `iconBase` plus the icon filename, to create the complete URL. Now try reloading your example and you'll see a custom marker displayed on your map!
 
-<ol>
- <li>
-  <p>First of all, you need to specify a JavaScript string containing HTML that will define the content of the popup. This will be injected into the popup by the API and can contain just about any content you want. Add the following line below the <code>google.maps.Marker()</code> constructor definition:</p>
+> **Примечание:** See [Customizing a Google Map: Custom Markers](https://developers.google.com/maps/documentation/javascript/custom-markers) for more information.
 
-  <pre class="brush: js">var contentString = '&lt;div id="content"&gt;&lt;h2 id="firstHeading" class="firstHeading"&gt;Custom info window&lt;/h2&gt;&lt;p&gt;This is a cool custom info window.&lt;/p&gt;&lt;/div&gt;';</pre>
- </li>
- <li>
-  <p>Next, you need to create a new info window object using the <code>google.maps.InfoWindow()</code> constructor. Add the following below your previous line:</p>
+> **Примечание:** See [Map marker or Icon names](https://fusiontables.google.com/DataSource?dsrcid=308519#map:id=3) to find out what other icons are available, and see what their reference names are. Their file name will be the icon name they display when you click on them, with ".png" added on the end.
 
-  <pre class="brush: js">var infowindow = new google.maps.InfoWindow({
-  content: contentString
-});</pre>
+### Displaying a popup when the marker is clicked
 
-  <p>There are other properties available (see <a href="https://developers.google.com/maps/documentation/javascript/infowindows">Info Windows</a>), but here we are just specifying the <code>content</code> property in the options object, which points to the source of the content.</p>
- </li>
- <li>
-  <p>Finally, to get the popup to display when the marker is clicked, we use a simple click event handler. Add the following below the <code>google.maps.InfoWindow()</code> constructor:</p>
+Another common use case for Google Maps is displaying more information about a place when its name or marker is clicked (popups are called **info windows** in the Google Maps API). This is also very simple to achieve, so let's have a look at it.
 
-  <pre class="brush: js">marker.addListener('click', function() {
-  infowindow.open(map, marker);
-});</pre>
+1.  First of all, you need to specify a JavaScript string containing HTML that will define the content of the popup. This will be injected into the popup by the API and can contain just about any content you want. Add the following line below the `google.maps.Marker()` constructor definition:
 
-  <p>Inside the function, we simply invoke the infowindow's <code>open()</code> function, which takes as parameters the map you want to display it on, and the marker you want it to appear next to.</p>
- </li>
- <li>
-  <p>Now try reloading the example, and clicking on the marker!</p>
- </li>
-</ol>
+    ```js
+    var contentString = '<div id="content"><h2 id="firstHeading" class="firstHeading">Custom info window</h2><p>This is a cool custom info window.</p></div>';
+    ```
 
-<h3 id="Controlling_what_map_controls_are_displayed">Controlling what map controls are displayed</h3>
+2.  Next, you need to create a new info window object using the `google.maps.InfoWindow()` constructor. Add the following below your previous line:
 
-<p>Inside the original <code>google.maps.Map()</code> constructor, you'll see the property <code>disableDefaultUI: true</code> specified. This disables all the standard UI controls you usually get on Google Maps.</p>
+    ```js
+    var infowindow = new google.maps.InfoWindow({
+      content: contentString
+    });
+    ```
 
-<ol>
- <li>
-  <p>Try setting its value to <code>false</code> (or just removing the line altogether) then reloading your example, and you'll see the map zoom buttons, scale indicator, etc.</p>
- </li>
- <li>
-  <p>Now undo your last change.</p>
- </li>
- <li>
-  <p>You can show or hide the controls in a more granular fashion by using other properties that specify single UI features. Try adding the following underneath the <code>disableDefaultUI: true</code> (remember to put a comma after <code>disableDefaultUI: true</code>, otherwise you'll get an error):</p>
+    There are other properties available (see [Info Windows](https://developers.google.com/maps/documentation/javascript/infowindows)), but here we are just specifying the `content` property in the options object, which points to the source of the content.
 
-  <pre class="brush: js">zoomControl: true,
-mapTypeControl: true,
-scaleControl: true,</pre>
- </li>
- <li>
-  <p>Now try reloading the example to see the effect these properties have. You can find more options to experiment with at the <a href="https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions">MapOptions object reference page</a>.</p>
- </li>
-</ol>
+3.  Finally, to get the popup to display when the marker is clicked, we use a simple click event handler. Add the following below the `google.maps.InfoWindow()` constructor:
 
-<p>That's it for now — have a look around the <a href="https://developers.google.com/maps/documentation/javascript/">Google Maps APIs documentation</a>, and have some more fun playing!</p>
+    ```js
+    marker.addListener('click', function() {
+      infowindow.open(map, marker);
+    });
+    ```
 
-<h2 id="A_RESTful_API_—_NYTimes">A RESTful API — NYTimes</h2>
+    Inside the function, we simply invoke the infowindow's `open()` function, which takes as parameters the map you want to display it on, and the marker you want it to appear next to.
 
-<p>Now let's look at another API example — the <a href="https://developer.nytimes.com">New York Times API</a>. This API allows you to retrieve New York Times news story information and display it on your site. This type of API is known as a <strong>RESTful API</strong> — instead of getting data using the features of a JavaScript library like we did with Google Maps, we get data by making HTTP requests to specific URLs, with data like search terms and other properties encoded in the URL (often as URL parameters). This is a common pattern you'll encounter with APIs.</p>
+4.  Now try reloading the example, and clicking on the marker!
 
-<h2 id="An_approach_for_using_third-party_APIs">An approach for using third-party APIs</h2>
+### Controlling what map controls are displayed
 
-<p>Below we'll take you through an exercise to show you how to use the NYTimes API, which also provides a more general set of steps to follow that you can use as an approach for working with new APIs.</p>
+Inside the original `google.maps.Map()` constructor, you'll see the property `disableDefaultUI: true` specified. This disables all the standard UI controls you usually get on Google Maps.
 
-<h3 id="Find_the_documentation">Find the documentation</h3>
+1.  Try setting its value to `false` (or just removing the line altogether) then reloading your example, and you'll see the map zoom buttons, scale indicator, etc.
+2.  Now undo your last change.
+3.  You can show or hide the controls in a more granular fashion by using other properties that specify single UI features. Try adding the following underneath the `disableDefaultUI: true` (remember to put a comma after `disableDefaultUI: true`, otherwise you'll get an error):
 
-<p>When you want to use a third party API, it is essential to find out where the documentation is, so you can find out what features the API has, how you use them, etc. The New York Times API documentation is at <a href="https://developer.nytimes.com/">https://developer.nytimes.com/</a>.</p>
+    ```js
+    zoomControl: true,
+    mapTypeControl: true,
+    scaleControl: true,
+    ```
 
-<h3 id="Get_a_developer_key">Get a developer key</h3>
+4.  Now try reloading the example to see the effect these properties have. You can find more options to experiment with at the [MapOptions object reference page](https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions).
 
-<p>Most APIs require you to use some kind of developer key, for reasons of security and accountability. To sign up for an NYTimes API key, you need to go to <a href="https://developer.nytimes.com/signup">https://developer.nytimes.com/signup</a>.</p>
+That's it for now — have a look around the [Google Maps APIs documentation](https://developers.google.com/maps/documentation/javascript/), and have some more fun playing!
 
-<ol>
- <li>
-  <p>Let's request a key for the "Article Search API" — fill in the form, selecting this as the API you want to use.</p>
- </li>
- <li>
-  <p>Next, wait a few minutes, then get the key from your email.</p>
- </li>
- <li>
-  <p>Now, to start the example off, make copies of <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html">nytimes_start.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css">nytimes.css</a> in a new directory on your computer. If you've already <a href="/en-US/docs/Learn#Getting_our_code_examples">cloned the examples repository</a>, you'll already have a copy of these files, which you can find in the <em>javascript/apis/third-party-apis/nytimes</em> directory. Initially the <code>&lt;script&gt;</code> element contains a number of variables needed for the setup of the example; below we'll fill in the required functionality.</p>
- </li>
-</ol>
+## A RESTful API — NYTimes
 
-<p>The app will end up allowing you to type in a search term and optional start and end dates, which it will then use to query the Article Search API and display the search results.</p>
+Now let's look at another API example — the [New York Times API](https://developer.nytimes.com). This API allows you to retrieve New York Times news story information and display it on your site. This type of API is known as a **RESTful API** — instead of getting data using the features of a JavaScript library like we did with Google Maps, we get data by making HTTP requests to specific URLs, with data like search terms and other properties encoded in the URL (often as URL parameters). This is a common pattern you'll encounter with APIs.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14821/nytimes-search.png" style="border-style: solid; border-width: 1px; display: block; height: 374px; margin: 0px auto; width: 700px;"></p>
+## An approach for using third-party APIs
 
-<h3 id="Connect_the_API_to_your_app">Connect the API to your app</h3>
+Below we'll take you through an exercise to show you how to use the NYTimes API, which also provides a more general set of steps to follow that you can use as an approach for working with new APIs.
 
-<p>First, you'll need to make a connection between the API, and your app. This is usually done either by connecting to the API's JavaScript (as we did in the Google Maps API), or by making requests to the correct URL(s).</p>
+### Find the documentation
 
-<p>In the case of this API, you need to include the API key as a <a href="/en-US/docs/Web/HTTP/Methods/GET">get</a> parameter every time you request data from it.</p>
+When you want to use a third party API, it is essential to find out where the documentation is, so you can find out what features the API has, how you use them, etc. The New York Times API documentation is at <https://developer.nytimes.com/>.
 
-<ol>
- <li>
-  <p>Find the following line:</p>
+### Get a developer key
 
-  <pre class="brush: js">var key = 'INSERT-YOUR-API-KEY-HERE';</pre>
+Most APIs require you to use some kind of developer key, for reasons of security and accountability. To sign up for an NYTimes API key, you need to go to <https://developer.nytimes.com/signup>.
 
-  <p>Replace <code>INSERT-YOUR-API-KEY-HERE</code> with the actual API key you got in the previous section.</p>
- </li>
- <li>
-  <p>Add the following line to your JavaScript, below the "<code>// Event listeners to control the functionality</code>" comment. This runs a function called <code>fetchResults()</code> when the form is submitted (the button is pressed).</p>
+1.  Let's request a key for the "Article Search API" — fill in the form, selecting this as the API you want to use.
+2.  Next, wait a few minutes, then get the key from your email.
+3.  Now, to start the example off, make copies of [nytimes_start.html](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes_start.html) and [nytimes.css](https://github.com/mdn/learning-area/blob/master/javascript/apis/third-party-apis/nytimes/nytimes.css) in a new directory on your computer. If you've already [cloned the examples repository](/ru/docs/Learn#Getting_our_code_examples), you'll already have a copy of these files, which you can find in the _javascript/apis/third-party-apis/nytimes_ directory. Initially the `<script>` element contains a number of variables needed for the setup of the example; below we'll fill in the required functionality.
 
-  <pre class="brush: js">searchForm.addEventListener('submit', submitSearch);</pre>
- </li>
- <li>
-  <p>Now add the <code>submitSearch()</code> and <code>fetchResults()</code> function definitions, below the previous line:</p>
+The app will end up allowing you to type in a search term and optional start and end dates, which it will then use to query the Article Search API and display the search results.
 
-  <pre class="brush: js">function submitSearch(e) {
-  pageNumber = 0;
-  fetchResults(e);
-}
+![](https://mdn.mozillademos.org/files/14821/nytimes-search.png)
+
+### Connect the API to your app
+
+First, you'll need to make a connection between the API, and your app. This is usually done either by connecting to the API's JavaScript (as we did in the Google Maps API), or by making requests to the correct URL(s).
+
+In the case of this API, you need to include the API key as a [get](/ru/docs/Web/HTTP/Methods/GET) parameter every time you request data from it.
+
+1.  Find the following line:
 
-function fetchResults(e) {
-  // Use preventDefault() to stop the form submitting
-  e.preventDefault();
+    ```js
+    var key = 'INSERT-YOUR-API-KEY-HERE';
+    ```
 
-  // Assemble the full URL
-  url = baseURL + '?api-key=' + key + '&amp;page=' + pageNumber + '&amp;q=' + searchTerm.value + '&amp;fq=document_type:("article")';
+    Replace `INSERT-YOUR-API-KEY-HERE` with the actual API key you got in the previous section.
 
-  if(startDate.value !== '') {
-    url += '&amp;begin_date=' + startDate.value;
-  };
+2.  Add the following line to your JavaScript, below the "`// Event listeners to control the functionality`" comment. This runs a function called `fetchResults()` when the form is submitted (the button is pressed).
 
-  if(endDate.value !== '') {
-    url += '&amp;end_date=' + endDate.value;
-  };
+    ```js
+    searchForm.addEventListener('submit', submitSearch);
+    ```
 
-}</pre>
- </li>
-</ol>
+3.  Now add the `submitSearch()` and `fetchResults()` function definitions, below the previous line:
 
-<p><code>submitSearch()</code> sets the page number back to 0 to begin with, then calls <code>fetchResults()</code>. This first calls <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code> on the event object, to stop the form actually submitting (which would break the example). Next, we use some string manipulation to assemble the full URL that we will make the request to. We start off by assembling the parts we deem as mandatory for this demo:</p>
+    ```js
+    function submitSearch(e) {
+      pageNumber = 0;
+      fetchResults(e);
+    }
+
+    function fetchResults(e) {
+      // Use preventDefault() to stop the form submitting
+      e.preventDefault();
+
+      // Assemble the full URL
+      url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value + '&fq=document_type:("article")';
 
-<ul>
- <li>The base URL (taken from the <code>baseURL</code> variable).</li>
- <li>The API key, which has to be specified in the <code>api-key</code> URL parameter (the value is taken from the <code>key</code> variable).</li>
- <li>The page number, which has to be specified in the <code>page</code> URL parameter (the value is taken from the <code>pageNumber</code> variable).</li>
- <li>The search term, which has to be specified in the <code>q</code> URL parameter (the value is taken from the value of the <code>searchTerm</code> text {{htmlelement("input")}}).</li>
- <li>The document type to return results for, as specified in an expression passed in via the <code>fq</code> URL parameter. In this case, we just want to return articles.</li>
-</ul>
+      if(startDate.value !== '') {
+        url += '&begin_date=' + startDate.value;
+      };
 
-<p>Next, we use a couple of <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> statements to check whether the <code>startDate</code> and <code>endDate</code> <code>&lt;input&gt;</code>s have had values filled in on them. If they do, we append their values to the URL, specified in <code>begin_date</code> and <code>end_date</code> URL parameters respectively.</p>
+      if(endDate.value !== '') {
+        url += '&end_date=' + endDate.value;
+      };
+
+    }
+    ```
 
-<p>So, a complete URL would end up looking something like this:</p>
+`submitSearch()` sets the page number back to 0 to begin with, then calls `fetchResults()`. This first calls [`preventDefault()`](/en-US/docs/Web/API/Event/preventDefault) on the event object, to stop the form actually submitting (which would break the example). Next, we use some string manipulation to assemble the full URL that we will make the request to. We start off by assembling the parts we deem as mandatory for this demo:
 
-<pre>https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=4f3c267e125943d79b0a3e679f608a78&amp;page=0&amp;q=cats
-&amp;fq=document_type:("article")&amp;begin_date=20170301&amp;end_date=20170312</pre>
+- The base URL (taken from the `baseURL` variable).
+- The API key, which has to be specified in the `api-key` URL parameter (the value is taken from the `key` variable).
+- The page number, which has to be specified in the `page` URL parameter (the value is taken from the `pageNumber` variable).
+- The search term, which has to be specified in the `q` URL parameter (the value is taken from the value of the `searchTerm` text {{htmlelement("input")}}).
+- The document type to return results for, as specified in an expression passed in via the `fq` URL parameter. In this case, we just want to return articles.
 
-<div class="note">
-<p><strong>Note</strong>: You can find more details of what URL parameters can be included in the <a href="https://developer.nytimes.com/article_search_v2.json">Article Search API reference</a>.</p>
-</div>
+Next, we use a couple of [`if()`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statements to check whether the `startDate` and `endDate` `<input>`s have had values filled in on them. If they do, we append their values to the URL, specified in `begin_date` and `end_date` URL parameters respectively.
 
-<div class="note">
-<p><strong>Note</strong>: The example has rudimentary form data validation — the search term field has to be filled in before the form can be submitted (achieved using the <code>required</code> attribute), and the date fields have <code>pattern</code> attributes specified, which means they won't submit unless their values consist of 8 numbers (<code>pattern="[0-9]{8}"</code>). See <a href="/en-US/docs/Learn/HTML/Forms/Form_validation">Form data validation</a> for more details on how these work.</p>
-</div>
+So, a complete URL would end up looking something like this:
 
-<h3 id="Requesting_data_from_the_API">Requesting data from the API</h3>
+```
+https://api.nytimes.com/svc/search/v2/articlesearch.json?api-key=4f3c267e125943d79b0a3e679f608a78&page=0&q=cats
+&fq=document_type:("article")&begin_date=20170301&end_date=20170312
+```
 
-<p>Now we've constructed our URL, let's make a request to it. We'll do this using the <a href="/en-US/docs/Web/API/Fetch_API/Using_Fetch">Fetch API</a>.</p>
+> **Примечание:** You can find more details of what URL parameters can be included in the [Article Search API reference](https://developer.nytimes.com/article_search_v2.json).
 
-<p>Add the following code block inside the <code>fetchResults()</code> function, just above the closing curly brace:</p>
+> **Примечание:** The example has rudimentary form data validation — the search term field has to be filled in before the form can be submitted (achieved using the `required` attribute), and the date fields have `pattern` attributes specified, which means they won't submit unless their values consist of 8 numbers (`pattern="[0-9]{8}"`). See [Form data validation](/ru/docs/Learn/HTML/Forms/Form_validation) for more details on how these work.
 
-<pre class="brush: js">// Use fetch() to make the request to the API
+### Requesting data from the API
+
+Now we've constructed our URL, let's make a request to it. We'll do this using the [Fetch API](/ru/docs/Web/API/Fetch_API/Using_Fetch).
+
+Add the following code block inside the `fetchResults()` function, just above the closing curly brace:
+
+```js
+// Use fetch() to make the request to the API
 fetch(url).then(function(result) {
   return result.json();
 }).then(function(json) {
   displayResults(json);
-});</pre>
+});
+```
 
-<p>Here we run the request by passing our <code>url</code> variable to <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code>, convert the response body to JSON using the <code><a href="/en-US/docs/Web/API/Body/json">json()</a></code> function, then pass the resulting JSON to the <code>displayResults()</code> function so the data can be displayed in our UI.</p>
+Here we run the request by passing our `url` variable to [`fetch()`](/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch), convert the response body to JSON using the [`json()`](/en-US/docs/Web/API/Body/json) function, then pass the resulting JSON to the `displayResults()` function so the data can be displayed in our UI.
 
-<h3 id="Displaying_the_data">Displaying the data</h3>
+### Displaying the data
 
-<p>OK, let's look at how we'll display the data. Add the following function below your <code>fetchResults()</code> function.</p>
+OK, let's look at how we'll display the data. Add the following function below your `fetchResults()` function.
 
-<pre class="brush: js">function displayResults(json) {
+```js
+function displayResults(json) {
   while (section.firstChild) {
       section.removeChild(section.firstChild);
   }
@@ -352,7 +315,7 @@ fetch(url).then(function(result) {
     para.textContent = 'No results returned.'
     section.appendChild(para);
   } else {
-    for(var i = 0; i &lt; articles.length; i++) {
+    for(var i = 0; i < articles.length; i++) {
       var article = document.createElement('article');
       var heading = document.createElement('h2');
       var link = document.createElement('a');
@@ -368,13 +331,13 @@ fetch(url).then(function(result) {
       link.textContent = current.headline.main;
       para1.textContent = current.snippet;
       para2.textContent = 'Keywords: ';
-      for(var j = 0; j &lt; current.keywords.length; j++) {
+      for(var j = 0; j < current.keywords.length; j++) {
         var span = document.createElement('span');
         span.textContent += current.keywords[j].value + ' ';
         para2.appendChild(span);
       }
 
-      if(current.multimedia.length &gt; 0) {
+      if(current.multimedia.length > 0) {
         img.src = 'http://www.nytimes.com/' + current.multimedia[0].url;
         img.alt = current.headline.main;
       }
@@ -390,93 +353,83 @@ fetch(url).then(function(result) {
       section.appendChild(article);
     }
   }
-};</pre>
+};
+```
 
-<p>There's a lot of code here; let's explain it step by step:</p>
+There's a lot of code here; let's explain it step by step:
 
-<ul>
- <li>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> loop is a common pattern used to delete all of the contents of a DOM element, in this case, the {{htmlelement("section")}} element. We keep checking to see if the <code>&lt;section&gt;</code> has a first child, and if it does, we remove the first child. The loop ends when <code>&lt;section&gt;</code> no longer has any children.</li>
- <li>Next, we set the <code>articles</code> variable to equal <code>json.response.docs</code> — this is the array holding all the objects that represent the articles returned by the search. This is done purely to make the following code a bit simpler.</li>
- <li>The first <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/if...else">if()</a></code> block checks to see if 10 articles are returned (the API returns up to 10 articles at a time.) If so, we display the {{htmlelement("nav")}} that contains the <em>Previous 10</em>/<em>Next 10</em> pagination buttons. If less than 10 articles are returned, they will all fit on one page, so we don't need to show the pagination buttons. We will wire up the pagination functionality in the next section.</li>
- <li>The next <code>if()</code> block checks to see if no articles are returned. If so, we don't try to display any — we just create a {{htmlelement("p")}} containing the text "No results returned." and insert it into the <code>&lt;section&gt;</code>.</li>
- <li>If some articles are returned, we, first of all, create all the elements that we want to use to display each news story, insert the right contents into each one, and then insert them into the DOM at the appropriate places. To work out which properties in the article objects contained the right data to show, we consulted the <a href="https://developer.nytimes.com/article_search_v2.json">Article Search API reference</a>. Most of these operations are fairly obvious, but a few are worth calling out:
-  <ul>
-   <li>We used a <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for">for loop</a> (<code>for(var j = 0; j &lt; current.keywords.length; j++) { ... }</code> ) to loop through all the keywords associated with each article, and insert each one inside its own {{htmlelement("span")}}, inside a <code>&lt;p&gt;</code>. This was done to make it easy to style each one.</li>
-   <li>We used an <code>if()</code> block (<code>if(current.multimedia.length &gt; 0) { ... }</code>) to check whether each article actually has any images associated with it (some stories don't.) We display the first image only if it actually exists (otherwise an error would be thrown).</li>
-   <li>We gave our &lt;div&gt; element a class of "clearfix", so we can easily apply clearing to it (this technique is needed at the time of writing to stop floated layouts from breaking.)</li>
-  </ul>
- </li>
-</ul>
+- The [`while`](/en-US/docs/Web/JavaScript/Reference/Statements/while) loop is a common pattern used to delete all of the contents of a DOM element, in this case, the {{htmlelement("section")}} element. We keep checking to see if the `<section>` has a first child, and if it does, we remove the first child. The loop ends when `<section>` no longer has any children.
+- Next, we set the `articles` variable to equal `json.response.docs` — this is the array holding all the objects that represent the articles returned by the search. This is done purely to make the following code a bit simpler.
+- The first [`if()`](/en-US/docs/Web/JavaScript/Reference/Statements/if...else) block checks to see if 10 articles are returned (the API returns up to 10 articles at a time.) If so, we display the {{htmlelement("nav")}} that contains the _Previous 10_/_Next 10_ pagination buttons. If less than 10 articles are returned, they will all fit on one page, so we don't need to show the pagination buttons. We will wire up the pagination functionality in the next section.
+- The next `if()` block checks to see if no articles are returned. If so, we don't try to display any — we just create a {{htmlelement("p")}} containing the text "No results returned." and insert it into the `<section>`.
+- If some articles are returned, we, first of all, create all the elements that we want to use to display each news story, insert the right contents into each one, and then insert them into the DOM at the appropriate places. To work out which properties in the article objects contained the right data to show, we consulted the [Article Search API reference](https://developer.nytimes.com/article_search_v2.json). Most of these operations are fairly obvious, but a few are worth calling out:
 
-<p>If you try the example now, it should work, although the pagination buttons won't work yet.</p>
+  - We used a [for loop](/ru/docs/Web/JavaScript/Reference/Statements/for) (`for(var j = 0; j < current.keywords.length; j++) { ... }` ) to loop through all the keywords associated with each article, and insert each one inside its own {{htmlelement("span")}}, inside a `<p>`. This was done to make it easy to style each one.
+  - We used an `if()` block (`if(current.multimedia.length > 0) { ... }`) to check whether each article actually has any images associated with it (some stories don't.) We display the first image only if it actually exists (otherwise an error would be thrown).
+  - We gave our \<div> element a class of "clearfix", so we can easily apply clearing to it (this technique is needed at the time of writing to stop floated layouts from breaking.)
 
-<h3 id="Wiring_up_the_pagination_buttons">Wiring up the pagination buttons</h3>
+If you try the example now, it should work, although the pagination buttons won't work yet.
 
-<p>To make the pagination buttons work, we will increment (or decrement) the value of the <code>pageNumber</code> variable, and then re-rerun the fetch request with the new value included in the page URL parameter. This works because the NYTimes API only returns 10 results at a time — if more than 10 results are available, it will return the first 10 (0-9) if the <code>page</code> URL parameter is set to 0 (or not included at all — 0 is the default value), the next 10 (10-19) if it is set to 1, and so on.</p>
+### Wiring up the pagination buttons
 
-<p>This allows us to easily write a simplistic pagination function.</p>
+To make the pagination buttons work, we will increment (or decrement) the value of the `pageNumber` variable, and then re-rerun the fetch request with the new value included in the page URL parameter. This works because the NYTimes API only returns 10 results at a time — if more than 10 results are available, it will return the first 10 (0-9) if the `page` URL parameter is set to 0 (or not included at all — 0 is the default value), the next 10 (10-19) if it is set to 1, and so on.
 
-<ol>
- <li>
-  <p>Below the existing <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> call, add these two new ones, which cause the <code>nextPage()</code> and <code>previousPage()</code> functions to be invoked when the relevant buttons are clicked:</p>
+This allows us to easily write a simplistic pagination function.
 
-  <pre class="brush: js">nextBtn.addEventListener('click', nextPage);
-previousBtn.addEventListener('click', previousPage);</pre>
- </li>
- <li>
-  <p>Below your previous addition, let's define the two functions — add this code now:</p>
+1.  Below the existing [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener) call, add these two new ones, which cause the `nextPage()` and `previousPage()` functions to be invoked when the relevant buttons are clicked:
 
-  <pre class="brush: js">function nextPage(e) {
-  pageNumber++;
-  fetchResults(e);
-};
+    ```js
+    nextBtn.addEventListener('click', nextPage);
+    previousBtn.addEventListener('click', previousPage);
+    ```
 
-function previousPage(e) {
-  if(pageNumber &gt; 0) {
-    pageNumber--;
-  } else {
-    return;
-  }
-  fetchResults(e);
-};</pre>
+2.  Below your previous addition, let's define the two functions — add this code now:
 
-  <p>The first function is simple — we increment the <code>pageNumber</code> variable, then run the <code>fetchResults()</code> function again to display the next page's results.</p>
+    ```js
+    function nextPage(e) {
+      pageNumber++;
+      fetchResults(e);
+    };
+
+    function previousPage(e) {
+      if(pageNumber > 0) {
+        pageNumber--;
+      } else {
+        return;
+      }
+      fetchResults(e);
+    };
+    ```
 
-  <p>The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that <code>pageNumber</code> is not already zero before decrementing it — if the fetch request runs with a minus <code>page</code> URL parameter, it could cause errors. If the <code>pageNumber</code> is already 0, we simply <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> out of the function, to avoid wasting processing power (If we are already at the first page, we don't need to load the same results again).</p>
- </li>
-</ol>
+    The first function is simple — we increment the `pageNumber` variable, then run the `fetchResults()` function again to display the next page's results.
 
-<h2 id="YouTube_example">YouTube example</h2>
+    The second function works nearly exactly the same way in reverse, but we also have to take the extra step of checking that `pageNumber` is not already zero before decrementing it — if the fetch request runs with a minus `page` URL parameter, it could cause errors. If the `pageNumber` is already 0, we simply [`return`](/en-US/docs/Web/JavaScript/Reference/Statements/return) out of the function, to avoid wasting processing power (If we are already at the first page, we don't need to load the same results again).
 
-<p>We also built another example for you to study and learn from — see our <a href="https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/">YouTube video search example</a>. This uses two related APIs:</p>
+## YouTube example
 
-<ul>
- <li>The <a href="https://developers.google.com/youtube/v3/docs/">YouTube Data API</a> to search for YouTube videos and return results.</li>
- <li>The <a href="https://developers.google.com/youtube/iframe_api_reference">YouTube IFrame Player API</a> to display the returned video examples inside IFrame video players so you can watch them.</li>
-</ul>
+We also built another example for you to study and learn from — see our [YouTube video search example](https://mdn.github.io/learning-area/javascript/apis/third-party-apis/youtube/). This uses two related APIs:
 
-<p>This example is interesting because it shows two related third-party APIs being used together to build an app. The first one is a RESTful API, while the second one works more like Google Maps (with constructors, etc.). It is worth noting however that both of the APIs require a JavaScript library to be applied to the page. The RESTful API has functions available to handle making the HTTP requests and returning the results, so you don't have to write them out yourself using say fetch or XHR.</p>
+- The [YouTube Data API](https://developers.google.com/youtube/v3/docs/) to search for YouTube videos and return results.
+- The [YouTube IFrame Player API](https://developers.google.com/youtube/iframe_api_reference) to display the returned video examples inside IFrame video players so you can watch them.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14823/youtube-example.png" style="border-style: solid; border-width: 1px; display: block; height: 389px; margin: 0px auto; width: 700px;"></p>
+This example is interesting because it shows two related third-party APIs being used together to build an app. The first one is a RESTful API, while the second one works more like Google Maps (with constructors, etc.). It is worth noting however that both of the APIs require a JavaScript library to be applied to the page. The RESTful API has functions available to handle making the HTTP requests and returning the results, so you don't have to write them out yourself using say fetch or XHR.
 
-<p>We are not going to say too much more about this example in the article — <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube">the source code</a> has detailed comments inserted inside it to explain how it works.</p>
+![](https://mdn.mozillademos.org/files/14823/youtube-example.png)
 
-<h2 id="Summary">Summary</h2>
+We are not going to say too much more about this example in the article — [the source code](https://github.com/mdn/learning-area/tree/master/javascript/apis/third-party-apis/youtube) has detailed comments inserted inside it to explain how it works.
 
-<p>This article has given you a useful introduction to using third party APIs to add functionality to your websites.</p>
+## Summary
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}</p>
+This article has given you a useful introduction to using third party APIs to add functionality to your websites.
 
-<p> </p>
+{{PreviousMenuNext("Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Learn/JavaScript/Client-side_web_APIs")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction">Introduction to web APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents">Manipulating documents</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs">Third party APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Drawing graphics</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs">Video and audio APIs</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage">Client-side storage</a></li>
-</ul>
+- [Introduction to web APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction)
+- [Manipulating documents](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents)
+- [Fetching data from the server](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data)
+- [Third party APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs)
+- [Drawing graphics](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics)
+- [Video and audio APIs](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs)
+- [Client-side storage](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage)
diff --git a/files/ru/learn/javascript/first_steps/a_first_splash/index.md b/files/ru/learn/javascript/first_steps/a_first_splash/index.md
index 84aa8bbed18229..3eecf8ced13fc3 100644
--- a/files/ru/learn/javascript/first_steps/a_first_splash/index.md
+++ b/files/ru/learn/javascript/first_steps/a_first_splash/index.md
@@ -4,58 +4,41 @@ slug: Learn/JavaScript/First_steps/A_first_splash
 translation_of: Learn/JavaScript/First_steps/A_first_splash
 original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}</div>
+Теперь, когда вы получили [базовое представление о JavaScript](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript) — самое время познакомиться с ним на практике! В данной статье представлен ускоренный практический курс, демонстрирующий основные возможности JavaScript. В этом курсе, шаг за шагом, вы создадите простую игру «Угадай число».
 
-<p class="summary">Теперь, когда вы получили <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript">базовое представление о JavaScript</a> — самое время познакомиться с ним на практике! В данной статье представлен ускоренный практический курс, демонстрирующий основные возможности JavaScript. В этом курсе, шаг за шагом, вы создадите простую игру «Угадай число».</p>
+| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript. |
+| ------------------- | ----------------------------------------------------------------------------------------------------------- |
+| Цели:               | Получение первого опыта в программировании на JavaScript.                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность, знание основ HTML и CSS, понимание что такое и для чего нужен JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цели:</th>
-   <td>Получение первого опыта в программировании на JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!
 
-<p>Вам не придётся сразу понимать весь код — мы только хотим познакомить вас с базовыми концепциями языка и дать представление о том, как работает JavaScript (и другие языки программирования). В дальнейших статьях вы изучите эти концепции более подробно!</p>
+> **Примечание:** Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.
 
-<div class="note">
-<p>Большинство языковых конструкций JavaScript, с которыми вы познакомитесь (функции, циклы и т.д.), имеют аналоги в других языках программирования — т.е. языки имеют разный синтаксис, но концепции в большинстве случаев те же самые.</p>
-</div>
+## Думай как программист
 
-<h2 id="Думай_как_программист">Думай как программист</h2>
+Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:
 
-<p>Одним из самых трудных и значимых моментов в обучении программированию является не изучение непосредственно синтаксиса языка, а понимание того как применять его для решения реальных задач. Вам нужно начать думать как программист, обычно это означает следующее:</p>
+- Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.
+- Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.
 
-<ul>
- <li>Сначала вы разрабатываете логику (структуру, алгоритм выполнения) программы — общие задачи, что и в каких случаях она должна делать, как должна завершиться и т.д., т.е. создаёте описание полного цикла её работы.</li>
- <li>Затем определяете какие конструкции (возможности) языка вам понадобятся и как заставить их работать вместе — для последовательного выполнения всех этапов разработанной логики.</li>
-</ul>
+Всё вместе это потребует тяжёлой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнёте "думать как программист", но предоставим для этого достаточно возможностей в этой статье.
 
-<p>Всё вместе это потребует тяжёлой работы, знания языка, практики в написании кода - и немного творчества. Чем больше вы будете заняты решением практических задач, тем быстрее будете расти в программировании. Мы не обещаем, что вы сразу начнёте "думать как программист", но предоставим для этого достаточно возможностей в этой статье.</p>
+Учитывая вышесказанное, на примере простой игры, давайте детально разберём каждый этап создания программы и познакомимся с некоторыми конструкциями языка.
 
-<p>Учитывая вышесказанное, на примере простой игры, давайте детально разберём каждый этап создания программы и познакомимся с некоторыми конструкциями языка.</p>
+## Игра «Угадай число»
 
-<h2 id="Игра_«Угадай_число»">Игра «Угадай число»</h2>
+В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:
 
-<p>В этой статье мы покажем вам как создать простую игру, которую вы видите ниже:</p>
+```html hidden
+<!DOCTYPE html>
+<html>
 
-<div class="hidden">
-<h6 id="Top_hidden_code">Top hidden code</h6>
-
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-
-&lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;Number guessing game&lt;/title&gt;
-    &lt;style&gt;
+<head>
+    <meta charset="utf-8">
+    <title>Number guessing game</title>
+    <style>
         html {
             font-family: sans-serif;
         }
@@ -71,20 +54,20 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
             color: white;
             padding: 3px;
         }
-    &lt;/style&gt;
-&lt;/head&gt;
-
-&lt;body&gt;
-    &lt;h1&gt;Number guessing game&lt;/h1&gt;
-    &lt;p&gt;We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.&lt;/p&gt;
-    &lt;div class="form"&gt; &lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt; &lt;input type="submit" value="Submit guess" class="guessSubmit"&gt; &lt;/div&gt;
-    &lt;div class="resultParas"&gt;
-        &lt;p class="guesses"&gt;&lt;/p&gt;
-        &lt;p class="lastResult"&gt;&lt;/p&gt;
-        &lt;p class="lowOrHi"&gt;&lt;/p&gt;
-    &lt;/div&gt;
-&lt;/body&gt;
-&lt;script&gt;
+    </style>
+</head>
+
+<body>
+    <h1>Number guessing game</h1>
+    <p>We have selected a random number between 1 and 100. See if you can guess it in 10 turns or less. We'll tell you if your guess was too high or too low.</p>
+    <div class="form"> <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField"> <input type="submit" value="Submit guess" class="guessSubmit"> </div>
+    <div class="resultParas">
+        <p class="guesses"></p>
+        <p class="lastResult"></p>
+        <p class="lowOrHi"></p>
+    </div>
+</body>
+<script>
     // Your JavaScript goes here
     var randomNumber = Math.floor(Math.random() * 100) + 1;
     var guesses = document.querySelector('.guesses');
@@ -115,9 +98,9 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
       } else {
         lastResult.textContent = 'Wrong!';
         lastResult.style.backgroundColor = 'red';
-        if(userGuess &lt; randomNumber) {
+        if(userGuess < randomNumber) {
           lowOrHi.textContent='Last guess was too low!' ;
-        } else if(userGuess &gt; randomNumber) {
+        } else if(userGuess > randomNumber) {
           lowOrHi.textContent = 'Last guess was too high!';
         }
       }
@@ -140,7 +123,7 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
     function resetGame() {
       guessCount = 1;
       var resetParas = document.querySelectorAll('.resultParas p');
-      for(var i = 0 ; i &lt; resetParas.length ; i++) {
+      for(var i = 0 ; i < resetParas.length ; i++) {
         resetParas[i].textContent='';
       }
 
@@ -152,73 +135,68 @@ original_slug: Learn/JavaScript/Первые_шаги/A_first_splash
       lastResult.style.backgroundColor='white';
       randomNumber=Math.floor(Math.random() * 100) + 1;
     }
-&lt;/script&gt;
-
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}</p>
-
-<p>Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.</p>
-
-<p>Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:</p>
-
-<blockquote>
-<p>Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.</p>
-</blockquote>
-
-<p>Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:</p>
-
-<ol>
- <li>Сгенерировать случайное число между 1 и 100.</li>
- <li>Начать запись количества попыток игрока угадать число. Начать с 1.</li>
- <li>Предоставить попытку угадать игроку загаданное число.</li>
- <li>Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки</li>
- <li>Далее, проверить было ли это число верным.</li>
- <li>Если число верное:
-  <ol>
-   <li>Показать поздравительное сообщение.</li>
-   <li>Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).</li>
-   <li>Предоставить возможность для перезапуска игры.</li>
-  </ol>
- </li>
- <li>Если число не верное и есть попытки:
-  <ol>
-   <li>Сказать игроку, что он не угадал.</li>
-   <li>Разрешить ему использовать ещё попытку.</li>
-   <li>Повысить число попыток на 1.</li>
-  </ol>
- </li>
- <li>Если число не верное и попыток нет:
-  <ol>
-   <li>Сказать игроку, что игра окончена.</li>
-   <li>Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).</li>
-   <li>Предоставить возможность для перезапуска игры.</li>
-  </ol>
- </li>
- <li>Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.</li>
-</ol>
-
-<p>Давайте теперь перейдём к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.</p>
-
-<h3 id="Подготовка">Подготовка</h3>
-
-<p>В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файла  <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">number-guessing-game-start.html</a>  (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">см. здесь</a>).  Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.</p>
-
-<p>Место, где мы будем добавлять весь наш код, находится внутри элемента {{htmlelement("script")}} в нижней части HTML:</p>
-
-<pre class="brush: html">&lt;script&gt;
+</script>
+
+</html>
+```
+
+{{ EmbedLiveSample('Top_hidden_code', '100%', 320) }}
+
+Поиграйте в неё - познакомьтесь с игрой, прежде чем двигаться дальше.
+
+Давайте представим, что ваш босс дал вам следующую информацию для создания этой игры:
+
+> Я хочу чтобы ты создал простую игру по принципу "Угадай число". Игра должна случайным образом генерировать число от 0 до 100, затем игрок должен отгадать это число за 10 попыток. После каждой попытки игроку сообщают угадал он число или не угадал и если он ошибся, то ему сообщается, что загаданное число больше или меньше того, которое он ввёл. Так же необходимо показывать игроку числа из его предыдущих попыток. Игра будет окончена, если игрок угадал число верно или если у него кончатся все попытки. После окончания игры игроку будет дана возможность сыграть в игру ещё раз.
+
+Поглядев на это краткое изложение, первое, что мы можем сделать - это начать разбивать его на простые действия, максимально думая как программист:
+
+1.  Сгенерировать случайное число между 1 и 100.
+2.  Начать запись количества попыток игрока угадать число. Начать с 1.
+3.  Предоставить попытку угадать игроку загаданное число.
+4.  Как только попытка угадать была отправлена, сначала записать её где-нибудь, чтобы пользователь мог увидеть свои предыдущие попытки
+5.  Далее, проверить было ли это число верным.
+6.  Если число верное:
+
+    1.  Показать поздравительное сообщение.
+    2.  Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
+    3.  Предоставить возможность для перезапуска игры.
+
+7.  Если число не верное и есть попытки:
+
+    1.  Сказать игроку, что он не угадал.
+    2.  Разрешить ему использовать ещё попытку.
+    3.  Повысить число попыток на 1.
+
+8.  Если число не верное и попыток нет:
+
+    1.  Сказать игроку, что игра окончена.
+    2.  Оградить игрока от дальнейшей возможности ввода чисел (это испортит игру).
+    3.  Предоставить возможность для перезапуска игры.
+
+9.  Во время перезапуска игры убедиться, что игровая логика и пользовательский интерфейс полностью сбросились на начальные значения и далее перейти обратно к пункту 1.
+
+Давайте теперь перейдём к рассмотрению того, как мы можем превратить эти шаги в код, создавая примеры и исследуя возможности JavaScript по ходу.
+
+### Подготовка
+
+В начале этого урока, мы хотели бы, чтобы вы создали локальную копию файла [number-guessing-game-start.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html) ([см. здесь](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)). Откройте его как в текстовом редакторе, так и в веб-браузере. На данный момент вы увидите простой заголовок, абзац с инструкцией и форму для ввода предположения, но форма в настоящее время ничего не сделает.
+
+Место, где мы будем добавлять весь наш код, находится внутри элемента {{htmlelement("script")}} в нижней части HTML:
+
+```html
+<script>
 
   // Your JavaScript goes here
 
-&lt;/script&gt;
-</pre>
+</script>
+```
 
-<h3 id="Добавление_переменных_для_хранения_данных">Добавление переменных для хранения данных</h3>
+### Добавление переменных для хранения данных
 
-<p>Давайте начнём. Прежде всего добавьте следующие строки внутри элемента  {{htmlelement("script")}} :</p>
+Давайте начнём. Прежде всего добавьте следующие строки внутри элемента {{htmlelement("script")}} :
 
-<pre><code>var randomNumber = Math.floor(Math.random() * 100) + 1;
+```
+var randomNumber = Math.floor(Math.random() * 100) + 1;
 
 var guesses = document.querySelector('.guesses');
 var lastResult = document.querySelector('.lastResult');
@@ -228,69 +206,72 @@ var guessSubmit = document.querySelector('.guessSubmit');
 var guessField = document.querySelector('.guessField');
 
 var guessCount = 1;
-var resetButton;</code></pre>
+var resetButton;
+```
 
-<p>В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаёте переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.</p>
+В этом разделе кода устанавливаются переменные, необходимые для хранения данных, которые будет использоваться нашей программой. Переменные - это в основном контейнеры для значений (например, числа или строки текста). Вы создаёте переменную с ключевым словом var, за которой следует имя для вашей переменной. Затем вы можете присвоить значение своей переменной знак равенства (=), за которым следует значение, которое вы хотите дать.
 
-<p>В нашем примере:</p>
+В нашем примере:
 
-<ul>
- <li>Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.</li>
- <li>Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде:
-  <pre class="brush: html">&lt;p class="guesses"&gt;&lt;/p&gt;
-&lt;p class="lastResult"&gt;&lt;/p&gt;
-&lt;p class="lowOrHi"&gt;&lt;/p&gt;</pre>
- </li>
- <li>Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки .
-  <pre class="brush: html">&lt;label for="guessField"&gt;Enter a guess: &lt;/label&gt;&lt;input type="text" id="guessField" class="guessField"&gt;
-&lt;input type="submit" value="Submit guess" class="guessSubmit"&gt;</pre>
- </li>
- <li>Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).</li>
-</ul>
+- Первой переменной - randomNumber - присваивается случайное число от 1 до 100, вычисленное с использованием математического алгоритма.
+- Следующие три переменные сделаны для хранения ссылок на абзацы результатов в нашем HTML и используются для вставки значений в абзацы, приведённые далее в коде:
 
-<div class="note">
-<p><strong>Примечание</strong>:<strong> </strong>В дальнейшем вы узнаете намного больше о переменных, в следующей статье.</p>
-</div>
+  ```html
+  <p class="guesses"></p>
+  <p class="lastResult"></p>
+  <p class="lowOrHi"></p>
+  ```
 
-<h3 id="Функции_Functions">Функции (Functions)</h3>
+- Следующие две переменных хранят ссылки на форму ввода текста и кнопку отправки а позже используются для управления подачи догадки .
 
-<p>Затем добавьте следующие ниже предыдущего JavaScript:</p>
+  ```html
+  <label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
+  <input type="submit" value="Submit guess" class="guessSubmit">
+  ```
 
-<pre class="brush: js">function checkGuess() {
-  alert('I am a placeholder');
-}</pre>
+- Наши последние две переменные сохраняют количество догадок 1 (используется для отслеживания того, сколько догадок у игрока было), и ссылку на кнопку сброса, которая ещё не существует (но позже).
 
-<p>Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово <code>function</code>, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки (<code>{ }</code>). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.</p>
+> **Примечание:** :\*\* \*\*В дальнейшем вы узнаете намного больше о переменных, в следующей статье.
 
-<p>Код запускается вводом имени функции, за которым следуют две скобки.</p>
+### Функции (Functions)
 
-<p>Сейчас попробуйте сохранить код и обновить его в браузере.</p>
+Затем добавьте следующие ниже предыдущего JavaScript:
 
-<p>Перейдите к <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоли JavaScript в инструментах разработчика</a>, и введите следующую строку:</p>
+```js
+function checkGuess() {
+  alert('I am a placeholder');
+}
+```
+
+Функции представляют собой многократно используемые блоки кода, написав один раз вы можете запускать их снова и снова, сохраняя нужный постоянно повторяющийся код. Это действительно полезно. Существует несколько способов определить функцию, но пока мы сосредоточимся на одном простом варианте. Здесь мы определили функцию используя ключевое слово `function`, за ним идёт имя с двумя скобками после него. После этого мы добавляем две фигурные скобки (`{ }`). Внутри фигурных скобок содержится весь код, запускающийся всякий раз, когда вызываем функцию.
+
+Код запускается вводом имени функции, за которым следуют две скобки.
+
+Сейчас попробуйте сохранить код и обновить его в браузере.
 
-<pre class="brush: js">checkGuess();</pre>
+Перейдите к [консоли JavaScript в инструментах разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), и введите следующую строку:
 
-<p>Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.</p>
+```js
+checkGuess();
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: В дальнейшем вы намного больше узнаете о функциях.</p>
-</div>
+Вы должны увидеть предупреждение, в котором говорится "I am a placeholder"; в нашем коде мы определили функцию, которая создаёт предупреждение, когда её вызывают.
 
-<h3 id="Операторы_Operators">Операторы (Operators)</h3>
+> **Примечание:** В дальнейшем вы намного больше узнаете о функциях.
 
-<p>Операторы JavaScript позволяют нам проводить проверки, математические расчёты, объединять строки вместе и выполнять другие подобные действия.</p>
+### Операторы (Operators)
 
-<p>Сохраните наш код и обновите страницу показанную в браузере. Откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль JavaScript</a>, если вы ещё её не открыли, чтобы попробовать ввести текст из приведённых ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:</p>
+Операторы JavaScript позволяют нам проводить проверки, математические расчёты, объединять строки вместе и выполнять другие подобные действия.
 
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
+Сохраните наш код и обновите страницу показанную в браузере. Откройте [консоль JavaScript](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), если вы ещё её не открыли, чтобы попробовать ввести текст из приведённых ниже примеров — введите каждую строчку из столбца "Пример", нажимая Enter после каждого из них, и посмотрите какие результаты они возвращают. Если у вас нет доступа к инструментам разработчика в браузере, вы всегда можете использовать простую встроенную консоль, показанную ниже:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;JavaScript console&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>JavaScript console</title>
+    <style>
       * {
         box-sizing: border-box;
       }
@@ -338,14 +319,14 @@ var resetButton;</code></pre>
         clear: both;
       }
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
 
-  &lt;/body&gt;
+  </body>
 
-  &lt;script&gt;
+  <script>
     var geval = eval;
 
     function createInput() {
@@ -354,7 +335,7 @@ var resetButton;</code></pre>
       var inputForm = document.createElement('input');
 
       inputDiv.setAttribute('class','input');
-      inputParas.textContent = '&gt;';
+      inputParas.textContent = '>';
       inputDiv.appendChild(inputParas);
       inputDiv.appendChild(inputForm);
       document.body.appendChild(inputDiv);
@@ -386,102 +367,61 @@ var resetButton;</code></pre>
 
     createInput();
 
-  &lt;/script&gt;
-&lt;/html&gt;</pre>
-</div>
-
-<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
-
-<p>Сначала давайте посмотрим на арифметические операторы, например:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Оператор</th>
-   <th scope="col">Имя</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>+</code></td>
-   <td>Сложение</td>
-   <td><code>6 + 9</code></td>
-  </tr>
-  <tr>
-   <td><code>-</code></td>
-   <td>Вычитание</td>
-   <td><code>20 - 15</code></td>
-  </tr>
-  <tr>
-   <td><code>*</code></td>
-   <td>Умножение</td>
-   <td><code>3 * 7</code></td>
-  </tr>
-  <tr>
-   <td><code>/</code></td>
-   <td>Деление</td>
-   <td><code>10 / 5</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Вы также можете использовать оператор <code>+</code> для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:</p>
-
-<pre class="brush: js">var name = 'Bingo';
+  </script>
+</html>
+```
+
+{{ EmbedLiveSample('Hidden_code', '100%', 300) }}
+
+Сначала давайте посмотрим на арифметические операторы, например:
+
+| Оператор | Имя       | Пример    |
+| -------- | --------- | --------- |
+| `+`      | Сложение  | `6 + 9`   |
+| `-`      | Вычитание | `20 - 15` |
+| `*`      | Умножение | `3 * 7`   |
+| `/`      | Деление   | `10 / 5`  |
+
+Вы также можете использовать оператор `+` для сложения строк текста (в программировании это называется конкатенацией). Попробуйте ввести следующие строки:
+
+```js
+var name = 'Bingo';
 name;
 var hello = ' says hello!';
 hello;
 var greeting = name + hello;
-greeting;</pre>
-
-<p>Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:</p>
-
-<pre class="brush: js">name += ' says hello!';</pre>
-
-<p>Это эквивалентно этому:</p>
-
-<pre class="brush: js">name = name + ' says hello!';</pre>
-
-<p>Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри <a href="#conditionals">ниже</a>), мы используем операторы сравнения, например:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Оператор</th>
-   <th scope="col">Имя</th>
-   <th scope="col">Пример</th>
-  </tr>
-  <tr>
-   <td><code>===</code></td>
-   <td>Строгое равенство (это точно одно и то же?)</td>
-   <td><code>5 === 2 + 4</code></td>
-  </tr>
-  <tr>
-   <td><code>!==</code></td>
-   <td>Строгое неравенство (это не одно и то же?)</td>
-   <td><code>'Chris' !== 'Ch' + 'ris'</code></td>
-  </tr>
-  <tr>
-   <td><code>&lt;</code></td>
-   <td>Меньше чем</td>
-   <td><code>10 &lt; 6</code></td>
-  </tr>
-  <tr>
-   <td><code>&gt;</code></td>
-   <td>Больше чем</td>
-   <td><code>10 &gt; 20</code></td>
-  </tr>
- </thead>
-</table>
-
-<h3 id="Условные_выражения_Conditionals">Условные выражения (Conditionals)</h3>
-
-<p>Вернёмся к нашей функции <code>checkGuess()</code>, я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответствующие реагировала.</p>
-
-<p>Теперь, заменим вашу текущую функцию<code>checkGuess()</code> на эту версию:</p>
-
-<pre class="brush: js">function checkGuess() {
+greeting;
+```
+
+Также есть сокращённые операторы, называемые расширенными операторами присваивания. Например, если вы просто хотите добавить новую строку к существующей и вернуть результат, вы можете сделать так:
+
+```js
+name += ' says hello!';
+```
+
+Это эквивалентно этому:
+
+```js
+name = name + ' says hello!';
+```
+
+Когда мы запускаем проверку true/false (истина/ложь) (например, внутри условных выражений — смотри [ниже](#conditionals)), мы используем операторы сравнения, например:
+
+| Оператор | Имя                                         | Пример                     |
+| -------- | ------------------------------------------- | -------------------------- |
+| `===`    | Строгое равенство (это точно одно и то же?) | `5 === 2 + 4`              |
+| `!==`    | Строгое неравенство (это не одно и то же?)  | `'Chris' !== 'Ch' + 'ris'` |
+| `<`      | Меньше чем                                  | `10 < 6`                   |
+| `>`      | Больше чем                                  | `10 > 20`                  |
+
+### Условные выражения (Conditionals)
+
+Вернёмся к нашей функции `checkGuess()`, я думаю, можно с уверенностью сказать, что мы не хотим, чтобы она просто выводила сообщение заполнитель. Мы хотим, чтобы она проверяла сделал игрок правильный выбор или нет, и соответствующие реагировала.
+
+Теперь, заменим вашу текущую функцию`checkGuess()` на эту версию:
+
+```js
+function checkGuess() {
   var userGuess = Number(guessField.value);
   if (guessCount === 1) {
     guesses.textContent = 'Previous guesses: ';
@@ -499,9 +439,9 @@ greeting;</pre>
   } else {
     lastResult.textContent = 'Wrong!';
     lastResult.style.backgroundColor = 'red';
-    if(userGuess &lt; randomNumber) {
+    if(userGuess < randomNumber) {
       lowOrHi.textContent = 'Last guess was too low!';
-    } else if(userGuess &gt; randomNumber) {
+    } else if(userGuess > randomNumber) {
       lowOrHi.textContent = 'Last guess was too high!';
     }
   }
@@ -509,64 +449,70 @@ greeting;</pre>
   guessCount++;
   guessField.value = '';
   guessField.focus();
-}</pre>
+}
+```
+
+Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.
+
+- Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем `userGuess` и устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод `Number()`, чтобы убедится, что значение точно является числом.
+- Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова `if`, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает `true`, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная `guessCount` числу `1` (то есть является ли это первой попыткой игрока или нет):
 
-<p>Как много кода — фу! Давайте отдельно рассмотрим каждый раздел и объясним, что он делает.</p>
+  ```js
+  guessCount === 1
+  ```
 
-<ul>
- <li>Первая строка (строка под номером 2 в коде выше) объявляет переменную с именем <code>userGuess</code> и устанавливает её значение на то, что сейчас введено в текстовое поле. Мы также пропускаем это значение через встроенный метод <code>Number()</code>, чтобы убедится, что значение точно является числом.</li>
- <li>Затем мы сталкиваемся с нашим первым блоком условного кода (строки 3–5 в коде выше). Блок условного кода позволяет выборочно запускать код в зависимости от того, является определённое условие истинным или нет. Он немного похож на функцию, но это не так. Простейшая форма условного блока начинается с ключевого слова <code>if</code>, за ним круглые скобки, за ними ещё фигурные скобки. В круглые скобки мы добавляем проверку. Если проверка возвращает <code>true</code>, запускается код в фигурных скобках. Если нет, этот код пропускается и мы переходим к следующей части кода. В этом случае проверяется равна ли переменная <code>guessCount</code> числу <code>1</code> (то есть является ли это первой попыткой игрока или нет):
-  <pre class="brush: js">guessCount === 1</pre>
-  Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.</li>
- <li>Строка 6 добавляет текущее значение <code>userGuess</code>  в конец параграфа <code>guesses</code>, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.</li>
- <li>Следующий блок (строки 8–24 ) делает несколько проверок:
-  <ul>
-   <li><code>Первая конструкция  if(){ }</code> проверяет, совпадает ли предположение пользователя с <code>randomNumber</code> установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зелёным цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.</li>
-   <li>Теперь мы добавили ещё одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.</li>
-   <li>Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него ещё остались  догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем ещё один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.</li>
-  </ul>
- </li>
- <li>Последние три строки в функции (строки 26–28 ) готовят нас к следующей попытке. Мы добавляем 1 к переменной <code>guessCount</code>  так как игрок использовал свой ход (<code>++</code> оператор инкремента — увеличивает на 1), очищаем значение текстового поля и фокусируемся на нем снова,  готовы для ввода следующего ответа.</li>
-</ul>
+  Если это так, мы выводим параграф с содержанием "Previous guesses: ". Если нет, ничего не делаем.
 
-<h3 id="События_Events">События (Events)</h3>
+- Строка 6 добавляет текущее значение `userGuess` в конец параграфа `guesses`, плюс пустое пространство поэтому между каждыми показанными предположениями будет пробел.
+- Следующий блок (строки 8–24 ) делает несколько проверок:
 
-<p>На данный момент у нас есть хорошо реализованная функция <code>checkGuess()</code>, но она ничего не сделает, потому что мы ещё не вызвали её. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются <strong>прослушивателями событий</strong>, а блоки кода, выполняемые в ответ на срабатывание событий, называются <strong>обработчиками событий</strong>.</p>
+  - `Первая конструкция if(){ }` проверяет, совпадает ли предположение пользователя с `randomNumber` установленному в верхней части нашего JavaScript. Если это так, игрок правильно догадался, и игра выиграна, поэтому мы показываем игроку поздравительное сообщение с приятным зелёным цветом, очищаем содержимое окна информации о минимуме / максимуме и запускаем функцию, называемую setGameOver (), которую мы обсудим позже.
+  - Теперь мы добавили ещё одну проверку после предыдущей, используя конструкцию else if () {}. Эта конструкция проверяет, является ли этот ход последним ходом пользователя. Если это так, программа выполняет то же самое, что и в предыдущем блоке, но выведет сообщение с текстом GAME OVER.
+  - Последний блок, в конце нашего кода (else {}), содержит код, который запускается только в том случае, если ни один из двух других тестов не возвращает true (т. е. Игрок не догадался правильно, но у него ещё остались догадки). В этом случае мы говорим игроку, что он ошибся, затем мы выполняем ещё один условный тест, чтобы проверить, было ли предположение больше или меньше ответа, показывая дополнительное сообщение.
 
-<p>Добавьте следующую строку ниже закрывающей фигурной скобки функции <code>checkGuess()</code>:</p>
+- Последние три строки в функции (строки 26–28 ) готовят нас к следующей попытке. Мы добавляем 1 к переменной `guessCount` так как игрок использовал свой ход (`++` оператор инкремента — увеличивает на 1), очищаем значение текстового поля и фокусируемся на нем снова, готовы для ввода следующего ответа.
 
-<pre class="brush: js">guessSubmit.addEventListener('click', checkGuess);</pre>
+### События (Events)
 
-<p>Здесь мы добавляем обработчик событий к кнопке <code>guessSubmit</code>. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случае <code>click</code>) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция <code>checkGuess()</code> - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).</p>
+На данный момент у нас есть хорошо реализованная функция `checkGuess()`, но она ничего не сделает, потому что мы ещё не вызвали её. В идеале мы хотим вызывать её во время нажатия кнопки « Submit guess », и для этого нам нужно использовать событие. События - это действия, которые происходят в браузере, например, нажатие кнопки или загрузка страницы или воспроизведение видео, в ответ на которые мы можем запускать блоки кода. Конструкции, которые прослушивают событие, называются **прослушивателями событий**, а блоки кода, выполняемые в ответ на срабатывание событий, называются **обработчиками событий**.
 
-<p>Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определённого момента. Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы ещё не определили функцию <code>setGameOver()</code>, которая должна запускаться после завершения игры. Давайте добавим наш недостающий код и завершим пример функциональности.</p>
+Добавьте следующую строку ниже закрывающей фигурной скобки функции `checkGuess()`:
 
-<h3 id="Завершение_игры">Завершение игры</h3>
+```js
+guessSubmit.addEventListener('click', checkGuess);
+```
 
-<p>Давайте добавим функцию <code>setGameOver()</code> в конец нашего кода, а затем пройдём по ней. Добавьте это под нижней частью вашего JavaScript:</p>
+Здесь мы добавляем обработчик событий к кнопке `guessSubmit`. Это метод, который принимает два входных значения (называемые аргументами) - тип события, которое мы обработаем (в данном случае `click`) в виде строки, и код, который мы хотим запустить при возникновении события (в данном случае функция `checkGuess()` - обратите внимание, что нам не нужно указывать круглые скобки при записи внутри {{domxref("EventTarget.addEventListener", "addEventListener()")}}).
 
-<pre class="brush: js">function setGameOver() {
+Попробуйте сохранить и обновить код сейчас, и ваш пример должен теперь работать, но до определённого момента. Единственная проблема в том, что если вы угадаете правильный ответ или исчерпаете догадки, игра сломается, потому что мы ещё не определили функцию `setGameOver()`, которая должна запускаться после завершения игры. Давайте добавим наш недостающий код и завершим пример функциональности.
+
+### Завершение игры
+
+Давайте добавим функцию `setGameOver()` в конец нашего кода, а затем пройдём по ней. Добавьте это под нижней частью вашего JavaScript:
+
+```js
+function setGameOver() {
   guessField.disabled = true;
   guessSubmit.disabled = true;
   resetButton = document.createElement('button');
   resetButton.textContent = 'Start new game';
   document.body.appendChild(resetButton);
   resetButton.addEventListener('click', resetGame);
-}</pre>
+}
+```
 
-<ul>
- <li>Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключённые свойства как <code>true</code>. Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.</li>
- <li>Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку « Start new game» и добавляют её к нижней части нашего HTML.</li>
- <li>Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на неё запускается функция <code>resetGame()</code>.</li>
-</ul>
+- Первые две строки отключают ввод текста и кнопку формы, устанавливая их отключённые свойства как `true`. Это необходимо, потому что, если бы мы этого не сделали, пользователь мог бы представить больше догадок после завершения игры, что испортит ситуацию.
+- Следующие три строки генерируют новый элемент {{htmlelement("button")}}, устанавливают его текстовую метку « Start new game» и добавляют её к нижней части нашего HTML.
+- Последняя строка устанавливает обработчик событий на нашей новой кнопке, так что при нажатии на неё запускается функция `resetGame()`.
 
-<p>Теперь нам нужно также определить эту функцию! Добавьте следующий код, снова в нижнюю часть вашего JavaScript:</p>
+Теперь нам нужно также определить эту функцию! Добавьте следующий код, снова в нижнюю часть вашего JavaScript:
 
-<pre class="brush: js">function resetGame() {
+```js
+function resetGame() {
   guessCount = 1;
 
   var resetParas = document.querySelectorAll('.resultParas p');
-  for (var i = 0 ; i &lt; resetParas.length ; i++) {
+  for (var i = 0 ; i < resetParas.length ; i++) {
     resetParas[i].textContent = '';
   }
 
@@ -580,93 +526,117 @@ greeting;</pre>
   lastResult.style.backgroundColor = 'white';
 
   randomNumber = Math.floor(Math.random() * 100) + 1;
-}</pre>
+}
+```
 
-<p>Этот довольно длинный блок кода полностью сбрасывает все на то, как это было в начале игры, поэтому у игрока может быть ещё один ход. Это:</p>
+Этот довольно длинный блок кода полностью сбрасывает все на то, как это было в начале игры, поэтому у игрока может быть ещё один ход. Это:
 
-<ul>
- <li>Устанавливает значение <code>guessCount</code> на 1.</li>
- <li>Удаляет все пункты информации.</li>
- <li>Удаляет кнопку сброса из нашего кода.</li>
- <li>Включает элементы формы, устанавливает фокус, делает поле доступным для следующих угадываний.</li>
- <li>Удаляет цвет фона из абзаца <code>lastResult</code>.</li>
- <li>Создаёт новое случайное число, чтобы вы не угадывали одно и тоже!</li>
-</ul>
+- Устанавливает значение `guessCount` на 1.
+- Удаляет все пункты информации.
+- Удаляет кнопку сброса из нашего кода.
+- Включает элементы формы, устанавливает фокус, делает поле доступным для следующих угадываний.
+- Удаляет цвет фона из абзаца `lastResult`.
+- Создаёт новое случайное число, чтобы вы не угадывали одно и тоже!
 
-<p><strong>С этого момента у вас есть полностью работающая (простая) игра - поздравляем!</strong>  </p>
+**С этого момента у вас есть полностью работающая (простая) игра - поздравляем!**
 
-<p>Все, что нам осталось сделать в этой статье, - это поговорить о нескольких других важных функциях кода, которые вы уже видели, хотя вы, возможно, этого не осознали.</p>
+Все, что нам осталось сделать в этой статье, - это поговорить о нескольких других важных функциях кода, которые вы уже видели, хотя вы, возможно, этого не осознали.
 
-<h3 id="Циклы_Loops">Циклы (Loops) </h3>
+### Циклы (Loops)
 
-<p>Одна часть вышеприведённого кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определённое условие.</p>
+Одна часть вышеприведённого кода, которую мы должны рассмотреть более подробно, - это цикл for. Циклы - очень важная концепция программирования, которая позволяет вам снова и снова запускать кусок кода, пока не будет выполнено определённое условие.
 
-<p>Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:</p>
+Для начала перейдите в панель инструментов разработчика JavaScript-консоли и введите следующее:
 
-<pre class="brush: js">for (var i = 1 ; i &lt; 21 ; i++) { console.log(i) }</pre>
+```js
+for (var i = 1 ; i < 21 ; i++) { console.log(i) }
+```
 
-<p>Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):<br>
- Начальное значение: в этом случае мы начинаем подсчёт c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i &lt;21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.</p>
+Что случилось? Номера с 1 по 20 были напечатаны в консоли. Это из-за цикла. Цикл for принимает три входных значения (аргументы):
+Начальное значение: в этом случае мы начинаем подсчёт c 1, но это может быть любое число которое вам нравится. Вы можете заменить i любым другим именем, которое вам нравится, но я использую его как условность, потому что оно короткое и легко запоминается. Условие выхода: Здесь мы указали i <21 - цикл будет продолжаться до тех пор, пока i будет меньше 21. Когда i достигнет 21, цикл больше не будет работать. Инкремент: мы указали i ++, что означает «увеличить i на 1». Цикл будет выполняться один раз для каждого значения i, пока оно не достигнет значения 21 (как обсуждалось выше). В этом случае мы просто печатаем значение i в консоли на каждой итерации с помощью {{domxref ("Console.log", "console.log ()")}}.
 
-<p>Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:</p>
+Теперь давайте посмотрим на цикл в нашей игре угадывания чисел - в функции resetGame () можно найти следующее:
 
-<pre class="brush: js">var resetParas = document.querySelectorAll('.resultParas p');
-for (var i = 0 ; i &lt; resetParas.length ; i++) {
+```js
+var resetParas = document.querySelectorAll('.resultParas p');
+for (var i = 0 ; i < resetParas.length ; i++) {
   resetParas[i].textContent = '';
-}</pre>
+}
+```
+
+Этот код создаёт переменную, содержащую список всех абзацев внутри \<div class = "resultParas">, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.
+
+### Немного об объектах (Objects)
+
+Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже `var resetButton;` в верхней части вашего JavaScript, затем сохраните файл:
+
+```js
+guessField.focus();
+```
+
+Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.
+
+Давайте проанализируем, что произошло. В JavaScript все элементы являются объектами. Объект - это набор связанных функций, хранящихся в одной группе*.* Вы можете создавать собственные объекты, но это требует мастерства, и мы не хотели бы раскрывать эту тему в рамках данного курса. Будет достаточно обсудить встроенные объекты вашего браузера, которые позволяют реализовывать множество полезных вещей.
+
+В нашем примере мы сначала создали переменную `guessField`, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:
+
+```js
+var guessField = document.querySelector('.guessField');
+```
+
+Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. `querySelector()` "берет" одну часть информации - [CSS selector](/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors), который выбирает нужный элемент*.*
+
+Поскольку `guessField` теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:
 
-<p>Этот код создаёт переменную, содержащую список всех абзацев внутри &lt;div class = "resultParas"&gt;, используя метод {{domxref ("Document.querySelectorAll", "querySelectorAll ()")}}, затем он проходит через каждый из них, удаляя текстовое содержимое каждого из них.</p>
+```js
+guessField.focus();
+```
 
-<h3 id="Немного_об_объектах_Objects">Немного об объектах (Objects)</h3>
+Для переменных, которые не содержат ссылок на элементы формы, не будет доступен `focus()`. Например, переменная `guesses` содержит ссылку на элемент {{htmlelement ("p")}}, а `guessCount` содержит число.
 
-<p>Давайте добавим ещё одно окончательное улучшение, прежде чем перейти к обсуждению. Добавьте следующую строку чуть ниже <code>var resetButton;</code> в верхней части вашего JavaScript, затем сохраните файл:</p>
+### Поиграем с объектами браузера
 
-<pre class="brush: js">guessField.focus();</pre>
+Давайте немного поиграем с некоторыми объектами браузера.
 
-<p>Эта строка использует метод {{domxref("HTMLElement.focus", "focus()")}}, чтобы автоматически помещать текстовый курсор в текстовое поле {{htmlelement("input")}}, как только загрузится страница. Пользователь сможет сразу набрать свою первую догадку, не нажимая поле формы. Это всего лишь небольшое дополнение, но оно улучшает удобство использования - даёт пользователю хорошую визуальную подсказку относительно того, что они должны делать в игре.</p>
+1.  Для начала запустите свою программу в браузере.
+2.  Далее, откройте [инструменты разработчика в вашем браузере](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), и убедитесь, что вы перешли во вкладку с консолью JavaScript.
+3.  Введите `guessField` и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!
+4.  Теперь введите следующее:
 
-<p>Давайте проанализируем, что произошло. В JavaScript все элементы являются объектами. Объект - это набор связанных функций, хранящихся в одной группе<em>. </em>Вы можете создавать собственные объекты, но это требует мастерства, и мы не хотели бы раскрывать эту тему в рамках данного курса. Будет достаточно обсудить встроенные объекты вашего браузера, которые позволяют реализовывать множество полезных вещей.</p>
+    ```js
+    guessField.value = 'Hello';
+    ```
 
-<p>В нашем примере мы сначала создали переменную <code>guessField</code>, которая запоминает значение из поля ввода в нашем HTML - следующая строка находится среди первых в нашем коде:</p>
+    Свойство `value` представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!
 
-<pre class="brush: js">var guessField = document.querySelector('.guessField');</pre>
+5.  Попробуйте ввести `guesses` и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.
+6.  Теперь попробуйте ввести:
 
-<p>Чтобы получить это значение, мы использовали метод {{domxref("document.querySelector", "querySelector()")}} объекта {{domxref("document")}}. <code>querySelector()</code> "берет" одну часть информации -  <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">CSS selector</a>, который выбирает нужный элемент<em>.</em></p>
+    ```js
+    guesses.value
+    ```
 
-<p>Поскольку <code>guessField</code> теперь содержит ссылку на элемент {{htmlelement("input")}}, теперь он будет иметь доступ к ряду свойств (в основном к переменным, хранящимся внутри объектов, некоторые значения которых нельзя изменять) и методы (в основном функции, хранящиеся внутри объектов). Одним из методов, доступных для ввода элементов, является focus (), поэтому мы можем теперь использовать эту строку для фокусировки ввода текста:</p>
+    Браузер вернёт вам `undefined`, потому что `value` не существует в параграфах.
 
-<pre class="brush: js">guessField.focus();</pre>
+7.  Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте:
 
-<p>Для переменных, которые не содержат ссылок на элементы формы, не будет доступен <code>focus()</code>. Например, переменная <code>guesses</code> содержит ссылку на элемент {{htmlelement ("p")}}, а <code>guessCount</code> содержит число.</p>
+    ```js
+    guesses.textContent = 'Where is my paragraph?';
+    ```
 
-<h3 id="Поиграем_с_объектами_браузера">Поиграем с объектами браузера</h3>
+8.  Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой:
 
-<p>Давайте немного поиграем с некоторыми объектами браузера.</p>
+    ```js
+    guesses.style.backgroundColor = 'yellow';
+    guesses.style.fontSize = '200%';
+    guesses.style.padding = '10px';
+    guesses.style.boxShadow = '3px 3px 6px black';
+    ```
 
-<ol>
- <li>Для начала запустите свою программу в браузере.</li>
- <li>Далее, откройте <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">инструменты разработчика в вашем браузере</a>, и убедитесь, что вы перешли во вкладку с консолью JavaScript.</li>
- <li>Введите <code>guessField</code> и консоль покажет, что переменная содержит элемент {{htmlelement("input")}}. Вы также можете заметить, что консоль автоматически заполняет имена объектов, которые существуют внутри исполняющей среды, включая ваши переменные!</li>
- <li>Теперь введите следующее:
-  <pre class="brush: js">guessField.value = 'Hello';</pre>
-  Свойство <code>value</code> представляет текущее значение, введённое в текстовое поле. Заметьте, что, введя эту команду, мы изменили его!</li>
- <li>Попробуйте ввести <code>guesses</code> и нажать return. Консоль покажет, что в переменной содержится элемент {{htmlelement("p")}}.</li>
- <li>Теперь попробуйте ввести:
-  <pre class="brush: js">guesses.value</pre>
-  Браузер вернёт вам <code>undefined</code>, потому что <code>value</code> не существует в параграфах.</li>
- <li>Для изменения текста внутри параграфа, взамен используйте свойство {{domxref("Node.textContent", "textContent")}}. Попробуйте:
-  <pre class="brush: js">guesses.textContent = 'Where is my paragraph?';</pre>
- </li>
- <li>Теперь немного повеселимся. Попробуйте ввести следующие строки, одну за другой:
-  <pre class="brush: js">guesses.style.backgroundColor = 'yellow';
-guesses.style.fontSize = '200%';
-guesses.style.padding = '10px';
-guesses.style.boxShadow = '3px 3px 6px black';</pre>
-  Каждый элемент на странице имеет свойство <code>style</code>, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.</li>
-</ol>
+    Каждый элемент на странице имеет свойство `style`, которое само по себе содержит объект, свойства которого содержат все встроенные стили CSS, применяемые к этому элементу. Это позволяет нам динамически задавать новые стили CSS для элементов с помощью JavaScript.
 
-<h2 id="Теперь_можно_отдохнуть...">Теперь можно отдохнуть...</h2>
+## Теперь можно отдохнуть...
 
-<p>Итак, на этом пример закончился - отлично, вы добрались до конца! Попробуйте свой финальный код или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html">поиграйте с нашей готовой версией здесь</a>. Если вы не можете запустить этот пример, сверьтесь с <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html">исходным кодом.</a></p>
+Итак, на этом пример закончился - отлично, вы добрались до конца! Попробуйте свой финальный код или [поиграйте с нашей готовой версией здесь](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/first-splash/number-guessing-game.html). Если вы не можете запустить этот пример, сверьтесь с [исходным кодом.](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game-start.html)
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/What_is_JavaScript", "Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/first_steps/arrays/index.md b/files/ru/learn/javascript/first_steps/arrays/index.md
index c7982427127fa1..1171cb4ff5f7f9 100644
--- a/files/ru/learn/javascript/first_steps/arrays/index.md
+++ b/files/ru/learn/javascript/first_steps/arrays/index.md
@@ -13,212 +13,231 @@ tags:
 translation_of: Learn/JavaScript/First_steps/Arrays
 original_slug: Learn/JavaScript/Первые_шаги/Arrays
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глупых_историй", "Learn/JavaScript/Первые_шаги")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глупых_историй", "Learn/JavaScript/Первые_шаги")}}</div>
+В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.
 
-<p class="summary">В финальной статье этого раздела, мы познакомимся с массивами — лаконичным способом хранения списка элементов под одним именем. Мы поймём, чем они полезны, затем узнаем, как создать массив, получить, добавить и удалить элементы, хранящиеся в массиве.</p>
+| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript. |
+| ------------------- | ------------------------------------------------------------------------------------------------------ |
+| Цель:               | Понять, что такое массивы и как использовать их в JavaScript.                                          |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание о том, что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, что такое массивы и как использовать их в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое массив?
 
-<h2 id="Что_такое_массив">Что такое массив?</h2>
+Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причём разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счёте-фактуре, общая сумма всех цен и распечатка общей цены внизу.
 
-<p>Массивы обычно описываются как «объекты, подобные спискам»; они представляют собой в основном отдельные объекты, которые содержат несколько значений, хранящихся в списке. Объекты массива могут храниться в переменных и обрабатываться во многом так же, как и любой другой тип значения, причём разница заключается в том, что мы можем получить доступ к каждому значению внутри списка отдельно и делать супер полезные и эффективные вещи со списком, а также делать то же самое для каждого из значений. Представим, что у нас есть список продуктов и их цены, хранящиеся в массиве, и мы хотим их просмотреть и распечатать на счёте-фактуре, общая сумма всех цен и распечатка общей цены внизу.</p>
+Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.
 
-<p>Если бы у нас не было массивов, мы должны были бы хранить каждый элемент в отдельной переменной, а затем вызывать код, выполняющий печать и добавляющий отдельно каждый элемент. Написание такого кода займёт намного больше времени, сам код будет менее эффективным и подверженным  ошибкам. Если бы у нас было 10 элементов для добавления в счёт-фактуру, это ещё куда ни шло, но как насчёт 100 предметов? Или 1000? Мы вернёмся к этому примеру позже в статье.</p>
+Как и в предыдущих статьях, давайте узнаем о реальных основах работы с массивами, введя некоторые примеры в [консоль разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools).
 
-<p>Как и в предыдущих статьях, давайте узнаем о реальных основах работы с массивами, введя некоторые примеры в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика</a>.</p>
+### Создание массива
 
-<h3 id="Создание_массива">Создание массива</h3>
+Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.
 
-<p>Массивы создаются из квадратных скобок , которые содержат список элементов, разделённых запятыми.</p>
+1.  Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:
 
-<ol>
- <li>Допустим, мы бы хотели хранить список покупок в массиве — мы бы сделали что-то вроде этого. Введите следующие строчки в вашу консоль:
-  <pre class="brush: js">var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
-shopping;</pre>
- </li>
- <li>В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это:
-  <pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
-var random = ['tree', 795, [0, 1, 2]];</pre>
- </li>
- <li>Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.</li>
-</ol>
+    ```js
+    var shopping = ['bread', 'milk', 'cheese', 'hummus', 'noodles'];
+    shopping;
+    ```
 
-<h3 id="Получение_и_изменение_элементов_массива">Получение и изменение элементов массива</h3>
+2.  В данном случае, каждый элемент в массиве — это строка , но имейте в виду, что вы можете хранить любой элемент в массиве — строку, число, объект, другую переменную, даже другой массив. Вы также можете перемешивать типы элементов — они не должны все быть числами, строками, и так далее. Попробуйте это:
 
-<p>Вы можете после этого получать доступ к отдельным элементам в массиве, используя квадратные скобки, таким же способом каким вы <a href="/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">получаете доступ к буквам в строке</a>.</p>
+    ```js
+    var sequence = [1, 1, 2, 3, 5, 8, 13];
+    var random = ['tree', 795, [0, 1, 2]];
+    ```
 
-<ol>
- <li>Введите следующее в вашу консоль:
-  <pre class="brush: js">shopping[0];
-// возвращает "bread"</pre>
- </li>
- <li>Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это:
-  <pre class="brush: js">shopping[0] = 'tahini';
-shopping;
-// shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]</pre>
+3.  Попробуйте сами создать несколько массивов, перед тем как двигаться дальше.
 
-  <div class="note"><strong>Примечание</strong>: Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!</div>
- </li>
- <li>Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива <code>random </code>(см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого:
-  <pre class="brush: js">random[2][2];</pre>
- </li>
- <li>Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.</li>
-</ol>
+### Получение и изменение элементов массива
 
-<h3 id="Нахождение_длины_массива">Нахождение длины массива</h3>
+Вы можете после этого получать доступ к отдельным элементам в массиве, используя квадратные скобки, таким же способом каким вы [получаете доступ к буквам в строке](/en-US/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character).
 
-<p>Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:</p>
+1.  Введите следующее в вашу консоль:
 
-<pre class="brush: js">sequence.length;
-// должно возвратить 7</pre>
+    ```js
+    shopping[0];
+    // возвращает "bread"
+    ```
 
-<p>Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:</p>
+2.  Вы также можете изменять элемент в массиве, просто дав отдельному элементу массива новое значение. Попробуйте это:
 
-<pre class="brush: js">var sequence = [1, 1, 2, 3, 5, 8, 13];
-for (var i = 0; i &lt; sequence.length; i++) {
+    ```js
+    shopping[0] = 'tahini';
+    shopping;
+    // shopping теперь возвратит [ "tahini", "milk", "cheese", "hummus", "noodles" ]
+    ```
+
+    > **Примечание:** Мы уже упоминали это прежде, но просто как напоминание — компьютеры начинают считать с нуля!
+
+3.  Заметьте, что массив внутри массива называется многомерным массивом. Вы можете получить доступ к элементу внутри массива, который сам находится внутри другого массива, объединив два набора квадратных скобок. Например, для доступа к одному из элементов внутри массива, который является третьим элементом внутри массива `random `(см. предыдущую секцию данной статьи), мы могли бы сделать что-то вроде этого:
+
+    ```js
+    random[2][2];
+    ```
+
+4.  Попробуйте внести некоторые дополнительные изменения в свои примеры массивов, прежде чем двигаться дальше.
+
+### Нахождение длины массива
+
+Вы можете найти длину массива (количество элементов в нём) точно таким же способом, как вы находите длину строки (в символах) — используя свойство {{jsxref("Array.prototype.length","length")}}. Попробуйте следующее:
+
+```js
+sequence.length;
+// должно возвратить 7
+```
+
+Это свойство имеет и другие применения, но чаще всего используется, чтобы сказать, что цикл продолжается, пока он не зациклится на всех элементах массива. Так, например:
+
+```js
+var sequence = [1, 1, 2, 3, 5, 8, 13];
+for (var i = 0; i < sequence.length; i++) {
   console.log(sequence[i]);
-}</pre>
+}
+```
+
+В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:
+
+1.  Начать цикл с номера позиции 0 в массиве.
+2.  Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).
+3.  Для каждого элемента вернуть его значение в консоли браузера с помощью [`console.log()`](/en-US/docs/Web/API/Console/log).
+
+## Некоторые полезные методы массивов
+
+В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот, а также добавлять новые элементы в массивы.
+
+### Преобразование между строками и массивами
+
+Часто у вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.
+
+> **Примечание:** Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.
+
+1.  Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
+
+    ```js
+    var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';
+    ```
+
+2.  Теперь разделим ee посредством запятой:
+
+    ```js
+    var myArray = myData.split(',');
+    myArray;
+    ```
+
+3.  Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы:
+
+    ```js
+    myArray.length;
+    myArray[0]; // первый элемент в массиве
+    myArray[1]; // второй элемент в массиве
+    myArray[myArray.length-1]; // последний элемент в массиве
+    ```
+
+4.  Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее:
+
+    ```js
+    var myNewString = myArray.join(',');
+    myNewString;
+    ```
+
+5.  Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . `toString() ,`возможно, проще,чем `join()` поскольку он не принимает параметр, но это ограничивает его. С `join()`вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой).
+
+    ```js
+    var dogNames = ["Rocket","Flash","Bella","Slugger"];
+    dogNames.toString(); //Rocket,Flash,Bella,Slugger
+    ```
+
+### Добавление и удаление элементов массива
+
+Мы ещё не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив `myArray` , с которым мы столкнулись в предыдущем разделе. Если вы ещё не прошли этот раздел, сначала создайте массив в консоли:
+
+```js
+var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];
+```
+
+Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.
+
+1.  Давайте сначала используем метод `push()` — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это:
+
+    ```js
+    myArray.push('Cardiff');
+    myArray;
+    myArray.push('Bradford', 'Brighton');
+    myArray;
+    ```
+
+2.  При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого:
 
-<p>В будущих статьях вы узнаете о циклах, но вкратце этот код говорит:</p>
+    ```js
+    var newLength = myArray.push('Bristol');
+    myArray;
+    newLength;
+    ```
 
-<ol>
- <li>Начать цикл с номера позиции 0 в массиве.</li>
- <li>Остановить цикл на номере элемента, равном длине массива. Это будет работать для массива любой длины, но в этом случае он остановит цикл на элементе номер 7 (это хорошо, поскольку последний элемент, который мы хотим, чтобы цикл был закрыт, равен 6).</li>
- <li>Для каждого элемента вернуть его значение в консоли браузера с помощью <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code>.</li>
-</ol>
+3.  Удаление последнего элемента массива можно совершить с помощью вызова метода `pop()`. Попробуйте это:
 
-<h2 id="Некоторые_полезные_методы_массивов">Некоторые полезные методы массивов</h2>
+    ```js
+    myArray.pop();
+    ```
 
-<p>В этом разделе мы рассмотрим некоторые полезные методы, связанные с массивом, которые позволяют нам разбивать строки на элементы массива и наоборот, а также добавлять новые элементы в массивы.</p>
+4.  Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое:
 
-<h3 id="Преобразование_между_строками_и_массивами">Преобразование между строками и массивами</h3>
+    ```js
+    var removedItem = myArray.pop();
+    myArray;
+    removedItem;
+    ```
 
-<p>Часто у вас могут быть некоторые необработанные данные, содержащиеся в большой длинной строке, и вы можете захотеть разделить полезные пункты до более удобной и полезной формы, а затем сделать что-то для них, например отобразить их в таблице данных. Для этого мы можем использовать метод {{jsxref ("String.prototype.split ()", "split ()")}}. В его простейшей форме он принимает единственный параметр, символ, который вы хотите отделить в строке, и возвращает подстроки между разделителем как элементы в массиве.</p>
+{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.
+
+1.  Сначала, попробуем метод `unshift()`:
+
+    ```js
+    myArray.unshift('Edinburgh');
+    myArray;
+    ```
+
+2.  Теперь `shift()`; попробуйте эти!
+
+    ```js
+    var removedItem = myArray.shift();
+    myArray;
+    removedItem;
+    ```
+
+## Практика: Печать продуктов!
+
+Вернёмся к описанному выше примеру - распечатываем названия продуктов и цен на счёт-фактуру, затем суммируем цены и печатаем их внизу. В приведённом ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:
+
+1.  Ниже комментария `// number 1` имеется ряд строк, каждая из которых содержит название продукта и цену, разделённые двоеточием. Нужно превратить их в массив и сохранить его под названием `products`.
+2.  На строке с комментарием `// number 2` начинается цикл for. В строке цикла имеется` i <= 0`, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда `i` меньше или равен 0», при этом `i` начинается с 0. Нужно заменить `i <= 0` условным тестом, который останавливает цикл, когда `i` перестаёт быть меньше длины массива `products` .
+3.  Под комментарием `// number 3` мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (`name:price`) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, ещё раз просмотрите статью [Полезные строковые методы](/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods), а лучше, посмотрите раздел [Преобразование между строками и массивами](#преобразование_между_строками_и_массивами) этой статьи.
+4.  В рамках приведённой выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьёй [строки в JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги/Строки).
+5.  В верхней части кода есть переменная с именем `total` , которая содержит значение `0`. Внутри цикла (под комментарием `// number 4`) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счёт-фактуре. Для этого вам может понадобится [оператор присваивания](/ru/docs/Learn/JavaScript/Первые_шаги/Math#Операторы_присваивания).
+6.  Под комментарием `// number 5` нужно изменить строку так, чтобы переменная `itemText` была равна "current item name — $current item price", например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счёте-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.
+
+```html hidden
+<!-- Не выделяйте тут ничего, не копируйте, не всавляйте!
+     Еле починил -->
+
+<h2>Live output</h2>
+
+<div class="output" style="min-height: 150px;">
+
+<ul>
+
+</ul>
+
+<p></p>
 
-<div class="note">
-<p><strong>Примечание</strong>: Хорошо, технически это строковый метод, не метод массива, но мы поместили его в массивы, так как он хорошо подходит для них.</p>
 </div>
 
-<ol>
- <li>Поиграем с этим, посмотрим как это работает. Сначала, создадим строку в вашей консоли:
-  <pre class="brush: js">var myData = 'Manchester,London,Liverpool,Birmingham,Leeds,Carlisle';</pre>
- </li>
- <li>Теперь разделим ee посредством запятой:
-  <pre class="brush: js">var myArray = myData.split(',');
-myArray;</pre>
- </li>
- <li>Наконец, попробуйте найти длину вашего нового массива и извлечь из него некоторые элементы:
-  <pre class="brush: js">myArray.length;
-myArray[0]; // первый элемент в массиве
-myArray[1]; // второй элемент в массиве
-myArray[myArray.length-1]; // последний элемент в массиве</pre>
- </li>
- <li>Вы можете сделать обратное используя метод{{jsxref("Array.prototype.join()","join()")}} . Попробуйте следующее:
-  <pre class="brush: js">var myNewString = myArray.join(',');
-myNewString;</pre>
- </li>
- <li> Другой способ преобразования массива в строку - использовать метод {{jsxref("Array.prototype.toString()","toString()")}} . <code>toString() ,</code>возможно, проще,чем <code>join()</code> поскольку он не принимает параметр, но это ограничивает его. С <code>join()</code>вы можете указать разные разделители (попробуйте выполнить шаг 4 с другим символом, кроме запятой).
-  <pre class="brush: js">var dogNames = ["Rocket","Flash","Bella","Slugger"];
-dogNames.toString(); //Rocket,Flash,Bella,Slugger</pre>
- </li>
-</ol>
-
-<h3 id="Добавление_и_удаление_элементов_массива">Добавление и удаление элементов массива</h3>
-
-<p>Мы ещё не рассмотрели добавление и удаление элементов массива - давайте посмотрим на это сейчас. Мы будем использовать массив <code>myArray</code> , с которым мы столкнулись в предыдущем разделе. Если вы ещё не прошли этот раздел, сначала создайте массив в консоли:</p>
-
-<pre class="brush: js">var myArray = ['Manchester', 'London', 'Liverpool', 'Birmingham', 'Leeds', 'Carlisle'];</pre>
-
-<p>Прежде всего, чтобы добавить или удалить элемент с конца массива, мы можем использовать {{jsxref("Array.prototype.push()","push()")}} и {{jsxref("Array.prototype.pop()","pop()")}} соответственно.</p>
-
-<ol>
- <li>Давайте сначала используем метод <code>push()</code> — заметьте, что вам нужно указать один или более элементов, которые вы хотите добавить в конец своего массива. Попробуйте это:
-
-  <pre class="brush: js">myArray.push('Cardiff');
-myArray;
-myArray.push('Bradford', 'Brighton');
-myArray;
-</pre>
- </li>
- <li>При завершении вызова метода возвращается новая длина массива. Если бы вы хотели сохранить новую длину массива в переменной, вы бы могли сделать что-то вроде этого:
-  <pre class="brush: js">var newLength = myArray.push('Bristol');
-myArray;
-newLength;</pre>
- </li>
- <li>Удаление последнего элемента массива можно совершить с помощью вызова метода <code>pop()</code>. Попробуйте это:
-  <pre class="brush: js">myArray.pop();</pre>
- </li>
- <li>Когда вызов метода завершается, возвращается удалённый элемент. Вы бы могли также сделать такое:
-  <pre class="brush: js">var removedItem = myArray.pop();
-myArray;
-removedItem;</pre>
- </li>
-</ol>
-
-<p>{{jsxref("Array.prototype.unshift()","unshift()")}} и {{jsxref("Array.prototype.shift()","shift()")}} работают точно таким же способом, за исключением того что они работают в начале массива, а не в конце.</p>
-
-<ol>
- <li>Сначала, попробуем метод <code>unshift()</code>:
-
-  <pre class="brush: js">myArray.unshift('Edinburgh');
-myArray;</pre>
- </li>
- <li>Теперь <code>shift()</code>; попробуйте эти!
-  <pre class="brush: js">var removedItem = myArray.shift();
-myArray;
-removedItem;</pre>
- </li>
-</ol>
-
-<h2 id="Практика_Печать_продуктов!">Практика: Печать продуктов!</h2>
-
-<p>Вернёмся к описанному выше примеру - распечатываем названия продуктов и цен на счёт-фактуру, затем суммируем цены и печатаем их внизу. В приведённом ниже редактируемом примере есть комментарии, содержащие числа - каждая из этих отметок является местом, где вы должны добавить что-то в код. Они заключаются в следующем:</p>
-
-<ol>
- <li>Ниже комментария <code>// number 1</code>  имеется ряд строк, каждая из которых содержит название продукта и цену, разделённые двоеточием. Нужно превратить их в массив и сохранить его  под названием  <code>products</code>.</li>
- <li>На строке с комментарием <code>// number 2</code>  начинается цикл for. В строке цикла имеется<code> i &lt;= 0</code>, что является условием , которое заставляет цикл for выполняться только один раз, так как это значение i сообщает циклу: «останавливаться, когда <code>i</code> меньше или равен 0», при этом <code>i</code> начинается с 0. Нужно заменить <code>i &lt;= 0</code> условным тестом, который останавливает цикл, когда <code>i</code> перестаёт быть меньше длины массива <code>products</code> .</li>
- <li>Под комментарием <code>// number 3</code> мы хотим, чтобы вы написали строку кода, которая разбивает текущий элемент массива (<code>name:price</code>) на два отдельных элемента: один содержит только имя, а другой - содержащее только цену. Если не знаете, как это сделать, ещё раз просмотрите статью <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Useful_string_methods">Полезные строковые методы</a>, а лучше, посмотрите раздел <a href="#преобразование_между_строками_и_массивами">Преобразование между строками и массивами</a> этой статьи.</li>
- <li>В рамках приведённой выше строки нужно преобразовать цену из строки в число. Если не помните, как это сделать, ознакомьтесь со статьёй <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Строки">строки в JavaScript</a>.</li>
- <li>В верхней части кода есть переменная с именем <code>total</code> , которая содержит значение <code>0</code>. Внутри цикла (под комментарием <code>// number 4</code>) нужно добавить строку, которая добавляет текущую цену товара к этой сумме на каждой итерации цикла, так чтобы в конце кода была выведена корректная сумма в счёт-фактуре. Для этого вам может понадобится <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Math#Операторы_присваивания">оператор присваивания</a>.</li>
- <li>Под комментарием <code>// number 5</code> нужно изменить строку так, чтобы переменная <code>itemText</code> была равна "current item name — $current item price",  например "Shoes — $23.99" для каждого случая, чтобы корректная информация для каждого элемента была напечатана в счёте-фактуре. Здесь обычная конкатенация строк, которая должна быть вам знакома.</li>
-</ol>
-
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
-
-<pre class="brush: html">&lt;!-- Не выделяйте тут ничего, не копируйте, не всавляйте!
-     Еле починил --&gt;
-
-&lt;h2&gt;Live output&lt;/h2&gt;
-
-&lt;div class="output" style="min-height: 150px;"&gt;
-
-&lt;ul&gt;
-
-&lt;/ul&gt;
-
-&lt;p&gt;&lt;/p&gt;
-
-&lt;/div&gt;
-
-&lt;h2&gt;Editable code&lt;/h2&gt;
-
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
-
-&lt;textarea id="code" class="playable-code" style="height: 410px;width: 95%"&gt;
+<h2>Editable code</h2>
+
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
+
+<textarea id="code" class="playable-code" style="height: 410px;width: 95%">
 var list = document.querySelector('.output ul');
 var totalBox = document.querySelector('.output p');
 var total = 0;
@@ -231,7 +250,7 @@ totalBox.textContent = '';
                 'Trousers:31.99'
                 'Shoes:23.99';
 
-for (var i = 0; i &lt;= 0; i++) { // number 2
+for (var i = 0; i <= 0; i++) { // number 2
   // number 3
 
   // number 4
@@ -245,15 +264,16 @@ for (var i = 0; i &lt;= 0; i++) { // number 2
 }
 
 totalBox.textContent = 'Total: $' + total.toFixed(2);
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;
-</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -282,7 +302,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i &lt; products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar totalBox = document.querySelector(\'.output p\');\nvar total = 0;\nlist.innerHTML = \'\';\ntotalBox.textContent = \'\';\n\nvar products = [\'Underpants:6.99\',\n \'Socks:5.99\',\n \'T-shirt:14.99\',\n \'Trousers:31.99\',\n \'Shoes:23.99\'];\n\nfor(var i = 0; i < products.length; i++) {\n var subArray = products[i].split(\':\');\n var name = subArray[0];\n var price = Number(subArray[1]);\n total += price;\n itemText = name + \' — $\' + price;\n\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n}\n\ntotalBox.textContent = \'Total: $\' + total.toFixed(2);';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -329,9 +349,11 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
+};
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -349,51 +371,45 @@ h2 {
 body {
   margin: 10px;
   background-color: #f5f9fa;
-}</pre>
-</div>
+}
+```
 
-<p>{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code', '100%', 730, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Практика_Топ_5_поисковых_запросов">Практика: Топ 5 поисковых запросов</h2>
+## Практика: Топ 5 поисковых запросов
 
-<p>Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведёте запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.</p>
+Хорошим тоном, является использование методов массива, таких как {{jsxref ("Array.prototype.push ()", "push ()")}} и {{jsxref ("Array.prototype.pop ()", "pop ()") }} - это когда вы ведёте запись активных элементов в веб-приложении. Например, в анимированной сцене может быть массив объектов, представляющих текущую отображаемую фоновую графику и вам может потребоваться только 50 одновременных отображений по причинам производительности или беспорядка. Когда новые объекты создаются и добавляются в массив, более старые могут быть удалены из массива для поддержания нужного числа.
 
-<p>В этом примере мы собираемся показать гораздо более простое использование - ниже мы даём вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.</p>
+В этом примере мы собираемся показать гораздо более простое использование - ниже мы даём вам поддельный поисковый сайт с полем поиска. Идея заключается в том, что когда в поле поиска вводятся запросы, в списке отображаются 5 предыдущих поисковых запросов. Когда число терминов превышает 5, последний член начинает удаляться каждый раз, когда новый член добавляется в начало, поэтому всегда отображаются 5 предыдущих терминов.
 
-<div class="note">
-<p><strong>Примечание:</strong> В реальном приложении для поиска вы, вероятно, сможете щёлкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.</p>
-</div>
+> **Примечание:** В реальном приложении для поиска вы, вероятно, сможете щёлкнуть предыдущие условия поиска, чтобы вернуться к предыдущим поисковым запросам и отобразите фактические результаты поиска! На данный момент мы просто сохраняем его.
 
-<p>Чтобы завершить приложение, вам необходимо:</p>
+Чтобы завершить приложение, вам необходимо:
 
-<ol>
- <li>Добавьте строку под комментарием <code>// number 1</code>, которая добавляет текущее значение, введённое в ввод поиска, к началу массива. Его можно получить с помощью <code>searchInput.value</code>.</li>
- <li>Добавьте строку под комментарием <code>// number 2</code>, которая удаляет значение, находящееся в конце массива.</li>
-</ol>
+1.  Добавьте строку под комментарием `// number 1`, которая добавляет текущее значение, введённое в ввод поиска, к началу массива. Его можно получить с помощью `searchInput.value`.
+2.  Добавьте строку под комментарием `// number 2`, которая удаляет значение, находящееся в конце массива.
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
+```html hidden
+<!-- Здесь тоже ничего не выделяйте, не копируйте, не всавляйте!
+  Еле починил -->
 
-<pre class="brush: html">&lt;!-- Здесь тоже ничего не выделяйте, не копируйте, не всавляйте!
-  Еле починил --&gt;
+<h2>Live output</h2>
+<div class="output" style="min-height: 150px;">
 
-&lt;h2&gt;Live output&lt;/h2&gt;
-&lt;div class="output" style="min-height: 150px;"&gt;
+<input type="text"><button>Search</button>
 
-&lt;input type="text"&gt;&lt;button&gt;Search&lt;/button&gt;
-
-&lt;ul&gt;
+<ul>
 
-&lt;/ul&gt;
+</ul>
 
-&lt;/div&gt;
+</div>
 
-&lt;h2&gt;Editable code&lt;/h2&gt;
+<h2>Editable code</h2>
 
-&lt;p class="a11y-label"&gt;Press Esc to move focus away from the code area (Tab inserts a tab character).&lt;/p&gt;
+<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p>
 
 
-&lt;textarea id="code" class="playable-code" style="height: 370px; width: 95%"&gt;
+<textarea id="code" class="playable-code" style="height: 370px; width: 95%">
 var list = document.querySelector('.output ul');
 var searchInput = document.querySelector('.output input');
 var searchBtn = document.querySelector('.output button');
@@ -412,7 +428,7 @@ searchBtn.onclick = function() {
     list.innerHTML = '';
 
     // loop through the array, and display all the search terms in the list
-    for (var i = 0; i &lt; myHistory.length; i++) {
+    for (var i = 0; i < myHistory.length; i++) {
       itemText = myHistory[i];
       var listItem = document.createElement('li');
       listItem.textContent = itemText;
@@ -420,7 +436,7 @@ searchBtn.onclick = function() {
     }
 
     // If the array length is 5 or more, remove the oldest search term
-    if (myHistory.length &gt;= 5) {
+    if (myHistory.length >= 5) {
       // number 2
 
     }
@@ -430,14 +446,16 @@ searchBtn.onclick = function() {
     searchInput.focus();
   }
 }
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Reset"&gt;
-  &lt;input id="solution" type="button" value="Show solution"&gt;
-&lt;/div&gt;</pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Reset">
+  <input id="solution" type="button" value="Show solution">
+</div>
+```
 
-<pre class="brush: css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -455,9 +473,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</pre>
+}
+```
 
-<pre class="brush: js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -486,7 +506,7 @@ solution.addEventListener('click', function() {
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i &lt; myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length &gt;= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nvar searchInput = document.querySelector(\'.output input\');\nvar searchBtn = document.querySelector(\'.output button\');\n\nlist.innerHTML = \'\';\n\nvar myHistory= [];\n\nsearchBtn.onclick = function() {\n if(searchInput.value !== \'\') {\n myHistory.unshift(searchInput.value);\n\n list.innerHTML = \'\';\n\n for(var i = 0; i < myHistory.length; i++) {\n itemText = myHistory[i];\n var listItem = document.createElement(\'li\');\n listItem.textContent = itemText;\n list.appendChild(listItem);\n }\n\n if(myHistory.length >= 5) {\n myHistory.pop();\n }\n\n searchInput.value = \'\';\n searchInput.focus();\n }\n}';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -532,36 +552,32 @@ textarea.onkeyup = function(){
   }
 
   updateCode();
-};</pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code_2', '100%', 700, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!</p>
+Прочитав эту статью, мы уверены, что вы согласитесь, что массивы кажутся довольно полезными; вы увидите, что они появляются повсюду в JavaScript, часто в сочетании с циклами, чтобы делать то же самое для каждого элемента массива. Мы научим вас всем полезным основам, которые нужно знать о циклах в следующем модуле, но пока вы должны себе похлопать и воспользоваться заслуженным перерывом; вы проработали все статьи в этом модуле!
 
-<p>Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые вы прочли до этого момента. Удачи!</p>
+Осталось только выполнить тестовую задачу, которая проверит ваше понимание статей, которые вы прочли до этого момента. Удачи!
 
-<h2 id="Посмотрите_также">Посмотрите также</h2>
+## Посмотрите также
 
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a> — an advanced level guide to arrays and their cousins, typed arrays.</li>
- <li>{{jsxref("Array")}} — the <code>Array</code> object reference page — for a detailed reference guide to the features discussed in this page, and many more.</li>
-</ul>
+- [Indexed collections](/ru/docs/Web/JavaScript/Guide/Indexed_collections) — an advanced level guide to arrays and their cousins, typed arrays.
+- {{jsxref("Array")}} — the `Array` object reference page — for a detailed reference guide to the features discussed in this page, and many more.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги/Создатель_глуых_историй", "Learn/JavaScript/Первые_шаги")}}
 
-<h2 id="В_этом_разделе">В этом разделе</h2>
+## В этом разделе
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">Что такое JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Массивы</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
-</ul>
+- [Что такое JavaScript?](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
+- [A first splash into JavaScript](/ru/docs/Learn/JavaScript/First_steps/A_first_splash)
+- [What went wrong? Troubleshooting JavaScript](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong)
+- [Storing the information you need — Variables](/ru/docs/Learn/JavaScript/First_steps/Variables)
+- [Basic math in JavaScript — numbers and operators](/ru/docs/Learn/JavaScript/First_steps/Math)
+- [Handling text — strings in JavaScript](/ru/docs/Learn/JavaScript/First_steps/Strings)
+- [Useful string methods](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods)
+- [Массивы](/ru/docs/Learn/JavaScript/First_steps/Arrays)
+- [Assessment: Silly story generator](/ru/docs/Learn/JavaScript/First_steps/Silly_story_generator)
diff --git a/files/ru/learn/javascript/first_steps/index.md b/files/ru/learn/javascript/first_steps/index.md
index 37dcb60c914e19..8e458ec6453f69 100644
--- a/files/ru/learn/javascript/first_steps/index.md
+++ b/files/ru/learn/javascript/first_steps/index.md
@@ -8,50 +8,42 @@ tags:
 translation_of: Learn/JavaScript/First_steps
 original_slug: Learn/JavaScript/Первые_шаги
 ---
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">В нашем первом модуле, прежде чем перейти к практике написания кода на языке JavaScript, сначала мы дадим ответы на некоторые фундаментальные вопросы, а именно: "Что же такое JavaScript?", "Что он из себя представляет?" и "Что он может делать?". После этого мы внимательно рассмотрим некоторые из ключевых элементов, такие как переменные, строки, числа и массивы.</p>
-
-<h2 id="Предисловие">Предисловие</h2>
-
-<p>Вам не нужно иметь никаких предварительных знаний JavaScript чтобы приступить к этому модулю, но у вас должно быть некоторое представление о HTML и CSS. Рекомендуем ознакомиться со следующими материалами, прежде чем начинать знакомство с JavaScript:</p>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/Getting_started_with_the_web">Начало работы с Web</a>  (которое включает в себя общее <a href="/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics">введение в Javascript</a>)</li>
- <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML">Введение в HTML</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a></li>
-</ul>
-
-<div class="note">
-<p><strong>Примечание:</strong> Если вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как  <a href="http://jsbin.com/">JSBin</a> или <a href="https://thimble.mozilla.org/">Thimble</a>, для запуска примеров кода. </p>
-</div>
-
-<h2 id="Руководства">Руководства</h2>
-
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript">Что такое JavaScript?</a></dt>
- <dd>Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения. </dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">Первое погружение в JavaScript</a></dt>
- <dd>Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA">Что пошло не так? Устранение ошибок JavaScript</a></dt>
- <dd>В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript-коде.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables">Хранение нужной вам информации - Переменные</a></dt>
- <dd>После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с <strong>Переменными</strong>.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math">Базовая математика в JavaScript — числа и операторы</a></dt>
- <dd>Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8">Работа с текстом — строки в JavaScript</a></dt>
- <dd>Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods">Полезные строковые методы</a></dt>
- <dd>После того как мы рассмотрели основы работы со строками, давайте двинемся дальше и поговорим о том какие полезные операторы и методы существуют для строк, такие как вычисление длины, соединение и разделение строк, замена отдельных символов и многие другие. </dd>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays">Массивы</a></dt>
- <dd>В последней статье этого модуля мы рассмотрим массивы - изящный способ хранения различных наборов информации в имени всего одной переменной. Здесь мы поговорим о том почему это может быть полезным, рассмотрим как создать массив, получить, добавить или удалить элемент массива, и прочее.</dd>
-</dl>
-
-<h2 id="Проверка_полученных_знаний">Проверка полученных знаний</h2>
-
-<p>Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки. </p>
-
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9">Генератор глупых историй</a></dt>
- <dd>Вашим заданием будет применить на практике полученные знания и создать развлекательное приложение которое будет генерировать случайные нелепые истории.</dd>
-</dl>
+{{LearnSidebar}}
+
+В нашем первом модуле, прежде чем перейти к практике написания кода на языке JavaScript, сначала мы дадим ответы на некоторые фундаментальные вопросы, а именно: "Что же такое JavaScript?", "Что он из себя представляет?" и "Что он может делать?". После этого мы внимательно рассмотрим некоторые из ключевых элементов, такие как переменные, строки, числа и массивы.
+
+## Предисловие
+
+Вам не нужно иметь никаких предварительных знаний JavaScript чтобы приступить к этому модулю, но у вас должно быть некоторое представление о HTML и CSS. Рекомендуем ознакомиться со следующими материалами, прежде чем начинать знакомство с JavaScript:
+
+- [Начало работы с Web](/ru/docs/Learn/Getting_started_with_the_web) (которое включает в себя общее [введение в Javascript](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics))
+- [Введение в HTML](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML)
+- [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS)
+
+> **Примечание:** Если вы работаете на компьютере, планшете или другом устройстве, где нет возможности полноценно работать с файлами, можете использовать такие онлайн сервисы как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/), для запуска примеров кода.
+
+## Руководства
+
+- [Что такое JavaScript?](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript)
+  - : Добро пожаловать на курс начинающего JavaScript разработчика от MDN! В первой статье мы рассмотрим JavaScript в общем приближении и постараемся ответить на вопросы "Что такое JavaScript?" и "Для чего он предназначен?", и закрепим верное понимание его назначения.
+- [Первое погружение в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash)
+  - : Теперь, когда вы знаете кое-что о JavaScript, и что он может делать, мы предлагаем вам пройти интенсивный практический урок по базовой функциональности JavaScript. Здесь вы, шаг за шагом, создадите простую игру "Угадай число".
+- [Что пошло не так? Устранение ошибок JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA)
+  - : В процессе создания игры "Угадай число" из предыдущего урока, вы могли заметить что она не работала. Не стоит унывать - данная статья научит вас беречь собственные нервы, а так же, даст несколько советов о том как решать такие проблемы, искать и исправлять неполадки в JavaScript-коде.
+- [Хранение нужной вам информации - Переменные](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables)
+  - : После прочтения предыдущих статей вы должны знать что из себя представляет JavaScript, что он может, как взаимодействует с другими web технологиями, и каковы его основные особенности в общем приближении. В этой статье спустимся к самым основам языка и поработаем с **Переменными**.
+- [Базовая математика в JavaScript — числа и операторы](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math)
+  - : Здесь мы обсуждаем математику в JavaScript - каким образом мы можем манипулировать числами и операторами для работы с ними.
+- [Работа с текстом — строки в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8)
+  - : Теперь мы обратим своё внимание на строки - так называются кусочки текста в программировании. В этой статье мы рассмотрим то что действительно необходимо знать про строки в JavaScript: как создать строку, делать escape (экранирование) символов с помощью кавычек, и объединять их.
+- [Полезные строковые методы](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods)
+  - : После того как мы рассмотрели основы работы со строками, давайте двинемся дальше и поговорим о том какие полезные операторы и методы существуют для строк, такие как вычисление длины, соединение и разделение строк, замена отдельных символов и многие другие.
+- [Массивы](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays)
+  - : В последней статье этого модуля мы рассмотрим массивы - изящный способ хранения различных наборов информации в имени всего одной переменной. Здесь мы поговорим о том почему это может быть полезным, рассмотрим как создать массив, получить, добавить или удалить элемент массива, и прочее.
+
+## Проверка полученных знаний
+
+Предложенное тестовое задание проверит ваше понимание основ JavaScript, которые вы получили пройдя предложенные выше уроки.
+
+- [Генератор глупых историй](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9)
+  - : Вашим заданием будет применить на практике полученные знания и создать развлекательное приложение которое будет генерировать случайные нелепые истории.
diff --git a/files/ru/learn/javascript/first_steps/math/index.md b/files/ru/learn/javascript/first_steps/math/index.md
index 313cd1601b0af9..304b27a7956c7c 100644
--- a/files/ru/learn/javascript/first_steps/math/index.md
+++ b/files/ru/learn/javascript/first_steps/math/index.md
@@ -14,379 +14,252 @@ tags:
 translation_of: Learn/JavaScript/First_steps/Math
 original_slug: Learn/JavaScript/Первые_шаги/Math
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}</div>
-
-<p class="summary">В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать {{Glossary("Operator","operators")}} и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомление с основами математики в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Все_любят_математику">Все любят математику</h2>
-
-<p>Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.</p>
-
-<p>В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.</p>
-
-<h3 id="Типы_чисел">Типы чисел</h3>
-
-<p>В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:</p>
-
-<ul>
- <li><strong>Целые </strong>— это целые числа, такие как: 10, 400, или -5.</li>
- <li><strong>С плавающей точкой </strong><em>(или: с плавающей запятой) </em>— имеют целую и дробную части, например: 12.5 или 56.7786543.</li>
- <li><strong>Doubles </strong>— тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).</li>
-</ul>
-
-<p>У нас даже есть разные типы числовых систем:</p>
-
-<ul>
- <li><strong>Бинарная</strong> — низкоуровневый язык компьютеров; нули и единицы (0 и 1);</li>
- <li><strong>Восьмеричная</strong> — 8-ми разрядная, использует 0–7 в каждом столбце;</li>
- <li><strong>Десятичная</strong> — 10-ти разрядная, использует 0-9 в каждом столбце;</li>
- <li><strong>Шестнадцатеричная</strong> — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values">цвет в CSS</a>.</li>
-</ul>
-
-<p><strong>Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!</strong> </p>
-
-<p>Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.</p>
-
-<p>Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это {{jsxref("Number")}}. Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.</p>
-
-<h3 id="Для_меня_всё_—_числа">Для меня всё — числа</h3>
-
-<p>Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте простую встроенную консоль.</p>
-
-<ol>
- <li>Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке:
-  <pre class="brush: js">var myInt = 5;
-var myFloat = 6.667;
-myInt;
-myFloat;</pre>
- </li>
- <li>Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать ещё пару переменных, содержащих числа, прежде чем двигаться дальше.</li>
- <li>Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведённые ниже строки:
-  <pre class="brush: js">typeof myInt;
-typeof myFloat;</pre>
-  В обоих случаях вы должны получить <code>"number"</code> — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.</li>
-</ol>
-
-<h2 id="Арифметические_операторы">Арифметические операторы</h2>
-
-<p dir="ltr" id="tw-target-text">Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Оператор</th>
-   <th scope="col">Имя</th>
-   <th scope="col">Функция</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>+</code></td>
-   <td>Сложение</td>
-   <td>Объединение чисел в одно целое.</td>
-   <td><code>6 + 9</code></td>
-  </tr>
-  <tr>
-   <td><code>-</code></td>
-   <td>Вычитание</td>
-   <td>Вычитает правое число от левого.</td>
-   <td><code>20 - 15</code></td>
-  </tr>
-  <tr>
-   <td><code>*</code></td>
-   <td>Умножение</td>
-   <td>Умножает два числа вместе.</td>
-   <td><code>3 * 7</code></td>
-  </tr>
-  <tr>
-   <td><code>/</code></td>
-   <td>Деление</td>
-   <td>Делит левое число на правое.</td>
-   <td><code>10 / 5</code></td>
-  </tr>
-  <tr>
-   <td><code>%</code></td>
-   <td>Модуль числа</td>
-   <td>
-    <p>Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.</p>
-   </td>
-   <td>
-    <p><code>11 % 3 = 2</code> (поскольку число 3 вмещается три раза, остатком будет число 2)</p>
-   </td>
-  </tr>
-  <tr>
-   <td><code>**</code></td>
-   <td>показатель степени</td>
-   <td>Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016.</td>
-   <td><code>5 ** 5</code> (возвращает 3125, или как: 5*5*5*5*5)</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Примечание</strong>: Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).</p>
-</div>
-
-<p dir="ltr" id="tw-target-text">Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль (<a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">developer tools JavaScript console</a>), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.</p>
-
-<ol>
- <li>Для начала попробуйте ввести простые примеры, такие как:
-  <pre class="brush: js">10 + 7
-9 * 8
-60 % 3</pre>
- </li>
- <li>Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например:
-  <pre class="brush: js">var num1 = 10;
-var num2 = 50;
-9 * num1;
-num2 / num1;</pre>
- </li>
- <li>И напоследок, попробуйте ввести более сложные выражения, например:
-  <pre class="brush: js">5 + 10 * 3;
-num2 % 9 * num1;
-num2 + num1 / 8 + 2;</pre>
- </li>
-</ol>
-
-<p>Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.</p>
-
-<h3 id="Приоритет_операторов">Приоритет операторов</h3>
-
-<p>Давайте взглянем на последний пример сверху. Предположим, что <code>num2</code> содержит значение 50 и <code>num1</code> содержит значение 10 (как и было обозначено выше):</p>
-
-<pre class="brush: js">num2 + num1 / 8 + 2;</pre>
-
-<p>Будучи человеком, вы, вероятно, прочитаете это как <em>"50 плюс 10 равно 60",</em> затем <em>"8 плюс 2 равно 10"</em>, и, наконец, <em>"60 делить на 10 равно 6"</em>.</p>
-
-<p>Но браузер видит это по-другому: <em>"10 делить на 8 равно 1.25", </em>затем <em>"50 плюс 1.25 плюс 2 равно 53.25".</em></p>
-
-<p>Это происходит из-за <strong>приоритета операторов</strong> - некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе - умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).</p>
-
-<p>Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:</p>
-
-<pre class="brush: js">(num2 + num1) / (8 + 2);</pre>
-
-<p>Результат этого выражения равен 6.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence">Expressions and operators</a>.</p>
-</div>
-
-<h2 id="Операторы_инкремента_и_декремента">Операторы инкремента и декремента</h2>
-
-<p>Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (<code>++</code>) и декремента (<code>--</code>). Мы использовали <code>++</code> в нашей игре "Угадай число" в статье <a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">первое погружение в JavaScript</a>, где мы добавляли 1 к переменной <code>guessCount</code>, в которой хранилось значение количества попыток пользователя после каждого хода.</p>
-
-<pre class="brush: js">guessCount++;</pre>
-
-<div class="note">
-<p><strong>Замечание</strong>: инкремент и декремент часто используются в <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">циклах</a>, о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.</p>
-</div>
-
-<p>Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:</p>
-
-<pre class="brush: js">3++;</pre>
-
-<p>Таким образом, вы можете применить инкремент только к существующим переменным:</p>
-
-<pre class="brush: js">var num1 = 4;
-num1++;</pre>
-
-<p>Так, вторая странность! Если вы сделаете это, вы получите значение 4 - браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}
 
-<pre class="brush: js">num1;</pre>
+В этой части курса мы обсуждаем математику в JavaScript — как мы можем использовать {{Glossary("Operator","operators")}} и другие функции, чтобы успешно манипулировать числами для выполнения наших задач.
 
-<p>То же самое для <code>--</code>: попробуйте пример ниже</p>
+| Необходимые условия: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
+| -------------------- | ----------------------------------------------------------------------------------------------------- |
+| Цель:                | Ознакомление с основами математики в JavaScript.                                                      |
 
-<pre class="brush: js">var num2 = 6;
+## Все любят математику
+
+Хорошо, может быть, не все. Некоторые из нас любят математику, некоторые из нас ненавидели математику с тех пор, как мы изучали таблицу умножения в школе, а некоторые из нас находятся где-то между ними. Но никто из нас не может отрицать, что математика является фундаментальной частью жизни, и мы не можем обойтись без неё. Это особенно актуально, когда мы учимся программировать на JavaScript (или на любом другом языке, если на то пошло) — большая часть того, что мы делаем, опирается на обработку числовых данных, вычисление новых значений и т.д. Так что не удивительно, что JavaScript имеет полнофункциональный набор математических функций.
+
+В этой статье обсуждаются только основные разделы, которые вам нужно знать сейчас.
+
+### Типы чисел
+
+В программировании даже скромная система десятичных чисел, которую мы все так хорошо знаем, сложнее, чем вы думаете. Мы используем разные термины для описания различных типов десятичных чисел. Например:
+
+- **Целые** — это целые числа, такие как: 10, 400, или -5.
+- **С плавающей точкой** _(или: с плавающей запятой)_ — имеют целую и дробную части, например: 12.5 или 56.7786543.
+- **Doubles** — тип чисел с плавающей точкой, которые имеют большую точность, чем стандартные числа с плавающей точкой (что означает, что они точны для большего числа десятичных знаков).
+
+У нас даже есть разные типы числовых систем:
+
+- **Бинарная** — низкоуровневый язык компьютеров; нули и единицы (0 и 1);
+- **Восьмеричная** — 8-ми разрядная, использует 0–7 в каждом столбце;
+- **Десятичная** — 10-ти разрядная, использует 0-9 в каждом столбце;
+- **Шестнадцатеричная** — 16-ти разрядная, используют 0–9 и потом a–f в каждом столбце. Вы, возможно, уже встречали эти числа, когда задавали [цвет в CSS](/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Hexadecimal_values).
+
+**Прежде чем взорвётся ваш мозг, остановитесь прямо здесь и сейчас!**
+
+Во-первых, мы просто будем придерживаться десятичных чисел на протяжении всего курса; вы редко когда будете сталкиваться с необходимостью думать в других числовых системах, если вообще когда-либо с ней столкнётесь.
+
+Во-вторых, в отличие от некоторых других языков программирования, JavaScript имеет только один тип данных для чисел, как вы догадались это {{jsxref("Number")}}. Это означает, независимо от типа чисел, с которыми вы работаете в JavaScript, обрабатывать вы их будете точно так же.
+
+### Для меня всё — числа
+
+Давайте быстро поиграем с некоторыми числами, чтобы снова познакомиться с основным синтаксисом, который нам нужен. Введите команды, перечисленные ниже, в вашу консоль ([developer tools JavaScript console](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools)), или используйте простую встроенную консоль.
+
+1.  Прежде всего, давайте объявим пару переменных и инициализируем их целым числом и числом с плавающей точкой, соответственно, затем введите имена переменных обратно, чтобы проверить, что все в порядке:
+
+    ```js
+    var myInt = 5;
+    var myFloat = 6.667;
+    myInt;
+    myFloat;
+    ```
+
+2.  Числовые значения набираются без кавычек. Попробуйте объявить и инициализировать ещё пару переменных, содержащих числа, прежде чем двигаться дальше.
+3.  Теперь давайте убедимся, что обе переменные содержат одинаковый тип данных. Для этого есть оператор {{jsxref("Operators/typeof", "typeof")}}, который позволяет проверить какой тип данных содержит в себе переменная. Введите две приведённые ниже строки:
+
+    ```js
+    typeof myInt;
+    typeof myFloat;
+    ```
+
+    В обоих случаях вы должны получить `"number"` — это все упрощает, чем если бы разные числа имели разные типы данных, и нам приходилось иметь дело с ними по-разному.
+
+## Арифметические операторы
+
+Арифметические операторы — это основные операторы, которые мы используем для различных математических операций, например таких, как сложение или вычитание:
+
+| Оператор | Имя                | Функция                                                                                                                                                               | Пример                                                                      |
+| -------- | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `+`      | Сложение           | Объединение чисел в одно целое.                                                                                                                                       | `6 + 9`                                                                     |
+| `-`      | Вычитание          | Вычитает правое число от левого.                                                                                                                                      | `20 - 15`                                                                   |
+| `*`      | Умножение          | Умножает два числа вместе.                                                                                                                                            | `3 * 7`                                                                     |
+| `/`      | Деление            | Делит левое число на правое.                                                                                                                                          | `10 / 5`                                                                    |
+| `%`      | Модуль числа       | Возвращает значение остатка при делении первого числа на второе. Результат будет иметь тот же знак, что и первое число.                                               | `11 % 3 = 2` (поскольку число 3 вмещается три раза, остатком будет число 2) |
+| `**`     | показатель степени | Возводит базовое число в указанную степень, то есть количество базовых чисел, указанных экспонентой, умножается вместе. Впервые он был представлен в EcmaScript 2016. | `5 ** 5` (возвращает 3125, или как: 5\*5\*5\*5\*5)                          |
+
+> **Примечание:** Иногда числа участвующие в математических операциях называют операндами ( {{Glossary("Operand", "operands")}} ).
+
+Нам, вероятно, не нужно учить вас базовым математическим операциям, но мы хотели бы проверить ваше понимание синтаксиса. Попробуйте ввести приведённые ниже примеры в свою консоль ([developer tools JavaScript console](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools)), или используйте встроенную консоль, с которой вы уже знакомы, чтобы ознакомиться с синтаксисом.
+
+1.  Для начала попробуйте ввести простые примеры, такие как:
+
+    ```js
+    10 + 7
+    9 * 8
+    60 % 3
+    ```
+
+2.  Вы также можете попробовать объявить переменные и присвоить им различные числа. Попробуйте вместо чисел использовать ранее объявленные переменные — переменные будут вести себя точно так же, как значения, которые они хранят. Например:
+
+    ```js
+    var num1 = 10;
+    var num2 = 50;
+    9 * num1;
+    num2 / num1;
+    ```
+
+3.  И напоследок, попробуйте ввести более сложные выражения, например:
+
+    ```js
+    5 + 10 * 3;
+    num2 % 9 * num1;
+    num2 + num1 / 8 + 2;
+    ```
+
+Некоторые примеры выше могут дать вам не тот результат, которого вы ожидали; приведённый ниже раздел может дать ответ на вопрос о том, почему.
+
+### Приоритет операторов
+
+Давайте взглянем на последний пример сверху. Предположим, что `num2` содержит значение 50 и `num1` содержит значение 10 (как и было обозначено выше):
+
+```js
+num2 + num1 / 8 + 2;
+```
+
+Будучи человеком, вы, вероятно, прочитаете это как _"50 плюс 10 равно 60",_ затем _"8 плюс 2 равно 10"_, и, наконец, _"60 делить на 10 равно 6"_.
+
+Но браузер видит это по-другому: _"10 делить на 8 равно 1.25",_ затем _"50 плюс 1.25 плюс 2 равно 53.25"._
+
+Это происходит из-за **приоритета операторов** - некоторые операторы будут применены перед другими в процесс вычисления суммы (в программировании её называют выражением). Приоритет операторов в JavaScript ничем не отличается от приоритета арифметических операций, который вы изучали в школе - умножение и деление всегда выполняются первыми, затем сложение и вычитание (сумма всегда вычисляется слева направо).
+
+Если вы хотите переопределить порядок выполнения операторов, вы можете окружить парными скобками часть выражения, которая должна быть выполнена первой. Для получения результата 6 вам следует сделать следующее:
+
+```js
+(num2 + num1) / (8 + 2);
+```
+
+Результат этого выражения равен 6.
+
+> **Примечание:** полный список операторов JavaScript и приоритетов их выполнения можно найти по этой ссылке: [Expressions and operators](/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence).
+
+## Операторы инкремента и декремента
+
+Иногда вам захочется повторно добавить или вычесть единцу к/из значению числовой переменной. Это можно сделать с помощью оператора инкремента (`++`) и декремента (`--`). Мы использовали `++` в нашей игре "Угадай число" в статье [первое погружение в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash), где мы добавляли 1 к переменной `guessCount`, в которой хранилось значение количества попыток пользователя после каждого хода.
+
+```js
+guessCount++;
+```
+
+> **Примечание:** **Замечание**: инкремент и декремент часто используются в [циклах](/ru/docs/Web/JavaScript/Guide/Loops_and_iteration), о которых вы узнаете позже. Например, если вы захотите пройтись по списку цен и добавить к каждой налог с продаж, вам придётся в цикле обойти каждую цену и провести необходимые вычисления для учёта налога. Инкремент будет использован для перехода на новую ячейку списка при необходимости. У нас есть несложный пример реализации такого списка - попробуйте и взгляните на код чтобы посмотреть, сможете ли вы найти инкременты! Мы взглянем на циклы поближе позже по ходу курса.
+
+Давайте попробуем сыграть с этим в вашей консоли. Для начала заметим, что вы не можете использовать инкремент/декремент непосредственно к числу, что может показаться странным. Дело в том, что мы присваиваем к переменной новое обновлённое число, а не просто вычисляем значение. Следующий пример приведёт к ошибке:
+
+```js
+3++;
+```
+
+Таким образом, вы можете применить инкремент только к существующим переменным:
+
+```js
+var num1 = 4;
+num1++;
+```
+
+Так, вторая странность! Если вы сделаете это, вы получите значение 4 - браузер возвращает текущее число, после чего применяет к нему оператор инкремента. Вы можете удостовериться в том, что инкремент был применён, узнав значение переменной ещё раз:
+
+```js
+num1;
+```
+
+То же самое для `--`: попробуйте пример ниже
+
+```js
+var num2 = 6;
 num2--;
-num2;</pre>
+num2;
+```
 
-<div class="note">
-<p><strong>Замечание</strong>: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте <code>++num1</code> и <code>--num2</code>. </p>
-</div>
+> **Примечание:** **Замечание**: вы можете заставить делать это в другом порядке - применить инкремент/декремент и только потом вернуть значение. Для этого необходимо записать оператор слева от переменной, а не справа. Попробуйте пример сверху ещё раз, но в этот раз используйте `++num1` и `--num2`.
 
-<h2 id="Операторы_присваивания">Операторы присваивания</h2>
+## Операторы присваивания
 
-<p>Операторы присваивания - операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, <code>=</code>, он просто приравнивает значение переменной слева к значению справа:</p>
+Операторы присваивания - операторы, которые присваивают значение переменным. Мы уже много раз использовали самый простой из них, `=`, он просто приравнивает значение переменной слева к значению справа:
 
-<pre class="brush: js">var x = 3; // x содержит значение 3
+```js
+var x = 3; // x содержит значение 3
 var y = 4; // y содержит значение 4
-x = y; // x теперь содержит значение y (x == 4)</pre>
-
-<p>Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Operator</th>
-   <th scope="col">Name</th>
-   <th scope="col">Purpose</th>
-   <th scope="col">Example</th>
-   <th scope="col">Shortcut for</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>+=</code></td>
-   <td>Присваивание сложения</td>
-   <td>Прибавляет значение справа к переменной слева и возвращает новое значение переменной</td>
-   <td><code>x = 3;<br>
-    x += 4;</code></td>
-   <td><code>x = 3;<br>
-    x = x + 4;</code></td>
-  </tr>
-  <tr>
-   <td><code>-=</code></td>
-   <td>Присваивание вычитания</td>
-   <td>Вычитает значение справа из переменной слева и возвращает новое значение переменной</td>
-   <td><code>x = 6;<br>
-    x -= 3;</code></td>
-   <td><code>x = 6;<br>
-    x = x - 3;</code></td>
-  </tr>
-  <tr>
-   <td><code>*=</code></td>
-   <td>
-    <p>Присваивание умножения</p>
-   </td>
-   <td>Умножает переменную слева на значение справа и возвращает новое значение переменной</td>
-   <td><code>x = 2;<br>
-    x *= 3;</code></td>
-   <td><code>x = 2;<br>
-    x = x * 3;</code></td>
-  </tr>
-  <tr>
-   <td><code>/=</code></td>
-   <td>Присваивание деления</td>
-   <td>Делит переменную слева на значение справа и возвращает новое значение переменной</td>
-   <td><code>x = 10;<br>
-    x /= 5;</code></td>
-   <td><code>x = 10;<br>
-    x = x / 5;</code></td>
-  </tr>
- </tbody>
-</table>
-
-<p>Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?</p>
-
-<p>Заметьте, что значение справа может быть как числом (константой), так и переменной, например:</p>
-
-<pre class="brush: js">var x = 3; // x содержит значение 3
+x = y; // x теперь содержит значение y (x == 4)
+```
+
+Однако есть ещё несколько сложных конструкций, которые позволяют делать ваш код более простым и аккуратным. Наиболее часто используемые перечислены ниже:
+
+| Operator | Name                   | Purpose                                                                              | Example           | Shortcut for         |
+| -------- | ---------------------- | ------------------------------------------------------------------------------------ | ----------------- | -------------------- |
+| `+=`     | Присваивание сложения  | Прибавляет значение справа к переменной слева и возвращает новое значение переменной | `x = 3; x += 4;`  | `x = 3; x = x + 4;`  |
+| `-=`     | Присваивание вычитания | Вычитает значение справа из переменной слева и возвращает новое значение переменной  | `x = 6; x -= 3;`  | `x = 6; x = x - 3;`  |
+| `*=`     | Присваивание умножения | Умножает переменную слева на значение справа и возвращает новое значение переменной  | `x = 2; x *= 3;`  | `x = 2; x = x * 3;`  |
+| `/=`     | Присваивание деления   | Делит переменную слева на значение справа и возвращает новое значение переменной     | `x = 10; x /= 5;` | `x = 10; x = x / 5;` |
+
+Попробуйте использовать такие конструкции, что понять, как они работают. Сможете ли вы определить значение до того, как напишите вторую строку?
+
+Заметьте, что значение справа может быть как числом (константой), так и переменной, например:
+
+```js
+var x = 3; // x содержит значение 3
 var y = 4; // y содержит значение 4
-x *= y; // x содержит значение 12</pre>
-
-<div class="note">
-<p><strong>Примечание:</strong> есть ещё <a href="https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators">другие операторы присваивания</a>, в этой статье перечислены только самые базовые.</p>
-</div>
-
-<h2 id="Активное_обучение_меняем_размеры_коробки">Активное обучение: меняем размеры коробки</h2>
-
-<p>В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными <code>x</code> и <code>y</code>, которые изначально равны 50.</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}</p>
-
-<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html">Открыть в новом окне</a></strong></p>
-
-<p>В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:</p>
-
-<ul>
- <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.</li>
- <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.</li>
- <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).</li>
- <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.</li>
- <li>Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.</li>
- <li>Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.</li>
-</ul>
-
-<p>Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку <em>Reset</em> для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).</p>
-
-<h2 id="Операторы_сравнения">Операторы сравнения</h2>
-
-<p>Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата - для этого мы используем <strong>операторы сравнения</strong>.</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Оператор</th>
-   <th scope="col">Имя</th>
-   <th scope="col">Назначение</th>
-   <th scope="col">Пример</th>
-  </tr>
-  <tr>
-   <td><code>===</code></td>
-   <td>Строгое равенство</td>
-   <td>Проверяет левое и правое значения на идентичность</td>
-   <td><code>5 === 2 + 4</code></td>
-  </tr>
-  <tr>
-   <td><code>!==</code></td>
-   <td>Строгое неравенство</td>
-   <td>Проверяет левое и правое значения на <strong>не</strong>идентичность</td>
-   <td><code>5 !== 2 + 3</code></td>
-  </tr>
-  <tr>
-   <td><code>&lt;</code></td>
-   <td>Меньше</td>
-   <td>Проверяет, меньше ли левое значение правого</td>
-   <td><code>10 &lt; 6</code></td>
-  </tr>
-  <tr>
-   <td><code>&gt;</code></td>
-   <td>Больше</td>
-   <td>Проверяет, больше ли левое значение правого</td>
-   <td><code>10 &gt; 20</code></td>
-  </tr>
-  <tr>
-   <td>&lt;=</td>
-   <td>Меньше или равно</td>
-   <td>Проверят, меньше ли левое значение правому (или равно ему)</td>
-   <td><code>3 &lt;= 2</code></td>
-  </tr>
-  <tr>
-   <td>&gt;=</td>
-   <td>Больше или равно</td>
-   <td>Проверят, больше ли левое значение левого (или равно ему)</td>
-   <td><code>5 &gt;= 4</code></td>
-  </tr>
- </thead>
-</table>
-
-<div class="note">
-<p><strong>Примечание</strong>: вы можете заметить, что некоторые люди используют <code>==</code> и <code>!=</code> в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от <code>===</code>/<code>!==</code> — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара - строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно её.</p>
-</div>
-
-<p>Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения <code>true</code>/<code>false</code> — о типе данных <code>boolean</code> мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:</p>
-
-<ul>
- <li>Порождать текст на кнопке в зависимости от того, нажата она или нет.</li>
- <li>Высвечивать сообщение о поражении при проигрыше или поздравление при победе в игре.</li>
- <li>Показывать пользователю верное окно приветствия в зависимости от времени года.</li>
- <li>Увеличивать или уменьшать карту при выборе одной из двух опций.</li>
-</ul>
-
-<p>Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:</p>
-
-<pre class="brush: html">&lt;button&gt;Запустить машину&lt;/button&gt;
-&lt;p&gt;Машина остановлена&lt;/p&gt;
-</pre>
-
-<pre class="brush: js">var btn = document.querySelector('button');
+x *= y; // x содержит значение 12
+```
+
+> **Примечание:** есть ещё [другие операторы присваивания](/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators), в этой статье перечислены только самые базовые.
+
+## Активное обучение: меняем размеры коробки
+
+В этом упражнении вы будете пользоваться числами и операторами для работы с размерами коробки. Коробка рисуется с помощью API браузера, которое называется Canvas API. Вам не следует беспокоиться о том, как это работает - просто сосредоточьтесь на математике. Ширина и высота коробки (в пикселях) определяются переменными `x` и `y`, которые изначально равны 50.
+
+{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html", '100%', 520)}}
+
+**[Открыть в новом окне](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/editable_canvas.html)**
+
+В коде сверху, который вы можете изменять, под комментарием есть две строчки, с помощью которых вы можете увеличивать/уменьшать размеры коробки. Мы хотим, чтобы вы выполнили несколько заданий:
+
+- Поменяйте строчку с размером x так, чтобы коробка была шириной 50px, причём 50 должно быть вычислено с помощью чисел 43 и 7 и арифметического оператора.
+- Поменяйте строчку с размером y так, чтобы коробка была высотой 75px, причём 75 должно быть вычислено с помощью чисел 25 и 3 и арифметического оператора.
+- Поменяйте строчку с размером y так, чтобы коробка была высотой 250, при этом 250 вычислено с помощью двух чисел и оператором взятия остатка (модуль).
+- Поменяйте строчку с размером y так, чтобы коробка была высотой 150px, причём 150 вычислено с помощью трёх чисел и операторов вычитания и деления.
+- Поменяйте строчку с размером x так, чтобы коробка была шириной 200px, при этом 200 вычислено с помощью числа 4 и оператора присваивания.
+- Поменяйте строчку с размером y так, чтобы коробка была высотой 200px, причём 200 вычислено с помощью чисел 50 и 3 и операторов умножения и присваивания сложения.
+
+Не расстраивайтесь, если вы не поняли код сверху. Нажмите кнопку _Reset_ для запуска программы снова. Если вы смогли ответить верно на все вопросы, попробуйте поэкспериментировать с кодом ещё (или, например, предложить друзьям несколько заданий).
+
+## Операторы сравнения
+
+Иногда нам может понадобиться проверить какое-либо условие, а затем поступить в зависимости от результата - для этого мы используем **операторы сравнения**.
+
+| Оператор | Имя                 | Назначение                                                 | Пример        |
+| -------- | ------------------- | ---------------------------------------------------------- | ------------- |
+| `===`    | Строгое равенство   | Проверяет левое и правое значения на идентичность          | `5 === 2 + 4` |
+| `!==`    | Строгое неравенство | Проверяет левое и правое значения на **не**идентичность    | `5 !== 2 + 3` |
+| `<`      | Меньше              | Проверяет, меньше ли левое значение правого                | `10 < 6`      |
+| `>`      | Больше              | Проверяет, больше ли левое значение правого                | `10 > 20`     |
+| <=       | Меньше или равно    | Проверят, меньше ли левое значение правому (или равно ему) | `3 <= 2`      |
+| >=       | Больше или равно    | Проверят, больше ли левое значение левого (или равно ему)  | `5 >= 4`      |
+
+> **Примечание:** вы можете заметить, что некоторые люди используют `==` и `!=` в их программах для сравнения на равенство и неравенство — это валидные JavaScript-операторы, но они отличаются от `===`/`!==` — первая пара проверяет на равенство/неравенство значений, не рассматривая их типы. Вторая пара - строгая версия первой, которая проверяет типы операндов. При использовании строгой версии выявляется больше ошибок, поэтому мы рекомендуем использовать именно её.
+
+Если вы попробуете использовать эти операторы в консоли, вы увидите, что все они возвращают значения `true`/`false` — о типе данных `boolean` мы писали в прошлой статье. С их помощью мы можем принимать решения в нашей программе, например:
+
+- Порождать текст на кнопке в зависимости от того, нажата она или нет.
+- Высвечивать сообщение о поражении при проигрыше или поздравление при победе в игре.
+- Показывать пользователю верное окно приветствия в зависимости от времени года.
+- Увеличивать или уменьшать карту при выборе одной из двух опций.
+
+Мы взглянем на то, как реализовать такую логику после знакомства с условными выражениями в следующей статье. Сейчас мы рассмотрим небольшой пример:
+
+```html
+<button>Запустить машину</button>
+<p>Машина остановлена</p>
+```
+
+```js
+var btn = document.querySelector('button');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -399,26 +272,23 @@ function updateBtn() {
     btn.textContent = 'Start machine';
     txt.textContent = 'The machine id stopped.';
   }
-}</pre>
+}
+```
 
-<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}</p>
+{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/maths/conditional.html", '100%', 100)}}
 
-<p><strong><a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html">Открыть в новом окне</a></strong></p>
+**[Открыть в новом окне](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/maths/conditional.html)**
 
-<p>Мы использовали оператор равенства внутри функции <code>updateBtn()</code>. В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно. </p>
+Мы использовали оператор равенства внутри функции `updateBtn()`. В этом случае мы не проверяем пару математических выражений на равенство значений — мы просто смотрим, является ли текст на кнопке определённой строкой — что по сути является тем же самым. Если кнопка при нажатии содержит "Start machine", мы меняем содержимое метки на "Stop machine" и обновляем метку. Если же текст кнопки — "Stop machine", при нажатии мы возвращаем все обратно.
 
-<div class="note">
-<p><strong>Примечание</strong>: Такой элемент управления, который переключается между двумя состояниями, обычно называется <strong>тумблером</strong>. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.</p>
-</div>
+> **Примечание:** Такой элемент управления, который переключается между двумя состояниями, обычно называется **тумблером**. Он переключается между одним состоянием и другим: свет включён, свет выключен и т. д.
 
-<h2 id="Итого">Итого</h2>
+## Итого
 
-<p>В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.</p>
+В этой статье мы привели основную информацию, необходимую для работы с числами в JavaScript. Вы постоянно будете использовать числа в процессе обучения языку, поэтому желательно разобраться в этом сейчас. Если вам действительно не нравится математика, пусть вас утешит, что эта статья была сравнительно короткой.
 
-<p>В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.</p>
+В следующей статье мы изучим текст и то, как мы работаем с ним в JavaScript.
 
-<div class="note">
-<p><strong>Примечание</strong>: если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи <a href="/ru/docs/Web/JavaScript/Guide/Numbers_and_dates">Числа и даты</a> и <a href="/ru/docs/Web/JavaScript/Reference/Operators">Выражения и операторы</a> - хороший вариант для начала.</p>
-</div>
+> **Примечание:** если вам хочется узнать подробнее о том, как математика реализуется в JavaScript, вы можете посмотреть главный раздел JavaScript MDN. Статьи [Числа и даты](/ru/docs/Web/JavaScript/Guide/Numbers_and_dates) и [Выражения и операторы](/ru/docs/Web/JavaScript/Reference/Operators) - хороший вариант для начала.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/first_steps/silly_story_generator/index.md b/files/ru/learn/javascript/first_steps/silly_story_generator/index.md
index 50a2895aaa4f24..30eb6dcf3ebcfc 100644
--- a/files/ru/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ru/learn/javascript/first_steps/silly_story_generator/index.md
@@ -16,134 +16,101 @@ tags:
 translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 original_slug: Learn/JavaScript/Первые_шаги/Создатель_глупых_историй
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</div>
-
-<p class="summary">В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Начальная_точка">Начальная точка</h2>
-
-<p>Для начала испытания вам следует:</p>
-
-<ul>
- <li>Перейти и <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">скопировать файл HTML</a> как пример, сохранив его локальную копию как  <code>index.html</code> в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.</li>
- <li>Перейти на <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">страницу, содержащую исходный текст, </a>и оставить её открытой в отдельной вкладке браузера. Она вам понадобится позже.</li>
-</ul>
-
-<div class="note">
-<p><strong>Замечание</strong>:  Так же вы можете использовать такие сайты как  <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в <code>&lt;script&gt;</code> элемент внутри  HTML страницы.</p>
-</div>
-
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
-
-<p>Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript-код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:</p>
-
-<ul>
- <li>Создаёт глупую историю по нажатию на кнопку "Generate random story".</li>
- <li>Заменяет стандартное имя "Bob" в истории на своё имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.</li>
- <li>Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.</li>
- <li>Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )</li>
-</ul>
-
-<p>Следующий скриншот показывает пример того, что должна выводить законченная программа:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
-
-<p>Чтобы вы больше поняли идею <a href="https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">опробуйте готовый пример</a> (не заглядывая в исходный код!)</p>
-
-<h2 id="Шаги_к_цели">Шаги к цели</h2>
-
-<p>Следующие разделы описывают, что вам нужно будет сделать.</p>
-
-<p>Начальная подготовка:</p>
-
-<ol>
- <li>Создайте новый файл под названием <code>main.js</code> в той же папке, что и <code>index.html</code>.</li>
- <li>Подключите данный JavaScript документ в ваш HTML файл с помощью {{htmlelement("script")}} элемента привязки <code>main.js</code>. Разместите его прямо перед закрывающимся <code>&lt;/body&gt;</code> тегом.</li>
-</ol>
-
-<p>Задайте переменные и функции:</p>
-
-<ol>
- <li>В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла <code>main.js</code>. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (<code>customName</code>),  кнопку "Generate random story" (<code>randomize</code>), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (<code>story</code>), соответственно. Также у вас должна быть функция<code>randomValueFromArray()</code>, которая принимает массив и случайным образом возвращает оттуда один из элементов.</li>
- <li>Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле <code>main.js</code>:
-  <ol>
-   <li>Сохраните первую большую строку текста в переменную <code>storyText</code>.</li>
-   <li>Сохраните первый блок из трёх строк как массив, назвав его <code>insertX</code>.</li>
-   <li>Сохраните второй блок из трёх строк как массив, назвав его <code>insertY</code>.</li>
-   <li>Сохраните третий блок из трёх строк как массив, назвав его <code>insertZ</code>.</li>
-  </ol>
- </li>
-</ol>
-
-<p>Создание обработчика событий и неполной функции:</p>
-
-<ol>
- <li>Теперь возвращаемся к исходному текстовому файлу.</li>
- <li>Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файла <code>main.js</code>. Это:
-  <ul>
-   <li>Добавит обработчик события кликанья в переменную <code>randomize</code>,  Так что, когда кнопка будет нажата -  функция <code>result()</code> запустится.</li>
-   <li>Добавляет в код частично завершённую функцию <code>result()</code>. В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить её и заставить работать должным образом.</li>
-  </ul>
- </li>
-</ol>
-
-<p>Завершение функции <code>result()</code>:</p>
-
-<ol>
- <li>Создайте новую переменную <code>newStory</code> и установите её значение равным <code>storyText</code>. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в <code>storyText</code>, мы могли бы генерировать новую историю только один раз.</li>
- <li>Создайте три новые переменные, называемые <code>xItem</code>, <code>yItem</code> и <code>zItem</code>, и сделайте их равными результату вызова <code>randomValueFromArray()</code> на трёх ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить её, чтобы вернуть одну случайную строку из <code>insertX</code>, записав <code>randomValueFromArray (insertX)</code>.</li>
- <li>Затем мы хотим заменить три заполнителя строки <code>newStory</code> - <code>:insertx:</code>, <code>:inserty :</code>  и <code>:insertz:</code> - со строками, хранящимися в <code>xItem</code>, <code>yItem</code> и <code>zItem</code>. Здесь вам поможет определённый строковый метод - в каждом случае сделать вызов метода равным <code>newStory</code>, при этом каждый раз, когда он вызывается, <code>newStory</code> делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придётся сделать один из вызовов дважды.</li>
- <li>Внутри первого блока <code>if</code> добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке <code>newStory</code>, с помощью переменной <code>name</code>. В этом блоке мы говорим: «Если значение введено в текстовый ввод <code>customName</code>, замените Боба в истории этим пользовательским именем».</li>
- <li>Внутри второго блока <code>if</code> мы проверяем, была ли выбрана радиокнопка <code>uk</code>. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это:
-  <ol>
-   <li>Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.</li>
-   <li>Внутри линии, которая определяет <code>weight</code> переменную, замените 300 на расчёт, который преобразует 300 фунтов в стоуны. Добавьте <code>'stone'</code> в конце результата общего вызова <code>Math.round()</code>.</li>
-   <li>Внутри линии, определяющей <code>temperature</code> переменную, замените 94 на расчёт, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте <code>'centigrade'</code> в конце результата общего вызова <code>Math.round()</code>.</li>
-   <li>Просто под двумя определениями переменных добавьте ещё две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной <code>temperature</code> и«300  pounds» на содержимое <code>weight</code> переменной.</li>
-  </ol>
- </li>
- <li>Наконец, в предпоследней строке функции сделайте свойство <code>textContent</code> переменной <code>story</code> (которая ссылается на абзац) равным <code>newStory</code>.</li>
-</ol>
-
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
-
-<ul>
- <li>Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.</li>
- <li>Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:
-  <pre class="brush: js">document.querySelector('html').style.backgroundColor = 'red';</pre>
- </li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.</li>
-</ul>
-
-<h2 id="Оценка_и_помощь">Оценка и помощь</h2>
-
-<p>Если вы хотите, чтобы ваша работа была оценена, или застряли и хотите обратиться за помощью:</p>
-
-<ol>
- <li>Разместите свою работу в онлайн-редакторе, таком как <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle </a>или <a href="https://glitch.com/">Glitch</a>.</li>
- <li>Напишите сообщение с просьбой об оценке и / или помощи на форуме <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse</a>. Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти. Ваш пост должен включать:
-  <ul>
-   <li>Описательное название, такое как «Требуется оценка для генератора глупых историй».</li>
-   <li>Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.</li>
-   <li>Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе. Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.</li>
-   <li>Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.</li>
-  </ul>
- </li>
-</ol>
-
-<p>{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
+
+В этом испытании вам будет нужно, используя знания, полученные в статьях этого модуля, применить их для создания забавного приложения, создающего случайные глупые истории. Удачно повеселиться!
+
+| Требования: | Перед началом выполнения этого испытания вам следует проработать все статьи в этом модуле.                 |
+| ----------- | ---------------------------------------------------------------------------------------------------------- |
+| Задача:     | Протестировать понимание основ языка JavaScript, таких как переменные, числа, операторы, строки и массивы. |
+
+## Начальная точка
+
+Для начала испытания вам следует:
+
+- Перейти и [скопировать файл HTML](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html) как пример, сохранив его локальную копию как `index.html` в новой папке где-то на вашем компьютере. Там же будет храниться и CSS документ нужный для стилизации.
+- Перейти на [страницу, содержащую исходный текст, ](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)и оставить её открытой в отдельной вкладке браузера. Она вам понадобится позже.
+
+> **Примечание:** **Замечание**: Так же вы можете использовать такие сайты как [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/) для выполнения вашего испытания. Вы можете вставить HTML, CSS и JavaScript в один из этих онлайн редакторов. Если онлайн редактор, который вы используете, не имеет отдельного окна для JavaScript - не стесняйтесь вставить все скрипты в `<script>` элемент внутри HTML страницы.
+
+## Краткое описание проекта
+
+Вам предоставили некоторый необработанный HTML/CSS, несколько текстовых строк и функций JavaScript; вам необходимо написать необходимый JavaScript-код, чтобы превратить это в рабочую программу, которая выполняет следующие действия:
+
+- Создаёт глупую историю по нажатию на кнопку "Generate random story".
+- Заменяет стандартное имя "Bob" в истории на своё имя, только если оно введено в поле "Enter custom name" перед тем, как нажата создающая кнопка.
+- Конвертирует изначальные US величины веса и температуры в соответствующие для UK, если выбран соответствующий переключатель.
+- Будет создавать другую глупую историю если нажать на кнопку снова (и снова... )
+
+Следующий скриншот показывает пример того, что должна выводить законченная программа:
+
+![](https://mdn.mozillademos.org/files/13667/assessment-1.png)
+
+Чтобы вы больше поняли идею [опробуйте готовый пример](https://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/) (не заглядывая в исходный код!)
+
+## Шаги к цели
+
+Следующие разделы описывают, что вам нужно будет сделать.
+
+Начальная подготовка:
+
+1.  Создайте новый файл под названием `main.js` в той же папке, что и `index.html`.
+2.  Подключите данный JavaScript документ в ваш HTML файл с помощью {{htmlelement("script")}} элемента привязки `main.js`. Разместите его прямо перед закрывающимся `</body>` тегом.
+
+Задайте переменные и функции:
+
+1.  В исходном текстовом документе скопируйте весь код под заголовком "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" и вставьте в начало файла `main.js`. Это даст вам три переменные, ссылающиеся на текстовое поле "Enter custom name" (`customName`), кнопку "Generate random story" (`randomize`), и элемент снизу HTML страницы, куда будет помещена сама история {{htmlelement("p")}} (`story`), соответственно. Также у вас должна быть функция`randomValueFromArray()`, которая принимает массив и случайным образом возвращает оттуда один из элементов.
+2.  Теперь взгляните на второй параграф исходного документа — "2. RAW TEXT STRINGS". Он содержит строки текста, которые будут использоваться как входные данные вашей программы. Вам следует поместить их внутрь переменных в файле `main.js`:
+
+    1.  Сохраните первую большую строку текста в переменную `storyText`.
+    2.  Сохраните первый блок из трёх строк как массив, назвав его `insertX`.
+    3.  Сохраните второй блок из трёх строк как массив, назвав его `insertY`.
+    4.  Сохраните третий блок из трёх строк как массив, назвав его `insertZ`.
+
+Создание обработчика событий и неполной функции:
+
+1.  Теперь возвращаемся к исходному текстовому файлу.
+2.  Скопируйте код под заголовком "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" и вставьте его в конец файла `main.js`. Это:
+
+    - Добавит обработчик события кликанья в переменную `randomize`, Так что, когда кнопка будет нажата - функция `result()` запустится.
+    - Добавляет в код частично завершённую функцию `result()`. В течении оставшейся части испытания вам предстоит, заполняя строчки внутри этой функции, завершить её и заставить работать должным образом.
+
+Завершение функции `result()`:
+
+1.  Создайте новую переменную `newStory` и установите её значение равным `storyText`. Это необходимо, чтобы мы могли создавать новую случайную историю каждый раз, когда нажимается кнопка, и функция запускается. Если бы мы внесли изменения непосредственно в `storyText`, мы могли бы генерировать новую историю только один раз.
+2.  Создайте три новые переменные, называемые `xItem`, `yItem` и `zItem`, и сделайте их равными результату вызова `randomValueFromArray()` на трёх ваших массивах (результат в каждом случае будет случайным элементом из каждого массива, на который он вызывается). Например, вы можете вызвать функцию и получить её, чтобы вернуть одну случайную строку из `insertX`, записав `randomValueFromArray (insertX)`.
+3.  Затем мы хотим заменить три заполнителя строки `newStory` - `:insertx:`, `:inserty :` и `:insertz:` - со строками, хранящимися в `xItem`, `yItem` и `zItem`. Здесь вам поможет определённый строковый метод - в каждом случае сделать вызов метода равным `newStory`, при этом каждый раз, когда он вызывается, `newStory` делается равным самому себе, но с выполненными заменами. Поэтому каждый раз, когда нажимается кнопка, эти заполнители заменяются случайной строкой. Подсказка: рассматриваемый метод заменяет только первый экземпляр найденной подстроки, поэтому вам, возможно, придётся сделать один из вызовов дважды.
+4.  Внутри первого блока `if` добавьте другой метод замены строки, чтобы заменить имя «Боб», найденное в строке `newStory`, с помощью переменной `name`. В этом блоке мы говорим: «Если значение введено в текстовый ввод `customName`, замените Боба в истории этим пользовательским именем».
+5.  Внутри второго блока `if` мы проверяем, была ли выбрана радиокнопка `uk`. Если это так, мы хотим преобразовать значения веса и температуры в историю из фунтов и Фаренгейта в метры и по Цельсию. Что вам нужно сделать, так это:
+
+    1.  Посмотрите формулу преобразования фунтов в стоуны и Фаренгейта в по Цельсию.
+    2.  Внутри линии, которая определяет `weight` переменную, замените 300 на расчёт, который преобразует 300 фунтов в стоуны. Добавьте `'stone'` в конце результата общего вызова `Math.round()`.
+    3.  Внутри линии, определяющей `temperature` переменную, замените 94 на расчёт, который преобразует 94 градуса по Фаренгейту в по Цельсию. Добавьте `'centigrade'` в конце результата общего вызова `Math.round()`.
+    4.  Просто под двумя определениями переменных добавьте ещё две строки замены строк, которые заменяют «94 farenheit» на содержимое переменной `temperature` и«300 pounds» на содержимое `weight` переменной.
+
+6.  Наконец, в предпоследней строке функции сделайте свойство `textContent` переменной `story` (которая ссылается на абзац) равным `newStory`.
+
+## Советы и подсказки
+
+- Вам не нужно каким-либо образом редактировать HTML, кроме как применять JavaScript к вашему HTML.
+- Если вы не уверены, правильно ли применяется JavaScript для вашего HTML-кода, попробуйте временно удалить все остальное из файла JavaScript, добавив в него простой кусочек JavaScript, который, как вы знаете, создаст очевидный эффект, а затем сохраните и обновите. Следующий, например, делает фон элемента {{htmlelement ("html")}} красного цвета - поэтому все окно браузера должно быть красным, если JavaScript применяется правильно:
+
+  ```js
+  document.querySelector('html').style.backgroundColor = 'red';
+  ```
+
+- [Math.round()](/ru/docs/Web/JavaScript/Reference/Global_Objects/Math/round) - это встроенный метод JavaScript, который просто округляет результат вычисления до ближайшего целого числа.
+
+## Оценка и помощь
+
+Если вы хотите, чтобы ваша работа была оценена, или застряли и хотите обратиться за помощью:
+
+1.  Разместите свою работу в онлайн-редакторе, таком как [CodePen](https://codepen.io/), [jsFiddle ](https://jsfiddle.net/)или [Glitch](https://glitch.com/).
+2.  Напишите сообщение с просьбой об оценке и / или помощи на форуме [MDN Discourse](https://discourse.mozilla.org/c/mdn). Добавьте тег «learning» к своему сообщению, чтобы мы могли легче его найти. Ваш пост должен включать:
+
+    - Описательное название, такое как «Требуется оценка для генератора глупых историй».
+    - Подробная информация о том, что вы хотели бы, чтобы мы делали, например, что вы уже пробовали, если вы застряли и нуждаетесь в помощи.
+    - Ссылка на пример, который вы хотите оценить или нуждаетесь в помощи, в онлайн-редакторе. Это хорошая практика - очень сложно помочь кому-то с проблемой кодирования, если вы не видите его код.
+    - Ссылка на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, с которым вы хотите помочь.
+
+{{PreviousMenu("Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/first_steps/strings/index.md b/files/ru/learn/javascript/first_steps/strings/index.md
index 85548b56eb4fc3..56170cafe402d8 100644
--- a/files/ru/learn/javascript/first_steps/strings/index.md
+++ b/files/ru/learn/javascript/first_steps/strings/index.md
@@ -4,170 +4,198 @@ slug: Learn/JavaScript/First_steps/Strings
 translation_of: Learn/JavaScript/First_steps/Strings
 original_slug: Learn/JavaScript/Первые_шаги/Строки
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
-
-<p class="summary">Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Знакомство с основами строк в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Сила_слов">Сила слов</h2>
-
-<p>Слова очень важны для людей — это основа нашего общения. Интернет представляет собой преимущественно текстовую среду, предназначенную для того что бы люди общались и делились информацией, поэтому нам полезно иметь контроль над словами, которые появляются в нем. {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.</p>
-
-<p>Практически во всех программах, которые мы показали вам на данный момент,  были задействованы некоторые манипуляции со строками.</p>
-
-<h2 id="Строки_—_основы">Строки — основы</h2>
-
-<p>С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика</a>, чтобы познакомиться с ними.</p>
-
-<h3 id="Создание_строки">Создание строки</h3>
-
-<ol>
- <li>Для начала введите следующие строки:
-  <pre class="brush: js">var string = 'The revolution will not be televised.';
-string;</pre>
- </li>
- <li>Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками. </li>
- <li>Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки:
-  <pre class="brush: js example-bad">var badString = This is a test;
-var badString = 'This is a test;
-var badString = This is a test';</pre>
-  Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.</li>
- <li>Следующий код будет выполнен только в том случае, если ранее была объявлена переменная <code>string</code> — убедитесь сами:
-  <pre class="brush: js">var badString = string;
-badString;</pre>
-  В настоящее время строка <code>badString</code> имеет то же значение, что и строка <code>string</code>.</li>
-</ol>
-
-<h3 id="Одиночные_кавычки_vs._Двойные_кавычки">Одиночные кавычки vs. Двойные кавычки</h3>
-
-<ol>
- <li>В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:
-  <pre class="brush: js">var sgl = 'Single quotes.';
-var dbl = "Double quotes";
-sgl;
-dbl;</pre>
- </li>
- <li>Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример:
-  <pre class="brush: js example-bad">var badQuotes = 'What on earth?";</pre>
- </li>
- <li>Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет):
-  <pre class="brush: js">var sglDbl = 'Would you eat a "fish supper"?';
-var dblSgl = "I'm feeling blue.";
-sglDbl;
-dblSgl;</pre>
- </li>
- <li>Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается:
-  <pre class="brush: js example-bad">var bigmouth = 'I've got no right to take my place...';</pre>
-  Что приводит нас к следующей теме.</li>
-</ol>
-
-<h3 id="Экранирование_кавычек_в_строках">Экранирование кавычек в строках</h3>
-
-<p>Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:</p>
-
-<pre class="brush: js">var bigmouth = 'I\'ve got no right to take my place...';
-bigmouth;</pre>
-
-<p>Так лучше. Таким же образом можно экранировать и другие символы, например <code>"\</code>. Кроме того существуют специальные коды. Для дополнительной информации см. <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation">Escape notation</a>.</p>
-
-<h2 id="Конкатенация_строк">Конкатенация строк</h2>
-
-<ol>
- <li>Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.</li>
- <li>
-  <pre class="brush: js">var one = 'Hello, ';
-var two = 'how are you?';
-var joined = one + two;
-joined;</pre>
-  Результат этой программы - это переменная <code>joined</code>, содержащая значение "Hello, how are you?".</li>
- <li>В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите <code>+</code> между ними. Попробуйте это:
-  <pre class="brush: js">var multiple = one + one + one + one + two;
-multiple;</pre>
- </li>
- <li>Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:
-  <pre class="brush: js">var response = one + 'I am fine — ' + two;
-response;</pre>
- </li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание: </strong>Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется <strong>строковым литералом.</strong></p>
-</div>
-
-<h3 id="Конкатенация_строк_в_контексте">Конкатенация строк в контексте</h3>
-
-<p>Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:</p>
-
-<pre class="brush: html">&lt;button&gt;Press me&lt;/button&gt;</pre>
-
-<pre class="brush: js">var button = document.querySelector('button');
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
+
+Теперь мы обратим внимание на строки — в программировании так называют части текста. В этой статье мы рассмотрим все распространённые вещи, которые вы должны действительно знать о строках при изучении JavaScript, например, создание строк, экранирование кавычек в строках и объединение строк вместе.
+
+| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание что такое JavaScript. |
+| ------------------- | ----------------------------------------------------------------------------------------------- |
+| Цель:               | Знакомство с основами строк в JavaScript.                                                       |
+
+## Сила слов
+
+Слова очень важны для людей — это основа нашего общения. Интернет представляет собой преимущественно текстовую среду, предназначенную для того что бы люди общались и делились информацией, поэтому нам полезно иметь контроль над словами, которые появляются в нем. {{glossary ("HTML")}} предоставляет визуальную и смысловую структуру для нашего текста, {{glossary ("CSS")}} позволяет нам стилизовать его, а JavaScript содержит ряд функций для управления строками, создания пользовательских приветственных сообщений, при необходимости отображая нужные текстовые метки, сортируя элементы в желаемом порядке и многое другое.
+
+Практически во всех программах, которые мы показали вам на данный момент, были задействованы некоторые манипуляции со строками.
+
+## Строки — основы
+
+С первого взгляда строки обрабатываются аналогично числам, но если копнуть глубже, вы увидите некоторые заметные отличия. Давайте начнём с ввода некоторых основных строк в [консоль разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools), чтобы познакомиться с ними.
+
+### Создание строки
+
+1.  Для начала введите следующие строки:
+
+    ```js
+    var string = 'The revolution will not be televised.';
+    string;
+    ```
+
+2.  Как и в случае с числами, мы объявляем переменную, инициализируя её строковым значением, а затем возвращаем значение. Единственное различие здесь в том, что при написании строки вам нужно окружить значение кавычками.
+3.  Если вы не сделаете этого или пропустите одну из кавычек, вы получите сообщение об ошибке. Попробуйте ввести следующие строки:
+
+    ```js example-bad
+    var badString = This is a test;
+    var badString = 'This is a test;
+    var badString = This is a test';
+    ```
+
+    Эти строки не работают, потому что любая текстовая строка без кавычек считается именем переменной, именем свойства, зарезервированным словом или чем-то подобным. Если браузер не может найти его, возникает ошибка (например, «missing, before statement»). Если браузер может видеть, где начинается строка, но не может найти конец строки, как указано во 2-й строке, она жалуется на ошибку (с «unterminated string literal»). Если ваша программа выявляет такие ошибки, вернитесь назад и проверьте все свои строки, чтобы убедиться, что у вас нет пропущенных кавычек.
+
+4.  Следующий код будет выполнен только в том случае, если ранее была объявлена переменная `string` — убедитесь сами:
+
+    ```js
+    var badString = string;
+    badString;
+    ```
+
+    В настоящее время строка `badString` имеет то же значение, что и строка `string`.
+
+### Одиночные кавычки vs. Двойные кавычки
+
+1.  В JavaScript вы можете выбрать одинарные кавычки или двойные кавычки, чтобы обернуть ваши строки. Оба варианта будут работать нормально:
+
+    ```js
+    var sgl = 'Single quotes.';
+    var dbl = "Double quotes";
+    sgl;
+    dbl;
+    ```
+
+2.  Существует очень мало различий между одиночными и двойными кавычками, и решение какие из них использовать в коде остаётся на ваше усмотрение. Однако вы должны выбрать один вариант и придерживаться его, иначе ваш код может выдать ошибку, особенно если вы используете разные кавычки в одной строке! Ниже приведён пример:
+
+    ```js example-bad
+    var badQuotes = 'What on earth?";
+    ```
+
+3.  Браузер будет считать, что строка не была закрыта, потому что в строке может появиться другой тип цитаты, который вы не используете, чтобы хранить ваши строки в переменных. Из примера можно понять, о чем идёт речь (в коде ошибок нет):
+
+    ```js
+    var sglDbl = 'Would you eat a "fish supper"?';
+    var dblSgl = "I'm feeling blue.";
+    sglDbl;
+    dblSgl;
+    ```
+
+4.  Однако вы не можете включить один и тот же знак кавычки внутри строки, если он используется для их хранения. Ниже приведена ошибка, браузер ошибочно определяет место, где строка кончается:
+
+    ```js example-bad
+    var bigmouth = 'I've got no right to take my place...';
+    ```
+
+    Что приводит нас к следующей теме.
+
+### Экранирование кавычек в строках
+
+Чтобы исправить нашу предыдущую строку кода, нам нужно дать понять браузеру, что кавычка в середине строки не является меткой её конца. Экранирование символов означает, что мы делаем что-то с ними, чтобы убедиться, что они распознаются как текст, а не часть кода. В JavaScript мы делаем это, помещая обратную косую черту непосредственно перед символом. Введите эти строки:
+
+```js
+var bigmouth = 'I\'ve got no right to take my place...';
+bigmouth;
+```
+
+Так лучше. Таким же образом можно экранировать и другие символы, например `"\`. Кроме того существуют специальные коды. Для дополнительной информации см. [Escape notation](/ru/docs/Web/JavaScript/Reference/Global_Objects/String#escape_notation).
+
+## Конкатенация строк
+
+1.  Конкатенация — это новомодное программистское слово, которое означает «объединить». Объединение строк в JavaScript использует оператор плюс (+), тот же, который мы используем для сложения чисел, но в этом контексте он делает кое-что другое. Попробуем пример в нашей консоли.
+2.  ```js
+    var one = 'Hello, ';
+    var two = 'how are you?';
+    var joined = one + two;
+    joined;
+    ```
+
+    Результат этой программы - это переменная `joined`, содержащая значение "Hello, how are you?".
+
+3.  В последнем случае мы просто объединим две строки вместе, но на самом деле, вы можете объединить столько строк, сколько хотите, до тех пор, пока вы ставите `+` между ними. Попробуйте это:
+
+    ```js
+    var multiple = one + one + one + one + two;
+    multiple;
+    ```
+
+4.  Вы также можете использовать сочетание переменных и фактических строк. Попробуйте это:
+
+    ```js
+    var response = one + 'I am fine — ' + two;
+    response;
+    ```
+
+> **Примечание:**Когда вы вводите фактическую строку в свой код, заключённую в одинарные или двойные кавычки, она называется **строковым литералом.**
+
+### Конкатенация строк в контексте
+
+Давайте посмотрим на конкатенацию строк в действии — вот пример из предыдущего курса:
+
+```html
+<button>Press me</button>
+```
+
+```js
+var button = document.querySelector('button');
 
 button.onclick = function() {
   var name = prompt('What is your name?');
   alert('Hello ' + name + ', nice to see you!');
-}</pre>
-
-<p>{{ EmbedLiveSample('Конкатенация_строк_в_контексте', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
-
-<p>Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае <code><strong>name</strong></code>. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной <code>name</code>.</p>
-
-<h3 id="Числа_vs._строки">Числа vs. строки</h3>
-
-<ol>
- <li>Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:
-  <pre class="brush: js">'Front ' + 242;
-</pre>
-  Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.</li>
- <li>Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор <code>typeof</code> для того, чтобы установить является ли переменная числом или строкой):
-  <pre class="brush: js">var myDate = '19' + '67';
-typeof myDate;</pre>
- </li>
- <li>Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
-  <ul>
-   <li>Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
-    <pre class="brush: js">var myString = '123';
-var myNum = Number(myString);
-typeof myNum;</pre>
-   </li>
-   <li>С другой стороны, каждое число имеет метод, называемый <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString">toString()</a></code>, который преобразует его в эквивалентную строку. Попробуй это:
-    <pre class="brush: js">var myNum = 123;
-var myString = myNum.toString();
-typeof myString;</pre>
-   </li>
-  </ul>
-  Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через <code>Number()</code>, чтобы справиться с этим. Именно это мы сделали в нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63">Number Guessing Game,  </a>в строке 61.</li>
-</ol>
-
-<h2 id="Заключение">Заключение</h2>
-
-<p>Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.</p>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}</div>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
-</ul>
+}
+```
+
+{{ EmbedLiveSample('Конкатенация_строк_в_контексте', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
+
+Здесь мы используем функцию {{domxref ("Window.prompt ()", "Window.prompt ()")}} в строке 4, которая просит пользователя ответить на вопрос через всплывающее диалоговое окно, а затем сохраняет введённый текст внутри заданной переменной — в этом случае **`name`**. Затем мы используем функцию {{domxref ("Window.alert ()", "Window.alert ()")}} в строке 5 для отображения другого всплывающего окна, содержащего строку, которую мы собрали из двух строковых литералов и переменной `name`.
+
+### Числа vs. строки
+
+1.  Итак, что происходит, когда мы пытаемся добавить (или конкатенировать) строку и число? Попробуем это в нашей консоли:
+
+    ```js
+    'Front ' + 242;
+    ```
+
+    Вы можете ожидать, что это вызовет ошибку, но все работает отлично. Попытка представить строку как число на самом деле не имеет смысла, но число как строку — имеет, поэтому браузер довольно умно преобразует число в строку и объединяет две строки вместе.
+
+2.  Вы даже можете сделать это с двумя числами, вы можете заставить число стать строкой, обернув её в кавычки. Попробуйте следующее (мы используем оператор `typeof` для того, чтобы установить является ли переменная числом или строкой):
+
+    ```js
+    var myDate = '19' + '67';
+    typeof myDate;
+    ```
+
+3.  Если у вас есть числовая переменная, которую вы хотите преобразовать в строчную без внесения каких-либо иных изменений или строковую переменную, которую вы хотите преобразовать в число, вы можете использовать следующие две конструкции:
+
+    - Объект {{jsxref ("Number")}} преобразует всё переданное в него в число, если это возможно. Попробуйте следующее:
+
+      ```js
+      var myString = '123';
+      var myNum = Number(myString);
+      typeof myNum;
+      ```
+
+    - С другой стороны, каждое число имеет метод, называемый [`toString()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toString), который преобразует его в эквивалентную строку. Попробуй это:
+
+      ```js
+      var myNum = 123;
+      var myString = myNum.toString();
+      typeof myString;
+      ```
+
+    Эти конструкции могут быть действительно полезны в некоторых ситуациях. Например, если пользователь вводит число в текстовое поле формы, данные будут распознаны как строка. Однако, если вы хотите добавить это число к чему-то, вам понадобится его значение, поэтому вы можете передать его через `Number()`, чтобы справиться с этим. Именно это мы сделали в нашей [Number Guessing Game, ](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/first-splash/number-guessing-game.html#L63)в строке 61.
+
+## Заключение
+
+Итак, это основы строк, используемых в JavaScript. В следующей статье мы рассмотрим некоторые из встроенных методов, доступных для строк в JavaScript и то, как мы можем использовать их для управления нашими строками только в той форме, в которой мы хотим.
+
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги/Useful_string_methods", "Learn/JavaScript/Первые_шаги")}}
+
+## В этом модуле
+
+- [What is JavaScript?](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
+- [A first splash into JavaScript](/ru/docs/Learn/JavaScript/First_steps/A_first_splash)
+- [What went wrong? Troubleshooting JavaScript](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong)
+- [Storing the information you need — Variables](/ru/docs/Learn/JavaScript/First_steps/Variables)
+- [Basic math in JavaScript — numbers and operators](/ru/docs/Learn/JavaScript/First_steps/Math)
+- [Handling text — strings in JavaScript](/ru/docs/Learn/JavaScript/First_steps/Strings)
+- [Useful string methods](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods)
+- [Arrays](/ru/docs/Learn/JavaScript/First_steps/Arrays)
+- [Assessment: Silly story generator](/ru/docs/Learn/JavaScript/First_steps/Silly_story_generator)
diff --git a/files/ru/learn/javascript/first_steps/useful_string_methods/index.md b/files/ru/learn/javascript/first_steps/useful_string_methods/index.md
index 159a3ec45e6d83..74d9ca6f82444b 100644
--- a/files/ru/learn/javascript/first_steps/useful_string_methods/index.md
+++ b/files/ru/learn/javascript/first_steps/useful_string_methods/index.md
@@ -16,144 +16,160 @@ tags:
 translation_of: Learn/JavaScript/First_steps/Useful_string_methods
 original_slug: Learn/JavaScript/Первые_шаги/Useful_string_methods
 ---
-<p>{{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
 
-<p>Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдём дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.</p>
+Мы рассмотрели базовые понятия, касающиеся строк. Давайте пойдём дальше и рассмотрим, какие полезные операции мы можем выполнять со строками, используя встроенные функции, такие как поиск длины текстовой строки, объединение и разделение строк, замена одного символа из строки другим и многое другое.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row" style="background-color: rgb(255, 232, 212);"><strong>Необходимые знания:</strong></th>
-   <td style="background-color: rgb(255, 232, 212);">Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row" style="background-color: rgb(255, 232, 212);"><strong>Задача:</strong></th>
-   <td style="background-color: rgb(255, 232, 212);">Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками.</td>
-  </tr>
- </tbody>
-</table>
+| **Необходимые знания:** | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.                                                  |
+| ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| **Задача:**             | Понять, что строки являются объектами, и изучить, как использовать некоторые из основных методов, доступных для этих объектов для управления строками. |
 
-<h2 id="Строки_как_объекты">Строки как объекты</h2>
+## Строки как объекты
 
-<p id="Useful_string_methods">Почти всё в JavaScript является объектами. Когда вы создаёте строку, например: </p>
+Почти всё в JavaScript является объектами. Когда вы создаёте строку, например:
 
-<pre>let string = 'This is my string';</pre>
+```
+let string = 'This is my string';
+```
 
-<p>ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!</p>
+ваша переменная становится строковым объектом, и, как результат, ей доступно множество свойств и методов. Можете убедиться в этом, перейдя на страницу {{jsxref ("String")}} и просмотрев на ней список свойств и методов!
 
-<p><strong>Только не волнуйтесь!</strong> Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.</p>
+**Только не волнуйтесь!** Большинство из них вам не нужно знать сейчас на ранней стадии вашего обучения. Но некоторые из них вы, возможно, будете использовать довольно часто. Их мы и рассмотрим.
 
-<p>Введем несколько примеров в <a href="/ru/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика</a>.</p>
+Введем несколько примеров в [консоль разработчика](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools).
 
-<h3 id="Поиск_длины_строки">Поиск длины строки</h3>
+### Поиск длины строки
 
-<p>Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:</p>
+Это легко — вы просто используете свойство {{jsxref ("String.prototype.length", "length")}}. Попробуйте ввести следующие строки:
 
-<pre>let browserType = 'mozilla';
-browserType.length;</pre>
+```
+let browserType = 'mozilla';
+browserType.length;
+```
 
-<p>Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.</p>
+Результатом должно быть число 7, потому что слово «mozilla» состоит из 7 символов. Это свойство можно применить, например, если вы захотите найти длины серии имён, чтобы их можно было отображать по порядку длины или сообщить пользователю, что имя пользователя, которое он ввёл в поле формы, слишком длинное, если оно превышает определённую длину.
 
-<h3 id="Получение_определённого_строкового_символа">Получение определённого строкового символа</h3>
+### Получение определённого строкового символа
 
-<p>Вы можете вернуть любой символ внутри строки, используя <strong>обозначение в квадратных скобках.</strong> Это означает, что вы добавляете квадратные скобки ([ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:</p>
+Вы можете вернуть любой символ внутри строки, используя **обозначение в квадратных скобках.** Это означает, что вы добавляете квадратные скобки (\[ ]) в конце вашего имени переменной. В квадратных скобках вы указываете номер символа, который хотите вернуть. Например, чтобы получить первую букву, нужно написать:
 
-<pre class="syntaxbox">browserType[0];</pre>
+```
+browserType[0];
+```
 
-<p>Компьютеры считают от 0, а не 1! Чтобы получить последний символ <em>любой</em> строки, мы могли бы использовать следующую строку, объединив эту технику с свойством <code>length</code>:</p>
+Компьютеры считают от 0, а не 1! Чтобы получить последний символ _любой_ строки, мы могли бы использовать следующую строку, объединив эту технику с свойством `length`:
 
-<pre class="syntaxbox"> browserType[browserType.length-1];</pre>
+```
+ browserType[browserType.length-1];
+```
 
-<p>Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна <code>length-1</code>. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.</p>
+Длина слова «mozilla» равна 7, но, поскольку счёт начинается с 0, позиция последнего символа равна 6, поэтому нам нужна `length-1`. Такой способ можно использовать, чтобы найти первую букву ряда строк и упорядочить их по алфавиту.
 
-<h3 id="Поиск_подстроки_внутри_строки_и_её_извлечение">Поиск подстроки внутри строки и её извлечение</h3>
+### Поиск подстроки внутри строки и её извлечение
 
-<ol>
- <li>Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите:
-  <pre>browserType.indexOf('zilla');</pre>
-  Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».</li>
- <li>Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее:
-  <pre>browserType.indexOf('vanilla');</pre>
-  Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.<br>
-  <br>
-  Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
-  <pre>if(browserType.indexOf('mozilla') === -1) {
-  // сделать что-то, если 'mozilla'
-  // не является частью этой строки
-}
+1.  Иногда вам может понадобиться выяснить, присутствует ли меньшая строка внутри большей (обычно мы говорим, что внутри строки есть подстрока). Это можно сделать с помощью метода {{jsxref ("String.prototype.indexOf ()", "indexOf ()")}}, который принимает одну {{glossary ("parameter")}} - подстроку, которую вы хотите найти. Введите:
 
-if(browserType.indexOf('mozilla') !== -1) {
-  // сделать что-то, если 'mozilla'
-  // является частью этой строки
-}</pre>
- </li>
- <li>Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}}  для извлечения. Попробуйте следующее:
-  <pre>browserType.slice(0,3);</pre>
-  Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку<em>.</em> Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её <em>(</em>помним, что <em>счёт идёт с 0, а не с 1)</em>. Также можно сказать, что второй параметр равен длине возвращаемой строки.</li>
- <li>Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите:
-  <pre>browserType.slice(2);</pre>
-  Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.</li>
-</ol>
-
-<div class="blockIndicator note">
-<p><strong>Примечание</strong>: второй параметр <code>slice()</code> не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу {{jsxref ("String.prototype.slice ()", "slice ()")}}, чтобы узнать, что ещё вы можете узнать.</p>
-</div>
+    ```
+    browserType.indexOf('zilla');
+    ```
 
-<h3 id="Изменение_регистра">Изменение регистра</h3>
+    Это даёт нам результат 2, потому что подстрока «zilla» начинается в позиции 2 ("m" — 0, "o" — 1, "z" — 2) внутри «mozilla». Такой код можно использовать для фильтрации строк. Например, если есть список веб-адресов и вы хотите распечатать только те, которые содержат «mozilla».
 
-<p>Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.</p>
+2.  Это можно сделать по-другому, что, возможно, ещё более эффективно. Введите следующее:
 
-<p>Попробуем ввести следующие строки, чтобы узнать, что происходит:</p>
+    ```
+    browserType.indexOf('vanilla');
+    ```
 
-<pre>var radData = 'My NaMe Is MuD';
-radData.toLowerCase();
-radData.toUpperCase();</pre>
+    Это должно дать вам результат -1. Такое значение возвращается, когда подстрока, в данном случае «vanilla», не найдена в основной строке.
+
+    Вы можете использовать это, чтобы найти все экземпляры строк, которые не содержат подстроку «mozilla» (для обратного эффекта, используйте оператор отрицания):
+
+    ```
+    if(browserType.indexOf('mozilla') === -1) {
+      // сделать что-то, если 'mozilla'
+      // не является частью этой строки
+    }
+
+    if(browserType.indexOf('mozilla') !== -1) {
+      // сделать что-то, если 'mozilla'
+      // является частью этой строки
+    }
+    ```
 
-<h3 id="Обновление_частей_строки">Обновление частей строки</h3>
+3.  Когда вы знаете, где подстрока начинается внутри строки, и вы знаете, на каком символе вы хотите её завершить, можно использовать {{jsxref ("String.prototype.slice ()", "slice ()")}} для извлечения. Попробуйте следующее:
 
-<p>Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод {{jsxref ("String.prototype.replace ()", "replace ()")}}. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.</p>
+    ```
+    browserType.slice(0,3);
+    ```
 
-<p>Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:</p>
+    Это возвращает «moz». Первым параметром является позиция символа, с которого начинается извлечение, а второй параметр — позиция последнего символа, перед которым нужно отсечь строку*.* Таким образом, срез происходит с первой позиции, вплоть до последней позиции, но не включая её *(*помним, что _счёт идёт с 0, а не с 1)_. Также можно сказать, что второй параметр равен длине возвращаемой строки.
 
-<pre>browserType.replace('moz','van');</pre>
+4.  Кроме того, если вы знаете, что хотите извлечь все остальные символы в строке после определённого символа, вам не нужно включать второй параметр. Достаточно включить только положение символа, с которого вы хотите начать извлечение оставшихся символов в строке. Введите:
 
-<p>Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: <code>browserType = browserType.replace('moz','van');</code></p>
+    ```
+    browserType.slice(2);
+    ```
 
-<h2 id="Активные_примеры_обучения">Активные примеры обучения</h2>
+    Этот код возвращает «zilla» — это потому, что позиция символа 2 — это буква z, и поскольку вы не указали второй параметр, возвращаемая подстрока состояла из всех остальных символов в строке.
+
+> **Примечание:** второй параметр `slice()` не обязателен: если вы его не включите в код, обрезание закончится на конце оригинальной строки. Есть и другие варианты; изучите страницу {{jsxref ("String.prototype.slice ()", "slice ()")}}, чтобы узнать, что ещё вы можете узнать.
+
+### Изменение регистра
+
+Строковые методы {{jsxref ("String.prototype.toLowerCase ()", "toLowerCase ()")}} и {{jsxref ("String.prototype.toUpperCase ()", "toUpperCase ()")}} преобразовывают все символы в строке в нижний или верхний регистр соответственно. Этот способ можно применить, если вы хотите нормализовать все введённые пользователем данные перед их сохранением в базе данных.
+
+Попробуем ввести следующие строки, чтобы узнать, что происходит:
+
+```
+var radData = 'My NaMe Is MuD';
+radData.toLowerCase();
+radData.toUpperCase();
+```
 
-<p>В этом разделе мы дадим вам попробовать набить руку и вместе напишем код строковой манипуляции. В каждом упражнении ниже у нас есть массив строк и цикл, который обрабатывает каждое значение в массиве и отображает его в маркированном списке. Вам не нужно понимать массивы или циклы прямо сейчас — это будет объяснено в будущих статьях. Все, что вам нужно сделать в каждом случае, — написать код, который выводит строки в том формате, в котором мы предлагаем.</p>
+### Обновление частей строки
 
-<p>В каждом примере есть кнопка <em>Сбросить</em>, которую вы можете использовать для сброса кода, если вы допустили ошибку и не можете заставить его работать снова, а кнопку <em>Показать решение</em> вы можете нажать, чтобы увидеть потенциальный ответ, если вы действительно застрянете на решении.</p>
+Вы можете заменить одну подстроку внутри строки на другую подстроку, используя метод {{jsxref ("String.prototype.replace ()", "replace ()")}}. Этот метод работает очень просто на базовом уровне, но у него есть некоторые продвинутые свойства, но мы пока не будем вдаваться в детали.
 
-<h3 id="Фильтрация_приветственных_сообщений">Фильтрация приветственных сообщений</h3>
+Он принимает два параметра — строку, которую вы хотите заменить, и строку, которую вы хотите вставить вместо заменяемой. Попробуйте этот пример:
 
-<p>В первом упражнении мы начнём с простого: у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( ... ), чтобы проверить каждую строку и отобразить её в списке, только если это рождественское сообщение.</p>
+```
+browserType.replace('moz','van');
+```
 
-<ol>
- <li>Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?</li>
- <li>Затем вам нужно будет написать условный тест <em>операнд1 оператор операнд2</em>. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?</li>
- <li>Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.</li>
-</ol>
+Обратите внимание, что для фактического получения обновлённого значения, отражённого в переменной browserType в реальной программе, вам нужно будет установить значение переменной в результате операции; он не просто обновляет значение подстроки автоматически. Таким образом, вы должны были бы написать это: `browserType = browserType.replace('moz','van');`
 
-<div class="hidden">
-<h6 id="Playable_code">Playable code</h6>
+## Активные примеры обучения
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+В этом разделе мы дадим вам попробовать набить руку и вместе напишем код строковой манипуляции. В каждом упражнении ниже у нас есть массив строк и цикл, который обрабатывает каждое значение в массиве и отображает его в маркированном списке. Вам не нужно понимать массивы или циклы прямо сейчас — это будет объяснено в будущих статьях. Все, что вам нужно сделать в каждом случае, — написать код, который выводит строки в том формате, в котором мы предлагаем.
 
-&lt;div class="output" style="min-height: 125px;"&gt;
+В каждом примере есть кнопка _Сбросить_, которую вы можете использовать для сброса кода, если вы допустили ошибку и не можете заставить его работать снова, а кнопку _Показать решение_ вы можете нажать, чтобы увидеть потенциальный ответ, если вы действительно застрянете на решении.
 
-&lt;ul&gt;
+### Фильтрация приветственных сообщений
 
-&lt;/ul&gt;
+В первом упражнении мы начнём с простого: у нас есть множество сообщений поздравительных открыток, но мы хотим отсортировать их, чтобы перечислять только рождественские сообщения. Мы хотим, чтобы вы заполнили условный тест внутри структуры if( ... ), чтобы проверить каждую строку и отобразить её в списке, только если это рождественское сообщение.
 
-&lt;/div&gt;
+1.  Сначала подумайте о том, как вы можете проверить, является ли сообщение в каждом случае рождественским сообщением. Какая строка присутствует во всех этих сообщениях и какой метод вы можете использовать для проверки?
+2.  Затем вам нужно будет написать условный тест _операнд1 оператор операнд2_. Соответствует ли результат слева результату справа? Или в этом случае вызов метода слева возвращает результат справа?
+3.  Подсказка. В этом случае, вероятно, полезнее проверить, не является ли часть строки не равной (!==) определённому результату.
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;textarea id="code" class="playable-code" style="height: 290px; width: 95%"&gt;
+<div class="output" style="min-height: 125px;">
+
+<ul>
+
+</ul>
+
+</div>
+
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
+
+<textarea id="code" class="playable-code" style="height: 290px; width: 95%">
 var list = document.querySelector('.output ul');
 list.innerHTML = '';
 var greetings = ['С днём рождения!',
@@ -162,7 +178,7 @@ var greetings = ['С днём рождения!',
                  'Ты — та, кто нужен мне на Рождество',
                  'Поправляйся скорее'];
 
-for (var i = 0; i &lt; greetings.length; i++) {
+for (var i = 0; i < greetings.length; i++) {
   var input = greetings[i];
   // Ваше решение должно быть в фигурных скобках
   // ниже: вы должны что-то добавить
@@ -173,14 +189,16 @@ for (var i = 0; i &lt; greetings.length; i++) {
     list.appendChild(listItem);
   }
 }
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</code></pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css line-numbers  language-css"><code class="language-css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -198,9 +216,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</code></pre>
+}
+```
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -214,22 +234,22 @@ reset.addEventListener('click', function() {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  solution.value = 'Показать решение';
   updateCode();
 });
 
 solution.addEventListener('click', function() {
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     textarea.value = solutionEntry;
-    solution.value = '</code><code class="language-html">Спрятать решение</code><code class="language-js">';
+    solution.value = 'Спрятать решение';
   } else {
     textarea.value = userEntry;
-    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+    solution.value = 'Показать решение';
   }
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'</code><code class="language-html">С днём рождения!</code><code class="language-js">\',\n \'</code><code class="language-html">С Рождеством, любовь моя</code><code class="language-js">\',\n \'</code><code class="language-html">Счастливого Рождества всей твоей семье</code><code class="language-js">\',\n \'</code><code class="language-html">Ты — та, кто нужен мне на Рождество</code><code class="language-js">\',\n \'</code><code class="language-html">Поправляйся скорее</code><code class="language-js">\'];\n\nfor(var i = 0; i &lt; greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Рождеств\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar greetings = [\'С днём рождения!\',\n \'С Рождеством, любовь моя\',\n \'Счастливого Рождества всей твоей семье\',\n \'Ты — та, кто нужен мне на Рождество\',\n \'Поправляйся скорее\'];\n\nfor(var i = 0; i < greetings.length; i++) {\n var input = greetings[i];\n if(greetings[i].indexOf(\'Рождеств\') !== -1) {\n var result = input;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n }\n}';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -268,54 +288,48 @@ function insertAtCaret(text) {
 textarea.onkeyup = function(){
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
   }
 
   updateCode();
-};</code></pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}</p>
+};
+```
 
-<h3 id="Исправление_регистра_размера_букв_в_тексте—прим._пер.">Исправление регистра (<em>размера букв в тексте—прим. пер.</em>)</h3>
+{{ EmbedLiveSample('Playable_code', '100%', 590, "", "", "hide-codepen-jsfiddle") }}
 
-<p>В этом упражнении у нас есть названия городов в Великобритании, но написанных разным регистром. Мы хотим, чтобы вы изменили их так, чтобы они были в нижнем регистре, за исключением первой буквы. Хороший способ сделать это:</p>
+### Исправление регистра (_размера букв в тексте—прим. пер._)
 
-<ol>
- <li>Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.</li>
- <li>Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.</li>
- <li>Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.</li>
- <li>Измените значение переменной <code>result</code> на равную конечному результату (не <code>input</code>).</li>
-</ol>
+В этом упражнении у нас есть названия городов в Великобритании, но написанных разным регистром. Мы хотим, чтобы вы изменили их так, чтобы они были в нижнем регистре, за исключением первой буквы. Хороший способ сделать это:
 
-<div class="note">
-<p><strong>Примечание</strong>: Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.</p>
-</div>
+1.  Преобразуйте всю строку, содержащуюся в переменной input, в нижний регистр и сохраните её в новой переменной.
+2.  Возьмите первую букву строки в этой новой переменной и сохраните её в другой переменной.
+3.  Используя эту последнюю переменную в качестве подстроки, замените первую букву строчной строки первой буквой строчной строки, изменённой на верхний регистр. Сохраните результат этой процедуры замены в другой новой переменной.
+4.  Измените значение переменной `result` на равную конечному результату (не `input`).
 
-<div class="hidden">
-<h6 id="Playable_code_2">Playable code 2</h6>
+> **Примечание:** Подсказка — параметры строковых методов не обязательно должны быть строковыми литералами; они также могут быть переменными или даже переменными с вызываемым ими методом.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 125px;"&gt;
+<div class="output" style="min-height: 125px;">
 
-&lt;ul&gt;
+<ul>
 
-&lt;/ul&gt;
+</ul>
 
-&lt;/div&gt;
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="playable-code" style="height: 250px; width: 95%"&gt;
+<textarea id="code" class="playable-code" style="height: 250px; width: 95%">
 var list = document.querySelector('.output ul');
 list.innerHTML = '';
 var cities = ['лонДон', 'МанЧЕСТёр', 'БиРминГЕМ', 'лиВЕРпуЛЬ'];
-for(var i = 0; i &lt; cities.length; i++) {
+for(var i = 0; i < cities.length; i++) {
   var input = cities[i];
   // пишите код ниже
 
@@ -324,14 +338,16 @@ for(var i = 0; i &lt; cities.length; i++) {
   listItem.textContent = result;
   list.appendChild(listItem);
 }
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</code></pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css line-numbers  language-css"><code class="language-css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -349,9 +365,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</code></pre>
+}
+```
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -365,22 +383,22 @@ reset.addEventListener('click', function() {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  solution.value = 'Показать решение';
   updateCode();
 });
 
 solution.addEventListener('click', function() {
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     textarea.value = solutionEntry;
     solution.value = 'Спрятать решение';
   } else {
     textarea.value = userEntry;
-    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+    solution.value = 'Показать решение';
   }
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'</code><code class="language-html">лонДон</code><code class="language-js">\', \'</code><code class="language-html">МанЧЕСТёр</code><code class="language-js">\', \'</code><code class="language-html">БиРминГЕМ</code><code class="language-js">\', \'</code><code class="language-html">лиВЕРпуЛЬ</code><code class="language-js">\'];\n\nfor(var i = 0; i &lt; cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar cities = [\'лонДон\', \'МанЧЕСТёр\', \'БиРминГЕМ\', \'лиВЕРпуЛЬ\'];\n\nfor(var i = 0; i < cities.length; i++) {\n var input = cities[i];\n var lower = input.toLowerCase();\n var firstLetter = lower.slice(0,1);\n var capitalized = lower.replace(firstLetter,firstLetter.toUpperCase());\n var result = capitalized;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n\n}';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -419,55 +437,55 @@ function insertAtCaret(text) {
 textarea.onkeyup = function(){
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
   }
 
   updateCode();
-};</code></pre>
-</div>
-
-<p>{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}</p>
+};
+```
 
-<h3 id="Создание_новых_строк_из_старых_частей">Создание новых строк из старых частей</h3>
+{{ EmbedLiveSample('Playable_code_2', '100%', 550, "", "", "hide-codepen-jsfiddle") }}
 
-<p>В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:</p>
+### Создание новых строк из старых частей
 
-<pre>MAN675847583748sjt567654;Manchester Piccadilly</pre>
+В этом последнем упражнении массив содержит кучу строк, содержащих информацию о железнодорожных станциях на севере Англии. Строки представляют собой элементы данных, которые содержат трёхбуквенный код станции, за которым следуют некоторые машиночитаемые данные, за которыми следует точка с запятой, а затем название станции, пригодное для чтения человеком. Например:
 
-<p>Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:</p>
+```
+MAN675847583748sjt567654;Manchester Piccadilly
+```
 
-<pre>MAN: Manchester Piccadilly</pre>
+Мы хотим извлечь код станции и имя и поместить их в строку со следующей структурой:
 
-<p>Мы бы рекомендовали реализовать это следующим образом:</p>
+```
+MAN: Manchester Piccadilly
+```
 
-<ol>
- <li>Извлеките трёхбуквенный код станции и сохраните его в новой переменной.</li>
- <li>Найдите номер символьного номера точки с запятой.</li>
- <li>Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.</li>
- <li>Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.</li>
- <li>Измените значение переменной <code>result</code> равной конечной строке (не <code>input</code>). </li>
-</ol>
+Мы бы рекомендовали реализовать это следующим образом:
 
-<div class="hidden">
-<h6 id="Playable_code_3">Playable code 3</h6>
+1.  Извлеките трёхбуквенный код станции и сохраните его в новой переменной.
+2.  Найдите номер символьного номера точки с запятой.
+3.  Извлеките название для чтения человеком, используя номер индекса точки с запятой в качестве контрольной точки и сохраните его в новой переменной.
+4.  Объедините две новые переменные и строковый литерал, чтобы сделать финальную строку.
+5.  Измените значение переменной `result` равной конечной строке (не `input`).
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">&lt;h2&gt;Результат&lt;/h2&gt;
+```html hidden
+<h2>Результат</h2>
 
-&lt;div class="output" style="min-height: 125px;"&gt;
+<div class="output" style="min-height: 125px;">
 
-&lt;ul&gt;
+<ul>
 
-&lt;/ul&gt;
+</ul>
 
-&lt;/div&gt;
+</div>
 
-&lt;h2&gt;Редактируемый код&lt;/h2&gt;
-&lt;p class="a11y-label"&gt;</code>Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).<code class="language-html">&lt;/p&gt;
+<h2>Редактируемый код</h2>
+<p class="a11y-label">Нажмите Esc, чтобы выйти из поля ввода (Tab вставляет символ табуляции).</p>
 
-&lt;textarea id="code" class="playable-code" style="height: 285px; width: 95%"&gt;
+<textarea id="code" class="playable-code" style="height: 285px; width: 95%">
 var list = document.querySelector('.output ul');
 list.innerHTML = '';
 var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
@@ -476,7 +494,7 @@ var stations = ['MAN675847583748sjt567654;Manchester Piccadilly',
                 'SYB4f65hf75f736463;Stalybridge',
                 'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield'];
 
-for (var i = 0; i &lt; stations.length; i++) {
+for (var i = 0; i < stations.length; i++) {
   var input = stations[i];
   // пишите ваш код ниже
 
@@ -485,14 +503,16 @@ for (var i = 0; i &lt; stations.length; i++) {
   listItem.textContent = result;
   list.appendChild(listItem);
 }
-&lt;/textarea&gt;
+</textarea>
 
-&lt;div class="playable-buttons"&gt;
-  &lt;input id="reset" type="button" value="Сбросить"&gt;
-  &lt;input id="solution" type="button" value="Показать решение"&gt;
-&lt;/div&gt;</code></pre>
+<div class="playable-buttons">
+  <input id="reset" type="button" value="Сбросить">
+  <input id="solution" type="button" value="Показать решение">
+</div>
+```
 
-<pre class="brush: css line-numbers  language-css"><code class="language-css">html {
+```css hidden
+html {
   font-family: sans-serif;
 }
 
@@ -510,9 +530,11 @@ h2 {
 body {
   margin: 10px;
   background: #f5f9fa;
-}</code></pre>
+}
+```
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">var textarea = document.getElementById('code');
+```js hidden
+var textarea = document.getElementById('code');
 var reset = document.getElementById('reset');
 var solution = document.getElementById('solution');
 var code = textarea.value;
@@ -526,22 +548,22 @@ reset.addEventListener('click', function() {
   textarea.value = code;
   userEntry = textarea.value;
   solutionEntry = jsSolution;
-  solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+  solution.value = 'Показать решение';
   updateCode();
 });
 
 solution.addEventListener('click', function() {
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     textarea.value = solutionEntry;
-    solution.value = '</code><code class="language-html">Спрятать решение</code><code class="language-js">';
+    solution.value = 'Спрятать решение';
   } else {
     textarea.value = userEntry;
-    solution.value = '</code><code class="language-html">Показать решение</code><code class="language-js">';
+    solution.value = 'Показать решение';
   }
   updateCode();
 });
 
-var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i &lt; stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
+var jsSolution = 'var list = document.querySelector(\'.output ul\');\nlist.innerHTML = \'\';\nvar stations = [\'MAN675847583748sjt567654;Manchester Piccadilly\',\n \'GNF576746573fhdg4737dh4;Greenfield\',\n \'LIV5hg65hd737456236dch46dg4;Liverpool Lime Street\',\n \'SYB4f65hf75f736463;Stalybridge\',\n \'HUD5767ghtyfyr4536dh45dg45dg3;Huddersfield\'];\n\nfor(var i = 0; i < stations.length; i++) {\n var input = stations[i];\n var code = input.slice(0,3);\n var semiC = input.indexOf(\';\');\n var name = input.slice(semiC + 1);\n var result = code + \': \' + name;\n var listItem = document.createElement(\'li\');\n listItem.textContent = result;\n list.appendChild(listItem);\n}';
 var solutionEntry = jsSolution;
 
 textarea.addEventListener('input', updateCode);
@@ -580,34 +602,32 @@ function insertAtCaret(text) {
 textarea.onkeyup = function(){
   // We only want to save the state when the user code is being shown,
   // not the solution, so that solution is not saved over the user code
-  if(solution.value === '</code><code class="language-html">Показать решение</code><code class="language-js">') {
+  if(solution.value === 'Показать решение') {
     userEntry = textarea.value;
   } else {
     solutionEntry = textarea.value;
   }
 
   updateCode();
-};</code></pre>
-</div>
+};
+```
 
-<p>{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('Playable_code_3', '100%', 585, "", "", "hide-codepen-jsfiddle") }}
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдёт вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.</p>
+Нельзя не согласиться с тем, что способность обрабатывать слова и предложения в программировании очень важна — особенно в JavaScript, поскольку веб-сайты — все связаны с людьми. Эта статья дала вам основы, которые вам нужно знать о манипуляции строками на данный момент. Это пойдёт вам на пользу, когда вы займётесь более сложными темами в будущем. Далее мы рассмотрим последний важный тип данных, на который нам нужно сосредоточиться в краткосрочной перспективе — массивы.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Строки", "Learn/JavaScript/Первые_шаги/Arrays", "Learn/JavaScript/Первые_шаги")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript">Что такое JavaScript?</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">Знакомство с JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA">Устранение ошибок в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables">Переменные — место хранения необходимой информации</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math">Базовая математика в JavaScript</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8">Работа с текстом — строки в JavaScript</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods">Полезные методы для строк</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays">Массивы</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9">Генератор глупых историй</a></li>
-</ul>
+- [Что такое JavaScript?](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/What_is_JavaScript)
+- [Знакомство с JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash)
+- [Устранение ошибок в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A7%D1%82%D0%BE_%D0%BF%D0%BE%D1%88%D0%BB%D0%BE_%D0%BD%D0%B5_%D1%82%D0%B0%D0%BA)
+- [Переменные — место хранения необходимой информации](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Variables)
+- [Базовая математика в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Math)
+- [Работа с текстом — строки в JavaScript](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D1%82%D1%80%D0%BE%D0%BA%D0%B8)
+- [Полезные методы для строк](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Useful_string_methods)
+- [Массивы](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/Arrays)
+- [Генератор глупых историй](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D1%82%D0%B5%D0%BB%D1%8C_%D0%B3%D0%BB%D1%83%D1%8B%D1%85_%D0%B8%D1%81%D1%82%D0%BE%D1%80%D0%B8%D0%B9)
diff --git a/files/ru/learn/javascript/first_steps/variables/index.md b/files/ru/learn/javascript/first_steps/variables/index.md
index 388cef127eb431..4d692cdc97606a 100644
--- a/files/ru/learn/javascript/first_steps/variables/index.md
+++ b/files/ru/learn/javascript/first_steps/variables/index.md
@@ -4,51 +4,45 @@ slug: Learn/JavaScript/First_steps/Variables
 translation_of: Learn/JavaScript/First_steps/Variables
 original_slug: Learn/JavaScript/Первые_шаги/Variables
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}</div>
+После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.
 
-<p class="summary">После прочтения последних двух статей вы знаете, что такое JavaScript, что он может сделать для вас, как использовать его вместе с другими веб-технологиями и какими он обладает функциями высокого уровня. В этой статье мы перейдём к реальным основам, рассмотрим, как работать с большинством базовых блоков JavaScript — Переменными.</p>
+| Необходимые навыки: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript. |
+| ------------------- | ----------------------------------------------------------------------------------------------------- |
+| Цель:               | Ознакомиться с основами переменных в JavaScript.                                                      |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомиться с основами переменных в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Инструменты, которые вам нужны
 
-<h2 id="Инструменты_которые_вам_нужны">Инструменты, которые вам нужны</h2>
+В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. [What are browser developer tools](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) для получения дополнительной информации о том, как получить доступ к этому инструменту).
 
-<p>В этой статье вам будет предложено ввести строки кода, чтобы проверить ваше понимание материала. Если вы используете браузер для настольных компьютеров, лучшим примером для ввода кода примера является консоль JavaScript вашего браузера (см. <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools</a> для получения дополнительной информации о том, как получить доступ к этому инструменту).</p>
+Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.
 
-<p>Также мы предоставили простую консоль JavaScript, встроенную ниже в странице, для ввода кода, если вы не используете браузер с консолью JavaScript или консоль на странице окажется для вас более комфортной.</p>
+## Что такое переменные?
 
-<h2 id="What_is_a_variable">Что такое переменные?</h2>
+Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:
 
-<p>Переменные — это контейнер для таких значений, как числа, используемые в сложении, или строка, которую мы могли бы использовать как часть предложения. Но одна из особенностей переменных — их значение может меняться. Давайте взглянем на простой пример:</p>
+```html
+<button>Нажми на меня</button>
+```
 
-<pre class="brush: html">&lt;button&gt;Нажми на меня&lt;/button&gt;</pre>
-
-<pre class="brush: js">const button = document.querySelector('button');
+```js
+const button = document.querySelector('button');
 
 button.onclick = function() {
   let name = prompt('Как вас зовут?');
   alert('Привет ' + name + ', рады видеть вас!');
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}</p>
+{{ EmbedLiveSample('What_is_a_variable', '100%', 50, "", "", "hide-codepen-jsfiddle") }}
 
-<p>В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.</p>
+В примере, по нажатию кнопки выполнится несколько строк кода. Первая строка в функции покажет пользователю окно, где попросит ввести его имя и сохранит значение в переменной. Вторая строка отобразит приветствие с включённым введённым именем, взятым из значения переменной.
 
-<p>Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:</p>
+Чтобы лучше понять действие переменной здесь, давайте подумаем о том, как мы будем писать этот пример без использования переменной. Это будет выглядеть примерно так:
 
-<pre class="example-bad">var name = prompt('Как вас зовут?');
+```plain example-bad
+var name = prompt('Как вас зовут?');
 
 if (name === 'Адам') {
   alert('Привет, Адам, рады тебя видеть!');
@@ -62,36 +56,37 @@ if (name === 'Адам') {
   alert('Привет, Крис, рады тебя видеть!');
 }
 
-// ... и так далее ...</pre>
-
-<p>Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.</p>
+// ... и так далее ...
+```
 
-<p>Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.</p>
+Вам сейчас не обязательно понимать синтаксис, который мы используем (пока!), но вы должны понять идею: если бы у нас не было доступных переменных, нам пришлось бы реализовать гигантский блок кода, который проверял, какое имя было введено, а затем отображал соответствующее сообщение для этого имени. Очевидно, что это неэффективно (код намного больше, даже для четырёх вариантов), и он просто не сработает, так как вы не можете хранить все возможные варианты.
 
-<p>Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..</p>
+Переменные имеют смысл, и, когда вы узнаете больше о JavaScript, они начнут становиться второй натурой.
 
-<p>Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.</p>
+Ещё одна особенность переменных заключается в том, что они могут содержать практически все, а не только строки и числа. Переменные могут также содержать сложные данные и даже целые функции. Об этом вы узнаете больше при дальнейшем изучении курса..
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13506/boxes.png" style="display: block; height: 436px; margin: 0px auto; width: 1052px;"></p>
+Заметьте: мы говорим, что переменные содержат значения. Это важное различие. Переменные не являются самими значениями; они представляют собой контейнеры для значений. Представьте, что они похожи на маленькие картонные коробки, в которых вы можете хранить вещи.
 
-<h2 id="Объявление_переменной">Объявление переменной</h2>
+![](https://mdn.mozillademos.org/files/13506/boxes.png)
 
-<p>Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:</p>
+## Объявление переменной
 
-<pre class="brush: js">var myName;
-var myAge;</pre>
+Чтобы использовать переменную, вы сначала должны её создать, или, если быть точнее, объявить переменную. Чтобы сделать это, мы вводим ключевое слово var, за которым следует имя, которое вы хотите дать своей переменной:
 
-<p>Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.</p>
+```js
+var myName;
+var myAge;
+```
 
-<div class="hidden">
-<h6 id="Hidden_code">Hidden code</h6>
+Здесь мы создаём две переменные myName и myAge. Попробуйте ввести эти строки сейчас в консоли вашего веб-браузера или в консоли ниже (можно открыть эту консоль в отдельной вкладке или в новом окне). После этого попробуйте создать переменную (или две) с вашими именами.
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
-  &lt;head&gt;
-    &lt;meta charset="utf-8"&gt;
-    &lt;title&gt;JavaScript console&lt;/title&gt;
-    &lt;style&gt;
+```html hidden
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>JavaScript console</title>
+    <style>
       * {
         box-sizing: border-box;
       }
@@ -139,14 +134,14 @@ var myAge;</pre>
         clear: both;
       }
 
-    &lt;/style&gt;
-  &lt;/head&gt;
-  &lt;body&gt;
+    </style>
+  </head>
+  <body>
 
 
-  &lt;/body&gt;
+  </body>
 
-  &lt;script&gt;
+  <script>
     var geval = eval;
     function createInput() {
       var inputDiv = document.createElement('div');
@@ -154,12 +149,12 @@ var myAge;</pre>
       var inputForm = document.createElement('input');
 
       inputDiv.setAttribute('class','input');
-      inputPara.textContent = '&gt;';
+      inputPara.textContent = '>';
       inputDiv.appendChild(inputPara);
       inputDiv.appendChild(inputForm);
       document.body.appendChild(inputDiv);
 
-      if(document.querySelectorAll('div').length &gt; 1) {
+      if(document.querySelectorAll('div').length > 1) {
         inputForm.focus();
       }
 
@@ -189,90 +184,94 @@ var myAge;</pre>
 
     createInput();
 
-  &lt;/script&gt;
-&lt;/html&gt;</pre>
-</div>
+  </script>
+</html>
+```
 
-<p>{{ EmbedLiveSample('Hidden_code', '100%', 300) }}</p>
+{{ EmbedLiveSample('Hidden_code', '100%', 300) }}
 
-<div class="note">
-<p><strong>Примечание</strong>: в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.</p>
-</div>
+> **Примечание:** в JavaScript все инструкции кода должны заканчиваться точкой с запятой (;) - ваш код может работать правильно для отдельных строк, но, вероятно, не будет, когда вы пишете несколько строк кода вместе. Попытайтесь превратить написание точки с запятой в привычку.
 
-<p>Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.</p>
+Теперь проверим, существуют ли эти значения в среде выполнения. Для этого введём только имя переменной.
 
-<pre class="brush: js">myName;
-myAge;</pre>
+```js
+myName;
+myAge;
+```
 
-<p>В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение  <code>undefined</code> . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:</p>
+В настоящее время они не содержат значения, это пустые контейнеры. В этом случае, когда вы вводите имена переменных, вы должны получить значение `undefined` . Если они не существуют, вы получите сообщение об ошибке - попробуйте сейчас ввести в консоли имя переменной ниже:
 
-<pre class="brush: js">scoobyDoo;</pre>
+```js
+scoobyDoo;
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.</p>
-</div>
+> **Примечание:** Не путайте переменную, которая существует, но не имеет значения, с переменной, которая вообще не существует - это разные вещи.
 
-<h2 id="Присвоение_значения_переменной">Присвоение значения переменной</h2>
+## Присвоение значения переменной
 
-<p>Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (<code>=</code>), а за ним значение, которое вы хотите присвоить. Например:</p>
+Как только переменная объявлена, ей можно присвоить значение. Для этого пишется имя переменной, затем следует знак равенства (`=`), а за ним значение, которое вы хотите присвоить. Например:
 
-<pre class="brush: js">myName = 'Chris';
-myAge = 37;</pre>
+```js
+myName = 'Chris';
+myAge = 37;
+```
 
-<p>Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:</p>
+Попробуйте вернуться в консоль и ввести эти строки. Вы должны увидеть значение, которое вы назначили переменной, возвращаемой в консоли. Чтобы посмотреть значения переменных, нужно набрать их имя в консоли:
 
-<pre class="brush: js">myName;
-myAge;</pre>
+```js
+myName;
+myAge;
+```
 
-<p>Вы можете объявить переменную и задать ей значение одновременно:</p>
+Вы можете объявить переменную и задать ей значение одновременно:
 
-<pre class="brush: js">var myName = 'Chris';</pre>
+```js
+var myName = 'Chris';
+```
 
-<p>Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.</p>
+Скорее всего, так вы будете писать большую часть времени, так как запись и выполнения кода с одно строки происходит быстрее, чем выполнение двух действий на двух отдельных строках.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется <strong>hoisting </strong>- прочитайте <a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var hoisting</a> для более подробной информации по этому вопросу.</p>
-</div>
+> **Примечание:** Если вы пишете многострочную программу JavaScript, которая объявляет и инициализирует (задаёт значение) переменную, вы можете объявить её после её инициализации, и она всё равно будет работать. Это связано с тем, что объявления переменных обычно выполняются первыми, прежде чем остальная часть кода будет выполнена. Это называется **hoisting** - прочитайте [var hoisting](/ru/docs/Web/JavaScript/Reference/Statements/var#var_hoisting) для более подробной информации по этому вопросу.
 
-<h2 id="Обновление_переменной">Обновление переменной</h2>
+## Обновление переменной
 
-<p>Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:</p>
+Когда переменной присваивается значение, вы можете изменить (обновить) это значение, просто указав другое значение. Попробуйте ввести следующие строки в консоль:
 
-<pre class="brush: js">myName = 'Bob';
-myAge = 40;</pre>
+```js
+myName = 'Bob';
+myAge = 40;
+```
 
-<h3 id="Правила_именования_переменных">Правила именования переменных</h3>
+### Правила именования переменных
 
-<p>Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.</p>
+Вы можете назвать переменную как угодно, но есть ограничения. Как правило, вы должны придерживаться только латинских символов (0-9, a-z, A-Z) и символа подчёркивания.
 
-<ul>
- <li>Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.</li>
- <li>Не используйте символы подчёркивания в начале имён переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.</li>
- <li>Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.</li>
- <li>Общепринято придерживаться так называемый <a href="https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms">"lower camel case"</a>, где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.</li>
- <li>Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.</li>
- <li>Переменные чувствительны к регистру, так что <code>myage</code> и <code>myAge</code> - разные переменные.</li>
- <li>И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа <code>var</code>, <code>function</code>, <code>let</code>, и <code>for</code> для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.</li>
-</ul>
+- Не рекомендуется использование других символов, потому что они могут вызывать ошибки или быть непонятными для международной аудитории.
+- Не используйте символы подчёркивания в начале имён переменных - это используется в некоторых конструкциях JavaScript для обозначения конкретных вещей.
+- Не используйте числа в начале переменных. Это недопустимо и приведёт к ошибке.
+- Общепринято придерживаться так называемый ["lower camel case"](https://en.wikipedia.org/wiki/CamelCase#Variations_and_synonyms), где вы склеиваете несколько слов, используя строчные буквы для всего первого слова, а затем заглавные буквы последующих слов. Мы использовали это для наших имён переменных в этой статье.
+- Делайте имена переменных такими, чтобы было интуитивно понятно, какие данные они содержат. Не используйте только отдельные буквы / цифры или большие длинные фразы.
+- Переменные чувствительны к регистру, так что `myage` и `myAge` - разные переменные.
+- И последнее - вам также нужно избегать использования зарезервированных слов JavaScript в качестве имён переменных - под этим мы подразумеваем слова, которые составляют фактический синтаксис JavaScript! Таким образом, вы не можете использовать слова типа `var`, `function`, `let`, и `for` для имён переменных. Браузеры распознают их как разные элементы кода, и поэтому возникают ошибки.
 
-<div class="note">
-<p><strong>Примечание</strong>: По ссылке можно найти довольно полный список зарезервированных ключевых слов: <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords">Lexical grammar — keywords</a>.</p>
-</div>
+> **Примечание:** По ссылке можно найти довольно полный список зарезервированных ключевых слов: [Lexical grammar — keywords](/ru/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords).
 
-<p>Примеры хороших имён переменных:</p>
+Примеры хороших имён переменных:
 
-<pre class="example-good">age
+```plain example-good
+age
 myAge
 init
 initialColor
 finalOutputValue
 audio1
 audio2
-</pre>
+```
 
-<p>Примеры плохих имён переменных:</p>
+Примеры плохих имён переменных:
 
-<pre class="example-bad">1
+```plain example-bad
+1
 a
 _12
 myage
@@ -280,94 +279,115 @@ MYAGE
 var
 Document
 skjfndskjfnbdskjfb
-thisisareallylongstupidvariablenameman</pre>
+thisisareallylongstupidvariablenameman
+```
 
-<p>Примеры имён переменных, которые вызовут ошибки:</p>
+Примеры имён переменных, которые вызовут ошибки:
 
-<pre class="example-bad">var
+```plain example-bad
+var
 Document
-</pre>
+```
 
-<p>Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.</p>
+Попытайтесь создать ещё несколько переменных прямо сейчас, используя знания, изложенные выше.
 
-<h2 id="Типы_переменных">Типы переменных</h2>
+## Типы переменных
 
-<p>Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.</p>
+Есть несколько различных типов данных, которые мы можем хранить в переменных. В этом разделе мы кратко опишем их, а затем в будущих статьях вы узнаете о них более подробно.
 
-<h3 id="Числа_Numbers">Числа (Numbers)</h3>
+### Числа (Numbers)
 
-<p>Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:</p>
+Вы можете хранить числа в переменных (целые числа, такие как 30, или десятичные числа, такие как 2.456, также называемые числами с плавающей точкой или с плавающей запятой). Вам не нужно объявлять типы переменных в JavaScript, в отличие от некоторых других языков программирования Если давать переменной значение числа,кавычки не используются:
 
-<pre class="brush: js">var myAge = 17;</pre>
+```js
+var myAge = 17;
+```
 
-<h3 id="Строки_Strings">Строки ('Strings')</h3>
+### Строки ('Strings')
 
-<p>Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.</p>
+Строки - это фрагменты текста. Когда вы даёте переменной значение строки, вам нужно обернуть её в одиночные или двойные кавычки, в противном случае JavaScript попытается проиндексировать её как другое имя переменной.
 
-<pre class="brush: js">var dolphinGoodbye = 'So long and thanks for all the fish';</pre>
+```js
+var dolphinGoodbye = 'So long and thanks for all the fish';
+```
 
-<h3 id="Логические_Booleans">Логические (Booleans)</h3>
+### Логические (Booleans)
 
-<p>Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:</p>
+Booleans - истинные / ложные значения - они могут иметь два значения: true или false. Они обычно используются для проверки состояния, после чего код запускается соответствующим образом. Вот простой пример:
 
-<pre class="brush: js">var iAmAlive = true;</pre>
+```js
+var iAmAlive = true;
+```
 
-<p>В действительности вы чаще будете использовать этот тип переменных так:</p>
+В действительности вы чаще будете использовать этот тип переменных так:
 
-<pre class="brush: js">var test = 6 &lt; 3;
-</pre>
+```js
+var test = 6 < 3;
+```
 
-<p>Здесь используется оператор «меньше» (&lt;), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.</p>
+Здесь используется оператор «меньше» (<), чтобы проверить, является ли 6 меньше 3. В данном примере, он вернёт false, потому что 6 не меньше 3! В дальнейшем вы узнаете больше о таких операторах.
 
-<h3 id="Массивы_Arrays">Массивы (Arrays)</h3>
+### Массивы (Arrays)
 
-<p>Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:</p>
+Массив - это один объект, который содержит несколько значений, заключённых в квадратные скобки и разделённых запятыми. Попробуйте ввести следующие строки в консоль:
 
-<pre class="brush: js">var myNameArray = ['Chris', 'Bob', 'Jim'];
-var myNumberArray = [10,15,40];</pre>
+```js
+var myNameArray = ['Chris', 'Bob', 'Jim'];
+var myNumberArray = [10,15,40];
+```
 
-<p>Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:</p>
+Как только эти массивы определены, можно получить доступ к каждому значению по их местоположению в массиве. Наберите следующие строки:
 
-<pre class="brush: js">myNameArray[0]; // should return 'Chris'
-myNumberArray[2]; // should return 40</pre>
+```js
+myNameArray[0]; // should return 'Chris'
+myNumberArray[2]; // should return 40
+```
 
-<p>Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.</p>
+Квадратные скобки указывают значение индекса, соответствующее позиции возвращаемого значения. Возможно, вы заметили, что массивы в JavaScript индексируются с нулевой отметкой: первый элемент имеет индекс 0.
 
-<p>В следующей статье вы узнаете больше о массивах.</p>
+В следующей статье вы узнаете больше о массивах.
 
-<h3 id="Объекты_Objects">Объекты (Objects)</h3>
+### Объекты (Objects)
 
-<p>В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.</p>
+В программировании объект представляет собой структуру кода, который моделирует объект реальной жизни. У вас может быть простой объект, представляющий автостоянку, и содержит информацию о её ширине и длине; или вы можете иметь объект, который представляет человека, и содержит данные о его имени, росте, весе, на каком языке он говорит, как сказать ему привет и многое другое.
 
-<p>Попробуйте ввести следующую строку в консоль:</p>
+Попробуйте ввести следующую строку в консоль:
 
-<pre class="brush: js">var dog = { name : 'Spot', breed : 'Dalmatian' };</pre>
+```js
+var dog = { name : 'Spot', breed : 'Dalmatian' };
+```
 
-<p>Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:</p>
+Чтобы получить информацию, хранящуюся в объекте, вы можете использовать следующий синтаксис:
 
-<pre class="brush: js">dog.name</pre>
+```js
+dog.name
+```
 
-<p>Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.</p>
+Мы больше не будем рассматривать объекты в данном курсе - вы можете больше узнать о них в будущем модуле.
 
-<h2 id="Динамическая_типизация">Динамическая типизация</h2>
+## Динамическая типизация
 
-<p>JavaScript - это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).</p>
+JavaScript - это «динамически типизируемый язык», что означает, что в отличие от некоторых других языков вам не нужно указывать, какой тип данных будет содержать переменная (например, числа, строки, массивы и т. д.).
 
-<p>Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:</p>
+Например, если вы объявите переменную и присвоите ей значение, заключённое в кавычки, браузер будет обрабатывать переменную как строку:
 
-<pre class="brush: js">var myString = 'Привет';</pre>
+```js
+var myString = 'Привет';
+```
 
-<p>Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:</p>
+Он всё равно будет строкой, даже если он содержит числа, поэтому будьте осторожны:
 
-<pre class="brush: js">var myNumber = '500'; // упс, это все ещё строка (string)
+```js
+var myNumber = '500'; // упс, это все ещё строка (string)
 typeof(myNumber);
 myNumber = 500; // так-то лучше, теперь это число (number)
-typeof(myNumber);</pre>
+typeof(myNumber);
+```
 
-<p>Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию <code>typeof()</code>  - она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная <code>myNumber</code> содержит строку <code>'500'</code>. Посмотрите, что она вернёт во второй раз, когда вы её вызовите.</p>
+Попробуйте ввести четыре строки выше в консоль одну за другой и посмотреть результаты. Вы заметите, что мы используем специальную функцию `typeof()` - она возвращает тип данных переменной, которую вы передаёте в неё. В первый раз, когда она вызывается, она должа возвращать строку, так как переменная `myNumber` содержит строку `'500'`. Посмотрите, что она вернёт во второй раз, когда вы её вызовите.
 
-<h2 id="Подведение_итогов">Подведение итогов</h2>
+## Подведение итогов
 
-<p>К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.</p>
+К настоящему времени вы должны знать достаточно о переменных JavaScript и о том, как их создавать. В следующей статье мы остановимся на числах более подробно, рассмотрев, как сделать базовую математику в JavaScript.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/Что_пошло_не_так", "Learn/JavaScript/Первые_шаги/Math", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/first_steps/what_is_javascript/index.md b/files/ru/learn/javascript/first_steps/what_is_javascript/index.md
index 2d7a71af72b191..49611802a1d2da 100644
--- a/files/ru/learn/javascript/first_steps/what_is_javascript/index.md
+++ b/files/ru/learn/javascript/first_steps/what_is_javascript/index.md
@@ -4,46 +4,36 @@ slug: Learn/JavaScript/First_steps/What_is_JavaScript
 translation_of: Learn/JavaScript/First_steps/What_is_JavaScript
 original_slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}
 
-<div>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</div>
+Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.
 
-<p class="summary">Добро пожаловать на курс MDN JavaScript для начинающих! В первой статье курса мы дадим базовое определение JavaScript, ответим на вопросы «Что такое JavaScript?» и «Что он делает?», узнаем как работает JavaScript и как добавить его на веб-страницу.</p>
+| Необходимые навыки: | Базовая компьютерная грамотность, знание основ HTML и CSS.                             |
+| ------------------- | -------------------------------------------------------------------------------------- |
+| Цели:               | Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность, знание основ HTML и CSS.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цели:</th>
-   <td>Знакомство с JavaScript и его возможностями, способами его подключения к веб-странице.</td>
-  </tr>
- </tbody>
-</table>
+## Определение высокого уровня
 
-<h2 id="A_high-level_definition">Определение высокого уровня</h2>
+JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых ([HTML](/ru/docs/Learn/HTML) и [CSS](/ru/docs/Learn/CSS)) мы детально раскрыли в других частях учебного пособия.
 
-<p>JavaScript это язык, который позволяет вам применять сложные вещи на web странице — каждый раз, когда на web странице происходит что-то большее, чем просто её статичное отображение — отображение периодически обновляемого контента, или интерактивных карт, или анимация 2D/3D графики, или прокрутка видео в проигрывателе, и т.д. — можете быть уверены, что скорее всего, не обошлось без JavaScript. Это третий слой слоёного пирога стандартных web технологий, два из которых (<a href="https://developer.mozilla.org/ru/docs/Learn/HTML">HTML</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/CSS">CSS</a>) мы детально раскрыли в других частях учебного пособия.</p>
+![](https://mdn.mozillademos.org/files/13502/cake.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13502/cake.png" style="display: block; margin: 0 auto;"></p>
+- {{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.
+- {{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.
+- {{glossary("JavaScript")}} язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.
 
-<ul>
- <li>{{glossary("HTML")}} - это язык разметки, который мы используем для визуального и смыслового структурирования нашего web контента, например, определяем параграфы, заголовки, таблицы данных, или вставляем изображения и видео на страницу.</li>
- <li>{{glossary("CSS")}} - это язык стилей с помощью которого мы придаём стиль отображения нашего HTML контента, например придаём цвет фону (background) и шрифту, придаём контенту многоколоночный вид.</li>
- <li>{{glossary("JavaScript")}} язык программирования, который позволяет вам создать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, впрочем, делает всё, что угодно. Окей, не все, что угодно, но всё равно, это удивительно, что можно достичь с помощью нескольких строк JavaScript-кода.</li>
-</ul>
+Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:
 
-<p>Три слоя прекрасно выстраиваются друг над другом. Возьмём простой текст для примера. Для придания структуры и смыслового назначения тексту, разметим его с помощью HTML:</p>
+```html
+<p>Player 1: Chris</p>
+```
 
-<pre class="brush: html">&lt;p&gt;Player 1: Chris&lt;/p&gt;</pre>
+![](https://mdn.mozillademos.org/files/13422/just-html.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13422/just-html.png" style="height: 28px; width: 108px;"></p>
+Затем мы добавим немного CSS, что бы это выглядело симпатичнее:
 
-<p>Затем мы добавим немного CSS, что бы это выглядело симпатичнее:</p>
-
-<pre class="brush: css">p {
+```css
+p {
   font-family: 'helvetica neue', helvetica, sans-serif;
   letter-spacing: 1px;
   text-transform: uppercase;
@@ -56,261 +46,260 @@ original_slug: Learn/JavaScript/Первые_шаги/What_is_JavaScript
   padding: 3px 10px;
   display: inline-block;
   cursor:pointer;
-}</pre>
+}
+```
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13424/html-and-css.png" style="height: 48px; width: 187px;"></p>
+![](https://mdn.mozillademos.org/files/13424/html-and-css.png)
 
-<p>И наконец, добавим немного JavaScript для придания динамического поведения:</p>
+И наконец, добавим немного JavaScript для придания динамического поведения:
 
-<pre>const para = document.querySelector('p');
+```
+const para = document.querySelector('p');
 
 para.addEventListener('click', updateName);
 
 function updateName() {
   let name = prompt('Enter a new name');
   para.textContent = 'Player 1: ' + name;
-}</pre>
+}
+```
 
-<p>{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}</p>
+{{ EmbedLiveSample('A_high-level_definition', '100%', 80) }}
 
-<p>Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html">исходный код</a>, или <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html">запустите вживую</a>)!</p>
+Попробуйте кликнуть по тексту чтобы увидеть, что произойдёт (Вы так же можете найти это демо на GitHub — смотрите [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/javascript-label.html), или [запустите вживую](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/javascript-label.html))!
 
-<p>JavaScript может делать намного больше — давайте выясним это более детально.</p>
+JavaScript может делать намного больше — давайте выясним это более детально.
 
-<h2 id="Так_что_же_он_действительно_может_делать">Так что же он <em>действительно</em> может делать?</h2>
+## Так что же он _действительно_ может делать?
 
-<p>Ядро языка JavaScript состоит из некоторого количества обычных возможностей, которые позволяют делать следующее:</p>
+Ядро языка JavaScript состоит из некоторого количества обычных возможностей, которые позволяют делать следующее:
 
-<ul>
- <li>Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной <code>name</code>.</li>
- <li>Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной <code>name</code> для получения полного текста, например: ''Player 1: Chris".</li>
- <li>Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.</li>
- <li>И многое другое!</li>
-</ul>
+- Хранить данные внутри переменных. В примере выше, мы, например, запрашивали ввод нового имени, которое нужно было ввести, затем сохраняли имя в переменной `name`.
+- Операции над фрагментами текстов (известными в программировании как "строки"). В примере выше мы брали строку "Player 1: " и присоединили её к значению переменной `name` для получения полного текста, например: ''Player 1: Chris".
+- Запускать код в соответствии с определёнными событиями происходящими на web странице. В нашем примере выше, мы использовали {{Event("click")}} событие, для определения момента, когда кнопка была кликнута, в соответствии с этим запускался код, который обновлял текст.
+- И многое другое!
 
-<p>Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.</p>
+Ещё более увлекательным является функциональность, созданная поверх основного языка JavaScript. Так называемые интерфейсы прикладного программирования (API) предоставляют вам дополнительные сверхспособности для использования в вашем коде JavaScript.
 
-<p>API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.</p>
+API - это готовые наборы блоков кода, которые позволяют разработчику реализовывать программы, которые в противном случае было бы трудно или невозможно реализовать. Они делают то же самое для программирования, что готовые комплекты мебели делают для домашнего строительства - гораздо проще брать готовые панели и скручивать их вместе, чтобы сделать книжную полку, чем самому разрабатывать дизайн, ходить в поисках правильной древесины, вырезать все панели необходимого размера и формы, найти подходящие винты, а затем собрать их вместе, чтобы сделать книжную полку.
 
-<p>Они обычно делятся на две категории.</p>
+Они обычно делятся на две категории.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13508/browser.png" style="display: block; height: 511px; margin: 0px auto; width: 815px;"></p>
+![](https://mdn.mozillademos.org/files/13508/browser.png)
 
-<p><strong>API-интерфейсы</strong> браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:    </p>
+**API-интерфейсы** браузера встроены в ваш веб-браузер и могут отображать данные из окружающего компьютерного окружения или делать полезные сложные вещи. Например:
 
-<ul>
- <li>API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.  </li>
- <li>API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.    </li>
- <li>API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии - см. Chrome Experiments и webglsamples.  </li>
- <li>Аудио и видео API, такие как {{ domxref("HTMLMediaElement")}} и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)</li>
-</ul>
+- API-интерфейс DOM (Document Object Model) позволяет вам манипулировать HTML и CSS, создавать, удалять и изменять HTML, динамически применять новые стили к вашей странице и т. д.. Каждый раз, когда вы видите всплывающее окно на странице или какое-то новое содержимое, Как мы видели выше в нашем простом демо), например, это DOM в действии.
+- API геолокации извлекает географическую информацию. Так Google Maps может найти ваше местоположение и нанести его на карту.
+- API Canvas и WebGL позволяют создавать анимированные 2D и 3D-графики. Люди делают некоторые удивительные вещи, используя эти веб-технологии - см. Chrome Experiments и webglsamples.
+- Аудио и видео API, такие как {{ domxref("HTMLMediaElement")}} и WebRTC, позволяют делать действительно интересные вещи с мультимедиа, такие как проигрывание аудио и видео прямо на веб-странице, или захватывать видео с веб-камеры и отображать его на Чужой компьютер (попробуйте наш простой демонстрационный снимок, чтобы понять идею)
 
-<div class="note">
-<p><strong>Примечание</strong>: Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей,  для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">кроссбраузерному тестированию</a>, когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).</p>
-</div>
+> **Примечание:** Большинство наших демо не будут корректно работать в старых браузерах — поэтому будет хорошей идеей, для запуска вашего кода установить один из современных браузеров , таких как Firefox, Chrome, Edge или Opera . Также понадобится более подробно рассмотреть раздел по [кроссбраузерному тестированию](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing), когда вы приблизитесь к разработке производственного кода (т.е реального кода, который будут использовать клиенты).
 
-<p>По умолчанию сторонние API-интерфейсы  не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера: </p>
+По умолчанию сторонние API-интерфейсы не встроены в браузер, и вам придётся захватывать их код и информацию из какого-либо места в Сети. Для примера:
 
-<ul>
- <li><a href="https://dev.twitter.com/overview/documentation">Twitter API</a> позволяет вам отображать ваши последние твиты на вашем веб-сайте.</li>
- <li><a href="https://developers.google.com/maps/">Google Maps API</a> позволяет вам встраивать пользовательские карты на ваш сайт и другой подобный функционал.</li>
-</ul>
+- [Twitter API](https://dev.twitter.com/overview/documentation) позволяет вам отображать ваши последние твиты на вашем веб-сайте.
+- [Google Maps API](https://developers.google.com/maps/) позволяет вам встраивать пользовательские карты на ваш сайт и другой подобный функционал.
 
-<div class="note">
-<p><strong>Примечание</strong>: Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.</p>
-</div>
+> **Примечание:** Эти API-и являются продвинутыми, и мы не будем их рассматривать в нашем курсе, но ссылки, данные выше, предлагают полную документацию, если вы заинтересованы в более подробной информации.
 
-<p>Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!</p>
+Доступно ещё больше! Но пока не заостряйте на этом внимание. Вы не сможете создать следующий Facebook, Google Maps или Instagram после 24 часов изучения JavaScript — сначала нужно изучить основы. И именно для этого вы здесь — давайте двигаться дальше!
 
-<h2 id="Что_JavaScript_делает_на_вашей_странице">Что JavaScript делает на вашей странице?</h2>
+## Что JavaScript делает на вашей странице?
 
-<p>В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.</p>
+В этой главе мы рассмотрим код и увидим что же действительно происходит, когда на странице запускается JavaScript.
 
-<p>Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье <a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work">Как работает CSS</a>). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).</p>
+Давайте составим краткий бриф, что же происходит когда мы загружаем страничку в браузере (первое упоминание в статье [Как работает CSS](/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_does_CSS_actually_work)). Когда вы загружаете страничку в браузере, вы запускаете ваш код (HTML, CSS и JavaScript) внутри исполняемой среды (внутри вкладки браузера). Это как будто фабрика берёт сырьё (некий код) и выдаёт продукцию (веб-страничку).
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13504/execution.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/13504/execution.png)
 
-<p>Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.</p>
+Код JavaScript выполняется JavaScript-движком браузера, после того как код HTML и CSS был обработан и сформирован в веб-страницу. Это гарантирует, что структура и стиль страницы уже сформированы к моменту запуска JavaScript.
 
-<p>Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.  </p>
+Это хорошо, так как часто использование JavaScript заключается в динамическом изменении HTML и CSS в целях обновления пользовательского интерфейса посредством Document Object Model API (как упоминалось выше). Если бы запуск JavaScript осуществлялся прежде загрузки HTML и CSS, то это привело бы к возникновению ошибок.
 
-<h3 id="Безопасность_браузера">Безопасность браузера</h3>
+### Безопасность браузера
 
-<p>Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются "средами исполнения") — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.</p>
+Каждая вкладка браузера представляет собой отдельную коробку для запуска кода (в техническом языке, эти коробки называются "средами исполнения") — это значит, что в большинстве случаев код на каждой вкладке запускается полностью отдельно, а код одной вкладки не может напрямую влиять на код другой вкладки или на другом веб-сайте. Это хорошая мера безопасности — если бы это было иначе, пираты могли написать код, который крал информацию с других сайтов или делал другие плохие вещи.
 
-<div class="note">
-<p><strong>Примечание</strong>: Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.</p>
-</div>
+> **Примечание:** Есть способы отправлять код и данные между разными веб-сайтами/вкладками безопасным способом, но это продвинутые методы, которые мы не будем рассматривать в рамках этого курса.
 
-<h3 id="Последовательность_выполнения_JavaScript">Последовательность выполнения JavaScript</h3>
+### Последовательность выполнения JavaScript
 
-<p>Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:</p>
+Обычно, когда браузер сталкивается с блоком JavaScript, он запускает его по порядку, сверху вниз. Это значит, что вам нужно осторожно выбирать порядок. Например, вернёмся к блоку JavaScript, который мы видели в первом примере:
 
-<pre>const para = document.querySelector('p');
+```
+const para = document.querySelector('p');
 
 para.addEventListener('click', updateName);
 
 function updateName() {
   let name = prompt('Enter a new name');
   para.textContent = 'Player 1: ' + name;
-}</pre>
+}
+```
 
-<p>Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода <code>updateName()</code> (строки 5–8). Блок кода <code>updateName()</code> (эти типы многократно используемых блоков кода называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.</p>
+Здесь мы выбираем абзац текста (строка 1), а затем добавляем к нему обнаружение событий (строка 3), чтобы при нажатии на этот абзац выполнялся блок кода `updateName()` (строки 5–8). Блок кода `updateName()` (эти типы многократно используемых блоков кода называются "функции") запрашивает у пользователя новое имя, а затем вставляет это имя в абзац для обновления отображения.
 
-<p>Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — <code>TypeError: para is undefined</code>. Это значит, что объект <code>para</code> ещё не существует и вы не можете добавить к нему обнаружение событий.</p>
+Если вы поменяете порядок первых двух строк кода, он перестанет работать — вместо этого вы получите ошибку возвращаемую в консоль браузера — `TypeError: para is undefined`. Это значит, что объект `para` ещё не существует и вы не можете добавить к нему обнаружение событий.
 
-<div class="note">
-<p><strong>Примечание</strong>: Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.</p>
-</div>
+> **Примечание:** Это очень частая ошибка — вы должны быть осторожны, чтобы объекты, на которые ссылается ваш код, существовали до того, как вы попытаетесь что-то с ними сделать.
 
-<h3 id="Интерпретируемый_против_компилируемого_кода">Интерпретируемый против компилируемого кода</h3>
+### Интерпретируемый против компилируемого кода
 
-<p>В контексте программирования, вы можете услышать термины <strong>интерпретация</strong> и <strong>компиляция</strong>. JavaScript является интерпретируемым языком — код запускается сверху вниз и результат запуска немедленно возвращается. Вам не нужно преобразовывать код в другую форму, перед запуском в браузере.</p>
+В контексте программирования, вы можете услышать термины **интерпретация** и **компиляция**. JavaScript является интерпретируемым языком — код запускается сверху вниз и результат запуска немедленно возвращается. Вам не нужно преобразовывать код в другую форму, перед запуском в браузере.
 
-<p>С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.</p>
+С другой стороны, ккомпилируемые языки преобразуются (компилируются) в другую форму, прежде чем они будут запущены компьютером. Например, C / C ++ компилируются в язык ассемблера, который затем запускается компьютером.
 
-<p>Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.</p>
+Оба подхода имеют разные преимущества, которые на данном этапе мы обсуждать не будем.
 
-<h3 id="Серверный_против_клиентского_кода">Серверный против клиентского кода</h3>
+### Серверный против клиентского кода
 
-<p>Вы так же можете услышать термины <strong>серверный</strong> и <strong>клиентский</strong> код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о <strong>клиентском JavaScript</strong>.</p>
+Вы так же можете услышать термины **серверный** и **клиентский** код, особенно в контексте веб-разработки. Клиентский код — это код, который запускается на компьютере пользователя. При просмотре веб-страницы, клиентский код загружается, а затем запускается и отображается браузером. В этом модуле JavaScript мы явно говорим о **клиентском JavaScript**.
 
-<p>С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе <a href="/en-US/docs/Learn/Server-side">Dynamic Websites – Server-side programming</a>.</p>
+С другой стороны, серверный код запускается на сервере, затем его результаты загружаются и отображаются в браузере. Примеры популярных серверных веб-языков включают PHP, Python, Ruby и ASP.NET. И JavaScript! JavaScript так же может использоваться, как серверный язык, например в популярной среде Node.js — вы можете больше узнать о серверном JavaScript в нашем разделе [Dynamic Websites – Server-side programming](/ru/docs/Learn/Server-side).
 
-<p>Слово <strong>динамический</strong> используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.</p>
+Слово **динамический** используется для описания и клиентского JavaScript, и серверного языка — это относится к возможности обновления отображения веб-страницы/приложения, чтобы показывать разные вещи в разных обстоятельствах, генерируя новый контент по мере необходимости. Серверный код динамически генерирует новый контент на сервере, например достаёт данные из базы данных, тогда как клиентский JavaScript динамически генерирует новое содержание внутри браузера на клиенте, например создаёт новую HTML таблицу, вставляя в неё данные полученные с сервера, затем отображает таблицу на веб-странице, которую видит пользователь. В этих двух контекстах значение немного отличается, но связано, и обычно оба подхода (серверный и клиентский) работают вместе.
 
-<p>Веб-страница без динамического обновления контента называется <strong>статической</strong> — она просто показывает один и тот же контент все время.</p>
+Веб-страница без динамического обновления контента называется **статической** — она просто показывает один и тот же контент все время.
 
-<h2 id="Как_добавить_JavaScript_на_вашу_страницу">Как добавить JavaScript на вашу страницу?</h2>
+## Как добавить JavaScript на вашу страницу?
 
-<p>JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.</p>
+JavaScript применяется к вашей HTML странице точно так же, как CSS. И если CSS использует элементы {{htmlelement("link")}} для внешних стилей и {{htmlelement("style")}} для встроенных в HTML, то для JavaScript нужен только один друг в HTML мире — элемент {{htmlelement("script")}}. Давайте узнаем, как это работает.
 
-<h3 id="Внутренний_JavaScript">Внутренний JavaScript</h3>
+### Внутренний JavaScript
 
-<ol>
- <li>Сначала, сделайте локальную копию нашего файла-примера <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html">apply-javascript.html</a>. Сохраните его в удобное для вас место.</li>
- <li>Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.</li>
- <li>Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом <code>&lt;/head&gt;</code>:
-  <pre class="brush: html">&lt;script&gt;
+1.  Сначала, сделайте локальную копию нашего файла-примера [apply-javascript.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript.html). Сохраните его в удобное для вас место.
+2.  Откройте этот файл в вашем браузере и в вашем текстовом редакторе. Вы увидите, что HTML создаёт простую веб-страницу с активной кнопкой.
+3.  Затем, перейдите в текстовый редактор и добавьте следующие строки перед закрывающим тегом `</head>`:
 
-  // здесь будет JavaScript
+    ```html
+    <script>
 
-&lt;/script&gt;</pre>
- </li>
- <li>Теперь добавим JavaScript внутрь элемента {{htmlelement("script")}}, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript":
-  <pre>document.addEventListener("DOMContentLoaded", function() {
-  function createParagraph() {
-    let para = document.createElement('p');
-    para.textContent = 'You clicked the button!';
-    document.body.appendChild(para);
-  }
+      // здесь будет JavaScript
 
-  const buttons = document.querySelectorAll('button');
+    </script>
+    ```
 
-  for(let i = 0; i &lt; buttons.length ; i++) {
-    buttons[i].addEventListener('click', createParagraph);
-  }
-});</pre>
- </li>
- <li>Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.</li>
-</ol>
+4.  Теперь добавим JavaScript внутрь элемента {{htmlelement("script")}}, чтобы сделать страницу более интересной — добавьте следующий код ниже строки "// здесь будет JavaScript":
 
-<div class="note">
-<p><strong>Примечание</strong>: Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как <code>.html</code> файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга <code>&lt;/body&gt;</code>? Ввели ли вы JavaScript именно так, как показано? <strong>JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.</strong></p>
-</div>
+    ```
+    document.addEventListener("DOMContentLoaded", function() {
+      function createParagraph() {
+        let para = document.createElement('p');
+        para.textContent = 'You clicked the button!';
+        document.body.appendChild(para);
+      }
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете увидеть эту версию на GitHub-е как <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">apply-javascript-internal.html</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html">посмотреть вживую</a>).</p>
-</div>
+      const buttons = document.querySelectorAll('button');
 
-<h3 id="Внешний_JavaScript">Внешний JavaScript</h3>
+      for(let i = 0; i < buttons.length ; i++) {
+        buttons[i].addEventListener('click', createParagraph);
+      }
+    });
+    ```
 
-<p>Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.</p>
+5.  Сохраните файл и обновите страницу в браузере — теперь вы должны увидеть, что при нажатии на кнопку создаётся новый абзац и помещается ниже.
 
-<ol>
- <li>Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его <code>script.js</code> — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.</li>
- <li>Замените ваш текущий элемент {{htmlelement("script")}} на следующий:
-  <pre class="brush: html">&lt;script src="script.js" defer&gt;&lt;/script&gt;</pre>
- </li>
- <li>Внутри <code>script.js</code> добавьте следующий скрипт:
-  <pre>function createParagraph() {
-  let para = document.createElement('p');
-  para.textContent = 'You clicked the button!';
-  document.body.appendChild(para);
-}
+> **Примечание:** Если ваш пример не работает, пройдите ещё раз все шаги и проверьте, сделали ли вы все правильно. Сохранили ли вы вашу локальную копию начального кода, как `.html` файл? Добавили ли ваш {{htmlelement("script")}} элемент после тэга `</body>`? Ввели ли вы JavaScript именно так, как показано? **JavaScript регистрозависимый, и очень привередливый. Поэтому вам нужно вводить синтаксис именно так, как показано, в противном случае оно может не работать.**
 
-const buttons = document.querySelectorAll('button');
+> **Примечание:** вы можете увидеть эту версию на GitHub-е как [apply-javascript-internal.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html) ([посмотреть вживую](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-internal.html)).
 
-for(let i = 0; i &lt; buttons.length ; i++) {
-  buttons[i].addEventListener('click', createParagraph);
-}</pre>
- </li>
- <li>Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.</li>
-</ol>
+### Внешний JavaScript
+
+Это отлично работает, но что если мы хотим поместить наш JavaScript в отдельный файл? Давайте сейчас разберёмся с этим.
+
+1.  Сначала, создайте новый файл в той же папке, что и ваш файл-пример HTML. Назовите его `script.js` — убедитесь, что у имени файла расширение .js, так как оно распознается, как JavaScript.
+2.  Замените ваш текущий элемент {{htmlelement("script")}} на следующий:
+
+    ```html
+    <script src="script.js" defer></script>
+    ```
+
+3.  Внутри `script.js` добавьте следующий скрипт:
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете увидеть эту версию на GitHub-е как <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">apply-javascript-external.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js">script.js</a> (<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html">посмотреть вживую</a>).</p>
-</div>
+    ```
+    function createParagraph() {
+      let para = document.createElement('p');
+      para.textContent = 'You clicked the button!';
+      document.body.appendChild(para);
+    }
 
-<h3 id="Инлайновые_JavaScript_обработчики">Инлайновые JavaScript обработчики</h3>
+    const buttons = document.querySelectorAll('button');
 
-<p>Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:</p>
+    for(let i = 0; i < buttons.length ; i++) {
+      buttons[i].addEventListener('click', createParagraph);
+    }
+    ```
 
-<div id="Inline_JavaScript_handlers">
-<pre class="brush: js example-bad">function createParagraph() {
+4.  Сохраните и обновите страницу в браузере, и вы увидите то же самое! Все работает точно так же, но теперь у нас есть JavaScript во внешнем файле. Это, как правило, хорошо с точки зрения организации кода и его повторного использования в нескольких HTML файлах. Кроме того, HTML легче читать без огромных кусков кода, который скапливается в нем.
+
+> **Примечание:** вы можете увидеть эту версию на GitHub-е как [apply-javascript-external.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html) и [script.js](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/what-is-js/script.js) ([посмотреть вживую](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/what-is-js/apply-javascript-external.html)).
+
+### Инлайновые JavaScript обработчики
+
+Обратите внимание, что иногда можно столкнуться с частями JavaScript-кода, который живёт внутри HTML. Это может выглядеть примерно так:
+
+```js example-bad
+function createParagraph() {
   var para = document.createElement('p');
   para.textContent = 'You clicked the button!';
   document.body.appendChild(para);
-}</pre>
+}
+```
 
-<pre class="brush: html example-bad">&lt;button onclick="createParagraph()"&gt;Click me!&lt;/button&gt;</pre>
-</div>
+```html example-bad
+<button onclick="createParagraph()">Click me!</button>
+```
 
-<p>Вы можете попробовать эту версию в нашей демонстрации ниже:</p>
+Вы можете попробовать эту версию в нашей демонстрации ниже:
 
-<p>{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}</p>
+{{ EmbedLiveSample('Inline_JavaScript_handlers', '100%', 150) }}
 
-<p>Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент {{htmlelement("button")}} содержит встроенный обработчик <code>onclick</code>, который запускает функцию при нажатии кнопки.</p>
+Эта демонстрация имеет те же функциональные возможности, что и в предыдущих двух разделах, за исключением того, что элемент {{htmlelement("button")}} содержит встроенный обработчик `onclick`, который запускает функцию при нажатии кнопки.
 
-<p><strong>Но пожалуйста, не делайте этого.</strong> Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут <code>onclick="createParagraph()"</code> к каждой кнопке, к которой вы хотите подключить JavaScript.</p>
+**Но пожалуйста, не делайте этого.** Это плохая практика — загрязнять ваш HTML кодом JavaScript, и она не эффективна — вам нужно будет добавить атрибут `onclick="createParagraph()"` к каждой кнопке, к которой вы хотите подключить JavaScript.
 
-<p>Использование чистой JavaScript конструкции, позволит вам выбрать все кнопки, используя одну команду. Код, который можно использовали для этой цели, выглядит следующим образом:</p>
+Использование чистой JavaScript конструкции, позволит вам выбрать все кнопки, используя одну команду. Код, который можно использовали для этой цели, выглядит следующим образом:
 
-<pre>const buttons = document.querySelectorAll('button');
+```
+const buttons = document.querySelectorAll('button');
 
-for(let i = 0; i &lt; buttons.length ; i++) {
+for(let i = 0; i < buttons.length ; i++) {
   buttons[i].addEventListener('click', createParagraph);
-}</pre>
+}
+```
+
+Это может выглядеть немного длиннее, чем атрибут `onclick`, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.
 
-<p>Это может выглядеть немного длиннее, чем атрибут <code>onclick</code>, но это будет работать для всех кнопок, независимо от того, сколько их на странице, и сколько их удалят или добавят. JavaScript менять не нужно.</p>
+> **Примечание:** Попробуйте отредактировать вашу версию `apply-javascript.html` и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?
 
-<div class="note">
-<p><strong>Примечание</strong>: Попробуйте отредактировать вашу версию <code>apply-javascript.html</code> и добавить ещё несколько кнопок в файл. После перезагрузки вы должны увидеть, что все кнопки создают параграф, если кликнуть на них. Классно, да?</p>
-</div>
+### Стратегии загрузки скриптов
 
-<h3 id="Стратегии_загрузки_скриптов">Стратегии загрузки скриптов</h3>
+Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.
 
-<p>Существует ряд проблем, связанных с загрузкой скриптов в нужное время. Всё не так просто, как кажется! Распространённой проблемой является то, что весь HTML-код на странице загружается в том порядке, в котором отображается. Если вы используете JavaScript для манипуляции элементами на странице (или, точнее, в DOM – Объектной Модели Документа), ваш код не будет работать, если JavaScript-код загрузится и распознается раньше HTML-кода, с которым вы пытаетесь взаимодействовать.</p>
+## Комментарии
 
-<h2 id="Комментарии">Комментарии</h2>
+Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:
 
-<p>Так же, как и в HTML и CSS, возможно писать комментарии в вашем JavaScript-коде, что будет проигнорировано браузером, и существует только для того, чтобы давать подсказки вашим друзьям-разработчикам о том, как работает код (и лично вам, если вы вернётесь к коду спустя 6 месяцев и не сможете вспомнить, что вы делали). Комментарии очень полезны, и вы должны часто их использовать, особенно для больших приложений. Вот два типа комментариев:</p>
+- Однострочный комментарий пишется после двойного слеша (//), например:
 
-<ul>
- <li>Однострочный комментарий пишется после двойного слеша (//), например:
-  <pre class="brush: js">// Я комментарий</pre>
- </li>
- <li>Комментарий на нескольких строках пишется между строками /* и */, например:
-  <pre class="brush: js">/*
-  Я тоже
-  комментарий
-*/</pre>
- </li>
-</ul>
+  ```js
+  // Я комментарий
+  ```
 
-<p>Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:</p>
+- Комментарий на нескольких строках пишется между строками /\* и \*/, например:
 
-<pre class="brush: js">// Функция: создаёт новый параграф и добавляет его вниз тела HTML.
+  ```js
+  /*
+    Я тоже
+    комментарий
+  */
+  ```
+
+Так, например, мы можем описать наш последний демо-пример JavaScript подобными комментариями:
+
+```js
+// Функция: создаёт новый параграф и добавляет его вниз тела HTML.
 
 function createParagraph() {
   var para = document.createElement('p');
@@ -327,14 +316,15 @@ function createParagraph() {
 
 var buttons = document.querySelectorAll('button');
 
-for (var i = 0; i &lt; buttons.length ; i++) {
+for (var i = 0; i < buttons.length ; i++) {
   buttons[i].addEventListener('click', createParagraph);
-}</pre>
+}
+```
 
-<h2 id="Выводы">Выводы</h2>
+## Выводы
 
-<p>Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.</p>
+Поздравляем, вы сделали ваш первый шаг в мир JavaScript. Мы начали всего-лишь с теории, чтобы вы привыкли к тому, что вы будете использовать JavaScript, и что именно вы можете делать с его помощью. На этом пути вы увидели несколько примеров кода и выучили, как JavaScript вписывается в остальной код на вашем сайте среди всего прочего.
 
-<p>JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash">погрузимся непосредственно в практику</a>, подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.</p>
+JavaScript может показаться немного пугающим в данным момент, но не переживайте - в этом курсе мы проведём вас сквозь него простыми шагами, которые имеют смысл, забегая наперёд. В следующей главе мы [погрузимся непосредственно в практику](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8/A_first_splash), подталкивая вас погрузиться в код и сделать ваши собственные примеры JavaScript.
 
-<p>{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}</p>
+{{NextMenu("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
index 26ccc2fcaac046..1707afb6bccba6 100644
--- a/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
+++ b/files/ru/learn/javascript/first_steps/what_went_wrong/index.md
@@ -4,247 +4,239 @@ slug: Learn/JavaScript/First_steps/What_went_wrong
 translation_of: Learn/JavaScript/First_steps/What_went_wrong
 original_slug: Learn/JavaScript/Первые_шаги/Что_пошло_не_так
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}</div>
-
-<p class="summary">Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">
-    <p>Нужно:</p>
-   </th>
-   <td>базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель</th>
-   <td>получить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Типы_ошибок">Типы ошибок</h2>
-
-<p>Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:</p>
-
-<ul>
- <li>
-  <p><strong>Синтаксические ошибки:</strong> Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!</p>
- </li>
- <li><strong>Логические ошибки:</strong> Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.</li>
-</ul>
-
-<p>Ладно, все <em>не так</em> просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.</p>
-
-<h2 id="Ошибочный_пример">Ошибочный пример</h2>
-
-<p>Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">number-game-errors.html</a> (см. здесь <a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html">как это работает</a>).</p>
-
-<ol>
- <li>Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.</li>
- <li>Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание:</strong> Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.</p>
-</div>
-
-<p>На этом этапе давайте рассмотрим консоль разработчика, чтобы увидеть, можем ли мы видеть какие-либо синтаксические ошибки, а затем попытаемся их исправить. Вы узнаете, как это сделать, ниже.</p>
-
-<h2 id="Исправление_синтаксических_ошибок">Исправление синтаксических ошибок</h2>
-
-<p>Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">консоль разработчика JavaScript</a> (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.</p>
-
-<ol>
- <li>Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках: <img alt="" src="https://mdn.mozillademos.org/files/13496/not-a-function.png" style="display: block; margin: 0 auto;"></li>
- <li>Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
-  <ul>
-   <li>Красный «x» означает, что это ошибка.</li>
-   <li>Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»</li>
-   <li>Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.</li>
-   <li>Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.</li>
-   <li>Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.</li>
-  </ul>
- </li>
- <li>Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:
-  <pre class="brush: js">guessSubmit.addeventListener('click', checkGuess);</pre>
- </li>
- <li>В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn <em>имя-функции</em>» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>.</li>
- <li>Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.</li>
-</ol>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}
 
-<div class="note">
-<p><strong>Примечание: </strong>См. наш <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Not_a_function">TypeError: «x»</a> не является справочной страницей функций для получения дополнительной информации об этой ошибке.</p>
-</div>
+Когда вы создали игру «Угадай номер» в предыдущей статье, вы, возможно, обнаружили, что она не работает. Не бойтесь — эта статья призвана избавить вас от разрыва волос над такими проблемами, предоставив вам несколько простых советов о том, как найти и исправить ошибки в программах JavaScript.
 
-<h3 id="Синтаксические_ошибки_второй_раунд">Синтаксические ошибки: второй раунд</h3>
+| Нужно: | базовая компьютерная грамотность, базовое понимание HTML и CSS, понимание того, что такое JavaScript.              |
+| ------ | ------------------------------------------------------------------------------------------------------------------ |
+| Цель   | получить способность и уверенность в том, чтобы приступить к исправлению простых проблем в вашем собственном коде. |
 
-<div class="note">
-<p><strong>Примечание</strong>: <code><a href="/en-US/docs/Web/API/Console/log">console.log()</a></code> это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение <code>lowOrHi</code> в консоли, как только мы попытаемся установить его в строке 48.</p>
-</div>
+## Типы ошибок
 
-<ol>
- <li>Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.</li>
- <li>Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку!  <img alt="" src="https://mdn.mozillademos.org/files/13498/variable-is-null.png" style="display: block; margin: 0 auto;"></li>
- <li>На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78.
-  <div class="note"><strong>Примечание</strong>: <code><a href="/en-US/docs/Glossary/Null">Null</a></code> — это специальное значение, которое означает "ничего" или "не значение". Поэтому <code>lowOrHi</code> был объявлен и инициализирован без значения — у него нет типа или значения.</div>
+Когда вы делаете что-то не так в коде, есть два основных типа ошибок, с которыми вы столкнётесь:
 
-  <div class="note"><strong>Примечание</strong>: Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри <code>checkGuess() { ... }</code> block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция <code>checkGuess()</code> не была запущена строкой 86.</div>
- </li>
- <li>Посмотрите на строку 78, и вы увидите следующий код:
-  <pre class="brush: js">lowOrHi.textContent = «Последнее предположение было слишком высоко!»;</pre>
- </li>
- <li>Эта строка пытается установить свойство <code>textContent</code> переменной <code>lowOrHi</code> как текстовую строку, но это не работает, поскольку <code>lowOrHi</code> не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры <code>lowOrHi</code> в коде. Самый ранний экземпляр, который вы найдёте в JavaScript, находится в строке 48:
-  <pre class="brush: js">const lowOrHi = document.querySelector('lowOrHi');</pre>
- </li>
- <li>На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение  <code>null</code> после выполнения этой строки. Добавьте следующий код в строку 49:
-  <pre class="brush: js">console.log(lowOrHi);
-</pre>
- </li>
- <li>Сохраните и обновите, и вы должны увидеть результат работы <code>console.log()</code> в консоли браузера. <img alt="" src="https://mdn.mozillademos.org/files/13494/console-log-output.png" style="display: block; margin: 0 auto;"> Разумеется, значение <code>lowOrHi</code> на данный момент равно <code>null</code>, поэтому определённо существует проблема в строке 48.</li>
- <li>Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод <code><a href="/en-US/docs/Web/API/Document/querySelector">document.querySelector()</a></code> для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент <code>&lt;p&gt;</code>:
-  <pre class="brush: js">&lt;p class="lowOrHi"&gt;&lt;/p&gt;
-</pre>
- </li>
- <li>Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод <code>querySelector()</code> в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить <code>lowOrHi</code> на <code>.lowOrHi</code> в строке 48.</li>
- <li>Повторите попытку сохранения и обновления, и ваш вызов <code>console.log()</code> должен вернуть элемент <code>&lt;p&gt;</code>, который мы хотим. Уф! Ещё одна ошибка исправлена! Вы можете удалить строку с  <code>console.log()</code> сейчас, или оставить для дальнейшего применения — выбирайте сами.</li>
-</ol>
+- **Синтаксические ошибки:** Это орфографические ошибки в коде, которые фактически заставляют программу вообще не запускаться, или перестать работать на полпути — вам также будут предоставлены некоторые сообщения об ошибках. Обычно они подходят для исправления, если вы знакомы с правильными инструментами и знаете, что означают сообщения об ошибках!
+- **Логические ошибки:** Это ошибки, когда синтаксис действительно правильный, но код не тот, каким вы его предполагали, что означает, что программа работает успешно, но даёт неверные результаты. Их часто сложнее находить, чем синтаксические ошибки, так как обычно не возникает сообщение об ошибке, которое направляет вас к источнику ошибки.
 
-<div class="note">
-<p><strong>Примечание</strong>: Загляните на справочную страницу <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_type">TypeError: "x" is (not) "y"</a>, чтобы узнать больше об этой ошибке.</p>
-</div>
+Ладно, все _не так_ просто — есть и другие отличия, которые вы поймёте, пока будете изучать язык JavaScript глубже. Однако вышеуказанной классификации достаточно на раннем этапе вашей карьеры. Мы рассмотрим оба эти типа в дальнейшем.
 
-<h3 id="Синтаксические_ошибки_третий_раунд">Синтаксические ошибки: третий раунд</h3>
+## Ошибочный пример
 
-<ol>
- <li>Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.</li>
- <li>На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.</li>
- <li>Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить <code>addeventListener</code> на <code>addEventListener</code>.</li>
-</ol>
+Чтобы начать работу, давайте вернёмся к нашей игре с угадыванием чисел — за исключением того, что мы будем изучать версию с некоторыми преднамеренными ошибками. Перейдите в Github и сделайте себе локальную копию [number-game-errors.html](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html) (см. здесь [как это работает](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/troubleshooting/number-game-errors.html)).
 
-<h2 id="Логическая_ошибка">Логическая ошибка</h2>
+1.  Чтобы начать работу, откройте локальную копию внутри вашего любимого текстового редактора и вашего браузера.
+2.  Попробуйте сыграть в игру — вы заметите, что когда вы нажимаете кнопку «Submit guess», она не работает!
 
-<p>На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!</p>
+> **Примечание:** Возможно, у вас может быть собственная версия игрового примера, которая не работает, которую вы можете исправить! Мы по-прежнему хотели бы, чтобы вы работали над статьёй с нашей версией, чтобы вы могли изучать методы, которые мы здесь преподаём. Затем вы можете вернуться и попытаться исправить ваш пример.
 
-<p>Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.</p>
+На этом этапе давайте рассмотрим консоль разработчика, чтобы увидеть, можем ли мы видеть какие-либо синтаксические ошибки, а затем попытаемся их исправить. Вы узнаете, как это сделать, ниже.
 
-<ol>
- <li>Найдём переменную <code>randomNumber</code> , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:
+## Исправление синтаксических ошибок
 
-  <pre class="brush: js">let randomNumber = Math.floor(Math.random()) + 1;
-</pre>
-  И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры:
+Раньше в курсе мы заставили вас набрать некоторые простые команды JavaScript в [консоль разработчика JavaScript](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools) (если вы не можете вспомнить, как открыть это в своём браузере, следуйте предыдущей ссылке, чтобы узнать, как это сделать). Что ещё более полезно, так это то, что консоль предоставляет вам сообщения об ошибках всякий раз, когда существует синтаксическая ошибка внутри JavaScript, которая подаётся в механизм JavaScript браузера. Теперь пойдём на охоту.
 
-  <pre class="brush: js">randomNumber = Math.floor(Math.random()) + 1;
-</pre>
- </li>
- <li>Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу <code>console.log()</code> снова — вставьте её ниже строк с ошибками:
-  <pre class="brush: js">console.log(randomNumber);
-</pre>
- </li>
- <li>Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что <code>randomNumber</code> равна 1 в каждой точке, где вы её записали после строк с ошибками.</li>
-</ol>
+1.  Перейдите на вкладку, в которой у вас есть number-game-errors.html, и откройте консоль JavaScript. Вы должны увидеть сообщение об ошибке в следующих строках: ![](https://mdn.mozillademos.org/files/13496/not-a-function.png)
+2.  Это довольно простая ошибка для отслеживания, и браузер даёт вам несколько полезных бит информации, которые помогут вам (скриншот выше от Firefox, но другие браузеры предоставляют аналогичную информацию). Слева направо, у нас есть:
 
-<h3 id="Работаем_через_логику">Работаем через логику</h3>
+    - Красный «x» означает, что это ошибка.
+    - Сообщение об ошибке, указывающее, что пошло не так: «TypeError: guessSubmit.addeventListener не является функцией»
+    - Ссылка «Узнать больше», которая ссылается на страницу MDN, которая объясняет, что эта ошибка означает в огромных количествах деталей.
+    - Имя файла JavaScript, который ссылается на вкладку «Отладчик» консоли разработчика. Если вы перейдёте по этой ссылке, вы увидите точную строку, где подсвечивается ошибка.
+    - Номер строки, в которой находится ошибка, и номер символа в этой строке, где первая ошибка. В этом случае у нас есть строка 86, символ номер 3.
 
-<p>Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random">Math.random()</a></code>, который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.</p>
+3.  Если мы посмотрим на строку 86 в нашем редакторе кода, мы найдём эту строку:
 
-<pre class="brush: js">Math.random()</pre>
+    ```js
+    guessSubmit.addeventListener('click', checkGuess);
+    ```
 
-<p>Дальше, мы передаём результат вызова <code>Math.random()</code> через <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor">Math.floor()</a></code>, который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:</p>
+4.  В сообщении об ошибке говорится, что «guessSubmit.addeventListener не является функцией», поэтому мы, вероятно, где-то ошиблись. Если вы не уверены в правильности написания синтаксиса, часто бывает полезно найти функцию на MDN. Лучший способ сделать это в настоящее время — поиск «mdn _имя-функции_» в вашей любимой поисковой системе. Вот ссылка, которая поможет сократить вам некоторое время в данном случае: [`addEventListener()`](/en-US/docs/Web/API/EventTarget/addEventListener).
+5.  Итак, глядя на эту страницу, кажется, что ошибка в том, что мы неправильно назвали имя функции! Помните, что JavaScript чувствителен к регистру, поэтому любые незначительные отличия в орфографии или регистре текста могут вызвать ошибку. Изменение этого параметра в addEventListener должно быть исправлено. Сделайте это сейчас.
 
-<pre>Math.floor(Math.random()) + 1;</pre>
+> **Примечание:**См. наш [TypeError: «x»](/ru/docs/Web/JavaScript/Reference/Errors/Not_a_function) не является справочной страницей функций для получения дополнительной информации об этой ошибке.
 
-<p>Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1.  Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:</p>
+### Синтаксические ошибки: второй раунд
 
-<pre class="brush: js">Math.floor(Math.random() * 100);</pre>
+> **Примечание:** [`console.log()`](/en-US/docs/Web/API/Console/log) это часто используемая функция отладки, которая выводит значение в консоль. Поэтому она будет выводить значение `lowOrHi` в консоли, как только мы попытаемся установить его в строке 48.
 
-<p>поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:</p>
+1.  Сохраните и обновите страницу, и вы увидите, что ошибка исчезла.
+2.  Теперь, если вы попробуете ввести значение и нажать кнопку "Submit guess", вы увидите ... другую ошибку! ![](https://mdn.mozillademos.org/files/13498/variable-is-null.png)
+3.  На этот раз сообщается об ошибке: "TypeError: lowOrHi is null", в строке 78.
 
-<pre class="brush: js">Math.floor(Math.random() * 100) + 1;</pre>
+    > **Примечание:** [`Null`](/en-US/docs/Glossary/Null) — это специальное значение, которое означает "ничего" или "не значение". Поэтому `lowOrHi` был объявлен и инициализирован без значения — у него нет типа или значения.
 
-<p>А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!</p>
+    > **Примечание:** Эта ошибка не появилась, как только страница была загружена, потому что эта ошибка произошла внутри функции (внутри `checkGuess() { ... }` block). Об этом вы узнаете более подробно в нашей более поздней статье о функциях, код внутри функций выполняется в отдельной области для кода внешних функций. В этом случае код не был запущен, и ошибка не была брошена до тех пор, пока функция `checkGuess()` не была запущена строкой 86.
 
-<h2 id="Другие_распространённые_ошибки">Другие распространённые ошибки</h2>
+4.  Посмотрите на строку 78, и вы увидите следующий код:
 
-<p>Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.</p>
+    ```js
+    lowOrHi.textContent = «Последнее предположение было слишком высоко!»;
+    ```
 
-<h3 id="SyntaxError_отсутствует_перед_постановкой">SyntaxError: отсутствует ; перед постановкой</h3>
+5.  Эта строка пытается установить свойство `textContent` переменной `lowOrHi` как текстовую строку, но это не работает, поскольку `lowOrHi` не содержит того, что должна. Давайте посмотрим, почему так происходит — попробуйте найти другие экземпляры `lowOrHi` в коде. Самый ранний экземпляр, который вы найдёте в JavaScript, находится в строке 48:
 
-<p>Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции <code>checkGuess()</code> :</p>
+    ```js
+    const lowOrHi = document.querySelector('lowOrHi');
+    ```
 
-<pre class="brush: js">var userGuess = Number(guessField.value);</pre>
+6.  На этом этапе мы пытаемся заставить переменную содержать ссылку на элемент документа HTML. Давайте проверим, является ли значение `null` после выполнения этой строки. Добавьте следующий код в строку 49:
 
-<p>на эту</p>
+    ```js
+    console.log(lowOrHi);
+    ```
 
-<pre class="brush: js">var userGuess === Number(guessField.value);</pre>
+7.  Сохраните и обновите, и вы должны увидеть результат работы `console.log()` в консоли браузера. ![](https://mdn.mozillademos.org/files/13494/console-log-output.png) Разумеется, значение `lowOrHi` на данный момент равно `null`, поэтому определённо существует проблема в строке 48.
+8.  Давайте подумаем о том, что может быть проблемой. Строка 48 использует метод [`document.querySelector()`](/en-US/docs/Web/API/Document/querySelector) для получения ссылки на элемент, выбирая его с помощью селектора CSS. Посмотрев далее наш файл, мы можем найти обсуждаемый элемент `<p>`:
 
-<p>Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (<code>=</code>), который присваивает значение переменной — с оператором сравнения (<code>===</code>), который строго сравнивает операнды, и возвращает <code>true</code>/<code>false</code> .</p>
+    ```js
+    <p class="lowOrHi"></p>
+    ```
 
-<div class="note">
-<p><strong>Примечание</strong>: Загляните на справочную страницу <a href="/ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement">Синтаксическая ошибка: пропущен символ ; до объявления инструкции</a> для получения дополнительной информации об этой ошибке.</p>
-</div>
+9.  Поэтому нам нужен селектор классов, который начинается с точки (.), но селектор, передаваемый в метод `querySelector()` в строке 48, не имеет точки. Возможно, это и есть проблема! Попробуйте изменить `lowOrHi` на `.lowOrHi` в строке 48.
+10. Повторите попытку сохранения и обновления, и ваш вызов `console.log()` должен вернуть элемент `<p>`, который мы хотим. Уф! Ещё одна ошибка исправлена! Вы можете удалить строку с `console.log()` сейчас, или оставить для дальнейшего применения — выбирайте сами.
 
-<h3 id="В_программе_всегда_говорится_что_вы_выиграли_независимо_от_того_что_вы_ввели">В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели</h3>
+> **Примечание:** Загляните на справочную страницу [TypeError: "x" is (not) "y"](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_type), чтобы узнать больше об этой ошибке.
 
-<p>Причиной этому является все то же перепутывание оператора присваивания (<code>=</code>) со строгим сравнением (<code>===</code>). Например, если мы изменим внутри <code>checkGuess()</code> эту строку кода:</p>
+### Синтаксические ошибки: третий раунд
 
-<pre class="brush: js">if (userGuess === randomNumber) {</pre>
+1.  Теперь, если вы снова попробуете сыграть в игру, вы должны добиться большего успеха — игра должна играть абсолютно нормально, пока вы не закончите игру, либо угадав нужное число, либо потеряв жизни.
+2.  На данном этапе игра снова слетает, и выводится такая же ошибка, как и в начале — "TypeError: resetButton.addeventListener is not a function"! Однако, теперь она происходит из-за строки 94.
+3.  Посмотрев на строку 94, легко видеть, что здесь сделана такая же ошибка. Нам просто нужно изменить `addeventListener` на `addEventListener`.
 
-<p>на эту</p>
+## Логическая ошибка
 
-<pre class="brush: js">if (userGuess = randomNumber) {</pre>
+На этом этапе игра должна проходить отлично, однако, поиграв несколько раз, вы, несомненно заметите, что случайное число, которое вы должны угадать, всегда 0 или 1. Определённо не совсем так, как мы хотим, чтобы игра была разыграна!
 
-<p>мы всегда будем получать <code>true</code>, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!</p>
+Безусловно, где-то в игре есть логическая ошибка — игра не возвращает ошибку, она просто работает неправильно.
 
-<h3 id="SyntaxError_отсутствует_после_списка_аргументов">SyntaxError: отсутствует ) после списка аргументов</h3>
+1.  Найдём переменную `randomNumber` , и строку где в первый раз устанавливали случайное число. Пример, в котором мы храним случайное число, которое должны угадать, на строке 44:
 
-<p>Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.</p>
+    ```js
+    let randomNumber = Math.floor(Math.random()) + 1;
+    ```
 
-<div class="note">
-<p><strong>Примечание</strong>: Загляните на справочную страницу  <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list">SyntaxError: missing ) after argument list</a> для получения дополнительной информации об этой ошибке.</p>
-</div>
+    И на строке 113, где мы генерируем случайное число, каждый раз после окончания игры:
 
-<h3 id="SyntaxError_missing_after_property_id">SyntaxError: missing : after property id</h3>
+    ```js
+    randomNumber = Math.floor(Math.random()) + 1;
+    ```
 
-<p dir="ltr">Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив</p>
+2.  Чтобы проверить, действительно ли проблема в этом, давайте обратимся к нашему другу `console.log()` снова — вставьте её ниже строк с ошибками:
 
-<pre class="brush: js">function checkGuess() {</pre>
+    ```js
+    console.log(randomNumber);
+    ```
 
-<p>на</p>
+3.  Сохраните и обновите, а дальше попробуйте пару раз сыграть — в консоли вы увидите что `randomNumber` равна 1 в каждой точке, где вы её записали после строк с ошибками.
 
-<pre class="brush: js">function checkGuess( {
-</pre>
+### Работаем через логику
 
-<p dir="ltr" id="tw-target-text">Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!</p>
+Чтобы исправить это, давайте рассмотрим как работает строка. Первое, мы вызываем [`Math.random()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random), который генерирует случайное десятичное число, между 0 и 1, например 0.5675493843.
 
-<h3 id="SyntaxError_missing_after_function_body">SyntaxError: missing } after function body</h3>
+```js
+Math.random()
+```
 
-<p>Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции  <code>checkGuess()</code>.</p>
+Дальше, мы передаём результат вызова `Math.random()` через [`Math.floor()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/floor), который округляет число вниз, до ближайшего целого числа. Затем мы добавляем 1 к данному результату:
 
-<h3 id="SyntaxError_expected_expression_got_string_or_SyntaxError_unterminated_string_literal">SyntaxError: expected expression, got '<em>string</em>' or SyntaxError: unterminated string literal</h3>
+```
+Math.floor(Math.random()) + 1;
+```
 
-<p>Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше,  <em>строка</em>  будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.</p>
+Округление случайного десятичного числа к меньшему, всегда будет возвращать 0, так что добавление к нему единицы будет возвращать всегда 1. Нам нужно умножить случайное число на 100, прежде чем мы округлим его к меньшему. Следующая строка вернёт нам случайное число между 0 и 99:
 
-<p>При всех этих ошибках действуйте так, как в наших  примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!</p>
+```js
+Math.floor(Math.random() * 100);
+```
 
-<div class="note">
-<p><strong>Примечание</strong> : Смотрите наш <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unexpected_token">SyntaxError: Неожиданный токен</a> и <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal">SyntaxError: незавершённая строка</a> эталонных страниц для получения более подробной информации об этих ошибках.</p>
-</div>
+поэтому нам нужно добавить 1, чтоб нам возвращалось случайное число между 1 и 100:
 
-<h2 id="Резюме">Резюме</h2>
+```js
+Math.floor(Math.random() * 100) + 1;
+```
 
-<p>Итак, мы научились основам  выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.</p>
+А теперь, исправьте обе строки с ошибками, затем сохраните и обновите, игра должна работать так, как мы и планировали!
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Другие распространённые ошибки
 
-<div>
-<ul>
- <li>Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно - см. <a href="/en-US/docs/Web/JavaScript/Reference/Errors">ссылку ошибки JavaScript</a> .</li>
- <li>Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на <a class="external external-icon" href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">нить обучения Область дискурсе</a> , или в <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC канал на <a class="external external-icon" href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.</li>
-</ul>
-</div>
+Существуют и другие распространённые ошибки, которые вы обнаружите в своём коде. В этом разделе показано большинство из них.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}</p>
+### SyntaxError: отсутствует ; перед постановкой
+
+Эта ошибка обычно означает что вы упустили точку с запятой в конце одной из ваших строк кода, но иногда ошибка может быть более загадочной. Например, если мы изменим эту строку внутри функции `checkGuess()` :
+
+```js
+var userGuess = Number(guessField.value);
+```
+
+на эту
+
+```js
+var userGuess === Number(guessField.value);
+```
+
+Это вызовет данную ошибку, потому что браузер подумает, что вы пытались сделать что-то другое. Вы должны быть уверены, что вы не перепутали оператор присваивания (`=`), который присваивает значение переменной — с оператором сравнения (`===`), который строго сравнивает операнды, и возвращает `true`/`false` .
+
+> **Примечание:** Загляните на справочную страницу [Синтаксическая ошибка: пропущен символ ; до объявления инструкции](/ru/docs/Web/JavaScript/Reference/Errors/Missing_semicolon_before_statement) для получения дополнительной информации об этой ошибке.
+
+### В программе всегда говорится, что вы выиграли, независимо от того, что вы ввели
+
+Причиной этому является все то же перепутывание оператора присваивания (`=`) со строгим сравнением (`===`). Например, если мы изменим внутри `checkGuess()` эту строку кода:
+
+```js
+if (userGuess === randomNumber) {
+```
+
+на эту
+
+```js
+if (userGuess = randomNumber) {
+```
+
+мы всегда будем получать `true`, заставляя программу сообщать, что игра была выиграна. Будьте осторожны!
+
+### SyntaxError: отсутствует ) после списка аргументов
+
+Эта ошибка проста — обычно она означает, что вы пропустили закрывающую скобку с конца вызова функции / метода.
+
+> **Примечание:** Загляните на справочную страницу [SyntaxError: missing ) after argument list](/ru/docs/Web/JavaScript/Reference/Errors/Missing_parenthesis_after_argument_list) для получения дополнительной информации об этой ошибке.
+
+### SyntaxError: missing : after property id
+
+Эта ошибка обычно связана с неправильно сформированным объектом JavaScript, но в этом случае нам удалось получить её, изменив
+
+```js
+function checkGuess() {
+```
+
+на
+
+```js
+function checkGuess( {
+```
+
+Это заставило браузер думать, что мы пытаемся передать содержимое функции в функцию в качестве аргумента. Будьте осторожны с этими скобками!
+
+### SyntaxError: missing } after function body
+
+Это легко — обычно это означает, что вы пропустили одну из ваших фигурных скобок из функции или условной структуры. Мы получили эту ошибку, удалив одну из закрывающих фигурных скобок возле нижней части функции `checkGuess()`.
+
+### SyntaxError: expected expression, got '_string_' or SyntaxError: unterminated string literal
+
+Эти ошибки обычно означает, что вы пропустили открывающую или закрывающую кавычку для строковых значений. В первой ошибки выше, _строка_ будет заменена на неожиданный персонаж (ей) , что браузер нашёл вместо кавычек в начале строки. Вторая ошибка означает , что строка не закончилась кавычки.
+
+При всех этих ошибках действуйте так, как в наших примерах, которые мы рассмотрели в пошаговом руководстве. Когда возникает ошибка, посмотрите полученный номер строки, перейдите к этой строке и посмотрите, можете ли вы определить, что случилось. Имейте в виду, что ошибка не обязательно будет на этой строке, а также, что ошибка может быть вызвана не такой же проблемой, которую мы привели выше!
+
+> **Примечание:** : Смотрите наш [SyntaxError: Неожиданный токен](/ru/docs/Web/JavaScript/Reference/Errors/Unexpected_token) и [SyntaxError: незавершённая строка](/ru/docs/Web/JavaScript/Reference/Errors/Unterminated_string_literal) эталонных страниц для получения более подробной информации об этих ошибках.
+
+## Резюме
+
+Итак, мы научились основам выяснения ошибок в простых программах JavaScript. Не всегда так просто разобраться, что не так в вашем коде, но, по крайней мере, это сэкономит вам несколько часов сна и позволит вам продвигаться немного быстрее, когда что-либо заработает не так, как ожидалось, в вашем учебном путешествии.
+
+## Смотрите также
+
+- Есть много других типов ошибок, которые не перечислены здесь; мы составляем ссылку , которая объясняет , что они означают подробно - см. [ссылку ошибки JavaScript](/ru/docs/Web/JavaScript/Reference/Errors) .
+- Если вы столкнётесь с любыми ошибками в коде, которые вы не знаете , как исправить после прочтения этой статьи, вы можете получить помощь! Спросите на [нить обучения Область дискурсе](https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294) , или в [#mdn](irc://irc.mozilla.org/mdn) IRC канал на [Mozilla IRC](https://wiki.mozilla.org/IRC). Расскажите нам, какая у вас ошибка, и мы постараемся вам помочь. Приложите пример своего кода для большей ясности проблемы.
+
+{{PreviousMenuNext("Learn/JavaScript/Первые_шаги/A_first_splash", "Learn/JavaScript/Первые_шаги/Variables", "Learn/JavaScript/Первые_шаги")}}
diff --git a/files/ru/learn/javascript/howto/index.md b/files/ru/learn/javascript/howto/index.md
index 95dc45cc98f69b..97f5420a76477d 100644
--- a/files/ru/learn/javascript/howto/index.md
+++ b/files/ru/learn/javascript/howto/index.md
@@ -5,300 +5,219 @@ tags:
   - Начинающий
 translation_of: Learn/JavaScript/Howto
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Следующие ссылки указывают на решение общих повседневных проблем, которые вам нужно будет исправить, чтобы код  JavaScript  работал правильно.</p>
+Следующие ссылки указывают на решение общих повседневных проблем, которые вам нужно будет исправить, чтобы код JavaScript работал правильно.
 
-<h2 id="Частые_ошибки_начинающих">Частые ошибки начинающих</h2>
+## Частые ошибки начинающих
 
-<h3 id="Правильное_написание_и_оболочка">Правильное написание и оболочка</h3>
+### Правильное написание и оболочка
 
-<p> </p>
+Если ваш код не работает и / или браузер жалуется, что что-то не определено, убедитесь, что вы правильно указали все имена переменных, имена функций и т. д.
 
-<p>Если ваш код не работает и / или браузер жалуется, что что-то не определено, убедитесь, что вы правильно указали все имена переменных, имена функций и т. д.</p>
+Некоторые общие встроенные функции браузера, которые вызывают проблемы:
 
-<p>Некоторые общие встроенные функции браузера, которые вызывают проблемы:</p>
+| Correct                    | Wrong                     |
+| -------------------------- | ------------------------- |
+| `getElementsByTagName()`   | `getElementbyTagName()`   |
+| `getElementsByName()`      | `getElementByName()`      |
+| `getElementsByClassName()` | `getElementByClassName()` |
+| `getElementById()`         | `getElementsById()`       |
 
-<p> </p>
+### Положение двоеточия / точки с запятой
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Correct</th>
-   <th scope="col">Wrong</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><code>getElementsByTagName()</code></td>
-   <td><code>getElementbyTagName()</code></td>
-  </tr>
-  <tr>
-   <td><code>getElementsByName()</code></td>
-   <td><code>getElementByName()</code></td>
-  </tr>
-  <tr>
-   <td><code>getElementsByClassName()</code></td>
-   <td><code>getElementByClassName()</code></td>
-  </tr>
-  <tr>
-   <td><code>getElementById()</code></td>
-   <td><code>getElementsById()</code></td>
-  </tr>
- </tbody>
-</table>
+Вам нужно убедиться, что вы не помещаете точки с запятой неправильно. Например:
 
-<h3 id="Положение_двоеточия_точки_с_запятой">Положение двоеточия / точки с запятой</h3>
+| Correct                     | Wrong                       |
+| --------------------------- | --------------------------- |
+| `elem.style.color = 'red';` | `elem.style.color = 'red;'` |
 
-<p>Вам нужно убедиться, что вы не помещаете точки с запятой неправильно. Например:</p>
+### Функции
 
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Correct</th>
-   <th scope="col">Wrong</th>
-  </tr>
-  <tr>
-   <td><code>elem.style.color = 'red';</code></td>
-   <td><code>elem.style.color = 'red;'</code></td>
-  </tr>
- </thead>
-</table>
+Есть ряд вещей, которые могут пойти не так с функциями.
 
-<h3 id="Функции">Функции</h3>
+Одна из наиболее распространённых ошибок - объявить функцию, но не называть её нигде. Например
 
-<p> </p>
+:
 
-<p>Есть ряд вещей, которые могут пойти не так с функциями.</p>
-
-<p>Одна из наиболее распространённых ошибок - объявить функцию, но не называть её нигде. Например</p>
+```js
+function myFunction() {
+  alert('This is my function.');
+};
+```
 
-<p>:</p>
+Этот код ничего не сделает, если вы его не назовёте, например
 
-<pre class="brush: js">function myFunction() {
-  alert('This is my function.');
-};</pre>
+```js
+myFunction();
+```
 
-<p>Этот код ничего не сделает, если вы его не назовёте, например</p>
+#### Область действия
 
-<pre class="brush: js">myFunction();</pre>
+Помните, что [functions have their own scope](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts) —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или [return the value](/ru/docs/Learn/JavaScript/Building_blocks/Return_values) из функции.
 
-<h4 id="Область_действия">Область действия</h4>
+#### Запуск кода после оператора возврата
 
-<p>Помните, что <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">functions have their own scope</a> —вы не можете получить доступ к значению переменной, установленному внутри функции извне функции, если вы не объявили переменную глобально (т. е. не внутри каких-либо функций), или <a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">return the value</a> из функции.</p>
+Помните также, что когда вы возвращаете значение из функции, интерпретатор JavaScript выходит из функции - никакой код после выполнения оператора return не выполняется.
 
-<h4 id="Запуск_кода_после_оператора_возврата">Запуск кода после оператора возврата</h4>
+Фактически, некоторые браузеры (например, Firefox) выдадут вам сообщение об ошибке в консоли разработчика, если у вас есть код после оператора return. Firefox даёт вам «недостижимый код после оператора возврата».
 
-<p> </p>
+### Обозначение объекта по сравнению с обычным назначением
 
-<p>Помните также, что когда вы возвращаете значение из функции, интерпретатор JavaScript выходит из функции - никакой код  после выполнения оператора return не выполняется.</p>
+Когда вы назначаете что-то в JavaScript, вы используете один знак равенства, например:
 
-<p>Фактически, некоторые браузеры (например, Firefox) выдадут вам сообщение об ошибке в консоли разработчика, если у вас есть код после оператора return. Firefox даёт вам «недостижимый код после оператора возврата».</p>
+```js
+var myNumber = 0;
+```
 
-<p> </p>
+Это не работает в [Objects](/ru/docs/Learn/JavaScript/Objects), однако - с объектами, вам нужно отделить имена членов от их значений, используя двоеточия, и разделить каждый элемент запятой, например:
 
-<h3 id="Обозначение_объекта_по_сравнению_с_обычным_назначением">Обозначение объекта по сравнению с обычным назначением</h3>
+```js
+var myObject = {
+  name : 'Chris',
+  age : 38
+}
+```
 
-<p>Когда вы назначаете что-то в JavaScript, вы используете один знак равенства, например:</p>
+## Basic definitions
+
+- [What is JavaScript?](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition)
+- [What is a variable?](/ru/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable)
+- [What are strings?](/ru/docs/Learn/JavaScript/First_steps/Strings)
+- [What is an array?](/ru/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array)
+- [What is a loop?](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
 
-<pre class="brush: js">var myNumber = 0;</pre>
+<!---->
+
+- [What is a function?](/ru/docs/Learn/JavaScript/Building_blocks/Functions)
+- [What is an event?](/ru/docs/Learn/JavaScript/Building_blocks/Events)
+- [What is an object?](/ru/docs/Learn/JavaScript/Objects/Basics#Object_basics)
+- [What is JSON?](/ru/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON)
+- [What is a web API?](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs)
+- [What is the DOM?](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model)
+
+## Basic use cases
+
+### General
+
+- [How do you add JavaScript to your page?](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page)
+- [How do you add comments to JavaScript code?](/ru/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments)
 
-<p>Это не работает в <a href="/en-US/docs/Learn/JavaScript/Objects">Objects</a>, однако - с объектами, вам нужно отделить имена членов от их значений, используя двоеточия, и разделить каждый элемент запятой, например:</p>
+### Variables
+
+- [How do you declare a variable?](/ru/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable)
+- [How do you initialize a variable with a value?](/ru/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable)
+- [How do you update a variable's value?](/ru/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable) (also see [Assignment operators](/ru/docs/Learn/JavaScript/First_steps/Math#Assignment_operators))
+- [What data types can values have in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Variables#Variable_types)
+- [What does 'loosely typed' mean?](/ru/docs/Learn/JavaScript/First_steps/Variables#Loose_typing)
+
+### Math
+
+- [What types of number do you have to deal with in web development?](/ru/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers)
+- [How do you do basic math in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators)
+- [What is operator precedence, and how is it handled in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Math#Operator_precedence)
+- [How do you increment and decrement values in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators)
+- [How do you compare values in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Math#Comparison_operators) (e.g. to see which one is bigger, or to see if one value is equal to another).
+
+### Strings
+
+- [How do you create a string in JavaScript?](/ru/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string)
+- [Do you have to use single quotes or double quotes?](/ru/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes)
+- [How do you escape characters in strings?](/ru/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string)
+- [How do you join strings together?](/ru/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings)
+- [Can you join strings and numbers together?](/ru/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings)
+- [How do you find the length of a string?](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string)
+- [How you find what character is at a certain position in a string?](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character)
+- [How do you find and extract a specific substring from a string?](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it)
+- [How do you change the case of a string?](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case)
+- [How do you replace one specific substring with another?](/ru/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string)
+
+### Arrays
+
+- [How do you create an array?](/ru/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array)
+- [How do you access and modify the items in an array?](/ru/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items) (this includes multidimensional arrays)
+- [How do you find the length of an array?](/ru/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array)
+- [How you add and remove array items?](/ru/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items)
+- [How do you split a string into array items, or join array items into a string?](/ru/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays)
+
+### Debugging JavaScript
+
+- [What are the basic types of error?](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error)
+- [What are browser developer tools, and how do you access them?](/ru/docs/Learn/Common_questions/What_are_browser_developer_tools)
+- [How do you log a value to the JavaScript console?](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API)
+- [How do you use breakpoints, and other JavaScript debugging features?](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger)
+
+For more information on JavaScript debugging, see [Handling common JavaScript problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript); also see [Other common errors](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors) for a description of common errors.
+
+### Making decisions in code
+
+- [How do you execute different blocks of code, depending on a variable's value or other condition?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [How do you use if ...else statements?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements)
+- [How do nest one decision block inside another?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else)
+- [How do you use AND, OR, and NOT operators in JavaScript?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT)
+- [How do you conveniently handle a large number of choices for one condition?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements)
+- [How do you use a ternary operator to make a quick choice between two options based on a true or false test?](/ru/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator)
+
+### Looping/iteration
+
+- [How do you run the same bit of code over and over again?](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [How do you exit a loop before the end if a certain condition is met?](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break)
+- [How do you skip to the next iteration of a loop if a certain condition is met?](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue)
+- [How do you use while and do ... while loops?](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while)
+- How to iterate over the elements in an array
+- How to iterate over the elements in a multidimensional array
+- How to iterate over the members in an object
+- How to iterate over the members of an object nested inside an array
+
+## Intermediate use cases
+
+### Functions
+
+- [How do you find functions in the browser?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions)
+- [What is the difference between a function and a method?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods)
+- [How do you create your own functions?](/ru/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [How do you run (call, or invoke) a function?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions)
+- [What is an anonymous function?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions)
+- [How do you specify parameters (or arguments) when invoking a function?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters)
+- [What is function scope?](/ru/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts)
+- [What are return values, and how do you use them?](/ru/docs/Learn/JavaScript/Building_blocks/Return_values)
+
+### Objects
+
+- [How do you create an object?](/ru/docs/Learn/JavaScript/Objects/Basics#Object_basics)
+- [What is dot notation?](/ru/docs/Learn/JavaScript/Objects/Basics#Dot_notation)
+- [What is bracket notation?](/ru/docs/Learn/JavaScript/Objects/Basics#Bracket_notation)
+- [How do you get and set the methods and properties of an object?](/ru/docs/Learn/JavaScript/Objects/Basics#Setting_object_members)
+- [What is `this`, in the context of an object?](/ru/docs/Learn/JavaScript/Objects/Basics#What_is_this)
+- [What is object-oriented programming?](/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters)
+- [What are constructors and instances, and how do you create them?](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances)
+- [What different ways are there to create objects in JavaScript?](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances)
+
+### JSON
 
-<pre class="brush: js">var myObject = {
-  name : 'Chris',
-  age : 38
-}</pre>
-
-<h2 id="Basic_definitions">Basic definitions</h2>
-
-<div class="column-container">
-<div class="column-half">
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#A_high-level_definition">What is JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#What_is_a_variable">What is a variable?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">What are strings?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#What_is_an_Array">What is an array?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">What is a loop?</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions">What is a function?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events">What is an event?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">What is an object?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#No_really_what_is_JSON">What is JSON?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Introduction#What_are_APIs">What is a web API?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#The_document_object_model">What is the DOM?</a></li>
-</ul>
-</div>
-</div>
-
-<h2 id="Basic_use_cases">Basic use cases</h2>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="General">General</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#How_do_you_add_JavaScript_to_your_page">How do you add JavaScript to your page?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript#Comments">How do you add comments to JavaScript code?</a></li>
-</ul>
-
-<h3 id="Variables">Variables</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Declaring_a_variable">How do you declare a variable?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Initializing_a_variable">How do you initialize a variable with a value?</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Updating_a_variable">How do you update a variable's value?</a> (also see <a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Assignment_operators">Assignment operators</a>)</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#Variable_types">What data types can values have in JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables#Loose_typing">What does 'loosely typed' mean?</a></li>
-</ul>
-
-<h3 id="Math">Math</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Types_of_numbers">What types of number do you have to deal with in web development?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Arithmetic_operators">How do you do basic math in JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Operator_precedence">What is operator precedence, and how is it handled in JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math#Increment_and_decrement_operators">How do you increment and decrement values in JavaScript?</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math#Comparison_operators">How do you compare values in JavaScript?</a> (e.g. to see which one is bigger, or to see if one value is equal to another).</li>
-</ul>
-
-<h3 id="Strings">Strings</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Creating_a_string">How do you create a string in JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Single_quotes_versus_double_quotes">Do you have to use single quotes or double quotes?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Escaping_characters_in_a_string">How do you escape characters in strings?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Concatenating_strings">How do you join strings together?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings#Numbers_versus_strings">Can you join strings and numbers together?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_the_length_of_a_string">How do you find the length of a string?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Retrieving_a_specific_string_character">How you find what character is at a certain position in a string?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Finding_a_substring_inside_a_string_and_extracting_it">How do you find and extract a specific substring from a string?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Changing_case">How do you change the case of a string?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods#Updating_parts_of_a_string">How do you replace one specific substring with another?</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Arrays">Arrays</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Creating_an_array">How do you create an array?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Accessing_and_modifying_array_items">How do you access and modify the items in an array?</a> (this includes multidimensional arrays)</li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Finding_the_length_of_an_array">How do you find the length of an array?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Adding_and_removing_array_items">How you add and remove array items?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays#Converting_between_strings_and_arrays">How do you split a string into array items, or join array items into a string?</a></li>
-</ul>
-
-<h3 id="Debugging_JavaScript">Debugging JavaScript</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Types_of_error">What are the basic types of error?</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools, and how do you access them?</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#The_Console_API">How do you log a value to the JavaScript console?</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_the_JavaScript_debugger">How do you use breakpoints, and other JavaScript debugging features?</a></li>
-</ul>
-
-<p>For more information on JavaScript debugging, see <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a>; also see <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong#Other_common_errors">Other common errors</a> for a description of common errors.</p>
-
-<h3 id="Making_decisions_in_code">Making decisions in code</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals">How do you execute different blocks of code, depending on a variable's value or other condition?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#if_..._else_statements">How do you use if ...else statements?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Nesting_if_..._else">How do nest one decision block inside another?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Logical_operators_AND_OR_and_NOT">How do you use AND, OR, and NOT operators in JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#switch_statements">How do you conveniently handle a large number of choices for one condition?</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/conditionals#Ternary_operator">How do you use a ternary operator to make a quick choice between two options based on a true or false test?</a></li>
-</ul>
-
-<h3 id="Loopingiteration">Looping/iteration</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code">How do you run the same bit of code over and over again?</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Exiting_loops_with_break">How do you exit a loop before the end if a certain condition is met?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#Skipping_iterations_with_continue">How do you skip to the next iteration of a loop if a certain condition is met?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#while_and_do_..._while">How do you use while and do ... while loops?</a></li>
- <li>How to iterate over the elements in an array</li>
- <li>How to iterate over the elements in a multidimensional array</li>
- <li>How to iterate over the members in an object</li>
- <li>How to iterate over the members of an object nested inside an array</li>
-</ul>
-</div>
-</div>
-
-<h2 id="Intermediate_use_cases">Intermediate use cases</h2>
-
-<div class="column-container">
-<div class="column-half">
-<h3 id="Functions">Functions</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Built-in_browser_functions">How do you find functions in the browser?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Functions_versus_methods">What is the difference between a function and a method?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function">How do you create your own functions?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Invoking_functions">How do you run (call, or invoke) a function?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Anonymous_functions">What is an anonymous function?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_parameters">How do you specify parameters (or arguments) when invoking a function?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Functions#Function_scope_and_conflicts">What is function scope?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">What are return values, and how do you use them?</a></li>
-</ul>
-
-<h3 id="Objects">Objects</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Object_basics">How do you create an object?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Dot_notation">What is dot notation?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Bracket_notation">What is bracket notation?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#Setting_object_members">How do you get and set the methods and properties of an object?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics#What_is_this">What is <code>this</code>, in the context of an object?</a></li>
- <li><a href="/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">What is object-oriented programming?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Constructors_and_object_instances">What are constructors and instances, and how do you create them?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Other_ways_to_create_object_instances">What different ways are there to create objects in JavaScript?</a></li>
-</ul>
-
-<h3 id="JSON">JSON</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#JSON_structure">How do you structure JSON data, and read it from JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON">How can you load a JSON file into a page?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text">How do you convert a JSON object to a text string, and back again?</a></li>
-</ul>
-</div>
-
-<div class="column-half">
-<h3 id="Events">Events</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties">What are event handlers and how do you use them?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these">What are inline event handlers?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()">What does the <code>addEventListener()</code> function do, and how do you use it?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use">Which mechanism should I use to add event code to my web pages?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">What are event objects, and how do you use them?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour">How do you prevent default event behaviour?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation">What is event delegation, and how does it work?</a></li>
-</ul>
-
-<h3 id="Object-oriented_JavaScript">Object-oriented JavaScript</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">What are object prototypes?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property">What is the constructor property, and how can you use it?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes">How do you add methods to the constructor?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">How do you create a new constructor that inherits its members from a parent constructor?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary">When should you use inheritance in JavaScript?</a></li>
-</ul>
-
-<h3 id="Web_APIs">Web APIs</h3>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation">How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?</a></li>
-</ul>
-
-<p> </p>
-</div>
-</div>
+- [How do you structure JSON data, and read it from JavaScript?](/ru/docs/Learn/JavaScript/Objects/JSON#JSON_structure)
+- [How can you load a JSON file into a page?](/ru/docs/Learn/JavaScript/Objects/JSON#Loading_our_JSON)
+- [How do you convert a JSON object to a text string, and back again?](/ru/docs/Learn/JavaScript/Objects/JSON#Converting_between_objects_and_text)
+
+### Events
+
+- [What are event handlers and how do you use them?](/ru/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties)
+- [What are inline event handlers?](/ru/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these)
+- [What does the `addEventListener()` function do, and how do you use it?](</ru/docs/Learn/JavaScript/Building_blocks/Events#addEventListener()_and_removeEventListener()>)
+- [Which mechanism should I use to add event code to my web pages?](/ru/docs/Learn/JavaScript/Building_blocks/Events#What_mechanism_should_I_use)
+- [What are event objects, and how do you use them?](/ru/docs/Learn/JavaScript/Building_blocks/Events#Event_objects)
+- [How do you prevent default event behaviour?](/ru/docs/Learn/JavaScript/Building_blocks/Events#Preventing_default_behaviour)
+- [How do events fire on nested elements? (event propagation, also related — event bubbling and capturing)](/ru/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture)
+- [What is event delegation, and how does it work?](/ru/docs/Learn/JavaScript/Building_blocks/Events#Event_delegation)
+
+### Object-oriented JavaScript
+
+- [What are object prototypes?](/ru/docs/Learn/JavaScript/Objects/Object_prototypes)
+- [What is the constructor property, and how can you use it?](/ru/docs/Learn/JavaScript/Objects/Object_prototypes#The_constructor_property)
+- [How do you add methods to the constructor?](/ru/docs/Learn/JavaScript/Objects/Object_prototypes#Modifying_prototypes)
+- [How do you create a new constructor that inherits its members from a parent constructor?](/ru/docs/Learn/JavaScript/Objects/Inheritance)
+- [When should you use inheritance in JavaScript?](/ru/docs/Learn/JavaScript/Objects/Inheritance#Object_member_summary)
+
+### Web APIs
+
+- [How do you manipulate the DOM (e.g. adding or removing elements) using JavaScript?](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents#Active_learning_Basic_DOM_manipulation)
diff --git a/files/ru/learn/javascript/index.md b/files/ru/learn/javascript/index.md
index 8b06e78f7edc3c..0708e6c1e13901 100644
--- a/files/ru/learn/javascript/index.md
+++ b/files/ru/learn/javascript/index.md
@@ -8,57 +8,49 @@ tags:
   - Основы
 translation_of: Learn/JavaScript
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">{{Glossary("JavaScript")}} — это язык программирования, который даёт возможность реализовывать сложное поведение веб-страницы. Каждый раз, когда вы видите веб-страницу, она не только отображает статическое содержимое, но и делает большее - своевременно отображает обновление контента, выводит интерактивные карты, 2D/3D анимацию, прокручивает видео и т.д. - будьте уверены, здесь не обошлось без JavaScript.</p>
+{{Glossary("JavaScript")}} — это язык программирования, который даёт возможность реализовывать сложное поведение веб-страницы. Каждый раз, когда вы видите веб-страницу, она не только отображает статическое содержимое, но и делает большее - своевременно отображает обновление контента, выводит интерактивные карты, 2D/3D анимацию, прокручивает видео и т.д. - будьте уверены, здесь не обошлось без JavaScript.
 
-<h2 id="Учебный_план">Учебный план</h2>
+## Учебный план
 
-<p>Считается, что JavaScript сложнее изучить, чем связанные с ним технологии, наподобие <a href="/ru/docs/Learn/HTML">HTML</a> и <a href="/ru/docs/Learn/CSS">CSS</a>. Поэтому, перед изучением JavaScript, настоятельно рекомендуем сначала ознакомиться хотя бы с этими двумя технологиями. Начните с проработки следующих модулей:</p>
+Считается, что JavaScript сложнее изучить, чем связанные с ним технологии, наподобие [HTML](/ru/docs/Learn/HTML) и [CSS](/ru/docs/Learn/CSS). Поэтому, перед изучением JavaScript, настоятельно рекомендуем сначала ознакомиться хотя бы с этими двумя технологиями. Начните с проработки следующих модулей:
 
-<ul>
- <li><a href="/ru/docs/Learn/Getting_started_with_the_web">Начало работы с Веб</a></li>
- <li><a href="/ru/docs/Web/Guide/HTML/Introduction">Введение в HTML</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a></li>
-</ul>
+- [Начало работы с Веб](/ru/docs/Learn/Getting_started_with_the_web)
+- [Введение в HTML](/ru/docs/Web/Guide/HTML/Introduction)
+- [Введение в CSS](/ru/docs/Learn/CSS/First_steps)
 
-<p>Имеющийся опыт программирования на других языках также может помочь в обучении.</p>
+Имеющийся опыт программирования на других языках также может помочь в обучении.
 
-<p>После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:</p>
+После изучения основ JavaScript вы будете готовы к ознакомлению с более сложными темами, например:
 
-<ul>
- <li>Углублённый курс JavaScript, изложенный в нашем <a href="/ru/docs/Web/JavaScript/Guide">Руководстве по JavaScript</a></li>
- <li><a href="/ru/docs/Web/API">Программный интерфейс WebAPI</a></li>
-</ul>
+- Углублённый курс JavaScript, изложенный в нашем [Руководстве по JavaScript](/ru/docs/Web/JavaScript/Guide)
+- [Программный интерфейс WebAPI](/ru/docs/Web/API)
 
-<h2 id="Модули">Модули</h2>
+## Модули
 
-<p>Этот раздел содержит следующие модули, проходить которые рекомендуется в порядке перечисления.</p>
+Этот раздел содержит следующие модули, проходить которые рекомендуется в порядке перечисления.
 
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги в JavaScript</a></dt>
- <dd>В нашем первом модуле, посвящённом JavaScript, мы сначала ответим на несколько главных вопросов, таких, как "Что такое JavaScript?",  "На что он похож?" и "Что с его помощью можно сделать?", а затем перейдём к практике - расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы JavaScript</a></dt>
- <dd>В этом модуле мы продолжим изучение главных составных частей JavaScript и обратим внимание на повсеместно встречающиеся типы конструкций: условные операторы, циклы, функции и события. В ходе обучения вы уже сталкивались с ними, но только мимоходом. Теперь мы поговорим именно о них.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Объекты">Введение в объекты JavaScript</a></dt>
- <dd>Практически всё, что встречается в JavaScript, является объектом. Начиная с таких ключевых конструкций, как строки и массивы, и заканчивая интерфейсом взаимодействия с браузером, который построен поверх JavaScript. Вы даже можете создавать собственные объекты, заключая взаимосвязанные функции и переменные в готовые пакеты. Если вы хотите продолжить изучение языка и писать более эффективный код, то очень важно понять объектно-ориентированную природу JavaScript. Чтобы помочь вам в этом, мы представляем этот модуль. В нем мы подробно рассматриваем основы и синтаксис ООП (объектно-ориентированного программирования), показываем, как создавать свои объекты, и объясняем, что такое данные в формате JSON и как с ними работать.</dd>
- <dt><a href="/ru/docs/Learn/JavaScript/Client-side_web_APIs">Клиентский Web API</a></dt>
- <dd>При написании клиентского JavaScript для сайтов или приложений вы не обойдётесь без использования API - то есть интерфейсов для работы с различными функциями браузера или операционной системы, на которой работает сайт, или даже для работы с данными, получаемыми с других сайтов или сервисов. В этом модуле мы изучим, какие это API и как использовать некоторые наиболее распространённые API, которые вам будут часто попадаться во время разработки.</dd>
-</dl>
+- [Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги)
+  - : В нашем первом модуле, посвящённом JavaScript, мы сначала ответим на несколько главных вопросов, таких, как "Что такое JavaScript?", "На что он похож?" и "Что с его помощью можно сделать?", а затем перейдём к практике - расскажем, как писать и выполнять код на JavaScript. После чего подробнее рассмотрим некоторые ключевые конструкции JavaScript: переменные, строки, числа и массивы.
+- [Структурные элементы JavaScript](/ru/docs/Learn/JavaScript/Building_blocks)
+  - : В этом модуле мы продолжим изучение главных составных частей JavaScript и обратим внимание на повсеместно встречающиеся типы конструкций: условные операторы, циклы, функции и события. В ходе обучения вы уже сталкивались с ними, но только мимоходом. Теперь мы поговорим именно о них.
+- [Введение в объекты JavaScript](/ru/docs/Learn/JavaScript/Объекты)
+  - : Практически всё, что встречается в JavaScript, является объектом. Начиная с таких ключевых конструкций, как строки и массивы, и заканчивая интерфейсом взаимодействия с браузером, который построен поверх JavaScript. Вы даже можете создавать собственные объекты, заключая взаимосвязанные функции и переменные в готовые пакеты. Если вы хотите продолжить изучение языка и писать более эффективный код, то очень важно понять объектно-ориентированную природу JavaScript. Чтобы помочь вам в этом, мы представляем этот модуль. В нем мы подробно рассматриваем основы и синтаксис ООП (объектно-ориентированного программирования), показываем, как создавать свои объекты, и объясняем, что такое данные в формате JSON и как с ними работать.
+- [Клиентский Web API](/ru/docs/Learn/JavaScript/Client-side_web_APIs)
+  - : При написании клиентского JavaScript для сайтов или приложений вы не обойдётесь без использования API - то есть интерфейсов для работы с различными функциями браузера или операционной системы, на которой работает сайт, или даже для работы с данными, получаемыми с других сайтов или сервисов. В этом модуле мы изучим, какие это API и как использовать некоторые наиболее распространённые API, которые вам будут часто попадаться во время разработки.
 
-<h2 id="Решение_общих_проблем_на_JavaScript">Решение общих проблем на JavaScript</h2>
+## Решение общих проблем на JavaScript
 
-<p>Статья <a href="/ru/docs/Learn/JavaScript/Howto">Использование JavaScript для решения общих проблем</a> предоставляет ссылки к секциям контента, раскрывающих суть того, как использовать JavaScript для решения очень часто встречающихся проблем при создании веб-страницы.</p>
+Статья [Использование JavaScript для решения общих проблем](/ru/docs/Learn/JavaScript/Howto) предоставляет ссылки к секциям контента, раскрывающих суть того, как использовать JavaScript для решения очень часто встречающихся проблем при создании веб-страницы.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<dl>
- <dt><a href="/ru/docs/Web/JavaScript">JavaScript на MDN</a></dt>
- <dd>Главная точка входа к ядру JavaScript-документации на MDN — то место, где вы найдёте обширную справочную документация по всем аспектам языка JavaScript, и некоторые продвинутые учебники для опытных JavaScript-разработчиков.</dd>
- <dt><a href="https://learnjavascript.online">Learn JavaScript</a></dt>
- <dd>Отличный ресурс для начинающих веб-разработчиков - изучайте JavaScript в интерактивной среде, с короткими уроками и интерактивными тестами с автоматизированной оценкой. Первые 40 уроков бесплатно, а полный курс доступен за небольшую разовую плату.</dd>
- <dt><a href="https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript">JavaScript Fundamentals на EXLskills</a></dt>
- <dd>Изучайте JavaScript бесплатно с курсом с открытым исходным кодом EXLskills, который знакомит вас со всем необходимым, чтобы начать создавать приложения в JS.</dd>
- <dt><a href="https://www.youtube.com/user/codingmath">Математика для программиста</a></dt>
- <dd>Великолепная серия видеоуроков по математике от <a href="https://twitter.com/bit101">Keith Peters</a>, которую необходимо понимать каждому эффективному программисту</dd>
-</dl>
+- [JavaScript на MDN](/ru/docs/Web/JavaScript)
+  - : Главная точка входа к ядру JavaScript-документации на MDN — то место, где вы найдёте обширную справочную документация по всем аспектам языка JavaScript, и некоторые продвинутые учебники для опытных JavaScript-разработчиков.
+- [Learn JavaScript](https://learnjavascript.online)
+  - : Отличный ресурс для начинающих веб-разработчиков - изучайте JavaScript в интерактивной среде, с короткими уроками и интерактивными тестами с автоматизированной оценкой. Первые 40 уроков бесплатно, а полный курс доступен за небольшую разовую плату.
+- [JavaScript Fundamentals на EXLskills](https://exlskills.com/learn-en/courses/javascript-fundamentals-basics_javascript)
+  - : Изучайте JavaScript бесплатно с курсом с открытым исходным кодом EXLskills, который знакомит вас со всем необходимым, чтобы начать создавать приложения в JS.
+- [Математика для программиста](https://www.youtube.com/user/codingmath)
+  - : Великолепная серия видеоуроков по математике от [Keith Peters](https://twitter.com/bit101), которую необходимо понимать каждому эффективному программисту
diff --git a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md
index 4198bc634e5e5e..3bea8d82731eb8 100644
--- a/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md
+++ b/files/ru/learn/javascript/objects/adding_bouncing_balls_features/index.md
@@ -4,114 +4,91 @@ slug: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 translation_of: Learn/JavaScript/Objects/Adding_bouncing_balls_features
 original_slug: Learn/JavaScript/Объекты/Adding_bouncing_balls_features
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</div>
+В этом упражнении мы будем использовать проект прыгающих шаров из предыдущей статьи и добавим в него новые интересные возможности.
 
-<p class="summary">В этом упражнении мы будем использовать проект прыгающих шаров из предыдущей статьи и добавим в него новые интересные возможности.</p>
+| Требования: | Перед тем как приступить к этому упражнению нужно выполнить задания из всех статей текущего модуля. |
+| ----------- | --------------------------------------------------------------------------------------------------- |
+| Цель:       | Проверить насколько хорошо вы понимаете объекты и связанные с ними конструкции в языке Javascript.  |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Перед тем как приступить к этому упражнению нужно выполнить задания из всех статей текущего модуля.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Проверить насколько хорошо вы понимаете объекты и связанные с ними конструкции в языке Javascript. </td>
-  </tr>
- </tbody>
-</table>
+## Начало
 
-<h2 id="Начало">Начало</h2>
+Для начала скопируйте файлы [index-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html), [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css) и [main-finished.js](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) из предыдущей статьи в новую директорию на вашем компьютере.
 
-<p>Для начала скопируйте файлы <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index-finished.html">index-finished.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">main-finished.js</a> из предыдущей статьи в новую директорию на вашем компьютере.</p>
+Для выполнения упражнения вы можете использовать сайт [JSBin](http://jsbin.com/) или [Thimble](https://thimble.mozilla.org/). Вы можете вставлять HTML, CSS и JavaScript-код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов `<script>`/`<style>`.
 
-<p>Для выполнения упражнения вы можете использовать сайт <a class="external external-icon" href="http://jsbin.com/">JSBin</a> или <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a>. Вы можете вставлять HTML, CSS и JavaScript-код в один из этих онлайн-редакторов. Если ваш онлайн-редактор не поддерживает раздельные панели для редактирования JavaScript/CSS кода, то вы можете встроить код в HTML с помощью тегов <code>&lt;script&gt;</code>/<code>&lt;style&gt;</code>.</p>
+> **Примечание:** . Если у вас что-то не получается — попросите о помощи. Более подробная информация находится в секции [Assessment or further help](#assessment_or_further_help) в конце этой страницы.
 
-<div class="note">
-<p><strong>Примечание</strong>. Если у вас что-то не получается — попросите о помощи. Более подробная информация находится в секции <a href="#assessment_or_further_help">Assessment or further help</a> в конце этой страницы.</p>
-</div>
+## Краткое описание проекта
 
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+Наша весёлая демонстрация шаров - это весело, но теперь мы хотим сделать её немного более интерактивной, добавив контролируемый пользователем злой круг, который будет есть шары, если он их поймает. Мы также хотим проверить ваши навыки создания объектов, создав общий объект `Shape()`, который могут наследовать наши шары и злой круг. Наконец, мы хотим добавить счётчик очков, чтобы отслеживать количество оставшихся шаров для захвата.
 
-<p>Наша весёлая демонстрация шаров - это весело, но теперь мы хотим сделать её немного более интерактивной, добавив контролируемый пользователем злой круг, который будет есть шары, если он их поймает. Мы также хотим проверить ваши навыки создания объектов, создав общий объект <code>Shape()</code>, который могут наследовать наши шары и злой круг. Наконец, мы хотим добавить счётчик очков, чтобы отслеживать количество оставшихся шаров для захвата.</p>
+Следующий скриншот даёт вам представление о том, как должна выглядеть готовая программа:
 
-<p>Следующий скриншот даёт вам представление о том, как должна выглядеть готовая программа:</p>
+![](https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13875/bouncing-evil-circle.png" style="display: block; margin: 0 auto;"></p>
+Чтобы дать вам больше идеи, посмотрите на [законченный пример](https://mdn.github.io/learning-area/javascript/oojs/assessment/) (не заглядывая в исходный код!)
 
-<ul>
-</ul>
+## Шаги по завершению
 
-<p>Чтобы дать вам больше идеи, посмотрите на <a href="https://mdn.github.io/learning-area/javascript/oojs/assessment/">законченный пример</a> (не заглядывая в исходный код!)</p>
+В следующих разделах описывается, что вам нужно делать.
 
-<h2 id="Шаги_по_завершению">Шаги по завершению</h2>
+### Создание наших новых объектов
 
-<p>В следующих разделах описывается, что вам нужно делать.</p>
+Прежде всего, измените существующий конструктор `Ball()` так, чтобы он стал конструктором `Shape()` и добавил новый конструктор `Ball()`:
 
-<h3 id="Создание_наших_новых_объектов">Создание наших новых объектов</h3>
+1.  Конструктор `Shape()` должен определять свойства `x`, `y`, `velX` и `velY`, так же, как и конструктор `Ball()`, но не свойства `color` и `size`.
+2.  Он также должен определить новое свойство`exists`, которое используется для отслеживания наличия шаров в программе (не было съедено злым кругом). Это должно быть логическое (`true` / `false`).
+3.  Конструктор `Ball()` должен наследовать свойства `x`, `y`, `velX`, `velY` и `exists` из конструктора `Shape()`.
+4.  Он также должен определить свойство `color` и `size`, как это сделал оригинальный конструктор `Ball()`.
+5.  Не забудьте установить `prototype` и `constructor` конструктора `Ball()` соответствующим образом.
 
-<p>Прежде всего, измените существующий конструктор <code>Ball()</code> так, чтобы он стал конструктором <code>Shape()</code> и добавил новый конструктор <code>Ball()</code>:</p>
+Определения меток шара `draw()`, `update()` и `collisionDetect()` должны быть такими же, как и раньше.
 
-<ol>
- <li>Конструктор <code>Shape()</code> должен определять свойства <code>x</code>, <code>y</code>, <code>velX</code> и <code>velY</code>,  так же, как и конструктор <code>Ball()</code>, но не свойства <code>color</code> и <code>size</code>.</li>
- <li>Он также должен определить новое свойство<code>exists</code>, которое используется для отслеживания наличия шаров в программе (не было съедено злым кругом). Это должно быть логическое (<code>true</code> / <code>false</code>).</li>
- <li>Конструктор <code>Ball()</code> должен наследовать свойства <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code> и <code>exists</code> из конструктора <code>Shape()</code>.</li>
- <li>Он также должен определить свойство <code>color</code> и <code>size</code>, как это сделал оригинальный конструктор <code>Ball()</code>.</li>
- <li>Не забудьте установить <code>prototype</code> и <code>constructor</code> конструктора <code>Ball()</code> соответствующим образом.</li>
-</ol>
+Вам также нужно добавить новый параметр в новый вызов конструктора `new Ball() ( ... )` - параметр `exists` должен быть 5-м параметром и ему должно быть присвоено значение `true`.
 
-<p>Определения меток шара <code>draw()</code>, <code>update()</code> и <code>collisionDetect()</code> должны быть такими же, как и раньше.</p>
+На этом этапе попробуйте перезагрузить код - он должен работать так же, как и раньше, с нашими перепроектированными объектами.
 
-<p>Вам также нужно добавить новый параметр в новый вызов конструктора <code>new Ball() ( ... )</code> - параметр <code>exists</code> должен быть 5-м параметром и ему должно быть присвоено значение <code>true</code>.</p>
+### Определение EvilCircle()
 
-<p>На этом этапе попробуйте перезагрузить код - он должен работать так же, как и раньше, с нашими перепроектированными объектами.</p>
+Теперь пришло время встретить плохого парня - `EvilCircle()`! Наша игра будет включать только один злой круг, но мы все ещё будем определять его с помощью конструктора, который наследует от `Shape()`, чтобы дать вам некоторую практику. Возможно, вам захочется добавить ещё один круг в приложение, которое может контролироваться другим игроком или иметь несколько злобных окружений, управляемых компьютером. Вы, вероятно, не собираетесь захватить мир одним злым кругом, но он будет делать для этой оценки.
 
-<h3 id="Определение_EvilCircle">Определение EvilCircle()</h3>
+Конструктор `EvilCircle()` должен наследовать `x`, `y`, `velX`, `velY` и `exists` из `Shape()`, но `velX` и `velY` должны всегда равняться 20.
 
-<p>Теперь пришло время встретить плохого парня - <code>EvilCircle()</code>! Наша игра будет включать только один злой круг, но мы все ещё будем определять его с помощью конструктора, который наследует от <code>Shape()</code>, чтобы дать вам некоторую практику. Возможно, вам захочется добавить ещё один круг в приложение, которое может контролироваться другим игроком или иметь несколько злобных окружений, управляемых компьютером. Вы, вероятно, не собираетесь захватить мир одним злым кругом, но он будет делать для этой оценки.</p>
+Вы должны сделать что-то вроде `Shape.call(this, x, y, 20, 20, exists);`
 
-<p>Конструктор <code>EvilCircle()</code> должен наследовать <code>x</code>, <code>y</code>, <code>velX</code>, <code>velY</code> и <code>exists</code> из <code>Shape()</code>, но <code>velX</code> и <code>velY</code> должны всегда равняться 20.</p>
+Он также должен определить свои собственные свойства следующим образом:
 
-<p>Вы должны сделать что-то вроде <code>Shape.call(this, x, y, 20, 20, exists);</code></p>
+- `color` — `'white'`
+- `size` — `10`
 
-<p>Он также должен определить свои собственные свойства следующим образом:</p>
+Опять же, не забудьте определить свои унаследованные свойства как параметры в конструкторе и правильно установить свойства `prototype` и `constructor`.
 
-<ul>
- <li><code>color</code> — <code>'white'</code></li>
- <li><code>size</code> — <code>10</code></li>
-</ul>
+### Defining EvilCircle()'s methods
 
-<p>Опять же, не забудьте определить свои унаследованные свойства как параметры в конструкторе и правильно установить свойства <code>prototype</code> и <code>constructor</code>.</p>
+`EvilCircle()` должен иметь четыре метода, как описано ниже.
 
-<h3 id="Defining_EvilCircles_methods">Defining EvilCircle()'s methods</h3>
+#### `draw()`
 
-<p><code>EvilCircle()</code> должен иметь четыре метода, как описано ниже.</p>
+Этот метод имеет ту же цель, что и метод `draw()` метода `Ball()`: он рисует экземпляр объекта на холсте. Он будет работать очень схожим образом, поэтому вы можете начать с копирования определения `Ball.prototype.draw`. Затем вы должны внести следующие изменения:
 
-<h4 id="draw"><code>draw()</code></h4>
+- Мы хотим, чтобы злой круг не был заполнен, а скорее имел внешнюю линию (удар). Вы можете добиться этого, обновив [`fillStyle`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) и [`fill()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill) до [`strokeStyle`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle) и s[`stroke()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke).
+- Мы также хотим сделать ход немного толще, так что вы можете увидеть злой круг немного легче. Этого можно добиться, установив значение для [`lineWidth`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth) где-нибудь после вызова [`beginPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath) (3 будем делать).
 
-<p>Этот метод имеет ту же цель, что и метод <code>draw()</code> метода <code>Ball()</code>: он рисует экземпляр объекта на холсте. Он будет работать очень схожим образом, поэтому вы можете начать с копирования определения <code>Ball.prototype.draw</code>. Затем вы должны внести следующие изменения:</p>
+#### `checkBounds()`
 
-<ul>
- <li>Мы хотим, чтобы злой круг не был заполнен, а скорее имел внешнюю линию (удар). Вы можете добиться этого, обновив <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code> до <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeStyle">strokeStyle</a></code> и s<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/stroke">stroke()</a></code>.</li>
- <li>Мы также хотим сделать ход немного толще, так что вы можете увидеть злой круг немного легче. Этого можно добиться, установив значение для <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/lineWidth">lineWidth</a></code> где-нибудь после вызова <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code> (3 будем делать).</li>
-</ul>
+Этот метод будет делать то же самое, что и первая часть функции `Ball()`'s `update()`, чтобы посмотреть, не исчезнет ли злой круг от края экрана и не прекратит это делать. Опять же, вы можете просто скопировать определение `Ball.prototype.update`, но есть несколько изменений, которые вы должны сделать:
 
-<h4 id="checkBounds"><code>checkBounds()</code></h4>
+- Избавьтесь от последних двух строк - мы не хотим автоматически обновлять позицию злого круга на каждом кадре, потому что мы будем перемещать его каким-то другим способом, как вы увидите ниже.
+- Внутри операторов `if()`, если тесты возвращают true, мы не хотим обновлять `velX` / `velY`; мы хотим вместо этого изменить значение `x` / `y`, так что злой круг возвращается на экран немного. Добавление или вычитание (по мере необходимости) свойства `size` злого круга имеет смысл.
 
-<p>Этот метод будет делать то же самое, что и первая часть функции  <code>Ball()</code>'s <code>update()</code>, чтобы посмотреть, не исчезнет ли злой круг от края экрана и не прекратит это делать. Опять же, вы можете просто скопировать определение <code>Ball.prototype.update</code>, но есть несколько изменений, которые вы должны сделать:</p>
+#### `setControls()`
 
-<ul>
- <li>Избавьтесь от последних двух строк - мы не хотим автоматически обновлять позицию злого круга на каждом кадре, потому что мы будем перемещать его каким-то другим способом, как вы увидите ниже.</li>
- <li>Внутри операторов <code>if()</code>, если тесты возвращают true, мы не хотим обновлять <code>velX</code> / <code>velY</code>; мы хотим вместо этого изменить значение <code>x</code> / <code>y</code>, так что злой круг возвращается на экран немного. Добавление или вычитание (по мере необходимости) свойства <code>size</code> злого круга имеет смысл.</li>
-</ul>
+Этот метод добавит обработчик событий `onkeydown` к объекту `window`, чтобы при нажатии определённых клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещён внутри определения метода:
 
-<h4 id="setControls"><code>setControls()</code></h4>
-
-<p>Этот метод добавит обработчик событий <code>onkeydown</code> к объекту <code>window</code>, чтобы при нажатии определённых клавиш клавиатуры мы могли перемещать злой круг вокруг. Следующий код должен быть помещён внутри определения метода:</p>
-
-<pre class="brush: js">var _this = this;
+```js
+var _this = this;
 window.onkeydown = function(e) {
     if (e.keyCode === 65) {
       _this.x -= _this.velX;
@@ -122,82 +99,70 @@ window.onkeydown = function(e) {
     } else if (e.keyCode === 83) {
       _this.y += _this.velY;
     }
-  }</pre>
+  }
+```
 
-<p>Поэтому, когда нажата клавиша, проконсультируется о свойствах <a href="https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode">keyCode</a> объекта события, чтобы увидеть, какая клавиша нажата. Если это один из четырёх, представленных указанными ключевыми кодами, тогда злой круг будет перемещаться влево / вправо / вверх / вниз.</p>
+Поэтому, когда нажата клавиша, проконсультируется о свойствах [keyCode](/ru/docs/Web/API/KeyboardEvent/keyCode) объекта события, чтобы увидеть, какая клавиша нажата. Если это один из четырёх, представленных указанными ключевыми кодами, тогда злой круг будет перемещаться влево / вправо / вверх / вниз.
 
-<ul>
- <li>Для бонусного пункта сообщите нам, к каким ключам относятся указанные коды ключей.</li>
- <li>В другой бонусной точке вы можете сказать нам, почему нам пришлось установить <code>var _this = this</code>; в позиции, в которой он находится? Это как-то связано с функциональной областью.</li>
-</ul>
+- Для бонусного пункта сообщите нам, к каким ключам относятся указанные коды ключей.
+- В другой бонусной точке вы можете сказать нам, почему нам пришлось установить `var _this = this`; в позиции, в которой он находится? Это как-то связано с функциональной областью.
 
-<h4 id="collisionDetect"><code>collisionDetect()</code></h4>
+#### `collisionDetect()`
 
-<p>Этот метод будет действовать очень похоже на метод <code>collisionDetect()</code> в <code>Ball()</code>, поэтому вы можете использовать его в качестве основы для этого нового метода. Но есть несколько отличий:</p>
+Этот метод будет действовать очень похоже на метод `collisionDetect()` в `Ball()`, поэтому вы можете использовать его в качестве основы для этого нового метода. Но есть несколько отличий:
 
-<ul>
- <li>В внешнем выражении <code>if</code> вам больше не нужно проверять, совпадает ли текущий мяч на итерации с шаром, который выполняет проверку, потому что он больше не является мячиком, это злой круг! Вместо этого вам нужно выполнить проверку, чтобы проверить, существует ли проверенный шар (с каким свойством вы могли бы это сделать?). Если этого не существует, он уже был съеден злым кругом, поэтому нет необходимости проверять его снова.</li>
- <li>Во внутреннем <code>if</code>-выражении вы больше не хотите, чтобы объекты меняли цвет при обнаружении столкновения - вместо этого вы хотите установить любые шары, которые сталкиваются с злым кругом, чтобы больше не существовать (опять же, как вы думаете, d сделать это?).</li>
-</ul>
+- В внешнем выражении `if` вам больше не нужно проверять, совпадает ли текущий мяч на итерации с шаром, который выполняет проверку, потому что он больше не является мячиком, это злой круг! Вместо этого вам нужно выполнить проверку, чтобы проверить, существует ли проверенный шар (с каким свойством вы могли бы это сделать?). Если этого не существует, он уже был съеден злым кругом, поэтому нет необходимости проверять его снова.
+- Во внутреннем `if`-выражении вы больше не хотите, чтобы объекты меняли цвет при обнаружении столкновения - вместо этого вы хотите установить любые шары, которые сталкиваются с злым кругом, чтобы больше не существовать (опять же, как вы думаете, d сделать это?).
 
-<h3 id="Приведение_злого_круга_в_программу">Приведение злого круга в программу</h3>
+### Приведение злого круга в программу
 
-<p>Теперь мы определили злой круг, нам нужно на самом деле заставить его появиться на нашей сцене. Для этого вам нужно внести некоторые изменения в функцию <code>loop()</code>.</p>
+Теперь мы определили злой круг, нам нужно на самом деле заставить его появиться на нашей сцене. Для этого вам нужно внести некоторые изменения в функцию `loop()`.
 
-<ul>
- <li>Прежде всего, создайте новый экземпляр объекта злого круга (указав необходимые параметры), затем вызовите его метод <code>setControls()</code>. Вам нужно только сделать эти две вещи один раз, а не на каждой итерации цикла.</li>
- <li>В точке, где вы прокручиваете каждый шар и вызываете функции <code>draw()</code>, <code>update()</code> и <code>collisionDetect()</code> для каждого из них, делайте так, чтобы эти функции вызывались только в том случае, если текущий шар существует.</li>
- <li>На каждой итерации цикла вызовите методы draw <code>draw()</code>, <code>checkBounds()</code> и <code>collisionDetect()</code> для злого шарика.</li>
-</ul>
+- Прежде всего, создайте новый экземпляр объекта злого круга (указав необходимые параметры), затем вызовите его метод `setControls()`. Вам нужно только сделать эти две вещи один раз, а не на каждой итерации цикла.
+- В точке, где вы прокручиваете каждый шар и вызываете функции `draw()`, `update()` и `collisionDetect()` для каждого из них, делайте так, чтобы эти функции вызывались только в том случае, если текущий шар существует.
+- На каждой итерации цикла вызовите методы draw `draw()`, `checkBounds()` и `collisionDetect()` для злого шарика.
 
-<h3 id="Реализация_счётчика_баллов">Реализация счётчика баллов</h3>
+### Реализация счётчика баллов
 
-<p>Чтобы выполнить счётчик счётчиков, выполните следующие действия:</p>
+Чтобы выполнить счётчик счётчиков, выполните следующие действия:
 
-<ol>
- <li>В своём HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».</li>
- <li>В вашем файле CSS добавьте следующее правило внизу:
-  <pre class="brush: css">p {
-  position: absolute;
-  margin: 0;
-  top: 35px;
-  right: 5px;
-  color: #aaa;
-}</pre>
- </li>
- <li>В своём JavaScript сделайте следующие обновления:
-  <ul>
-   <li>Создайте переменную, которая хранит ссылку на абзац.</li>
-   <li>Держите подсчёт количества шаров на экране в некотором роде.</li>
-   <li>Увеличьте количество и покажите обновлённое количество шаров каждый раз, когда шар добавляется в сцену.</li>
-   <li>Уменьшите счёт и покажите обновлённое количество мячей каждый раз, когда злой круг ест шарик (его не существует).</li>
-  </ul>
- </li>
-</ol>
+1.  В своём HTML-файле добавьте элемент {{HTMLElement ("p")}} непосредственно под элементом {{HTMLElement ("h1")}}, содержащим текст «Ball count:».
+2.  В вашем файле CSS добавьте следующее правило внизу:
+
+    ```css
+    p {
+      position: absolute;
+      margin: 0;
+      top: 35px;
+      right: 5px;
+      color: #aaa;
+    }
+    ```
 
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+3.  В своём JavaScript сделайте следующие обновления:
 
-<ul>
- <li>Эта оценка довольно сложная. Делайте каждый шаг медленно и осторожно.</li>
- <li>Может быть, идея сохранить отдельную копию демонстрации после того, как вы получите каждый этап работы, так что вы можете вернуться к ней, если позже окажетесь в беде.</li>
-</ul>
+    - Создайте переменную, которая хранит ссылку на абзац.
+    - Держите подсчёт количества шаров на экране в некотором роде.
+    - Увеличьте количество и покажите обновлённое количество шаров каждый раз, когда шар добавляется в сцену.
+    - Уменьшите счёт и покажите обновлённое количество мячей каждый раз, когда злой круг ест шарик (его не существует).
 
-<h2 id="Assessment">Assessment</h2>
+## Советы и подсказки
 
-<p>Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю / наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав <a href="https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689">тему обсуждения для этого упражнения</a> или в IRC-канале <a href="irc://irc.mozilla.org/mdn">#mdn</a> в <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Сначала попробуйте упражнение - ничего не выиграть от обмана!</p>
+- Эта оценка довольно сложная. Делайте каждый шаг медленно и осторожно.
+- Может быть, идея сохранить отдельную копию демонстрации после того, как вы получите каждый этап работы, так что вы можете вернуться к ней, если позже окажетесь в беде.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}</p>
+## Assessment
 
+Если вы проводите эту оценку в рамках организованного курса, вы должны уметь отдать свою работу своему учителю / наставнику для маркировки. Если вы самообучаетесь, то вы можете получить руководство по маркировке довольно легко, задав [тему обсуждения для этого упражнения](https://discourse.mozilla.org/t/adding-features-to-our-bouncing-balls-demo-assessment/24689) или в IRC-канале [#mdn](irc://irc.mozilla.org/mdn) в [Mozilla IRC](https://wiki.mozilla.org/IRC). Сначала попробуйте упражнение - ничего не выиграть от обмана!
 
+{{PreviousMenuNext("Learn/JavaScript/Objects/Object_building_practice", "", "Learn/JavaScript/Objects")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Basics">Object basics</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Inheritance in JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Working with JSON data</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Object building practice</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Adding features to our bouncing balls demo</a></li>
-</ul>
+- [Object basics](/ru/docs/Learn/JavaScript/Objects/Basics)
+- [Object-oriented JavaScript for beginners](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS)
+- [Object prototypes](/ru/docs/Learn/JavaScript/Objects/Object_prototypes)
+- [Inheritance in JavaScript](/ru/docs/Learn/JavaScript/Objects/Inheritance)
+- [Working with JSON data](/ru/docs/Learn/JavaScript/Objects/JSON)
+- [Object building practice](/ru/docs/Learn/JavaScript/Objects/Object_building_practice)
+- [Adding features to our bouncing balls demo](/ru/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/javascript/objects/basics/index.md b/files/ru/learn/javascript/objects/basics/index.md
index ff32dde49a7134..c457150cd22a32 100644
--- a/files/ru/learn/javascript/objects/basics/index.md
+++ b/files/ru/learn/javascript/objects/basics/index.md
@@ -7,42 +7,36 @@ tags:
 translation_of: Learn/JavaScript/Objects/Basics
 original_slug: Learn/JavaScript/Объекты/Основы
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
 
-<div>{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>
+В этой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.
 
-<p class="summary">В этой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.</p>
+| Необходимые знания: | Элементарная компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. [Первые шаги](/ru/docs/Learn/JavaScript/Первые_шаги) и [Структурные элементы](/ru/docs/Learn/JavaScript/Building_blocks)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Понимать основу теории перед началом объектно-ориентированного программирования, как это связано с JavaScript ("большинство сущностей являются объектами"), и как начать работу с объектами JavaScript.                               |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Элементарная компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. <a href="/ru/docs/Learn/JavaScript/Первые_шаги">Первые шаги</a> и <a href="/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать основу теории перед началом объектно-ориентированного программирования, как это связано с JavaScript ("большинство сущностей являются объектами"), и как начать работу с объектами JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Основы объектов
 
-<h2 id="Основы_объектов">Основы объектов</h2>
+Объект — это совокупность связанных данных и/или функциональных возможностей. Обычно состоят из нескольких переменных и функций, которые называются свойства и методы, если они находятся внутри объектов. Разберём пример, чтобы показать, как они выглядят.
 
-<p>Объект — это совокупность связанных данных и/или функциональных возможностей. Обычно состоят из нескольких переменных и функций, которые называются свойства и методы, если они находятся внутри объектов. Разберём пример, чтобы показать, как они выглядят.</p>
+Чтобы начать, скопируйте себе [oojs.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html) файл. В нём содержится очень мало: {{HTMLElement("script")}} элемент для написания в нём исходного кода. Мы будем использовать это как основу для изучения основ синтаксиса объектов. Во время работы с этим примером у вас должна быть открытая [консоль JavaScript инструментов разработчика](/ru/docs/Learn/Discover_browser_developer_tools#%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D0%BB%D1%8C_JavaScript), готовая к вводу некоторых команд.
 
-<p>Чтобы начать, скопируйте себе <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> файл. В нём содержится очень мало: {{HTMLElement("script")}} элемент для написания в нём исходного кода. Мы будем использовать это как основу для изучения основ синтаксиса объектов. Во время работы с этим примером у вас должна быть открытая <a href="/ru/docs/Learn/Discover_browser_developer_tools#%D0%9A%D0%BE%D0%BD%D1%81%D0%BE%D0%BB%D1%8C_JavaScript">консоль JavaScript инструментов разработчика</a>, готовая к вводу некоторых команд.</p>
+Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:
 
-<p>Как и во многих случаях в JavaScript, создание объекта часто начинается с определения и инициализации переменной. Попробуйте ввести следующий код JavaScript в ваш файл, а затем сохраните файл и обновите страницу браузера:</p>
+```js
+const person = {};
+```
 
-<pre class="brush: js">const person = {};</pre>
+Если вы введёте `person` в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:
 
-<p>Если вы введёте <code>person</code> в текстовое JS консоль и нажмёте клавишу Enter, должен получиться следующий результат:</p>
+```js
+Object { }
+```
 
-<pre class="brush: js"><code class="language-js">Object</code><code> </code>{ }</pre>
+Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:
 
-<p>Поздравляем, вы только что создали ваш первый объект. Но это пустой объект, поэтому мы не можем с ним ничего сделать. Давайте обновим наш объект, чтобы он выглядел так:</p>
-
-<pre class="brush: js">const person = {
+```js
+const person = {
   name: ['Bob', 'Smith'],
   age: 32,
   gender: 'male',
@@ -54,145 +48,182 @@ original_slug: Learn/JavaScript/Объекты/Основы
     alert('Hi! I\'m ' + this.name[0] + '.');
   }
 };
-</pre>
+```
 
-<p>После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:</p>
+После сохранения и обновления, попробуйте ввести что-нибудь следующее в консоль JavaScript браузера:
 
-<pre class="brush: js"><code class="language-js">person.name</code>
+```js
+person.name
 person.name[0]
 person.age
 person.interests[1]
 person.bio()
-person.greeting()</pre>
+person.greeting()
+```
 
-<p>Как видите, наш объект содержит некоторые данные, а также несколько методов. У нас же с помощью простого синтаксиса есть доступ к ним.</p>
+Как видите, наш объект содержит некоторые данные, а также несколько методов. У нас же с помощью простого синтаксиса есть доступ к ним.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если у вас возникли проблемы с применением файла в работе, попробуйте сравнить ваш код с нашей версией — см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (также <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">see it running live</a>). Одна из распространённых ошибок, когда вы начинаете с объектами ставить запятую в конце последнего члена — это приводит к ошибке.</p>
-</div>
+> **Примечание:** Если у вас возникли проблемы с применением файла в работе, попробуйте сравнить ваш код с нашей версией — см. [oojs-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html) (также [see it running live](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html)). Одна из распространённых ошибок, когда вы начинаете с объектами ставить запятую в конце последнего члена — это приводит к ошибке.
 
-<p>Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример <code>name</code> и <code>age</code> выше), и значение (пример <code>['Bob', 'Smith']</code> и <code>32</code>). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:</p>
+Итак что здесь происходит? Объект состоит из нескольких элементов, каждый из которых имеет своё название (пример `name` и `age` выше), и значение (пример `['Bob', 'Smith']` и `32`). Каждая пара название/значение должны быть разделены запятой, а название и значение в каждом случае разделяются двоеточием. Синтаксис всегда следует этому образцу:
 
-<pre class="brush: js">const objectName = {
+```js
+const objectName = {
   member1Name: member1Value,
   member2Name: member2Value,
   member3Name: member3Value
-};</pre>
+};
+```
 
-<p>Значение члена объекта может быть чем угодно — в нашем объекте person есть строка, число, два массива, и две функции. Первые четыре элемента это элементы данных, относящиеся к <strong>свойствам</strong> объекта. Последние два элемента являются функциями, которые позволяют объекту что-то сделать с элементами данных, и называются <strong>методами</strong> объекта.</p>
+Значение члена объекта может быть чем угодно — в нашем объекте person есть строка, число, два массива, и две функции. Первые четыре элемента это элементы данных, относящиеся к **свойствам** объекта. Последние два элемента являются функциями, которые позволяют объекту что-то сделать с элементами данных, и называются **методами** объекта.
 
-<p>Такие объекты называются <strong>литералами объекта</strong> (<strong>object literal</strong>) — мы буквально вписали все содержимое объекта для его создания. Этот способ сильно отличается от объектов реализованных классами, которые мы рассмотрим позже.</p>
+Такие объекты называются **литералами объекта** (**object literal**) — мы буквально вписали все содержимое объекта для его создания. Этот способ сильно отличается от объектов реализованных классами, которые мы рассмотрим позже.
 
-<p>Очень часто для создания объекта используется литерал объекта когда вам нужно каким-то образом перенести ряд структурированных, связанных элементов данных, например, отправляя запрос на сервер, для размещения их в базе данных. Отправка одного объекта намного эффективнее, чем отправка нескольких элементов по отдельности, и с ним легче работать чем с массивом, если требуется идентифицировать отдельные элементы по имени. </p>
+Очень часто для создания объекта используется литерал объекта когда вам нужно каким-то образом перенести ряд структурированных, связанных элементов данных, например, отправляя запрос на сервер, для размещения их в базе данных. Отправка одного объекта намного эффективнее, чем отправка нескольких элементов по отдельности, и с ним легче работать чем с массивом, если требуется идентифицировать отдельные элементы по имени.
 
-<h2 id="Точечная_запись_Dot_notation">Точечная запись (Dot notation)</h2>
+## Точечная запись (Dot notation)
 
-<p>Выше вы получили доступ к свойствам и методам используя <strong>точечную запись (dot notation). </strong>Имя объекта (person) действует как <strong>пространство имён (namespace) </strong>— оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (<strong>encapsulated)</strong> внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:</p>
+Выше вы получили доступ к свойствам и методам используя **точечную запись (dot notation).** Имя объекта (person) действует как **пространство имён (namespace)** — оно должно быть введено первым, для того чтобы получить доступ ко всему что заключено (**encapsulated)** внутри объекта. Далее вы пишете точку, затем элемент, к которому хотите получить доступ — это может быть имя простого свойства, элемент массива, или вызов одного из методов объекта, например:
 
-<pre class="brush: js">person.age
+```js
+person.age
 person.interests[1]
-person.bio()</pre>
+person.bio()
+```
 
-<h3 id="Внутренние_пространства_имён_Sub-namespaces">Внутренние пространства имён (Sub-namespaces)</h3>
+### Внутренние пространства имён (Sub-namespaces)
 
-<p>Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого</p>
+Можно даже сделать значением элемента объекта другой объект. Например, попробуйте изменить значение свойства name с такого
 
-<pre class="brush: js">name: ['Bob', 'Smith'],</pre>
+```js
+name: ['Bob', 'Smith'],
+```
 
-<p>на такое</p>
+на такое
 
-<pre class="brush: js">name : {
+```js
+name : {
   first: 'Bob',
   last: 'Smith'
-},</pre>
+},
+```
 
-<p>Здесь мы фактически создаём <strong>внутреннее пространство имён (sub-namespace). </strong>Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее: </p>
+Здесь мы фактически создаём **внутреннее пространство имён (sub-namespace).** Это звучит сложно, но на самом деле это не так — для доступа к этим элементам вам нужно сделать один дополнительный шаг с ещё одной точкой. Попробуйте в консоли браузера следующее:
 
-<pre class="brush: js">person.name.first
-person.name.last</pre>
+```js
+person.name.first
+person.name.last
+```
 
-<p><strong>Важно</strong>: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с</p>
+**Важно**: На этом этапе вам также нужно будет пересмотреть код метода и изменить все экземпляры с
 
-<pre class="brush: js">name[0]
-name[1]</pre>
+```js
+name[0]
+name[1]
+```
 
-<p>на</p>
+на
 
-<pre class="brush: js">name.first
-name.last</pre>
+```js
+name.first
+name.last
+```
 
-<p>Иначе ваши методы больше не будут работать.</p>
+Иначе ваши методы больше не будут работать.
 
-<h2 id="Скобочная_запись_Bracket_notation">Скобочная запись (Bracket notation)</h2>
+## Скобочная запись (Bracket notation)
 
-<p>Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:</p>
+Существует другой способ получить свойства объекта — использовать скобочную запись (bracket notation). Вместо написания этого кода:
 
-<pre class="brush: js">person.age
-person.name.first</pre>
+```js
+person.age
+person.name.first
+```
 
-<p>Вы можете использовать следующий</p>
+Вы можете использовать следующий
 
-<pre class="brush: js">person['age']
-person['name']['first']</pre>
+```js
+person['age']
+person['name']['first']
+```
 
-<p>Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.</p>
+Это выглядит очень похоже на то, как вы получаете элементы массива, и в принципе это так и есть — вместо использования числовых индексов для выбора элемента, вы ассоциируете имя свойства для каждого значения. Ничего удивительного, что эти объекты иногда называют ассоциативными массивами — они сопоставляют строки со значениями так же, как массивы сопоставляют числовые индексы со значениями.
 
-<h2 id="Запись_элементов_в_объект">Запись элементов в объект</h2>
+## Запись элементов в объект
 
-<p>До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:</p>
+До сих пор мы рассматривали только возврат (или получение) элементов объекта — вы так же можете установить (обновить) значение элемента объекта просто объявив элемент, который вы хотите установить (используя точечную или скобочную запись), например:
 
-<pre class="brush: js">person.age = 45;
-person['name']['last'] = 'Cratchit';</pre>
+```js
+person.age = 45;
+person['name']['last'] = 'Cratchit';
+```
 
-<p>Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились</p>
+Попробуйте ввести эти строки, а затем снова верните элементы, чтобы увидеть, как они изменились
 
-<pre class="brush: js">person.age
-person['name']['last']</pre>
+```js
+person.age
+person['name']['last']
+```
 
-<p>Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:</p>
+Вы можете не просто обновлять и устанавливать значения свойств и методов объекта, а так же устанавливать совершенно новые элементы. Попробуйте их в консоли JS:
 
-<pre class="brush: js">person['eyes'] = 'hazel';
-person.farewell = function() { alert("Bye everybody!"); }</pre>
+```js
+person['eyes'] = 'hazel';
+person.farewell = function() { alert("Bye everybody!"); }
+```
 
-<p>Теперь вы можете проверить ваши новые элементы:</p>
+Теперь вы можете проверить ваши новые элементы:
 
-<pre class="brush: js">person['eyes']
-person.farewell()</pre>
+```js
+person['eyes']
+person.farewell()
+```
 
-<p>Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:</p>
+Одним из полезных аспектов скобочной записи является то, что с её помощью можно динамически задавать не только значения элементов, но и их имена. Предположим, что мы хотим, чтобы пользователи могли хранить пользовательские типы данных, введя имя и значение элемента в два следующих поля? Мы могли бы получить эти значения следующим образом:
 
-<pre class="brush: js">let myDataName = nameInput.value;
-let myDataValue = nameValue.value;</pre>
+```js
+let myDataName = nameInput.value;
+let myDataValue = nameValue.value;
+```
 
-<p>Затем мы можем добавить имя и значение этого нового элемента в объект <code>person</code> таким образом:</p>
+Затем мы можем добавить имя и значение этого нового элемента в объект `person` таким образом:
 
-<pre class="brush: js">person[myDataName] = myDataValue;</pre>
+```js
+person[myDataName] = myDataValue;
+```
 
-<p>Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта <code>person</code> :</p>
+Чтобы проверить это, попробуйте добавить следующие строки в свой код, после закрывающей скобки объекта `person` :
 
-<pre class="brush: js">let myDataName = 'height';
+```js
+let myDataName = 'height';
 let myDataValue = '1.75m';
-person[myDataName] = myDataValue;</pre>
+person[myDataName] = myDataValue;
+```
 
-<p>Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:</p>
+Теперь попробуйте сохранить и обновить, затем введите следующее в консоль браузера:
 
-<pre class="brush: js">person.height</pre>
+```js
+person.height
+```
 
-<p>Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.</p>
+Добавление свойства объекта с использованием вышеописанного метода невозможно с использованием точечной записи, которая может принимать только литеральное имя элемента, а не значение переменной указывающее на имя.
 
-<h2 id="Что_такое_this">Что такое "this"?</h2>
+## Что такое "this"?
 
-<p>Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:</p>
+Возможно, вы заметили что-то странное в наших методах. Посмотрите на этот пример:
 
-<pre class="brush: js">greeting: function() {
+```js
+greeting: function() {
   alert('Hi! I\'m ' + this.name.first + '.');
-}</pre>
+}
+```
 
-<p>Вы, вероятно, задаётесь вопросом, что такое "this"? Ключевое слово <code>this</code>, ссылается на текущий объект, внутри которого пишется код — поэтому в нашем случае <code>this</code> равен объекту <code>person</code>. Но почему просто не написать <code>person</code>? Как вы увидите в статье <a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Object-oriented JavaScript for beginners</a> (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., <code>this</code> очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта <code>person</code> могут иметь разные имена, но захотят использовать своё собственное имя при приветствии.</p>
+Вы, вероятно, задаётесь вопросом, что такое "this"? Ключевое слово `this`, ссылается на текущий объект, внутри которого пишется код — поэтому в нашем случае `this` равен объекту `person`. Но почему просто не написать `person`? Как вы увидите в статье [Object-oriented JavaScript for beginners](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS) (Объектно-ориентированный JavaScript для начинающих), когда мы начинаем создавать конструкторы и т.д., `this` очень полезен — он всегда будет гарантировать, что используется верное значение, когда контекст элемента изменяется (например, два разных экземпляра объекта `person` могут иметь разные имена, но захотят использовать своё собственное имя при приветствии.
 
-<p>Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов <code>person</code> :</p>
+Давайте проиллюстрируем, что мы имеем в виду, с упрощённой парой объектов `person` :
 
-<pre class="brush: js">const person1 = {
+```js
+const person1 = {
   name: 'Chris',
   greeting: function() {
     alert('Hi! I\'m ' + this.name + '.');
@@ -204,55 +235,58 @@ const person2 = {
   greeting: function() {
     alert('Hi! I\'m ' + this.name + '.');
   }
-}</pre>
+}
+```
 
-<p>В этом случае, <code>person1.greeting()</code> выведет "Hi! I'm Chris.". <code>person2.greeting()</code>, с другой стороны, выведет "Hi! I'm Brian.", хотя код метода одинаковый в обоих случаях. Как мы сказали ранее, <code>this</code> равен объекту, внутри которого находится код — это не очень полезно, когда вы пишите литералы объектов вручную, но оно действительно помогает, когда вы генерируете объекты динамически (например используя конструкторы). Это станет понятнее чуть позже.</p>
+В этом случае, `person1.greeting()` выведет "Hi! I'm Chris.". `person2.greeting()`, с другой стороны, выведет "Hi! I'm Brian.", хотя код метода одинаковый в обоих случаях. Как мы сказали ранее, `this` равен объекту, внутри которого находится код — это не очень полезно, когда вы пишите литералы объектов вручную, но оно действительно помогает, когда вы генерируете объекты динамически (например используя конструкторы). Это станет понятнее чуть позже.
 
-<h2 id="Все_это_время_вы_использовали_объекты">Все это время вы использовали объекты</h2>
+## Все это время вы использовали объекты
 
-<p>Пока вы проходили эти примеры, вы вероятно заметили, что точечная запись, которую вы использовали, выглядит очень знакомо. Это потому, что вы использовали её на протяжении всего курса! Каждый раз, когда мы работаем над примером, использующим встроенный API браузера или объект JavaScript, мы использовали объекты, потому что такие функции построены с использованием тех же структур объектов, которые мы здесь рассматривали, хотя и более сложные, чем наши собственные пользовательские примеры. </p>
+Пока вы проходили эти примеры, вы вероятно заметили, что точечная запись, которую вы использовали, выглядит очень знакомо. Это потому, что вы использовали её на протяжении всего курса! Каждый раз, когда мы работаем над примером, использующим встроенный API браузера или объект JavaScript, мы использовали объекты, потому что такие функции построены с использованием тех же структур объектов, которые мы здесь рассматривали, хотя и более сложные, чем наши собственные пользовательские примеры.
 
-<p>Поэтому, когда вы использовали строковые методы, такие как:</p>
+Поэтому, когда вы использовали строковые методы, такие как:
 
-<pre class="brush: js">myString.split(',');</pre>
+```js
+myString.split(',');
+```
 
-<p>Вы использовали метод доступный в экземпляре класса <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>. Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, и поэтому имеет несколько общих методов/свойств, доступных на нем.</p>
+Вы использовали метод доступный в экземпляре класса [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String). Каждый раз создавая строку в вашем коде, эта строка автоматически создаётся как экземпляр [`String`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), и поэтому имеет несколько общих методов/свойств, доступных на нем.
 
-<p>Когда вы обращались к объектной модели документа (DOM), используя следующие строки:</p>
+Когда вы обращались к объектной модели документа (DOM), используя следующие строки:
 
-<pre class="brush: js">const myDiv = document.createElement('div');
-const myVideo = document.querySelector('video');</pre>
+```js
+const myDiv = document.createElement('div');
+const myVideo = document.querySelector('video');
+```
 
-<p>Вы использовали методы доступные в экземпляре класса <code><a href="/en-US/docs/Web/API/Document">Document</a></code>. Для каждой загруженной веб-страницы создаётся экземпляр <code><a href="/en-US/docs/Web/API/Document">Document</a></code>, называемый <code>document</code>, который представляет всю структуру страницы, её содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.</p>
+Вы использовали методы доступные в экземпляре класса [`Document`](/en-US/docs/Web/API/Document). Для каждой загруженной веб-страницы создаётся экземпляр [`Document`](/en-US/docs/Web/API/Document), называемый `document`, который представляет всю структуру страницы, её содержимое и другие функции, такие как URL-адрес. Опять же, это означает, что он имеет несколько общих методов/свойств, доступных на нем.
 
-<p>То же самое относится и к любому другому встроенному объекту/API, который вы использовали — <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code>, и т. д.</p>
+То же самое относится и к любому другому встроенному объекту/API, который вы использовали — [`Array`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), [`Math`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math), и т. д.
 
-<p>Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, <a href="/ru/docs/Web/API/Notifications_API">Notifications API</a> — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:</p>
+Обратите внимание, что встроенные объекты/API не всегда создают экземпляры объектов автоматически. Как пример, [Notifications API](/ru/docs/Web/API/Notifications_API) — который позволяет новым браузерам запускать системные уведомления, требует, чтобы вы создавали новый экземпляр объекта с помощью конструктора для каждого уведомления, которое вы хотите запустить. Попробуйте ввести следующее в консоль JavaScript:
 
-<pre class="brush: js">const myNotification = new Notification('Hello!');</pre>
+```js
+const myNotification = new Notification('Hello!');
+```
 
-<p>Опять же, мы рассмотрим конструкторы в следующей статье.</p>
+Опять же, мы рассмотрим конструкторы в следующей статье.
 
-<div class="note">
-<p><strong>Примечание</strong>: Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждёт ответа, который мы знаем как возвращаемое (return) значение.</p>
-</div>
+> **Примечание:** Полезно подумать о том, как объекты взаимодействуют посредством передачи сообщений - когда объекту требуется другой объект для выполнения какого-либо действия, он часто отправляет сообщение другому объекту через один из его методов и ждёт ответа, который мы знаем как возвращаемое (return) значение.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Поздравляем, вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript - в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности - если бы мы пытались отслеживать все свойства и методы в нашем объекте <code>person</code> как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своём собственном блоке, вне опасности.</p>
+Поздравляем, вы достигли конца нашей первой статьи о объектах JS, теперь у вас должно быть хорошее представление о том, как работать с объектами в JavaScript - в том числе создавать свои собственные простые объекты. Вы также должны понимать, что объекты очень полезны в качестве структур для хранения связанных данных и функциональности - если бы мы пытались отслеживать все свойства и методы в нашем объекте `person` как отдельные переменные и функции, это было неэффективно, и мы бы рисковали столкнуться с другими переменными и функциями с такими же именами. Объекты позволяют нам безопасно хранить информацию в своём собственном блоке, вне опасности.
 
-<p>В следующей статье мы начнём рассматривать теорию объектно-ориентированного программирования (ООП) и как эти техники могут быть использованы в JavaScript </p>
+В следующей статье мы начнём рассматривать теорию объектно-ориентированного программирования (ООП) и как эти техники могут быть использованы в JavaScript
 
-<p>{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>
+{{NextMenu("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B">Основы объекта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes">Прототипы объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance">Наследование в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON">Работа с данными JSON</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice">Практика построения объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features">Добавление функций в нашу демонстрацию прыгающих шаров</a></li>
-</ul>
+- [Основы объекта](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B)
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS)
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes)
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance)
+- [Работа с данными JSON](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON)
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice)
+- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/javascript/objects/classes_in_javascript/index.md b/files/ru/learn/javascript/objects/classes_in_javascript/index.md
index becbd8fb77fc4a..5077b63a2b8571 100644
--- a/files/ru/learn/javascript/objects/classes_in_javascript/index.md
+++ b/files/ru/learn/javascript/objects/classes_in_javascript/index.md
@@ -8,39 +8,26 @@ tags:
 translation_of: Learn/JavaScript/Objects/Inheritance
 original_slug: Learn/JavaScript/Objects/Inheritance
 ---
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
 
-<div>{{LearnSidebar}}</div>
+Теперь, когда объясняется большая часть подробностей OOJS, эта статья показывает, как создавать «дочерние» классы объектов (конструкторы), которые наследуют признаки из своих «родительских» классов. Кроме того, мы дадим некоторые советы о том, когда и где вы можете использовать OOJS , и посмотрим, как классы рассматриваются в современном синтаксисе ECMAScript.
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</div>
+| Необходимые знания: | Базовая компьютерная грамотность, понимание основ HTML и CSS, знакомство с основами JavaScript (см. [Первые шаги](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8) и [Структурные элементы](/ru/docs/Learn/JavaScript/Building_blocks)) and основы Объектно-ориентированного JS (см. [Введение в объекты](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B)). |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Понять, как можно реализовать наследование в JavaScript.                                                                                                                                                                                                                                                                                                                                                                                                       |
 
-<p class="summary">Теперь, когда объясняется большая часть подробностей OOJS, эта статья показывает, как создавать «дочерние» классы объектов (конструкторы), которые наследуют признаки из своих «родительских» классов. Кроме того, мы дадим некоторые советы о том, когда и где вы можете использовать OOJS , и посмотрим, как классы рассматриваются в современном синтаксисе ECMAScript.</p>
+## Прототипное наследование
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Базовая компьютерная грамотность, понимание основ HTML и CSS, знакомство с основами JavaScript (см. <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8">Первые шаги</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Building_blocks">Структурные элементы</a>) and основы Объектно-ориентированного JS (см. <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B">Введение в объекты</a>).</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, как можно реализовать наследование в JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+До сих пор мы видели некоторое наследование в действии - мы видели, как работают прототипы и как элементы наследуются, поднимаясь по цепочке. Но в основном это связано с встроенными функциями браузера. Как создать объект в JavaScript, который наследует от другого объекта?
 
-<h2 id="Прототипное_наследование">Прототипное наследование</h2>
+Давайте рассмотрим, как это сделать на конкретном примере.
 
-<p>До сих пор мы видели некоторое наследование в действии - мы видели, как работают прототипы и как элементы наследуются, поднимаясь по цепочке. Но в основном это связано с встроенными функциями браузера. Как создать объект в JavaScript, который наследует от другого объекта?</p>
+## Начало работы
 
-<p>Давайте рассмотрим, как это сделать на конкретном примере.</p>
+Прежде всего сделайте себе локальную копию нашего файла [oojs-class-inheritance-start.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html) (он также работает [в режиме реального времени](https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html)). В файле вы найдёте тот же пример конструктора `Person()`, который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:
 
-<h2 id="Начало_работы">Начало работы</h2>
-
-<p>Прежде всего сделайте себе локальную копию нашего файла <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-start.html">oojs-class-inheritance-start.html</a> (он также работает <a href="https://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-start.html">в режиме реального времени</a>). В файле вы найдёте тот же пример конструктора <code>Person()</code>, который мы использовали на протяжении всего модуля, с небольшим отличием - мы определили внутри конструктора только лишь свойства:</p>
-
-<pre class="brush: js">function Person(first, last, age, gender, interests) {
+```js
+function Person(first, last, age, gender, interests) {
   this.name = {
     first,
     last
@@ -48,44 +35,46 @@ original_slug: Learn/JavaScript/Objects/Inheritance
   this.age = age;
   this.gender = gender;
   this.interests = interests;
-};</pre>
+};
+```
 
-<p><em>Все</em> методы определены в прототипе конструктора. Например:</p>
+_Все_ методы определены в прототипе конструктора. Например:
 
-<pre class="brush: js">Person.prototype.greeting = function() {
+```js
+Person.prototype.greeting = function() {
   alert('Hi! I\'m ' + this.name.first + '.');
-};</pre>
+};
+```
 
-<div class="note">
-<p><strong>Примечание</strong>. В исходном коде вы также увидите определённые методы <code>bio()</code> и <code>farewell()</code>. Позже вы увидите, как они могут быть унаследованы другими конструкторами.</p>
-</div>
+> **Примечание:** . В исходном коде вы также увидите определённые методы `bio()` и `farewell()`. Позже вы увидите, как они могут быть унаследованы другими конструкторами.
 
-<p>Скажем так, мы хотели создать класс <code>Teacher</code>, подобный тому, который мы описали в нашем первоначальном объектно-ориентированном определении, которое наследует всех членов от <code>Person</code>, но также включает в себя:</p>
+Скажем так, мы хотели создать класс `Teacher`, подобный тому, который мы описали в нашем первоначальном объектно-ориентированном определении, которое наследует всех членов от `Person`, но также включает в себя:
 
-<ol>
- <li>Новое свойство, <code>subject</code> - оно будет содержать предмет, который преподаёт учитель.</li>
- <li>Обновлённый метод <code>greeting()</code>, который звучит немного более формально, чем стандартный метод <code>greeting()</code>— более подходит для учителя, обращающегося к некоторым ученикам в школе.</li>
-</ol>
+1.  Новое свойство, `subject` - оно будет содержать предмет, который преподаёт учитель.
+2.  Обновлённый метод `greeting()`, который звучит немного более формально, чем стандартный метод `greeting()`— более подходит для учителя, обращающегося к некоторым ученикам в школе.
 
-<h2 id="Определение_функции-конструктора_Teacher">Определение функции-конструктора Teacher()</h2>
+## Определение функции-конструктора Teacher()
 
-<p>Первое, что нам нужно сделать, это создать конструктор <code>Teacher()</code> - добавьте ниже следующий код:</p>
+Первое, что нам нужно сделать, это создать конструктор `Teacher()` - добавьте ниже следующий код:
 
-<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+```js
+function Teacher(first, last, age, gender, interests, subject) {
   Person.call(this, first, last, age, gender, interests);
 
   this.subject = subject;
-}</pre>
+}
+```
 
-<p>Это похоже на конструктор Person во многих отношениях, но здесь есть что-то странное, что мы не видели раньше - функцию <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call">call()</a></code>. Эта функция в основном позволяет вам вызывать функцию, определённую где-то в другом месте, но в текущем контексте. Первый параметр указывает значение <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, которое вы хотите использовать при выполнении функции, а остальные параметры - те, которые должны быть переданы функции при её вызове.</p>
+Это похоже на конструктор Person во многих отношениях, но здесь есть что-то странное, что мы не видели раньше - функцию [`call()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call). Эта функция в основном позволяет вам вызывать функцию, определённую где-то в другом месте, но в текущем контексте. Первый параметр указывает значение [`this`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this), которое вы хотите использовать при выполнении функции, а остальные параметры - те, которые должны быть переданы функции при её вызове.
 
-<p>Мы хотим, чтобы конструктор <code>Teacher()</code> принимал те же параметры, что и конструктор <code>Person()</code>, от которого он наследуется, поэтому мы указываем их как параметры в вызове <code>call()</code>.</p>
+Мы хотим, чтобы конструктор `Teacher()` принимал те же параметры, что и конструктор `Person()`, от которого он наследуется, поэтому мы указываем их как параметры в вызове `call()`.
 
-<p>Последняя строка внутри конструктора просто определяет новое свойство <code>subject</code>, которое будут иметь учителя, и которого нет у Person().</p>
+Последняя строка внутри конструктора просто определяет новое свойство `subject`, которое будут иметь учителя, и которого нет у Person().
 
-<p>В качестве примечания мы могли бы просто сделать это:</p>
+В качестве примечания мы могли бы просто сделать это:
 
-<pre class="brush: js">function Teacher(first, last, age, gender, interests, subject) {
+```js
+function Teacher(first, last, age, gender, interests, subject) {
   this.name = {
     first,
     last
@@ -94,55 +83,67 @@ original_slug: Learn/JavaScript/Objects/Inheritance
   this.gender = gender;
   this.interests = interests;
   this.subject = subject;
-}</pre>
+}
+```
 
-<p>Но это просто переопределяет свойства заново, а не наследует их от <code>Person()</code>, так что теряется смысл того, что мы пытаемся сделать. Он также занимает больше строк кода.</p>
+Но это просто переопределяет свойства заново, а не наследует их от `Person()`, так что теряется смысл того, что мы пытаемся сделать. Он также занимает больше строк кода.
 
-<h3 id="Наследование_от_конструктора_без_параметров">Наследование от конструктора без параметров</h3>
+### Наследование от конструктора без параметров
 
-<p>Обратите внимание, что если конструктор, от которого вы наследуете, не принимает значения своего свойства из параметров, вам не нужно указывать их в качестве дополнительных аргументов в <code>call()</code>. Так, например, если у вас было что-то действительно простое:</p>
+Обратите внимание, что если конструктор, от которого вы наследуете, не принимает значения своего свойства из параметров, вам не нужно указывать их в качестве дополнительных аргументов в `call()`. Так, например, если у вас было что-то действительно простое:
 
-<pre class="brush: js">function Brick() {
+```js
+function Brick() {
   this.width = 10;
   this.height = 20;
-}</pre>
+}
+```
 
-<p>Вы можете наследовать свойства <code>width</code> и <code>height</code>, выполнив это (как и другие шаги, описанные ниже, конечно):</p>
+Вы можете наследовать свойства `width` и `height`, выполнив это (как и другие шаги, описанные ниже, конечно):
 
-<pre class="brush: js">function BlueGlassBrick() {
+```js
+function BlueGlassBrick() {
   Brick.call(this);
 
   this.opacity = 0.5;
   this.color = 'blue';
-}</pre>
+}
+```
+
+Обратите внимание, что мы указали только `this` внутри `call()` - никаких других параметров не требуется, поскольку мы не наследуем никаких свойств родителя, которые задаются через параметры.
+
+## Установка Teacher()'s prototype и конструктор ссылок
+
+Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство `prototype`, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства `prototype` конструктора `Person`. Чтобы увидеть это, введите `Object.getOwnPropertyNames(Teacher.prototype)` в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив `Teacher` на `Person`. Новый конструктор _не наследует_ эти методы. Чтобы увидеть это, сравните выводы в консоль `Person.prototype.greeting` и `Teacher.prototype.greeting`. Нам нужно заставить `Teacher()` наследовать методы, определённые на прототипе `Person()`. Итак, как мы это делаем?
+
+1.  Добавьте следующую строку ниже своего предыдущего добавления:
+
+    ```js
+    Teacher.prototype = Object.create(Person.prototype);
+    ```
 
-<p>Обратите внимание, что мы указали только <code>this</code> внутри <code>call()</code> - никаких других параметров не требуется, поскольку мы не наследуем никаких свойств родителя, которые задаются через параметры.</p>
+    Здесь наш друг [`create()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением `Teacher.prototype`. Новый объект имеет свой прототип `Person.prototype` и, следовательно, наследует, если и когда это необходимо, все доступные методы `Person.prototype`.
 
-<h2 id="Установка_Teachers_prototype_и_конструктор_ссылок">Установка Teacher()'s prototype и конструктор ссылок</h2>
+2.  Нам нужно сделать ещё одну вещь, прежде чем двигаться дальше. После добавления последней строки, `Teacher.prototype.constructor` стало равным `Person()`, потому что мы просто устанавливаем `Teacher.prototype` для ссылки на объект, который наследует его свойства от `Person.prototype`! Попробуйте сохранить код, загрузите страницу в браузере и введите `Teacher.prototype.constructor` в консоль для проверки.
+3.  Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу:
 
-<p>Пока все хорошо, но у нас есть проблема. Мы определили новый конструктор и у него есть свойство <code>prototype</code>, которое по умолчанию просто содержит ссылку на саму конструкторскую функцию. Он не содержит методов свойства <code>prototype</code> конструктора <code>Person</code>. Чтобы увидеть это, введите <code>Object.getOwnPropertyNames(Teacher.prototype)</code> в поле ввода текста или в вашу консоль JavaScript. Затем введите его снова, заменив <code>Teacher</code> на <code>Person</code>. Новый конструктор <em>не наследует</em> эти методы. Чтобы увидеть это, сравните выводы в консоль <code>Person.prototype.greeting</code> и <code>Teacher.prototype.greeting</code>. Нам нужно заставить <code>Teacher()</code> наследовать методы, определённые на прототипе <code>Person()</code>. Итак, как мы это делаем?</p>
+    ```
+    Object.defineProperty(Teacher.prototype, 'constructor', {
+        value: Teacher,
+        enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
+        writable: true });
+    ```
 
-<ol>
- <li>Добавьте следующую строку ниже своего предыдущего добавления:
-  <pre class="brush: js">Teacher.prototype = Object.create(Person.prototype);</pre>
-  Здесь наш друг <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create()</a></code> снова приходит на помощь. В этом случае мы используем его для создания нового объекта и делаем его значением <code>Teacher.prototype</code>. Новый объект имеет свой прототип <code>Person.prototype</code> и, следовательно, наследует, если и когда это необходимо, все доступные методы <code>Person.prototype</code>.</li>
- <li>Нам нужно сделать ещё одну вещь, прежде чем двигаться дальше. После добавления последней строки, <code>Teacher.prototype.constructor</code> стало равным <code>Person()</code>, потому что мы просто устанавливаем <code>Teacher.prototype</code> для ссылки на объект, который наследует его свойства от <code>Person.prototype</code>! Попробуйте сохранить код, загрузите страницу в браузере и введите <code>Teacher.prototype.constructor</code> в консоль для проверки.</li>
- <li>Это может стать проблемой, поэтому нам нужно сделать это правильно. Вы можете сделать это, вернувшись к исходному коду и добавив следующие строки внизу:
-  <pre><code>Object.defineProperty(Teacher.prototype, 'constructor', {
-    value: Teacher,
-    enumerable: false, // false, чтобы данное свойство не появлялось в цикле for in
-    writable: true });</code></pre>
- </li>
- <li>Теперь, если вы сохраните и обновите, введите <code>Teacher.prototype.constructor</code>, чтобы вернуть <code>Teacher()</code>, плюс мы теперь наследуем <code>Person()</code>!</li>
-</ol>
+4.  Теперь, если вы сохраните и обновите, введите `Teacher.prototype.constructor`, чтобы вернуть `Teacher()`, плюс мы теперь наследуем `Person()`!
 
-<h2 id="Предоставление_Teacher_новой_функции_greeting">Предоставление Teacher() новой функции greeting()</h2>
+## Предоставление Teacher() новой функции greeting()
 
-<p>Чтобы завершить наш код, нам нужно определить новую функцию <code>greeting()</code> в конструкторе <code>Teacher()</code>.</p>
+Чтобы завершить наш код, нам нужно определить новую функцию `greeting()` в конструкторе `Teacher()`.
 
-<p>Самый простой способ сделать это - определить его на прототипе <code>Teacher()</code> - добавить в нижнюю часть кода следующее:</p>
+Самый простой способ сделать это - определить его на прототипе `Teacher()` - добавить в нижнюю часть кода следующее:
 
-<pre class="brush: js">Teacher.prototype.greeting = function() {
+```js
+Teacher.prototype.greeting = function() {
   var prefix;
 
   if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') {
@@ -154,97 +155,90 @@ original_slug: Learn/JavaScript/Objects/Inheritance
   }
 
   alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.');
-};</pre>
+};
+```
 
-<p>Это выводит на экран приветствие учителя, в котором используется соответствующий префикс имени для своего пола, разработанный с использованием условного оператора.</p>
+Это выводит на экран приветствие учителя, в котором используется соответствующий префикс имени для своего пола, разработанный с использованием условного оператора.
 
-<h2 id="Попробуйте_пример">Попробуйте пример</h2>
+## Попробуйте пример
 
-<p>Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из <code>Teacher()</code>, поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):</p>
+Теперь, когда вы ввели весь код, попробуйте создать экземпляр объекта из `Teacher()`, поставив ниже вашего JavaScript-кода (или что-то похожее по вашему выбору):
 
-<pre class="brush: js">var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');</pre>
+```js
+var teacher1 = new Teacher('Dave', 'Griffiths', 31, 'male', ['football', 'cookery'], 'mathematics');
+```
 
-<p>Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта <code>teacher1</code>, например:</p>
+Теперь сохраните, обновите, и попробуйте получить доступ к свойствам и методам вашего нового объекта `teacher1`, например:
 
-<pre class="brush: js">teacher1.name.first;
+```js
+teacher1.name.first;
 teacher1.interests[0];
 teacher1.bio();
 teacher1.subject;
 teacher1.greeting();
-teacher1.farewell();</pre>
+teacher1.farewell();
+```
 
-<p>Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованные от общего конструктора <code>Person()</code> (класса). Запрос в строке 4 обращается к <code>subject</code>, доступному только для более специализированного конструктора (класса) <code>Teacher()</code>. Запрос в строке 5 получил бы доступ к методу <code>greeting()</code>, унаследованному от <code>Person()</code>, но <code>Teacher()</code> имеет свой собственный метод <code>greeting()</code> с тем же именем, поэтому запрос обращается к этому методу.</p>
+Все должно работать нормально. Запросы в строках 1, 2, 3 и 6 унаследованные от общего конструктора `Person()` (класса). Запрос в строке 4 обращается к `subject`, доступному только для более специализированного конструктора (класса) `Teacher()`. Запрос в строке 5 получил бы доступ к методу `greeting()`, унаследованному от `Person()`, но `Teacher()` имеет свой собственный метод `greeting()` с тем же именем, поэтому запрос обращается к этому методу.
 
-<div class="note">
-<p><strong>Примечание</strong>. Если вам не удаётся заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p>
-</div>
+> **Примечание:** . Если вам не удаётся заставить это работать, сравните свой код с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-finished.html) (см. также [рабочее демо](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)).
 
-<p>Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это даёт вам представление о том, как реализовать наследование в JavaScript.</p>
+Методика, которую мы здесь рассмотрели, - это не единственный способ создания наследующих классов в JavaScript, но он работает нормально и это даёт вам представление о том, как реализовать наследование в JavaScript.
 
-<p>Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">Classes</a>). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются ещё в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.</p>
+Вам также может быть интересно узнать некоторые из новых функций {{glossary("ECMAScript")}}, которые позволяют нам делать наследование более чисто в JavaScript (см. [Classes](/ru/docs/Web/JavaScript/Reference/Classes)). Мы не рассматривали их здесь, поскольку они пока не поддерживаются очень широко в браузерах. Все остальные конструкторы кода, которые мы обсуждали в этом наборе статей, поддерживаются ещё в IE9 или ранее и есть способы добиться более ранней поддержки, чем это.
 
-<p>Обычный способ - использовать библиотеку JavaScript - большинство популярных опций имеют простой набор функций, доступных для выполнения наследования более легко и быстро. <a href="http://coffeescript.org/#classes">CoffeeScript</a> , например, предоставляет класс, расширяет и т.д.</p>
+Обычный способ - использовать библиотеку JavaScript - большинство популярных опций имеют простой набор функций, доступных для выполнения наследования более легко и быстро. [CoffeeScript](http://coffeescript.org/#classes) , например, предоставляет класс, расширяет и т.д.
 
-<h2 id="Дальнейшее_упражнение">Дальнейшее упражнение</h2>
+## Дальнейшее упражнение
 
-<p>В нашем <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters">руководстве по Объектно-ориентированному JavaScript для начинающих</a> мы также включили класс <code>Student</code> как концепцию, которая наследует все особенности <code>Person</code>, а также имеет другой метод <code>greeting()</code> от <code>Person</code>, который гораздо более неформален, чем приветствие <code>Teacher</code>. Посмотрите, как выглядит приветствие ученика в этом разделе, и попробуйте реализовать собственный конструктор <code>Student()</code>, который наследует все функции <code>Person()</code> и реализует другую функцию <code>greeting()</code>.</p>
+В нашем [руководстве по Объектно-ориентированному JavaScript для начинающих](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS#Object-oriented_programming_from_10000_meters) мы также включили класс `Student` как концепцию, которая наследует все особенности `Person`, а также имеет другой метод `greeting()` от `Person`, который гораздо более неформален, чем приветствие `Teacher`. Посмотрите, как выглядит приветствие ученика в этом разделе, и попробуйте реализовать собственный конструктор `Student()`, который наследует все функции `Person()` и реализует другую функцию `greeting()`.
 
-<div class="note">
-<p><strong>Примечание</strong>. Если вам не удаётся заставить это работать, сравните свой код с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html">готовой версией</a> (см. также <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html">рабочее демо</a>).</p>
-</div>
+> **Примечание:** . Если вам не удаётся заставить это работать, сравните свой код с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-inheritance-student.html) (см. также [рабочее демо](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-inheritance-student.html)).
 
-<h2 id="Object_member_summary">Object member summary</h2>
+## Object member summary
 
-<p>Подводя итог, вы в основном получили три типа свойств / методов, о которых нужно беспокоиться:</p>
+Подводя итог, вы в основном получили три типа свойств / методов, о которых нужно беспокоиться:
 
-<ol>
- <li>Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определённые внутри конструктора, используя строки <code>this.x = x</code>; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путём вызова конструктора с использованием ключевого слова <code>new</code>, например <code>var myInstance = new myConstructor ()</code>.</li>
- <li>Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путём непосредственной привязки к конструктору, а не к экземпляру. Например, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code>.</li>
- <li>Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определённый в свойстве прототипа конструктора, например. <code>myConstructor.prototype.x()</code>.</li>
-</ol>
+1.  Те, которые определены внутри функции-конструктора, которые присваиваются экземплярам объекта. Их довольно легко заметить - в вашем собственном коде они представляют собой элементы, определённые внутри конструктора, используя строки `this.x = x`; в встроенном коде браузера они являются членами, доступными только для экземпляров объектов (обычно создаются путём вызова конструктора с использованием ключевого слова `new`, например `var myInstance = new myConstructor ()`.
+2.  Те, которые определяются непосредственно самим конструктором, которые доступны только для конструктора. Они обычно доступны только для встроенных объектов браузера и распознаются путём непосредственной привязки к конструктору, а не к экземпляру. Например, [`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys).
+3.  Те, которые определены в прототипе конструктора, которые наследуются всеми экземплярами и наследуют классы объектов. К ним относятся любой член, определённый в свойстве прототипа конструктора, например. `myConstructor.prototype.x()`.
 
-<p>Если вы не уверены, что это такое, не беспокойтесь об этом, пока вы ещё учитесь и знание придёт с практикой.</p>
+Если вы не уверены, что это такое, не беспокойтесь об этом, пока вы ещё учитесь и знание придёт с практикой.
 
-<h2 id="Когда_вы_используете_наследование_в_JavaScript">Когда вы используете наследование в JavaScript?</h2>
+## Когда вы используете наследование в JavaScript?
 
-<p>В частности, после этой последней статьи вы можете подумать: «У-у-у, это сложно». Ну, ты прав. Прототипы и наследование представляют собой некоторые из самых сложных аспектов JavaScript, но многие возможности и гибкость JavaScript вытекают из его структуры объектов и наследования и стоит понять, как это работает.</p>
+В частности, после этой последней статьи вы можете подумать: «У-у-у, это сложно». Ну, ты прав. Прототипы и наследование представляют собой некоторые из самых сложных аспектов JavaScript, но многие возможности и гибкость JavaScript вытекают из его структуры объектов и наследования и стоит понять, как это работает.
 
-<p>В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определённые во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.</p>
+В некотором смысле вы используете наследование все время. Всякий раз, когда вы используете различные функции веб-API или методы/свойства, определённые во встроенном объекте браузера, который вы вызываете в своих строках, массивах и т.д., вы неявно используете наследование.
 
-<p>Что касается использования наследования в вашем собственном коде, вы, вероятно, не будете часто его использовать, особенно для начала и в небольших проектах. Это пустая трата времени на использование объектов и наследование только ради этого, когда они вам не нужны. Но по мере того, как ваши базы кода становятся больше, вы с большей вероятностью найдёте необходимость в этом. Если вы начинаете создавать несколько объектов с подобными функциями, то создание универсального типа объекта, содержащего все общие функции и наследование этих функций в более специализированных типах объектов, может быть удобным и полезным.</p>
+Что касается использования наследования в вашем собственном коде, вы, вероятно, не будете часто его использовать, особенно для начала и в небольших проектах. Это пустая трата времени на использование объектов и наследование только ради этого, когда они вам не нужны. Но по мере того, как ваши базы кода становятся больше, вы с большей вероятностью найдёте необходимость в этом. Если вы начинаете создавать несколько объектов с подобными функциями, то создание универсального типа объекта, содержащего все общие функции и наследование этих функций в более специализированных типах объектов, может быть удобным и полезным.
 
-<div class="note">
-<p><strong>Примечание</strong>. Из-за того, как работает JavaScript, с цепочкой прототипов и т.д., совместное использование функций между объектами часто называется <strong>делегированием</strong>. Специализированные объекты делегируют функциональность универсальному типу объекта.</p>
-</div>
+> **Примечание:** . Из-за того, как работает JavaScript, с цепочкой прототипов и т.д., совместное использование функций между объектами часто называется **делегированием**. Специализированные объекты делегируют функциональность универсальному типу объекта.
 
-<p>При использовании наследования вам рекомендуется не иметь слишком много уровней наследования и тщательно отслеживать, где вы определяете свои методы и свойства. Можно начать писать код, который временно изменяет прототипы встроенных объектов браузера, но вы не должны этого делать, если у вас нет действительно веской причины. Слишком много наследования могут привести к бесконечной путанице и бесконечной боли при попытке отладки такого кода.</p>
+При использовании наследования вам рекомендуется не иметь слишком много уровней наследования и тщательно отслеживать, где вы определяете свои методы и свойства. Можно начать писать код, который временно изменяет прототипы встроенных объектов браузера, но вы не должны этого делать, если у вас нет действительно веской причины. Слишком много наследования могут привести к бесконечной путанице и бесконечной боли при попытке отладки такого кода.
 
-<p>В конечном счёте, объекты - это ещё одна форма повторного использования кода, например функций или циклов, со своими конкретными ролями и преимуществами. Если вы обнаруживаете, что создаёте кучу связанных переменных и функций и хотите отслеживать их все вместе и аккуратно их упаковывать, объект является хорошей идеей. Объекты также очень полезны, когда вы хотите передать коллекцию данных из одного места в другое. Обе эти вещи могут быть достигнуты без использования конструкторов или наследования. Если вам нужен только один экземпляр объекта, вам лучше всего использовать литерал объекта и вам, разумеется, не нужно наследование.</p>
+В конечном счёте, объекты - это ещё одна форма повторного использования кода, например функций или циклов, со своими конкретными ролями и преимуществами. Если вы обнаруживаете, что создаёте кучу связанных переменных и функций и хотите отслеживать их все вместе и аккуратно их упаковывать, объект является хорошей идеей. Объекты также очень полезны, когда вы хотите передать коллекцию данных из одного места в другое. Обе эти вещи могут быть достигнуты без использования конструкторов или наследования. Если вам нужен только один экземпляр объекта, вам лучше всего использовать литерал объекта и вам, разумеется, не нужно наследование.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>В этой статье мы рассмотрели оставшуюся часть основной теории и синтаксиса OOJS, которые, как мы думаем, вам следует знать сейчас. На этом этапе вы должны понимать основы JavaScript, ООП, прототипы и прототипное наследование, как создавать классы (конструкторы) и экземпляры объектов, добавлять функции в классы и создавать подклассы, которые наследуются от других классов.</p>
+В этой статье мы рассмотрели оставшуюся часть основной теории и синтаксиса OOJS, которые, как мы думаем, вам следует знать сейчас. На этом этапе вы должны понимать основы JavaScript, ООП, прототипы и прототипное наследование, как создавать классы (конструкторы) и экземпляры объектов, добавлять функции в классы и создавать подклассы, которые наследуются от других классов.
 
-<p>В следующей статье мы рассмотрим, как работать с JavaScript Object Notation (JSON), общим форматом обмена данными, написанным с использованием объектов JavaScript.</p>
+В следующей статье мы рассмотрим, как работать с JavaScript Object Notation (JSON), общим форматом обмена данными, написанным с использованием объектов JavaScript.
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="http://www.objectplayground.com/">ObjectPlayground.com</a> — A really useful interactive learning site for learning about objects.</li>
- <li><a href="https://www.amazon.com/gp/product/193398869X/">Secrets of the JavaScript Ninja</a>, Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.</li>
- <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&amp;%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes">You Don't Know JS: this &amp; Object Prototypes</a> — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.</li>
-</ul>
+- [ObjectPlayground.com](http://www.objectplayground.com/) — A really useful interactive learning site for learning about objects.
+- [Secrets of the JavaScript Ninja](https://www.amazon.com/gp/product/193398869X/), Chapter 6 — A good book on advanced JavaScript concepts and techniques, by John Resig and Bear Bibeault. Chapter 6 covers aspects of prototypes and inheritance really well; you can probably track down a print or online copy fairly easily.
+- [You Don't Know JS: this & Object Prototypes](https://github.com/getify/You-Dont-Know-JS/blob/master/this%20&%20object%20prototypes/README.md#you-dont-know-js-this--object-prototypes) — Part of Kyle Simpson's excellent series of JavaScript manuals, Chapter 5 in particular looks at prototypes in much more detail than we do here. We've presented a simplified view in this series of articles aimed at beginners, whereas Kyle goes into great depth and provides a more complex but more accurate picture.
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Основы">Основы объекта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object_prototypes">Прототипы объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Inheritance">Наследование в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/JSON">Работа с данными JSON</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object_building_practice">Практика построения объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Adding_bouncing_balls_features">Добавление функций в нашу демонстрацию прыгающих шаров</a></li>
-</ul>
+- [Основы объекта](/ru/docs/Learn/JavaScript/Объекты/Основы)
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/Объекты/Object-oriented_JS)
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/Объекты/Object_prototypes)
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/Объекты/Inheritance)
+- [Работа с данными JSON](/ru/docs/Learn/JavaScript/Объекты/JSON)
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/Объекты/Object_building_practice)
+- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/Объекты/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/javascript/objects/index.md b/files/ru/learn/javascript/objects/index.md
index 17ed89e16710c0..0a75934ac1c48a 100644
--- a/files/ru/learn/javascript/objects/index.md
+++ b/files/ru/learn/javascript/objects/index.md
@@ -9,40 +9,34 @@ tags:
 translation_of: Learn/JavaScript/Objects
 original_slug: Learn/JavaScript/Объекты
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">В JavaScript большинство сущностей являются объектами, начиная с самой основной функциональности JavaScript, такой как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Вы можете даже создавать свои собственные объекты, чтобы инкапсулировать связанные между собой функции и переменные в эффективные пакеты и действовать как удобные хранилища данных. Понимание объектно-ориентированной природы JavaScript очень важно, если вы хотите продолжить дальнейшее более углублённое изучение языка. Поэтому мы предоставляем вам данный модуль, чтобы помочь вам разобраться в этом. Здесь мы детально обучим вас теории и синтаксису объектов, а затем рассмотрим, как создавать свои собственные объекты. </p>
+В JavaScript большинство сущностей являются объектами, начиная с самой основной функциональности JavaScript, такой как строки (strings) и массивы (array), и заканчивая встроенными в браузер API. Вы можете даже создавать свои собственные объекты, чтобы инкапсулировать связанные между собой функции и переменные в эффективные пакеты и действовать как удобные хранилища данных. Понимание объектно-ориентированной природы JavaScript очень важно, если вы хотите продолжить дальнейшее более углублённое изучение языка. Поэтому мы предоставляем вам данный модуль, чтобы помочь вам разобраться в этом. Здесь мы детально обучим вас теории и синтаксису объектов, а затем рассмотрим, как создавать свои собственные объекты.
 
-<h2 id="Необходимые_знания">Необходимые знания</h2>
+## Необходимые знания
 
-<p>Перед тем, как начать изучение данного модуля, Вы должны иметь некоторое представление о HTML и CSS. Мы советуем вам поработать над разделами <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Introduction">Введение в HTML</a> и <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS">Введение в CSS</a> перед изучением этого модуля JavaScript.</p>
+Перед тем, как начать изучение данного модуля, Вы должны иметь некоторое представление о HTML и CSS. Мы советуем вам поработать над разделами [Введение в HTML](/ru/docs/Web/Guide/HTML/Introduction) и [Введение в CSS](/ru/docs/Learn/CSS/Introduction_to_CSS) перед изучением этого модуля JavaScript.
 
-<p>Также вам необходимо знать основы JavaScript перед подробным изучением объектов JavaScript. Предварительно поработайте с разделами <a href="/en-US/docs/Learn/JavaScript/First_steps">Первые шаги в JavaScript</a> и <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Структурные элементы в JavaScript</a> перед началом изучения данного модуля.</p>
+Также вам необходимо знать основы JavaScript перед подробным изучением объектов JavaScript. Предварительно поработайте с разделами [Первые шаги в JavaScript](/ru/docs/Learn/JavaScript/First_steps) и [Структурные элементы в JavaScript](/ru/docs/Learn/JavaScript/Building_blocks) перед началом изучения данного модуля.
 
-<div class="note">
-<p><strong>Примечание</strong>: Если вы работаете за компьютером/планшетом/другим устройством, на котором у вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
+> **Примечание:** Если вы работаете за компьютером/планшетом/другим устройством, на котором у вас нет возможности создавать собственные файлы, постарайтесь поработать с примерами кода на платформах онлайн-программирования, таких, как [JSBin](http://jsbin.com/) or [Thimble](https://thimble.mozilla.org/).
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B">Основы объектов</a></dt>
- <dd>В первой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></dt>
- <dd>Закончив с основами, мы сфокусируемся на объектно-ориентированном JavaScript (OOJS) —  эта статья представляет основы теории объектно-ориентированного программирования (ООП). Затем мы изучим, как JavaScript эмулирует классы объектов через конструктор функций, и как создавать экземпляры объектов.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_prototypes">Прототипы объектов</a></dt>
- <dd>Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функциональность друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance">Наследование в JavaScript</a></dt>
- <dd>После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерние" классы объектов (конструкторы), которые наследуют функциональность от своих "родительских" классов. В дополнении, мы дадим вам пару советов о том, где и когда можно использовать OOJS.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/JSON">Работа с JSON-данными</a></dt>
- <dd>Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.</dd>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Object_building_practice">Практика построения объектов</a></dt>
- <dd>В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав вам твёрдую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что весёлое и красочное - несколько цветных прыгающих шариков.</dd>
-</dl>
+- [Основы объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B)
+  - : В первой статье мы рассмотрим объекты в JavaScript. Мы будем разбирать основы синтаксиса объектов JavaScript и заново изучим некоторые возможности JavaScript, которые мы уже исследовали ранее на курсе, подтвердив тот факт, что большая часть функциональности, с которой мы уже столкнулись, в действительности является объектами.
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/Objects/Object-oriented_JS)
+  - : Закончив с основами, мы сфокусируемся на объектно-ориентированном JavaScript (OOJS) — эта статья представляет основы теории объектно-ориентированного программирования (ООП). Затем мы изучим, как JavaScript эмулирует классы объектов через конструктор функций, и как создавать экземпляры объектов.
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/Objects/Object_prototypes)
+  - : Прототипы - это механизм, благодаря которому объекты в JavaScript наследуют функциональность друг друга, но при этом они работают иначе по сравнению с механизмами наследования в классических объектно-ориентированных языках. В этой статье мы изучим эти отличия, объясним, как работает цепочка прототипов, и рассмотрим, как свойство прототипа может быть использовано для добавления методов к существующим конструкторам.
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/Objects/Inheritance)
+  - : После знакомства с самыми жуткими подробностями OOJS, эта статья покажет, как создавать "дочерние" классы объектов (конструкторы), которые наследуют функциональность от своих "родительских" классов. В дополнении, мы дадим вам пару советов о том, где и когда можно использовать OOJS.
+- [Работа с JSON-данными](/ru/docs/Learn/JavaScript/Objects/JSON)
+  - : Представление объектов в JavaScript (JavaScript Object Notation) (JSON) - это стандартный формат для представления структурированных данных в виде объектов JavaScript, который обычно используется для представления и передачи данных на веб-сайтах (т.е. передача некоторых данных от сервера к клиенту - таким образом они могут быть отображены на веб-странице). Вы довольно часто будете с этим сталкиваться, поэтому в данной статье мы предоставим вам все, что необходимо для работы с JSON с помощью JavaScript, в том числе доступ к элементам данных в объекте JSON и написания собственного JSON-кода.
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/Objects/Object_building_practice)
+  - : В предыдущих статьях мы рассматривали самые основные моменты в теории и синтаксисе объектов в JavaScript, дав вам твёрдую основу для начала. В этой статье мы погрузимся в практические занятия, получим больше практической работы в построении собственных объектов в JavaScript, чтобы сделать кое-что весёлое и красочное - несколько цветных прыгающих шариков.
 
-<h2 id="Задания">Задания</h2>
+## Задания
 
-<dl>
- <dt><a href="/en-US/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">Добавление функциональности к демо с прыгающими шариками</a></dt>
- <dd>В этом задании, мы ожидаем, что вы, используя демо с прыгающими шариками из предыдущей статьи как отправную точку, добавите немного новой и интересной функциональности в него.</dd>
-</dl>
+- [Добавление функциональности к демо с прыгающими шариками](/ru/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features)
+  - : В этом задании, мы ожидаем, что вы, используя демо с прыгающими шариками из предыдущей статьи как отправную точку, добавите немного новой и интересной функциональности в него.
diff --git a/files/ru/learn/javascript/objects/json/index.md b/files/ru/learn/javascript/objects/json/index.md
index e14c322183c4a0..01cfb5cfcf4893 100644
--- a/files/ru/learn/javascript/objects/json/index.md
+++ b/files/ru/learn/javascript/objects/json/index.md
@@ -8,42 +8,30 @@ tags:
 translation_of: Learn/JavaScript/Objects/JSON
 original_slug: Learn/JavaScript/Объекты/JSON
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</div>
+Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.
 
-<p class="summary">Обозначение объектов JavaScript (JSON - JavaScript Object Notation) - стандартный текстовый формат для представления структурированных данных на основе синтаксиса объекта JavaScript. Он обычно используется для передачи данных в веб-приложениях (например, отправка некоторых данных с сервера клиенту,таким образом чтобы это могло отображаться на веб-странице или наоборот). Вы будете сталкиваться с этим довольно часто, поэтому в этой статье мы даём вам все, что вам нужно для работы с JSON используя JavaScript, включая парсинг JSON, чтобы вы могли получить доступ к данным внутри него при создании JSON.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. [First steps](/ru/docs/Learn/JavaScript/First_steps) и [Building blocks](/ru/docs/Learn/JavaScript/Building_blocks)) и основами OOJS (see [Introduction to objects](/ru/docs/Learn/JavaScript/Object-oriented/Introduction)). |
+| ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.                                                                                                                                                                                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (см. <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> и <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) и основами OOJS  (see <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, как работать с данными, хранящимися в JSON, и создавать свои собственные объекты JSON.</td>
-  </tr>
- </tbody>
-</table>
+## Нет, действительно, что такое JSON?
 
-<h2 id="Нет_действительно_что_такое_JSON">Нет, действительно, что такое JSON?</h2>
+{{glossary("JSON")}} - текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован [Дугласом Крокфордом](https://en.wikipedia.org/wiki/Douglas_Crockford). Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.
 
-<p>{{glossary("JSON")}} - текстовый формат данных, следующий за синтаксисом объекта JavaScript, который был популяризирован <a href="https://en.wikipedia.org/wiki/Douglas_Crockford">Дугласом Крокфордом</a>. Несмотря на то, что он очень похож на буквенный синтаксис объекта JavaScript, его можно использовать независимо от JavaScript, и многие среды программирования имеют возможность читать (анализировать) и генерировать JSON.</p>
+JSON существует как строка,что необходимо при передаче данных по сети. Он должен быть преобразован в собственный объект JavaScript, если вы хотите получить доступ к данным. Это не большая проблема. JavaScript предоставляет глобальный объект [JSON](/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON), который имеет методы для преобразования между ними.
 
-<p>JSON существует как строка,что необходимо при передаче данных по сети. Он должен быть преобразован в собственный объект JavaScript, если вы хотите получить доступ к данным. Это не большая проблема. JavaScript предоставляет глобальный объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a>, который имеет методы для преобразования между ними.</p>
+> **Примечание:** Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную*)*, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).
 
-<div class="note">
-<p><strong>Примечание</strong>: Преобразование строки в родной объект называется десериализацией (преобразование из последовательной формы в параллельную<em>)</em>, в то время как преобразовании родного объекта в строку, таким образом ,чтобы он мог быть передан через сеть, называется сериализацией(преобразование в последовательную форму).</p>
-</div>
+Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением `.json` и {{glossary("MIME type")}} `application/json`.
 
-<p>Объект JSON может быть сохранён в собственном файле, который в основном представляет собой текстовый файл с расширением <code>.json</code> и {{glossary("MIME type")}} <code>application/json</code>.</p>
+### Структура JSON
 
-<h3 id="Структура_JSON">Структура JSON</h3>
+Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и в стандартном объекте JavaScript - строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:
 
-<p>Как описано выше, JSON представляет собой строку, формат которой очень похож на буквенный формат объекта JavaScript. Вы можете включать одни и те же базовые типы данных внутри JSON, так же как и  в стандартном объекте JavaScript - строки, числа, массивы, булевы и другие объектные литералы. Это позволяет построить иерархию данных, к примеру, так:</p>
-
-<pre class="brush: json">{
+```json
+{
   "squadName": "Super hero squad",
   "homeTown": "Metro City",
   "formed": 2016,
@@ -83,34 +71,36 @@ original_slug: Learn/JavaScript/Объекты/JSON
       ]
     }
   ]
-}</pre>
+}
+```
 
-<p>Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием <code>superHeroes</code>, мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript object basics</a>. Например:</p>
+Если бы мы загрузили этот объект в программу JavaScript, создали переменную с названием `superHeroes`, мы могли бы затем получить доступ к данным внутри неё, используя те же самые точечную и скобочную нотации, которые мы рассмотрели в статье [JavaScript object basics](/ru/docs/Learn/JavaScript/Objects/Basics). Например:
 
-<pre class="brush: js">superHeroes.homeTown
-superHeroes['active']</pre>
+```js
+superHeroes.homeTown
+superHeroes['active']
+```
 
-<p>Чтобы получить доступ к последующим данным  по иерархии, вам просто нужно объединить требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей сверхспособности второго героя, указанного в списке участников, вы должны сделать следующее:</p>
+Чтобы получить доступ к последующим данным по иерархии, вам просто нужно объединить требуемые имена свойств и индексы массивов. Например, чтобы получить доступ к третьей сверхспособности второго героя, указанного в списке участников, вы должны сделать следующее:
 
-<pre class="brush: js">superHeroes['members'][1]['powers'][2]</pre>
+```js
+superHeroes['members'][1]['powers'][2]
+```
 
-<ol>
- <li>Сначала у нас есть имя переменной - <code>superHeroes</code>.</li>
- <li>Внутри мы хотим получить доступ к свойству <code>members</code>, поэтому мы используем <code>['members']</code>.</li>
- <li><code>members</code> содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем <code>[1]</code>.</li>
- <li>Внутри этого объекта мы хотим получить доступ к свойству <code>powers</code>, поэтому мы используем <code>['powers']</code>.</li>
- <li>Внутри свойства <code>powers</code> находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем <code>[2]</code>.</li>
-</ol>
+1.  Сначала у нас есть имя переменной - `superHeroes`.
+2.  Внутри мы хотим получить доступ к свойству `members`, поэтому мы используем `['members']`.
+3.  `members` содержат массив, заполненный объектами. Мы хотим получить доступ ко второму объекту внутри массива, поэтому мы используем `[1]`.
+4.  Внутри этого объекта мы хотим получить доступ к свойству `powers`, поэтому мы используем `['powers']`.
+5.  Внутри свойства `powers` находится массив, содержащий сверхспособности выбранного героя. Нам нужен третий, поэтому мы используем `[2]`.
 
-<div class="note">
-<p><strong>Примечание</strong>. Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере <a href="http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html">JSONTest.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html">исходный код</a>). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.</p>
-</div>
+> **Примечание:** . Мы сделали JSON, видимый выше, доступным внутри переменной в нашем примере [JSONTest.html](http://mdn.github.io/learning-area/javascript/oojs/json/JSONTest.html) (см. [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/JSONTest.html)). Попробуйте загрузить это, а затем получить доступ к данным внутри переменной через консоль JavaScript вашего браузера.
 
-<h3 id="Массивы_как_JSON">Массивы как JSON</h3>
+### Массивы как JSON
 
-<p>Выше мы упоминали ,что JSON текст выглядит практически так же как и JavaScript объект,и это почти правильно.Причина,по которой мы говорим почти правильно заключается в том ,что массив также валиден JSON  например:</p>
+Выше мы упоминали ,что JSON текст выглядит практически так же как и JavaScript объект,и это почти правильно.Причина,по которой мы говорим почти правильно заключается в том ,что массив также валиден JSON например:
 
-<pre class="brush: json">[
+```json
+[
   {
     "name": "Molecule Man",
     "age": 29,
@@ -131,88 +121,102 @@ superHeroes['active']</pre>
       "Superhuman reflexes"
     ]
   }
-]</pre>
+]
+```
 
-<p>Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например <code>[0]["powers"][0]</code>.</p>
+Вышесказанное вполне справедливо для JSON. Вам просто нужно получить доступ к элементам массива (в его анализируемой версии), начиная с индекса массива, например `[0]["powers"][0]`.
 
-<h3 id="Другие_примечания">Другие примечания</h3>
+### Другие примечания
 
-<ul>
- <li>JSON - это чисто формат данных - он содержит только свойства, без методов.</li>
- <li>JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.</li>
- <li>Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде <a href="http://jsonlint.com/">JSONLint</a>.</li>
- <li>JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.</li>
- <li>В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.</li>
-</ul>
+- JSON - это чисто формат данных - он содержит только свойства, без методов.
+- JSON требует двойных кавычек, которые будут использоваться вокруг строк и имён свойств. Одиночные кавычки недействительны.
+- Даже одна неуместная запятая или двоеточие могут привести к сбою JSON-файла и не работать. Вы должны быть осторожны, чтобы проверить любые данные, которые вы пытаетесь использовать (хотя сгенерированный компьютером JSON с меньшей вероятностью включает ошибки, если программа генератора работает правильно). Вы можете проверить JSON с помощью приложения вроде [JSONLint](http://jsonlint.com/).
+- JSON может принимать форму любого типа данных, допустимого для включения в JSON, а не только массивов или объектов. Так, например, одна строка или номер будут действительным объектом JSON.
+- В отличие от кода JavaScript, в котором свойства объекта могут не заключаться в двойные кавычки, в JSON в качестве свойств могут использоваться только строки заключённые в двойные кавычки.
 
-<h2 id="Активное_обучение_Работа_с_примером_JSON">Активное обучение: Работа с примером JSON</h2>
+## Активное обучение: Работа с примером JSON
 
-<p>Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.</p>
+Итак, давайте рассмотрим пример, чтобы показать то, как мы можем использовать некоторые данные JSON на веб-сайте.
 
-<h3 id="Начало_работы">Начало работы</h3>
+### Начало работы
 
-<p>Для начала создайте локальные копии наших файлов <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html">heroes.html</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css">style.css</a>. Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:</p>
+Для начала создайте локальные копии наших файлов [heroes.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes.html) и [style.css](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/style.css). Последний содержит простой CSS для стилизации нашей страницы, в то время как первый содержит очень простой HTML-код сущности:
 
-<pre class="brush: html">&lt;header&gt;
-&lt;/header&gt;
+```html
+<header>
+</header>
 
-&lt;section&gt;
-&lt;/section&gt;</pre>
+<section>
+</section>
+```
 
-<p>Плюс {{HTMLElement("script")}}, чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы {{HTMLElement("header")}} и {{HTMLElement("section")}} и сохраняют их в переменных:</p>
+Плюс {{HTMLElement("script")}}, чтобы содержать код JavaScript, который мы будем писать в этом упражнении. На данный момент он содержит только две строки, которые захватывают ссылки на элементы {{HTMLElement("header")}} и {{HTMLElement("section")}} и сохраняют их в переменных:
 
-<pre class="brush: js">var header = document.querySelector('header');
-var section = document.querySelector('section');</pre>
+```js
+var header = document.querySelector('header');
+var section = document.querySelector('section');
+```
 
-<p>Мы предоставили данные JSON на нашем GitHub, на <a href="https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json</a>.</p>
+Мы предоставили данные JSON на нашем GitHub, на <https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json>.
 
-<p>Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:</p>
+Мы собираемся загрузить его на нашу страницу и использовать некоторые изящные манипуляции DOM, чтобы отобразить их, например:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13857/json-superheroes.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/13857/json-superheroes.png)
 
-<h3 id="Получение_JSON">Получение JSON</h3>
+### Получение JSON
 
-<p>Чтобы получить JSON, мы будем использовать API, называемый {{domxref("XMLHttpRequest")}} (часто называемый <strong>XHR</strong>). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.</p>
+Чтобы получить JSON, мы будем использовать API, называемый {{domxref("XMLHttpRequest")}} (часто называемый **XHR**). Это очень полезный объект JavaScript, который позволяет нам делать сетевые запросы для извлечения ресурсов с сервера через JavaScript (например, изображения, текст, JSON, даже фрагменты HTML), что означает, что мы можем обновлять небольшие разделы контента без необходимости перезагрузки всей страницы. Это привело к более отзывчивым веб-страницам и звучит захватывающе, но, к сожалению, выходит за рамки этой статьи, чтобы изучить это гораздо более подробно.
 
-<ol>
- <li>Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:
-  <pre class="brush: js">var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';</pre>
- </li>
- <li>Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора <code>XMLHttpRequest</code>, используя ключевое слово <code>new</code>. Добавьте следующую ниже свою последнюю строку:
-  <pre class="brush: js">var request = new XMLHttpRequest();</pre>
- </li>
- <li>Теперь нам нужно открыть новый запрос, используя метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open">open()</a></code>. Добавьте следующую строку:
-  <pre class="brush: js">request.open('GET', requestURL);</pre>
+1.  Начнём с того, что мы собираемся сохранить URL-адрес JSON, который мы хотим получить в переменной. Добавьте нижеследующий код JavaScript:
 
-  <p>Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужно только два обязательных для этого простого примера:</p>
+    ```js
+    var requestURL = 'https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json';
+    ```
 
-  <ul>
-   <li>Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET">GET</a></code> самый подходящий, так как мы просто извлекаем некоторые простые данные.</li>
-   <li>URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.</li>
-  </ul>
- </li>
- <li>Затем добавьте следующие две строки: здесь мы устанавливаем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType">responseType</a></code> в JSON, так что XHR знает, что сервер будет возвращать JSON и, что это должно быть преобразовано за кулисами в объект JavaScript. Затем мы отправляем запрос методом <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send">send()</a></code>:
-  <pre class="brush: js">request.responseType = 'json';
-request.send();</pre>
- </li>
- <li>Последний бит этого раздела предполагает ожидание ответа на возврат с сервера, а затем работы с ним. Добавьте следующий код ниже вашего предыдущего кода:
-  <pre class="brush: js">request.onload = function() {
-  var superHeroes = request.response;
-  populateHeader(superHeroes);
-  showHeroes(superHeroes);
-}</pre>
- </li>
-</ol>
+2.  Чтобы создать запрос, нам нужно создать новый экземпляр объекта запроса из конструктора `XMLHttpRequest`, используя ключевое слово `new`. Добавьте следующую ниже свою последнюю строку:
+
+    ```js
+    var request = new XMLHttpRequest();
+    ```
+
+3.  Теперь нам нужно открыть новый запрос, используя метод [`open()`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open). Добавьте следующую строку:
+
+    ```js
+    request.open('GET', requestURL);
+    ```
+
+    Это занимает не менее двух параметров - есть другие доступные параметры. Нам нужно только два обязательных для этого простого примера:
+
+    - Метод HTTP, который следует использовать при выполнении сетевого запроса. В этом случае [`GET`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) самый подходящий, так как мы просто извлекаем некоторые простые данные.
+    - URL-адрес для запроса - это URL-адрес файла JSON, который мы сохранили ранее.
+
+4.  Затем добавьте следующие две строки: здесь мы устанавливаем [`responseType`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/responseType) в JSON, так что XHR знает, что сервер будет возвращать JSON и, что это должно быть преобразовано за кулисами в объект JavaScript. Затем мы отправляем запрос методом [`send()`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/send):
+
+    ```js
+    request.responseType = 'json';
+    request.send();
+    ```
+
+5.  Последний бит этого раздела предполагает ожидание ответа на возврат с сервера, а затем работы с ним. Добавьте следующий код ниже вашего предыдущего кода:
+
+    ```js
+    request.onload = function() {
+      var superHeroes = request.response;
+      populateHeader(superHeroes);
+      showHeroes(superHeroes);
+    }
+    ```
 
-<p>Здесь мы сохраняем ответ на наш запрос (доступный в свойстве <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response">response</a></code>) в переменной <code>superHeroes</code>; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций - первый из них заполнит <code>&lt;header&gt;</code> правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в <code>&lt;section&gt;</code>.</p>
+Здесь мы сохраняем ответ на наш запрос (доступный в свойстве [`response`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/response)) в переменной `superHeroes`; эта переменная теперь будет содержать объект JavaScript, основанный на JSON! Затем мы передаём этот объект двум вызовам функций - первый из них заполнит `<header>` правильными данными, а второй создаст информационную карту для каждого героя в команде и вставляет её в `<section>`.
 
-<p>Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая  таким образом,это гарантия того, что <code>request.response</code> определённо будет доступен, когда мы начнём работу с ним.</p>
+Мы свернули код в обработчик событий, который запускается, когда событие загрузки запускается в объекте запроса (см. [`onload`](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload)) - это связано с тем, что событие загрузки запускается, когда ответ успешно возвращается; поступая таким образом,это гарантия того, что `request.response` определённо будет доступен, когда мы начнём работу с ним.
 
-<p>Заполнение заголовка</p>
+Заполнение заголовка
 
-<p>Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:</p>
+Теперь мы извлекли данные JSON и превратили его в объект JavaScript, давайте воспользуемся им, написав две функции, на которые мы ссылались выше. Прежде всего, добавьте следующее определение функции ниже предыдущего кода:
 
-<pre class="brush: js">function populateHeader(jsonObj) {
+```js
+function populateHeader(jsonObj) {
   var myH1 = document.createElement('h1');
   myH1.textContent = jsonObj['squadName'];
   header.appendChild(myH1);
@@ -220,18 +224,20 @@ request.send();</pre>
   var myPara = document.createElement('p');
   myPara.textContent = 'Hometown: ' + jsonObj['homeTown'] + ' // Formed: ' + jsonObj['formed'];
   header.appendChild(myPara);
-}</pre>
+}
+```
 
-<p>Мы назвали параметр <code>jsonObj</code>, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент {{HTMLElement("h1")}} с <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement">createElement()</a></code>, устанавливаем его <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent">textContent</a></code> равным свойству <code>squadName</code> объекта, а затем добавляем его в заголовок с помощью <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild">appendChild()</a></code>. Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как <code>homeTown</code>, так и <code>formed</code> свойства объекта.</p>
+Мы назвали параметр `jsonObj`, чтобы напомнить себе, что этот объект JavaScript возник из JSON. Здесь мы сначала создаём элемент {{HTMLElement("h1")}} с [`createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement), устанавливаем его [`textContent`](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) равным свойству `squadName` объекта, а затем добавляем его в заголовок с помощью [`appendChild()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild). Затем мы выполняем очень похожую операцию с абзацем: создаём его, устанавливаем его текстовое содержимое и добавляем его в заголовок. Единственное различие заключается в том, что его текст задан, как конкатенированная строка, содержащая как `homeTown`, так и `formed` свойства объекта.
 
-<h3 id="Создание_информационных_карт_героя">Создание информационных карт героя</h3>
+### Создание информационных карт героя
 
-<p>Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:</p>
+Затем добавьте следующую функцию внизу кода, которая создаёт и отображает карты супергероев:
 
-<pre class="brush: js">function showHeroes(jsonObj) {
+```js
+function showHeroes(jsonObj) {
   var heroes = jsonObj['members'];
 
-  for (var i = 0; i &lt; heroes.length; i++) {
+  for (var i = 0; i < heroes.length; i++) {
     var myArticle = document.createElement('article');
     var myH2 = document.createElement('h2');
     var myPara1 = document.createElement('p');
@@ -245,7 +251,7 @@ request.send();</pre>
     myPara3.textContent = 'Superpowers:';
 
     var superPowers = heroes[i].powers;
-    for (var j = 0; j &lt; superPowers.length; j++) {
+    for (var j = 0; j < superPowers.length; j++) {
       var listItem = document.createElement('li');
       listItem.textContent = superPowers[j];
       myList.appendChild(listItem);
@@ -259,45 +265,41 @@ request.send();</pre>
 
     section.appendChild(myArticle);
   }
-}</pre>
+}
+```
 
-<p>Для начала сохраним свойство <code>members</code> объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.</p>
+Для начала сохраним свойство `members` объекта JavaScript в новой переменной. Этот массив содержит несколько объектов, которые содержат информацию для каждого героя.
 
-<p>Затем мы используем <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop">for loop</a> для циклического прохождения каждого объекта в массиве. Для каждого из них мы:</p>
+Затем мы используем [for loop](/ru/docs/Learn/JavaScript/Building_blocks/Looping_code#The_standard_for_loop) для циклического прохождения каждого объекта в массиве. Для каждого из них мы:
 
-<ol>
- <li>Создаём несколько новых элементов: <code>&lt;article&gt;</code>, <code>&lt;h2&gt;</code>, три <code>&lt;p&gt;</code> и <code>&lt;ul&gt;</code>.</li>
- <li>Устанавливаем <code>&lt;h2&gt;</code>, чтобы содержать <code>name</code> текущего героя.</li>
- <li>Заполняем три абзаца своей <code>secretIdentity</code>, <code>age</code> и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.</li>
- <li>Сохраняем свойство <code>powers</code> в другой новой переменной под названием <code>superPowers</code> - где содержится массив, в котором перечислены сверхспособности текущего героя.</li>
- <li>Используем другой цикл <code>for</code>, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент <code>&lt;li&gt;</code>, помещаем в него сверхспособности, а затем помещаем <code>listItem</code> внутри элемента <code>&lt;ul&gt;</code> (<code>myList</code>) с помощью <code>appendChild()</code>.</li>
- <li>Последнее, что мы делаем, это добавляем <code>&lt;h2&gt;</code>, <code>&lt;p&gt;</code> и <code>&lt;ul&gt;</code> внутри <code>&lt;article&gt;</code> (<code>myArticle</code>), а затем добавляем <code>&lt;article&gt;</code> в <code>&lt;section&gt;</code>. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.</li>
-</ol>
+1.  Создаём несколько новых элементов: `<article>`, `<h2>`, три `<p>` и `<ul>`.
+2.  Устанавливаем `<h2>`, чтобы содержать `name` текущего героя.
+3.  Заполняем три абзаца своей `secretIdentity`, `age` и строкой, в которой говорится: «Суперспособности:», чтобы ввести информацию в список.
+4.  Сохраняем свойство `powers` в другой новой переменной под названием `superPowers` - где содержится массив, в котором перечислены сверхспособности текущего героя.
+5.  Используем другой цикл `for`, чтобы прокрутить сверхспособности текущего героя , для каждого из них мы создаём элемент `<li>`, помещаем в него сверхспособности, а затем помещаем `listItem` внутри элемента `<ul>` (`myList`) с помощью `appendChild()`.
+6.  Последнее, что мы делаем, это добавляем `<h2>`, `<p>` и `<ul>` внутри `<article>` (`myArticle`), а затем добавляем `<article>` в `<section>`. Важное значение имеет порядок, в котором добавляются элементы, так как это порядок, который они будут отображать внутри HTML.
 
-<div class="note">
-<p><strong>Примечание</strong>. Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html">heroes-finished.html</a> (см. также он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html">в режиме live</a>).</p>
-</div>
+> **Примечание:** . Если вам не удаётся заставить этот пример работать, попробуйте обратиться к нашему исходному коду [heroes-finished.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished.html) (см. также он работает [в режиме live](https://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>. Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла <a href="http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json">superheroes.json</a> на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Basics">JavaScript objectbasics</a> чтобы получить дополнительную информацию о нотации точек и скобок.</p>
-</div>
+> **Примечание:** . Если у вас возникли проблемы после нотации точек / скобок, которые мы используем для доступа к объекту JavaScript, в этом поможет открытие файла [superheroes.json](http://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json) на другой вкладке или в текстовом редакторе ,и обращаться к нему каждый раз, когда вам нужен JavaScript. Вы также можете обратиться к нашей статье [JavaScript objectbasics](/ru/docs/Learn/JavaScript/Objects/Basics) чтобы получить дополнительную информацию о нотации точек и скобок.
 
-<h2 id="Преобразование_между_объектами_и_текстом">Преобразование между объектами и текстом</h2>
+## Преобразование между объектами и текстом
 
-<p>Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:</p>
+Вышеприведённый пример был прост с точки зрения доступа к объекту JavaScript, потому что мы задали XHR-запрос для прямого преобразования ответа JSON в объект JavaScript, используя:
 
-<pre class="brush: js">request.responseType = 'json';</pre>
+```js
+request.responseType = 'json';
+```
 
-<p>Но иногда нам не так везёт - иногда мы получаем сырую строку JSON и нам нужно  преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно  преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON</a> доступен в браузерах, которые содержат следующие два метода:</p>
+Но иногда нам не так везёт - иногда мы получаем сырую строку JSON и нам нужно преобразовать её в объект самостоятельно. И когда мы хотим отправить объект JavaScript по сети, нам нужно преобразовать его в JSON (строку) перед отправкой. К счастью, эти две проблемы настолько распространены в веб-разработке, что встроенный объект [JSON](/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON) доступен в браузерах, которые содержат следующие два метода:
 
-<ul>
- <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse">parse()</a></code>: принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript.</li>
- <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">stringify()</a></code>: принимает объект, как параметр и возвращает эквивалентную строковую JSON строку.</li>
-</ul>
+- [`parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse): принимает строку JSON в качестве параметра и возвращает соответствующий объект JavaScript.
+- [`stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify): принимает объект, как параметр и возвращает эквивалентную строковую JSON строку.
 
-<p>Вы можете увидеть первый метод в действии в нашем примере <a href="http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html">heroes-finished-json-parse.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html">исходный код</a>) - это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется <code>parse()</code>, чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:</p>
+Вы можете увидеть первый метод в действии в нашем примере [heroes-finished-json-parse.html](http://mdn.github.io/learning-area/javascript/oojs/json/heroes-finished-json-parse.html) (см. [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/oojs/json/heroes-finished-json-parse.html)) - это то же самое, что и в примере, который мы создали ранее, за исключением того, что мы установили XHR для возврата сырого JSON текста, затем используется `parse()`, чтобы преобразовать его в фактический объект JavaScript. Ключевой фрагмент кода находится здесь:
 
-<pre class="brush: js">request.open('GET', requestURL);
+```js
+request.open('GET', requestURL);
 request.responseType = 'text'; // now we're getting a string!
 request.send();
 
@@ -306,41 +308,40 @@ request.onload = function() {
   var superHeroes = JSON.parse(superHeroesText); // convert it to an object
   populateHeader(superHeroes);
   showHeroes(superHeroes);
-}</pre>
+}
+```
 
-<p>Как вы могли догадаться, <code>stringify()</code> работает обратным образом. Попробуйте ввести следующие строки в консоль JavaScript браузера один за другим, чтобы увидеть его в действии:</p>
+Как вы могли догадаться, `stringify()` работает обратным образом. Попробуйте ввести следующие строки в консоль JavaScript браузера один за другим, чтобы увидеть его в действии:
 
-<pre class="brush: js">var myJSON = { "name": "Chris", "age": "38" };
+```js
+var myJSON = { "name": "Chris", "age": "38" };
 myJSON
 var myString = JSON.stringify(myJSON);
-myString</pre>
+myString
+```
 
-<p>Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя <code>stringify()</code> , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.</p>
+Здесь мы создаём объект JavaScript, затем проверяем, что он содержит, а затем преобразуем его в строку JSON, используя `stringify()` , сохраняя возвращаемое значение в новой переменной, а затем снова проверяем его.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>В этой статье мы предоставили вам простое руководство по использованию JSON в ваших программах, в том числе о том, как создавать и анализировать JSON, и как получить доступ к данным, заблокированным внутри него. В следующей статье мы рассмотрим объектно-ориентированный JavaScript.</p>
+В этой статье мы предоставили вам простое руководство по использованию JSON в ваших программах, в том числе о том, как создавать и анализировать JSON, и как получить доступ к данным, заблокированным внутри него. В следующей статье мы рассмотрим объектно-ориентированный JavaScript.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON">JSON object reference page</a></li>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest object reference page</a></li>
- <li><a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">Using XMLHttpRequest</a></li>
- <li><a href="/en-US/docs/Web/HTTP/Methods">HTTP request methods</a></li>
- <li><a href="http://json.org">Official JSON web site with link to ECMA standard</a></li>
-</ul>
+- [JSON object reference page](/ru/docs/Web/JavaScript/Reference/Global_Objects/JSON)
+- [XMLHttpRequest object reference page](/ru/docs/Web/API/XMLHttpRequest)
+- [Using XMLHttpRequest](/ru/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)
+- [HTTP request methods](/ru/docs/Web/HTTP/Methods)
+- [Official JSON web site with link to ECMA standard](http://json.org)
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}</p>
+{{PreviousMenuNext("Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects/Object_building_practice", "Learn/JavaScript/Objects")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B">Основы объекта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes">Прототипы объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance">Наследование в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON">Работа с данными JSON</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice">Практика построения объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features">Добавление функций в нашу демонстрацию прыгающих шаров</a></li>
-</ul>
+- [Основы объекта](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B)
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS)
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes)
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance)
+- [Работа с данными JSON](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON)
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice)
+- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/javascript/objects/object_building_practice/index.md b/files/ru/learn/javascript/objects/object_building_practice/index.md
index 015b7c45959c47..b24c2a08febb91 100644
--- a/files/ru/learn/javascript/objects/object_building_practice/index.md
+++ b/files/ru/learn/javascript/objects/object_building_practice/index.md
@@ -7,297 +7,287 @@ tags:
 translation_of: Learn/JavaScript/Objects/Object_building_practice
 original_slug: Learn/JavaScript/Объекты/Object_building_practice
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</div>
+В предыдущих статьях мы рассмотрели всю существенную теорию объектов JavaScript и детали синтаксиса, давая вам прочную основу для начала. В этой статье мы погружаемся в практическое упражнение, давая вам больше практики в создании пользовательских объектов JavaScript, с весёлым и красочным результатом.
 
-<p class="summary">В предыдущих статьях мы рассмотрели всю существенную теорию объектов JavaScript и детали синтаксиса, давая вам прочную основу для начала. В этой статье мы погружаемся в практическое упражнение, давая вам больше практики в создании пользовательских объектов JavaScript, с весёлым и красочным результатом.</p>
+| Необходимые знания: | Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (see [First steps](/ru/docs/Learn/JavaScript/First_steps) and [Building blocks](/ru/docs/Learn/JavaScript/Building_blocks)) и основами OOJS (см. [Introduction to objects](/ru/docs/Learn/JavaScript/Object-oriented/Introduction)). |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Получение некоторой практики в использовании объектов и объектно-ориентированных методов в реальном мире.                                                                                                                                                                                                                          |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Базовая компьютерная грамотность, базовые знания HTML и CSS, знакомство с основами JavaScript (see <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> and <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>) и основами OOJS (см. <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Получение некоторой практики в использовании объектов и объектно-ориентированных методов в реальном мире.</td>
-  </tr>
- </tbody>
-</table>
+## Давайте подбросим несколько мячей
 
-<h2 id="Давайте_подбросим_несколько_мячей">Давайте подбросим несколько мячей</h2>
+В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в JavaScript. Наши маленькие шары будут подпрыгивать на экране и менять цвет, когда они касаются друг друга. Готовый пример будет выглядеть примерно так:
 
-<p>В этой статье мы напишем классическую демонстрацию «прыгающих шаров», чтобы показать вам, насколько полезными могут быть объекты в JavaScript. Наши маленькие шары будут подпрыгивать на экране и менять цвет, когда они касаются друг друга. Готовый пример будет выглядеть примерно так:</p>
+![](https://mdn.mozillademos.org/files/13865/bouncing-balls.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13865/bouncing-balls.png" style="display: block; height: 614px; margin: 0px auto; width: 800px;"></p>
+В этом примере будет использоваться [Canvas API](/ru/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics) для рисования шаров на экране и API [requestAnimationFrame](/ru/docs/Web/API/window/requestAnimationFrame) для анимации всего экрана - вам не нужно иметь никаких предыдущих знаний об этих API, и мы надеемся, что к тому моменту, когда вы закончите эту статью, вам будет интересно изучить их больше. По пути мы воспользуемся некоторыми изящными объектами и покажем вам пару хороших приёмов, таких как отскоки шаров от стен и проверка того, попали ли они друг в друга (иначе известный как **обнаружение столкновения**).
 
-<ol>
-</ol>
+## Начало работы
 
-<p>В этом примере будет использоваться <a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics">Canvas API</a> для рисования шаров на экране и API <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> для анимации всего экрана - вам не нужно иметь никаких предыдущих знаний об этих API, и мы надеемся, что к тому моменту, когда вы закончите эту статью, вам будет интересно изучить их больше. По пути мы воспользуемся некоторыми изящными объектами и покажем вам пару хороших приёмов, таких как отскоки шаров от стен и проверка того, попали ли они друг в друга (иначе известный как <strong>обнаружение столкновения</strong>).</p>
+Для начала создайте локальные копии наших файлов[`index.html`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html), [`style.css`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css) и [`main.js`](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js). Они содержат следующее:
 
-<h2 id="Начало_работы">Начало работы</h2>
+1.  Очень простой HTML-документ, содержащий элемент {{HTMLElement("h1")}}, элемент {{HTMLElement("canvas")}} для рисования наших шаров и элементы для применения нашего CSS и JavaScript в нашем HTML.
+2.  Некоторые очень простые стили, которые в основном служат для стилизации и позиционирования `<h1>`, и избавляются от любых полос прокрутки или отступы по краю страницы (так что это выглядит красиво и аккуратно).
+3.  Некоторые JavaScript, которые служат для настройки элемента `<canvas>` и предоставляют общую функцию, которую мы собираемся использовать.
 
-<p>Для начала создайте локальные копии наших файлов<code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/index.html">index.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/style.css">style.css</a></code> и <code><a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main.js">main.js</a></code>. Они содержат следующее:</p>
+Первая часть скрипта выглядит так:
 
-<ol>
- <li>Очень простой HTML-документ, содержащий элемент {{HTMLElement("h1")}}, элемент {{HTMLElement("canvas")}} для рисования наших шаров и элементы для применения нашего CSS и JavaScript в нашем HTML.</li>
- <li>Некоторые очень простые стили, которые в основном служат для стилизации и позиционирования <code>&lt;h1&gt;</code>, и избавляются от любых полос прокрутки или отступы по краю страницы (так что это выглядит красиво и аккуратно).</li>
- <li>Некоторые JavaScript, которые служат для настройки элемента <code>&lt;canvas&gt;</code> и предоставляют общую функцию, которую мы собираемся использовать.</li>
-</ol>
-
-<p>Первая часть скрипта выглядит так:</p>
-
-<pre class="brush: js">var canvas = document.querySelector('canvas');
+```js
+var canvas = document.querySelector('canvas');
 
 var ctx = canvas.getContext('2d');
 
 var width = canvas.width = window.innerWidth;
-var height = canvas.height = window.innerHeight;</pre>
+var height = canvas.height = window.innerHeight;
+```
 
-<p>Этот скрипт получает ссылку на элемент <code>&lt;canvas&gt;</code>, а затем вызывает метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext">getContext()</a></code>, чтобы дать нам контекст, по которому мы можем начать рисовать. Результирующая переменная (ctx) - это объект, который непосредственно представляет область рисования холста и позволяет рисовать на ней 2D-фигуры.</p>
+Этот скрипт получает ссылку на элемент `<canvas>`, а затем вызывает метод [`getContext()`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext), чтобы дать нам контекст, по которому мы можем начать рисовать. Результирующая переменная (ctx) - это объект, который непосредственно представляет область рисования холста и позволяет рисовать на ней 2D-фигуры.
 
-<p>Затем мы устанавливаем переменные, называемые <code>width</code> и <code>height</code>, а также ширину и высоту элемента canvas (представленные свойствами <code>canvas.width</code> и <code>canvas.height</code>), чтобы равняться ширине и высоте окна просмотра браузера (область, на которой отображается веб-страница - это можно получить из свойств {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}).</p>
+Затем мы устанавливаем переменные, называемые `width` и `height`, а также ширину и высоту элемента canvas (представленные свойствами `canvas.width` и `canvas.height`), чтобы равняться ширине и высоте окна просмотра браузера (область, на которой отображается веб-страница - это можно получить из свойств {{domxref("Window.innerWidth")}} и {{domxref("Window.innerHeight")}}).
 
-<p>Вы увидите здесь, что мы объединяем несколько назначений вместе, чтобы все переменные были установлены быстрее - это совершенно нормально.</p>
+Вы увидите здесь, что мы объединяем несколько назначений вместе, чтобы все переменные были установлены быстрее - это совершенно нормально.
 
-<p>Последний бит исходного скрипта выглядит следующим образом:</p>
+Последний бит исходного скрипта выглядит следующим образом:
 
-<pre class="brush: js">function random(min, max) {
+```js
+function random(min, max) {
   var num = Math.floor(Math.random() * (max - min + 1)) + min;
   return num;
-}</pre>
+}
+```
 
-<p>Эта функция принимает два числа в качестве аргументов и возвращает случайное число в диапазоне между ними.</p>
+Эта функция принимает два числа в качестве аргументов и возвращает случайное число в диапазоне между ними.
 
-<h2 id="Моделирование_мяча_в_нашей_программе">Моделирование мяча в нашей программе</h2>
+## Моделирование мяча в нашей программе
 
-<p>В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.</p>
+В нашей программе будет много шаров, подпрыгивающих вокруг экрана. Поскольку эти шары будут вести себя одинаково, имеет смысл представлять их в виде объекта. Начнём с добавления следующего конструктора в конец нашего кода.
 
-<pre class="brush: js">function Ball(x, y, velX, velY, color, size) {
+```js
+function Ball(x, y, velX, velY, color, size) {
   this.x = x;
   this.y = y;
   this.velX = velX;
   this.velY = velY;
   this.color = color;
   this.size = size;
-}</pre>
+}
+```
 
-<p>Здесь мы включаем некоторые параметры, которые определяют свойства, которым должен соответствовать каждый шар в нашей программе:</p>
+Здесь мы включаем некоторые параметры, которые определяют свойства, которым должен соответствовать каждый шар в нашей программе:
 
-<ul>
- <li><code>x</code> и <code>y</code> координаты - горизонтальные и вертикальные координаты, где мяч будет запускаться на экране. Координаты могут находиться в диапазоне от 0 (верхний левый угол) до ширины и высоты окна просмотра браузера (нижний правый угол).</li>
- <li>горизонтальная и вертикальная скорость (<code>velX</code> и <code>velY</code>) - каждому шару задана горизонтальная и вертикальная скорость; в реальном выражении эти значения будут регулярно добавляться к значениям координат <code>x</code>/<code>y</code>, когда мы начнём анимировать шары, чтобы их перемещать на каждом кадре.</li>
- <li><code>color</code> - каждый мяч получает цвет.</li>
- <li><code>size</code> - каждый мяч получает размер - это будет его радиус в пикселях.</li>
-</ul>
+- `x` и `y` координаты - горизонтальные и вертикальные координаты, где мяч будет запускаться на экране. Координаты могут находиться в диапазоне от 0 (верхний левый угол) до ширины и высоты окна просмотра браузера (нижний правый угол).
+- горизонтальная и вертикальная скорость (`velX` и `velY`) - каждому шару задана горизонтальная и вертикальная скорость; в реальном выражении эти значения будут регулярно добавляться к значениям координат `x`/`y`, когда мы начнём анимировать шары, чтобы их перемещать на каждом кадре.
+- `color` - каждый мяч получает цвет.
+- `size` - каждый мяч получает размер - это будет его радиус в пикселях.
 
-<p>Этим мы сортируем свойства, но что насчёт методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.</p>
+Этим мы сортируем свойства, но что насчёт методов? Мы хотим заставить эти шары на самом деле сделать что-то в нашей программе.
 
-<h3 id="Рисование_шара">Рисование шара</h3>
+### Рисование шара
 
-<p>Сначала добавьте следующий метод <code>draw()</code> к <code>Ball()</code>'s <code>prototype</code>:</p>
+Сначала добавьте следующий метод `draw()` к `Ball()`'s `prototype`:
 
-<pre class="brush: js">Ball.prototype.draw = function() {
+```js
+Ball.prototype.draw = function() {
   ctx.beginPath();
   ctx.fillStyle = this.color;
   ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
   ctx.fill();
-}</pre>
-
-<p>Используя эту функцию, мы можем сказать нашему шару нарисовать себя на экране, вызвав ряд членов контекста двумерного холста, который мы определили ранее (<code>ctx</code>). Контекст похож на бумагу, и теперь мы хотим, чтобы наше перо рисовало что-то на нем:</p>
-
-<ul>
- <li>Во-первых, мы используем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath">beginPath()</a></code>, чтобы указать, что мы хотим нарисовать фигуру на бумаге.</li>
- <li>Затем мы используем <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle">fillStyle</a></code> для определения того, какой цвет нам нужен, - мы устанавливаем его в свойство цвета нашего шара.</li>
- <li>Затем мы используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc">arc()</a></code> для отслеживания формы дуги на бумаге. Его параметры:
-  <ul>
-   <li>Положение <code>x</code> и <code>y</code> центра дуги - мы указываем свойства <code>x</code> и <code>y</code> нашего шара.</li>
-   <li>Радиус нашей дуги - мы указываем свойство <code>size</code> шарика.</li>
-   <li>Последние два параметра определяют начальное и конечное число градусов по кругу, по которому проходит дуга. Здесь мы указываем 0 градусов и <code>2 * PI</code>, что эквивалентно 360 градусам в радианах (досадно, вы должны указать это в радианах). Это даёт нам полный круг. Если вы указали только <code>1 * PI</code>, вы получите полукруг (180 градусов).</li>
-  </ul>
- </li>
- <li>В последнем случае мы используем метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill">fill()</a></code>, который в основном утверждает: «Закончите рисование пути, начатого с <code>beginPath()</code>, и заполните область, которую он занимает с цветом, указанным ранее в <code>fillStyle</code>».</li>
-</ul>
-
-<p>Теперь вы можете начать тестирование своего объекта..</p>
-
-<ol>
- <li>Сохраните код и загрузите HTML-файл в браузер.</li>
- <li>Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.</li>
- <li>Чтобы создать новый экземпляр шара, введите следующее:
-  <pre class="brush: js">var testBall = new Ball(50, 100, 4, 4, 'blue', 10);</pre>
- </li>
- <li>Попробуйте вызвать его свойства и методы:
-  <pre class="brush: js">testBall.x
-testBall.size
-testBall.color
-testBall.draw()</pre>
- </li>
- <li>После введения последней строки, вы должны увидеть, как мяч нарисовался где-то на вашем холсте.</li>
-</ol>
-
-<h3 id="Обновление_данных_мяча">Обновление данных мяча</h3>
-
-<p>Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод <code>update()</code> к <code>Ball()</code>'s <code>prototype</code>:</p>
-
-<pre class="brush: js">Ball.prototype.update = function() {
-  if ((this.x + this.size) &gt;= width) {
+}
+```
+
+Используя эту функцию, мы можем сказать нашему шару нарисовать себя на экране, вызвав ряд членов контекста двумерного холста, который мы определили ранее (`ctx`). Контекст похож на бумагу, и теперь мы хотим, чтобы наше перо рисовало что-то на нем:
+
+- Во-первых, мы используем [`beginPath()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/beginPath), чтобы указать, что мы хотим нарисовать фигуру на бумаге.
+- Затем мы используем [`fillStyle`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillStyle) для определения того, какой цвет нам нужен, - мы устанавливаем его в свойство цвета нашего шара.
+- Затем мы используем метод [`arc()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc) для отслеживания формы дуги на бумаге. Его параметры:
+
+  - Положение `x` и `y` центра дуги - мы указываем свойства `x` и `y` нашего шара.
+  - Радиус нашей дуги - мы указываем свойство `size` шарика.
+  - Последние два параметра определяют начальное и конечное число градусов по кругу, по которому проходит дуга. Здесь мы указываем 0 градусов и `2 * PI`, что эквивалентно 360 градусам в радианах (досадно, вы должны указать это в радианах). Это даёт нам полный круг. Если вы указали только `1 * PI`, вы получите полукруг (180 градусов).
+
+- В последнем случае мы используем метод [`fill()`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fill), который в основном утверждает: «Закончите рисование пути, начатого с `beginPath()`, и заполните область, которую он занимает с цветом, указанным ранее в `fillStyle`».
+
+Теперь вы можете начать тестирование своего объекта..
+
+1.  Сохраните код и загрузите HTML-файл в браузер.
+2.  Откройте консоль JavaScript браузера, а затем обновите страницу, чтобы размер холста изменился в соответствии с новой шириной и высотой окна просмотра браузера после открытия консоли.
+3.  Чтобы создать новый экземпляр шара, введите следующее:
+
+    ```js
+    var testBall = new Ball(50, 100, 4, 4, 'blue', 10);
+    ```
+
+4.  Попробуйте вызвать его свойства и методы:
+
+    ```js
+    testBall.x
+    testBall.size
+    testBall.color
+    testBall.draw()
+    ```
+
+5.  После введения последней строки, вы должны увидеть, как мяч нарисовался где-то на вашем холсте.
+
+### Обновление данных мяча
+
+Мы можем нарисовать мяч в нужном положении, но чтобы начать движение мяча, нам нужна функция обновления. Добавьте следующий код внизу вашего файла JavaScript, чтобы добавить метод `update()` к `Ball()`'s `prototype`:
+
+```js
+Ball.prototype.update = function() {
+  if ((this.x + this.size) >= width) {
     this.velX = -(this.velX);
   }
 
-  if ((this.x - this.size) &lt;= 0) {
+  if ((this.x - this.size) <= 0) {
     this.velX = -(this.velX);
   }
 
-  if ((this.y + this.size) &gt;= height) {
+  if ((this.y + this.size) >= height) {
     this.velY = -(this.velY);
   }
 
-  if ((this.y - this.size) &lt;= 0) {
+  if ((this.y - this.size) <= 0) {
     this.velY = -(this.velY);
   }
 
   this.x += this.velX;
   this.y += this.velY;
-}</pre>
+}
+```
 
-<p>Первые четыре части функции проверяют, достиг ли шар края холста. Если это так, мы изменяем полярность соответствующей скорости, чтобы заставить шар двигаться в противоположном направлении. Так, например, если мяч двигался вверх (положительный <code>velY</code>), то вертикальная скорость изменяется так, что он начинает двигаться вниз (отрицательная величина <code>velY</code>).</p>
+Первые четыре части функции проверяют, достиг ли шар края холста. Если это так, мы изменяем полярность соответствующей скорости, чтобы заставить шар двигаться в противоположном направлении. Так, например, если мяч двигался вверх (положительный `velY`), то вертикальная скорость изменяется так, что он начинает двигаться вниз (отрицательная величина `velY`).
 
-<p>В этих четырёх случаях мы:</p>
+В этих четырёх случаях мы:
 
-<ul>
- <li>Проверяем больше ли координата <code>x</code>, чем ширина холста (мяч уходит с правого края).</li>
- <li>Проверяем будет ли координата <code>x</code> меньше 0 (мяч уходит с левого края).</li>
- <li>Проверяем будет ли координата <code>y</code> больше высоты холста (мяч уходит с нижнего края).</li>
- <li>Проверяем будет ли координата <code>y</code> меньше 0 (мяч уходит с верхнего края).</li>
-</ul>
+- Проверяем больше ли координата `x`, чем ширина холста (мяч уходит с правого края).
+- Проверяем будет ли координата `x` меньше 0 (мяч уходит с левого края).
+- Проверяем будет ли координата `y` больше высоты холста (мяч уходит с нижнего края).
+- Проверяем будет ли координата `y` меньше 0 (мяч уходит с верхнего края).
 
-<p>В каждом случае мы включаем <code>size</code> шарика в расчёт, потому что координаты <code>x</code>/<code>y</code> находятся в центре шара, но мы хотим, чтобы край шара отскакивал от периметра - мы не хотим, чтобы мяч на половину заходил за границу экрана прежде чем он начнёт возвращаться назад.</p>
+В каждом случае мы включаем `size` шарика в расчёт, потому что координаты `x`/`y` находятся в центре шара, но мы хотим, чтобы край шара отскакивал от периметра - мы не хотим, чтобы мяч на половину заходил за границу экрана прежде чем он начнёт возвращаться назад.
 
-<p>Последние две строки добавляют значение <code>velX</code> к координате <code>x</code>, а значение <code>velY</code> - координате <code>y</code> - шар фактически перемещается при каждом вызове этого метода.</p>
+Последние две строки добавляют значение `velX` к координате `x`, а значение `velY` - координате `y` - шар фактически перемещается при каждом вызове этого метода.
 
-<p>На сейчас этого достаточно, давайте продолжим анимацию!</p>
+На сейчас этого достаточно, давайте продолжим анимацию!
 
-<h2 id="Анимация_мяча">Анимация мяча</h2>
+## Анимация мяча
 
-<p>Теперь давайте приступать к веселью! Сейчас мы начнём добавлять шары к холсту и анимировать их.</p>
+Теперь давайте приступать к веселью! Сейчас мы начнём добавлять шары к холсту и анимировать их.
 
-<ol>
- <li>Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода:
-  <pre class="brush: js">var balls = [];</pre>
+1.  Во-первых, нам нужно где-то хранить все наши шары. Следующий массив выполнит это задание - добавьте его внизу кода:
 
-  <p>Все программы, которые оживляют вещи, обычно включают цикл анимации, который служит для обновления информации в программе, а затем визуализации результирующего представления для каждого кадра анимации; это основа для большинства игр и других подобных программ.</p>
- </li>
- <li>Добавьте ниже эту часть кода:
-  <pre class="brush: js">function loop() {
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
-  ctx.fillRect(0, 0, width, height);
+    ```js
+    var balls = [];
+    ```
 
-  while (balls.length &lt; 25) {
-    var ball = new Ball(
-      random(0,width),
-      random(0,height),
-      random(-7,7),
-      random(-7,7),
-      'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
-      random(10,20)
-    );
-    balls.push(ball);
-  }
+    Все программы, которые оживляют вещи, обычно включают цикл анимации, который служит для обновления информации в программе, а затем визуализации результирующего представления для каждого кадра анимации; это основа для большинства игр и других подобных программ.
 
-  for (var i = 0; i &lt; balls.length; i++) {
-    balls[i].draw();
-    balls[i].update();
-  }
+2.  Добавьте ниже эту часть кода:
+
+    ```js
+    function loop() {
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
+      ctx.fillRect(0, 0, width, height);
+
+      while (balls.length < 25) {
+        var ball = new Ball(
+          random(0,width),
+          random(0,height),
+          random(-7,7),
+          random(-7,7),
+          'rgb(' + random(0,255) + ',' + random(0,255) + ',' + random(0,255) +')',
+          random(10,20)
+        );
+        balls.push(ball);
+      }
 
-  requestAnimationFrame(loop);
-}</pre>
+      for (var i = 0; i < balls.length; i++) {
+        balls[i].draw();
+        balls[i].update();
+      }
+
+      requestAnimationFrame(loop);
+    }
+    ```
+
+    Наша функция `loop()` выполняет следующие действия:
+
+    - Устанавливает цвет заливки на полупрозрачный чёрный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя `fillRect()` (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, `rgba(0,0,0,0,25)`, чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.
+    - Создаёт новый экземпляр нашего `Ball()`, используя случайные значения, сгенерированные с помощью нашей функции `random()`, затем `push()` на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в `balls.length < 25`, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации.
+    - перебирает все шары в массиве `balls` и запускает каждую функцию `draw()` и `update()` для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.
+    - Выполняет функцию снова с помощью метода `requestAnimationFrame()` - когда этот метод постоянно запускается и передаётся одно и то же имя функции, он будет запускать эту функцию определённое количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.
 
-  <p>Наша функция <code>loop()</code> выполняет следующие действия:</p>
+3.  И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию.
 
-  <ul>
-   <li>Устанавливает цвет заливки на полупрозрачный чёрный, затем рисует прямоугольник цвета по всей ширине и высоте холста, используя <code>fillRect()</code> (четыре параметра обеспечивают начальную координату, а ширину и высоту для рисованного прямоугольника ). Это позволяет скрыть рисунок предыдущего кадра до того, как будет нарисован следующий. Если вы этого не сделаете, вы увидите, как длинные змеи пробираются вокруг холста, а не шары! Цвет заливки устанавливается на полупрозрачный, <code>rgba(0,0,0,0,25)</code>, чтобы позволить нескольким кадрам слегка просвечивать, создавая маленькие тропы за шариками по мере их перемещения. Если вы изменили 0.25 на 1, вы больше не увидите их. Попробуйте изменить это число, чтобы увидеть эффект, который он имеет.</li>
-   <li>Создаёт новый экземпляр нашего <code>Ball()</code>, используя случайные значения, сгенерированные с помощью нашей функции <code>random()</code>, затем <code>push()</code> на конец нашего массива шаров, но только в том случае, когда количество шаров в массиве меньше 25. Итак когда у нас есть 25 мячей на экране, больше не появляется шаров. Вы можете попробовать изменить число в <code>balls.length &lt; 25</code>, чтобы получить больше или меньше шаров на экране. В зависимости от того, сколько вычислительной мощности имеет ваш компьютер / браузер, если указать несколько тысяч шаров, это может довольно существенно повлиять на производительность анимации. </li>
-   <li>перебирает все шары в массиве <code>balls</code> и запускает каждую функцию <code>draw()</code> и <code>update()</code> для рисования каждого из них на экране, а затем выполняет необходимые обновления по положению и скорости во времени для следующего кадра.</li>
-   <li>Выполняет функцию снова с помощью метода <code>requestAnimationFrame()</code> - когда этот метод постоянно запускается и передаётся одно и то же имя функции, он будет запускать эту функцию определённое количество раз в секунду для создания плавной анимации. Обычно это делается рекурсивно - это означает, что функция вызывает себя каждый раз, когда она запускается, поэтому она будет работать снова и снова.</li>
-  </ul>
- </li>
- <li>И последнее, но не менее важное: добавьте следующую строку в конец вашего кода - нам нужно вызвать функцию один раз, чтобы начать анимацию.
-  <pre class="brush: js">loop();</pre>
- </li>
-</ol>
+    ```js
+    loop();
+    ```
 
-<p>Вот и все для основы - попробуйте сохранить и освежить, чтобы проверить свои прыгающие шары!</p>
+Вот и все для основы - попробуйте сохранить и освежить, чтобы проверить свои прыгающие шары!
 
-<h2 id="Добавление_обнаружения_столкновений">Добавление обнаружения столкновений</h2>
+## Добавление обнаружения столкновений
 
-<p>Теперь немного поиграем, давайте добавим в нашу программу обнаружение конфликтов, поэтому наши мячи узнают, когда они ударят по другому шару.</p>
+Теперь немного поиграем, давайте добавим в нашу программу обнаружение конфликтов, поэтому наши мячи узнают, когда они ударят по другому шару.
 
-<ol>
- <li>Прежде всего, добавьте следующее определение метода ниже, где вы определили метод <code>update()</code> (т.е. блок <code>Ball.prototype.update</code>).
+1.  Прежде всего, добавьте следующее определение метода ниже, где вы определили метод `update()` (т.е. блок `Ball.prototype.update`).
 
-  <pre class="brush: js">Ball.prototype.collisionDetect = function() {
-  for (var j = 0; j &lt; balls.length; j++) {
-    if (!(this === balls[j])) {
-      var dx = this.x - balls[j].x;
-      var dy = this.y - balls[j].y;
-      var distance = Math.sqrt(dx * dx + dy * dy);
+    ```js
+    Ball.prototype.collisionDetect = function() {
+      for (var j = 0; j < balls.length; j++) {
+        if (!(this === balls[j])) {
+          var dx = this.x - balls[j].x;
+          var dy = this.y - balls[j].y;
+          var distance = Math.sqrt(dx * dx + dy * dy);
 
-      if (distance &lt; this.size + balls[j].size) {
-        balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+          if (distance < this.size + balls[j].size) {
+            balls[j].color = this.color = 'rgb(' + random(0, 255) + ',' + random(0, 255) + ',' + random(0, 255) +')';
+          }
+        }
       }
     }
-  }
-}</pre>
-
-  <p>Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:</p>
-
-  <ul>
-   <li>Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем ещё один цикл <code>for</code>  через все шары в массиве <code>balls[]</code>.</li>
-   <li>Сразу же в нашем цикле for мы используем оператор <code>if</code>, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем <code>!</code> чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они <strong>не</strong> совпадают.</li>
-   <li>Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее <a href="https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a>.</li>
-   <li>Если обнаружено столкновение, выполняется код внутри внутреннего оператора <code>if</code>. В этом случае мы просто устанавливаем свойство <code>color</code> обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как <a href="http://wellcaffeinated.net/PhysicsJS/">PhysicsJS</a>, <a href="http://brm.io/matter-js/">matter.js</a>, <a href="http://phaser.io/">Phaser</a> и т.д.</li>
-  </ul>
- </li>
- <li>Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки <code>balls[i].update();</code>
-  <pre class="brush: js">balls[i].collisionDetect();</pre>
- </li>
- <li>Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!</li>
-</ol>
-
-<div class="note">
-<p><strong>Примечание</strong>. Если вам не удаётся заставить этот пример работать, попробуйте сравнить код JavaScript с нашей <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js">готовой версией</a> (также смотрите, как он работает <a href="https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html">в прямом эфире</a>).</p>
-</div>
-
-<h2 id="Резюме">Резюме</h2>
-
-<p>Мы надеемся, что вам понравилось писать собственный пример случайных прыгающих шаров в реальном мире, используя различные объектные и объектно-ориентированные методы из всего модуля! Это должно было дать вам некоторую полезную практику использования объектов и хорошего контекста реального мира.</p>
-
-<p>Вот и все для предметных статей - все, что осталось сейчас, - это проверить свои навыки в оценке объекта.</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas tutorial</a> — руководство для новичков по использованию 2D-холста.</li>
- <li><a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame()</a></li>
- <li><a href="/en-US/docs/Games/Techniques/2D_collision_detection">2D collision detection</a></li>
- <li><a href="/en-US/docs/Games/Techniques/3D_collision_detection">3D collision detection</a></li>
- <li><a href="/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript">2D breakout game using pure JavaScript</a> — a great beginner's tutorial showing how to build a 2D game.</li>
- <li><a href="/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser">2D breakout game using Phaser</a> — explains the basics of building a 2D game using a JavaScript game library.</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B">Основы объекта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes">Прототипы объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance">Наследование в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON">Работа с данными JSON</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice">Практика построения объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features">Добавление функций в нашу демонстрацию прыгающих шаров</a></li>
-</ul>
+    ```
+
+    Этот метод немного сложный, поэтому не беспокойтесь, если вы не понимаете, как именно это работает. Ниже приводится объяснение:
+
+    - Для каждого шара нам нужно проверить каждый другой шар, чтобы увидеть, столкнулся ли он с текущим мячом. Чтобы сделать это, мы открываем ещё один цикл `for` через все шары в массиве `balls[]`.
+    - Сразу же в нашем цикле for мы используем оператор `if`, чтобы проверить, проходит ли текущий шарик, тот же самый шар, что и тот, который мы сейчас проверяем. Мы не хотим проверять, что мяч столкнулся с самим собой! Для этого мы проверяем, является ли текущий мяч (т.е. мяч, метод которого вызван методом collisionDetect) такой же, как шар петли (т.е. шар, на который ссылается текущая итерация цикла for в collisionDetect метод). Затем мы используем `!` чтобы отменить проверку, чтобы код внутри оператора if выполнялся только в том случае, если они **не** совпадают.
+    - Затем мы используем общий алгоритм для проверки столкновения двух окружностей. Мы в основном проверяем, перекрывается ли какая-либо из областей круга. Это объясняется далее [2D collision detection](/ru/docs/Games/Techniques/2D_collision_detection).
+    - Если обнаружено столкновение, выполняется код внутри внутреннего оператора `if`. В этом случае мы просто устанавливаем свойство `color` обоих кругов на новый случайный цвет. Мы могли бы сделать что-то гораздо более сложное, например, заставить шары отскакивать друг от друга реалистично, но это было бы гораздо сложнее реализовать. Для такого моделирования физики разработчики склонны использовать игры или библиотеку физики, такие как [PhysicsJS](http://wellcaffeinated.net/PhysicsJS/), [matter.js](http://brm.io/matter-js/), [Phaser](http://phaser.io/) и т.д.
+
+2.  Вы также должны вызвать этот метод в каждом кадре анимации. Добавьте следующий код после строки `balls[i].update();`
+
+    ```js
+    balls[i].collisionDetect();
+    ```
+
+3.  Сохраните и обновите демо снова, и вы увидите, как ваши мячи меняют цвет, когда они сталкиваются!
+
+> **Примечание:** . Если вам не удаётся заставить этот пример работать, попробуйте сравнить код JavaScript с нашей [готовой версией](https://github.com/mdn/learning-area/blob/master/javascript/oojs/bouncing-balls/main-finished.js) (также смотрите, как он работает [в прямом эфире](https://mdn.github.io/learning-area/javascript/oojs/bouncing-balls/index-finished.html)).
+
+## Резюме
+
+Мы надеемся, что вам понравилось писать собственный пример случайных прыгающих шаров в реальном мире, используя различные объектные и объектно-ориентированные методы из всего модуля! Это должно было дать вам некоторую полезную практику использования объектов и хорошего контекста реального мира.
+
+Вот и все для предметных статей - все, что осталось сейчас, - это проверить свои навыки в оценке объекта.
+
+## Смотрите также
+
+- [Canvas tutorial](/ru/docs/Web/API/Canvas_API/Tutorial) — руководство для новичков по использованию 2D-холста.
+- [requestAnimationFrame()](/ru/docs/Web/API/window/requestAnimationFrame)
+- [2D collision detection](/ru/docs/Games/Techniques/2D_collision_detection)
+- [3D collision detection](/ru/docs/Games/Techniques/3D_collision_detection)
+- [2D breakout game using pure JavaScript](/ru/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript) — a great beginner's tutorial showing how to build a 2D game.
+- [2D breakout game using Phaser](/ru/docs/Games/Tutorials/2D_breakout_game_Phaser) — explains the basics of building a 2D game using a JavaScript game library.
+
+{{PreviousMenuNext("Learn/JavaScript/Objects/JSON", "Learn/JavaScript/Objects/Adding_bouncing_balls_features", "Learn/JavaScript/Objects")}}
+
+## В этом модуле
+
+- [Основы объекта](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D1%8B)
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object-oriented_JS)
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_prototypes)
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Inheritance)
+- [Работа с данными JSON](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/JSON)
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Object_building_practice)
+- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/javascript/objects/object_prototypes/index.md b/files/ru/learn/javascript/objects/object_prototypes/index.md
index f723803e034041..9e8198a63e25fb 100644
--- a/files/ru/learn/javascript/objects/object_prototypes/index.md
+++ b/files/ru/learn/javascript/objects/object_prototypes/index.md
@@ -14,208 +14,198 @@ tags:
 translation_of: Learn/JavaScript/Objects/Object_prototypes
 original_slug: Learn/JavaScript/Объекты/Object_prototypes
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга. В этой статье мы объясним, как работают цепочки прототипов, и рассмотрим, как свойство prototype можно использовать для добавления методов к существующим конструкторам.
 
-<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</div>
+| Необходимые знания: | Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. [Первые шаги](/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8) и [Строительные блоки](ru/docs/Learn/JavaScript/Building_blocks)) и основы OOJS (см. [Введение в объекты](/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B)). |
+| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:               | Понять прототипы объектов JavaScript, как работают прототипные цепочки и как добавить новые методы в `prototype` свойство.                                                                                                                                                                                                                                                                     |
 
-<div>Прототипы - это механизм, с помощью которого объекты JavaScript наследуют свойства друг от друга. В этой статье мы объясним, как работают цепочки прототипов, и рассмотрим, как свойство prototype можно использовать для добавления методов к существующим конструкторам.</div>
+## Язык основанный на прототипах?
 
+JavaScript часто описывают как язык **прототипного наследования** — каждый объект, имеет **объект-прототип**, который выступает как шаблон, от которого объект наследует методы и свойства. Объект-прототип так же может иметь свой прототип и наследовать его свойства и методы и так далее. Это часто называется **цепочкой прототипов** и объясняет почему одним объектам доступны свойства и методы которые определены в других объектах.
 
+Точнее, свойства и методы определяются в свойстве `prototype` функции-конструктора объектов, а не в самих объектах.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>
-    <p>Базовая компьютерная грамотность, базовое понимание HTML и CSS, знакомство с основами JavaScript (см. <a href="/ru/docs/Learn/JavaScript/%D0%9F%D0%B5%D1%80%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B3%D0%B8">Первые шаги</a> и <a href="ru/docs/Learn/JavaScript/Building_blocks">Строительные блоки</a>) и основы OOJS (см. <a href="/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B">Введение в объекты</a>).</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Понять прототипы объектов JavaScript, как работают прототипные цепочки и как добавить новые методы в <code>prototype</code> свойство.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+В JavaScript создаётся связь между экземпляром объекта и его прототипом (свойство `__proto__`, которое является производным от свойства `prototype` конструктора), а свойства и методы обнаруживаются при переходе по цепочке прототипов.
 
-<h2 id="Язык_основанный_на_прототипах">Язык основанный на прототипах?</h2>
+> **Примечание:** Важно понимать, что существует различие между прототипом объекта (который доступен через [`Object.getPrototypeOf(obj)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf) или через устаревшее свойство [`__proto__`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)) и свойством `prototype` в функциях-конструкторах. Первое свойство является свойством каждого экземпляра, а второе - свойством конструктора. То есть `Object.getPrototypeOf(new Foobar())` относится к тому же объекту, что и `Foobar.prototype`.
 
-<p>JavaScript часто описывают как язык <strong>прототипного наследования</strong> — каждый объект, имеет <strong>объект-прототип</strong>, который выступает как шаблон, от которого объект наследует методы и свойства. Объект-прототип так же может иметь свой прототип и наследовать его свойства и методы и так далее. Это часто называется <strong>цепочкой прототипов </strong>и объясняет почему одним объектам доступны свойства и методы которые определены в других объектах.</p>
+Давайте посмотрим на пример, чтобы стало понятнее.
 
-<p>Точнее, свойства и методы определяются в свойстве <code>prototype</code> функции-конструктора объектов, а не в самих объектах.</p>
+## Понимание прототипа объектов
 
-<p>В JavaScript создаётся связь между экземпляром объекта и его прототипом (свойство <code>__proto__</code>, которое является производным от свойства <code>prototype</code> конструктора), а свойства и методы обнаруживаются при переходе по цепочке прототипов.</p>
+Вернёмся к примеру, когда мы закончили писать наш конструктор `Person()`- загрузите пример в свой браузер. Если у вас ещё нет работы от последней статьи, используйте наш пример [oojs-class-further-exercises.html](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) (см. Также [исходный код](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html)).
 
-<div class="note">
-<p><strong>Примечание</strong>: Важно понимать, что существует различие между прототипом объекта (который доступен через <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/getPrototypeOf">Object.getPrototypeOf(obj)</a></code> или через устаревшее свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code>) и свойством <code>prototype</code> в функциях-конструкторах. Первое свойство является свойством каждого экземпляра, а второе - свойством конструктора. То есть <code>Object.getPrototypeOf(new Foobar())</code> относится к тому же объекту, что и <code>Foobar.prototype</code>.</p>
-</div>
+В этом примере мы определили конструктору функцию, например:
 
-<p>Давайте посмотрим на пример, чтобы стало понятнее.</p>
-
-<h2 id="Понимание_прототипа_объектов">Понимание прототипа объектов</h2>
-
-<p>Вернёмся к примеру, когда мы закончили писать наш конструктор <code>Person()</code>- загрузите пример в свой браузер. Если у вас ещё нет работы от последней статьи, используйте наш пример <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> (см. Также <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">исходный код</a>).</p>
-
-<p>В этом примере мы определили конструктору функцию, например:</p>
-
-<pre class="brush: js line-numbers  language-js"><code class="language-js">function Person(first, last, age, gender, interests) {
+```js
+function Person(first, last, age, gender, interests) {
 
   // Определения методов и свойств
- </code><code> this.name = {
+  this.name = {
     'first': first,
     'last' : last
   };
   this.age = age;
   this.gender = gender;
-  //...см. </code><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/%D0%9E%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D1%8B">Введение в объекты</a> для полного определения<code class="language-js">
-}</code></pre>
+  //...см. Введение в объекты для полного определения
+}
+```
 
-<p>Затем мы создаём экземпляр объекта следующим образом:</p>
+Затем мы создаём экземпляр объекта следующим образом:
 
-<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>
+```js
+var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);
+```
 
-<p>Если вы наберёте «<code>person1.</code>» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:</p>
+Если вы наберёте «`person1.`» в вашей консоли JavaScript, вы должны увидеть, что браузер пытается автоматически заполнить это с именами участников, доступных на этом объекте:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13853/object-available-members.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/13853/object-available-members.png)
 
-<p>В этом списке вы увидите элементы, определённые в конструкторе person 1 — Person() — <code>name</code>, <code>age</code>, <code>gender</code>, <code>interests</code>, <code>bio</code>, и <code>greeting</code>. Однако вы также увидите некоторые другие элементы — <code>watch</code>, <code>valueOf</code>и т. д. — они определены в объекте прототипа Person (), который является <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>.</p>
+В этом списке вы увидите элементы, определённые в конструкторе person 1 — Person() — `name`, `age`, `gender`, `interests`, `bio`, и `greeting`. Однако вы также увидите некоторые другие элементы — `watch`, `valueOf`и т. д. — они определены в объекте прототипа Person (), который является [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object).
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png" style="display: block; height: 150px; margin: 0px auto; width: 700px;"></p>
+![](https://mdn.mozillademos.org/files/13891/MDN-Graphics-person-person-object-2.png)
 
-<p>Итак, что произойдёт, если вы вызываете метод в <code>person1</code>, который фактически определён в <code>Object</code>? Например:</p>
+Итак, что произойдёт, если вы вызываете метод в `person1`, который фактически определён в `Object`? Например:
 
-<pre class="brush: js">person1.valueOf()</pre>
+```js
+person1.valueOf()
+```
 
-<p>Этот метод — <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.valueOf()</a></code>наследуется <code>person1</code>, потому что его конструктором является <code>Person()</code>, а прототипом <code>Person()</code> является <code>Object()</code>. <code>valueOf()</code> возвращает значение вызываемого объекта — попробуйте и убедитесь! В этом случае происходит следующее:</p>
+Этот метод — [`Object.valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf)наследуется `person1`, потому что его конструктором является `Person()`, а прототипом `Person()` является `Object()`. `valueOf()` возвращает значение вызываемого объекта — попробуйте и убедитесь! В этом случае происходит следующее:
 
-<ul>
- <li>Сначала браузер проверяет, имеет ли объект <code>person1</code> доступный в нем метод <code>valueOf()</code>, как определено в его конструкторе <code>Person()</code>.</li>
- <li>Это не так, поэтому следующим шагом браузер проверяет, имеет ли прототип объекта (<code>Object()</code>) конструктора <code>Person()</code> доступный в нем метод  <code>valueOf()</code>. Так оно и есть, поэтому он вызывается, и все хорошо!</li>
-</ul>
+- Сначала браузер проверяет, имеет ли объект `person1` доступный в нем метод `valueOf()`, как определено в его конструкторе `Person()`.
+- Это не так, поэтому следующим шагом браузер проверяет, имеет ли прототип объекта (`Object()`) конструктора `Person()` доступный в нем метод `valueOf()`. Так оно и есть, поэтому он вызывается, и все хорошо!
 
-<div class="note">
-<p><strong>Примечание:</strong> Мы хотим повторить, что методы и свойства <strong>не</strong> копируются из одного объекта в другой в цепочке прототипов - к ним обращаются, поднимаясь по цепочке, как описано выше.</p>
-</div>
+> **Примечание:** Мы хотим повторить, что методы и свойства **не** копируются из одного объекта в другой в цепочке прототипов - к ним обращаются, поднимаясь по цепочке, как описано выше.
 
-<div class="note">
-<p><strong>Примечание</strong>: Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом <code>[[prototype]]</code> в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto">__proto__</a></code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto"> </a>(это 2 подчёркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте <code>person1.__proto__</code> и <code>person1.__proto__.__proto__</code>, чтобы увидеть, как выглядит цепочка в коде!</p>
+> **Примечание:** Официально нет способа получить доступ к объекту прототипа объекта напрямую - «ссылки» между элементами в цепочке определены во внутреннем свойстве, называемом `[[prototype]]` в спецификации для языка JavaScript ( см. {{glossary("ECMAScript")}}). Однако у большинства современных браузеров есть свойство, доступное для них под названием [`__proto__`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)[ ](/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)(это 2 подчёркивания с обеих сторон), который содержит объект-прототип объекта-конструктора. Например, попробуйте `person1.__proto__` и `person1.__proto__.__proto__`, чтобы увидеть, как выглядит цепочка в коде!
+>
+> С ECMAScript 2015 вы можете косвенно обращаться к объекту прототипа объекта `Object.getPrototypeOf (obj)`.
 
-<p>С ECMAScript 2015 вы можете косвенно обращаться к объекту прототипа объекта <code>Object.getPrototypeOf (obj)</code>.</p>
-</div>
+## Свойство prototype: Где определены унаследованные экземпляры
 
-<h2 id="Свойство_prototype_Где_определены_унаследованные_экземпляры">Свойство prototype: Где определены унаследованные экземпляры</h2>
+Итак, где определены наследуемые свойства и методы? Если вы посмотрите на страницу со ссылкой [`Object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object), вы увидите в левой части большое количество свойств и методов - это намного больше, чем количество унаследованных членов, доступных для объекта `person1`. Некоторые из них унаследованы, а некоторые нет - почему это?
 
-<p>Итак, где определены наследуемые свойства и методы? Если вы посмотрите на страницу со ссылкой <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a></code>, вы увидите в левой части большое количество свойств и методов - это намного больше, чем количество унаследованных членов, доступных для объекта <code>person1</code>. Некоторые из них унаследованы, а некоторые нет - почему это?</p>
+Как упоминалось выше, наследованные свойства это те, что определены в свойстве `prototype` (вы можете называть это подпространством имён), то есть те, которые начинаются с `Object.prototype.`, а не те, которые начинаются с простого `Object`. Значение свойства `prototype` - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.
 
-<p>Как упоминалось выше, наследованные свойства это те, что определены в свойстве <code>prototype</code> (вы можете называть это подпространством имён), то есть те, которые начинаются с <code>Object.prototype.</code>, а не те, которые начинаются с простого <code>Object</code>. Значение свойства <code>prototype</code> - это объект, который в основном представляет собой контейнер для хранения свойств и методов, которые мы хотим наследовать объектами, расположенными дальше по цепочке прототипов.</p>
+Таким образом [`Object.prototype.watch()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch), [`Object.prototype.valueOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf) и т. д. доступны для любых типов объектов, которые наследуются от `Object.prototype`, включая новые экземпляры объектов, созданные из конструктора `Person()` .
 
-<p>Таким образом <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch">Object.prototype.watch()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf">Object.prototype.valueOf()</a></code> и т. д. доступны для любых типов объектов, которые наследуются от <code>Object.prototype</code>, включая новые экземпляры объектов, созданные из конструктора <code>Person()</code> .</p>
+[`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is), [`Object.keys()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) и другие члены, не определённые в контейнере `prototype`, не наследуются экземплярами объектов или типами объектов, которые наследуются от `Object.prototype`. Это методы / свойства, доступные только в конструкторе `Object()`.
 
-<p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is">Object.is()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys">Object.keys()</a></code> и другие члены, не определённые в контейнере <code>prototype</code>, не наследуются экземплярами объектов или типами объектов, которые наследуются от <code>Object.prototype</code>. Это методы / свойства, доступные только в конструкторе <code>Object()</code>.</p>
+> **Примечание:** Это кажется странным - как у вас есть метод, определённый для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор [`Function()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function), если вы нам не верите.
 
-<div class="note">
-<p><strong>Примечание</strong>: Это кажется странным - как у вас есть метод, определённый для конструктора, который сам по себе является функцией? Ну, функция также является типом объекта - см. Ссылку на конструктор <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function()</a></code>, если вы нам не верите.</p>
-</div>
+1.  Вы можете проверить существующие свойства прототипа для себя - вернитесь к нашему предыдущему примеру и попробуйте ввести следующее в консоль JavaScript:
 
-<ol>
- <li>Вы можете проверить существующие свойства прототипа для себя - вернитесь к нашему предыдущему примеру и попробуйте ввести следующее в консоль JavaScript:
-  <pre class="brush: js">Person.prototype</pre>
- </li>
- <li>Результат покажет вам не много, ведь мы ничего не определили в прототипе нашего конструктора! По умолчанию <code>prototype</code> конструктора всегда пуст. Теперь попробуйте следующее:
-  <pre class="brush: js">Object.prototype</pre>
- </li>
-</ol>
+    ```js
+    Person.prototype
+    ```
 
-<p>Вы увидите большое количество методов, определённых для свойства <code>prototype</code> <code>Object</code>'а , которые затем доступны для объектов, которые наследуются от <code>Object</code>, как показано выше.</p>
+2.  Результат покажет вам не много, ведь мы ничего не определили в прототипе нашего конструктора! По умолчанию `prototype` конструктора всегда пуст. Теперь попробуйте следующее:
 
-<p>Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определённые на прототипе глобальных объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number">Number</a></code> и <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, например. Все они имеют несколько элементов, определённых на их прототипе, поэтому, например, когда вы создаёте строку, вот так:</p>
+    ```js
+    Object.prototype
+    ```
 
-<pre class="brush: js">var myString = 'This is my string.';</pre>
+Вы увидите большое количество методов, определённых для свойства `prototype` `Object`'а , которые затем доступны для объектов, которые наследуются от `Object`, как показано выше.
 
-<p>В <code>myString</code> сразу есть множество полезных методов, таких как <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split">split()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf">indexOf()</a></code>, <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace">replace()</a></code> и т. д.</p>
+Вы увидите другие примеры наследования цепочек прототипов по всему JavaScript - попробуйте найти методы и свойства, определённые на прототипе глобальных объектов [`String`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String), [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), [`Number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number) и [`Array`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array), например. Все они имеют несколько элементов, определённых на их прототипе, поэтому, например, когда вы создаёте строку, вот так:
 
-<div class="warning">
-<p><strong>Важно</strong>: Свойство <code>prototype</code> является одной из наиболее противоречивых названий частей JavaScript - вы можете подумать, что <code>this</code> указывает на объект прототипа текущего объекта, но это не так (это внутренний объект, к которому можно получить доступ <code>__proto__</code>, помните ?). <code>prototype</code> вместо этого - свойство, содержащее объект, на котором вы определяете членов, которые вы хотите наследовать.</p>
-</div>
+```js
+var myString = 'This is my string.';
+```
 
-<h2 id="Снова_create">Снова create()</h2>
+В `myString` сразу есть множество полезных методов, таких как [`split()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/split), [`indexOf()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf), [`replace()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace) и т. д.
 
-<p>Ранее мы показали, как метод <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create()</a></code> может использоваться для создания нового экземпляра объекта.</p>
+> **Предупреждение:** **Важно**: Свойство `prototype` является одной из наиболее противоречивых названий частей JavaScript - вы можете подумать, что `this` указывает на объект прототипа текущего объекта, но это не так (это внутренний объект, к которому можно получить доступ `__proto__`, помните ?). `prototype` вместо этого - свойство, содержащее объект, на котором вы определяете членов, которые вы хотите наследовать.
 
-<ol>
- <li>Например, попробуйте это в консоли JavaScript предыдущего примера:
-  <pre class="brush: js">var person2 = Object.create(person1);</pre>
- </li>
- <li>На самом деле <code>create()</code>создаёт новый объект из указанного объекта-прототипа. Здесь <code>person2</code> создаётся с помощью <code>person1</code> в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее:
-  <pre class="brush: js">person2.__proto__</pre>
- </li>
-</ol>
+## Снова create()
 
-<p>Это вернёт объект person1.</p>
+Ранее мы показали, как метод [`Object.create()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create) может использоваться для создания нового экземпляра объекта.
 
-<h2 id="Свойство_constructor">Свойство constructor</h2>
+1.  Например, попробуйте это в консоли JavaScript предыдущего примера:
 
-<p>Каждая функция-конструктор имеет свойство <code>prototype</code>, значением которого является объект, содержащий свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code>. Это свойство <code>constructor</code> указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определённые в свойстве <code>Person.prototype</code> (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор <code>Person()</code>. Следовательно, свойство конструктора также доступно для объектов <code>person1</code> и <code>person2</code>.</p>
+    ```js
+    var person2 = Object.create(person1);
+    ```
 
-<ol>
- <li>Например, попробуйте эти команды в консоли:
-  <pre class="brush: js">person1.constructor
-person2.constructor</pre>
+2.  На самом деле `create()`создаёт новый объект из указанного объекта-прототипа. Здесь `person2` создаётся с помощью `person1` в качестве объекта-прототипа. Это можно проверить, введя в консоли следующее:
 
-  <p>Они должны возвращать конструктор <code>Person()</code>, поскольку он содержит исходное определение этих экземпляров.</p>
+    ```js
+    person2.__proto__
+    ```
 
-  <p>Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства <code>constructor</code> (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому её можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово <code>new</code>, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.</p>
- </li>
- <li>Попробуйте это в консоли:
-  <pre class="brush: js">var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);</pre>
- </li>
- <li>Теперь попробуйте получить доступ к функциям вашего нового объекта, например:
-  <pre class="brush: js">person3.name.first
-person3.age
-person3.bio()</pre>
- </li>
-</ol>
+Это вернёт объект person1.
 
-<p>Это хорошо работает. Вам не нужно будет использовать его часто, но это может быть действительно полезно, если вы хотите создать новый экземпляр и не имеете ссылки на исходный конструктор, который легко доступен по какой-либо причине.</p>
+## Свойство constructor
 
-<p>Свойство <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a></code> имеет другие применения. Например, если у вас есть экземпляр объекта и вы хотите вернуть имя конструктора этого экземпляра, вы можете использовать следующее:</p>
+Каждая функция-конструктор имеет свойство `prototype`, значением которого является объект, содержащий свойство [`constructor`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor). Это свойство `constructor` указывает на исходную функцию-конструктор. Как вы увидите в следующем разделе, свойства, определённые в свойстве `Person.prototype` (или в общем случае в качестве свойства прототипа функции конструктора, который является объектом, как указано в предыдущем разделе) становятся доступными для всех объектов экземпляра, созданных с помощью конструктор `Person()`. Следовательно, свойство конструктора также доступно для объектов `person1` и `person2`.
 
-<pre class="brush: js">instanceName.constructor.name</pre>
+1.  Например, попробуйте эти команды в консоли:
 
-<p>Например, попробуйте это:</p>
+    ```js
+    person1.constructor
+    person2.constructor
+    ```
 
-<pre class="brush: js">person1.constructor.name
-</pre>
+    Они должны возвращать конструктор `Person()`, поскольку он содержит исходное определение этих экземпляров.
 
-<div class="note">
-<p><strong>Примечание</strong>: Значение <code>constructor.name</code> может измениться (из-за прототипического наследования, привязки, препроцессоров, транспилеров и т. д.), Поэтому для более сложных примеров вы захотите использовать оператор <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof">instanceof</a></code>.</p>
-</div>
+    Хитрый трюк заключается в том, что вы можете поместить круглые скобки в конец свойства `constructor` (содержащие любые требуемые параметры) для создания другого экземпляра объекта из этого конструктора. Конструктор - это функция в конце концов, поэтому её можно вызвать с помощью круглых скобок; вам просто нужно включить ключевое слово `new`, чтобы указать, что вы хотите использовать эту функцию в качестве конструктора.
 
-<ol>
-</ol>
+2.  Попробуйте это в консоли:
 
-<h2 id="Изменение_прототипов">Изменение прототипов</h2>
+    ```js
+    var person3 = new person1.constructor('Karen', 'Stephenson', 26, 'female', ['playing drums', 'mountain climbing']);
+    ```
 
-<p>Давайте рассмотрим пример изменения свойства <code>prototype</code> функции-конструктора — методы, добавленные в прототип, затем доступны для всех экземпляров объектов, созданных из конструктора.</p>
+3.  Теперь попробуйте получить доступ к функциям вашего нового объекта, например:
 
-<ol>
- <li>Вернитесь к нашему примеру <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">oojs-class-further-exercises.html</a> и создайте локальную копию <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">исходного кода</a>. Ниже существующего JavaScript добавьте следующий код, который добавляет новый метод в свойство <code>prototype</code> конструктора:
+    ```js
+    person3.name.first
+    person3.age
+    person3.bio()
+    ```
 
-  <pre class="brush: js">Person.prototype.farewell = function() {
-  alert(this.name.first + ' has left the building. Bye for now!');
-};</pre>
- </li>
- <li>Сохраните код и загрузите страницу в браузере и попробуйте ввести следующее в текстовый ввод:
-  <pre class="brush: js">person1.farewell();</pre>
- </li>
-</ol>
+Это хорошо работает. Вам не нужно будет использовать его часто, но это может быть действительно полезно, если вы хотите создать новый экземпляр и не имеете ссылки на исходный конструктор, который легко доступен по какой-либо причине.
+
+Свойство [`constructor`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor) имеет другие применения. Например, если у вас есть экземпляр объекта и вы хотите вернуть имя конструктора этого экземпляра, вы можете использовать следующее:
+
+```js
+instanceName.constructor.name
+```
+
+Например, попробуйте это:
+
+```js
+person1.constructor.name
+```
 
-<p>Должно появиться всплывающее окно, с именем пользователя, определённым в конструкторе. Это действительно полезно, но ещё более полезно то, что вся цепочка наследования обновляется динамически, автоматически делая этот новый метод доступным для всех экземпляров объектов, полученных из конструктора.</p>
+> **Примечание:** Значение `constructor.name` может измениться (из-за прототипического наследования, привязки, препроцессоров, транспилеров и т. д.), Поэтому для более сложных примеров вы захотите использовать оператор [`instanceof`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof).
 
-<p>Подумайте об этом на мгновение. В нашем коде мы определяем конструктор, затем мы создаём экземпляр объекта из конструктора, <em>затем</em> добавляем новый метод к прототипу конструктора:</p>
+## Изменение прототипов
 
-<pre class="brush: js">function Person(first, last, age, gender, interests) {
+Давайте рассмотрим пример изменения свойства `prototype` функции-конструктора — методы, добавленные в прототип, затем доступны для всех экземпляров объектов, созданных из конструктора.
+
+1.  Вернитесь к нашему примеру [oojs-class-further-exercises.html](http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html) и создайте локальную копию [исходного кода](https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html). Ниже существующего JavaScript добавьте следующий код, который добавляет новый метод в свойство `prototype` конструктора:
+
+    ```js
+    Person.prototype.farewell = function() {
+      alert(this.name.first + ' has left the building. Bye for now!');
+    };
+    ```
+
+2.  Сохраните код и загрузите страницу в браузере и попробуйте ввести следующее в текстовый ввод:
+
+    ```js
+    person1.farewell();
+    ```
+
+Должно появиться всплывающее окно, с именем пользователя, определённым в конструкторе. Это действительно полезно, но ещё более полезно то, что вся цепочка наследования обновляется динамически, автоматически делая этот новый метод доступным для всех экземпляров объектов, полученных из конструктора.
+
+Подумайте об этом на мгновение. В нашем коде мы определяем конструктор, затем мы создаём экземпляр объекта из конструктора, _затем_ добавляем новый метод к прототипу конструктора:
+
+```js
+function Person(first, last, age, gender, interests) {
 
   // определения свойств и методов
 
@@ -225,27 +215,31 @@ var person1 = new Person('Tammi', 'Smith', 32, 'neutral', ['music', 'skiing', 'k
 
 Person.prototype.farewell = function() {
   alert(this.name.first + ' has left the building. Bye for now!');
-};</pre>
+};
+```
 
-<p>Но метод <code>farewell()</code> <em>по-прежнему</em> доступен в экземпляре объекта <code>person1</code> - его элементы были автоматически обновлены, чтобы включить недавно определённый метод <code>farewell()</code>.</p>
+Но метод `farewell()` _по-прежнему_ доступен в экземпляре объекта `person1` - его элементы были автоматически обновлены, чтобы включить недавно определённый метод `farewell()`.
 
-<div class="note">
-<p><strong>Примечание:</strong> Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html">oojs-class-prototype.html</a> (см. также это <a href="http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html">running live</a>).</p>
-</div>
+> **Примечание:** Если у вас возникли проблемы с получением этого примера для работы, посмотрите на наш пример [oojs-class-prototype.html](https://github.com/mdn/learning-area/blob/master/javascript/oojs/advanced/oojs-class-prototype.html) (см. также это [running live](http://mdn.github.io/learning-area/javascript/oojs/advanced/oojs-class-prototype.html)).
 
-<p>Вы редко увидите свойства, определённые в свойстве <code>prototype</code>, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:</p>
+Вы редко увидите свойства, определённые в свойстве `prototype`, потому что они не очень гибки при таком определении. Например, вы можете добавить свойство следующим образом:
 
-<pre class="brush: js">Person.prototype.fullName = 'Bob Smith';</pre>
+```js
+Person.prototype.fullName = 'Bob Smith';
+```
 
-<p>Это не очень гибко, так как человека нельзя назвать так. Было бы намного лучше сделать это, создав <code>fullName</code> из <code>name.first</code> и <code>name.last</code>:</p>
+Это не очень гибко, так как человека нельзя назвать так. Было бы намного лучше сделать это, создав `fullName` из `name.first` и `name.last`:
 
-<pre class="brush: js">Person.prototype.fullName = this.name.first + ' ' + this.name.last;</pre>
+```js
+Person.prototype.fullName = this.name.first + ' ' + this.name.last;
+```
 
-<p>Однако это не работает, поскольку в этом случае <code>this</code> будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернёт <code>undefined undefined</code>. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.</p>
+Однако это не работает, поскольку в этом случае `this` будет ссылаться на глобальную область, а не на область функции. Вызов этого свойства вернёт `undefined undefined`. Это отлично работало с методом, который мы определили ранее в прототипе, потому что он находится внутри области функций, которая будет успешно перенесена в область экземпляра объекта. Таким образом, вы можете определить постоянные свойства прототипа (т. е. те, которые никогда не нуждаются в изменении), но обычно лучше определять свойства внутри конструктора.
 
-<p>Фактически, довольно распространённый шаблон для большего количества определений объектов - это определение свойств внутри конструктора и методов в прототипе. Это упрощает чтение кода, поскольку конструктор содержит только определения свойств, а методы разделены на отдельные блоки. Например:</p>
+Фактически, довольно распространённый шаблон для большего количества определений объектов - это определение свойств внутри конструктора и методов в прототипе. Это упрощает чтение кода, поскольку конструктор содержит только определения свойств, а методы разделены на отдельные блоки. Например:
 
-<pre class="brush: js">// Определение конструктора и его свойств
+```js
+// Определение конструктора и его свойств
 
 function Test(a, b, c, d) {
   // определение свойств...
@@ -259,28 +253,25 @@ Test.prototype.x = function() { ... };
 
 Test.prototype.y = function() { ... };
 
-//...и так далее</pre>
-
-<p>Этот образец можно увидеть в действии в примере <a href="https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js">приложения плана школы </a>Петра Залевы.</p>
-
-<h2 id="Резюме">Резюме</h2>
+//...и так далее
+```
 
-<p>В этой статье рассмотрены прототипы объектов JavaScript (в том числе и то, как прототип цепочки объектов позволяет объектам наследовать функции друг от друга), свойство прототипа и как его можно использовать для добавления методов к конструкторам и другие связанные с этой статьёй темы.</p>
+Этот образец можно увидеть в действии в примере [приложения плана школы ](https://github.com/zalun/school-plan-app/blob/master/stage9/js/index.js)Петра Залевы.
 
-<p>В следующей статье мы рассмотрим то, как вы можете реализовать наследование функциональности между двумя собственными настраиваемыми объектами.</p>
+## Резюме
 
-<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}</p>
+В этой статье рассмотрены прототипы объектов JavaScript (в том числе и то, как прототип цепочки объектов позволяет объектам наследовать функции друг от друга), свойство прототипа и как его можно использовать для добавления методов к конструкторам и другие связанные с этой статьёй темы.
 
+В следующей статье мы рассмотрим то, как вы можете реализовать наследование функциональности между двумя собственными настраиваемыми объектами.
 
+{{PreviousMenuNext("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects/Inheritance", "Learn/JavaScript/Objects")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Основы">Основы объекта</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object-oriented_JS">Объектно-ориентированный JavaScript для начинающих</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object_prototypes">Прототипы объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Inheritance">Наследование в JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/JSON">Работа с данными JSON</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Object_building_practice">Практика построения объектов</a></li>
- <li><a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript/Объекты/Adding_bouncing_balls_features">Добавление функций в нашу демонстрацию прыгающих шаров</a></li>
-</ul>
+- [Основы объекта](/ru/docs/Learn/JavaScript/Объекты/Основы)
+- [Объектно-ориентированный JavaScript для начинающих](/ru/docs/Learn/JavaScript/Объекты/Object-oriented_JS)
+- [Прототипы объектов](/ru/docs/Learn/JavaScript/Объекты/Object_prototypes)
+- [Наследование в JavaScript](/ru/docs/Learn/JavaScript/Объекты/Inheritance)
+- [Работа с данными JSON](/ru/docs/Learn/JavaScript/Объекты/JSON)
+- [Практика построения объектов](/ru/docs/Learn/JavaScript/Объекты/Object_building_practice)
+- [Добавление функций в нашу демонстрацию прыгающих шаров](/ru/docs/Learn/JavaScript/Объекты/Adding_bouncing_balls_features)
diff --git a/files/ru/learn/performance/business_case_for_performance/index.md b/files/ru/learn/performance/business_case_for_performance/index.md
index a12cda5fd2d5c0..c2eab625395250 100644
--- a/files/ru/learn/performance/business_case_for_performance/index.md
+++ b/files/ru/learn/performance/business_case_for_performance/index.md
@@ -3,72 +3,50 @@ title: Производительность веб-приложений в би
 slug: Learn/Performance/business_case_for_performance
 translation_of: Learn/Performance/business_case_for_performance
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}
 
-<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
+Мы обсудили важность производительности веб-приложений. Вы изучили, что вам нужно для того, чтобы её оптимизировать. Но как убедить ваших клиентов и/или менеджмент в том, что нужно инвестировать в производительность? В этом разделе мы обсудим создание такой аргументации, чтобы ответственные за принятие решений менеджеры согласились на инвестиции.
 
-<p></p>
+| Необходимо: | Базовое понимание компьютерной терминологии, знание [клиентской части веб-технологий](/ru/docs/Learn/Getting_started_with_the_web), понимание базовых принципов [оптимизации производительности](/ru/docs/Web/Performance). |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:     | Стать уверенным при объяснении клиентам и менеджменту важности оптимизации производительности.                                                                                                                              |
 
-<p>Мы обсудили важность производительности веб-приложений. Вы изучили, что вам нужно для того, чтобы её оптимизировать. Но как убедить ваших клиентов и/или менеджмент в том, что нужно инвестировать в производительность? В этом разделе мы обсудим создание такой аргументации, чтобы ответственные за принятие решений менеджеры согласились на инвестиции.</p>
+## Делайте производительность приоритетом
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимо:</th>
-   <td>Базовое понимание компьютерной терминологии, знание <a href="/en-US/docs/Learn/Getting_started_with_the_web">клиентской части веб-технологий</a>, понимание базовых принципов <a href="/en-US/docs/Web/Performance">оптимизации производительности</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>
-    <p>Стать уверенным при объяснении клиентам и менеджменту важности оптимизации производительности.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+Мы уже обсудили, как приоритизация производительности может улучшить пользовательский опыт и доход компании. Мы также знаем, что игнорирование проблем производительности может привести к потери доходности. Эта статья объясняет, какие конкретные бизнес-показатели напрямую связаны с производительностью веб-приложений и как применить сервисное проектирование для улучшения пользовательского опыта. В статье подчёркивается важность понимания, как сумма всех небольших улучшений влияет на конверсию и удержание клиентов.
 
-<h2 id="Делайте_производительность_приоритетом">Делайте производительность приоритетом</h2>
+### Бюджеты производительности
 
-<p>Мы уже обсудили, как приоритизация производительности может улучшить пользовательский опыт и доход компании. Мы также знаем, что игнорирование проблем производительности может привести к потери доходности. Эта статья объясняет, какие конкретные бизнес-показатели напрямую связаны с производительностью веб-приложений  и как применить сервисное проектирование для улучшения пользовательского опыта. В статье подчёркивается важность понимания, как сумма всех небольших улучшений влияет на конверсию и удержание клиентов.</p>
+Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничений, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определённому ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.
 
-<dl>
-</dl>
+Создание и продвижение бюджета помогает вам защищать интересы пользователя в борьбе с конкурирующими интересами: маркетингом, продажами или даже другими разработчиками, которые хотят добавить видео, сторонние скрипты или поиграться с новым фреймворком. Бюджеты помогают командам разработчиков защищать оптимальную производительность для пользователей, в то время как бизнес может заниматься расширением рынков.
 
-<h3 id="Бюджеты_производительности">Бюджеты производительности</h3>
+### Ключевые показатели
 
-<p>Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничений, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определённому ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.</p>
+Установка ключевых показателей (Key Performance Indicators, KPI) целями может привести к тому, что цели производительности также станут целями бизнеса. KPI может быть одновременно и набором важных бизнес-показателей, которые объясняют влияние производительности на цели бизнеса, так и способом демонстрации преимущества такого подхода. Вот несколько примеров KPI:
 
-<p>Создание и продвижение бюджета помогает вам защищать интересы пользователя в борьбе с конкурирующими интересами: маркетингом, продажами или даже другими разработчиками, которые хотят добавить видео, сторонние скрипты или поиграться с новым фреймворком. Бюджеты помогают командам разработчиков защищать оптимальную производительность для пользователей, в то время как бизнес может заниматься расширением рынков.</p>
+- **Уровень конверсии**
+  - : Процент от общего трафика, который выполняет какое-то конкретное действие, например, покупает товар или подписывается на новости. Когда приложение работает медленно, пользователи не могут завершить эти задачи. Это приводит к низкому показателю конверсии.
+- **Время на сайте**
+  - : Среднее время, которое пользователь проводит на вашем сайте. Когда производительность низкая, высока вероятность того, что пользователи закроют сайт прежде, чем он выдаст нужные результаты.
+- **Уровень лояльности клиентов**
+  - : Этот показатель также называется "The net promoter score (NPS)". Он позволяет понять, будет ли пользователь рекомендовать ваш сервис / бизнес своим знакомым.
 
-<h3 id="Ключевые_показатели"><strong>Ключевые показатели</strong></h3>
+Установка уровня конверсии, времени на сайте и/или уровня лояльности клиентов в виде KPI даёт другим департаментам наглядный пример того, зачем нужно тратить усилия на производительность.
 
-<p>Установка ключевых показателей (Key Performance Indicators, KPI) целями может привести к тому, что цели производительности также станут целями бизнеса. KPI может быть одновременно и набором важных бизнес-показателей, которые объясняют влияние производительности на цели бизнеса, так и способом демонстрации преимущества такого подхода. Вот несколько примеров KPI:</p>
+{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}
 
-<dl>
- <dt><strong>Уровень конверсии </strong></dt>
- <dd>Процент от общего трафика, который выполняет какое-то конкретное действие, например, покупает товар или подписывается на новости. Когда приложение работает медленно, пользователи не могут завершить эти задачи. Это приводит к низкому показателю конверсии.</dd>
- <dt><strong>Время на сайте</strong></dt>
- <dd>Среднее время, которое пользователь проводит на вашем сайте. Когда производительность низкая, высока вероятность того, что пользователи закроют сайт прежде, чем он выдаст нужные результаты.</dd>
- <dt><strong>Уровень лояльности клиентов</strong></dt>
- <dd>Этот показатель также называется "The net promoter score (NPS)". Он позволяет понять, будет ли пользователь рекомендовать ваш сервис / бизнес своим знакомым.</dd>
-</dl>
+## Смотрите также:
 
-<p>Установка уровня конверсии, времени на сайте и/или уровня лояльности клиентов в виде KPI даёт другим департаментам наглядный пример того, зачем нужно тратить усилия на производительность.</p>
-
-<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
-
-<h2 id="Смотрите_также">Смотрите также:</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li>
- <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li>
- <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li>
- <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li>
- <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
- <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
- <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
- <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
- <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li>
- <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
- <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
- <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li>
-</ul>
+- [The "why" of web performance](/ru/docs/Learn/Performance/why_web_performance)
+- [What is web performance?](/ru/docs/Learn/Performance/What_is_web_performance)
+- [How do users perceive performance?](/ru/docs/Learn/Performance/Perceived_performance)
+- [Measuring performance](/ru/docs/Learn/Performance/Measuring_performance)
+- [Multimedia: images](/ru/docs/Learn/Performance/Multimedia)
+- [Multimedia: video](/ru/docs/Learn/Performance/video)
+- [JavaScript performance best practices](/ru/docs/Learn/Performance/JavaScript).
+- [HTML performance features](/ru/docs/Learn/Performance/HTML)
+- [CSS performance features](/ru/docs/Learn/Performance/CSS)
+- [Fonts and performance](/ru/docs/Learn/Performance/Fonts)
+- [Mobile performance](/ru/docs/Learn/Performance/Mobile)
+- [Focusing on performance](/ru/docs/Learn/Performance/business_case_for_performance)
diff --git a/files/ru/learn/performance/index.md b/files/ru/learn/performance/index.md
index fdccc9533c1764..9b91ccd137e8e2 100644
--- a/files/ru/learn/performance/index.md
+++ b/files/ru/learn/performance/index.md
@@ -13,71 +13,66 @@ tags:
   - Web Performance
 translation_of: Learn/Performance
 ---
-<p>{{LearnSidebar}}</p>
-
-<p class="summary">Для разработки веб-сайтов необходимы HTML, CSS и JavaScript. Чтобы создавать веб-сайты и приложения, которые люди хотят использовать, которые привлекают и удерживают пользователей, вам нужно создать ?? хороший пользовательский опыт. Частью такого пользовательского опыта является обеспечение быстрой загрузки контента и отзывчивости на взаимодействие с пользователем. Это известно как веб-performance, и в этом разделе вы сосредоточитесь на основах создания эффективных веб-сайтов.</p>
-
-<p class="summary">В оставшихся частях учебного материала для новичков мы старались максимально придерживаться лучших практик Интернета, таких как производительность и <a href="/ru/docs/Learn/Accessibility">доступность</a>, однако было бы хорошо сосредоточиться и на таких темах. Убедиться, что вы знакомы с ними.</p>
-
-<h2 id="Путь_Обучения">Путь Обучения</h2>
-
-<p>Хотя знание HTML, CSS и JavaScript необходимо для реализации многих рекомендаций по повышению производительности сети, знание того, как создавать приложения, не является необходимым предварительным условием для понимания и измерения perfomance сети. Однако мы рекомендуем, чтобы перед тем, как вы приступили к работе с этим модулем, вы получили хотя бы общее представление о веб-разработке, проработав наше <a href="/en-US/docs/Learn/Getting_started_with_the_web">Начало работы с сетью </a>модулем.</p>
-
-<p>Также было бы полезно углубиться в эти темы с помощью таких модулей, как:</p>
-
-<ul>
- <li><a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a></li>
- <li><a href="/ru/docs/Learn/CSS/First_steps">CSS первые шаги</a></li>
- <li><a href="/ru/docs/Learn/JavaScript/First_steps">JavaScript первые шаги</a></li>
-</ul>
-
-<p>После того, как вы проработаете этот модуль, вы, вероятно, захотите глубже изучить веб-производительность - вы можете найти много дополнительных учений в нашем <a href="/ru/docs/Web/Performance">разделе веб-производительности</a>, включая обзоры API performance, инструментов тестирования и анализа, а также ошибки, связанные с узкими местами performance. </p>
-
-<h2 id="Guides">Справочники</h2>
-
-<p>This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Performance/why_web_performance">Важность веб-производительности</a></dt>
- <dd>В этой статье обсуждается важность производительности для доступности, пользователей и ваших бизнес-целей</dd>
- <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
- <dd>You know web performance is important, but what is constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance,</dd>
- <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
- <dd>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</dd>
-</dl>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></dt>
- <dd>Now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and APIs and how we can make performance part of the web development workflow.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></dt>
- <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. In this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.</dd>
- <dt></dt>
- <dt><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></dt>
- <dd>The lowest hanging fruit of web performance is often media optimization. In this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
- <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></dt>
- <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
- <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></dt>
- <dd>A look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance. </dd>
-</dl>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
- <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
- <dt><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></dt>
- <dd>There are many different things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing managements, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.</dd>
-</dl>
-
-<h2 id="See_also">Смотрите также</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">Web performance resources</a></dt>
- <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
- <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></dt>
- <dd>In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across difference devices. Responsive images are just one part of <a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">responsive design</a>, a future CSS topic for you to learn.</dd>
- <dt><a href="/en-US/docs/Web/Performance">Main web performance section on MDN</a></dt>
- <dd>Our main web performance section — here you'll find much more detail on web performance including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.</dd>
-</dl>
+{{LearnSidebar}}
+
+Для разработки веб-сайтов необходимы HTML, CSS и JavaScript. Чтобы создавать веб-сайты и приложения, которые люди хотят использовать, которые привлекают и удерживают пользователей, вам нужно создать ?? хороший пользовательский опыт. Частью такого пользовательского опыта является обеспечение быстрой загрузки контента и отзывчивости на взаимодействие с пользователем. Это известно как веб-performance, и в этом разделе вы сосредоточитесь на основах создания эффективных веб-сайтов.
+
+В оставшихся частях учебного материала для новичков мы старались максимально придерживаться лучших практик Интернета, таких как производительность и [доступность](/ru/docs/Learn/Accessibility), однако было бы хорошо сосредоточиться и на таких темах. Убедиться, что вы знакомы с ними.
+
+## Путь Обучения
+
+Хотя знание HTML, CSS и JavaScript необходимо для реализации многих рекомендаций по повышению производительности сети, знание того, как создавать приложения, не является необходимым предварительным условием для понимания и измерения perfomance сети. Однако мы рекомендуем, чтобы перед тем, как вы приступили к работе с этим модулем, вы получили хотя бы общее представление о веб-разработке, проработав наше [Начало работы с сетью ](/ru/docs/Learn/Getting_started_with_the_web)модулем.
+
+Также было бы полезно углубиться в эти темы с помощью таких модулей, как:
+
+- [Введение в HTML](/ru/docs/Learn/HTML/Introduction_to_HTML)
+- [CSS первые шаги](/ru/docs/Learn/CSS/First_steps)
+- [JavaScript первые шаги](/ru/docs/Learn/JavaScript/First_steps)
+
+После того, как вы проработаете этот модуль, вы, вероятно, захотите глубже изучить веб-производительность - вы можете найти много дополнительных учений в нашем [разделе веб-производительности](/ru/docs/Web/Performance), включая обзоры API performance, инструментов тестирования и анализа, а также ошибки, связанные с узкими местами performance.
+
+## Справочники
+
+This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.
+
+- [Важность веб-производительности](/ru/docs/Learn/Performance/why_web_performance)
+  - : В этой статье обсуждается важность производительности для доступности, пользователей и ваших бизнес-целей
+- [What is web performance?](/ru/docs/Learn/Performance/What_is_web_performance)
+  - : You know web performance is important, but what is constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance,
+- [How do users perceive performance?](/ru/docs/Learn/Performance/Perceived_performance)
+  - : More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.
+
+<!---->
+
+- [Measuring performance](/ru/docs/Learn/Performance/Measuring_performance)
+  - : Now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and APIs and how we can make performance part of the web development workflow.
+- [Multimedia: images](/ru/docs/Learn/Performance/Multimedia)
+  - : The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. In this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.
+- [Multimedia: video](/ru/docs/Learn/Performance/video)
+
+  - : The lowest hanging fruit of web performance is often media optimization. In this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance.
+
+- [JavaScript performance best practices](/ru/docs/Learn/Performance/JavaScript)
+  - : JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.
+- [HTML performance features](/ru/docs/Learn/Performance/HTML)
+  - : Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.
+- [CSS performance features](/ru/docs/Learn/Performance/CSS)
+  - : CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.
+- [Fonts and performance](/ru/docs/Learn/Performance/Fonts)
+  - : A look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance.
+
+<!---->
+
+- [Mobile performance](/ru/docs/Learn/Performance/Mobile)
+  - : With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.
+- [Focusing on performance](/ru/docs/Learn/Performance/business_case_for_performance)
+  - : There are many different things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing managements, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.
+
+## Смотрите также
+
+- [Web performance resources](/ru/docs/Learn/Performance/Web_Performance_Basics)
+  - : In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.
+- [Responsive images](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)
+  - : In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across difference devices. Responsive images are just one part of [responsive design](/ru/docs/Learn/CSS/CSS_layout/Responsive_Design), a future CSS topic for you to learn.
+- [Main web performance section on MDN](/ru/docs/Web/Performance)
+  - : Our main web performance section — here you'll find much more detail on web performance including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.
diff --git a/files/ru/learn/server-side/apache_configuration_htaccess/index.md b/files/ru/learn/server-side/apache_configuration_htaccess/index.md
index 07d36bd717fd14..23c706b57558fd 100644
--- a/files/ru/learn/server-side/apache_configuration_htaccess/index.md
+++ b/files/ru/learn/server-side/apache_configuration_htaccess/index.md
@@ -3,36 +3,41 @@ title: .htaccess ( hypertext access )
 slug: Learn/Server-side/Apache_Configuration_htaccess
 translation_of: Learn/Server-side/Apache_Configuration_htaccess
 ---
-<p>Название .htaccess происходит от "hypertext access". Это файл с расширением HTACCESS, который содержит различные настройки сервера apache. Он позволяет настраивать для текущей директории защиту паролем, редиректы и многое другое.</p>
+Название .htaccess происходит от "hypertext access". Это файл с расширением HTACCESS, который содержит различные настройки сервера apache. Он позволяет настраивать для текущей директории защиту паролем, редиректы и многое другое.
 
-<p><strong>Доступ к файлу</strong>: файл htaccess  может быть открыт для редактирования любым текстовым редактором, таким как стандартный блокнот Windows, Vim, Sublime Text или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.</p>
+**Доступ к файлу**: файл htaccess может быть открыт для редактирования любым текстовым редактором, таким как стандартный блокнот Windows, Vim, Sublime Text или любым другим. Подсветка синтаксиса для файлов .htaccess встречается редко.
 
-<h2 id="Применение">Применение</h2>
+## Применение
 
-<p><strong>Перенаправления</strong>: htaccess файлы часто используют для перенаправления трафика между веб-страницами, а также между разными доменами. Это простой и эффективный способ перенаправления трафика, так как перенаправление происходит до обработки запроса на стороне сервера. Перенаправление может быть временным и постоянным, с установкой соответствующего кода статуса.</p>
+**Перенаправления**: htaccess файлы часто используют для перенаправления трафика между веб-страницами, а также между разными доменами. Это простой и эффективный способ перенаправления трафика, так как перенаправление происходит до обработки запроса на стороне сервера. Перенаправление может быть временным и постоянным, с установкой соответствующего кода статуса.
 
-<pre>Redirect 301 / http://example.com/       # Постоянное перенаправление на example.com
+```
+Redirect 301 / http://example.com/       # Постоянное перенаправление на example.com
 Redirect 302 / http://example.com/       # Временное перенаправление на example.com
-</pre>
+```
 
-<p><strong>Блокирование</strong>: htaccess также может блокировать доступ с определённого IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.</p>
+**Блокирование**: htaccess также может блокировать доступ с определённого IP адреса или диапазона IP адресов. Блокирование часто используется, чтобы запретить доступ к директории для различных ботов и поисковых пауков.
 
-<pre>deny from 146.0.74.205                   # Блокирует все запросы с адреса 146.0.74.205</pre>
+```
+deny from 146.0.74.205                   # Блокирует все запросы с адреса 146.0.74.205
+```
 
-<p><strong>SSI или Server Side Include</strong> : С помощью файла .htaccess можно настроить автоматическое подключение файлов в документ. При каждом запросе пользователя, указанные файлы автоматически будут подключены в начало или в конец документа. При этом в самом документе их подключать не нужно.</p>
+**SSI или Server Side Include** : С помощью файла .htaccess можно настроить автоматическое подключение файлов в документ. При каждом запросе пользователя, указанные файлы автоматически будут подключены в начало или в конец документа. При этом в самом документе их подключать не нужно.
 
-<pre>php_value auto_prepend_file "/real/path/to/file/functions.php" # Подключит файл function.php в начало документа
+```
+php_value auto_prepend_file "/real/path/to/file/functions.php" # Подключит файл function.php в начало документа
 php_value auto_append_file "/real/path/to/file/footer.php" # Подключит файл footer.html в конец документа
-</pre>
+```
 
-<p><strong>Настройка страниц с ошибками:</strong> с помощью .htaccess можно перенаправлять пользователя на определённые страницы, при возникновении ошибок на сервере.</p>
+**Настройка страниц с ошибками:** с помощью .htaccess можно перенаправлять пользователя на определённые страницы, при возникновении ошибок на сервере.
 
-<pre>ErrorDocument 404 /notfound.html # Перенаправит пользователя на страницу notfound.html , при возникновении ошибки с кодом 404
+```
+ErrorDocument 404 /notfound.html # Перенаправит пользователя на страницу notfound.html , при возникновении ошибки с кодом 404
 ErrorDocument 500 /serverr.html  # Перенаправит пользователя на страницу serverr.html , при возникновении ошибки с кодом 500
-</pre>
+```
 
-<p>Для дополнительной информации читайте статью <a href="http://techstream.org/Web-Development/HTACCESS/Error-Documents">Redirect your Traffic for Error Handling</a>.</p>
+Для дополнительной информации читайте статью [Redirect your Traffic for Error Handling](http://techstream.org/Web-Development/HTACCESS/Error-Documents).
 
-<p><strong>Кеширование: </strong>файл .htaccess может управлять кешированием данных веб-браузером пользователя. Это ускорит загрузку страниц и сократит количество передаваемой информации между сервером и клиентом.</p>
+**Кеширование:** файл .htaccess может управлять кешированием данных веб-браузером пользователя. Это ускорит загрузку страниц и сократит количество передаваемой информации между сервером и клиентом.
 
-<p><strong>MIME типы</strong>: смотрите статью <a href="/en-US/docs/Properly_Configuring_Server_MIME_Types" title="Properly_Configuring_Server_MIME_Types">correct MIME types</a> для большей информации.</p>
+**MIME типы**: смотрите статью [correct MIME types](/ru/docs/Properly_Configuring_Server_MIME_Types "Properly_Configuring_Server_MIME_Types") для большей информации.
diff --git a/files/ru/learn/server-side/django/admin_site/index.md b/files/ru/learn/server-side/django/admin_site/index.md
index 89c6aa94dd2bba..4e5b5229af5eb0 100644
--- a/files/ru/learn/server-side/django/admin_site/index.md
+++ b/files/ru/learn/server-side/django/admin_site/index.md
@@ -3,168 +3,155 @@ title: 'Руководство Django часть 4: административн
 slug: Learn/Server-side/Django/Admin_site
 translation_of: Learn/Server-side/Django/Admin_site
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</div>
+Теперь, когда модели для сайта [местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) созданы, добавим некоторые "настоящие" данные о книгах, используя административную панель Django Admin. Для начала мы покажем, как зарегистрировать в ней модели, потом как войти и создать какие-нибудь данные. В конце статьи мы покажем некоторые способы дальнейшего улучшения вида админ-панели.
 
-<p class="summary">Теперь, когда модели для сайта <a href="https://developer.mozilla.org/ru-RU/docs/Learn/Server-side/Django/Tutorial_local_library_website">местной библиотеки</a> созданы, добавим некоторые "настоящие" данные о книгах, используя административную панель Django Admin. Для начала мы покажем, как зарегистрировать в ней модели, потом как войти и создать какие-нибудь данные. В конце статьи мы покажем некоторые способы дальнейшего улучшения вида админ-панели.</p>
+| Предусловия: | Сначала завершите: [Руководство часть 3: ](/ru/docs/Learn/Server-side/Django/Models)использование моделей.                |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------- |
+| Цель:        | Уяснить преимущества и ограничения админ-панели Django, научиться использовать её для создания записей для наших моделей. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предусловия:</th>
-   <td>Сначала завершите: <a href="/ru-RU/docs/Learn/Server-side/Django/Models">Руководство часть 3: </a>использование моделей.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>
-    <p>Уяснить преимущества и ограничения админ-панели Django, научиться использовать её для создания записей для наших моделей.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+_Приложение_ Django admin может использовать ваши модели для автоматического создания части сайта, предназначенной для создания, просмотра, обновления и удаления записей. Это может сэкономить вам много времени в процессе разработки, упрощая тестирование ваших моделей на предмет _правильности_ данных. Оно также может быть полезным для управления данными на стадии публикации, в зависимости от типа веб-сайта. Проект Django рекомендует это приложение только для управления внутренними данными (т.е.для использования администраторами, либо людьми внутри вашей организации), так как модельно-ориентированный подход не обязательно является наилучшим интерфейсом для всех пользователей и раскрывает много лишних подробностей о моделях.
 
-<p><em>Приложение</em> Django admin может использовать ваши модели для автоматического создания части сайта, предназначенной для создания, просмотра, обновления и удаления записей. Это может сэкономить вам много времени в процессе разработки, упрощая тестирование ваших моделей на предмет <em>правильности</em> данных. Оно также может быть полезным для управления данными на стадии публикации, в зависимости от типа веб-сайта. Проект Django рекомендует это приложение только для управления внутренними данными (т.е.для использования администраторами, либо людьми внутри вашей организации), так как модельно-ориентированный подход не обязательно является наилучшим интерфейсом для всех пользователей и раскрывает много лишних подробностей о моделях.</p>
+Все необходимые настройки, которые необходимо включить в admin приложение вашего веб-сайта, были сделаны автоматически, когда вы [создали каркас проекта](/ru/docs/Learn/Server-side/Django/skeleton_website) ( информацию о необходимых актуальных зависимостях смотрите здесь - [Django docs](https://docs.djangoproject.com/en/1.10/ref/contrib/admin/)) . В результате все, что необходимо сделать для того, чтобы добавить модели в приложение admin, это _зарегистрировать_ их. В конце этой статьи мы представим краткую демонстрацию того, каким образом можно дополнительно настроить админ-панель для лучшего отображения данные наших моделей.
 
-<p>Все необходимые настройки, которые необходимо включить  в admin приложение вашего веб-сайта, были сделаны автоматически, когда вы <a href="/ru-RU/docs/Learn/Server-side/Django/skeleton_website">создали каркас проекта</a> ( информацию о необходимых актуальных зависимостях смотрите здесь -  <a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">Django docs</a>) . В результате все, что необходимо сделать для того, чтобы добавить модели в приложение admin, это <em>зарегистрировать</em> их. В конце этой статьи мы представим краткую демонстрацию того, каким образом  можно дополнительно настроить админ-панель для лучшего отображения данные наших моделей.</p>
+После регистрации моделей мы покажем как создать нового суперпользователя , войти на сайт от его имени и создать книги, авторов, экземпляры книг и жанры. Это будет полезным для тестирования представлений и шаблонов, которые мы начнём создавать в следующей части руководства.
 
-<p>После регистрации моделей мы покажем как создать нового суперпользователя , войти на сайт от его имени и создать книги, авторов, экземпляры книг и жанры. Это будет полезным для тестирования представлений и шаблонов, которые мы начнём создавать в следующей части руководства.</p>
+## Регистрация моделей
 
-<h2 id="Регистрация_моделей">Регистрация моделей </h2>
+Вначале откройте файл **admin.py** в папке приложения (**/locallibrary/catalog/admin.py**). Пока он выглядит так (заметьте, что он уже содержит импорт `django.contrib.admin)`:
 
-<p>Вначале откройте файл <strong>admin.py </strong>в папке приложения (<strong>/locallibrary/catalog/admin.py</strong>). Пока он выглядит так (заметьте, что он уже содержит импорт  <code>django.contrib.admin)</code>:</p>
-
-<pre class="brush: python">from django.contrib import admin
+```python
+from django.contrib import admin
 
 # Register your models here.
-</pre>
+```
 
-<p>Зарегистрируйте модели путём вставки следующего текста в нижнюю часть этого файла. Этот код просто импортирует модели и затем вызывает  <code>admin.site.register</code> для регистрации каждой из них.</p>
+Зарегистрируйте модели путём вставки следующего текста в нижнюю часть этого файла. Этот код просто импортирует модели и затем вызывает `admin.site.register` для регистрации каждой из них.
 
-<pre class="brush: python">from .models import Author, Genre, Book, BookInstance
+```python
+from .models import Author, Genre, Book, BookInstance
 
 admin.site.register(Book)
 admin.site.register(Author)
 admin.site.register(Genre)
 admin.site.register(BookInstance)
-</pre>
+```
+
+> **Примечание:** Если вы приняли участие в создании модели для представления естественного языка книги ([см. обучающую статью о моделях](/ru/docs/Learn/Server-side/Django/Models)), импортируйте и зарегистрируйте её тоже!
+
+Это самый простой способ регистрации модели или моделей. Админ-панель имеет множество настроек. Мы рассмотрим другие способы регистрации ваших моделей ниже.
 
-<div class="note"><strong>Примечание</strong>: Если вы приняли участие в создании модели для представления естественного языка книги (<a href="/ru-RU/docs/Learn/Server-side/Django/Models">см. обучающую статью о моделях</a>), импортируйте и зарегистрируйте её тоже!</div>
+## Создание суперпользователя
 
-<p>Это самый простой способ регистрации модели или моделей. Админ-панель имеет множество настроек. Мы рассмотрим другие способы регистрации ваших моделей ниже.</p>
+Для того, чтобы войти в админ-панель, нам необходимо иметь учётную запись пользователя со статусом _Staff (сотрудники)._ Для просмотра и создания записей, пользователю также понадобится разрешение для управления всеми нашими объектами. Вы можете создать учётную запись "superuser", которая даёт полный доступ к сайту и все необходимые разрешения, используя **manage.py**.
 
-<h2 id="Создание_суперпользователя">Создание суперпользователя</h2>
+Для создания суперпользователя вызовите следующую команду из той же папки, где расположен **manage.py**. Вас попросят ввести имя пользователя, адрес электронной почты и надёжный пароль.
 
-<p>Для того, чтобы войти в админ-панель, нам необходимо иметь учётную запись пользователя со статусом <em>Staff (сотрудники). </em>Для просмотра и создания записей, пользователю также понадобится разрешение для управления всеми нашими объектами. Вы можете создать учётную запись  "superuser", которая даёт полный доступ к сайту и все необходимые разрешения, используя <strong>manage.py</strong>.</p>
+```bash
+python3 manage.py createsuperuser
+```
 
-<p>Для создания суперпользователя вызовите следующую команду из той же папки, где расположен <strong>manage.py</strong>. Вас попросят ввести имя пользователя, адрес электронной почты и надёжный пароль. </p>
+После выполнения этой команды новый суперпользователь будет добавлен в базу данных. Теперь перезапустите сервер, чтобы можно было протестировать вход на сайт:
 
-<pre class="brush: bash">python3 manage.py createsuperuser
-</pre>
+```bash
+python3 manage.py runserver
+```
 
-<p>После выполнения этой команды новый суперпользователь будет добавлен в базу данных. Теперь перезапустите сервер, чтобы можно было протестировать вход на сайт:</p>
+## Вход в админ-панель и её использование
 
-<pre class="brush: bash">python3 manage.py runserver
+Для входа в админ-панель откройте ссылку _/admin_ (например [http://127.0.0.1:8000/admin](http://127.0.0.1:8000/admin/)) и введите логин и пароль вашего нового суперпользователя (вас перенаправят на login-страницу и потом обратно на /admin после ввода всех деталей).
 
-</pre>
+В этой части сайта отображаются все наши модели, сгруппированные по установленному приложению. Вы можете кликнуть на названии модели, чтобы получить список всех связанных записей, далее можете кликнуть на этих записях, для их редактирования . Также можно непосредственно кликнуть на ссылку **Add**, расположенную рядом с каждой моделью, чтобы начать создание записи этого типа.
 
-<h2 id="Вход_в_админ-панель_и_её_использование">Вход в админ-панель и её использование</h2>
+![Admin Site - Home page](https://mdn.mozillademos.org/files/13975/admin_home.png)
 
-<p>Для входа в админ-панель откройте ссылку<em> /admin</em> (например  <a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin</a>) и введите логин и пароль вашего нового суперпользователя  (вас перенаправят на login-страницу и потом обратно на /admin после ввода всех деталей).</p>
+Кликните на ссылке **Add** справа от _Books_, чтобы создать новую книгу (появится диалоговое окно как на картинке внизу). Заметьте, что заголовок каждого поля - это тип используемого виджета, и `help_text` (если есть) совпадает со значением, которое вы указали в модели.
 
-<p>В этой части сайта отображаются все наши модели, сгруппированные по установленному приложению. Вы можете кликнуть на названии модели, чтобы получить список всех связанных записей, далее можете кликнуть на этих записях, для их редактирования . Также можно непосредственно кликнуть на ссылку <strong>Add</strong>, расположенную рядом с каждой моделью, чтобы начать создание записи этого типа. </p>
+Введите значение для полей. Вы можете создавать новых авторов или жанры, нажимая на значок "+ ", расположенный рядом с соответствующим полем (или выберите существующее значение из списков, если вы уже создали их). Когда вы закончили, нажмите на **SAVE,** **Save and add another**, или **Save and continue editing,** чтобы сохранить записи.
 
-<p><img alt="Admin Site - Home page" src="https://mdn.mozillademos.org/files/13975/admin_home.png" style="display: block; height: 634px; margin: 0px auto; width: 998px;"></p>
+![Admin Site - Book Add](https://mdn.mozillademos.org/files/13979/admin_book_add.png)
 
-<p>Кликните на ссылке <strong>Add</strong> справа от <em>Books</em>, чтобы создать новую книгу (появится диалоговое окно как на картинке внизу). Заметьте, что заголовок каждого поля - это тип используемого виджета, и    <code>help_text</code> (если есть) совпадает со значением, которое вы указали в модели. </p>
+> **Примечание:** А сейчас, хотелось бы, чтобы вы добавили несколько книг, авторов и жанров (например, Фэнтези) в ваше приложение. Удостоверьтесь, что каждый автор и жанр включает пару различных книг (позже, когда мы реализуем представления "list" и "detail", это сделает их более интересными).
 
-<p>Введите значение для полей. Вы можете создавать новых авторов или жанры, нажимая на значок "+ ", расположенный рядом с соответствующим полем (или выберите существующее значение из списков, если вы уже создали их). Когда вы закончили, нажмите на <strong>SAVE,</strong>  <strong>Save and add another</strong>, или <strong>Save and continue editing,</strong> чтобы сохранить записи.</p>
+После того, когда книги добавлены, для перехода на главную страницу админ-панели кликните на ссылке **Home** в верхней части страницы. Потом кликните на ссылке **Books** для отображения текущего списка книг (или на одной из других ссылок, чтобы увидеть список соответствующей модели). После добавления нескольких книг список может выглядеть наподобие скриншота ниже. Отображается название каждой из книг. Его возвращает метод `__str__() `в модели Book, созданной в предыдущей статье.
 
-<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+![Admin Site - List of book objects](https://mdn.mozillademos.org/files/13935/admin_book_list.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: А сейчас, хотелось бы, чтобы вы добавили несколько книг, авторов и жанров (например,  Фэнтези) в ваше приложение. Удостоверьтесь, что каждый автор и жанр включает пару различных книг (позже, когда мы реализуем представления "list" и "detail", это сделает их более интересными).</p>
-</div>
+Для удаления книги из этого списка выберите чекбокс рядом с ней и действие _delete..._ из выпадающего списка _Action_, а затем нажмите кнопку **Go**. Также можно добавить новую книгу, нажав на кнопку **ADD BOOK**.
 
-<p>После того, когда книги добавлены, для перехода на главную страницу админ-панели кликните на ссылке <strong>Home </strong>в верхней части страницы. Потом кликните на ссылке <strong>Books</strong> для отображения текущего списка книг (или на одной из других ссылок, чтобы увидеть список соответствующей модели). После добавления нескольких книг список может выглядеть наподобие скриншота ниже.  Отображается название каждой из книг. Его возвращает метод <code>__str__() </code>в модели Book, созданной в предыдущей статье.</p>
+Вы можете редактировать книгу, кликнув по ссылке с её названием. Страница редактирования книги, приведённая ниже, практически идентична странице добавления новой книги. Основные отличия - это заголовок страницы (_Change book_) и наличие кнопок **Delete**, **HISTORY** и **VIEW ON SITE.** Последняя присутствует, так как мы определили метод `get_absolute_url() `в нашей модели.
 
-<p><img alt="Admin Site - List of book objects" src="https://mdn.mozillademos.org/files/13935/admin_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 407px; margin: 0px auto; width: 1000px;"></p>
+![Admin Site - Book Edit](https://mdn.mozillademos.org/files/13977/admin_book_modify.png)
 
-<p>Для удаления книги из этого списка выберите чекбокс рядом с ней и действие <em>delete...</em>  из выпадающего списка <em>Action</em>, а затем нажмите кнопку <strong>Go</strong>. Также можно добавить новую книгу, нажав на кнопку <strong>ADD BOOK</strong>. </p>
+Теперь перейдите назад на страницу **Home** (используя ссылку _Home_ в навигационной цепочке вверху страницы) и просмотрите списки **Author** и **Genre**. В них уже должно быть несколько элементов, созданных при добавлении новых книг. Если хотите, добавьте ещё.
 
-<p>Вы можете редактировать книгу, кликнув по ссылке с её названием. Страница редактирования книги, приведённая ниже, практически идентична странице добавления новой книги. Основные отличия - это заголовок страницы (<em>Change book</em>) и наличие кнопок <strong>Delete</strong>, <strong>HISTORY</strong> и <strong>VIEW ON SITE.  </strong>Последняя присутствует, так как мы определили метод <code>get_absolute_url() </code>в нашей модели.</p>
+Однако у вас не будет ни одного экземпляра книги, потому что они не создаются из модели `Book `(хотя можно создать книгу из модели `BookInstance` — такова природа поля `ForeignKey`). Для отображения страницы _Add book instance_ (см. рисунок ниже)\_ _вернитесь на страницу \_Home_ и нажмите кнопку **Add**. Обратите внимание на длинный уникальный Id для идентификации конкретного экземпляра книги в библиотеке.
 
-<p><img alt="Admin Site - Book Edit" src="https://mdn.mozillademos.org/files/13977/admin_book_modify.png" style="border-style: solid; border-width: 1px; display: block; height: 780px; margin: 0px auto; width: 841px;"></p>
+![Admin Site - BookInstance Add](https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png)
 
-<p>Теперь перейдите назад на страницу <strong>Home </strong>(используя ссылку <em>Home</em> в навигационной цепочке вверху страницы) и просмотрите списки <strong>Author</strong> и <strong>Genre</strong>. В них уже должно быть несколько элементов, созданных при добавлении новых книг. Если хотите, добавьте ещё.</p>
+Создайте несколько экземпляров для каждой из ваших книг. Установите статус _Available (доступен)_ для некоторых экземпляров и _On loan (выдан)_ для остальных. Если статус экземпляра **not** _Available (недоступен)_, то также установите дату возврата (_Due back)_.
 
-<p>Однако у вас не будет ни одного экземпляра книги, потому что они не создаются из модели <code>Book </code>(хотя можно создать книгу из модели <code>BookInstance</code> — такова природа поля <code>ForeignKey</code>). Для отображения страницы <em>Add book instance </em>(см. рисунок ниже)<em> </em>вернитесь на страницу <em>Home</em>  и нажмите кнопку <strong>Add</strong>. Обратите внимание на длинный уникальный Id для идентификации конкретного экземпляра книги в библиотеке.</p>
+Вот и все! Вы изучили как запустить и использовать админ-панель. Также были созданы записи для `Book`, `BookInstance`, `Genre` и `Author`, которые можно будет использовать после создания наших собственных представлений и шаблонов.
 
-<p><img alt="Admin Site - BookInstance Add" src="https://mdn.mozillademos.org/files/13981/admin_bookinstance_add.png" style="border-style: solid; border-width: 1px; display: block; height: 514px; margin: 0px auto; width: 863px;"></p>
+## "Продвинутая" конфигурация
 
-<p>Создайте несколько экземпляров для каждой из ваших книг. Установите статус <em>Available (доступен) </em>для некоторых экземпляров и <em>On loan (выдан)</em> для остальных. Если статус экземпляра <strong>not</strong> <em>Available (недоступен)</em>, то также установите дату возврата (<em>Due back)</em>.</p>
+Django выполняет неплохую работу по созданию базовой админ-панели используя информацию из зарегистрированных моделей:
 
-<p>Вот и все! Вы изучили как запустить и использовать админ-панель. Также были созданы записи для <code>Book</code>, <code>BookInstance</code>, <code>Genre</code> и <code>Author</code>, которые можно будет использовать после создания наших собственных представлений и шаблонов.</p>
+- каждая модель имеет список записей, каждая из которых идентифицируется строкой, создаваемой методом `__str__()` модели, и связана с представлением для её редактирования. По умолчанию, в верхней части этого представления находится меню действий, которое может быть использовано для удаления нескольких записей за раз
+- Формы для редактирования и добавления записей содержат все поля модели, которые расположены вертикально в порядке их объявления в модели.
 
-<h2 id="Продвинутая_конфигурация">"Продвинутая" конфигурация</h2>
+Можно настроить интерфейс пользователя для упрощения его использования. Некоторые доступные настройки:
 
-<p>Django выполняет неплохую работу по созданию базовой админ-панели используя информацию из зарегистрированных моделей:</p>
+- List views:
 
-<ul>
- <li>каждая модель имеет список записей, каждая из которых идентифицируется строкой, создаваемой методом <code>__str__()</code> модели, и связана с представлением для её редактирования. По умолчанию, в верхней части этого представления находится меню действий, которое может быть использовано для удаления нескольких записей за раз</li>
- <li>Формы для редактирования и добавления записей содержат все поля модели, которые расположены вертикально в порядке их объявления в модели.  </li>
-</ul>
+  - добавление дополнительных отображаемых полей или информации для каждой записи.
+  - добавление фильтров для отбора записей по разным критериям (например, статус выдачи книги).
+  - добавление дополнительных вариантов выбора в меню действий и места расположения этого меню на форме.
 
-<p>Можно настроить интерфейс пользователя для упрощения его использования. Некоторые доступные настройки:</p>
+- Detail views
 
-<ul>
- <li>List views:
-  <ul>
-   <li>добавление дополнительных отображаемых полей или информации для каждой записи. </li>
-   <li>добавление фильтров для отбора записей по разным критериям (например, статус выдачи книги).</li>
-   <li>добавление дополнительных вариантов выбора в меню действий и места расположения этого меню на форме.</li>
-  </ul>
- </li>
- <li>Detail views
-  <ul>
-   <li>выбор отображаемых полей, их порядка, группирования и т.д. </li>
-   <li>добавление связанных полей к записи  (например, возможности добавления и редактирования записей книг при создании записи автора).</li>
-  </ul>
- </li>
-</ul>
+  - выбор отображаемых полей, их порядка, группирования и т.д.
+  - добавление связанных полей к записи (например, возможности добавления и редактирования записей книг при создании записи автора).
 
-<p>В этом разделе рассмотрим некоторые изменения для совершенствования интерфейса пользователя нашей местной библиотеки, а именно: добавление дополнительной информации в списки моделей <code>Book</code> и <code>Author</code> ,  а также улучшение расположения элементов соответствующих представлений редактирования. Пользовательский интерфейс моделей <code>Language</code> and <code>Genre</code> изменять не будем, так как это не даст заметного улучшения, поскольку он содержит только по одному полю!</p>
+В этом разделе рассмотрим некоторые изменения для совершенствования интерфейса пользователя нашей местной библиотеки, а именно: добавление дополнительной информации в списки моделей `Book` и `Author` , а также улучшение расположения элементов соответствующих представлений редактирования. Пользовательский интерфейс моделей `Language` and `Genre` изменять не будем, так как это не даст заметного улучшения, поскольку он содержит только по одному полю!
 
-<p>Полное руководство по всем возможным вариантам настройки админ-панели можно найти в <a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">The Django Admin site</a> (документация Django).</p>
+Полное руководство по всем возможным вариантам настройки админ-панели можно найти в [The Django Admin site](https://docs.djangoproject.com/en/1.10/ref/contrib/admin/) (документация Django).
 
-<h3 id="Регистрация_класса_ModelAdmin">Регистрация класса ModelAdmin</h3>
+### Регистрация класса ModelAdmin
 
-<p>Для изменения отображения модели в пользовательском интерфейсе админ-панели, необходимо определить класс <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects">ModelAdmin</a>  (он описывает расположение элементов интерфейса, где Model - наименование модели) и зарегистрировать его для использования с этой моделью.</p>
+Для изменения отображения модели в пользовательском интерфейсе админ-панели, необходимо определить класс [ModelAdmin](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#modeladmin-objects) (он описывает расположение элементов интерфейса, где Model - наименование модели) и зарегистрировать его для использования с этой моделью.
 
-<p>Давайте начнём с модели Author. Откройте файл <strong>admin.py</strong> в каталоге приложения (<strong>/locallibrary/catalog/admin.py</strong>). Закомментируйте исходную регистрацию (используя префикс #) этой модели:</p>
+Давайте начнём с модели Author. Откройте файл **admin.py** в каталоге приложения (**/locallibrary/catalog/admin.py**). Закомментируйте исходную регистрацию (используя префикс #) этой модели:
 
-<pre class="brush: js"># admin.site.register(Author)</pre>
+```js
+# admin.site.register(Author)
+```
 
-<p>Теперь добавьте новый класс <code>AuthorAdmin</code> и зарегистрируйте его как показано ниже:</p>
+Теперь добавьте новый класс `AuthorAdmin` и зарегистрируйте его как показано ниже:
 
-<pre class="brush: python"># Define the admin class
+```python
+# Define the admin class
 class AuthorAdmin(admin.ModelAdmin):
     pass
 
 # Register the admin class with the associated model
 admin.site.register(Author, AuthorAdmin)
-</pre>
+```
 
-<p>Сейчас мы добавим классы <code>ModelAdmin</code> для моделей <code>Book </code> <code>BookInstance</code>. Нам снова нужно закомментировать исходную регистрацию:</p>
+Сейчас мы добавим классы `ModelAdmin` для моделей ` Book ``BookInstance `. Нам снова нужно закомментировать исходную регистрацию:
 
-<pre class="brush: js">#admin.site.register(Book)
-#admin.site.register(BookInstance)</pre>
+```js
+#admin.site.register(Book)
+#admin.site.register(BookInstance)
+```
 
-<p>В этот раз для создания и регистрации новых моделей используем декоратор  <code>@register</code> (он делает то же самое, что и метод <code>admin.site.register()</code>):</p>
+В этот раз для создания и регистрации новых моделей используем декоратор `@register` (он делает то же самое, что и метод `admin.site.register()`):
 
-<pre class="brush: python"># Register the Admin classes for Book using the decorator
+```python
+# Register the Admin classes for Book using the decorator
 
 @admin.register(Book)
 class BookAdmin(admin.ModelAdmin):
@@ -175,166 +162,157 @@ class BookAdmin(admin.ModelAdmin):
 @admin.register(BookInstance)
 class BookInstanceAdmin(admin.ModelAdmin):
     pass
-</pre>
+```
 
-<p>Пока что все наши admin-классы пустые (см. "<code>pass"</code>), поэтому ничего не изменится ! Добавим код для задания особенностей интерфейса моделей.</p>
+Пока что все наши admin-классы пустые (см. "`pass"`), поэтому ничего не изменится ! Добавим код для задания особенностей интерфейса моделей.
 
-<h3 id="Настройка_отображения_списков">Настройка отображения списков</h3>
+### Настройка отображения списков
 
-<p>Сейчас приложение <em>LocalLibrary</em> отображает всех авторов, используя имя объекта, возвращаемое методом <code>__str__()</code> модели. Это приемлемо, когда есть только несколько авторов, но, если их количество значительно, возможны дубликаты. Чтобы различить их или просто отобразить более интересную информацию о каждом авторе, можно использовать <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display">list_display</a> (для добавления дополнительных полей). </p>
+Сейчас приложение _LocalLibrary_ отображает всех авторов, используя имя объекта, возвращаемое методом `__str__()` модели. Это приемлемо, когда есть только несколько авторов, но, если их количество значительно, возможны дубликаты. Чтобы различить их или просто отобразить более интересную информацию о каждом авторе, можно использовать [list_display](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.list_display) (для добавления дополнительных полей).
 
-<p>Замените класс <code>AuthorAdmin</code> кодом, приведённым ниже. Названия полей, которые будут отображаться в списке, перечислены в кортеже list_display в требуемом порядке  (это те же имена, что и в исходной модели).</p>
+Замените класс `AuthorAdmin` кодом, приведённым ниже. Названия полей, которые будут отображаться в списке, перечислены в кортеже list_display в требуемом порядке (это те же имена, что и в исходной модели).
 
-<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+```python
+class AuthorAdmin(admin.ModelAdmin):
     list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-</pre>
+```
 
-<p>Перезапустите сайт и перейдите к списку авторов. Указанные поля должны отображаться следующим образом:</p>
+Перезапустите сайт и перейдите к списку авторов. Указанные поля должны отображаться следующим образом:
 
-<p><img alt="Admin Site - Improved Author List" src="https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png" style="border-style: solid; border-width: 1px; display: block; height: 302px; margin: 0px auto; width: 941px;"></p>
+![Admin Site - Improved Author List](https://mdn.mozillademos.org/files/14023/admin_improved_author_list.png)
 
-<p>Для нашей модели <code>Book</code> добавим отображение полей <code>author</code> и <code>genre</code>. Поле <code>author</code>  - это  внешний ключ (<code>ForeignKey</code> ) связи один к одному, поэтому оно будет представлено значением <code>__str()__</code>  для связанной записи. Замените класс <code>BookAdmin</code> на версию, приведённую ниже.</p>
+Для нашей модели `Book` добавим отображение полей `author` и `genre`. Поле `author` - это внешний ключ (`ForeignKey` ) связи один к одному, поэтому оно будет представлено значением `__str()__` для связанной записи. Замените класс `BookAdmin` на версию, приведённую ниже.
 
-<pre class="brush: python">class BookAdmin(admin.ModelAdmin):
+```python
+class BookAdmin(admin.ModelAdmin):
     list_display = ('title', 'author', 'display_genre')
-</pre>
+```
 
-<p>К сожалению, мы не можем напрямую поместить поле genre в <code>list_display</code>, так как оно является  <code>ManyToManyField</code> (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию <code>display_genre</code> для получения строкового представления информации (вызов этой функции есть в <code>list_display</code>,  её определение см. ниже).</p>
+К сожалению, мы не можем напрямую поместить поле genre в `list_display`, так как оно является `ManyToManyField` (Django не позволяет это из-за большой "стоимости" доступа к базе данных). Вместо этого мы определим функцию `display_genre` для получения строкового представления информации (вызов этой функции есть в `list_display`, её определение см. ниже).
 
-<div class="note">
-<p><strong>Примечание</strong>: Получение здесь значения поля <code>genre</code> возможно не самая хорошая идея вследствие "стоимости" операции базы данных. Мы показываем это, потому что вызов функций в ваших моделях может быть очень полезен по другим причинам, например, для добавления ссылки  <em>Delete </em>рядом с каждым пунктом списка.</p>
-</div>
+> **Примечание:** Получение здесь значения поля `genre` возможно не самая хорошая идея вследствие "стоимости" операции базы данных. Мы показываем это, потому что вызов функций в ваших моделях может быть очень полезен по другим причинам, например, для добавления ссылки _Delete_ рядом с каждым пунктом списка.
 
-<p>Добавьте следующий код в вашу модель <code>Book</code> (<strong>models.py</strong>). В нем создаётся строка из первых трёх значений поля <code>genre</code> (если они существуют) и <code>short_description</code>,  которое может быть использовано в админ-панели.</p>
+Добавьте следующий код в вашу модель `Book` (**models.py**). В нем создаётся строка из первых трёх значений поля `genre` (если они существуют) и `short_description`, которое может быть использовано в админ-панели.
 
-<pre class="brush: python">    def display_genre(self):
+```python
+    def display_genre(self):
         """
         Creates a string for the Genre. This is required to display genre in Admin.
         """
         return ', '.join([ genre.name for genre in self.genre.all()[:3] ])
     display_genre.short_description = 'Genre'
-</pre>
+```
 
-<p>После сохранения модели и обновления админ-панели, перезапустите её и перейдите на страницу списка <em>Books</em>. Вы должны увидеть список книг, наподобие приведённого ниже:</p>
+После сохранения модели и обновления админ-панели, перезапустите её и перейдите на страницу списка _Books_. Вы должны увидеть список книг, наподобие приведённого ниже:
 
-<p><img alt="Admin Site - Improved Book List" src="https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png" style="border-style: solid; border-width: 1px; display: block; height: 337px; margin: 0px auto; width: 947px;"></p>
+![Admin Site - Improved Book List](https://mdn.mozillademos.org/files/14025/admin_improved_book_list.png)
 
-<p>Модель <code>Genre</code> (и модель <code>Language</code>, если вы её определили) имеет единственное поле. Поэтому нет необходимости создания для них дополнительных моделей с целью отображения дополнительных полей.</p>
+Модель `Genre` (и модель `Language`, если вы её определили) имеет единственное поле. Поэтому нет необходимости создания для них дополнительных моделей с целью отображения дополнительных полей.
 
-<div class="note">
-<p><strong>Примечание</strong>: целесообразно, чтобы в списке модели <code>BookInstance</code> отображались хотя бы статус и ожидаемая дата возврата. Мы добавили это в качестве "испытания" в конце этой статьи!</p>
-</div>
+> **Примечание:** целесообразно, чтобы в списке модели `BookInstance` отображались хотя бы статус и ожидаемая дата возврата. Мы добавили это в качестве "испытания" в конце этой статьи!
 
-<h3 id="Добавление_фильтров_списка">Добавление фильтров списка</h3>
+### Добавление фильтров списка
 
-<p>Если в вашем списке есть множество элементов, может быть полезной возможность фильтрации отображаемых пунктов. Это выполняется путём перечисления их в атрибуте <code>list_filter</code>. Замените класс <code style="font-style: normal; font-weight: normal;">BookInstanceAdmin</code> на следующий:</p>
+Если в вашем списке есть множество элементов, может быть полезной возможность фильтрации отображаемых пунктов. Это выполняется путём перечисления их в атрибуте `list_filter`. Замените класс `BookInstanceAdmin` на следующий:
 
-<pre class="brush: python">class BookInstanceAdmin(admin.ModelAdmin):
-<strong>    list_filter = ('status', 'due_back')</strong>
-</pre>
+```python
+class BookInstanceAdmin(admin.ModelAdmin):
+    list_filter = ('status', 'due_back')
+```
 
-<p>Представление списка теперь будет содержать панель фильтрации справа. Обратите внимание, как выбирать даты и статус для фильтрации:</p>
+Представление списка теперь будет содержать панель фильтрации справа. Обратите внимание, как выбирать даты и статус для фильтрации:
 
-<p><img alt="Admin Site - BookInstance List Filters" src="https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png" style="height: 528px; width: 960px;"></p>
+![Admin Site - BookInstance List Filters](https://mdn.mozillademos.org/files/14037/admin_improved_bookinstance_list_filters.png)
 
-<h3 id="Формирование_макета_с_подробным_представлением">Формирование макета с подробным представлением</h3>
+### Формирование макета с подробным представлением
 
-<p>По умолчанию в представлениях деталей отображаются все поля по вертикали в порядке их объявления в модели. Вы можете изменить порядок декларации, какие поля отображаются (или исключены), используются ли разделы для организации информации, отображаются ли поля горизонтально или вертикально, и даже какие виджеты редактирования используются в админ-формах.</p>
+По умолчанию в представлениях деталей отображаются все поля по вертикали в порядке их объявления в модели. Вы можете изменить порядок декларации, какие поля отображаются (или исключены), используются ли разделы для организации информации, отображаются ли поля горизонтально или вертикально, и даже какие виджеты редактирования используются в админ-формах.
 
-<div class="note">
-<p><strong>Примечание:</strong> Модели LocalLibrary относительно просты, поэтому нам не нужно менять макет, но мы всё равно внесём некоторые изменения, просто чтобы показать вам, как это сделать.</p>
-</div>
+> **Примечание:** Модели LocalLibrary относительно просты, поэтому нам не нужно менять макет, но мы всё равно внесём некоторые изменения, просто чтобы показать вам, как это сделать.
 
-<h4 id="Управление_отображаемыми_и_вложенными_полями">Управление отображаемыми и вложенными полями</h4>
+#### Управление отображаемыми и вложенными полями
 
-<p>Обновите ваш AuthorAdmin класс, чтобы добавить строку полей, как показано ниже (выделено полужирным шрифтом):</p>
+Обновите ваш AuthorAdmin класс, чтобы добавить строку полей, как показано ниже (выделено полужирным шрифтом):
 
-<pre class="brush: python">class AuthorAdmin(admin.ModelAdmin):
+```python
+class AuthorAdmin(admin.ModelAdmin):
     list_display = ('last_name', 'first_name', 'date_of_birth', 'date_of_death')
-<strong>    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]</strong>
-</pre>
+    fields = ['first_name', 'last_name', ('date_of_birth', 'date_of_death')]
+```
 
-<p>Атрибут полей перечисляет только те поля, которые должны отображаться в форме, по порядку. Поля отображаются по вертикали по умолчанию, но будут отображаться горизонтально, если вы дополнительно группируете их в кортеже (как показано в полях «date» выше).</p>
+Атрибут полей перечисляет только те поля, которые должны отображаться в форме, по порядку. Поля отображаются по вертикали по умолчанию, но будут отображаться горизонтально, если вы дополнительно группируете их в кортеже (как показано в полях «date» выше).
 
-<p>Перезагрузите приложение и перейдите к подробному представлению автора - он должен теперь отображаться, как показано ниже:</p>
+Перезагрузите приложение и перейдите к подробному представлению автора - он должен теперь отображаться, как показано ниже:
 
-<p><img alt="Admin Site - Improved Author Detail" src="https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 282px; margin: 0px auto; width: 928px;"></p>
+![Admin Site - Improved Author Detail](https://mdn.mozillademos.org/files/14027/admin_improved_author_detail.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Так же, вы можете использовать <code>exclude</code> атрибут для объявления списка атрибутов, которые будут исключены из формы (все остальные атрибуты в модели, будут отображаться). </p>
-</div>
+> **Примечание:** Так же, вы можете использовать `exclude` атрибут для объявления списка атрибутов, которые будут исключены из формы (все остальные атрибуты в модели, будут отображаться).
 
-<h4 id="Разделение_на_секцииВыделение_подробного_представления">Разделение на секции/Выделение подробного представления</h4>
+#### Разделение на секции/Выделение подробного представления
 
-<p>Вы можете добавлять "разделы" (sections) для группировки связанной информации в модели в форме детализации, используя атрибут <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets">fieldsets</a> .</p>
+Вы можете добавлять "разделы" (sections) для группировки связанной информации в модели в форме детализации, используя атрибут [fieldsets](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.fieldsets) .
 
-<p>В модели <code>BookInstance</code> мы имеем информацию соответствия конкретной книги (т.е. <code>name</code>, <code>imprint</code>, and <code>id</code>) и датой когда она вновь станет доступной (<code>status</code>, <code>due_back</code>). Мы можем добавить их  в разные секции, добавив текст жирным шрифтом в наш <code>BookInstanceAdmin</code> класс. </p>
+В модели `BookInstance` мы имеем информацию соответствия конкретной книги (т.е. `name`, `imprint`, and `id`) и датой когда она вновь станет доступной (`status`, `due_back`). Мы можем добавить их в разные секции, добавив текст жирным шрифтом в наш `BookInstanceAdmin` класс.
 
-<pre class="brush: python">@admin.register(BookInstance)
+```python
+@admin.register(BookInstance)
 class BookInstanceAdmin(admin.ModelAdmin):
     list_filter = ('status', 'due_back')
 
-<strong>    fieldsets = (
+    fieldsets = (
         (None, {
             'fields': ('book','imprint', 'id')
         }),
         ('Availability', {
             'fields': ('status', 'due_back')
         }),
-    )</strong></pre>
+    )
+```
 
-<p>Каждая секция имеет свой заголовок (или <code>None</code>, если заголовок не нужен) и ассоциированный кортеж полей в словаре - формат сложный для описания, но относительно простой для понимания, если вы посмотрите на фрагмент кода, представленный выше.</p>
+Каждая секция имеет свой заголовок (или `None`, если заголовок не нужен) и ассоциированный кортеж полей в словаре - формат сложный для описания, но относительно простой для понимания, если вы посмотрите на фрагмент кода, представленный выше.
 
-<p>Перезапустите сайт и перейдите к списку экземпляров; форма должна отображаться следующим образом:</p>
+Перезапустите сайт и перейдите к списку экземпляров; форма должна отображаться следующим образом:
 
-<p><img alt="Admin Site - Improved BookInstance Detail with sections" src="https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 947px;"></p>
+![Admin Site - Improved BookInstance Detail with sections](https://mdn.mozillademos.org/files/14029/admin_improved_bookinstance_detail_sections.png)
 
-<h3 id="Встроенное_редактирование_связанных_записей">Встроенное редактирование связанных записей</h3>
+### Встроенное редактирование связанных записей
 
-<p>Иногда бывает полезно иметь возможность добавлять связанные записи одновременно. Например, имеет смысл иметь как информацию о книге, так и информацию о конкретных копиях, которые вы получили на той же странице подробностей. К примеру, вполне логично получить и информацию о книге, и информацию о конкретных копиях, зайдя на страницу детализации.</p>
+Иногда бывает полезно иметь возможность добавлять связанные записи одновременно. Например, имеет смысл иметь как информацию о книге, так и информацию о конкретных копиях, которые вы получили на той же странице подробностей. К примеру, вполне логично получить и информацию о книге, и информацию о конкретных копиях, зайдя на страницу детализации.
 
-<p>Вы можете это сделать, объявив <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines">inlines</a>, и указав тип <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> (горизонтальное расположение) или  <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline">StackedInline</a> (вертикальное расположение, так же как и в модели по умолчанию). Вы можете добавить  <code>BookInstance</code> информацию в подробное описание  <code>Book</code> , добавив строки, представленные ниже и располагающиеся рядом с  <code>BookAdmin</code>: </p>
+Вы можете это сделать, объявив [inlines](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.ModelAdmin.inlines), и указав тип [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) (горизонтальное расположение) или [StackedInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.StackedInline) (вертикальное расположение, так же как и в модели по умолчанию). Вы можете добавить `BookInstance` информацию в подробное описание `Book` , добавив строки, представленные ниже и располагающиеся рядом с `BookAdmin`:
 
-<pre class="brush: python"><strong>class BooksInstanceInline(admin.TabularInline):
-    model = BookInstance</strong>
+```python
+class BooksInstanceInline(admin.TabularInline):
+    model = BookInstance
 
 @admin.register(Book)
 class BookAdmin(admin.ModelAdmin):
     list_display = ('title', 'author', 'display_genre')
-<strong>    inlines = [BooksInstanceInline]</strong>
-</pre>
-
-<p>Попробуйте перезапустить приложение, а затем взгляните на представление книги — внизу вы должны увидеть экземпляры книги, относящиеся к этой книге:</p>
+    inlines = [BooksInstanceInline]
+```
 
-<p><img alt="Admin Site - Book with Inlines" src="https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png" style="border-style: solid; border-width: 1px; display: block; height: 889px; margin: 0px auto; width: 937px;"></p>
+Попробуйте перезапустить приложение, а затем взгляните на представление книги — внизу вы должны увидеть экземпляры книги, относящиеся к этой книге:
 
-<p>В этом случае, всё, что мы сделали - объявили наш встроенный класс tablular, который просто добавляет все поля из <em>встроенной</em> модели. Вы можете указать все виды дополнительной информации для макета, включая отображаемые поля, их порядок, независимо от того, являются ли они только для чтения или нет, и т. д. (См. <a href="https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline">TabularInline</a> для получения дополнительной информации). </p>
+![Admin Site - Book with Inlines](https://mdn.mozillademos.org/files/14033/admin_improved_book_detail_inlines.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: В этой функции есть некоторые неприятные ограничения! На скриншоте выше у нас есть три существующих экземпляра книги, за которыми следуют три поля для новых экземпляров книги (которые очень похожи!). Было бы лучше НЕ иметь лишних экземпляров книг по умолчанию и просто добавить их с помощью ссылки <strong>Add another Book instance</strong> или иметь возможность просто перечислять <code>BookInstance</code>s как нечитаемые здесь ссылки. Первый вариант можно сделать, установив <code>extra</code> атрибут в 0 в модели <code>BookInstanceInline</code>, попробуйте сами.</p>
-</div>
+В этом случае, всё, что мы сделали - объявили наш встроенный класс tablular, который просто добавляет все поля из _встроенной_ модели. Вы можете указать все виды дополнительной информации для макета, включая отображаемые поля, их порядок, независимо от того, являются ли они только для чтения или нет, и т. д. (См. [TabularInline](https://docs.djangoproject.com/en/dev/ref/contrib/admin/#django.contrib.admin.TabularInline) для получения дополнительной информации).
 
-<h2 id="Проверьте_себя">Проверьте себя</h2>
+> **Примечание:** В этой функции есть некоторые неприятные ограничения! На скриншоте выше у нас есть три существующих экземпляра книги, за которыми следуют три поля для новых экземпляров книги (которые очень похожи!). Было бы лучше НЕ иметь лишних экземпляров книг по умолчанию и просто добавить их с помощью ссылки **Add another Book instance** или иметь возможность просто перечислять `BookInstance`s как нечитаемые здесь ссылки. Первый вариант можно сделать, установив `extra` атрибут в 0 в модели `BookInstanceInline`, попробуйте сами.
 
-<p>Мы многое изучили в этом разделе и теперь настало время вам самостоятельно попробовать несколько вещей:</p>
+## Проверьте себя
 
-<ol>
- <li>Для представления списка <code>BookInstance</code> , добавьте код  для отображения книги, статуса, даты возврата, и id (вместо значения по умолчанию возвращаемого  <code>__str__()</code> ).</li>
- <li>Добавьте встроенный список перечня <code>Book</code> в представление списка <code>Author</code> , используя тот же самый подход, который мы применили для <code>Book</code>/<code>BookInstance</code>.</li>
-</ol>
+Мы многое изучили в этом разделе и теперь настало время вам самостоятельно попробовать несколько вещей:
 
-<ul>
-</ul>
+1.  Для представления списка `BookInstance` , добавьте код для отображения книги, статуса, даты возврата, и id (вместо значения по умолчанию возвращаемого `__str__()` ).
+2.  Добавьте встроенный список перечня `Book` в представление списка `Author` , используя тот же самый подход, который мы применили для `Book`/`BookInstance`.
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Вот и всё! Теперь вы узнали, как настроить сайт администрирования как в самой простой, так и в улучшенной форме, о создании суперпользователя и о том, как перемещаться по сайту администратора, просматривать, удалять и обновлять записи. По пути вы создали множество книг, экземпляров, жанров и авторов, которые мы сможем перечислить и отобразить, как только мы создадим собственный вид и шаблоны.</p>
+Вот и всё! Теперь вы узнали, как настроить сайт администрирования как в самой простой, так и в улучшенной форме, о создании суперпользователя и о том, как перемещаться по сайту администратора, просматривать, удалять и обновлять записи. По пути вы создали множество книг, экземпляров, жанров и авторов, которые мы сможем перечислить и отобразить, как только мы создадим собственный вид и шаблоны.
 
-<h2 id="Дополнительные_материалы">Дополнительные материалы</h2>
+## Дополнительные материалы
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial02/#introducing-the-django-admin">Writing your first Django app, part 2: Introducing the Django Admin</a>  (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/contrib/admin/">The Django Admin site</a> (Django Docs)</li>
-</ul>
+- [Writing your first Django app, part 2: Introducing the Django Admin](https://docs.djangoproject.com/en/1.10/intro/tutorial02/#introducing-the-django-admin) (Django docs)
+- [The Django Admin site](https://docs.djangoproject.com/en/1.10/ref/contrib/admin/) (Django Docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Models", "Learn/Server-side/Django/Home_page", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/authentication/index.md b/files/ru/learn/server-side/django/authentication/index.md
index 419e5639e8d2da..1a920ddd8ea984 100644
--- a/files/ru/learn/server-side/django/authentication/index.md
+++ b/files/ru/learn/server-side/django/authentication/index.md
@@ -18,488 +18,482 @@ tags:
 translation_of: Learn/Server-side/Django/Authentication
 original_slug: Learn/Server-side/Django/Аутентификация
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</div>
+В данном руководстве мы продемонстрируем вам систему входа пользователя на ваш сайт используя его собственный аккаунт. Кроме того, мы покажем как реализовать контроль того, что может видеть и делать пользователь, в зависимости от того, залогинен он, или нет, а также имеет ли он соответствующий уровень прав доступа _(permissions)_. Для того чтобы продемонстрировать все это, мы расширим [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), добавив страницы для входа/выхода, а также страницы просмотра/редактирования книг, специфические для пользователя и персонала.
 
-<p class="summary">В данном руководстве мы продемонстрируем вам систему входа пользователя на ваш сайт используя его собственный аккаунт. Кроме того, мы покажем как реализовать  контроль того, что может видеть и делать пользователь, в зависимости от того, залогинен он, или нет, а также имеет ли он соответствующий уровень прав доступа <em>(permissions)</em>. Для того чтобы продемонстрировать все это, мы расширим <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавив страницы для входа/выхода, а также страницы просмотра/редактирования книг, специфические для пользователя и персонала.</p>
+| Требования: | Завершить изучение предыдущих тем руководства, включая [Руководство Django Часть 7: Работа с сессиями](/ru/docs/Learn/Server-side/Django/Sessions). |
+| ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понимать как настроить и использовать механизм аутентификации пользователя и разграничений прав доступа.                                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Завершить изучение предыдущих тем руководства, включая <a href="/ru/docs/Learn/Server-side/Django/Sessions">Руководство Django Часть 7: Работа с сессиями</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать как настроить и использовать механизм аутентификации пользователя и разграничений прав доступа.</td>
-  </tr>
- </tbody>
-</table>
-
-<h2 id="Обзор">Обзор</h2>
+## Обзор
 
-<p>Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в <a href="/ru/docs/Learn/Server-side/Django/Sessions">предыдущей части</a>. Система аутентификации и авторизации позволяет вам проверять учётные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для <code>Пользователей</code> и <code>Групп</code> (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованных пользователей, а так же получить доступ к контенту с ограниченным доступом.</p>
+Django предоставляет систему аутентификации и авторизации ("permission") пользователя, реализованную на основе фреймворка работы с сессиями, который мы рассматривали в [предыдущей части](/ru/docs/Learn/Server-side/Django/Sessions). Система аутентификации и авторизации позволяет вам проверять учётные данные пользователей и определять какие действия какой пользователь может выполнять. Данный фреймворк включает в себя встроенные модели для `Пользователей` и `Групп` (основной способ применения прав доступа для более чем одного пользователя), непосредственно саму систему прав доступа (permissions)/флаги, которые определяют может ли пользователь выполнить задачу, с какой формой и отображением для авторизованных пользователей, а так же получить доступ к контенту с ограниченным доступом.
 
-<div class="note">
-<p><strong>Примечание</strong>: В соответствии с идеологией Django система аутентификации является очень общей и, таким образом, не предоставляет некоторые возможности, которые присутствуют в других системах веб-аутентификации. Решениями некоторых общих задач занимаются пакеты сторонних разработчиков, например, защита от подбора пароля (через стороннюю библиотеку OAuth).</p>
-</div>
+> **Примечание:** В соответствии с идеологией Django система аутентификации является очень общей и, таким образом, не предоставляет некоторые возможности, которые присутствуют в других системах веб-аутентификации. Решениями некоторых общих задач занимаются пакеты сторонних разработчиков, например, защита от подбора пароля (через стороннюю библиотеку OAuth).
 
-<p>В данном разделе руководства мы покажем вам реализацию аутентификации пользователя на сайте <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, создание страниц входа/выхода, добавления разграничения доступа (permissions) к вашим моделям, а также продемонстрируем контроль за доступом к некоторым страницам. Мы будем использовать аутентификацию/авторизацию для показа пользователям и сотрудникам библиотеки, списков книг, которые были взяты на прокат.</p>
+В данном разделе руководства мы покажем вам реализацию аутентификации пользователя на сайте [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), создание страниц входа/выхода, добавления разграничения доступа (permissions) к вашим моделям, а также продемонстрируем контроль за доступом к некоторым страницам. Мы будем использовать аутентификацию/авторизацию для показа пользователям и сотрудникам библиотеки, списков книг, которые были взяты на прокат.
 
-<p>Система аутентификации является очень гибкой и позволяет вам формировать свои собственные URL-адреса, формы, отображения, а также шаблоны страниц, если вы пожелаете, с нуля, через простой вызов функций соответствующего API для авторизации пользователя. Тем не менее, в данной статье мы будем использовать "встроенные" в Django методы отображений и форм аутентификации, а также методы построения страниц входа и выхода. Нам все ещё необходимо создавать шаблоны страниц, но это будет достаточно несложно.</p>
+Система аутентификации является очень гибкой и позволяет вам формировать свои собственные URL-адреса, формы, отображения, а также шаблоны страниц, если вы пожелаете, с нуля, через простой вызов функций соответствующего API для авторизации пользователя. Тем не менее, в данной статье мы будем использовать "встроенные" в Django методы отображений и форм аутентификации, а также методы построения страниц входа и выхода. Нам все ещё необходимо создавать шаблоны страниц, но это будет достаточно несложно.
 
-<p>Мы покажем вам как реализовать разграничение доступа (permissions), а также выполнять соответствующую проверку статусов авторизации и прав доступа, в отображениях, и в шаблонах страниц.</p>
+Мы покажем вам как реализовать разграничение доступа (permissions), а также выполнять соответствующую проверку статусов авторизации и прав доступа, в отображениях, и в шаблонах страниц.
 
-<h2 id="Подключение_аутентификации">Подключение аутентификации</h2>
+## Подключение аутентификации
 
-<p>Аутентификация была подключена автоматически когда мы создали <a href="/ru/docs/Learn/Server-side/Django/skeleton_website">скелет сайта</a> (в части 2), таким образом на данный момент вам ничего не надо делать.</p>
+Аутентификация была подключена автоматически когда мы создали [скелет сайта](/ru/docs/Learn/Server-side/Django/skeleton_website) (в части 2), таким образом на данный момент вам ничего не надо делать.
 
-<div class="note">
-<p><strong>Примечание</strong>: Необходимые настройки были выполнены для нас, когда мы создали приложение при помощи команды <code>django-admin startproject</code>. Таблицы базы данных для пользователей и модели авторизации были созданы, когда в первый раз выполнили команду <code>python manage.py migrate</code>.</p>
-</div>
+> **Примечание:** Необходимые настройки были выполнены для нас, когда мы создали приложение при помощи команды `django-admin startproject`. Таблицы базы данных для пользователей и модели авторизации были созданы, когда в первый раз выполнили команду `python manage.py migrate`.
 
-<p>Соответствующие настройки сделаны в параметрах <code>INSTALLED_APPS</code> и <code>MIDDLEWARE</code> файла проекта (<strong>locallibrary/locallibrary/settings.py</strong>), как показано ниже:</p>
+Соответствующие настройки сделаны в параметрах `INSTALLED_APPS` и `MIDDLEWARE` файла проекта (**locallibrary/locallibrary/settings.py**), как показано ниже:
 
-<pre class="brush: python">INSTALLED_APPS = [
+```python
+INSTALLED_APPS = [
     ...
-<strong>    'django.contrib.auth',  </strong># Фреймворк аутентификации и моделей по умолчанию.
-<strong>    'django.contrib.contenttypes',  # </strong>Django контент-типовая система (даёт разрешения, связанные с моделями).
+    'django.contrib.auth',  # Фреймворк аутентификации и моделей по умолчанию.
+    'django.contrib.contenttypes',  # Django контент-типовая система (даёт разрешения, связанные с моделями).
     ....
 
 MIDDLEWARE = [
     ...
-<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>  # Управление сессиями между запросами
+    'django.contrib.sessions.middleware.SessionMiddleware',  # Управление сессиями между запросами
     ...
-<strong>    'django.contrib.auth.middleware.AuthenticationMiddleware',</strong>  # Связывает пользователей, использующих сессии, запросами.
+    'django.contrib.auth.middleware.AuthenticationMiddleware',  # Связывает пользователей, использующих сессии, запросами.
     ....
-</pre>
+```
 
-<h2 id="Создание_пользователей_и_групп">Создание пользователей и групп</h2>
+## Создание пользователей и групп
 
-<p>Вы уже создали своего первого пользователя когда мы рассматривали <a href="/ru/docs/Learn/Server-side/Django/Admin_site">Административная панель сайта Django</a> в части 4 (это был суперпользователь, созданный при помощи команды<code> python manage.py createsuperuser</code>). Наш суперпользователь уже авторизован и имеет все необходимые уровни доступа к данным и функциям, таким образом нам необходимо создать тестового пользователя для отработки соответствующей работы сайта. В качестве наиболее быстрого способа, мы будем использовать административную панель сайта для создания соответствующих групп и аккаунтов <em>locallibrary</em>.</p>
+Вы уже создали своего первого пользователя когда мы рассматривали [Административная панель сайта Django](/ru/docs/Learn/Server-side/Django/Admin_site) в части 4 (это был суперпользователь, созданный при помощи команды` python manage.py createsuperuser`). Наш суперпользователь уже авторизован и имеет все необходимые уровни доступа к данным и функциям, таким образом нам необходимо создать тестового пользователя для отработки соответствующей работы сайта. В качестве наиболее быстрого способа, мы будем использовать административную панель сайта для создания соответствующих групп и аккаунтов _locallibrary_.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете создавать пользователей программно, как показано ниже. Например, вам мог бы подойти данный способ в том случае, если вы разрабатываете интерфейс, который позволяет пользователям создавать их собственные аккаунты (вы не должны предоставлять доступ пользователям к административной панели вашего сайта).</p>
+> **Примечание:** вы можете создавать пользователей программно, как показано ниже. Например, вам мог бы подойти данный способ в том случае, если вы разрабатываете интерфейс, который позволяет пользователям создавать их собственные аккаунты (вы не должны предоставлять доступ пользователям к административной панели вашего сайта).
+>
+> ```python
+> from django.contrib.auth.models import User
+>
+> # Создайте пользователя и сохраните его в базе данных
+> user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+>
+> # Обновите поля и сохраните их снова
+> user.first_name = 'John'
+> user.last_name = 'Citizen'
+> user.save()
+> ```
 
-<pre class="brush: python">from django.contrib.auth.models import User
+Ниже мы создадим группу, а затем пользователя. Несмотря на то, что у нас пока нет никаких разрешений для добавления к нашей библиотеке каких-либо членов, если мы захотим это сделать в будущем, то будет намного проще добавлять их к уже созданной группе, с заданной аутентификацией.
 
-# Создайте пользователя и сохраните его в базе данных
-user = User.objects.create_user('myusername', 'myemail@crazymail.com', 'mypassword')
+Запустите сервер разработки и перейдите к административной панели вашего сайта (<http://127.0.0.1:8000/admin/>). Залогиньтесь на сайте при помощи параметров (имя пользователя и пароля) аккаунта суперпользователя. Самая "верхняя" страница панели Администратора показывает все наши модели. Для того, чтобы увидеть записи в разделе **Authentication and Authorisation** вы можете нажать на ссылку **Users**, или **Groups**.
 
-# Обновите поля и сохраните их снова
-user.first_name = 'John'
-user.last_name = 'Citizen'
-user.save()
-</pre>
-</div>
+![Admin site - add groups or users](https://mdn.mozillademos.org/files/14091/admin_authentication_add.png)
 
-<p>Ниже мы создадим группу, а затем пользователя. Несмотря на то, что у нас пока нет никаких  разрешений для добавления к нашей библиотеке каких-либо членов, если мы захотим это сделать в будущем, то будет намного проще добавлять их к уже созданной группе, с заданной аутентификацией.</p>
+В первую очередь, в качестве нового члена нашего сайта, давайте создадим новую группу.
 
-<p>Запустите сервер разработки и перейдите к административной панели вашего сайта (<a href="http://127.0.0.1:8000/admin/">http://127.0.0.1:8000/admin/</a>). Залогиньтесь на сайте при помощи параметров (имя пользователя и пароля) аккаунта суперпользователя. Самая "верхняя" страница панели Администратора показывает все наши модели. Для того, чтобы увидеть записи в разделе <strong>Authentication and Authorisation</strong> вы можете нажать на ссылку <strong>Users</strong>, или <strong>Groups</strong>.</p>
+1.  Нажмите на кнопку **Add** **(Добавить)** (рядом с Group) и создайте новую _группу_; для данной группы введите **Name (Имя)** "Library Members".![Admin site - add group](https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png)
+2.  Для данной группы не нужны какие-либо разрешения, поэтому мы просто нажимаем кнопку **SAVE (Сохранить)** (вы перейдёте к списку групп).
 
-<p><img alt="Admin site - add groups or users" src="https://mdn.mozillademos.org/files/14091/admin_authentication_add.png" style="border-style: solid; border-width: 1px; display: block; height: 364px; margin: 0px auto; width: 661px;"></p>
+Теперь давайте создадим пользователя:
 
-<p>В первую очередь, в качестве нового члена нашего сайта, давайте создадим новую группу.</p>
+1.  Перейдите обратно на домашнюю страницу административной панели
+2.  Для перехода к диалогу добавления пользователя нажмите на кнопку **Add**, соответствующую строке _Users (Пользователи)_.![Admin site - add user pt1](https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png)
+3.  Введите соответствующие **Username** (имя пользователя) и **Password**/**Password confirmation (пароль/подтверждение пароля)** для вашего тестового пользователя
+4.  Нажмите **SAVE** для завершения процесса создания пользователя.
 
-<ol>
- <li>Нажмите на кнопку <strong>Add</strong> <strong>(Добавить)</strong> (рядом с Group) и создайте новую <em>группу</em>; для данной группы введите <strong>Name (Имя) </strong>"Library Members".<img alt="Admin site - add group" src="https://mdn.mozillademos.org/files/14093/admin_authentication_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 561px; margin: 0px auto; width: 800px;"></li>
- <li>Для данной группы не нужны какие-либо разрешения, поэтому мы просто нажимаем кнопку <strong>SAVE (Сохранить)</strong> (вы перейдёте к списку групп).</li>
-</ol>
+    Административная часть сайта создаст нового пользователя и немедленно перенаправит вас на страницу _Change user (Изменение параметров пользователя)_ где вы можете, соответственно, изменить ваш **username**, а кроме того добавить информацию для дополнительных полей модели User. Эти поля включают в себя имя пользователя, фамилию, адрес электронной почты, статус пользователя, а также соответствующие параметры доступа (может быть установлен только флаг **Active**). Ниже вы можете определить группу для пользователя и необходимые параметры доступа, а кроме того, вы можете увидеть важные даты, относящиеся к пользователю (дату подключения к сайту и дату последнего входа).![Admin site - add user pt2](https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png)
 
-<p>Теперь давайте создадим пользователя:</p>
+5.  В разделе _Groups_, из списка _Доступные группы_ выберите группу **Library Member**, а затем переместите её в блок "Выбранные группы" (нажмите **стрелку-"направо"**, находящуюся между блоками).![Admin site - add user to group](https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png)
+6.  Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернётесь к списку созданных пользователей.
 
-<ol>
- <li>Перейдите обратно на домашнюю страницу административной панели</li>
- <li>Для перехода к диалогу добавления пользователя нажмите на кнопку <strong>Add</strong>, соответствующую строке <em>Users (Пользователи)</em>.<img alt="Admin site - add user pt1" src="https://mdn.mozillademos.org/files/14095/admin_authentication_add_user_prt1.png" style="border-style: solid; border-width: 1px; display: block; height: 409px; margin: 0px auto; width: 800px;"></li>
- <li>Введите соответствующие <strong>Username</strong> (имя пользователя) и <strong>Password</strong>/<strong>Password confirmation (пароль/подтверждение пароля)</strong> для вашего тестового пользователя</li>
- <li>Нажмите <strong>SAVE</strong> для завершения процесса создания пользователя.<br>
-  <br>
-  Административная часть сайта создаст нового пользователя и немедленно перенаправит вас на страницу <em>Change user (Изменение параметров пользователя)</em> где вы можете, соответственно, изменить ваш <strong>username</strong>, а кроме того добавить информацию для дополнительных полей модели User. Эти поля включают в себя имя пользователя, фамилию, адрес электронной почты, статус пользователя, а также соответствующие параметры доступа (может быть установлен только флаг  <strong>Active</strong>). Ниже вы можете определить группу для пользователя и необходимые параметры доступа, а кроме того, вы можете увидеть важные даты, относящиеся к пользователю (дату подключения к сайту и дату последнего входа).<img alt="Admin site - add user pt2" src="https://mdn.mozillademos.org/files/14097/admin_authentication_add_user_prt2.png" style="border-style: solid; border-width: 1px; display: block; height: 635px; margin: 0px auto; width: 800px;"></li>
- <li>В разделе <em>Groups</em>, из списка <em>Доступные группы</em> выберите группу <strong>Library Member</strong>, а затем переместите её в блок "Выбранные группы" (нажмите <strong>стрелку-"направо"</strong>, находящуюся между блоками).<img alt="Admin site - add user to group" src="https://mdn.mozillademos.org/files/14099/admin_authentication_user_add_group.png" style="border-style: solid; border-width: 1px; display: block; height: 414px; margin: 0px auto; width: 933px;"></li>
- <li>Больше нам не нужно здесь нечего делать, просто нажмите "Save"(Сохранить), и вы вернётесь к списку созданных пользователей.</li>
-</ol>
+Вот и все! Теперь у вас есть учётная запись «обычного члена библиотеки», которую вы сможете использовать для тестирования (как только добавим страницы, чтобы пользователи могли войти в систему).
 
-<p>Вот и все! Теперь у вас есть учётная запись «обычного члена библиотеки», которую вы сможете использовать для тестирования (как только добавим страницы, чтобы пользователи могли войти в систему).</p>
+> **Примечание:** Попробуйте создать другого пользователя, например "Библиотекаря". Так же создайте группу "Библиотекарей" и добавьте туда своего только что созданного библиотекаря
 
-<div class="note">
-<p><strong>Note</strong>: Попробуйте создать другого пользователя, например "Библиотекаря". Так же создайте группу "Библиотекарей" и добавьте туда своего только что созданного библиотекаря</p>
-</div>
+## Настройка представлений проверки
 
-<h2 id="Настройка_представлений_проверки">Настройка представлений проверки</h2>
+Django предоставляет почти все, что нужно для создания страниц аутентификации входа, выхода из системы и управления паролями из коробки. Это включает в себя url-адреса, представления (views) и формы,но не включает шаблоны — мы должны создать свой собственный шаблон!
 
-<p>Django предоставляет почти все, что нужно для создания страниц аутентификации входа, выхода из системы и управления паролями из коробки. Это включает в себя url-адреса, представления (views) и формы,но не включает шаблоны — мы должны создать свой собственный шаблон!</p>
+В этом разделе мы покажем, как интегрировать систему по умолчанию в Сайт LocalLibrary и создать шаблоны. Мы поместим их в основные URL проекта.
 
-<p>В этом разделе мы покажем, как интегрировать систему по умолчанию в Сайт LocalLibrary и создать шаблоны.  Мы поместим их в основные URL проекта.</p>
+> **Примечание:** вы не должны использовать этот код, но вполне вероятно, что вы хотите, потому что это делает вещи намного проще. Вам почти наверняка потребуется изменить код обработки формы, если вы измените свою модель пользователя (сложная тема!) но даже в этом случае вы всё равно сможете использовать функции просмотра запасов.
 
-<div class="note">
-<p><strong>Примечание</strong>: вы не должны использовать этот код, но вполне вероятно, что вы хотите, потому что это делает вещи намного проще. Вам почти наверняка потребуется изменить код обработки формы, если вы измените свою модель пользователя (сложная тема!) но даже в этом случае вы всё равно сможете использовать функции просмотра запасов.</p>
-</div>
+> **Примечание:**В этом случае мы могли бы разумно поместить страницы аутентификации, включая URL-адреса и шаблоны, в наше приложение каталога. Однако, если бы у нас было несколько приложений, было бы лучше отделить это общее поведение входа в систему и иметь его доступным на всем сайте, так что это то, что мы показали здесь!
 
-<div class="note">
-<p><strong>Примечание: </strong>В этом случае мы могли бы разумно поместить страницы аутентификации, включая URL-адреса и шаблоны, в наше приложение каталога. Однако, если бы у нас было несколько приложений, было бы лучше отделить это общее поведение входа в систему и иметь его доступным на всем сайте, так что это то, что мы показали здесь!</p>
-</div>
+### Проектирование URLs
 
-<h3 id="Проектирование_URLs">Проектирование URLs</h3>
+Добавьте следующее в нижней части проекта urls.py файл (**locallibrary/locallibrary/urls.py**) файл:
 
-<p>Добавьте следующее в нижней части проекта urls.py файл (<strong>locallibrary/locallibrary/urls.py</strong>) файл:</p>
-
-<pre class="brush: python">#Add Django site authentication urls (for login, logout, password management)
+```python
+#Add Django site authentication urls (for login, logout, password management)
 urlpatterns += [
     path('accounts/', include('django.contrib.auth.urls')),
 ]
-</pre>
+```
 
-<p>Перейдите по <a href="http://127.0.0.1:8000/accounts/">http://127.0.0.1:8000/accounts/</a> URL (обратите внимание на косую черту!), Django покажет ошибку, что он не смог найти этот URL, и перечислить все URL, которые он пытался открыть. Из этого вы можете увидеть URL-адреса, которые будут работать, например:</p>
+Перейдите по <http://127.0.0.1:8000/accounts/> URL (обратите внимание на косую черту!), Django покажет ошибку, что он не смог найти этот URL, и перечислить все URL, которые он пытался открыть. Из этого вы можете увидеть URL-адреса, которые будут работать, например:
 
-<div class="note">
-<p>Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов. Вам не нужно реализовывать что-либо ещё - приведённое выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.</p>
-</div>
+> **Примечание:** Примечание. Использование вышеуказанного метода добавляет следующие URL-адреса с именами в квадратных скобках, которые могут использоваться для изменения сопоставлений URL-адресов. Вам не нужно реализовывать что-либо ещё - приведённое выше сопоставление URL-адресов автоматически отображает указанные ниже URL-адреса.
 
-<div class="note">
-<pre class="brush: python">accounts/ login/ [name='login']
-accounts/ logout/ [name='logout']
-accounts/ password_change/ [name='password_change']
-accounts/ password_change/done/ [name='password_change_done']
-accounts/ password_reset/ [name='password_reset']
-accounts/ password_reset/done/ [name='password_reset_done']
-accounts/ reset/&lt;uidb64&gt;/&lt;token&gt;/ [name='password_reset_confirm']
-accounts/ reset/done/ [name='password_reset_complete']</pre>
-</div>
+> **Примечание:** ```python
+> accounts/ login/ [name='login']
+> accounts/ logout/ [name='logout']
+> accounts/ password_change/ [name='password_change']
+> accounts/ password_change/done/ [name='password_change_done']
+> accounts/ password_reset/ [name='password_reset']
+> accounts/ password_reset/done/ [name='password_reset_done']
+> accounts/ reset/<uidb64>/<token>/ [name='password_reset_confirm']
+> accounts/ reset/done/ [name='password_reset_complete']
+>
+> ```
+>
+> ```
 
-<p>Теперь попробуйте перейти к URL-адресу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>). Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона. Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:</p>
+Теперь попробуйте перейти к URL-адресу входа (<http://127.0.0.1:8000/accounts/login/>). Это приведёт к сбою снова, но с ошибкой, сообщающей вам, что нам не хватает требуемого шаблона (registration / login.html) в пути поиска шаблона. Вы увидите следующие строки, перечисленные в жёлтом разделе вверху:
 
-<pre class="brush: python">Exception Type:    TemplateDoesNotExist
-Exception Value:    <strong>registration/login.html</strong></pre>
+```python
+Exception Type:    TemplateDoesNotExist
+Exception Value:    registration/login.html
+```
 
-<p>Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.</p>
+Следующий шаг - создать каталог регистрации в пути поиска, а затем добавить файл login.html.
 
-<h3 id="Каталог_шаблонов">Каталог шаблонов</h3>
+### Каталог шаблонов
 
-<p>URL-адреса (и неявные представления), которые мы только что добавили, ожидают найти связанные с ними шаблоны в каталоге / регистрации / где-то в пути поиска шаблонов.</p>
+URL-адреса (и неявные представления), которые мы только что добавили, ожидают найти связанные с ними шаблоны в каталоге / регистрации / где-то в пути поиска шаблонов.
 
-<p>Для этого сайта мы разместим наши HTML-страницы в каталоге <strong>templates / registration /</strong>. Этот каталог должен находиться в корневом каталоге проекта, то есть в том же каталоге, что и в каталоге и папках <strong>locallibrary</strong>). Создайте эти папки сейчас.</p>
+Для этого сайта мы разместим наши HTML-страницы в каталоге **templates / registration /**. Этот каталог должен находиться в корневом каталоге проекта, то есть в том же каталоге, что и в каталоге и папках **locallibrary**). Создайте эти папки сейчас.
 
-<div class="note">
-<p><strong>Примечание:</strong> ваша структура папок теперь должна выглядеть как показано внизу:<br>
- locallibrary (django project folder)<br>
-    |_catalog<br>
-    |_locallibrary<br>
-    |_templates <strong>(new)</strong><br>
-                 |_registration</p>
-</div>
+> **Примечание:** ваша структура папок теперь должна выглядеть как показано внизу:
+> locallibrary (django project folder)
+> |\_catalog
+> |\_locallibrary
+> |\_templates **(new)**
+> |\_registration
 
-<p>Чтобы сделать эти директории видимыми для загрузчика шаблонов   (т. е. помещать этот каталог в путь поиска шаблона) откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>), и обновите в секции <code>TEMPLATES</code> строку <code>'DIRS'</code> как показано.</p>
+Чтобы сделать эти директории видимыми для загрузчика шаблонов (т. е. помещать этот каталог в путь поиска шаблона) откройте настройки проекта (**/locallibrary/locallibrary/settings.py**), и обновите в секции `TEMPLATES` строку `'DIRS'` как показано.
 
-<pre class="brush: python">TEMPLATES = [
+```python
+TEMPLATES = [
     {
         ...
-<strong>        </strong><strong>'DIRS': [os.path.join(BASE_DIR, 'templates')],</strong>
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],
         'APP_DIRS': True,
         ...
-</pre>
+```
 
-<h3 id="Шаблон_аутентификации">Шаблон аутентификации</h3>
+### Шаблон аутентификации
 
-<div class="warning">
-<p><strong>Важно</strong>: Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка изменённой версией шаблонов логина демонстрации Django. Возможно, вам придётся настроить их для собственного использования!</p>
-</div>
+> **Предупреждение:** **Важно**: Шаблоны аутентификации, представленные в этой статье, являются очень простой / слегка изменённой версией шаблонов логина демонстрации Django. Возможно, вам придётся настроить их для собственного использования!
 
-<p>Создайте новый HTML файл, названный /<strong>locallibrary/templates/registration/login.html</strong>. дайте ему следующее содержание:</p>
+Создайте новый HTML файл, названный /**locallibrary/templates/registration/login.html**. дайте ему следующее содержание:
 
-<pre class="brush: html line-numbers language-html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
 
 {% if form.errors %}
-  &lt;p&gt;Your username and password didn't match. Please try again.&lt;/p&gt;
+  <p>Your username and password didn't match. Please try again.</p>
 {% endif %}
-<code class="language-html">
+
 {% if next %}
   {% if user.is_authenticated %}
-    &lt;p&gt;Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.&lt;/p&gt;
+    <p>Your account doesn't have access to this page. To proceed,
+    please login with an account that has access.</p>
   {% else %}
-    &lt;p&gt;Please login to see this page.&lt;/p&gt;
+    <p>Please login to see this page.</p>
   {% endif %}
 {% endif %}
 
-&lt;form method="post" action="{% url 'login' %}"&gt;
+<form method="post" action="{% url 'login' %}">
 {% csrf_token %}
-&lt;table&gt;
+<table>
 
-&lt;tr&gt;
-  &lt;td&gt;\{{ form.username.label_tag }}&lt;/td&gt;
-  &lt;td&gt;\{{ form.username }}&lt;/td&gt;
-&lt;/tr&gt;
+<tr>
+  <td>\{{ form.username.label_tag }}</td>
+  <td>\{{ form.username }}</td>
+</tr>
 
-&lt;tr&gt;
-  &lt;td&gt;\{{ form.password.label_tag }}&lt;/td&gt;
-  &lt;td&gt;\{{ form.password }}&lt;/td&gt;
-&lt;/tr&gt;
-&lt;/table&gt;
+<tr>
+  <td>\{{ form.password.label_tag }}</td>
+  <td>\{{ form.password }}</td>
+</tr>
+</table>
 
-&lt;input type="submit" value="login" /&gt;
-&lt;input type="hidden" name="next" value="\{{ next }}" /&gt;
-&lt;/form&gt;
+<input type="submit" value="login" />
+<input type="hidden" name="next" value="\{{ next }}" />
+</form>
 
 {# Assumes you setup the password_reset view in your URLconf #}
-&lt;p&gt;&lt;a href="{% url 'password_reset' %}"&gt;Lost password?&lt;/a&gt;&lt;/p&gt;
+<p><a href="{% url 'password_reset' %}">Lost password?</a></p>
 
-{% endblock %}</code></pre>
+{% endblock %}
+```
 
-<p id="sect1">Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента. Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии. Все, что вам нужно знать, это показ формы, в которой вы можете ввести своё имя пользователя и пароль, а если вы введёте недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.</p>
+Этот шаблон имеет сходство с тем, что мы видели раньше - он расширяет наш базовый шаблон и переопределяет блок контента. Остальная часть кода - это довольно стандартный код обработки формы, о котором мы поговорим в следующем учебном пособии. Все, что вам нужно знать, это показ формы, в которой вы можете ввести своё имя пользователя и пароль, а если вы введёте недопустимые значения, вам будет предложено ввести правильные значения, когда страница обновится.
 
-<p>Перейдите на страницу входа (<a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a>) когда вы сохраните свой шаблон, и вы должны увидеть что-то наподобие этого:</p>
+Перейдите на страницу входа (<http://127.0.0.1:8000/accounts/login/>) когда вы сохраните свой шаблон, и вы должны увидеть что-то наподобие этого:
 
-<p><img alt="Library login page v1" src="https://mdn.mozillademos.org/files/14101/library_login.png" style="border-style: solid; border-width: 1px; display: block; height: 173px; margin: 0px auto; width: 441px;"></p>
+![Library login page v1](https://mdn.mozillademos.org/files/14101/library_login.png)
 
-<p>Если ваша попытка войти в систему будет успешной,  вы будете перенаправлены на другую страницу (по умолчанию это будет <a href="http://127.0.0.1:8000/accounts/profile/">http://127.0.0.1:8000/accounts/profile/</a>). Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть. Поскольку вы ещё не определили эту страницу, вы получите ещё одну ошибку!</p>
+Если ваша попытка войти в систему будет успешной, вы будете перенаправлены на другую страницу (по умолчанию это будет <http://127.0.0.1:8000/accounts/profile/>). Проблема здесь в том, что по умолчанию Django ожидает, что после входа в систему вы захотите перейти на страницу профиля, что может быть или не быть. Поскольку вы ещё не определили эту страницу, вы получите ещё одну ошибку!
 
-<p>Откройте настройки проекта (<strong>/locallibrary/locallibrary/settings.py</strong>) и добавьте текст ниже. Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.</p>
+Откройте настройки проекта (**/locallibrary/locallibrary/settings.py**) и добавьте текст ниже. Теперь, когда вы входите в систему, вы по умолчанию должны перенаправляться на домашнюю страницу сайта.
 
-<pre class="brush: python"># Redirect to home URL after login (Default redirects to /accounts/profile/)
+```python
+# Redirect to home URL after login (Default redirects to /accounts/profile/)
 LOGIN_REDIRECT_URL = '/'
-</pre>
+```
+
+### Шаблон выхода
 
-<h3 id="Шаблон_выхода">Шаблон выхода</h3>
+Если вы перейдёте по URL-адресу выхода (<http://127.0.0.1:8000/accounts/logout/>), то увидите странное поведение - ваш пользователь наверняка выйдет из системы, но вы попадёте на страницу выхода администратора. Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведёт вас к экрану входа в систему администратора. (и это доступно только для пользователей, у которых есть разрешение `is_staff`).
 
-<p>Если вы перейдёте по URL-адресу выхода (<a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a>), то увидите странное поведение - ваш пользователь наверняка выйдет из системы, но вы попадёте на страницу выхода администратора. Это не то, что вам нужно, хотя бы потому, что ссылка для входа на этой странице приведёт вас к экрану входа в систему администратора. (и это доступно только для пользователей, у которых есть разрешение <code>is_staff</code>).<br>
- <br>
- Создайте и откройте <strong>/locallibrary/templates/registration/logged_out.html</strong>. Скопируйте текст ниже:</p>
+Создайте и откройте **/locallibrary/templates/registration/logged_out.html**. Скопируйте текст ниже:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
-&lt;p&gt;Logged out!&lt;/p&gt;
+<p>Logged out!</p>
 
-&lt;a href="{% url 'login'%}"&gt;Click here to login again.&lt;/a&gt;
-{% endblock %}</pre>
+<a href="{% url 'login'%}">Click here to login again.</a>
+{% endblock %}
+```
 
-<p>Этот шаблон очень прост. Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему. Если вы снова перейдёте на страницу выхода из системы, вы увидите эту страницу:</p>
+Этот шаблон очень прост. Он просто отображает сообщение, информирующее вас о том, что вы вышли из системы, и предоставляет ссылку, которую вы можете нажать, чтобы вернуться на экран входа в систему. Если вы снова перейдёте на страницу выхода из системы, вы увидите эту страницу:
 
-<p><img alt="Library logout page v1" src="https://mdn.mozillademos.org/files/14103/library_logout.png" style="border-style: solid; border-width: 1px; display: block; height: 169px; margin: 0px auto; width: 385px;"></p>
+![Library logout page v1](https://mdn.mozillademos.org/files/14103/library_logout.png)
 
-<h3 id="Шаблон_сброса_пароля">Шаблон сброса пароля</h3>
+### Шаблон сброса пароля
 
-<p>Система сброса пароля по умолчанию использует электронную почту, чтобы отправить пользователю ссылку на сброс. Вам необходимо создать формы, чтобы получить адрес электронной почты пользователя, отправить электронное письмо, разрешить им вводить новый пароль и отметить, когда весь процесс будет завершён.</p>
+Система сброса пароля по умолчанию использует электронную почту, чтобы отправить пользователю ссылку на сброс. Вам необходимо создать формы, чтобы получить адрес электронной почты пользователя, отправить электронное письмо, разрешить им вводить новый пароль и отметить, когда весь процесс будет завершён.
 
-<p>В качестве отправной точки можно использовать следующие шаблоны.</p>
+В качестве отправной точки можно использовать следующие шаблоны.
 
-<h4 id="Форма_сброса_пароля">Форма сброса пароля</h4>
+#### Форма сброса пароля
 
-<p>Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля). Создайте <strong>/locallibrary/templates/registration/password_reset_form.html</strong> и дайте ему следующее содержание:</p>
+Это форма, используемая для получения адреса электронной почты пользователя (для отправки пароля для сброса пароля). Создайте **/locallibrary/templates/registration/password_reset_form.html** и дайте ему следующее содержание:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 {% block content %}
 
-&lt;form action="" method="post"&gt;{% csrf_token %}
+<form action="" method="post">{% csrf_token %}
     {% if form.email.errors %} \{{ form.email.errors }} {% endif %}
-        &lt;p&gt;\{{ form.email }}&lt;/p&gt;
-    &lt;input type="submit" class="btn btn-default btn-lg" value="Reset password" /&gt;
-&lt;/form&gt;
+        <p>\{{ form.email }}</p>
+    <input type="submit" class="btn btn-default btn-lg" value="Reset password" />
+</form>
 
 {% endblock %}
-</pre>
+```
 
-<h4 id="Сброс_пароля">Сброс пароля</h4>
+#### Сброс пароля
 
-<p>Эта форма отображается после того, как ваш адрес электронной почты будет собран. Создайте <strong>/locallibrary/templates/registration/password_reset_done.html</strong>, и дайте ему следующее содержание:</p>
+Эта форма отображается после того, как ваш адрес электронной почты будет собран. Создайте **/locallibrary/templates/registration/password_reset_done.html**, и дайте ему следующее содержание:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 {% block content %}
-&lt;p&gt;We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.&lt;/p&gt;
+<p>We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.</p>
 {% endblock %}
-</pre>
+```
 
-<h4 id="Сброс_пароля_по_email">Сброс пароля по email</h4>
+#### Сброс пароля по email
 
-<p>Этот шаблон предоставляет текст электронной почты HTML, содержащий ссылку на сброс, которую мы отправим пользователям. Создайте /locallibrary/templates/registration/password_reset_email.html и дайте ему следующее содержание:</p>
+Этот шаблон предоставляет текст электронной почты HTML, содержащий ссылку на сброс, которую мы отправим пользователям. Создайте /locallibrary/templates/registration/password_reset_email.html и дайте ему следующее содержание:
 
-<pre class="brush: html">Someone asked for password reset for email \{{ email }}. Follow the link below:
+```html
+Someone asked for password reset for email \{{ email }}. Follow the link below:
 \{{ protocol}}://\{{ domain }}{% url 'password_reset_confirm' uidb64=uid token=token %}
-</pre>
+```
 
-<h4 id="Подтверждение_на_сброс_пароля">Подтверждение на сброс пароля</h4>
+#### Подтверждение на сброс пароля
 
-<p>На этой странице вы вводите новый пароль после нажатия ссылки в электронном письме с возвратом пароля. Создайте /locallibrary/templates/registration/password_reset_confirm.html и дайте ему следующее содержание:</p>
+На этой странице вы вводите новый пароль после нажатия ссылки в электронном письме с возвратом пароля. Создайте /locallibrary/templates/registration/password_reset_confirm.html и дайте ему следующее содержание:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
 
     {% if validlink %}
-        &lt;p&gt;Please enter (and confirm) your new password.&lt;/p&gt;
-        &lt;form action="" method="post"&gt;
-            <code class="language-html">{% csrf_token %}</code>
-            &lt;table&gt;
-                &lt;tr&gt;
-                    &lt;td&gt;\{{ form.new_password1.errors }}
-                        &lt;label for="id_new_password1"&gt;New password:&lt;/label&gt;&lt;/td&gt;
-                    &lt;td&gt;\{{ form.new_password1 }}&lt;/td&gt;
-                &lt;/tr&gt;
-                &lt;tr&gt;
-                    &lt;td&gt;\{{ form.new_password2.errors }}
-                        &lt;label for="id_new_password2"&gt;Confirm password:&lt;/label&gt;&lt;/td&gt;
-                    &lt;td&gt;\{{ form.new_password2 }}&lt;/td&gt;
-                &lt;/tr&gt;
-                &lt;tr&gt;
-                    &lt;td&gt;&lt;/td&gt;
-                    &lt;td&gt;&lt;input type="submit" value="Change my password" /&gt;&lt;/td&gt;
-                &lt;/tr&gt;
-            &lt;/table&gt;
-        &lt;/form&gt;
+        <p>Please enter (and confirm) your new password.</p>
+        <form action="" method="post">
+            {% csrf_token %}
+            <table>
+                <tr>
+                    <td>\{{ form.new_password1.errors }}
+                        <label for="id_new_password1">New password:</label></td>
+                    <td>\{{ form.new_password1 }}</td>
+                </tr>
+                <tr>
+                    <td>\{{ form.new_password2.errors }}
+                        <label for="id_new_password2">Confirm password:</label></td>
+                    <td>\{{ form.new_password2 }}</td>
+                </tr>
+                <tr>
+                    <td></td>
+                    <td><input type="submit" value="Change my password" /></td>
+                </tr>
+            </table>
+        </form>
     {% else %}
-        &lt;h1&gt;Password reset failed&lt;/h1&gt;
-        &lt;p&gt;The password reset link was invalid, possibly because it has already been used. Please request a new password reset.&lt;/p&gt;
+        <h1>Password reset failed</h1>
+        <p>The password reset link was invalid, possibly because it has already been used. Please request a new password reset.</p>
     {% endif %}
 
 {% endblock %}
-</pre>
+```
 
-<h4 id="Сброс_пароля_завершён">Сброс пароля завершён</h4>
+#### Сброс пароля завершён
 
-<p>Это последний шаблон сброса пароля, который отображается, чтобы уведомить вас о завершении сброса пароля. Создайте /locallibrary/templates/registration/password_reset_complete.html и дайте ему следующее содержание:</p>
+Это последний шаблон сброса пароля, который отображается, чтобы уведомить вас о завершении сброса пароля. Создайте /locallibrary/templates/registration/password_reset_complete.html и дайте ему следующее содержание:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 {% block content %}
 
-&lt;h1&gt;The password has been changed!&lt;/h1&gt;
-&lt;p&gt;&lt;a href="{% url 'login' %}"&gt;log in again?&lt;/a&gt;&lt;/p&gt;
-
-{% endblock %}</pre>
-
-<h3 id="Тестирование_новых_страниц_аутентификации">Тестирование новых страниц аутентификации</h3>
+<h1>The password has been changed!</h1>
+<p><a href="{% url 'login' %}">log in again?</a></p>
 
-<p>Теперь, когда вы добавили конфигурацию URL и создали все эти шаблоны, теперь страницы аутентификации должны работать! Вы можете протестировать новые страницы аутентификации, попытавшись войти в систему, а затем выйдите из учётной записи суперпользователя, используя эти URL-адреса:</p>
+{% endblock %}
+```
 
-<ul>
- <li><a href="http://127.0.0.1:8000/accounts/login/">http://127.0.0.1:8000/accounts/login/</a></li>
- <li><a href="http://127.0.0.1:8000/accounts/logout/">http://127.0.0.1:8000/accounts/logout/</a></li>
-</ul>
+### Тестирование новых страниц аутентификации
 
-<p>Вы сможете проверить функцию сброса пароля по ссылке на странице входа. <strong>Имейте в виду, что Django отправляет только сбросные электронные письма на адреса (пользователи), которые уже хранятся в его базе данных!</strong></p>
+Теперь, когда вы добавили конфигурацию URL и создали все эти шаблоны, теперь страницы аутентификации должны работать! Вы можете протестировать новые страницы аутентификации, попытавшись войти в систему, а затем выйдите из учётной записи суперпользователя, используя эти URL-адреса:
 
-<div class="note">
-<p><strong>Примечание</strong>: Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть <strong>ещё не будет работать.</strong> Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).</p>
+- <http://127.0.0.1:8000/accounts/login/>
+- <http://127.0.0.1:8000/accounts/logout/>
 
-<pre class="brush: python">EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
-</pre>
+Вы сможете проверить функцию сброса пароля по ссылке на странице входа. **Имейте в виду, что Django отправляет только сбросные электронные письма на адреса (пользователи), которые уже хранятся в его базе данных!**
 
-<p>Для получения дополнительной информации см. <a href="https://docs.djangoproject.com/en/2.0/topics/email/">Отправка email</a> (Django docs).</p>
-</div>
+> **Примечание:** Система сброса пароля требует, чтобы ваш сайт поддерживал электронную почту, что выходит за рамки этой статьи, поэтому эта часть **ещё не будет работать.** Чтобы разрешить тестирование, поместите следующую строку в конец файла settings.py. Это регистрирует любые письма, отправленные на консоль (чтобы вы могли скопировать ссылку на сброс пароля с консоли).
+>
+> ```python
+> EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend'
+> ```
+>
+> Для получения дополнительной информации см. [Отправка email](https://docs.djangoproject.com/en/2.0/topics/email/) (Django docs).
 
-<h2 id="Тестирование_проверки_подлинности_пользователей">Тестирование проверки подлинности пользователей</h2>
+## Тестирование проверки подлинности пользователей
 
-<p>В этом разделе мы рассмотрим, что мы можем сделать, чтобы выборочно контролировать контент, который видят пользователи, на основе того, вошли ли они в систему или нет.</p>
+В этом разделе мы рассмотрим, что мы можем сделать, чтобы выборочно контролировать контент, который видят пользователи, на основе того, вошли ли они в систему или нет.
 
-<h3 id="Тестирование_в_шаблонах">Тестирование в шаблонах</h3>
+### Тестирование в шаблонах
 
-<p>Вы можете получить информацию о текущем зарегистрированном пользователе в шаблонах с переменной шаблона \{{user}} (это добавляется в контекст шаблона по умолчанию при настройке проекта, как и в нашем скелете).</p>
+Вы можете получить информацию о текущем зарегистрированном пользователе в шаблонах с переменной шаблона \\{{user}} (это добавляется в контекст шаблона по умолчанию при настройке проекта, как и в нашем скелете).
 
-<p>Обычно вы сначала проверяете переменную шаблона \{{user.is_authenticated}}, чтобы определить, имеет ли пользователь право видеть конкретный контент. Чтобы продемонстрировать это, мы обновим нашу боковую панель, чтобы отобразить ссылку «Вход», если пользователь вышел из системы, и ссылку «Выход», если он вошёл в систему.</p>
+Обычно вы сначала проверяете переменную шаблона \\{{user.is_authenticated}}, чтобы определить, имеет ли пользователь право видеть конкретный контент. Чтобы продемонстрировать это, мы обновим нашу боковую панель, чтобы отобразить ссылку «Вход», если пользователь вышел из системы, и ссылку «Выход», если он вошёл в систему.
 
-<p>Откройте базовый шаблон (/locallibrary/catalog/templates/base_generic.html) и скопируйте следующий текст в sidebar блок непосредственно перед тегом шаблона endblock.</p>
+Откройте базовый шаблон (/locallibrary/catalog/templates/base_generic.html) и скопируйте следующий текст в sidebar блок непосредственно перед тегом шаблона endblock.
 
-<pre class="brush: python">  &lt;ul class="sidebar-nav"&gt;
+```python
+  <ul class="sidebar-nav">
 
     ...
 
-   <strong>{% if user.is_authenticated %}</strong>
-     &lt;li&gt;User: <strong>\{{ user.get_username }}</strong>&lt;/li&gt;
-     &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
-   <strong>{% else %}</strong>
-     &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
-   <strong>{% endif %} </strong>
-  &lt;/ul&gt;</pre>
+   {% if user.is_authenticated %}
+     <li>User: \{{ user.get_username }}</li>
+     <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
+   {% else %}
+     <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
+   {% endif %}
+  </ul>
+```
 
-<p>Как вы можете видеть, мы используем теги шаблона if-else-endif для условного отображения текста на основе того, является ли \{{user.is_authenticated}} истинным. Если пользователь аутентифицирован, мы знаем, что у нас есть действительный пользователь, поэтому мы вызываем \{{user.get_username}}, чтобы отобразить их имя.</p>
+Как вы можете видеть, мы используем теги шаблона if-else-endif для условного отображения текста на основе того, является ли \\{{user.is_authenticated}} истинным. Если пользователь аутентифицирован, мы знаем, что у нас есть действительный пользователь, поэтому мы вызываем \\{{user.get_username}}, чтобы отобразить их имя.
 
-<p>Мы создаём URL-адрес для входа и выхода из системы, используя тег шаблона URL-адреса и имена соответствующих конфигураций URLs. Также обратите внимание на то, как мы добавили <code>?next=\{{request.path}}</code> в конец URLs. Это означает, что следующий URL-адрес содержит адрес (URL) текущей страницы, в конце связанного URL-адреса. После того, как пользователь успешно выполнил вход в систему, представления будут использовать значение "<code>next</code>" чтобы перенаправить пользователя обратно на страницу, где они сначала нажали ссылку входа / выхода из системы.</p>
+Мы создаём URL-адрес для входа и выхода из системы, используя тег шаблона URL-адреса и имена соответствующих конфигураций URLs. Также обратите внимание на то, как мы добавили `?next=\{{request.path}}` в конец URLs. Это означает, что следующий URL-адрес содержит адрес (URL) текущей страницы, в конце связанного URL-адреса. После того, как пользователь успешно выполнил вход в систему, представления будут использовать значение "`next`" чтобы перенаправить пользователя обратно на страницу, где они сначала нажали ссылку входа / выхода из системы.
 
-<div class="note">
-<p><strong>Примечание</strong>: Попробуйте! Если вы находитесь на главной странице и вы нажимаете «Вход / Выход» на боковой панели, то после завершения операции вы должны вернуться на ту же страницу.</p>
-</div>
+> **Примечание:** Попробуйте! Если вы находитесь на главной странице и вы нажимаете «Вход / Выход» на боковой панели, то после завершения операции вы должны вернуться на ту же страницу.
 
-<h3 id="Тестирование_в_представлениях">Тестирование в представлениях</h3>
+### Тестирование в представлениях
 
-<p>Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение <code>login_required</code> декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (<code>settings.LOGIN_URL</code>), передав текущий абсолютный путь в качестве next параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.</p>
+Если вы используете функциональные представления, самым простым способом ограничить доступ к вашим функциям является применение `login_required` декоратор к вашей функции просмотра, как показано ниже. Если пользователь вошёл в систему, ваш код просмотра будет выполняться как обычно. Если пользователь не вошёл в систему, это перенаправит URL-адрес входа, определённый в настройках проекта. (`settings.LOGIN_URL`), передав текущий абсолютный путь в качестве next параметра URL. Если пользователю удастся войти в систему, они будут возвращены на эту страницу, но на этот раз аутентифицированы.
 
-<pre class="brush: python">from django.contrib.auth.decorators import login_required
+```python
+from django.contrib.auth.decorators import login_required
 
 @login_required
 def my_view(request):
-    ...</pre>
+    ...
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Вы можете сделать то же самое вручную, путём тестирования <code>request.user.is_authenticated</code>, но декоратор намного удобнее!</p>
-</div>
+> **Примечание:** Вы можете сделать то же самое вручную, путём тестирования `request.user.is_authenticated`, но декоратор намного удобнее!
 
-<p>Аналогичным образом, самый простой способ ограничить доступ к зарегистрированным пользователям в ваших представлениях на основе классов - это производные от <code>LoginRequiredMixin</code>. Вы должны объявить этот mixin сначала в списке суперкласса, перед классом основного представления.</p>
+Аналогичным образом, самый простой способ ограничить доступ к зарегистрированным пользователям в ваших представлениях на основе классов - это производные от `LoginRequiredMixin`. Вы должны объявить этот mixin сначала в списке суперкласса, перед классом основного представления.
 
-<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin
+```python
+from django.contrib.auth.mixins import LoginRequiredMixin
 
 class MyView(LoginRequiredMixin, View):
-    ...</pre>
+    ...
+```
 
-<p>Это имеет такое же поведение при переадресации, что и  <code>login_required</code> декоратор. Вы также можете указать альтернативное местоположение для перенаправления пользователя, если он не аутентифицирован (<code>login_url</code>), и имя параметра URL вместо "<code>next</code>" , чтобы вставить текущий абсолютный путь (<code>redirect_field_name</code>).</p>
+Это имеет такое же поведение при переадресации, что и `login_required` декоратор. Вы также можете указать альтернативное местоположение для перенаправления пользователя, если он не аутентифицирован (`login_url`), и имя параметра URL вместо "`next`" , чтобы вставить текущий абсолютный путь (`redirect_field_name`).
 
-<pre class="brush: python">class MyView(LoginRequiredMixin, View):
+```python
+class MyView(LoginRequiredMixin, View):
     login_url = '/login/'
     redirect_field_name = 'redirect_to'
-</pre>
+```
 
-<p>Для получения дополнительной информации ознакомьтесь с  <a href="https://docs.djangoproject.com/en/1.10/topics/auth/default/#limiting-access-to-logged-in-users">Django docs here</a>.</p>
+Для получения дополнительной информации ознакомьтесь с [Django docs here](https://docs.djangoproject.com/en/1.10/topics/auth/default/#limiting-access-to-logged-in-users).
 
-<h2 id="Пример_-_перечисление_книг_текущего_пользователя">Пример - перечисление книг текущего пользователя</h2>
+## Пример - перечисление книг текущего пользователя
 
-<p>Теперь, когда мы знаем, как ограничить страницу определённому пользователю, создайте представление о книгах, которые заимствовал текущий пользователь.</p>
+Теперь, когда мы знаем, как ограничить страницу определённому пользователю, создайте представление о книгах, которые заимствовал текущий пользователь.
 
-<p>К сожалению, у нас пока нет возможности пользователям использовать книги! Поэтому, прежде чем мы сможем создать список книг, мы сначала расширим <code>BookInstance</code> модель для поддержки концепции заимствования и использования приложения Django Admin для заимствования ряда книг нашему тестовому пользователю.</p>
+К сожалению, у нас пока нет возможности пользователям использовать книги! Поэтому, прежде чем мы сможем создать список книг, мы сначала расширим `BookInstance` модель для поддержки концепции заимствования и использования приложения Django Admin для заимствования ряда книг нашему тестовому пользователю.
 
-<h3 id="Модели">Модели</h3>
+### Модели
 
-<p>Прежде всего, мы должны предоставить пользователям возможность кредита на <code>BookInstance</code> (у нас уже есть <code>status</code> и <code>due_back</code> дата, но у нас пока нет связи между этой моделью и пользователем. Мы создадим его с помощью поля <code>ForeignKey</code> (один ко многим). Нам также нужен простой механизм для проверки того, просрочена ли заёмная книга.</p>
+Прежде всего, мы должны предоставить пользователям возможность кредита на `BookInstance` (у нас уже есть `status` и `due_back` дата, но у нас пока нет связи между этой моделью и пользователем. Мы создадим его с помощью поля `ForeignKey` (один ко многим). Нам также нужен простой механизм для проверки того, просрочена ли заёмная книга.
 
-<p>Откройте <strong>catalog/models.py</strong>, и импортируйте модель <code>User</code> из <code>django.contrib.auth.models</code> (добавьте это чуть ниже предыдущей строки импорта в верхней части файла, так <code>User</code> доступен для последующего кода, что позволяет использовать его):</p>
+Откройте **catalog/models.py**, и импортируйте модель `User` из `django.contrib.auth.models` (добавьте это чуть ниже предыдущей строки импорта в верхней части файла, так `User` доступен для последующего кода, что позволяет использовать его):
 
-<pre class="brush: python">from django.contrib.auth.models import User
-</pre>
+```python
+from django.contrib.auth.models import User
+```
 
-<p>Затем добавьте поле <code>borrower</code> в модель <code>BookInstance</code>:</p>
+Затем добавьте поле `borrower` в модель `BookInstance`:
 
-<pre class="brush: python">borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
-</pre>
+```python
+borrower = models.ForeignKey(User, on_delete=models.SET_NULL, null=True, blank=True)
+```
 
-<p>Пока мы здесь, давайте добавим свойство, которое мы можем вызвать из наших шаблонов, чтобы указать, просрочен ли конкретный экземпляр книги. Хотя мы могли бы рассчитать это в самом шаблоне, использование свойства, как показано ниже, будет намного более эффективным. Добавьте это где-нибудь в верхней части файла:</p>
+Пока мы здесь, давайте добавим свойство, которое мы можем вызвать из наших шаблонов, чтобы указать, просрочен ли конкретный экземпляр книги. Хотя мы могли бы рассчитать это в самом шаблоне, использование свойства, как показано ниже, будет намного более эффективным. Добавьте это где-нибудь в верхней части файла:
 
-<pre class="syntaxbox">from datetime import date</pre>
+```
+from datetime import date
+```
 
-<p>Теперь добавьте следующее определение свойства внутри класса BookInstance:</p>
+Теперь добавьте следующее определение свойства внутри класса BookInstance:
 
-<pre class="brush: python">@property
+```python
+@property
 def is_overdue(self):
-    if self.due_back and date.today() &gt; self.due_back:
+    if self.due_back and date.today() > self.due_back:
         return True
-    return False</pre>
+    return False
+```
 
-<div class="note">
-<p><strong>Примечание.</strong> Сначала мы проверим, является ли <code>due_back</code> пустым, прежде чем проводить сравнение. Пустое поле <code>due_back</code> заставило Django выкидывать ошибку, а не показывать страницу: пустые значения не сопоставимы. Это не то, что мы хотели бы, чтобы наши пользователи испытывали!</p>
-</div>
+> **Примечание:** **Примечание.** Сначала мы проверим, является ли `due_back` пустым, прежде чем проводить сравнение. Пустое поле `due_back` заставило Django выкидывать ошибку, а не показывать страницу: пустые значения не сопоставимы. Это не то, что мы хотели бы, чтобы наши пользователи испытывали!
 
-<p>Теперь, когда мы обновили наши модели, нам нужно будет внести новые изменения в проект, а затем применить эти миграции:</p>
+Теперь, когда мы обновили наши модели, нам нужно будет внести новые изменения в проект, а затем применить эти миграции:
 
-<pre class="brush: bash">python3 manage.py makemigrations
+```bash
+python3 manage.py makemigrations
 python3 manage.py migrate
-</pre>
+```
 
-<h3 id="Admin">Admin</h3>
+### Admin
 
-<p>Теперь откройте каталог <strong>catalog/admin.py</strong>, и добавьте поле <code>borrower</code> в класс <code>BookInstanceAdmin</code> , как в <code>list_display</code> , так и в полях <code>fieldsets</code> , как показано ниже. Это сделает поле видимым в разделе Admin, так что мы можем при необходимости назначить <code>User</code> в <code>BookInstance</code>.</p>
+Теперь откройте каталог **catalog/admin.py**, и добавьте поле `borrower` в класс `BookInstanceAdmin` , как в `list_display` , так и в полях `fieldsets` , как показано ниже. Это сделает поле видимым в разделе Admin, так что мы можем при необходимости назначить `User` в `BookInstance`.
 
-<pre class="brush: python">@admin.register(BookInstance)
+```python
+@admin.register(BookInstance)
 class BookInstanceAdmin(admin.ModelAdmin):
-    list_display = ('book', 'status'<strong>, 'borrower'</strong>, 'due_back', 'id')
+    list_display = ('book', 'status', 'borrower', 'due_back', 'id')
     list_filter = ('status', 'due_back')
 
     fieldsets = (
@@ -507,25 +501,25 @@ class BookInstanceAdmin(admin.ModelAdmin):
             'fields': ('book','imprint', 'id')
         }),
         ('Availability', {
-            'fields': ('status', 'due_back'<strong>,'borrower'</strong>)
+            'fields': ('status', 'due_back','borrower')
         }),
-    )</pre>
+    )
+```
 
-<h3 id="Займите_несколько_книг">Займите несколько книг</h3>
+### Займите несколько книг
 
-<p>Теперь, когда возможно кредитовать книги конкретному пользователю, зайдите и заработайте на нескольких записей в <code>BookInstance</code>. Установите <code>borrowed</code> поле вашему тестовому пользователю, сделайте <code>status</code> «В займе» и установите сроки оплаты как в будущем, так и в прошлом.</p>
+Теперь, когда возможно кредитовать книги конкретному пользователю, зайдите и заработайте на нескольких записей в `BookInstance`. Установите `borrowed` поле вашему тестовому пользователю, сделайте `status` «В займе» и установите сроки оплаты как в будущем, так и в прошлом.
 
-<div class="note">
-<p><strong>Примечание:</strong> Мы не будем описывать процесс, так как вы уже знаете, как использовать Admin сайт!</p>
-</div>
+> **Примечание:** Мы не будем описывать процесс, так как вы уже знаете, как использовать Admin сайт!
 
-<h3 id="Займ_в_представлении">Займ в представлении</h3>
+### Займ в представлении
 
-<p>Теперь мы добавим представление для получения списка всех книг, которые были предоставлены текущему пользователю. Мы будем использовать один и тот же общий класс, с которым мы знакомы, но на этот раз мы также будем импортировать и выводить из  <code>LoginRequiredMixin</code>, так что только вошедший пользователь сможет вызвать это представление. Мы также решили объявить  <code>template_name</code>, вместо того, чтобы использовать значение по умолчанию, потому что у нас может быть несколько разных списков записей BookInstance, с разными представлениями и шаблонами.</p>
+Теперь мы добавим представление для получения списка всех книг, которые были предоставлены текущему пользователю. Мы будем использовать один и тот же общий класс, с которым мы знакомы, но на этот раз мы также будем импортировать и выводить из `LoginRequiredMixin`, так что только вошедший пользователь сможет вызвать это представление. Мы также решили объявить `template_name`, вместо того, чтобы использовать значение по умолчанию, потому что у нас может быть несколько разных списков записей BookInstance, с разными представлениями и шаблонами.
 
-<p>Добавьте следующее в catalog/views.py:</p>
+Добавьте следующее в catalog/views.py:
 
-<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin
+```python
+from django.contrib.auth.mixins import LoginRequiredMixin
 
 class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
     """
@@ -536,154 +530,160 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
     paginate_by = 10
 
     def get_queryset(self):
-        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+```
 
-<p>Чтобы ограничить наш запрос только объектами BookInstance для текущего пользователя, мы повторно реализуем <code>get_queryset()</code>, как показано выше. Обратите внимание, что "o" это сохранённый код для "on loan" и мы сортируем по дате <code>due_back</code>, чтобы сначала отображались самые старые элементы.</p>
+Чтобы ограничить наш запрос только объектами BookInstance для текущего пользователя, мы повторно реализуем `get_queryset()`, как показано выше. Обратите внимание, что "o" это сохранённый код для "on loan" и мы сортируем по дате `due_back`, чтобы сначала отображались самые старые элементы.
 
-<h3 id="URL-адрес_для_заёмных_книг">URL-адрес для заёмных книг</h3>
+### URL-адрес для заёмных книг
 
-<p>Теперь откройте <strong>/catalog/urls.py</strong> и добавьте <code>url()</code> , указывая на приведённое выше представление (вы можете просто скопировать текст ниже в конец файла).</p>
+Теперь откройте **/catalog/urls.py** и добавьте `url()` , указывая на приведённое выше представление (вы можете просто скопировать текст ниже в конец файла).
 
-<pre class="brush: python">urlpatterns += [
+```python
+urlpatterns += [
     url(r'^mybooks/$', views.LoanedBooksByUserListView.as_view(), name='my-borrowed'),
-]</pre>
+]
+```
 
-<h3 id="Шаблон_для_заёмных_книг">Шаблон для заёмных книг</h3>
+### Шаблон для заёмных книг
 
-<p>Теперь все, что нам нужно сделать для этой страницы, - это добавить шаблон. Сначала создайте файл шаблона <strong>/catalog/templates/catalog/bookinstance_list_borrowed_user.html</strong> и дайте ему следующее содержание:</p>
+Теперь все, что нам нужно сделать для этой страницы, - это добавить шаблон. Сначала создайте файл шаблона **/catalog/templates/catalog/bookinstance_list_borrowed_user.html** и дайте ему следующее содержание:
 
-<pre class="brush: python">{% extends "base_generic.html" %}
+```python
+{% extends "base_generic.html" %}
 
 {% block content %}
-    &lt;h1&gt;Borrowed books&lt;/h1&gt;
+    <h1>Borrowed books</h1>
 
     {% if bookinstance_list %}
-    &lt;ul&gt;
+    <ul>
 
       {% for bookinst in bookinstance_list %}
-      &lt;li class="{% if bookinst.is_overdue %}text-danger{% endif %}"&gt;
-        &lt;a href="{% url 'book-detail' bookinst.book.pk %}"&gt;\{{bookinst.book.title}}&lt;/a&gt; (\{{ bookinst.due_back }})
-      &lt;/li&gt;
+      <li class="{% if bookinst.is_overdue %}text-danger{% endif %}">
+        <a href="{% url 'book-detail' bookinst.book.pk %}">\{{bookinst.book.title}}</a> (\{{ bookinst.due_back }})
+      </li>
       {% endfor %}
-    &lt;/ul&gt;
+    </ul>
 
     {% else %}
-      &lt;p&gt;There are no books borrowed.&lt;/p&gt;
+      <p>There are no books borrowed.</p>
     {% endif %}
-{% endblock %}</pre>
+{% endblock %}
+```
 
-<p>Этот шаблон очень похож на тот, который мы создали ранее для объектов <code>Book</code> и <code>Author</code>. Единственное, что «новое» здесь, это то, что мы проверяем метод, который мы добавили в модель <code>(bookinst.is_overdue</code>) с целью использовать его для изменения цвета просроченных предметов.</p>
+Этот шаблон очень похож на тот, который мы создали ранее для объектов `Book` и `Author`. Единственное, что «новое» здесь, это то, что мы проверяем метод, который мы добавили в модель `(bookinst.is_overdue`) с целью использовать его для изменения цвета просроченных предметов.
 
-<p>Когда сервер разработки запущен, вы должны теперь иметь возможность просматривать список для зарегистрированного пользователя в своём браузере по адресу  <a href="http://127.0.0.1:8000/catalog/mybooks/">http://127.0.0.1:8000/catalog/mybooks/</a>. Попробуйте это, когда ваш пользователь войдёт в систему и выйдет из системы (во втором случае вы должны быть перенаправлены на страницу входа в систему).</p>
+Когда сервер разработки запущен, вы должны теперь иметь возможность просматривать список для зарегистрированного пользователя в своём браузере по адресу <http://127.0.0.1:8000/catalog/mybooks/>. Попробуйте это, когда ваш пользователь войдёт в систему и выйдет из системы (во втором случае вы должны быть перенаправлены на страницу входа в систему).
 
-<h3 id="Добавить_список_на_боковую_панель">Добавить список на боковую панель</h3>
+### Добавить список на боковую панель
 
-<p>Последний шаг - добавить ссылку на эту новую страницу в sidebar. Мы поместим это в тот же раздел, где мы покажем другую информацию для зарегистрированного пользователя.</p>
+Последний шаг - добавить ссылку на эту новую страницу в sidebar. Мы поместим это в тот же раздел, где мы покажем другую информацию для зарегистрированного пользователя.
 
-<p>Откройте базовый шаблон (<strong>/locallibrary/catalog/templates/base_generic.html</strong>) и добавьте выделенную строку из sidebar, как показано на рисунке.</p>
+Откройте базовый шаблон (**/locallibrary/catalog/templates/base_generic.html**) и добавьте выделенную строку из sidebar, как показано на рисунке.
 
-<pre class="brush: python"> &lt;ul class="sidebar-nav"&gt;
+```python
+ <ul class="sidebar-nav">
    {% if user.is_authenticated %}
-   &lt;li&gt;User: \{{ user.get_username }}&lt;/li&gt;
-<strong>   &lt;li&gt;&lt;a href="{% url 'my-borrowed' %}"&gt;My Borrowed&lt;/a&gt;&lt;/li&gt;</strong>
-   &lt;li&gt;&lt;a href="{% url 'logout'%}?next=\{{request.path}}"&gt;Logout&lt;/a&gt;&lt;/li&gt;
+   <li>User: \{{ user.get_username }}</li>
+   <li><a href="{% url 'my-borrowed' %}">My Borrowed</a></li>
+   <li><a href="{% url 'logout'%}?next=\{{request.path}}">Logout</a></li>
    {% else %}
-   &lt;li&gt;&lt;a href="{% url 'login'%}?next=\{{request.path}}"&gt;Login&lt;/a&gt;&lt;/li&gt;
+   <li><a href="{% url 'login'%}?next=\{{request.path}}">Login</a></li>
    {% endif %}
- &lt;/ul&gt;
-</pre>
+ </ul>
+```
 
-<h3 id="На_что_это_похоже">На что это похоже?</h3>
+### На что это похоже?
 
-<p>Когда любой пользователь войдёт в систему, он будет видеть ссылку «Мной позаимствовано (<em>My Borrowed)</em>» в боковой колонке, и список книг, показанных ниже (первая книга не имеет установленной даты, что является ошибкой, которую мы надеемся исправить в более позднем уроке!).</p>
+Когда любой пользователь войдёт в систему, он будет видеть ссылку «Мной позаимствовано (_My Borrowed)_» в боковой колонке, и список книг, показанных ниже (первая книга не имеет установленной даты, что является ошибкой, которую мы надеемся исправить в более позднем уроке!).
 
-<p><img alt="Library - borrowed books by user" src="https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png" style="border-style: solid; border-width: 1px; display: block; height: 215px; margin: 0px auto; width: 530px;"></p>
+![Library - borrowed books by user](https://mdn.mozillademos.org/files/14105/library_borrowed_by_user.png)
 
-<h2 id="Права_доступа">Права доступа</h2>
+## Права доступа
 
-<p>Права доступа связаны с моделями и определяют операции, которые могут выполняться на экземпляре модели самим пользователем, у которого есть разрешение. По умолчанию Django автоматически даёт <em>добавить</em>, <em>изменить</em>, и <em>удалить</em> разрешения у всех моделей, которые позволяют пользователям с правом доступа выполнять связанные действия через администратора сайта. Вы можете определить свои собственные разрешения для моделей и предоставить их конкретным пользователям. Вы также можете изменить разрешения, связанные с разными экземплярами одной и той же модели. Тестирование разрешений в представлениях и шаблонах очень похоже на тестирование по статусу аутентификации (фактически, тестирование прав доступа также проверяет аутентификацию).</p>
+Права доступа связаны с моделями и определяют операции, которые могут выполняться на экземпляре модели самим пользователем, у которого есть разрешение. По умолчанию Django автоматически даёт _добавить_, _изменить_, и _удалить_ разрешения у всех моделей, которые позволяют пользователям с правом доступа выполнять связанные действия через администратора сайта. Вы можете определить свои собственные разрешения для моделей и предоставить их конкретным пользователям. Вы также можете изменить разрешения, связанные с разными экземплярами одной и той же модели. Тестирование разрешений в представлениях и шаблонах очень похоже на тестирование по статусу аутентификации (фактически, тестирование прав доступа также проверяет аутентификацию).
 
-<h3 id="Модели_2">Модели</h3>
+### Модели
 
-<p>Определение разрешений выполняется в разделе моделей "<code>class Meta</code>" , используется <code>permissions</code> поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причём каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:</p>
+Определение разрешений выполняется в разделе моделей "`class Meta`" , используется `permissions` поле. Вы можете указать столько разрешений, сколько необходимо в кортеже, причём каждое разрешение определяется во вложенном кортеже, содержащем имя разрешения и отображаемое значение разрешения. Например, мы можем определить разрешение, позволяющее пользователю отметить, что книга была возвращена, как показано здесь:
 
-<pre class="brush: python">class BookInstance(models.Model):
+```python
+class BookInstance(models.Model):
     ...
     class Meta:
         ...
-<strong>        permissions = (("can_mark_returned", "Set book as returned"),)  </strong> </pre>
+        permissions = (("can_mark_returned", "Set book as returned"),)
+```
 
-<p>Затем мы могли бы назначить разрешение группе «Библиотекарь» (Librarian) на сайте администратора.</p>
+Затем мы могли бы назначить разрешение группе «Библиотекарь» (Librarian) на сайте администратора.
 
-<p>Откройте <strong>catalog/models.py</strong>, и добавьте разрешение, как показано выше. Вам нужно будет повторно выполнить миграцию (вызвав <code>python3 manage.py makemigrations</code> и <code>python3 manage.py migrate</code>) для надлежащего обновления базы данных.</p>
+Откройте **catalog/models.py**, и добавьте разрешение, как показано выше. Вам нужно будет повторно выполнить миграцию (вызвав `python3 manage.py makemigrations` и `python3 manage.py migrate`) для надлежащего обновления базы данных.
 
-<h3 id="Шаблоны">Шаблоны</h3>
+### Шаблоны
 
-<p>Разрешения текущего пользователя хранятся в переменной шаблона, называемой  <code>\{{ perms }}</code>. Вы можете проверить, имеет ли текущий пользователь определённое разрешение, используя конкретное имя переменной в соответствующем приложении «Django» - например, <code>\{{ perms.catalog.can_mark_returned }}</code> будет <code>True</code> если у пользователя есть это разрешение, а <code>False</code> - в противном случае. Обычно мы проверяем разрешение с использованием шаблона <code>{% if %}</code>, как показано в:</p>
+Разрешения текущего пользователя хранятся в переменной шаблона, называемой `\{{ perms }}`. Вы можете проверить, имеет ли текущий пользователь определённое разрешение, используя конкретное имя переменной в соответствующем приложении «Django» - например, `\{{ perms.catalog.can_mark_returned }}` будет `True` если у пользователя есть это разрешение, а `False` - в противном случае. Обычно мы проверяем разрешение с использованием шаблона `{% if %}`, как показано в:
 
-<pre class="brush: python">{% if perms.catalog.<code>can_mark_returned</code> %}
-    &lt;!-- We can mark a BookInstance as returned. --&gt;
-    &lt;!-- Perhaps add code to link to a "book return" view here. --&gt;
+```python
+{% if perms.catalog.can_mark_returned %}
+    <!-- We can mark a BookInstance as returned. -->
+    <!-- Perhaps add code to link to a "book return" view here. -->
 {% endif %}
-</pre>
+```
 
-<h3 id="Представления">Представления</h3>
+### Представления
 
-<p>Разрешения можно проверить в представлении функции, используя  <code>permission_required</code> декоратор или в представлении на основе классов, используя <code>PermissionRequiredMixin</code>. шаблон и поведение такие же, как для аутентификации входа в систему, хотя, конечно, вы можете разумно добавить несколько разрешений.</p>
+Разрешения можно проверить в представлении функции, используя `permission_required` декоратор или в представлении на основе классов, используя `PermissionRequiredMixin`. шаблон и поведение такие же, как для аутентификации входа в систему, хотя, конечно, вы можете разумно добавить несколько разрешений.
 
-<p>Функция в представлении с декоратором:</p>
+Функция в представлении с декоратором:
 
-<pre class="brush: python">from django.contrib.auth.decorators import permission_required
+```python
+from django.contrib.auth.decorators import permission_required
 
-@permission_required('catalog.<code>can_mark_returned</code>')
-@permission_required('catalog.<code>can_edit</code>')
+@permission_required('catalog.can_mark_returned')
+@permission_required('catalog.can_edit')
 def my_view(request):
-    ...</pre>
+    ...
+```
 
-<p>Требуется разрешение mixin для представлений на основе классов.</p>
+Требуется разрешение mixin для представлений на основе классов.
 
-<pre class="brush: python">from django.contrib.auth.mixins import PermissionRequiredMixin
+```python
+from django.contrib.auth.mixins import PermissionRequiredMixin
 
 class MyView(PermissionRequiredMixin, View):
-    permission_required = 'catalog.<code>can_mark_returned</code>'
+    permission_required = 'catalog.can_mark_returned'
     # Or multiple permissions
-    permission_required = ('catalog.<code>can_mark_returned</code>', 'catalog.can_edit')
+    permission_required = ('catalog.can_mark_returned', 'catalog.can_edit')
     # Note that 'catalog.can_edit' is just an example
-    # the catalog application doesn't have such permission!</pre>
-
-<h3 id="Пример">Пример</h3>
+    # the catalog application doesn't have such permission!
+```
 
-<p>Мы не будем обновлять LocalLibrary здесь; возможно, в следующем уроке!</p>
+### Пример
 
-<h2 id="Испытайте_себя">Испытайте себя</h2>
+Мы не будем обновлять LocalLibrary здесь; возможно, в следующем уроке!
 
-<p> Ранее в этой статье мы показали вам, как создать страницу для текущего пользователя, в которой перечислены книги, которые они заимствовали. Теперь задача состоит в том, чтобы создать аналогичную страницу, которая видна только для библиотекарей, которая отображает  <em>все</em> книги, которые были заимствованы, и которая показывает имя каждого заёмщика.</p>
+## Испытайте себя
 
-<p> Вы должны следовать той же схеме, что и для другого представления. Главное отличие состоит в том, что вам нужно ограничить представление только библиотекарями. Вы можете сделать это на основе того, является ли пользователь сотрудником (декоратор функции:  <code>staff_member_required</code>, переменная шаблона: <code>user.is_staff</code>) но мы рекомендуем вам вместо этого использовать  <code>can_mark_returned</code> разрешения и <code>PermissionRequiredMixin</code>, как описано в предыдущем разделе.</p>
+Ранее в этой статье мы показали вам, как создать страницу для текущего пользователя, в которой перечислены книги, которые они заимствовали. Теперь задача состоит в том, чтобы создать аналогичную страницу, которая видна только для библиотекарей, которая отображает _все_ книги, которые были заимствованы, и которая показывает имя каждого заёмщика.
 
-<div class="warning">
-<p><strong>Важно</strong>: Не забудьте использовать вашего суперпользователя для тестирования на основе разрешений (проверки разрешений всегда возвращают true для суперпользователей, даже если разрешение ещё не определено!). Вместо этого создайте пользователя-библиотекаря и добавьте необходимые возможности.</p>
-</div>
+Вы должны следовать той же схеме, что и для другого представления. Главное отличие состоит в том, что вам нужно ограничить представление только библиотекарями. Вы можете сделать это на основе того, является ли пользователь сотрудником (декоратор функции: `staff_member_required`, переменная шаблона: `user.is_staff`) но мы рекомендуем вам вместо этого использовать `can_mark_returned` разрешения и `PermissionRequiredMixin`, как описано в предыдущем разделе.
 
-<p> Когда вы закончите, ваша страница должна выглядеть примерно, как на скриншоте ниже.</p>
+> **Предупреждение:** **Важно**: Не забудьте использовать вашего суперпользователя для тестирования на основе разрешений (проверки разрешений всегда возвращают true для суперпользователей, даже если разрешение ещё не определено!). Вместо этого создайте пользователя-библиотекаря и добавьте необходимые возможности.
 
-<p><img alt="All borrowed books, restricted to librarian" src="https://mdn.mozillademos.org/files/14115/library_borrowed_all.png" style="border-style: solid; border-width: 1px; display: block; height: 283px; margin: 0px auto; width: 500px;"></p>
+Когда вы закончите, ваша страница должна выглядеть примерно, как на скриншоте ниже.
 
-<ul>
-</ul>
+![All borrowed books, restricted to librarian](https://mdn.mozillademos.org/files/14115/library_borrowed_all.png)
 
-<h2 id="Подводим_итоги">Подводим итоги</h2>
+## Подводим итоги
 
-<p> Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заёмные книги с их читателями. На данный момент мы все ещё просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.</p>
+Отличная работа - теперь вы создали веб-сайт, на котором участники библиотеки могут входить в систему и просматривать собственный контент, и библиотекари (с правом доступа) могут просматривать все заёмные книги с их читателями. На данный момент мы все ещё просто просматриваем контент, но те же принципы и методы используются, когда вы хотите начать изменять и добавлять данные.
 
-<p> В следующей статье мы рассмотрим, как вы можете использовать формы Django для сбора пользовательского ввода, а затем начнём изменять некоторые из наших сохранённых данных.</p>
+В следующей статье мы рассмотрим, как вы можете использовать формы Django для сбора пользовательского ввода, а затем начнём изменять некоторые из наших сохранённых данных.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/">User authentication in Django</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/auth/default//">Using the (default) Django authentication system</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views">Introduction to class-based views &gt; Decorating class-based views</a> (Django docs)</li>
-</ul>
+- [User authentication in Django](https://docs.djangoproject.com/en/1.10/topics/auth/) (Django docs)
+- [Using the (default) Django authentication system](https://docs.djangoproject.com/en/1.10/topics/auth/default//) (Django docs)
+- [Introduction to class-based views > Decorating class-based views](https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/#decorating-class-based-views) (Django docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Sessions", "Learn/Server-side/Django/Forms", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/deployment/index.md b/files/ru/learn/server-side/django/deployment/index.md
index 4b9d57b2b04900..e8b4d68222b2e8 100644
--- a/files/ru/learn/server-side/django/deployment/index.md
+++ b/files/ru/learn/server-side/django/deployment/index.md
@@ -9,383 +9,356 @@ tags:
 translation_of: Learn/Server-side/Django/Deployment
 original_slug: Learn/Server-side/Django/Разворачивание
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
+Теперь, когда вы создали (и протестировали) свой шикарный сайт [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу и посетителям библиотеки. Данная статья даёт общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.
 
-<p class="summary">Теперь, когда вы создали (и протестировали) свой шикарный сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, у вас скорее всего, есть желание разместить его на публичном веб-сервере, чтобы он стал доступен через интернет персоналу  и посетителям библиотеки. Данная статья даёт общее представление о том, каким образом подойти к поиску хостинга для размещения сайта, а также, что нужно сделать чтобы подготовить свой сайт к публикации.</p>
+| Требования: | Завершить изучение всех предыдущих частей руководства, включая [Django Руководство часть 10: Тестирование веб-приложений в Django](/ru/docs/Learn/Server-side/Django/Testing). |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:       | Изучить, где и как вы можете развернуть приложение Django для публичного доступа.                                                                                              |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Завершить изучение всех предыдущих частей руководства, включая <a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Руководство часть 10:  Тестирование веб-приложений в Django</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить, где и как вы можете развернуть приложение Django для публичного доступа.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Даже когда разработка вашего сайта завершена (или "достаточно" завершена для начала публичного тестирования), то для публичного доступа вам надо его где-то разместить.
 
-<p>Даже когда разработка вашего сайта завершена (или "достаточно" завершена для начала публичного тестирования), то для публичного доступа вам надо его где-то разместить.</p>
+До сего момента вы работали в каком-то рабочем окружении - чтобы получать отладочную и другую частную информацию, вы использовали веб-сервер Django в локальной сети при этом запускали сайт с (небезопасными) настройками разработки. Перед тем как разместить сайт публично, вы должны сделать следующее:
 
-<p>До сего момента вы работали в каком-то рабочем окружении - чтобы получать отладочную и другую частную информацию, вы использовали веб-сервер Django в локальной сети при этом запускали сайт с (небезопасными) настройками разработки. Перед тем как разместить сайт публично, вы должны сделать следующее:</p>
+- Сделать несколько изменений в настройках проекта.
+- Выбрать/Настроить окружение для хостинга приложения Django.
+- Выбрать/Настроить окружение для размещения статических файлов.
+- В целях обслуживания сайта настроить инфраструктуру для его развёртывания.
 
-<ul>
- <li>Сделать несколько изменений в настройках проекта.</li>
- <li>Выбрать/Настроить окружение для хостинга приложения Django.</li>
- <li>Выбрать/Настроить окружение для размещения статических файлов.</li>
- <li>В целях обслуживания сайта настроить инфраструктуру для его развёртывания.</li>
-</ul>
+Данное руководство предоставляет небольшой обзор выбора хостинга, приготовления сайта к публичному размещению, а также практический пример установки сайта LocalLibrary на облачный сервис [Heroku](https://www.heroku.com/).
 
-<p>Данное руководство предоставляет небольшой обзор выбора хостинга, приготовления сайта к публичному размещению, а также практический пример установки сайта LocalLibrary на облачный сервис <a href="https://www.heroku.com/">Heroku</a>.</p>
+## Что такое окружение развёртывания?
 
-<h2 id="Что_такое_окружение_развёртывания">Что такое окружение развёртывания?</h2>
+Окружение развёртывания - это среда, которое предоставляет сервер, на котором вы будете размещать свой веб-сайт для публичного запуска и доступа. Данное окружение включает в себя:
 
-<p>Окружение развёртывания - это среда, которое предоставляет сервер, на котором вы будете размещать свой веб-сайт для публичного запуска и доступа. Данное окружение включает в себя:</p>
+- Железо на котором будет запускаться сайт.
+- Операционную систему (Linux, Windows).
+- Языки программирования времени выполнения (скриптовые) и библиотеки, которые использует ваш сайт.
+- Веб-сервер, используемый для обслуживания страниц и другого контента (Nginx, Apache).
+- Сервер приложений, который передаёт "динамические" запросы между сайтом Django и веб-сервером.
+- Базу данных, от которой зависит ваш сайт.
 
-<ul>
- <li>Железо на котором будет запускаться сайт.</li>
- <li>Операционную систему (Linux, Windows).</li>
- <li>Языки программирования времени выполнения (скриптовые) и библиотеки, которые использует ваш сайт.</li>
- <li>Веб-сервер, используемый для обслуживания страниц и другого контента (Nginx, Apache).</li>
- <li>Сервер приложений, который передаёт "динамические" запросы между сайтом Django и веб-сервером.</li>
- <li>Базу данных, от которой зависит ваш сайт.</li>
-</ul>
+> **Примечание:** У вас может быть потребность в обратном прокси, балансировщике загрузки и так далее.
 
-<div class="note">
-<p><strong>Примечание</strong>: У вас может быть потребность в обратном прокси, балансировщике загрузки и так далее.</p>
-</div>
+Сервер может быть вашим собственным с подключением к интернету по скоростному каналу, но более общим подходом является применение "облачных решений". Что действительно имеет значение, так это то, что ваш код запускается на некотором удалённом компьютере (возможно и "виртуальном"), в хостинговом дата-центре. Удалённый сервер обычно предоставляет определённый доступ к компьютерным ресурсам (процессору, оперативной памяти, памяти на жёстких носителях и так далее) и соединение с интернетом за некоторую цену.
 
-<p>Сервер может быть вашим собственным с подключением к интернету по скоростному каналу, но более общим подходом является применение "облачных решений". Что действительно имеет значение, так это то, что ваш код запускается на некотором удалённом компьютере (возможно и "виртуальном"), в хостинговом дата-центре. Удалённый сервер обычно предоставляет определённый доступ к компьютерным ресурсам (процессору, оперативной памяти, памяти на жёстких носителях и так далее) и соединение с интернетом за некоторую цену.</p>
+Такой тип удалённого доступа к вычислительному/сетевому железу называется _Инфраструктура как Сервис (Infrastructure as a Service - IaaS)_. Множество IaaS поставщиков предлагают услуги по предустановке какой-либо операционной системы, на которую вы можете установить необходимые для вашего рабочего окружения компоненты. Другие поставщики предлагают вам выбрать уже готовые полноценные рабочие окружения, возможно, включающие в себя Django и настроенный веб-сервер.
 
-<p>Такой тип удалённого доступа к вычислительному/сетевому железу называется <em>Инфраструктура как Сервис (Infrastructure as a Service - IaaS)</em>. Множество IaaS поставщиков предлагают услуги по предустановке какой-либо операционной системы, на которую вы можете установить необходимые для вашего рабочего окружения компоненты. Другие поставщики предлагают вам выбрать уже готовые полноценные рабочие окружения, возможно, включающие в себя Django и настроенный веб-сервер.</p>
+> **Примечание:** Готовые окружения могут сделать настройку вашего веб-сайта очень простой задачей, поскольку они имеют минимальную конфигурацию, однако, либо количество доступных опций может быть недостаточным, или они будут соответствовать устаревшей операционной системе. Часто, более предпочтительно установить необходимые компоненты самостоятельно, таким образом вы получите то, что вам необходимо, а в последующем, при обновлении системы, уже будете знать что нужно делать!
 
-<div class="note">
-<p><strong>Примечание:</strong> Готовые окружения могут сделать настройку вашего веб-сайта очень простой задачей, поскольку они имеют минимальную конфигурацию, однако, либо количество доступных опций может быть недостаточным, или они будут соответствовать устаревшей операционной системе. Часто, более предпочтительно установить необходимые компоненты самостоятельно, таким образом вы получите то, что вам необходимо, а в последующем, при обновлении системы, уже будете знать что нужно делать!</p>
-</div>
+Некоторые провайдеры поддерживают Django как часть своего предложения _Платформа как Сервис (Platform as a Service_ - PaaS). При данном виде хостинга вам не нужно беспокоиться о большей части окружения (веб-сервере, сервере приложений, балансировщике загрузки), так как сама платформа берёт это на себя (включая все моменты, касающиеся роста и развития вашего приложения). В данном случае развёртывание приложения является достаточно простой задачей, - вам нужно сконцентрироваться только на вашем приложении, а не на инфраструктуре.
 
-<p>Некоторые провайдеры поддерживают Django как часть своего предложения <em>Платформа как Сервис (Platform as a Service</em> - PaaS). При данном виде хостинга вам не нужно беспокоиться о большей части окружения (веб-сервере, сервере приложений, балансировщике загрузки), так как сама платформа берёт это на себя (включая все моменты, касающиеся роста и развития вашего приложения). В данном случае развёртывание приложения является достаточно простой задачей, - вам нужно сконцентрироваться только на вашем приложении, а не на инфраструктуре.</p>
+Некоторые разработчики выбирают более гибкое решение, предоставляемое IaaS, в то время как другие предпочитают иметь наименьшие накладные расходы и простое масштабирование, предоставляемое PaaS. Когда вы только начинаете, то система типа PaaS является предпочтительной и это именно то, что мы будем использовать в данном руководстве.
 
-<p>Некоторые разработчики выбирают более гибкое решение, предоставляемое IaaS, в то время как другие предпочитают иметь наименьшие накладные расходы и простое масштабирование, предоставляемое PaaS. Когда вы только начинаете, то система типа PaaS является предпочтительной и это именно то, что мы будем использовать в данном руководстве.</p>
+> **Примечание:** Если вы выбираете хостинг с поддержкой Python/Django, то он должен иметь инструкцию по установке веб-сайта Django, учитывающую различные конфигурации веб-сервера, сервера приложений, обратного прокси и так далее (это не имеет значение, если вы выбрали PaaS). Например, существует множество инструкций "шаг-за-шагом" для различный конфигураций в [Документации DigitalOcean по Django](https://www.digitalocean.com/community/tutorials?q=django).
 
-<div class="note">
-<p><strong>Примечание:</strong> Если вы выбираете хостинг с поддержкой Python/Django, то он должен иметь инструкцию по установке веб-сайта Django, учитывающую различные конфигурации веб-сервера, сервера приложений, обратного прокси и так далее (это не имеет значение, если вы выбрали PaaS). Например, существует множество инструкций "шаг-за-шагом" для различный конфигураций в <a href="https://www.digitalocean.com/community/tutorials?q=django">Документации DigitalOcean по Django</a>.</p>
-</div>
+## Выбор хостинг провайдера
 
-<h2 id="Выбор_хостинг_провайдера">Выбор хостинг провайдера</h2>
+Существует более 100 хорошо известных хостинг провайдеров, которые либо активно поддерживают, или работают с Django (их список можно увидеть в [Django-дружественные хостинги](https://djangofriendly.com/index.html)). Данные поставщики предоставляют различные типы окружений (IaaS, PaaS), и различные уровни доступа к вычислительным и сетевым ресурсам, за разную цену.
 
-<p>Существует более 100 хорошо известных хостинг провайдеров, которые либо активно поддерживают, или работают с Django (их список можно увидеть в <a href="https://djangofriendly.com/index.html">Django-дружественные хостинги</a>). Данные поставщики предоставляют различные типы окружений (IaaS, PaaS), и различные уровни доступа к вычислительным и сетевым ресурсам, за разную цену.</p>
+Некоторые вещи на которые надо обратить внимание при выборе хостинга:
 
-<p>Некоторые вещи на которые надо обратить внимание при выборе хостинга:</p>
+- Насколько требовательным к вычислительным ресурсам является ваш сайт.
+- Уровень поддержки горизонтального (добавление большего количества машин) и вертикального масштабирования (переход на более мощное железо), а также стоимость всего этого.
+- Где расположены дата-центры и, следовательно, откуда будет более быстрый доступ.
+- Время непрерывной работы хостинга, а также время и количество простоя.
+- Инструменты, которые предоставляются для управления сайтом — простота и безопасность их использования (SFTP и FTP).
+- Встроенные фреймворки для мониторинга вашего сервера.
+- Ограничения. Некоторые хостинги могут блокировать некоторые сервисы (например, электронную почту) . Другие предлагают только определённое количество часов "живого времени" за определённую цену, или небольшое количество места для данных.
+- Преимущества. Некоторые провайдеры могут предложить бесплатные доменные имена и поддержку сертификатов SSL, которые, в других случаях, должны были бы купить.
+- Что будет при истечении времени использования "бесплатного" хостинга, какова "стоимость" миграции на более "дорогие" тарифы и так далее?
 
-<ul>
- <li>Насколько требовательным к вычислительным ресурсам является ваш сайт.</li>
- <li>Уровень поддержки горизонтального (добавление большего количества машин) и вертикального масштабирования (переход на более мощное железо), а также стоимость всего этого.</li>
- <li>Где расположены дата-центры и, следовательно, откуда будет более быстрый доступ.</li>
- <li>Время непрерывной работы хостинга, а также время и количество простоя.</li>
- <li>Инструменты, которые предоставляются для управления сайтом — простота и безопасность их использования (SFTP и FTP).</li>
- <li>Встроенные фреймворки для мониторинга вашего сервера.</li>
- <li>Ограничения. Некоторые хостинги могут блокировать некоторые сервисы (например, электронную почту) . Другие предлагают только определённое количество часов "живого времени" за определённую цену, или небольшое количество места для данных.</li>
- <li>Преимущества. Некоторые провайдеры могут предложить бесплатные доменные имена и поддержку сертификатов SSL, которые, в других случаях, должны были бы купить.</li>
- <li>Что будет при истечении времени использования "бесплатного" хостинга, какова "стоимость" миграции на более "дорогие" тарифы и так далее?</li>
-</ul>
+Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченным окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определённого периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются [Heroku](https://www.heroku.com/), [Python Anywhere](https://www.pythonanywhere.com/), [Amazon Web Services](http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html), [Microsoft Azure](https://azure.microsoft.com/en-us/pricing/details/app-service/) и так далее.
 
-<p>Хорошей новостью является то, что для того, чтобы начать существует достаточное количество компаний, которые предоставляют пробные "бесплатные" тарифы типа "evaluation" (для пробы), "developer" (разработка), или "hobbyist" (хобби). Всегда существуют ресурсы с ограниченным окружением, при использовании которых вам надо беспокоиться лишь о том, что они могут быть доступны лишь в течении определённого периода времени. Тем не менее, они являются отличным решением для тестирования сайтов с небольшим трафиком в реальном окружении, а также могут предоставлять простой доступ к платным ресурсам, в случае необходимости. Наиболее популярными провайдерами являются <a href="https://www.heroku.com/">Heroku</a>, <a href="https://www.pythonanywhere.com/">Python Anywhere</a>, <a href="http://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html">Amazon Web Services</a>, <a href="https://azure.microsoft.com/en-us/pricing/details/app-service/">Microsoft Azure</a> и так далее.</p>
+Многие провайдеры имеют "basic" (базовый) тариф, предоставляющий достаточный уровень вычислительной мощности с небольшим количеством ограничений. [Digital Ocean](https://www.digitalocean.com/) и [Python Anywhere](https://www.pythonanywhere.com/) являются примерами провайдеров, которые предлагают относительно недорогой базовый тариф (от $5 до $10USD в месяц).
 
-<p>Многие провайдеры имеют "basic" (базовый) тариф, предоставляющий достаточный уровень вычислительной мощности с небольшим количеством ограничений. <a href="https://www.digitalocean.com/">Digital Ocean</a> и <a href="https://www.pythonanywhere.com/">Python Anywhere</a> являются примерами провайдеров, которые предлагают относительно недорогой базовый тариф (от $5 до $10USD в месяц).</p>
+> **Примечание:** Необходимо помнить, что цена не является единственным критерием выбора. Если ваш сайт успешен, то может так случиться, что масштабирование станет самым важным элементом вашего внимания при выборе услуг хостинга.
 
-<div class="note">
-<p><strong>Примечание:</strong> Необходимо помнить, что цена не является единственным критерием выбора. Если ваш сайт успешен, то может так случиться, что масштабирование станет самым важным элементом вашего внимания при выборе услуг хостинга.</p>
-</div>
+## Подготовка веб-сайта к публикации
 
-<h2 id="Подготовка_веб-сайта_к_публикации">Подготовка веб-сайта к публикации</h2>
+[Скелет сайта](/ru/docs/Learn/Server-side/Django/skeleton_website) был создан при помощи инструментов _django-admin_ и _manage.py_, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определённых в **settings.py**) должны быть изменены перед публикацией сайта, либо из-за вопросов безопасности, либо производительности.
 
-<p><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Скелет сайта</a> был создан при помощи инструментов <em>django-admin</em> и <em>manage.py</em>, которые настроены таким образом, чтобы сделать разработку проще. Многие настройки файла проекта (определённых в <strong>settings.py</strong>) должны быть изменены перед публикацией сайта, либо из-за вопросов безопасности, либо производительности.</p>
+> **Примечание:** Общепринятым решением является иметь отдельный файл **settings.py** для публикации, который импортирует важные настройки из внешних файлов, или из переменных окружения. Доступ к данному файлу должен быть ограничен, даже если остальная часть исходного кода доступна в публичном репозитории.
 
-<div class="note">
-<p><strong>Примечание:</strong> Общепринятым решением является иметь отдельный файл <strong>settings.py</strong> для публикации, который импортирует важные настройки из внешних файлов, или из переменных окружения. Доступ к данному файлу должен быть ограничен, даже если остальная часть исходного кода доступна в публичном репозитории.</p>
-</div>
+Критически важные настройки файла **settings.py**:
 
-<p>Критически важные настройки файла <strong>settings.py</strong>:</p>
+- `DEBUG`. При развёртывании сайта должен быть установлен в `False` (`DEBUG = False`). Тем самым, прекратится вывод важной отладочной информации.
+- `SECRET_KEY`. Это большое случайное число, применяемое для защиты от CSRF. Важно, чтобы ключ, используемый в продакшене, не указывался в исходном коде, и/или не запрашивался с другого сервера. Django рекомендует размещать значение ключа либо в переменной окружения, или в файле с доступом только на чтение.
 
-<ul>
- <li><code>DEBUG</code>. При развёртывании сайта должен быть установлен в <code>False</code> (<code>DEBUG = False</code>). Тем самым, прекратится вывод  важной отладочной информации.</li>
- <li><code>SECRET_KEY</code>. Это большое случайное число, применяемое для защиты от CSRF. Важно, чтобы ключ, используемый в продакшене, не указывался в исходном коде, и/или не запрашивался с другого сервера. Django рекомендует размещать значение ключа либо в переменной окружения, или в файле с доступом только на чтение.
-  <pre># Чтение SECRET_KEY из переменной окружения
-import os
-SECRET_KEY = os.environ['SECRET_KEY']
+  ```
+  # Чтение SECRET_KEY из переменной окружения
+  import os
+  SECRET_KEY = os.environ['SECRET_KEY']
 
-#ИЛИ
+  #ИЛИ
 
-#Чтение ключа из файла
-with open('/etc/secret_key.txt') as f:
-    SECRET_KEY = f.read().strip()</pre>
- </li>
-</ul>
+  #Чтение ключа из файла
+  with open('/etc/secret_key.txt') as f:
+      SECRET_KEY = f.read().strip()
+  ```
 
-<p>Давайте изменим приложение <em>LocalLibrary</em> таким образом, чтобы читать <code>SECRET_KEY</code> и <code>DEBUG</code> из переменных окружения, если те определены, иначе использовать значения по умолчанию.</p>
+Давайте изменим приложение _LocalLibrary_ таким образом, чтобы читать `SECRET_KEY` и `DEBUG` из переменных окружения, если те определены, иначе использовать значения по умолчанию.
 
-<p>Откройте <strong>/locallibrary/settings.py</strong>, закомментируйте исходное значение <code>SECRET_KEY</code> и добавьте новые строки, как указано ниже <strong>жирным</strong>. В течении разработки, никаких переменных окружения определено не было, таким образом будут использоваться значения по умолчанию (не имеет значения какой ключ вы используете в процессе разработки, поскольку при развёртывании проекта вы будете использовать другой).</p>
+Откройте **/locallibrary/settings.py**, закомментируйте исходное значение `SECRET_KEY` и добавьте новые строки, как указано ниже **жирным**. В течении разработки, никаких переменных окружения определено не было, таким образом будут использоваться значения по умолчанию (не имеет значения какой ключ вы используете в процессе разработки, поскольку при развёртывании проекта вы будете использовать другой).
 
-<pre class="brush: python"># SECURITY WARNING: keep the secret key used in production secret!
-# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag'
-<strong>import os</strong>
-<strong>SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&amp;k3q+pmu)5%asj6yjpkag')</strong>
-</pre>
+```python
+# SECURITY WARNING: keep the secret key used in production secret!
+# SECRET_KEY = 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag'
+import os
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'cg#p$g+j9tax!#a3cup@1$8obt2_+&k3q+pmu)5%asj6yjpkag')
+```
 
-<p>Затем закомментируйте строку с настройкой <code>DEBUG</code>, а затем, добавьте новую, указанную ниже.</p>
+Затем закомментируйте строку с настройкой `DEBUG`, а затем, добавьте новую, указанную ниже.
 
-<pre class="brush: python"># SECURITY WARNING: don't run with debug turned on in production!
+```python
+# SECURITY WARNING: don't run with debug turned on in production!
 # DEBUG = True
-<strong>DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )</strong>
-</pre>
+DEBUG = bool( os.environ.get('DJANGO_DEBUG', True) )
+```
+
+Значение `DEBUG` будет `True` по умолчанию и станет `False`, в том случае, если переменная окружения `DJANGO_DEBUG` будет проинициализирована пустой строкой, то есть, `DJANGO_DEBUG=''`.
+
+> **Примечание:** Было бы более понятным, если бы мы могли просто установить и снять с `DJANGO_DEBUG` непосредственно на `True` и `False` , напрямую, а не использовать «любую строку» или «пустую строку» (соответственно). К сожалению, значения переменных среды хранятся как строки Python и единственная строка, которая оценивается как `False` является пустой строкой (например, `bool('')==False`).
+
+Весь перечень настроек для разворачивания вашего сайта находится по ссылке [Deployment checklist](https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/) (Django docs). Кроме того, вы можете получить список настроек, выполнив в терминале команду:
+
+```python
+python3 manage.py check --deploy
+```
+
+## Пример: Установка LocalLibrary на Heroku
+
+Данный раздел предоставляет демонстрацию того, как установить _LocalLibrary_ на [Heroku PaaS cloud](http://heroku.com).
+
+### Почему Heroku?
+
+Heroku - один из самых продолжительных и популярных облачных сервисов PaaS. Первоначально он поддерживал только приложения Ruby, но теперь его можно использовать для размещения приложений из многих сред программирования, включая Django!
+
+Мы выбираем для использования Heroku по нескольким причинам:
+
+- У Heroku есть [свободный уровень](https://www.heroku.com/pricing), который _действительно_ свободен (хотя и с некоторыми ограничениями)
+- Как PaaS, Heroku заботится о большой веб-инфраструктуре для нас. Это значительно облегчает работу, потому что вы не беспокоитесь о серверах, балансирах нагрузки, обратных прокси или любой другой веб-инфраструктуре, которую Heroku предоставляет нам под капотом.
+- Хотя у этого есть некоторые ограничения, это не повлияет на это конкретное приложение. Например:
+
+  - Heroku предоставляет только недолговечное хранилище, поэтому загруженные пользователем файлы нельзя безопасно хранить на самом Heroku.
+  - Свободный уровень будет спать с неактивным веб-приложением, если в течение получаса не будет запросов.После этого сайт может занять несколько секунд, чтобы ответить, когда он проснулся.
+  - Свободный уровень ограничивает время, в течение которого ваш сайт работает до определённого количества часов каждый месяц (не включая время, когда сайт «спит»).Это нормально для сайта с низким уровнем использования / демонстрации, но не подходит, если требуется 100% время безотказной работы.
+  - Другие ограничения перечислены в [Limits](https://devcenter.heroku.com/articles/limits) (документы Heroku).
 
-<p>Значение <code>DEBUG</code> будет <code>True</code> по умолчанию и станет <code>False</code>, в том случае, если переменная окружения <code>DJANGO_DEBUG</code> будет проинициализирована пустой строкой, то есть, <code>DJANGO_DEBUG=''</code>.</p>
+- В основном это просто работает, и если вы в конечном итоге полюбите его, масштабирование вашего приложения будет очень простым.
 
-<div class="note">
-<p><strong>Примечание</strong>: Было бы более понятным, если бы мы могли просто установить и снять с  <code>DJANGO_DEBUG</code> непосредственно на <code>True</code> и <code>False</code> , напрямую, а не использовать «любую строку» или «пустую строку» (соответственно). К сожалению, значения переменных среды хранятся как строки Python и единственная строка, которая оценивается как <code>False</code> является пустой строкой (например, <code>bool('')==False</code>).</p>
-</div>
+Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. Heroku упрощает настройку и масштабирование за счёт меньшей гибкости и, возможно, обойдётся намного дороже, когда вы выходите из свободного уровня.
 
-<p>Весь перечень настроек для разворачивания вашего сайта находится по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Deployment checklist</a> (Django docs). Кроме того, вы можете получить список настроек, выполнив в терминале команду:</p>
+### Как работает Heroku?
 
-<pre class="brush: python">python3 manage.py check --deploy
-</pre>
+Heroku запускает сайты Django внутри одного, или более, изолированных друг от друга "[Dynos](https://devcenter.heroku.com/articles/dynos)", которые являются виртуальными Unix-контейнерами, предоставляющими необходимое окружение для вашего приложения. Данные dynos полностью изолированы и имеют _эфемерную_ файловую систему ("короткоживущая" файловая система, которая полностью очищается и обновляется каждый раз, когда dyno перезапускается). Единственной сущностью, которую предоставляет dynos по умолчанию, является приложение по [конфигурации переменных](https://devcenter.heroku.com/articles/config-vars). Heroku внутри себя применяет балансировщик загрузки для распределения веб-трафика среди всех "веб"-dynos. Поскольку dynos изолированы, Heroku может масштабировать приложение горизонтально, просто добавляя больше dynos (хотя, конечно, у вас может появиться необходимость расширить базу данных для обработки дополнительных соединений).
 
-<h2 id="Пример_Установка_LocalLibrary_на_Heroku">Пример: Установка LocalLibrary на Heroku</h2>
+Файловая система эфемерна, поэтому вы не можете напрямую установить необходимые для вашего приложения сервисы (то есть, базы данных, очереди, системы кеширования, хранения, сервисы электронной почты и так далее). Взамен этого, Heroku предоставляет сервисы, доступные как независимые "дополнения" ("add-ons") либо от самой Heroku, или от сторонних разработчиков. В тот момент когда ваше приложение запускается в системе, dynos получает доступ к сервисам, используя информацию, содержащуюся в переменных настройки вашего приложения.
 
-<p>Данный раздел предоставляет демонстрацию того, как установить <em>LocalLibrary</em> на <a href="http://heroku.com">Heroku PaaS cloud</a>.</p>
+Для того, чтобы выполнить ваше приложение Heroku необходимо иметь возможность установить соответствующее окружение и зависимости, а также понимать как его (приложение) запустить. В случае приложений Django мы предоставляем соответствующую информацию в нескольких текстовых файлах:
 
-<h3 id="Почему_Heroku">Почему Heroku?</h3>
+- **runtime.txt**:\*\* \*\*язык программирования и его версию.
+- **requirements.txt**: необходимые для Python компоненты, включая Django.
+- **Procfile**: Список процессов, которые будут выполнены для старта веб-приложения. Для Django это обычно сервер веб-приложений Gunicorn (скрипт `.wsgi`).
+- **wsgi.py**: конфигурация [WSGI](http://wsgi.readthedocs.io/en/latest/what.html) для вызова нашего приложения Django в окружении Heroku.
 
-<p>Heroku - один из самых продолжительных и популярных облачных сервисов PaaS. Первоначально он поддерживал только приложения Ruby, но теперь его можно использовать для размещения приложений из многих сред программирования, включая Django!</p>
+Разработчики Developers взаимодействуют с Heroku при помощи специального клиентского приложения/терминала, который сильно похож на bash-скрипт Unix. Оно позволяет вам загружать код, находящийся в git-репозитории, контроллировать выполняемые процессы, смотреть логи, устанавливать конфигурационные переменные и многое другое!
 
-<p>Мы выбираем для использования Heroku по нескольким причинам:</p>
+Для того, чтобы заставить ваше приложение работать с Heroku, нам нужно разместить наше веб-приложение в git-репозитории, добавить, перечисленные ранее, файлы, подключить дополнение (add-on) базы данных и выполнить настройки для правильной работы со статическими файлами.
 
-<ul>
- <li>У Heroku есть <a href="https://www.heroku.com/pricing">свободный уровень</a>, который <em>действительно</em> свободен (хотя и с некоторыми ограничениями)</li>
- <li>Как PaaS, Heroku заботится о большой веб-инфраструктуре для нас. Это значительно облегчает работу, потому что вы не беспокоитесь о серверах, балансирах нагрузки, обратных прокси или любой другой веб-инфраструктуре, которую Heroku предоставляет нам под капотом.</li>
- <li>Хотя у этого есть некоторые ограничения, это не повлияет на это конкретное приложение. Например:
-  <ul>
-   <li>Heroku предоставляет только недолговечное хранилище, поэтому загруженные пользователем файлы нельзя безопасно хранить на самом Heroku.</li>
-   <li>Свободный уровень будет спать с неактивным веб-приложением, если в течение получаса не будет запросов.После этого сайт может занять несколько секунд, чтобы ответить, когда он проснулся.</li>
-   <li>Свободный уровень ограничивает время, в течение которого ваш сайт работает до определённого количества часов каждый месяц (не включая время, когда сайт «спит»).Это нормально для сайта с низким уровнем использования / демонстрации, но не подходит, если требуется 100% время безотказной работы.</li>
-   <li>Другие ограничения перечислены в <a href="https://devcenter.heroku.com/articles/limits">Limits</a> (документы Heroku).</li>
-  </ul>
- </li>
- <li>В основном это просто работает, и если вы в конечном итоге полюбите его, масштабирование вашего приложения будет очень простым.</li>
-</ul>
-
-<p>Хотя Heroku идеально подходит для проведения этой демонстрации, она может быть не идеальна для вашего реального сайта. Heroku упрощает настройку и масштабирование за счёт меньшей гибкости и, возможно, обойдётся намного дороже, когда вы выходите из свободного уровня.</p>
-
-<h3 id="Как_работает_Heroku">Как работает Heroku?</h3>
-
-<p>Heroku запускает сайты Django внутри одного, или более,  изолированных друг от друга "<a href="https://devcenter.heroku.com/articles/dynos">Dynos</a>", которые являются виртуальными Unix-контейнерами, предоставляющими необходимое окружение для вашего приложения. Данные dynos полностью изолированы и имеют <em>эфемерную</em> файловую систему ("короткоживущая" файловая система, которая полностью очищается и обновляется каждый раз, когда dyno перезапускается). Единственной сущностью, которую предоставляет dynos по умолчанию, является приложение по <a href="https://devcenter.heroku.com/articles/config-vars">конфигурации переменных</a>. Heroku внутри себя применяет балансировщик загрузки для распределения веб-трафика среди всех "веб"-dynos. Поскольку dynos изолированы, Heroku может масштабировать приложение горизонтально, просто добавляя больше dynos (хотя, конечно, у вас может появиться необходимость расширить базу данных для обработки дополнительных соединений).</p>
-
-<p>Файловая система эфемерна, поэтому вы не можете напрямую установить необходимые для вашего приложения сервисы (то есть, базы данных, очереди, системы кеширования, хранения, сервисы электронной почты и так далее). Взамен этого, Heroku предоставляет сервисы, доступные как независимые "дополнения" ("add-ons") либо от самой Heroku, или от сторонних разработчиков. В тот момент когда ваше приложение запускается в системе, dynos получает доступ к сервисам, используя информацию, содержащуюся в переменных настройки вашего приложения.</p>
-
-<p>Для того, чтобы выполнить ваше приложение Heroku необходимо иметь возможность установить соответствующее окружение и зависимости, а также понимать как его (приложение) запустить. В случае приложений Django мы предоставляем соответствующую информацию в нескольких текстовых файлах:</p>
-
-<ul>
- <li><strong>runtime.txt</strong>:<strong> </strong>язык программирования и его версию.</li>
- <li><strong>requirements.txt</strong>: необходимые для Python компоненты, включая Django.</li>
- <li><strong>Procfile</strong>: Список процессов, которые будут выполнены для старта веб-приложения. Для Django это обычно сервер веб-приложений Gunicorn (скрипт <code>.wsgi</code>).</li>
- <li><strong>wsgi.py</strong>: конфигурация <a href="http://wsgi.readthedocs.io/en/latest/what.html">WSGI</a> для вызова нашего приложения Django в окружении Heroku.</li>
-</ul>
+Когда мы выполним все, что необходимо для нашего сайта мы можем создать аккаунт Heroku, получить доступ к клиенту Heroku и использовать его, для установки нашего веб-сайта.
 
-<p>Разработчики Developers взаимодействуют с Heroku при помощи специального клиентского приложения/терминала, который сильно похож на bash-скрипт Unix. Оно позволяет вам загружать код, находящийся в git-репозитории, контроллировать выполняемые процессы, смотреть логи, устанавливать конфигурационные переменные и многое другое!</p>
+> **Примечание:** Инструкции, перечисленные ниже, соответствуют процессу работы с Heroku во время написания данной статьи (английской версии - прим. перев.). Если Heroku значительно изменит этот процесс, вы можете воспользоваться соответствующим описанием: [Heroku начало работы с Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction).
 
-<p>Для того, чтобы заставить ваше приложение работать с Heroku, нам нужно разместить наше веб-приложение в git-репозитории, добавить, перечисленные ранее, файлы, подключить дополнение (add-on) базы данных и выполнить настройки для правильной работы со статическими файлами.</p>
+На этом завершается краткий обзор начала работы с Heroku (более подробное руководство [Как работает Heroku](https://devcenter.heroku.com/articles/how-heroku-works)).
 
-<p>Когда мы выполним все, что необходимо для нашего сайта мы можем создать аккаунт Heroku, получить доступ к клиенту Heroku и использовать его, для установки нашего веб-сайта.</p>
+### Создание репозитория приложения на Github
 
-<div class="note">
-<p><strong>Примечание:</strong> Инструкции, перечисленные ниже, соответствуют процессу работы с Heroku во время написания данной статьи (английской версии - прим. перев.). Если Heroku значительно изменит этот процесс, вы можете воспользоваться соответствующим описанием: <a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Heroku начало работы с Django</a>.</p>
-</div>
+Heroku тесно интегрирована с системой управления версиями исходного кода **git**, используя её для загрузки / синхронизации любых изменений, которые вы вносите в живую систему. Он делает это, добавляя новый «удалённый» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku. Во время разработки вы используете **git** для хранения изменений в вашем «master» репозитории. Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.
 
-<p>На этом завершается краткий обзор начала работы с Heroku (более подробное руководство <a href="https://devcenter.heroku.com/articles/how-heroku-works">Как работает Heroku</a>).</p>
+> **Примечание:** Если вы привыкли следовать хорошей практике разработки программного обеспечения, вы, вероятно, уже используете git или какую-либо другую систему SCM. Если у вас уже есть git-репозиторий, вы можете пропустить этот шаг.
 
-<h3 id="Создание_репозитория_приложения_на_Github">Создание репозитория приложения на Github</h3>
+Существует множество способов работы с git, но одним из самых простых является создание учётной записи в [Github](https://github.com/), создание репозитория там, а затем синхронизация с ним локально:
 
-<p>Heroku тесно интегрирована с системой управления версиями исходного кода <strong>git</strong>, используя её для загрузки / синхронизации любых изменений, которые вы вносите в живую систему. Он делает это, добавляя новый «удалённый» репозиторий heroku с именем heroku, указывающий на репозиторий для вашего источника в облаке Heroku. Во время разработки вы используете <strong>git</strong> для хранения изменений в вашем «master» репозитории. Когда вы хотите развернуть свой сайт, вы синхронизируете свои изменения в репозитории Heroku.</p>
+1.  Посетите <https://github.com/> и создайте аккаунт.
+2.  После входа в систему нажмите ссылку + в верхней панели инструментов и выберите **Новый репозиторий**.
+3.  Заполните все поля на этой форме. Хотя они не являются обязательными, они настоятельно рекомендуются.
 
-<div class="note">
-<p><strong>Примечание:</strong> Если вы привыкли следовать хорошей практике разработки программного обеспечения, вы, вероятно, уже используете git или какую-либо другую систему SCM. Если у вас уже есть git-репозиторий, вы можете пропустить этот шаг.</p>
-</div>
+    - Введите имя нового репозитория (например _django_local_library_), и комментарий к репозиторию (например "Local Library website written in Django".
+    - Нажмите на кнопку* **Add .*****gitignore** и в появившемся списке выберите **Python**.
+    - Выберите подходящую вам лицензию из списка ***Add license.** *Если не знаете для чего это - оставьте как было.
+    - Установите галочку напротив _**Initialize this repository with a README**._
 
-<p>Существует множество способов работы с git, но одним из самых простых является создание учётной записи в <a href="https://github.com/">Github</a>, создание репозитория там, а затем синхронизация с ним локально:</p>
+4.  Нажмите кнопку **Create repository**, тем самым создав ваш репозиторий.
+5.  Перейдите на страницу вашего репозитория. Там нажмите на зелёную кнопку "**Clone or download**". Скопируйте URL из текстового поля из появившегося диалогового окна (Это будет похоже на: **https\://github.com/_\<your_git_user_id>_/django_local_library.git**). Здесь **\<your_git_user_id>** - это будет ваш id пользователя git.
 
-<ol>
- <li>Посетите <a href="https://github.com/">https://github.com/</a> и создайте аккаунт.</li>
- <li>После входа в систему нажмите ссылку + в верхней панели инструментов и выберите <strong>Новый репозиторий</strong>.</li>
- <li>Заполните все поля на этой форме. Хотя они не являются обязательными, они настоятельно рекомендуются.
-  <ul>
-   <li>Введите имя нового репозитория (например <em>django_local_library</em>), и комментарий к репозиторию (например "Local Library website written in Django".</li>
-   <li>Нажмите на кнопку<em> <strong>Add .</strong></em><strong>gitignore </strong>и в появившемся списке выберите <strong>Python</strong>.</li>
-   <li>Выберите подходящую вам лицензию из списка <em><strong>Add license. </strong></em>Если не знаете для чего это - оставьте как было.</li>
-   <li>
-    <p>Установите галочку напротив <em><strong>Initialize this repository with a README</strong>.</em></p>
-   </li>
-  </ul>
- </li>
- <li>Нажмите кнопку <strong>Create repository</strong>, тем самым создав ваш репозиторий.</li>
- <li>Перейдите на страницу вашего репозитория. Там нажмите на зелёную кнопку "<strong>Clone or download</strong>". Скопируйте URL  из текстового поля из появившегося диалогового окна (Это будет похоже на: <strong>https://github.com/<em>&lt;your_git_user_id&gt;</em>/django_local_library.git</strong>). Здесь <strong>&lt;your_git_user_id&gt; </strong>- это будет ваш id пользователя git.</li>
-</ol>
+Когда ваш репозиторий будет создан - загрузите его себе на компьютер, следуя инструкции, описанной ниже:
 
-<p>Когда ваш репозиторий будет создан - загрузите его себе на компьютер, следуя инструкции, описанной ниже:</p>
+1.  Установите git себе на компьютер (Вы можете найти версию для своей платформы [здесь](https://git-scm.com/downloads)).
+2.  Откройте командную строку (или терминал) и выполните в нём следующую команду, используя ссылку, которую вы получили с github:
 
-<ol>
- <li>Установите git себе на компьютер (Вы можете найти версию для своей платформы <a href="https://git-scm.com/downloads">здесь</a>).</li>
- <li>Откройте командную строку (или терминал) и выполните в нём следующую команду, используя ссылку, которую вы получили с github:
-  <pre class="brush: bash">git clone https://github.com/<strong><em>&lt;your_git_user_id&gt;</em></strong>/django_local_library.git
-</pre>
-  Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в которой выполнялась команда.</li>
- <li>Перейдите в эту папку:
-  <pre class="brush: bash">cd django_local_library.git</pre>
- </li>
-</ol>
+    ```bash
+    git clone https://github.com/<your_git_user_id>/django_local_library.git
+    ```
 
-<p>Последний шаг. Нужно скопировать ваше Django-приложение и добавить его файлы в новый репозиторий, используя git:</p>
+    Это создаст подпапку (с содержанием вашего репозитория и именем вашего репозитория) внутри папки, в которой выполнялась команда.
 
-<ol>
- <li>Скопируйте ваше приложение в папку репозитория (все файлы с таким же уровнем, как у <strong>manage.py,</strong> <u><strong>БЕЗ </strong>папки проекта, в которой эти файлы находятся</u>).</li>
- <li>Откройте файл с расширением <strong>.gitignore </strong>в текстовом редакторе, вставьте в самый его конец строки, приведённые ниже, а затем сохраните (этот файл "говорит" о файлах, которые не должны быть  загружены в git по умолчанию).
-  <pre># Text backup files
-*.bak
+3.  Перейдите в эту папку:
 
-#Database
-*.sqlite3</pre>
- </li>
- <li>
-  <p>Откройте командную строку или терминал и используйте <code>add</code> команду с флагом <code>-A</code>. Эта команда сохранит изменения в репозиторий:</p>
+    ```bash
+    cd django_local_library.git
+    ```
 
-  <pre class="brush: bash"><code>git add -A</code></pre>
- </li>
- <li>Используйте команду <code>status</code>,  что бы убедиться, что все файлы, которые вы собираетесь добавить верны (вы хотите включить исходные файлы, а не бинарные файлы, временные файлы и т. д.). В консоль выведется что то вроде этого:
-  <pre>&gt; git status
-On branch master
-Your branch is up-to-date with 'origin/master'.
-Changes to be committed:
-  (use "git reset HEAD &lt;file&gt;..." to unstage)
+Последний шаг. Нужно скопировать ваше Django-приложение и добавить его файлы в новый репозиторий, используя git:
 
-        modified:   .gitignore
-        new file:   catalog/__init__.py
-        ...
-        new file:   catalog/migrations/0001_initial.py
-        ...
-        new file:   templates/registration/password_reset_form.html</pre>
- </li>
- <li>Теперь, зафиксируйте файлы в локальном репозитории:
-  <pre class="brush: bash">git commit -m "First version of application moved into github"</pre>
- </li>
- <li>Синхронизируете свой локальный репозиторий с сайтом Github:
-  <pre>git push origin master</pre>
- </li>
-</ol>
+1.  Скопируйте ваше приложение в папку репозитория (все файлы с таким же уровнем, как у **manage.py,** \***\*БЕЗ** папки проекта, в которой эти файлы находятся\*\*).
+2.  Откройте файл с расширением **.gitignore** в текстовом редакторе, вставьте в самый его конец строки, приведённые ниже, а затем сохраните (этот файл "говорит" о файлах, которые не должны быть загружены в git по умолчанию).
 
-<p>Когда эти операции завершатся, вернитесь на страницу Github где вы создали свой репозиторий, обновите страницу, и убедитесь, что ваше приложение полностью загружено. При надобности обновить файлы на репозитории - повторите цикл ввода команд add/commit/push.</p>
+    ```
+    # Text backup files
+    *.bak
 
-<div class="note">
-<p><strong>Подсказка:</strong> Это хороший момент для создания резервной копии вашего «ванильного» проекта — в то время как некоторые изменения, которые мы собираемся сделать в следующих разделах, могут быть полезны для развёртывания на любой платформе (или разработке), которые другие могут не использовать.</p>
+    #Database
+    *.sqlite3
+    ```
 
-<p><em>Лучший способ</em> сделать это - использовать <em>git</em> для управления вашими изменениями. С <em>git</em> вы можете не только вернуться к определённой старой версии, но и сохранить её в отдельной «ветке» ваших производственных изменений, and cherry-pick - выбрать любые изменения для перемещения между ветвями производства и развития. <a href="https://help.github.com/articles/good-resources-for-learning-git-and-github/">Изучение Git</a> будет стоить усилий, но это выходит за рамки данной темы. Самый простой способ сделать это - просто скопировать файлы в другое место. Используйте тот подход, который наилучшим образом соответствует вашим знаниям git!</p>
-</div>
+3.  Откройте командную строку или терминал и используйте `add` команду с флагом `-A`. Эта команда сохранит изменения в репозиторий:
 
-<h3 id="Обновить_приложение_для_Heroku">Обновить приложение для Heroku </h3>
+    ```bash
+    git add -A
+    ```
 
-<p>В этой части говорится об изменениях, которые мы должны сделать на нашем приложении <em>LocalLibrary</em>, что бы оно работало на  Heroku. В то время как документация <a dir="ltr" href="https://devcenter.heroku.com/articles/getting-started-with-python" style="color: green;">"начало работы с Heroku с инструкциями Django"</a> предполагает, что вы будете использовать <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">Heroku client</a> для запуска локальной среды разработки, наши изменения здесь совместимы с существующим сервером разработки Django и способами работы, которые мы уже узнали.</p>
+4.  Используйте команду `status`, что бы убедиться, что все файлы, которые вы собираетесь добавить верны (вы хотите включить исходные файлы, а не бинарные файлы, временные файлы и т. д.). В консоль выведется что то вроде этого:
 
-<h4 id="Procfile">Procfile</h4>
+    ```
+    > git status
+    On branch master
+    Your branch is up-to-date with 'origin/master'.
+    Changes to be committed:
+      (use "git reset HEAD <file>..." to unstage)
 
-<p> Создайте файл с именем <code>Procfile</code> (без расширения) в корне нашего GitHub репозитории объявить типы процессов и точки входа приложения. Скопируйте в него следующий текст:</p>
+            modified:   .gitignore
+            new file:   catalog/__init__.py
+            ...
+            new file:   catalog/migrations/0001_initial.py
+            ...
+            new file:   templates/registration/password_reset_form.html
+    ```
 
-<pre>web: gunicorn locallibrary.wsgi --log-file -</pre>
+5.  Теперь, зафиксируйте файлы в локальном репозитории:
 
-<p>«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнётся в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).</p>
+    ```bash
+    git commit -m "First version of application moved into github"
+    ```
 
-<h4 id="Gunicorn">Gunicorn</h4>
+6.  Синхронизируете свой локальный репозиторий с сайтом Github:
 
-<p><a href="http://gunicorn.org/">Gunicorn</a> рекомендуемый http сервер с Django на Heroku (Как указано в Procfile выше). Это чистый python http сервер для WSGI приложений  которые могут запускать множество параллельных python процессов в пределах одного динамического (посмотрите <a href="https://devcenter.heroku.com/articles/python-gunicorn">Deploying Python applications with Gunicorn</a> для получения большей информации).</p>
+    ```
+    git push origin master
+    ```
 
-<p>Также нам не понадобится <em>Gunicorn</em> для обслуживания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удалённом сервере.</p>
+Когда эти операции завершатся, вернитесь на страницу Github где вы создали свой репозиторий, обновите страницу, и убедитесь, что ваше приложение полностью загружено. При надобности обновить файлы на репозитории - повторите цикл ввода команд add/commit/push.
 
-<p>Установка <em>Gunicorn</em> локально в командной строке используя пакетный менеджер <em>pip</em> (которые мы установили когда <a href="/en-US/docs/Learn/Server-side/Django/development_environment">настраивали среду разработки</a>):</p>
+> **Примечание:** **Подсказка:** Это хороший момент для создания резервной копии вашего «ванильного» проекта — в то время как некоторые изменения, которые мы собираемся сделать в следующих разделах, могут быть полезны для развёртывания на любой платформе (или разработке), которые другие могут не использовать.
+>
+> _Лучший способ_ сделать это - использовать _git_ для управления вашими изменениями. С _git_ вы можете не только вернуться к определённой старой версии, но и сохранить её в отдельной «ветке» ваших производственных изменений, and cherry-pick - выбрать любые изменения для перемещения между ветвями производства и развития. [Изучение Git](https://help.github.com/articles/good-resources-for-learning-git-and-github/) будет стоить усилий, но это выходит за рамки данной темы. Самый простой способ сделать это - просто скопировать файлы в другое место. Используйте тот подход, который наилучшим образом соответствует вашим знаниям git!
 
-<pre class="brush: bash">pip3 install gunicorn
-</pre>
+### Обновить приложение для Heroku
 
-<h4 id="Настройка_Базы_Данных">Настройка Базы Данных</h4>
+В этой части говорится об изменениях, которые мы должны сделать на нашем приложении _LocalLibrary_, что бы оно работало на Heroku. В то время как документация ["начало работы с Heroku с инструкциями Django"](https://devcenter.heroku.com/articles/getting-started-with-python) предполагает, что вы будете использовать [Heroku client](https://devcenter.heroku.com/articles/getting-started-with-python#set-up) для запуска локальной среды разработки, наши изменения здесь совместимы с существующим сервером разработки Django и способами работы, которые мы уже узнали.
 
-<p>Мы не можем использовать базу данных SQLite по умолчанию на Heroku, потому что она основана на файлах, и она будет удалена из эфемерной файловой системы каждый раз, когда приложение перезагружается (обычно один раз в день и каждый раз, когда изменяется приложение или его переменные конфигурации ).</p>
+#### Procfile
 
-<p>Механизм Heroku для обработки этой ситуации заключается в использовании <a href="https://elements.heroku.com/addons#data-stores">надстройки базы данных</a> и настройке веб-приложения с использованием информации из <a href="https://devcenter.heroku.com/articles/config-vars">переменной конфигурации среды</a>, установленной надстройкой. Существует множество опций базы данных, но мы будем использовать <a href="https://devcenter.heroku.com/articles/heroku-postgres-plans#plan-tiers">hobby уровень</a> в базе данных <em>postgres Heroku</em>, поскольку это бесплатно, поддерживается Django и автоматически добавляется в наши новые приложения Heroku при использовании бесплатного уровня динамического плана для хобби.</p>
+Создайте файл с именем `Procfile` (без расширения) в корне нашего GitHub репозитории объявить типы процессов и точки входа приложения. Скопируйте в него следующий текст:
 
-<p>Информация о подключении базы данных предоставляется на web dyno, используя конфигурационную переменную с именем <code>DATABASE_URL</code>. Вместо того, чтобы жёстко кодировать эту информацию в Django, Heroku рекомендует разработчикам использовать <a href="https://warehouse.python.org/project/dj-database-url/">dj-database-url</a> пакет для анализа <code>DATABASE_URL</code> переменную окружения и автоматически преобразовать её в желаемый формат конфигурации Django. В дополнение к установке пакета <em>dj-database-url</em> нам также потребуется установить <a href="http://initd.org/psycopg/">psycopg2</a>, поскольку Django нуждается в этом, чтобы взаимодействовать с базами данных Postgres.</p>
+```
+web: gunicorn locallibrary.wsgi --log-file -
+```
 
-<h5 id="dj-database-url_Django_конфигурации_базы_данных_из_переменной_окружения">dj-database-url (Django конфигурации базы данных из переменной окружения)</h5>
+«web:» сообщает Heroku, что это веб динамический и может быть отправлен HTTP-трафик. Процесс, который начнётся в этом динамически, - это gunicorn, который является популярным сервером веб-приложений, который рекомендует Heroku. Мы запускаем Gunicorn, используя конфигурационную информацию в модуле locallibrary.wsgi (созданный с помощью нашего скелета приложения: /locallibrary/wsgi.py).
 
-<p>Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удалённом сервере:</p>
+#### Gunicorn
 
-<pre>$ pip3 install dj-database-url
-</pre>
+[Gunicorn](http://gunicorn.org/) рекомендуемый http сервер с Django на Heroku (Как указано в Procfile выше). Это чистый python http сервер для WSGI приложений которые могут запускать множество параллельных python процессов в пределах одного динамического (посмотрите [Deploying Python applications with Gunicorn](https://devcenter.heroku.com/articles/python-gunicorn) для получения большей информации).
 
-<h5 id="settings.py">settings.py</h5>
+Также нам не понадобится _Gunicorn_ для обслуживания нашей LocalLibrary приложения в течение разработки, мы установим это так, чтобы он стал частью наших требований к Heroku для настройки на удалённом сервере.
 
-<p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла:</p>
+Установка _Gunicorn_ локально в командной строке используя пакетный менеджер _pip_ (которые мы установили когда [настраивали среду разработки](/ru/docs/Learn/Server-side/Django/development_environment)):
 
-<pre># Heroku: Update database configuration from $DATABASE_URL.
+```bash
+pip3 install gunicorn
+```
+
+#### Настройка Базы Данных
+
+Мы не можем использовать базу данных SQLite по умолчанию на Heroku, потому что она основана на файлах, и она будет удалена из эфемерной файловой системы каждый раз, когда приложение перезагружается (обычно один раз в день и каждый раз, когда изменяется приложение или его переменные конфигурации ).
+
+Механизм Heroku для обработки этой ситуации заключается в использовании [надстройки базы данных](https://elements.heroku.com/addons#data-stores) и настройке веб-приложения с использованием информации из [переменной конфигурации среды](https://devcenter.heroku.com/articles/config-vars), установленной надстройкой. Существует множество опций базы данных, но мы будем использовать [hobby уровень](https://devcenter.heroku.com/articles/heroku-postgres-plans#plan-tiers) в базе данных _postgres Heroku_, поскольку это бесплатно, поддерживается Django и автоматически добавляется в наши новые приложения Heroku при использовании бесплатного уровня динамического плана для хобби.
+
+Информация о подключении базы данных предоставляется на web dyno, используя конфигурационную переменную с именем `DATABASE_URL`. Вместо того, чтобы жёстко кодировать эту информацию в Django, Heroku рекомендует разработчикам использовать [dj-database-url](https://warehouse.python.org/project/dj-database-url/) пакет для анализа `DATABASE_URL` переменную окружения и автоматически преобразовать её в желаемый формат конфигурации Django. В дополнение к установке пакета _dj-database-url_ нам также потребуется установить [psycopg2](http://initd.org/psycopg/), поскольку Django нуждается в этом, чтобы взаимодействовать с базами данных Postgres.
+
+##### dj-database-url (Django конфигурации базы данных из переменной окружения)
+
+Установите dj-database-url локально, чтобы он стал частью наших требований к настройке Heroku на удалённом сервере:
+
+```
+$ pip3 install dj-database-url
+```
+
+##### settings.py
+
+Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла:
+
+```
+# Heroku: Update database configuration from $DATABASE_URL.
 import dj_database_url
 db_from_env = dj_database_url.config(conn_max_age=500)
-DATABASES['default'].update(db_from_env)</pre>
-
-<div class="note">
-<p><strong>Примечание:</strong></p>
+DATABASES['default'].update(db_from_env)
+```
 
-<ul>
- <li>Мы все ещё будем использовать SQLite во время разработки, поскольку <code>DATABASE_URL</code> переменная среды не будет установлена ​​на нашем компьютере разработки.</li>
- <li>Значение <code>conn_max_age=500</code> делает соединение постоянным, что намного эффективнее, чем воссоздавать соединение в каждом цикле запросов. Однако это необязательно и при необходимости можно удалить.</li>
-</ul>
-</div>
+> **Примечание:**
+>
+> - Мы все ещё будем использовать SQLite во время разработки, поскольку `DATABASE_URL` переменная среды не будет установлена ​​на нашем компьютере разработки.
+> - Значение `conn_max_age=500` делает соединение постоянным, что намного эффективнее, чем воссоздавать соединение в каждом цикле запросов. Однако это необязательно и при необходимости можно удалить.
 
-<h5 id="psycopg2_Python_Postgres_database_support">psycopg2 (Python Postgres database support)</h5>
+##### psycopg2 (Python Postgres database support)
 
-<p>Django нуждается в psycopg2 для работы с базами данных Postgres, и вам нужно будет добавить это в файл требований.txt для Heroku, чтобы установить это на удалённом сервере (как описано в разделе требований ниже).</p>
+Django нуждается в psycopg2 для работы с базами данных Postgres, и вам нужно будет добавить это в файл требований.txt для Heroku, чтобы установить это на удалённом сервере (как описано в разделе требований ниже).
 
-<p>Django будет использовать нашу базу данных SQLite локально по умолчанию, поскольку переменная среды DATABASE_URL не задана в нашей локальной среде. Если вы хотите полностью перейти на Postgres и использовать нашу бесплатную базу данных Heroku для разработки и производства, то вы можете. Например, чтобы установить psycopg2 и его зависимости локально в системе на базе Linux, вы должны использовать следующие команды bash / terminal:</p>
+Django будет использовать нашу базу данных SQLite локально по умолчанию, поскольку переменная среды DATABASE_URL не задана в нашей локальной среде. Если вы хотите полностью перейти на Postgres и использовать нашу бесплатную базу данных Heroku для разработки и производства, то вы можете. Например, чтобы установить psycopg2 и его зависимости локально в системе на базе Linux, вы должны использовать следующие команды bash / terminal:
 
-<pre class="brush: bash"><code>sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib</code>
+```bash
+sudo apt-get install python-pip python-dev libpq-dev postgresql postgresql-contrib
 pip3 install psycopg2
-</pre>
+```
 
-<p>Инструкции по установке для других платформ можно найти на веб-сайте psycopg2.</p>
+Инструкции по установке для других платформ можно найти на веб-сайте psycopg2.
 
-<p>Однако вам не нужно это делать - вам не нужно, чтобы PostGreSQL был активным на локальном компьютере, если вы передаёте его в Heroku в качестве требования в файле требований.txt (см. Ниже).</p>
+Однако вам не нужно это делать - вам не нужно, чтобы PostGreSQL был активным на локальном компьютере, если вы передаёте его в Heroku в качестве требования в файле требований.txt (см. Ниже).
 
-<h4 id="Обслуживание_статических_файлов_в_производстве"><strong>Обслуживание статических файлов в производстве</strong></h4>
+#### Обслуживание статических файлов в производстве
 
-<p><br>
- Во время разработки мы использовали Django и веб-сервер разработки Django для обслуживания наших статических файлов (CSS, JavaScript и т. Д.). В производственной среде вместо этого мы обычно обслуживаем статические файлы из сети доставки контента (CDN) или веб-сервера.</p>
+Во время разработки мы использовали Django и веб-сервер разработки Django для обслуживания наших статических файлов (CSS, JavaScript и т. Д.). В производственной среде вместо этого мы обычно обслуживаем статические файлы из сети доставки контента (CDN) или веб-сервера.
 
-<div class="note">
-<p><strong>Примечание. </strong>Обслуживание статических файлов через Django / веб-приложение неэффективно, потому что запросы должны проходить через ненужный дополнительный код (Django), а не обрабатываться непосредственно веб-сервером или полностью отдельным CDN. Хотя это не имеет значения для местного использования во время разработки, это будет иметь значительное влияние на производительность, если мы будем использовать тот же подход в производстве.</p>
-</div>
+> **Примечание:** **Примечание.** Обслуживание статических файлов через Django / веб-приложение неэффективно, потому что запросы должны проходить через ненужный дополнительный код (Django), а не обрабатываться непосредственно веб-сервером или полностью отдельным CDN. Хотя это не имеет значения для местного использования во время разработки, это будет иметь значительное влияние на производительность, если мы будем использовать тот же подход в производстве.
 
-<p>Чтобы упростить размещение статических файлов отдельно от веб-приложения Django, Django предоставляет средство сбора данных для сбора этих файлов для развёртывания (имеется переменная параметров, определяющая, где файлы должны собираться при запуске collectstatic). Шаблоны Django относятся к месту размещения статических файлов относительно переменной параметров (STATIC_URL), так что это можно изменить, если статические файлы перемещаются на другой хост / сервер.</p>
+Чтобы упростить размещение статических файлов отдельно от веб-приложения Django, Django предоставляет средство сбора данных для сбора этих файлов для развёртывания (имеется переменная параметров, определяющая, где файлы должны собираться при запуске collectstatic). Шаблоны Django относятся к месту размещения статических файлов относительно переменной параметров (STATIC_URL), так что это можно изменить, если статические файлы перемещаются на другой хост / сервер.
 
-<p>Соответствующими параметрами настройки являются:</p>
+Соответствующими параметрами настройки являются:
 
-<p>     STATIC_URL: это базовое расположение URL, из которого будут загружены статические файлы, например, на CDN. Это используется для переменной статического шаблона, доступ к которой осуществляется в нашем базовом шаблоне (см. Учебник по Django Part 5: Создание нашей домашней страницы).<br>
-       STATIC_ROOT: Это абсолютный путь к каталогу, в котором инструмент «collectstatic» Django будет собирать любые статические файлы, упомянутые в наших шаблонах. После их сбора они затем могут быть загружены в группу, где бы файлы не размещались.<br>
-       STATICFILES_DIRS: В этом списке перечислены дополнительные каталоги, в которых инструмент коллективного поиска Django должен искать статические файлы.</p>
+STATIC_URL: это базовое расположение URL, из которого будут загружены статические файлы, например, на CDN. Это используется для переменной статического шаблона, доступ к которой осуществляется в нашем базовом шаблоне (см. Учебник по Django Part 5: Создание нашей домашней страницы).
+STATIC_ROOT: Это абсолютный путь к каталогу, в котором инструмент «collectstatic» Django будет собирать любые статические файлы, упомянутые в наших шаблонах. После их сбора они затем могут быть загружены в группу, где бы файлы не размещались.
+STATICFILES_DIRS: В этом списке перечислены дополнительные каталоги, в которых инструмент коллективного поиска Django должен искать статические файлы.
 
-<h5 id="settings.py_2">settings.py</h5>
+##### settings.py
 
-<p>Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определён в вашем файле (STATIC_URL, возможно, уже был определён в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).</p>
+Откройте /locallibrary/settings.py и скопируйте следующую конфигурацию в нижнюю часть файла. BASE_DIR уже должен быть определён в вашем файле (STATIC_URL, возможно, уже был определён в файле, когда он был создан. В то время как это не причинит вреда, вы также можете удалить дублируемую предыдущую ссылку).
 
-<pre># Static files (CSS, JavaScript, Images)
+```
+# Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/1.10/howto/static-files/
 
 # The absolute path to the directory where collectstatic will collect static files for deployment.
@@ -393,35 +366,35 @@ STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
 
 # The URL to use when referring to static files (where they will be served from)
 STATIC_URL = '/static/'
-</pre>
+```
 
-<p>Фактически мы будем делать файл, используя библиотеку WhiteNoise, которую мы устанавливаем и настраиваем в следующем разделе.</p>
+Фактически мы будем делать файл, используя библиотеку WhiteNoise, которую мы устанавливаем и настраиваем в следующем разделе.
 
-<p>Для получения дополнительной информации см. Django и Static Assets (документы Heroku).</p>
+Для получения дополнительной информации см. Django и Static Assets (документы Heroku).
 
-<p><strong>WhiteNoise</strong><br>
- Существует множество способов обслуживания статических файлов на производстве (мы видели соответствующие настройки Django в предыдущих разделах). Heroku рекомендует использовать проект WhiteNoise для обслуживания статических активов непосредственно из Gunicorn в производстве.</p>
+**WhiteNoise**
+Существует множество способов обслуживания статических файлов на производстве (мы видели соответствующие настройки Django в предыдущих разделах). Heroku рекомендует использовать проект WhiteNoise для обслуживания статических активов непосредственно из Gunicorn в производстве.
 
-<div class="note">
-<p><strong>Примечание: </strong>Heroku автоматически вызывает collectstatic и готовит ваши статические файлы для использования WhiteNoise после того, как он загрузит ваше приложение. Посмотрите <a href="https://warehouse.python.org/project/whitenoise/">WhiteNoise</a> документацию для объяснения того, как она работает, и почему реализация является относительно эффективным методом для обслуживания этих файлов.</p>
-</div>
+> **Примечание:**Heroku автоматически вызывает collectstatic и готовит ваши статические файлы для использования WhiteNoise после того, как он загрузит ваше приложение. Посмотрите [WhiteNoise](https://warehouse.python.org/project/whitenoise/) документацию для объяснения того, как она работает, и почему реализация является относительно эффективным методом для обслуживания этих файлов.
 
-<p>Шаги по настройке <em>WhiteNoise</em> для использования в проекте:</p>
+Шаги по настройке _WhiteNoise_ для использования в проекте:
 
-<h5 id="WhiteNoise">WhiteNoise</h5>
+##### WhiteNoise
 
-<p>Установите <em>WhiteNoise</em> локально, используя следующую команду:</p>
+Установите _WhiteNoise_ локально, используя следующую команду:
 
-<pre>$ pip3 install whitenoise
-</pre>
+```
+$ pip3 install whitenoise
+```
 
-<h5 id="settings.py_3">settings.py</h5>
+##### settings.py
 
-<p>Чтобы установить WhiteNoise в приложение Django, откройте /locallibrary/settings.py, найдите параметр MIDDLEWARE и добавьте WhiteNoiseMiddleware в верхней части списка, чуть ниже SecurityMiddleware:</p>
+Чтобы установить WhiteNoise в приложение Django, откройте /locallibrary/settings.py, найдите параметр MIDDLEWARE и добавьте WhiteNoiseMiddleware в верхней части списка, чуть ниже SecurityMiddleware:
 
-<pre>MIDDLEWARE = [
+```
+MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
-    <strong>'whitenoise.middleware.WhiteNoiseMiddleware',</strong>
+    'whitenoise.middleware.WhiteNoiseMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     'django.middleware.csrf.CsrfViewMiddleware',
@@ -429,246 +402,255 @@ STATIC_URL = '/static/'
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
 ]
-</pre>
+```
 
-<p>При желании вы можете уменьшить размер статических файлов при их обслуживании (это более эффективно). Просто добавьте следующее в конец /locallibrary/settings.py:</p>
+При желании вы можете уменьшить размер статических файлов при их обслуживании (это более эффективно). Просто добавьте следующее в конец /locallibrary/settings.py:
 
-<pre># Simplified static file serving.
+```
+# Simplified static file serving.
 # https://warehouse.python.org/project/whitenoise/
 STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
-</pre>
+```
 
-<h4 id="Requirements">Requirements</h4>
+#### Requirements
 
-<p>Требования Python вашего веб-приложения должны храниться в файле requirements.txt в корневом каталоге вашего репозитория. После этого Heroku автоматически установит их при восстановлении вашей среды. Вы можете создать этот файл с помощью pip в командной строке (запустите в корне repo):</p>
+Требования Python вашего веб-приложения должны храниться в файле requirements.txt в корневом каталоге вашего репозитория. После этого Heroku автоматически установит их при восстановлении вашей среды. Вы можете создать этот файл с помощью pip в командной строке (запустите в корне repo):
 
-<pre class="brush: bash">pip3 freeze &gt; requirements.txt</pre>
+```bash
+pip3 freeze > requirements.txt
+```
 
-<p>После установки всех разных зависимостей выше, файл requirements.txt должен иметь <em>по меньшей мере</em> эти перечисленные элементы (хотя номера версий могут отличаться). Удалите любые другие зависимости, не перечисленные ниже, если вы явно не добавили их для этого приложения.</p>
+После установки всех разных зависимостей выше, файл requirements.txt должен иметь _по меньшей мере_ эти перечисленные элементы (хотя номера версий могут отличаться). Удалите любые другие зависимости, не перечисленные ниже, если вы явно не добавили их для этого приложения.
 
-<pre>dj-database-url==0.4.1
+```
+dj-database-url==0.4.1
 Django==1.10.2
 gunicorn==19.6.0
-<strong>psycopg2==2.6.2</strong>
+psycopg2==2.6.2
 whitenoise==3.2.2
-</pre>
+```
 
-<div class="note">
-<p>Убедитесь, что строка  <strong>psycopg2</strong>, подобная приведённой выше, присутствует! Даже если вы не установили это локально, вы должны добавить это в <strong>requirements.txt</strong>.</p>
-</div>
+> **Примечание:** Убедитесь, что строка **psycopg2**, подобная приведённой выше, присутствует! Даже если вы не установили это локально, вы должны добавить это в **requirements.txt**.
 
-<h4 id="Среда_выполнения">Среда выполнения</h4>
+#### Среда выполнения
 
-<p>Файл <strong>runtime.txt</strong>, если определён, говорит Heroku, какой язык программирования использовать. Создайте файл в корне репо и добавьте следующий текст:</p>
+Файл **runtime.txt**, если определён, говорит Heroku, какой язык программирования использовать. Создайте файл в корне репо и добавьте следующий текст:
 
-<pre>python-3.5.2</pre>
+```
+python-3.5.2
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Heroku поддерживает только небольшое количество <a href="https://devcenter.heroku.com/articles/python-support#supported-python-runtimes">Python runtimes</a>. (на момент написания статьи, в том числе и выше). Heroku будет использовать поддерживаемую среду выполнения независимо от значения, указанного в этом файле.</p>
-</div>
+> **Примечание:** Heroku поддерживает только небольшое количество [Python runtimes](https://devcenter.heroku.com/articles/python-support#supported-python-runtimes). (на момент написания статьи, в том числе и выше). Heroku будет использовать поддерживаемую среду выполнения независимо от значения, указанного в этом файле.
 
-<h4 id="Сохраните_изменения_в_Github_и_перепроверьте">Сохраните изменения в Github и перепроверьте</h4>
+#### Сохраните изменения в Github и перепроверьте
 
-<p>Далее мы сохраним все наши изменения в Github. В терминале (whist внутри нашего репозитория) введите следующие команды:</p>
+Далее мы сохраним все наши изменения в Github. В терминале (whist внутри нашего репозитория) введите следующие команды:
 
-<pre class="brush: python">git add -A
+```python
+git add -A
 git commit -m "Added files and changes required for deployment to heroku"
-git push origin master</pre>
+git push origin master
+```
 
-<p>Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своём браузере.</p>
+Прежде чем продолжить, дайте возможность проверить сайт снова локально и убедиться, что это не повлияло ни на одно из наших изменений выше. Запустите веб-сервер разработки как обычно, а затем проверьте, работает ли сайт, как вы ожидаете в своём браузере.
 
-<pre class="brush: bash">python3 manage.py runserver</pre>
+```bash
+python3 manage.py runserver
+```
 
-<p>Теперь мы должны быть готовы начать развёртывание LocalLibrary на Heroku.</p>
+Теперь мы должны быть готовы начать развёртывание LocalLibrary на Heroku.
 
-<h3 id="Получить_аккаунт_в_heroku">Получить аккаунт в heroku</h3>
+### Получить аккаунт в heroku
 
-<p>Чтобы начать использовать Heroku, вам сначала нужно создать учётную запись:</p>
+Чтобы начать использовать Heroku, вам сначала нужно создать учётную запись:
 
-<ul>
- <li>Перейдите <a href="https://www.heroku.com/">www.heroku.com</a> и нажмите <strong>SIGN UP FOR FREE</strong> кнопку.</li>
- <li>Введите ваши данные, а затем нажмите  <strong>CREATE FREE ACCOUNT</strong>. Вам будет предложено проверить свою учётную запись по адресу электронной почты для регистрации.</li>
- <li>Нажмите ссылку активации учётной записи в электронной почте для регистрации. Вы вернётесь в свою учётную запись в веб-браузере.</li>
- <li>Введите свой пароль и нажмите  <strong>SET PASSWORD AND LOGIN</strong>.</li>
- <li>Затем вы войдёте в систему и попадёте в приборную панель Heroku: <a href="https://dashboard.heroku.com/apps">https://dashboard.heroku.com/apps</a>.</li>
-</ul>
+- Перейдите [www.heroku.com](https://www.heroku.com/) и нажмите **SIGN UP FOR FREE** кнопку.
+- Введите ваши данные, а затем нажмите **CREATE FREE ACCOUNT**. Вам будет предложено проверить свою учётную запись по адресу электронной почты для регистрации.
+- Нажмите ссылку активации учётной записи в электронной почте для регистрации. Вы вернётесь в свою учётную запись в веб-браузере.
+- Введите свой пароль и нажмите **SET PASSWORD AND LOGIN**.
+- Затем вы войдёте в систему и попадёте в приборную панель Heroku: <https://dashboard.heroku.com/apps>.
 
-<h3 id="Установка_клиента">Установка клиента</h3>
+### Установка клиента
 
-<p>Загрузите и установите клиент Heroku, следуя <a href="https://devcenter.heroku.com/articles/getting-started-with-python#set-up">инструкциям Heroku </a>здесь.</p>
+Загрузите и установите клиент Heroku, следуя [инструкциям Heroku ](https://devcenter.heroku.com/articles/getting-started-with-python#set-up)здесь.
 
-<p>После установки клиента вам будут доступны команды. Например, чтобы получить справку о клиенте:</p>
+После установки клиента вам будут доступны команды. Например, чтобы получить справку о клиенте:
 
-<pre class="brush: bash">heroku help
-</pre>
+```bash
+heroku help
+```
 
-<h3 id="Создание_и_загрузка_веб-сайта">Создание и загрузка веб-сайта</h3>
+### Создание и загрузка веб-сайта
 
-<p>Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создаёт git remote («указатель на удалённый репозиторий»), названный heroku в нашей локальной среде git.</p>
+Чтобы создать приложение, мы запускаем команду «create» в корневом каталоге нашего репозитория. Это создаёт git remote («указатель на удалённый репозиторий»), названный heroku в нашей локальной среде git.
 
-<pre class="brush: bash">heroku create</pre>
+```bash
+heroku create
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> вы можете назвать удалённый, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.</p>
-</div>
+> **Примечание:** вы можете назвать удалённый, если хотите, указав значение после «create». Если вы этого не сделаете, вы получите случайное имя. Имя используется в URL-адресе по умолчанию.
 
-<p>Затем мы можем подтолкнуть наше приложение в репозиторий heroku как показано ниже. Это позволит загрузить приложение, упаковать его в dyno, запустить collectstatic, и запустить сам сайт.</p>
+Затем мы можем подтолкнуть наше приложение в репозиторий heroku как показано ниже. Это позволит загрузить приложение, упаковать его в dyno, запустить collectstatic, и запустить сам сайт.
 
-<pre class="brush: bash">git push heroku master</pre>
+```bash
+git push heroku master
+```
 
-<p>Если нам повезёт, приложение «заработает» на сайте, но оно не будет работать должным образом, потому что мы не настроили таблицы базы данных для использования нашим приложением. Для этого нам нужно использовать команду  <code>heroku run</code> и запустить "<a href="https://devcenter.heroku.com/articles/deploying-python#one-off-dynos">one off dyno</a>" для выполнения операции переноса. Введите в терминал следующую команду:</p>
+Если нам повезёт, приложение «заработает» на сайте, но оно не будет работать должным образом, потому что мы не настроили таблицы базы данных для использования нашим приложением. Для этого нам нужно использовать команду `heroku run` и запустить "[one off dyno](https://devcenter.heroku.com/articles/deploying-python#one-off-dynos)" для выполнения операции переноса. Введите в терминал следующую команду:
 
-<pre class="brush: bash">heroku run python manage.py migrate</pre>
+```bash
+heroku run python manage.py migrate
+```
 
-<p>Мы также должны будем иметь возможность добавлять книги и авторов, поэтому давайте также создадим суперпользователя, снова используя одноразовый динамический режим:</p>
+Мы также должны будем иметь возможность добавлять книги и авторов, поэтому давайте также создадим суперпользователя, снова используя одноразовый динамический режим:
 
-<pre class="brush: bash">heroku run python manage.py createsuperuser</pre>
+```bash
+heroku run python manage.py createsuperuser
+```
 
-<p>Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем ещё нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:</p>
+Как только это будет завершено, мы можем посмотреть сайт. Он должен работать, хотя в нем ещё нет книг. Чтобы открыть браузер на новом веб-сайте, используйте команду:
 
-<pre class="brush: bash">heroku open</pre>
+```bash
+heroku open
+```
 
-<p>Создайте несколько книг на сайте администратора и проверьте, работает ли сайт, как вы ожидаете.</p>
+Создайте несколько книг на сайте администратора и проверьте, работает ли сайт, как вы ожидаете.
 
-<h3 id="Управление_аддонами">Управление аддонами</h3>
+### Управление аддонами
 
-<p>Вы можете проверить дополнения в своём приложении, используя <code>heroku addons</code> команду. Это будет список всех аддонов, их ценовая категория и состояние.</p>
+Вы можете проверить дополнения в своём приложении, используя `heroku addons` команду. Это будет список всех аддонов, их ценовая категория и состояние.
 
-<pre class="brush: bash">&gt;heroku addons
+```bash
+>heroku addons
 
 Add-on                                     Plan       Price  State
 ─────────────────────────────────────────  ─────────  ─────  ───────
 heroku-postgresql (postgresql-flat-26536)  hobby-dev  free   created
- └─ as DATABASE</pre>
+ └─ as DATABASE
+```
 
-<p>Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создаётся при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:</p>
+Здесь мы видим, что у нас есть только одна надстройка, база данных postgres SQL. Это бесплатно и автоматически создаётся при создании приложения. Вы можете открыть веб-страницу, чтобы более подробно изучить надстройку базы данных (или любое другое дополнение), используя следующую команду:
 
-<pre class="brush: bash">heroku addons:open heroku-postgresql
-</pre>
+```bash
+heroku addons:open heroku-postgresql
+```
 
-<p>Другие команды позволяют создавать, уничтожать, обновлять и понижать аддоны (используя аналогичный синтаксис для открытия). Для получения дополнительной информации см.  <a href="https://devcenter.heroku.com/articles/managing-add-ons">Managing Add-ons</a> (Heroku docs).</p>
+Другие команды позволяют создавать, уничтожать, обновлять и понижать аддоны (используя аналогичный синтаксис для открытия). Для получения дополнительной информации см. [Managing Add-ons](https://devcenter.heroku.com/articles/managing-add-ons) (Heroku docs).
 
-<h3 id="Настройка_переменных_конфигурации">Настройка переменных конфигурации</h3>
+### Настройка переменных конфигурации
 
-<p>Вы можете проверить конфигурационные переменные для сайта, используя команду  <code>heroku config</code>. Ниже вы можете видеть, что у нас есть только одна переменная <code>DATABASE_URL</code> , используемая для настройки нашей базы данных.</p>
+Вы можете проверить конфигурационные переменные для сайта, используя команду `heroku config`. Ниже вы можете видеть, что у нас есть только одна переменная `DATABASE_URL` , используемая для настройки нашей базы данных.
 
-<pre class="brush: bash">&gt;heroku config
+```bash
+>heroku config
 
 === locallibrary Config Vars
-DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3</pre>
+DATABASE_URL: postgres://uzfnbcyxidzgrl:j2jkUFDF6OGGqxkgg7Hk3ilbZI@ec2-54-243-201-144.compute-1.amazonaws.com:5432/dbftm4qgh3kda3
+```
 
-<p>Если вы вспомните из раздела, посвящённого  <a href="#Getting_your_website_ready_to_publish">getting the website ready to publish</a>, мы должны установить переменные среды для <code>DJANGO_SECRET_KEY</code> и <code>DJANGO_DEBUG</code>. Давайте сделаем это сейчас.</p>
+Если вы вспомните из раздела, посвящённого [getting the website ready to publish](#Getting_your_website_ready_to_publish), мы должны установить переменные среды для `DJANGO_SECRET_KEY` и `DJANGO_DEBUG`. Давайте сделаем это сейчас.
 
-<div class="note">
-<p><strong>Примечание:</strong> Секретный ключ должен быть действительно секретным! Один из способов генерации нового ключа - создать новый проект Django (<code>django-admin startproject someprojectname</code>) а затем получить ключ, который генерируется для вас в его <strong>settings.py</strong>.</p>
-</div>
+> **Примечание:** Секретный ключ должен быть действительно секретным! Один из способов генерации нового ключа - создать новый проект Django (`django-admin startproject someprojectname`) а затем получить ключ, который генерируется для вас в его **settings.py**.
 
-<p>Мы устанавливаем  <code>DJANGO_SECRET_KEY</code> используя команду <code>config:set</code> (как показано ниже). Не забудьте использовать свой секретный ключ!</p>
+Мы устанавливаем `DJANGO_SECRET_KEY` используя команду `config:set` (как показано ниже). Не забудьте использовать свой секретный ключ!
 
-<pre class="brush: bash">&gt;heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&amp;=
+```bash
+>heroku config:set DJANGO_SECRET_KEY=eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh&=
 
 Setting DJANGO_SECRET_KEY and restarting locallibrary... done, v7
 DJANGO_SECRET_KEY: eu09(ilk6@4sfdofb=b_2ht@vad*$ehh9-)3u_83+y%(+phh
-</pre>
+```
 
-<p>Аналогично мы устанавливаем  <code>DJANGO_DEBUG</code>:</p>
+Аналогично мы устанавливаем `DJANGO_DEBUG`:
 
-<pre class="brush: bash">&gt;heroku config:set <code>DJANGO_DEBUG=''
+```bash
+>heroku config:set DJANGO_DEBUG=''
 
-Setting DJANGO_DEBUG and restarting locallibrary... done, v8</code></pre>
+Setting DJANGO_DEBUG and restarting locallibrary... done, v8
+```
 
-<p>Если вы посетите веб-сайт сейчас, вы получите ошибку "Bad request" , потому что в  <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts">ALLOWED_HOSTS</a> надо внести параметры, если у вас <code>DEBUG=False</code> (в качестве меры безопасности). Откройте <strong>/locallibrary/settings.py</strong> и измените <code>ALLOWED_HOSTS</code> для включения вашего базового URL-адреса приложения (например, 'locallibrary1234.herokuapp.com') URL, который вы обычно используете на локальном сервере разработки.</p>
+Если вы посетите веб-сайт сейчас, вы получите ошибку "Bad request" , потому что в [ALLOWED_HOSTS](https://docs.djangoproject.com/en/1.10/ref/settings/#allowed-hosts) надо внести параметры, если у вас `DEBUG=False` (в качестве меры безопасности). Откройте **/locallibrary/settings.py** и измените `ALLOWED_HOSTS` для включения вашего базового URL-адреса приложения (например, 'locallibrary1234.herokuapp.com') URL, который вы обычно используете на локальном сервере разработки.
 
-<pre class="brush: python">ALLOWED_HOSTS = ['&lt;your app URL without the https:// prefix&gt;.herokuapp.com','127.0.0.1']
+```python
+ALLOWED_HOSTS = ['<your app URL without the https:// prefix>.herokuapp.com','127.0.0.1']
 # For example:
 # ALLOWED_HOSTS = ['fathomless-scrubland-30645.herokuapp.com','127.0.0.1']
-</pre>
+```
 
-<p>Затем сохраните настройки и передайте их в репозиторий Github и в Heroku:</p>
+Затем сохраните настройки и передайте их в репозиторий Github и в Heroku:
 
-<pre class="brush: bash">git add -A
+```bash
+git add -A
 git commit -m 'Update ALLOWED_HOSTS with site and development server URL'
 git push origin master
-git push heroku master</pre>
+git push heroku master
+```
 
-<div class="note">
-<p>После завершения обновления сайта на Heroku введите URL-адрес, который не существует (например,  <strong>/catalog/doesnotexist/</strong>). Раньше это отображало бы подробную страницу отладки, но теперь вы должны просто увидеть простую страницу «Не найдено».</p>
-</div>
+> **Примечание:** После завершения обновления сайта на Heroku введите URL-адрес, который не существует (например, **/catalog/doesnotexist/**). Раньше это отображало бы подробную страницу отладки, но теперь вы должны просто увидеть простую страницу «Не найдено».
 
-<h3 id="Отладка">Отладка</h3>
+### Отладка
 
-<p>Клиент Heroku предоставляет несколько инструментов для отладки:</p>
+Клиент Heroku предоставляет несколько инструментов для отладки:
 
-<pre class="brush: bash">heroku logs  # Show current logs
+```bash
+heroku logs  # Show current logs
 heroku logs --tail # Show current logs and keep updating with any new results
 heroku config:set DEBUG_COLLECTSTATIC=1 # Add additional logging for collectstatic (this tool is run automatically during a build)
 heroku ps   #Display dyno status
-</pre>
-
-<p>Если вам нужно больше информации, предоставленной здесь, вам нужно будет начать изучать <a href="https://docs.djangoproject.com/en/1.10/topics/logging/">Django Logging</a>.</p>
-
-<ul>
-</ul>
-
-<h2 id="Итоги">Итоги</h2>
-
-<p>Это конец этого руководства по настройке и развёртывании приложений Django, а также серия руководств по работе с Django. Надеемся, вы нашли их полезными. Вы можете проверить полностью проработанную версию <a href="https://github.com/mdn/django-locallibrary-tutorial">по исходникам на Github</a>.<br>
- Следующий шаг - прочитать наши последние несколько статей, а затем завершить оценочную задачу.</p>
-
-<h2 id="Смотрите_также">Смотрите также</h2>
-
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/">Развёртывание Django</a> (Django docs)
-
-  <ul>
-   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/">Контрольный список развёртывания</a> (Django docs)</li>
-   <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/deployment/">Развёртывание статических файлов</a> (Django docs)</li>
-   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/">Как развернуть с WSGI</a> (Django docs)</li>
-   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/modwsgi/">Как использовать Django с Apache и mod_wsgi</a> (Django docs)</li>
-   <li><a href="https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/gunicorn/">Как использовать Django с Gunicorn</a> (Django docs)</li>
-  </ul>
- </li>
- <li>Heroku
-  <ul>
-   <li><a href="https://devcenter.heroku.com/articles/django-app-configuration">Настройка Django приложений  для Heroku</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/getting-started-with-python#introduction">Начало работы в Heroku с Django</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/django-assets">Django and Static Assets</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/python-concurrency-and-database-connections">Параллелизм и подключение к базе данных в Django</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/how-heroku-works">Как Heroku работает</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/dynos">Dynos and the Dyno Manager</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/config-vars">Настройка и Config Vars</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/limits">Ограничения</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/python-gunicorn">Развёртывание Python applications с Gunicorn</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/articles/deploying-python">Развёртывание Python и Django apps в Heroku</a> (Heroku docs)</li>
-   <li><a href="https://devcenter.heroku.com/search?q=django">Ещё о Heroku Django docs</a></li>
-  </ul>
- </li>
- <li>Digital Ocean
-  <ul>
-   <li><a href="https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04">Как обслуживать Django Applications вместе с uWSGI и Nginx в Ubuntu 16.04</a></li>
-   <li><a href="https://www.digitalocean.com/community/tutorials?q=django">Другие документы Digital Ocean Django</a></li>
-  </ul>
- </li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
-</ul>
+```
+
+Если вам нужно больше информации, предоставленной здесь, вам нужно будет начать изучать [Django Logging](https://docs.djangoproject.com/en/1.10/topics/logging/).
+
+## Итоги
+
+Это конец этого руководства по настройке и развёртывании приложений Django, а также серия руководств по работе с Django. Надеемся, вы нашли их полезными. Вы можете проверить полностью проработанную версию [по исходникам на Github](https://github.com/mdn/django-locallibrary-tutorial).
+Следующий шаг - прочитать наши последние несколько статей, а затем завершить оценочную задачу.
+
+## Смотрите также
+
+- [Развёртывание Django](https://docs.djangoproject.com/en/1.10/howto/deployment/) (Django docs)
+
+  - [Контрольный список развёртывания](https://docs.djangoproject.com/en/1.10/howto/deployment/checklist/) (Django docs)
+  - [Развёртывание статических файлов](https://docs.djangoproject.com/en/1.10/howto/static-files/deployment/) (Django docs)
+  - [Как развернуть с WSGI](https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/) (Django docs)
+  - [Как использовать Django с Apache и mod_wsgi](https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/modwsgi/) (Django docs)
+  - [Как использовать Django с Gunicorn](https://docs.djangoproject.com/en/1.10/howto/deployment/wsgi/gunicorn/) (Django docs)
+
+- Heroku
+
+  - [Настройка Django приложений для Heroku](https://devcenter.heroku.com/articles/django-app-configuration) (Heroku docs)
+  - [Начало работы в Heroku с Django](https://devcenter.heroku.com/articles/getting-started-with-python#introduction) (Heroku docs)
+  - [Django and Static Assets](https://devcenter.heroku.com/articles/django-assets) (Heroku docs)
+  - [Параллелизм и подключение к базе данных в Django](https://devcenter.heroku.com/articles/python-concurrency-and-database-connections) (Heroku docs)
+  - [Как Heroku работает](https://devcenter.heroku.com/articles/how-heroku-works) (Heroku docs)
+  - [Dynos and the Dyno Manager](https://devcenter.heroku.com/articles/dynos) (Heroku docs)
+  - [Настройка и Config Vars](https://devcenter.heroku.com/articles/config-vars) (Heroku docs)
+  - [Ограничения](https://devcenter.heroku.com/articles/limits) (Heroku docs)
+  - [Развёртывание Python applications с Gunicorn](https://devcenter.heroku.com/articles/python-gunicorn) (Heroku docs)
+  - [Развёртывание Python и Django apps в Heroku](https://devcenter.heroku.com/articles/deploying-python) (Heroku docs)
+  - [Ещё о Heroku Django docs](https://devcenter.heroku.com/search?q=django)
+
+- Digital Ocean
+
+  - [Как обслуживать Django Applications вместе с uWSGI и Nginx в Ubuntu 16.04](https://www.digitalocean.com/community/tutorials/how-to-serve-django-applications-with-uwsgi-and-nginx-on-ubuntu-16-04)
+  - [Другие документы Digital Ocean Django](https://www.digitalocean.com/community/tutorials?q=django)
+
+{{PreviousMenuNext("Learn/Server-side/Django/Testing", "Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
+
+## В этом модуле
+
+- [Django introduction](/ru/docs/Learn/Server-side/Django/Introduction)
+- [Setting up a Django development environment](/ru/docs/Learn/Server-side/Django/development_environment)
+- [Django Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website)
+- [Django Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Django/skeleton_website)
+- [Django Tutorial Part 3: Using models](/ru/docs/Learn/Server-side/Django/Models)
+- [Django Tutorial Part 4: Django admin site](/ru/docs/Learn/Server-side/Django/Admin_site)
+- [Django Tutorial Part 5: Creating our home page](/ru/docs/Learn/Server-side/Django/Home_page)
+- [Django Tutorial Part 6: Generic list and detail views](/ru/docs/Learn/Server-side/Django/Generic_views)
+- [Django Tutorial Part 7: Sessions framework](/ru/docs/Learn/Server-side/Django/Sessions)
+- [Django Tutorial Part 8: User authentication and permissions](/ru/docs/Learn/Server-side/Django/Authentication)
+- [Django Tutorial Part 9: Working with forms](/ru/docs/Learn/Server-side/Django/Forms)
+- [Django Tutorial Part 10: Testing a Django web application](/ru/docs/Learn/Server-side/Django/Testing)
+- [Django Tutorial Part 11: Deploying Django to production](/ru/docs/Learn/Server-side/Django/Deployment)
+- [Django web application security](/ru/docs/Learn/Server-side/Django/web_application_security)
+- [DIY Django mini blog](/ru/docs/Learn/Server-side/Django/django_assessment_blog)
diff --git a/files/ru/learn/server-side/django/development_environment/index.md b/files/ru/learn/server-side/django/development_environment/index.md
index 950643d29b20e7..0f73b6740220c4 100644
--- a/files/ru/learn/server-side/django/development_environment/index.md
+++ b/files/ru/learn/server-side/django/development_environment/index.md
@@ -3,350 +3,333 @@ title: Setting up a Django development environment
 slug: Learn/Server-side/Django/development_environment
 translation_of: Learn/Server-side/Django/development_environment
 ---
-<p>{{LearnSidebar}}</p>
+{{LearnSidebar}}
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Introduction", "Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django")}}
 
-<p>Теперь, когда вы знаете, что такое Django, мы покажем вам, как настроить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Django.</p>
+Теперь, когда вы знаете, что такое Django, мы покажем вам, как настроить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Django.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Знание как открыть терминал / командную строку, как устанавливать программные пакеты в операционной системе вашего компьютера.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Создать среду разработки для Django (1.10) и запустить её на вашем компьютере.</td>
-  </tr>
- </tbody>
-</table>
+| Требования: | Знание как открыть терминал / командную строку, как устанавливать программные пакеты в операционной системе вашего компьютера. |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Задача:     | Создать среду разработки для Django (1.10) и запустить её на вашем компьютере.                                                 |
 
-<h2 id="Обзор_среды_разработки_Django">Обзор среды разработки Django</h2>
+## Обзор среды разработки Django
 
-<p>Django упрощает настройку собственного компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, что входит в состав среды разработки, и даётся обзор некоторых параметров настройки и конфигурации. В оставшейся части статьи объясняется рекомендуемый метод установки среды разработки Django на Ubuntu, Mac OS X и Windows, и как вы можете её протестировать.</p>
+Django упрощает настройку собственного компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, что входит в состав среды разработки, и даётся обзор некоторых параметров настройки и конфигурации. В оставшейся части статьи объясняется рекомендуемый метод установки среды разработки Django на Ubuntu, Mac OS X и Windows, и как вы можете её протестировать.
 
-<h3 id="Что_такое_среда_разработки_Django">Что такое среда разработки Django?</h3>
+### Что такое среда разработки Django?
 
-<p>Среда разработки - это установка Django на вашем локальном компьютере, которую вы можете использовать для разработки и тестирования приложений Django до их развёртывания в производственной среде.<br>
- <br>
- Основными инструментами, которые предоставляет сам Django, является набор скриптов Python для создания и работы с проектами Django, а также простой веб-сервер <em>разработки</em>, который можно использовать для тестирования локальных (то есть на вашем компьютере, а не на внешнем веб-сервере) веб-приложений Django на веб-браузере вашего компьютера.<br>
- <br>
- Существуют и другие периферийные инструменты, являющиеся частью среды разработки, которые мы не будем освещать здесь. К ним относятся такие вещи, как текстовый редактор или IDE для редактирования кода, и инструмент управления исходным кодом, например Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что у вас уже установлен текстовый редактор.</p>
+Среда разработки - это установка Django на вашем локальном компьютере, которую вы можете использовать для разработки и тестирования приложений Django до их развёртывания в производственной среде.
 
-<h3 id="Какие_есть_разновидности_установки_Django">Какие есть разновидности установки Django ?</h3>
+Основными инструментами, которые предоставляет сам Django, является набор скриптов Python для создания и работы с проектами Django, а также простой веб-сервер _разработки_, который можно использовать для тестирования локальных (то есть на вашем компьютере, а не на внешнем веб-сервере) веб-приложений Django на веб-браузере вашего компьютера.
 
-<p>Django очень гибок с точки зрения способа и места установки и настройки. Django может быть:</p>
+Существуют и другие периферийные инструменты, являющиеся частью среды разработки, которые мы не будем освещать здесь. К ним относятся такие вещи, как текстовый редактор или IDE для редактирования кода, и инструмент управления исходным кодом, например Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что у вас уже установлен текстовый редактор.
 
-<ul>
- <li>установлен на различных операционных системах,</li>
- <li>установлен из исходного кода, из Python Package Index (PyPi) и во многих случаях из любого менеджера пакетов,</li>
- <li>настроен на использование различных баз данных, которые должны быть установлены и настроены отдельно,</li>
- <li>запущен в основной системе окружения Python или в отдельном виртуальном окружении Python.</li>
-</ul>
+### Какие есть разновидности установки Django ?
 
-<p>Каждый из этих вариантов требует немного разной настройки и установки. Следующие подразделы объяснят некоторые аспекты вашего выбора. Далее мы покажем вам, как установить Django на некоторые операционные системы, и эта установка будет предполагаться на всём протяжении данного модуля.</p>
+Django очень гибок с точки зрения способа и места установки и настройки. Django может быть:
 
-<div class="note">
-<p><strong>Замечание</strong>: Другие возможные способы установки можно найти в официальной документации Django. Мы ссылаемся на <a href="#furtherreading">соответствующие документы</a>.</p>
-</div>
+- установлен на различных операционных системах,
+- установлен из исходного кода, из Python Package Index (PyPi) и во многих случаях из любого менеджера пакетов,
+- настроен на использование различных баз данных, которые должны быть установлены и настроены отдельно,
+- запущен в основной системе окружения Python или в отдельном виртуальном окружении Python.
 
-<h4 id="Какие_операционные_системы_поддерживаются">Какие операционные системы поддерживаются?</h4>
+Каждый из этих вариантов требует немного разной настройки и установки. Следующие подразделы объяснят некоторые аспекты вашего выбора. Далее мы покажем вам, как установить Django на некоторые операционные системы, и эта установка будет предполагаться на всём протяжении данного модуля.
 
-<p>Веб-приложения Django можно запускать почти на любых машинах, которые поддерживают язык программирования Python 3, среди прочих: Windows, Mac OS X, Linux/Unix, Solaris. Почти любой компьютер имеет необходимую производительность для запуска Django во время разработки.</p>
+> **Примечание:** **Замечание**: Другие возможные способы установки можно найти в официальной документации Django. Мы ссылаемся на [соответствующие документы](#furtherreading).
 
-<p>В этой статье мы предоставляем инструкции для Windows, Mac OS X, and Linux/Unix.</p>
+#### Какие операционные системы поддерживаются?
 
-<h4 id="Какую_версию_Python_стоит_использовать">Какую версию Python стоит использовать?</h4>
+Веб-приложения Django можно запускать почти на любых машинах, которые поддерживают язык программирования Python 3, среди прочих: Windows, Mac OS X, Linux/Unix, Solaris. Почти любой компьютер имеет необходимую производительность для запуска Django во время разработки.
 
-<p>Мы рекомендуем использовать самую последнюю доступную версию - на момент написания статьи это Python 3.6.</p>
+В этой статье мы предоставляем инструкции для Windows, Mac OS X, and Linux/Unix.
 
-<div class="note">
-<p><strong>Замечание</strong>: Python 2.7 не может быть использован вместе с Django 2.0 (последние поддерживаемые серии для Python 2.7 - Django 1.11.x).</p>
-</div>
+#### Какую версию Python стоит использовать?
 
-<h4 id="Откуда_можно_скачать_Django">Откуда можно скачать Django?</h4>
+Мы рекомендуем использовать самую последнюю доступную версию - на момент написания статьи это Python 3.6.
 
-<p>Для загрузки Django можно воспользоваться 3 источниками:</p>
+> **Примечание:** **Замечание**: Python 2.7 не может быть использован вместе с Django 2.0 (последние поддерживаемые серии для Python 2.7 - Django 1.11.x).
 
-<ul>
- <li>The Python Package Repository (PyPi), при помощи инструмента <em>pip</em>. Это лучший способ получения последней стабильной версии Django.</li>
- <li>Использование версии из менеджера пакетов вашего компьютера. Такие дистрибутивы Django, собранные для конкретных операционных систем, предлагают знакомый механизм установки. Однако обратите внимание на то, что пакетные версии могут быть достаточно старыми и установлены только в системную среду Python (что может отличаться от ваших желаний).</li>
- <li>Установка из исходного кода. Вы можете получить и установить последний выпуск Django из исходного кода. Этот способ не рекомендован для новичков, но необходим в случае, когда вы готовы начать вносить собственный вклад в проект Django.</li>
-</ul>
+#### Откуда можно скачать Django?
 
-<p>Данный материал описывает способ установки Django из PyPi с целью получения последней стабильной версии.</p>
+Для загрузки Django можно воспользоваться 3 источниками:
 
-<h4 id="Какую_базу_данных_выбрать">Какую базу данных выбрать?</h4>
+- The Python Package Repository (PyPi), при помощи инструмента _pip_. Это лучший способ получения последней стабильной версии Django.
+- Использование версии из менеджера пакетов вашего компьютера. Такие дистрибутивы Django, собранные для конкретных операционных систем, предлагают знакомый механизм установки. Однако обратите внимание на то, что пакетные версии могут быть достаточно старыми и установлены только в системную среду Python (что может отличаться от ваших желаний).
+- Установка из исходного кода. Вы можете получить и установить последний выпуск Django из исходного кода. Этот способ не рекомендован для новичков, но необходим в случае, когда вы готовы начать вносить собственный вклад в проект Django.
 
-<p>Django поддерживает 4 основных базы данных (PostgreSQL, MySQL, Oracle и SQLite), также есть публичные библиотеки, которые предоставляют разные уровни поддержки других SQL и NoSQL баз данных. Мы рекомендуем вам выбрать одинаковую БД для обеих рабочей и разрабатываемой сред (несмотря на  то, что Django нивелирует множество различий баз данных при помощи Object-Relational Mapper (ORM), всё равно возможны потенциальные <a href="https://docs.djangoproject.com/en/2.0/ref/databases/">проблемы</a>, которых лучше избегать.</p>
+Данный материал описывает способ установки Django из PyPi с целью получения последней стабильной версии.
 
-<p>Для данной статьи (и большей части модуля) мы будем использовать базу данных <em>SQLite</em>, которая сохраняет свои данные в файл. SQLite предназначен для использования в качестве облегчённой базы данных и не может поддерживать высокий уровень параллелизма. Это, однако, отличный выбор для приложений, которые в основном предназначены только для чтения.</p>
+#### Какую базу данных выбрать?
 
-<div class="note">
-<p><strong>Замечание</strong>: Django сконфигурирован для использования SQLite по умолчанию, при создании вашего проекта с использованием стандартных инструментов (django-admin). Это отличный выбор для начала работы, потому что он не требует дополнительной настройки.</p>
-</div>
+Django поддерживает 4 основных базы данных (PostgreSQL, MySQL, Oracle и SQLite), также есть публичные библиотеки, которые предоставляют разные уровни поддержки других SQL и NoSQL баз данных. Мы рекомендуем вам выбрать одинаковую БД для обеих рабочей и разрабатываемой сред (несмотря на то, что Django нивелирует множество различий баз данных при помощи Object-Relational Mapper (ORM), всё равно возможны потенциальные [проблемы](https://docs.djangoproject.com/en/2.0/ref/databases/), которых лучше избегать.
 
-<h4 id="Глобальная_установка_или_установка_в_виртуальную_среду_Python">Глобальная установка или установка в виртуальную среду Python?</h4>
+Для данной статьи (и большей части модуля) мы будем использовать базу данных _SQLite_, которая сохраняет свои данные в файл. SQLite предназначен для использования в качестве облегчённой базы данных и не может поддерживать высокий уровень параллелизма. Это, однако, отличный выбор для приложений, которые в основном предназначены только для чтения.
 
-<p>Когда вы устанавливаете Python 3 на свой компьютер, вы получаете единую глобальную среду (набор установленных пакетов) для вашего кода Python, которая доступна любому коду на компьютере. Вы можете установить любые пакеты Python, необходимые вам в этой среде, но только одну конкретную версию конкретного пакета.</p>
+> **Примечание:** **Замечание**: Django сконфигурирован для использования SQLite по умолчанию, при создании вашего проекта с использованием стандартных инструментов (django-admin). Это отличный выбор для начала работы, потому что он не требует дополнительной настройки.
 
-<div class="note">
-<p><strong>Замечание</strong>: Установленные в глобальную среду приложения Python потенциально могут конфликтовать друг с другом (т.е. если они зависят от разных версий одного и того же пакета).</p>
-</div>
+#### Глобальная установка или установка в виртуальную среду Python?
 
-<p>Если вы устанавливаете Django в среду по умолчанию (глобальную), то будете способны сфокусироваться на одной версии Django на вашем компьютере. Это может быть проблемой в случае, если вы захотите создать новые веб-сайты (при помощи новой версии Django) во время поддержки веб-сайтов со старой версией.</p>
+Когда вы устанавливаете Python 3 на свой компьютер, вы получаете единую глобальную среду (набор установленных пакетов) для вашего кода Python, которая доступна любому коду на компьютере. Вы можете установить любые пакеты Python, необходимые вам в этой среде, но только одну конкретную версию конкретного пакета.
 
-<p>По этой причине опытные разработчики Python / Django часто предпочитают вместо этого запускать свои приложения Python в независимых <em>виртуальных средах Python</em>. Это позволяет разработчикам иметь несколько разных сред Django на одном компьютере. Команда разработчиков Django сама рекомендует использовать виртуальные среды Python!</p>
+> **Примечание:** **Замечание**: Установленные в глобальную среду приложения Python потенциально могут конфликтовать друг с другом (т.е. если они зависят от разных версий одного и того же пакета).
 
-<p>Этот модуль предполагает вашу установку Django в виртуальную среду, и мы покажем, как это сделать.</p>
+Если вы устанавливаете Django в среду по умолчанию (глобальную), то будете способны сфокусироваться на одной версии Django на вашем компьютере. Это может быть проблемой в случае, если вы захотите создать новые веб-сайты (при помощи новой версии Django) во время поддержки веб-сайтов со старой версией.
 
-<h2 id="Установка_Python_3">Установка Python 3</h2>
+По этой причине опытные разработчики Python / Django часто предпочитают вместо этого запускать свои приложения Python в независимых _виртуальных средах Python_. Это позволяет разработчикам иметь несколько разных сред Django на одном компьютере. Команда разработчиков Django сама рекомендует использовать виртуальные среды Python!
 
-<p>Для использования Django вам необходимо установить <em>Python 3</em> на свою операционную систему. Вам также понадобится инструмент <a href="https://pypi.python.org/pypi">Python Package Index</a> — <em>pip3</em> — который используется для управления (установка, обновление и удаление) библиотек/пакетов Python, используемых Django и другими вашими приложениями Python.</p>
+Этот модуль предполагает вашу установку Django в виртуальную среду, и мы покажем, как это сделать.
 
-<p>Этот раздел коротко описывает то, как вы можете проверить имеющиеся версии и при необходимости установить новые для Ubuntu Linux 16.04, Mac OS X, and Windows 10.</p>
+## Установка Python 3
 
-<div class="note">
-<p><strong>Замечание</strong>: В зависимости от платформы, вы можете иметь возможность установки Python/pip из собственного менеджера пакетов операционной системы или при помощи других инструментов. Для большинства платформ вы можете скачать необходимые установочные файлы из <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a> и установить их при помощи соответствующего специфичного для платформы метода.</p>
-</div>
+Для использования Django вам необходимо установить _Python 3_ на свою операционную систему. Вам также понадобится инструмент [Python Package Index](https://pypi.python.org/pypi) — _pip3_ — который используется для управления (установка, обновление и удаление) библиотек/пакетов Python, используемых Django и другими вашими приложениями Python.
 
-<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
+Этот раздел коротко описывает то, как вы можете проверить имеющиеся версии и при необходимости установить новые для Ubuntu Linux 16.04, Mac OS X, and Windows 10.
 
-<p>Ubuntu Linux включает в себя Python 3 по умолчанию. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p>
+> **Примечание:** **Замечание**: В зависимости от платформы, вы можете иметь возможность установки Python/pip из собственного менеджера пакетов операционной системы или при помощи других инструментов. Для большинства платформ вы можете скачать необходимые установочные файлы из <https://www.python.org/downloads/> и установить их при помощи соответствующего специфичного для платформы метода.
 
-<pre>python3 -V
- Python 3.5.2</pre>
+### Ubuntu 16.04
 
-<p>Однако, инструмент Python Package Index, при помощи которого вам нужно будет установить пакеты для  Python 3 (включая Django), по умолчанию <strong>не установлен</strong>. Вы можете установить pip3 через терминал bash при помощи:</p>
+Ubuntu Linux включает в себя Python 3 по умолчанию. Вы можете удостовериться в этом, выполнив следующую команду в терминале:
 
-<pre>sudo apt-get install python3-pip
-</pre>
+```
+python3 -V
+ Python 3.5.2
+```
+
+Однако, инструмент Python Package Index, при помощи которого вам нужно будет установить пакеты для Python 3 (включая Django), по умолчанию **не установлен**. Вы можете установить pip3 через терминал bash при помощи:
+
+```
+sudo apt-get install python3-pip
+```
 
-<h3 id="Mac_OS_X">Mac OS X</h3>
+### Mac OS X
 
-<p>Mac OS X "El Capitan" не включает Python 3. Вы можете удостовериться в этом, выполнив следующую команду в терминале:</p>
+Mac OS X "El Capitan" не включает Python 3. Вы можете удостовериться в этом, выполнив следующую команду в терминале:
 
-<pre>python3 -V
- -bash: python3: command not found</pre>
+```
+python3 -V
+ -bash: python3: command not found
+```
 
-<p>Вы можете легко установить Python 3 (вместе с инструментом <em>pip3</em>) с<a href="https://www.python.org/"> python.org</a>:</p>
+Вы можете легко установить Python 3 (вместе с инструментом _pip3_) с[ python.org](https://www.python.org/):
 
-<ol>
- <li>Скачайте нужный установочный файл:
-  <ol>
-   <li>Перейдите в <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
-   <li>Нажмите на кнопку <strong>Скачать Python 3.6.4</strong> (точная основная версия может отличаться).</li>
-  </ol>
- </li>
- <li>Найдите файл при помощи <em>Finder</em>, дважды кликните по нему и следуйте подсказкам по установке.</li>
-</ol>
+1.  Скачайте нужный установочный файл:
 
-<p>Удостовериться в успешной установке вы можете проверкой на наличие  <em>Python 3</em>, как показано ниже:</p>
+    1.  Перейдите в <https://www.python.org/downloads/>
+    2.  Нажмите на кнопку **Скачать Python 3.6.4** (точная основная версия может отличаться).
 
-<pre>python3 -V
+2.  Найдите файл при помощи _Finder_, дважды кликните по нему и следуйте подсказкам по установке.
+
+Удостовериться в успешной установке вы можете проверкой на наличие _Python 3_, как показано ниже:
+
+```
+python3 -V
  Python 3.5.20
-</pre>
+```
+
+Подобным образом вы можете проверить установку _pip3_, отобразив список доступных пакетов:
 
-<p>Подобным образом вы можете проверить установку <em>pip3</em>, отобразив список доступных пакетов:</p>
+```
+pip3 list
+```
 
-<pre>pip3 list</pre>
+### Windows 10
 
-<h3 id="Windows_10">Windows 10</h3>
+Windows не включает Python по умолчанию, но вы можете легко установить его (вместе с инструментом _pip_) с[ python.org](https://www.python.org/):
 
-<p>Windows не включает Python по умолчанию, но вы можете легко установить его (вместе с инструментом <em>pip</em>) с<a href="https://www.python.org/"> python.org</a>:</p>
+1.  Скачайте нужный установочный файл:
 
-<ol>
- <li>Скачайте нужный установочный файл:
-  <ol>
-   <li>Перейдите в <a href="https://www.python.org/downloads/">https://www.python.org/downloads/</a></li>
-   <li>Нажмите на кнопку <strong>Скачать Python 3.6.4</strong> (точная основная версия может отличаться).</li>
-  </ol>
- </li>
- <li>Установите Python, дважды кликнув на скачанный файл и следуя инструкциям по установке.</li>
-</ol>
+    1.  Перейдите в <https://www.python.org/downloads/>
+    2.  Нажмите на кнопку **Скачать Python 3.6.4** (точная основная версия может отличаться).
 
-<p>После этого вы сможете подтвердить успешную установку Python путём выполнения следующего текста в командной строке:</p>
+2.  Установите Python, дважды кликнув на скачанный файл и следуя инструкциям по установке.
 
-<pre>py -3 -V
+После этого вы сможете подтвердить успешную установку Python путём выполнения следующего текста в командной строке:
+
+```
+py -3 -V
  Python 3.5.2
-</pre>
+```
 
-<p>Установщик Windows включает в себя <em>pip3</em> (менеджер пакетов Python) по умолчанию. Вы можете отобразить список установленных пакетов, как показано далее:</p>
+Установщик Windows включает в себя _pip3_ (менеджер пакетов Python) по умолчанию. Вы можете отобразить список установленных пакетов, как показано далее:
 
-<pre>pip list
-</pre>
+```
+pip list
+```
 
-<div class="note">
-<p><strong>Замечание</strong>: Установщик должен сделать все, что необходимо для корректной работы указанной команды. Однако, если вы видите сообщение о том, что Python не может быть найден, вам может потребоваться добавить его в системный путь.</p>
-</div>
+> **Примечание:** **Замечание**: Установщик должен сделать все, что необходимо для корректной работы указанной команды. Однако, если вы видите сообщение о том, что Python не может быть найден, вам может потребоваться добавить его в системный путь.
 
-<h2 id="Использование_Django_внутри_виртуальной_среды_Python">Использование Django внутри виртуальной среды Python</h2>
+## Использование Django внутри виртуальной среды Python
 
-<p>Для создания виртуальных сред мы будем использовать библиотеки <a href="https://virtualenvwrapper.readthedocs.io/en/latest/index.html">virtualenvwrapper</a> (Linux и macOS X) и <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> (Windows), которые в свою очередь обе используют инструмент <a href="https://developer.mozilla.org/en-US/docs/Python/Virtualenv">virtualenv</a>. Инструмент обёртки предоставляет совместимый интерфейс для управления интерфейсами на всех платформах.</p>
+Для создания виртуальных сред мы будем использовать библиотеки [virtualenvwrapper](https://virtualenvwrapper.readthedocs.io/en/latest/index.html) (Linux и macOS X) и [virtualenvwrapper-win](https://pypi.python.org/pypi/virtualenvwrapper-win) (Windows), которые в свою очередь обе используют инструмент [virtualenv](/ru/docs/Python/Virtualenv). Инструмент обёртки предоставляет совместимый интерфейс для управления интерфейсами на всех платформах.
 
-<h3 id="Установка_ПО_виртуальной_среды">Установка ПО виртуальной среды</h3>
+### Установка ПО виртуальной среды
 
-<h4 id="Установка_виртуальной_среды_для_Ubuntu">Установка виртуальной среды для Ubuntu</h4>
+#### Установка виртуальной среды для Ubuntu
 
-<p>После установки Python и pip вы можете установить <em>virtualenvwrapper </em>(который включает в себя <em>virtualenv</em>). Вы можете либо воспользоваться официальной инструкций по установке <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">отсюда</a>, либо следовать следующим инструкциям:</p>
+После установки Python и pip вы можете установить _virtualenvwrapper_ (который включает в себя _virtualenv_). Вы можете либо воспользоваться официальной инструкций по установке [отсюда](http://virtualenvwrapper.readthedocs.io/en/latest/install.html), либо следовать следующим инструкциям:
 
-<p>Установите инструмент при помощи pip3:</p>
+Установите инструмент при помощи pip3:
 
-<pre><code>sudo pip3 install virtualenvwrapper</code>
-</pre>
+```
+sudo pip3 install virtualenvwrapper
+```
 
-<p>Затем добавьте следующие строки в конец файла загрузки программной оболочки (shell) (это скрытый файл в вашей домашней директории с именем <strong>.bashrc</strong>). Они устанавливают расположение виртуальных сред, расположение каталога разрабатываемого проекта и расположение установленного с этим пакетом скрипта.</p>
+Затем добавьте следующие строки в конец файла загрузки программной оболочки (shell) (это скрытый файл в вашей домашней директории с именем **.bashrc**). Они устанавливают расположение виртуальных сред, расположение каталога разрабатываемого проекта и расположение установленного с этим пакетом скрипта.
 
-<pre><code>export WORKON_HOME=$HOME/.virtualenvs
+```
+export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export VIRTUALENVWRAPPER_VIRTUALENV_ARGS=' -p /usr/bin/python3 '
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh</code>
-</pre>
+source /usr/local/bin/virtualenvwrapper.sh
+```
 
-<p>Затем перезагрузите файл загрузки, выполнив в терминале следующую команду:</p>
+Затем перезагрузите файл загрузки, выполнив в терминале следующую команду:
 
-<pre><code>source ~/.bashrc</code>
-</pre>
+```
+source ~/.bashrc
+```
 
-<p>В этот момент вы должны увидеть запуск группы скриптов, как показано ниже:</p>
+В этот момент вы должны увидеть запуск группы скриптов, как показано ниже:
 
-<pre><code>virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
+```
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/premkproject
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postmkproject
 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/preactivate
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/postactivate
-virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details</code>
-</pre>
+virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/get_env_details
+```
 
-<p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualenv</code>.</p>
+Теперь вы можете создать новую виртуальную среду при помощи команды `mkvirtualenv`.
 
-<h4 id="Установка_виртуальной_среды_для_macOS_X">Установка виртуальной среды для macOS X</h4>
+#### Установка виртуальной среды для macOS X
 
-<p>Установка <em>virtualenvwrapper </em>на macOS X почти идентична Ubuntu (и снова вы можете воспользоваться либо <a href="http://virtualenvwrapper.readthedocs.io/en/latest/install.html">официальными</a>, либо следующими инструкциями).</p>
+Установка _virtualenvwrapper_ на macOS X почти идентична Ubuntu (и снова вы можете воспользоваться либо [официальными](http://virtualenvwrapper.readthedocs.io/en/latest/install.html), либо следующими инструкциями).
 
-<p>Установите инструмент при помощи pip3:</p>
+Установите инструмент при помощи pip3:
 
-<pre><code>sudo pip3 install virtualenvwrapper</code>
-</pre>
+```
+sudo pip3 install virtualenvwrapper
+```
 
-<p>Затем добавьте следующие строки в конец вашего файла загрузки программной оболочки:</p>
+Затем добавьте следующие строки в конец вашего файла загрузки программной оболочки:
 
-<pre><code>export WORKON_HOME=$HOME/.virtualenvs
+```
+export WORKON_HOME=$HOME/.virtualenvs
 export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3
 export PROJECT_HOME=$HOME/Devel
-source /usr/local/bin/virtualenvwrapper.sh</code>
-</pre>
-
-<div class="note">
-<p><strong>Замечание</strong>: Переменная <code>VIRTUALENVWRAPPER_PYTHON</code> указывает на обычное расположение Python3. Если virtualenv не работает во время тестирования, то вам следует проверить, находится ли интерпретатор Python в нужном расположении (и затем поменять его соответствующим образом в значении переменной).</p>
-</div>
-
-<p>Эти строки такие же, как в случае с Ubuntu, но файл загрузки в вашей домашней директории назван иначе - <strong>.bash_profile</strong>. </p>
+source /usr/local/bin/virtualenvwrapper.sh
+```
 
-<div class="note">
-<p><strong>Замечание</strong>: Если вы не можете найти и изменить <strong>.bash_profile </strong>при помощи Finder, то можно также открыть его при помощи редактора терминала <em>nano</em>.</p>
+> **Примечание:** **Замечание**: Переменная `VIRTUALENVWRAPPER_PYTHON` указывает на обычное расположение Python3. Если virtualenv не работает во время тестирования, то вам следует проверить, находится ли интерпретатор Python в нужном расположении (и затем поменять его соответствующим образом в значении переменной).
 
-<p>Команды в этом случае выглядят примерно так:</p>
+Эти строки такие же, как в случае с Ubuntu, но файл загрузки в вашей домашней директории назван иначе - **.bash_profile**.
 
+> **Примечание:** **Замечание**: Если вы не можете найти и изменить **.bash_profile** при помощи Finder, то можно также открыть его при помощи редактора терминала _nano_.
+>
+> Команды в этом случае выглядят примерно так:
+>
+> ```
+> cd ~ # Navigate to my home directory
+> ls -la #List the content of the directory. You should see .bash_profile
+> nano .bash_profile # Open the file in the nano text editor, within the terminal
+> # Scroll to the end of the file, and copy in the lines above
+> # Use Ctrl+X to exit nano, Choose Y to save the file.
+> ```
 
+После этого перезагрузите файл загрузки путём выполнения следующей команды в терминале:
 
-<pre><code>cd ~ # Navigate to my home directory
-ls -la #List the content of the directory. You should see .bash_profile
-nano .bash_profile # Open the file in the nano text editor, within the terminal
-# Scroll to the end of the file, and copy in the lines above
-# Use Ctrl+X to exit nano, Choose Y to save the file.</code>
-</pre>
-</div>
+```
+source ~/.bash_profile
+```
 
-<p>После этого перезагрузите файл загрузки путём выполнения следующей команды в терминале:</p>
+В этот момент вы должны увидеть запуск группы скриптов (те же скрипты, что и в случае установки на Ubuntu).
 
-<pre><code>source ~/.bash_profile</code>
-</pre>
+Теперь вы должны иметь возможность создания новой виртуальной среды при помощи команды `mkvirtualenv`.
 
-<p>В этот момент вы должны увидеть запуск группы скриптов (те же скрипты, что и в случае установки на Ubuntu).</p>
+#### Установка виртуальной среды для Windows 10
 
-<p>Теперь вы должны иметь возможность создания новой виртуальной среды при помощи команды <code>mkvirtualenv</code>.</p>
+Установка [virtualenvwrapper-win](https://pypi.python.org/pypi/virtualenvwrapper-win) ещё более проста, чем установка _virtualenvwrapper_, потому что вам не нужно настраивать расположения сохранения информации о виртуальной среде инструментом (эти значения заданы по умолчанию). Все, что вам нужно сделать, это запустить следующую команду в командной строке:
 
-<h4 id="Установка_виртуальной_среды_для_Windows_10">Установка виртуальной среды для Windows 10</h4>
+```
+pip3 install virtualenvwrapper-win
+```
 
-<p>Установка <a href="https://pypi.python.org/pypi/virtualenvwrapper-win">virtualenvwrapper-win</a> ещё более проста, чем установка <em>virtualenvwrapper</em>, потому что вам не нужно настраивать расположения сохранения информации о виртуальной среде инструментом (эти значения заданы по умолчанию). Все, что вам нужно сделать, это запустить следующую команду в командной строке:</p>
+Теперь вы можете создать новую виртуальную среду при помощи команды `mkvirtualen`.
 
-<pre><code>pip3 install virtualenvwrapper-win</code></pre>
+### Создание виртуальной среды
 
-<p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualen</code>.</p>
+После установки _virtualenvwrapper_ и _virtualenvwrapper-win_ работа с виртуальными средами становится одинаковой для всех платформ.
 
-<h3 id="Создание_виртуальной_среды">Создание виртуальной среды</h3>
+Теперь вы можете создать новую виртуальную среду при помощи команды `mkvirtualenv`. Во время запуска команды вы увидите установку виртуальной среды (конкретные результаты команды очень зависят от платформы). После выполнения команды активируется новая виртуальная среда — заметить это вы можете по тому, что началом ввода будет название виртуальной среды в круглых скобках (как показано ниже).
 
-<p>После установки <em>virtualenvwrapper</em> и <em>virtualenvwrapper-win</em> работа с виртуальными средами становится одинаковой для всех платформ.</p>
-
-<p>Теперь вы можете создать новую виртуальную среду при помощи команды <code>mkvirtualenv</code>. Во время запуска команды вы увидите установку виртуальной среды (конкретные результаты команды очень зависят от платформы). После выполнения команды активируется новая виртуальная среда — заметить это вы можете по тому, что началом ввода будет название виртуальной среды в круглых скобках (как показано ниже).</p>
-
-<pre><code>$ mkvirtualenv my_django_environment
+```
+$ mkvirtualenv my_django_environment
 Running virtualenv with interpreter /usr/bin/python3 ...
 virtualenvwrapper.user_scripts creating /home/ubuntu/.virtualenvs/t_env7/bin/get_env_details
-(my_django_environment) ubuntu@ubuntu:~$</code></pre>
+(my_django_environment) ubuntu@ubuntu:~$
+```
 
-<p>Теперь вы находитесь внутри виртуальной области и можете установить Django и начать разработку.</p>
+Теперь вы находитесь внутри виртуальной области и можете установить Django и начать разработку.
 
-<div class="note">
-<p><strong>Замечание</strong>: С этого момента в этой статье (и всем модуле) пожалуйста учитывайте, что любые команды запускаются в виртуальной среде Python, как та, что мы показали выше.</p>
-</div>
+> **Примечание:** **Замечание**: С этого момента в этой статье (и всем модуле) пожалуйста учитывайте, что любые команды запускаются в виртуальной среде Python, как та, что мы показали выше.
 
-<h3 id="Использование_виртуальной_среды">Использование виртуальной среды</h3>
+### Использование виртуальной среды
 
-<p>Есть ещё несколько полезных команд, которые вам следует знать (в документации по инструменту их гораздо больше, но эти вы будете использовать регулярно):</p>
+Есть ещё несколько полезных команд, которые вам следует знать (в документации по инструменту их гораздо больше, но эти вы будете использовать регулярно):
 
-<ul>
- <li><code>deactivate</code> — Выход из текущей виртуальной среды Python</li>
- <li><code>workon</code> — Список доступных виртуальных сред</li>
- <li><code>workon name_of_environment</code> — Активация конкретной виртуальной среды Python</li>
- <li><code>rmvirtualenv name_of_environment</code> — Удаление конкретной виртуальной среды.</li>
-</ul>
+- `deactivate` — Выход из текущей виртуальной среды Python
+- `workon` — Список доступных виртуальных сред
+- `workon name_of_environment` — Активация конкретной виртуальной среды Python
+- `rmvirtualenv name_of_environment` — Удаление конкретной виртуальной среды.
 
-<h2 id="Установка_Django">Установка Django</h2>
+## Установка Django
 
-<p>После создания виртуальной среды и вызова <code>workon</code> для входа в неё вы можете использовать <em>pip3 </em>для установки Django. </p>
+После создания виртуальной среды и вызова `workon` для входа в неё вы можете использовать _pip3_ для установки Django.
 
-<pre>pip3 install django
-</pre>
+```
+pip3 install django
+```
 
-<p>Вы можете проверить установку Django, выполнив следующую команду (она просто проверяет, что Python может найти модуль Django):</p>
+Вы можете проверить установку Django, выполнив следующую команду (она просто проверяет, что Python может найти модуль Django):
 
-<pre># Linux/Mac OS X
+```
+# Linux/Mac OS X
 python3 -m django --version
  1.10.10
 
 # Windows
 py -3 -m django --version
  1.10.10
-</pre>
+```
 
-<div class="note">
-<p><strong>Замечание</strong>: Для Windows вы запускаете скрипты <em>Python 3</em> с префиксом команды <code>py -3</code>, в то время как для Linux/Mac OSX префикс - <code>python3</code>.</p>
-</div>
+> **Примечание:** **Замечание**: Для Windows вы запускаете скрипты _Python 3_ с префиксом команды `py -3`, в то время как для Linux/Mac OSX префикс - `python3`.
 
-<div class="warning">
-<p><strong>Важно</strong>: В оставшейся части материала<strong> </strong>используется вариант команды <em>Linux</em> для вызова Python 3 (<code>python3</code>) . Если вы работаете в <em>Windows, </em>то просто замените этот префикс на: <code>py -3</code></p>
-</div>
+> **Предупреждение:** **Важно**: В оставшейся части материала\*\* \*\*используется вариант команды _Linux_ для вызова Python 3 (`python3`) . Если вы работаете в _Windows,_ то просто замените этот префикс на: `py -3`
 
-<h2 id="Проверка_вашей_установки">Проверка вашей установки</h2>
+## Проверка вашей установки
 
-<p>Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для её выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в неё.</p>
+Указанная выше проверка работает, но не представляет особого интереса.Более интересная проверка заключается в создании шаблона проекта и проверки его работы. Для её выполнения перейдите в командной строке/терминале в место, где планируете сохранять приложения Django. Создайте папку для теста и перейдите в неё.
 
-<pre>mkdir django_test
+```
+mkdir django_test
 cd django_test
-</pre>
+```
 
-<p>Затем вы можете создать шаблон сайта "<em>mytestsite</em>" при помощи инструмента <strong>django-admin</strong>. После создания сайта вы можете перейти в папку, где найдёте основной скрипт для управления проектами с именем <strong>manage.py</strong>.</p>
+Затем вы можете создать шаблон сайта "_mytestsite_" при помощи инструмента **django-admin**. После создания сайта вы можете перейти в папку, где найдёте основной скрипт для управления проектами с именем **manage.py**.
 
-<pre>django-admin startproject mytestsite
-cd mytestsite</pre>
+```
+django-admin startproject mytestsite
+cd mytestsite
+```
 
-<p>Мы можем запустить веб-сервер разработки из этой папки при помощи <strong>manage.py</strong> и команды <code>runserver</code>, как показано ниже.</p>
+Мы можем запустить веб-сервер разработки из этой папки при помощи **manage.py** и команды `runserver`, как показано ниже.
 
-<pre>$ <strong>python3 manage.py runserver </strong>
+```
+$ python3 manage.py runserver
 Performing system checks...
 
 System check identified no issues (0 silenced).
@@ -358,41 +341,34 @@ September 19, 2016 - 23:31:14
 Django version 1.10.1, using settings 'mysite.settings'
 Starting development server at http://127.0.0.1:8000/
 Quit the server with CONTROL-C.
-</pre>
-
-<div class="note">
-<p><strong>Замечание</strong>: Указанная команда демонстрирует выполнение для Linux/Mac OS X. В настоящий момент вы можете проигнорировать предупреждения о  "13 непримененных миграциях"!</p>
-</div>
+```
 
-<p>Как только сервер запущен, вы можете посмотреть сайт, перейдя по следующему адресу в вашем браузере: <code>http://127.0.0.1:8000/</code>. Вы должны увидеть, что сайт выглядит следующим образом:</p>
+> **Примечание:** **Замечание**: Указанная команда демонстрирует выполнение для Linux/Mac OS X. В настоящий момент вы можете проигнорировать предупреждения о "13 непримененных миграциях"!
 
-<p><img alt="Django Skeleton App Homepage" src="https://mdn.mozillademos.org/files/15728/Django_Skeleton_Website_Homepage.png"></p>
+Как только сервер запущен, вы можете посмотреть сайт, перейдя по следующему адресу в вашем браузере: `http://127.0.0.1:8000/`. Вы должны увидеть, что сайт выглядит следующим образом:
 
-<ul>
-</ul>
+![Django Skeleton App Homepage](https://mdn.mozillademos.org/files/15728/Django_Skeleton_Website_Homepage.png)
 
-<h2 id="Заключение">Заключение</h2>
+## Заключение
 
-<p>Теперь у вас на компьютере установлена и запущена среда разработки Django.</p>
+Теперь у вас на компьютере установлена и запущена среда разработки Django.
 
-<p>В разделе проверки вам коротко был показан способ создания нового сайта на Django при помощи <code>django-admin startproject</code> и его запуск в вашем браузере при помощи веб-сервера разработки (<code><strong>python3 manage.py runserver</strong></code>). В следующей статье мы подробнее рассмотрим этот процесс создания простого, но полноценного веб-приложения.</p>
+В разделе проверки вам коротко был показан способ создания нового сайта на Django при помощи `django-admin startproject` и его запуск в вашем браузере при помощи веб-сервера разработки (**`python3 manage.py runserver`**). В следующей статье мы подробнее рассмотрим этот процесс создания простого, но полноценного веб-приложения.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Introduction">Введение в Django</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/development_environment">Установка среды разработки Django</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Руководство Django: Сайт локальной библиотеки</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/skeleton_website">Руководство Django Часть 2: Создание основы веб-сайта</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Models">Руководство Django Часть 3: Использование моделей</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Admin_site">Руководство Django Часть 4: Панель администрирования Django</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Home_page">Руководство Django Часть 5: Создание домашней страницы</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views">Руководство Django Часть 6: Основной список и детали представлений</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Sessions">Руководство Django Часть  7: Фреймворк сеансов</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Authentication">Руководство Django Часть 8: Авторизация пользователей и уровни доступа</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Forms">Руководство Django Часть 9: Работа с формами</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Testing">Руководство Django Часть 10: Тестирование веб-приложений Django</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Deployment">Руководство Django Часть 11: Развёртывание Django в производство</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/web_application_security">Безопасность веб-приложения Django</a></li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Мини-блог на Django</a></li>
-</ul>
+- [Введение в Django](/ru/docs/Learn/Server-side/Django/Introduction)
+- [Установка среды разработки Django](/ru/docs/Learn/Server-side/Django/development_environment)
+- [Руководство Django: Сайт локальной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website)
+- [Руководство Django Часть 2: Создание основы веб-сайта](/ru/docs/Learn/Server-side/Django/skeleton_website)
+- [Руководство Django Часть 3: Использование моделей](/ru/docs/Learn/Server-side/Django/Models)
+- [Руководство Django Часть 4: Панель администрирования Django](/ru/docs/Learn/Server-side/Django/Admin_site)
+- [Руководство Django Часть 5: Создание домашней страницы](/ru/docs/Learn/Server-side/Django/Home_page)
+- [Руководство Django Часть 6: Основной список и детали представлений](/ru/docs/Learn/Server-side/Django/Generic_views)
+- [Руководство Django Часть 7: Фреймворк сеансов](/ru/docs/Learn/Server-side/Django/Sessions)
+- [Руководство Django Часть 8: Авторизация пользователей и уровни доступа](/ru/docs/Learn/Server-side/Django/Authentication)
+- [Руководство Django Часть 9: Работа с формами](/ru/docs/Learn/Server-side/Django/Forms)
+- [Руководство Django Часть 10: Тестирование веб-приложений Django](/ru/docs/Learn/Server-side/Django/Testing)
+- [Руководство Django Часть 11: Развёртывание Django в производство](/ru/docs/Learn/Server-side/Django/Deployment)
+- [Безопасность веб-приложения Django](/ru/docs/Learn/Server-side/Django/web_application_security)
+- [DIY Мини-блог на Django](/ru/docs/Learn/Server-side/Django/django_assessment_blog)
diff --git a/files/ru/learn/server-side/django/django_assessment_blog/index.md b/files/ru/learn/server-side/django/django_assessment_blog/index.md
index 3ef9dd21fce08b..64f49eaa720c77 100644
--- a/files/ru/learn/server-side/django/django_assessment_blog/index.md
+++ b/files/ru/learn/server-side/django/django_assessment_blog/index.md
@@ -12,271 +12,312 @@ tags:
   - скриптовый кодинг
 translation_of: Learn/Server-side/Django/django_assessment_blog
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</div>
-
-<p class="summary">В этом задании вы будете оценивать знания Django, которые вы приобрели в <a href="/en-US/docs/Learn/Server-side/Django">Django Web Framework (Python)</a>, чтобы создать очень простой блог.</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки:</th>
-   <td>Перед этим заданием, вы должны были проработать все статьи этого модуля.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Проверить понимание основ Django, включая конфигурации URL, модели, представления, формы и шаблоны.</td>
-  </tr>
- </tbody>
-</table>
+{{LearnSidebar}}{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
+
+В этом задании вы будете оценивать знания Django, которые вы приобрели в [Django Web Framework (Python)](/ru/docs/Learn/Server-side/Django), чтобы создать очень простой блог.
+
+| Предпосылки: | Перед этим заданием, вы должны были проработать все статьи этого модуля.                            |
+| ------------ | --------------------------------------------------------------------------------------------------- |
+| Задача:      | Проверить понимание основ Django, включая конфигурации URL, модели, представления, формы и шаблоны. |
 
-<h2 id="Краткое_описание_проекта">Краткое описание проекта</h2>
+## Краткое описание проекта
 
-<p>Страницы, которые должны отображаться, их URL-адреса и другие требования, перечислены ниже:</p>
+Страницы, которые должны отображаться, их URL-адреса и другие требования, перечислены ниже:
 
 <table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Page</th>
-   <th scope="col">URL</th>
-   <th scope="col">Requirements</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>Home page</td>
-   <td><code>/</code> and <code>/blog/</code></td>
-   <td>Страница индекса, описывающая сайт.</td>
-  </tr>
-  <tr>
-   <td>List of all blog posts</td>
-   <td><code>/blog/blogs/</code></td>
-   <td>
-    <p>Список всех сообщений блога:</p>
-
-    <ul>
-     <li>Доступно для всех пользователей из боковой панели.</li>
-     <li>Список отсортирован по дате публикации (от самого нового до самого старого).</li>
-     <li>Список разбит на группы по 5 статьям.</li>
-     <li>Элементы списка отображают название блога, дату публикации и автора.</li>
-     <li>Названия сообщений блога связаны с страницами подробных сведений о блоге.</li>
-     <li>Blogger (имена авторов) связаны с страницами подробных сведений о блоге.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Blog author (blogger) detail page</td>
-   <td><code>/blog/blogger/<em>&lt;author-id&gt;</em></code></td>
-   <td>
-    <p>Информация для указанного автора (по id) и список постов:</p>
-
-    <ul>
-     <li>Доступен для всех пользователей по ссылкам на автора в сообщениях в блогах и т. Д.</li>
-     <li>Содержит некоторые биографические данные в blogger/author.</li>
-     <li>Список отсортирован по дате добавления (от новых к старым).</li>
-     <li>Не разбит на страницы.</li>
-     <li>Элементы списка отображают только имя сообщения в блоге и дату публикации.</li>
-     <li>Названия блога связаны со страницей блога.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Blog post detail page</td>
-   <td><code>/blog/<em>&lt;blog-id&gt;</em></code></td>
-   <td>
-    <p>Сведения о блоге.</p>
-
-    <ul>
-     <li>Доступно для всех пользователей из списков блога.</li>
-     <li>Страница содержит сообщение в блоге: имя, автор, дата публикации и содержание.</li>
-     <li>Комментарии к сообщению в блоге должны отображаться внизу.</li>
-     <li>Комментарии должны быть отсортированы по порядку: от старых до самых последних.</li>
-     <li>Содержит ссылку для добавления комментариев на конец для зарегистрированных пользователей (см. Страницу формы комментариев)</li>
-     <li>В блогах и комментариях должен отображаться только обычный текст. Нет необходимости поддерживать какую-либо разметку HTML (например, ссылки, изображения, полужирный / курсив и т. Д.).</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>List of all bloggers</td>
-   <td><code>/blog/bloggers/</code></td>
-   <td>
-    <p>Список блогеров в системе:</p>
-
-    <ul>
-     <li>Доступный для всех пользователей с боковой панели сайта</li>
-     <li>Имя блогера связано с блогом автора страницы.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Comment form page</td>
-   <td><code>/blog/<em>&lt;blog-id&gt;</em>/create</code></td>
-   <td>
-    <p>Создать комментарий для публикации в блоге:</p>
-
-    <ul>
-     <li>Доступно только зарегистрированным пользователям (только) из ссылки внизу страницы с подробными сведениями блога.</li>
-     <li>Отображает форму с описанием для ввода комментариев (дата публикации и блог недоступны для редактирования).</li>
-     <li>После того, как комментарий будет опубликован, страница будет перенаправлена ​​на связанную страницу блога.</li>
-     <li>Пользователи не могут редактировать или удалять свои сообщения.</li>
-     <li>Вышедшие пользователи будут перенаправлены на страницу входа в систему, чтобы добавить комментарии. После входа в систему они будут перенаправлены на страницу блога, которую они хотели бы прокомментировать.</li>
-     <li>Страницы комментариев должны содержать имя / ссылку на комментарий блога.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>User authentication pages</td>
-   <td><code>/accounts/<em>&lt;standard urls&gt;</em></code></td>
-   <td>
-    <p>Стандартные страницы аутентификации Django для входа, выхода и установки пароля:</p>
-
-    <ul>
-     <li>Вход / выход должен быть доступен через ссылки боковой панели.</li>
-    </ul>
-   </td>
-  </tr>
-  <tr>
-   <td>Admin site</td>
-   <td><code>/admin/<em>&lt;standard urls&gt;</em></code></td>
-   <td>
-    <p>Админ-сайт должен быть включён, чтобы разрешить создание / редактирование / удаление сообщений в блогах, авторов блога и комментариев блога (это механизм для создания блогеров в блогах):</p>
-
-    <ul>
-     <li>В админ панеле должен отображаться список комментариев в строке (внизу каждого сообщения в блоге).</li>
-     <li>Имена комментариев в админке создаются усеканием описания комментария до 75 знаков</li>
-     <li>Другие типы записей могут использовать базовую регистрацию.</li>
-    </ul>
-   </td>
-  </tr>
- </tbody>
+  <thead>
+    <tr>
+      <th scope="col">Page</th>
+      <th scope="col">URL</th>
+      <th scope="col">Requirements</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>Home page</td>
+      <td><code>/</code> and <code>/blog/</code></td>
+      <td>Страница индекса, описывающая сайт.</td>
+    </tr>
+    <tr>
+      <td>List of all blog posts</td>
+      <td><code>/blog/blogs/</code></td>
+      <td>
+        <p>Список всех сообщений блога:</p>
+        <ul>
+          <li>Доступно для всех пользователей из боковой панели.</li>
+          <li>
+            Список отсортирован по дате публикации (от самого нового до самого
+            старого).
+          </li>
+          <li>Список разбит на группы по 5 статьям.</li>
+          <li>
+            Элементы списка отображают название блога, дату публикации и автора.
+          </li>
+          <li>
+            Названия сообщений блога связаны с страницами подробных сведений о
+            блоге.
+          </li>
+          <li>
+            Blogger (имена авторов) связаны с страницами подробных сведений о
+            блоге.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>Blog author (blogger) detail page</td>
+      <td>
+        <code>/blog/blogger/<em>&#x3C;author-id></em></code>
+      </td>
+      <td>
+        <p>Информация для указанного автора (по id) и список постов:</p>
+        <ul>
+          <li>
+            Доступен для всех пользователей по ссылкам на автора в сообщениях в
+            блогах и т. Д.
+          </li>
+          <li>Содержит некоторые биографические данные в blogger/author.</li>
+          <li>Список отсортирован по дате добавления (от новых к старым).</li>
+          <li>Не разбит на страницы.</li>
+          <li>
+            Элементы списка отображают только имя сообщения в блоге и дату
+            публикации.
+          </li>
+          <li>Названия блога связаны со страницей блога.</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>Blog post detail page</td>
+      <td>
+        <code>/blog/<em>&#x3C;blog-id></em></code>
+      </td>
+      <td>
+        <p>Сведения о блоге.</p>
+        <ul>
+          <li>Доступно для всех пользователей из списков блога.</li>
+          <li>
+            Страница содержит сообщение в блоге: имя, автор, дата публикации и
+            содержание.
+          </li>
+          <li>Комментарии к сообщению в блоге должны отображаться внизу.</li>
+          <li>
+            Комментарии должны быть отсортированы по порядку: от старых до самых
+            последних.
+          </li>
+          <li>
+            Содержит ссылку для добавления комментариев на конец для
+            зарегистрированных пользователей (см. Страницу формы комментариев)
+          </li>
+          <li>
+            В блогах и комментариях должен отображаться только обычный текст.
+            Нет необходимости поддерживать какую-либо разметку HTML (например,
+            ссылки, изображения, полужирный / курсив и т. Д.).
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>List of all bloggers</td>
+      <td><code>/blog/bloggers/</code></td>
+      <td>
+        <p>Список блогеров в системе:</p>
+        <ul>
+          <li>Доступный для всех пользователей с боковой панели сайта</li>
+          <li>Имя блогера связано с блогом автора страницы.</li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>Comment form page</td>
+      <td><code>/blog/<em>&#x3C;blog-id></em>/create</code></td>
+      <td>
+        <p>Создать комментарий для публикации в блоге:</p>
+        <ul>
+          <li>
+            Доступно только зарегистрированным пользователям (только) из ссылки
+            внизу страницы с подробными сведениями блога.
+          </li>
+          <li>
+            Отображает форму с описанием для ввода комментариев (дата публикации
+            и блог недоступны для редактирования).
+          </li>
+          <li>
+            После того, как комментарий будет опубликован, страница будет
+            перенаправлена ​​на связанную страницу блога.
+          </li>
+          <li>
+            Пользователи не могут редактировать или удалять свои сообщения.
+          </li>
+          <li>
+            Вышедшие пользователи будут перенаправлены на страницу входа в
+            систему, чтобы добавить комментарии. После входа в систему они будут
+            перенаправлены на страницу блога, которую они хотели бы
+            прокомментировать.
+          </li>
+          <li>
+            Страницы комментариев должны содержать имя / ссылку на комментарий
+            блога.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>User authentication pages</td>
+      <td>
+        <code>/accounts/<em>&#x3C;standard urls></em></code>
+      </td>
+      <td>
+        <p>
+          Стандартные страницы аутентификации Django для входа, выхода и
+          установки пароля:
+        </p>
+        <ul>
+          <li>
+            Вход / выход должен быть доступен через ссылки боковой панели.
+          </li>
+        </ul>
+      </td>
+    </tr>
+    <tr>
+      <td>Admin site</td>
+      <td>
+        <code>/admin/<em>&#x3C;standard urls></em></code>
+      </td>
+      <td>
+        <p>
+          Админ-сайт должен быть включён, чтобы разрешить создание /
+          редактирование / удаление сообщений в блогах, авторов блога и
+          комментариев блога (это механизм для создания блогеров в блогах):
+        </p>
+        <ul>
+          <li>
+            В админ панеле должен отображаться список комментариев в строке
+            (внизу каждого сообщения в блоге).
+          </li>
+          <li>
+            Имена комментариев в админке создаются усеканием описания
+            комментария до 75 знаков
+          </li>
+          <li>Другие типы записей могут использовать базовую регистрацию.</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<p>Кроме того, вы должны написать некоторые базовые тесты для проверки:</p>
+Кроме того, вы должны написать некоторые базовые тесты для проверки:
+
+- Все поля модели имеют правильную метку и длину.
+- Все модели имеют ожидаемое имя объекта (например,` __str__()`выдаёт ожидаемое значение).
+- Модели имеют ожидаемый URL для отдельных записей в блогах и комментариях (например,`get_absolute_url()` возвращает ожидаемый URL-адрес).
+- Страница BlogListView (страница на всех блогах) доступна в ожидаемом месте (например, /blog/blogs)
+- Страница BlogListView (страница на всех блогах) доступна на ожидаемом именованном URL-адресе (например, 'blogs')
+- Страница BlogListView (страница на всех блогах) использует ожидаемый шаблон (например, по умолчанию)
+- BlogListView разбивает записи на 5 (по крайней мере, на первой странице)
+
+> **Примечание:** Конечно, есть много других тестов, которые вы можете запустить. Используйте на своё усмотрение, но мы ожидаем, что вы сделаете хотя бы тесты выше.
+
+В следующем разделе показаны [скриншоты](#Screenshots) сайта, который выполняет перечисленные выше требования.
 
-<ul>
- <li>Все поля модели имеют правильную метку и длину.</li>
- <li>Все модели имеют ожидаемое имя объекта (например,<code> __str__()</code>выдаёт ожидаемое значение).</li>
- <li>Модели имеют ожидаемый URL для отдельных записей в блогах и комментариях (например,<code>get_absolute_url()</code> возвращает ожидаемый URL-адрес).</li>
- <li>Страница BlogListView (страница на всех блогах) доступна в ожидаемом месте (например, /blog/blogs)</li>
- <li>Страница BlogListView (страница на всех блогах) доступна на ожидаемом именованном URL-адресе (например, 'blogs')</li>
- <li>Страница BlogListView (страница на всех блогах) использует ожидаемый шаблон (например, по умолчанию)</li>
- <li>BlogListView разбивает записи на 5 (по крайней мере, на первой странице)</li>
-</ul>
+## Скриншоты
 
-<div class="note">
-<p><strong>Примечание</strong>: Конечно, есть много других тестов, которые вы можете запустить. Используйте на своё усмотрение, но мы ожидаем, что вы сделаете хотя бы тесты выше.</p>
-</div>
+Следующий скриншот - пример того, что должна выводить готовая программа.
 
-<p>В следующем разделе показаны <a href="#Screenshots">скриншоты</a> сайта, который выполняет перечисленные выше требования.</p>
+### Список всех сообщений в блоге
 
-<h2 id="Скриншоты">Скриншоты</h2>
+Это отображает список всех сообщений в блоге (доступны из ссылки "All blogs" на боковой панели). Что нужно отметить:
 
-<p>Следующий скриншот - пример того, что должна выводить готовая программа.</p>
+- На боковой панели также списки вошедшего в систему пользователя.
+- Индивидуальные блоги и блогеры доступны в виде ссылок на странице.
+- Разбивка включена (в группах по 5)
+- Показ от новых к старым.
 
-<h3 id="Список_всех_сообщений_в_блоге">Список всех сообщений в блоге</h3>
+![List of all blogs](https://mdn.mozillademos.org/files/14319/diyblog_allblogs.png)
 
-<p>Это отображает список всех сообщений в блоге (доступны из ссылки "All blogs" на боковой панели). Что нужно отметить:</p>
+### Список всех блогеров
 
-<ul>
- <li>На боковой панели также списки вошедшего в систему пользователя.</li>
- <li>Индивидуальные блоги и блогеры доступны в виде ссылок на странице.</li>
- <li>Разбивка включена (в группах по 5)</li>
- <li>Показ от новых к старым.</li>
-</ul>
+Это ссылки на всех блогеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошёл в систему.
 
-<p><img alt="List of all blogs" src="https://mdn.mozillademos.org/files/14319/diyblog_allblogs.png" style="border-style: solid; border-width: 1px; display: block; height: 363px; margin: 0px auto; width: 986px;"></p>
+![List of all bloggers](https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png)
 
-<h3 id="Список_всех_блогеров">Список всех блогеров</h3>
+### Подробная страница блога
 
-<p> </p>
+Это показывает подробную страницу для конкретного блога.
 
-<p>Это ссылки на всех блогеров в "All bloggers" по ссылке, которая на боковой панели. В этом случае мы можем увидеть на боковой панели, что ни один пользователь не вошёл в систему.</p>
+![Blog detail with add comment link](https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png)
 
-<p><img alt="List of all bloggers" src="https://mdn.mozillademos.org/files/14321/diyblog_blog_allbloggers.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 493px;"></p>
+Обратите внимание, что комментарии имеют дату _и_ время, и расположены в порядке от самых старых до новейших (противоположно порядку ведения блога). В конце у нас есть ссылка для доступа к форме, чтобы добавить новый комментарий. Если пользователь не вошёл в систему, мы бы увидели предложение войти в систему.
 
-<h3 id="Подробная_страница_блога">Подробная страница блога</h3>
+![Comment link when not logged in](https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png)
 
-<p>Это показывает подробную страницу для конкретного блога.</p>
+### Добавить форму комментария
 
-<p><img alt="Blog detail with add comment link" src="https://mdn.mozillademos.org/files/14323/diyblog_blog_detail_add_comment.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 986px;"></p>
+Это форма добавления комментариев. Обратите внимание, что мы вошли в систему. Когда это удастся, мы должны вернуться к связанной странице блога.
 
-<p>Обратите внимание, что комментарии имеют дату <em>и</em> время, и расположены в порядке от самых старых до новейших (противоположно порядку ведения блога). В конце у нас есть ссылка для доступа к форме, чтобы добавить новый комментарий. Если пользователь не вошёл в систему, мы бы увидели предложение войти в систему.</p>
+![Add comment form](https://mdn.mozillademos.org/files/14329/diyblog_comment_form.png)
 
-<p><img alt="Comment link when not logged in" src="https://mdn.mozillademos.org/files/14325/diyblog_blog_detail_not_logged_in.png" style="border-style: solid; border-width: 1px; display: block; height: 129px; margin: 0px auto; width: 646px;"></p>
+### Об авторе
 
-<h3 id="Добавить_форму_комментария">Добавить форму комментария</h3>
+Здесь отображается информация о блогере вместе со списком его блогов.
 
-<p>Это форма добавления комментариев. Обратите внимание, что мы вошли в систему. Когда это удастся, мы должны вернуться к связанной странице блога.</p>
+![Blogger detail page](https://mdn.mozillademos.org/files/14327/diyblog_blogger_detail.png)
 
-<p><img alt="Add comment form" src="https://mdn.mozillademos.org/files/14329/diyblog_comment_form.png" style="border-style: solid; border-width: 1px; display: block; height: 385px; margin: 0px auto; width: 778px;"></p>
+## Завершающие шаги
 
-<h3 id="Об_авторе">Об авторе</h3>
+В следующих разделах описывается, что вам нужно делать.
 
-<p>Здесь отображается информация о блогере вместе со списком его блогов.</p>
+1.  Создайте скелет проекта и веб-приложение для сайта (как описано в [Django Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Django/skeleton_website)). Вы можете использовать «diyblog» для имени проекта и «blog» для имени приложения.
+2.  Создавайте модели для записей в блогах, комментариев и любых других необходимых объектов.
 
-<p><img alt="Blogger detail page" src="https://mdn.mozillademos.org/files/14327/diyblog_blogger_detail.png" style="border-style: solid; border-width: 1px; display: block; height: 379px; margin: 0px auto; width: 982px;"></p>
+    - Каждый комментарий будет иметь только один блог, но блог может иметь много комментариев.
+    - Посты в блоге и комментарии должны быть отсортированы по дате поста.
+    - Не каждый пользователь обязательно будет автором блога, хотя любой пользователь может быть комментатором.
+    - Блог автора также должен включать информацию о себе.
 
-<h2 id="Завершающие_шаги">Завершающие шаги</h2>
+3.  Запустите миграцию для новых моделей и создайте суперпользователя.
+4.  Используйте админ панель, чтобы создать какой-нибудь пример блога и комментарии в блогах.
+5.  Создайте представления, шаблоны, и URL-конфигурации для публикации блога и списка страниц блогера.
+6.  Создайте представления, шаблоны, и URL-конфигурации для публикации блога и подробных страниц блогера.
+7.  Создайте страницу с формой для добавления новых комментариев (не забудьте сделать это доступным только для зарегистрированных пользователей!)
 
-<p>В следующих разделах описывается, что вам нужно делать.</p>
+## Советы и подсказки
 
-<ol>
- <li>Создайте скелет проекта и веб-приложение для сайта (как описано в  <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>). Вы можете использовать «diyblog» для имени проекта и «blog» для имени приложения.</li>
- <li>Создавайте модели для записей в блогах, комментариев и любых других необходимых объектов.
-  <ul>
-   <li>Каждый комментарий будет иметь только один блог, но блог может иметь много комментариев.</li>
-   <li>Посты в блоге и комментарии должны быть отсортированы по дате поста.</li>
-   <li>Не каждый пользователь обязательно будет автором блога, хотя любой пользователь может быть комментатором.</li>
-   <li>Блог автора также должен включать информацию о себе.</li>
-  </ul>
- </li>
- <li>Запустите миграцию для новых моделей и создайте суперпользователя.</li>
- <li>Используйте админ панель, чтобы создать какой-нибудь пример блога и комментарии в блогах.</li>
- <li>Создайте представления, шаблоны, и URL-конфигурации для публикации блога и списка страниц блогера.</li>
- <li>Создайте представления, шаблоны, и URL-конфигурации для публикации блога и подробных страниц блогера.</li>
- <li>Создайте страницу с формой для добавления новых комментариев (не забудьте сделать это доступным только для зарегистрированных пользователей!)</li>
-</ol>
+Этот проект очень похож на [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) учебник. Вы сможете настроить скелет, поведение входа пользователя / выхода из системы, поддержку статических файлов, представлений, URL-адресов, форм, базовых шаблонов и конфигурации админ-панели, используя почти все те же подходы.
 
-<h2 id="Советы_и_подсказки">Советы и подсказки</h2>
+Некоторые общие рекомендации:
 
-<p>Этот проект очень похож на  <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> учебник. Вы сможете настроить скелет, поведение входа пользователя / выхода из системы, поддержку статических файлов, представлений, URL-адресов, форм, базовых шаблонов и конфигурации админ-панели, используя почти все те же подходы.</p>
+1.  Индексная страница (index page) может быть реализована в качестве основной функции представления и шаблона (как и для locallibrary).
+2.  Просмотр списка публикаций блога и блогеров, а также подробное представление для сообщений в блоге можно создать с помощью [generic list and detail views](/ru/docs/Learn/Server-side/Django/Generic_views).
+3.  Список постов в блоге конкретного автора может быть создан с помощью общего списка Blog list view и фильтрация для объекта блога, соответствующего указанному автору.
 
-<p>Некоторые общие рекомендации:</p>
+    - Вам придётся реализовать `get_queryset(self)` для фильтрации (как и в нашем классе библиотеки `LoanedBooksAllListView`) и получить информацию об авторе из URL-адреса.
+    - Вам также необходимо передать имя автора на страницу в контексте. Чтобы сделать это в представлении на основе классов, вам необходимо реализовать `get_context_data()` (обсуждается ниже).
 
-<ol>
- <li>Индексная страница (index page) может быть реализована в качестве основной функции представления и шаблона (как и для locallibrary).</li>
- <li>Просмотр списка публикаций блога и блогеров, а также подробное представление для сообщений в блоге можно создать с помощью  <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">generic list and detail views</a>.</li>
- <li>Список постов в блоге конкретного автора может быть создан с помощью общего списка Blog list view и фильтрация для объекта блога, соответствующего указанному автору.
-  <ul>
-   <li>Вам придётся реализовать  <code>get_queryset(self)</code> для фильтрации (как и в нашем классе библиотеки <code>LoanedBooksAllListView</code>) и получить информацию об авторе из URL-адреса.</li>
-   <li>Вам также необходимо передать имя автора на страницу в контексте. Чтобы сделать это в представлении на основе классов, вам необходимо реализовать  <code>get_context_data()</code> (обсуждается ниже).</li>
-  </ul>
- </li>
- <li>Форма <em>добавления комментариев</em> может быть создана с использованием функционального представления (и связанной модели и формы) или с использованием общего <code>CreateView</code>. Если вы используете <code>CreateView</code> (рекомендуется):
-  <ul>
-   <li>Вам также нужно будет передать имя блога на страницу комментариев в контексте (реализовать  <code>get_context_data()</code> как обсуждается ниже).</li>
-   <li>Форма должна отображать только комментарий «описание» для записи пользователя (дата и связанная с ними запись в блоге не должны редактироваться). Поскольку они не будут в форме, ваш код должен будет установить автора комментария в <code> form_valid()</code> функцию, поэтому он может быть сохранён в модели (<a href="https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-editing/#models-and-request-user">as described here</a> — Django docs). В этой же функции мы устанавливаем связанный блог. Возможная реализация показана ниже (<code>pk</code> это идентификатор блога, переданный из URL / URL конфигурации ).
-    <pre class="brush: python">    def form_valid(self, form):
-        """
-        Add author and associated blog to form data before setting it as valid (so it is saved to model)
-        """
-        #Add logged-in user as author of comment
-        form.instance.author = self.request.user
-        #Associate comment with blog based on passed id
-        form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
-        # Call super-class form validation behaviour
-        return super(BlogCommentCreate, self).form_valid(form)
-</pre>
-   </li>
-   <li> Для успешного перенаправления после проверки формы вам нужно будет указать URL-адрес;  это должен быть оригинальный блог. Для этого вам нужно будет переопределить  <code>get_success_url()</code> и «обратный» URL-адрес для исходного блога. Вы можете получить требуемый ID блога, используя <code>self.kwargs</code> атрибут, как показано в методе <code>form_valid()</code> выше.</li>
-  </ul>
- </li>
-</ol>
+4.  Форма _добавления комментариев_ может быть создана с использованием функционального представления (и связанной модели и формы) или с использованием общего `CreateView`. Если вы используете `CreateView` (рекомендуется):
 
-<p>Мы кратко говорили о передаче контекста шаблону в представлении на основе классов в теме  <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views">Django Tutorial Part 6: Generic list and detail views</a>. Для этого вам нужно переопределить <code>get_context_data()</code> (сначала получить существующий контекст, обновить его любыми дополнительными переменными, которые вы хотите передать шаблону, а затем вернуть обновлённый контекст). Например, фрагмент кода ниже показывает, как вы можете добавить объект blogger в контекст на основе его <code>BlogAuthor</code> id.</p>
+    - Вам также нужно будет передать имя блога на страницу комментариев в контексте (реализовать `get_context_data()` как обсуждается ниже).
+    - Форма должна отображать только комментарий «описание» для записи пользователя (дата и связанная с ними запись в блоге не должны редактироваться). Поскольку они не будут в форме, ваш код должен будет установить автора комментария в `form_valid()` функцию, поэтому он может быть сохранён в модели ([as described here](https://docs.djangoproject.com/en/2.0/topics/class-based-views/generic-editing/#models-and-request-user) — Django docs). В этой же функции мы устанавливаем связанный блог. Возможная реализация показана ниже (`pk` это идентификатор блога, переданный из URL / URL конфигурации ).
 
-<pre class="brush: python">class SomeView(generic.ListView):
+      ```python
+          def form_valid(self, form):
+              """
+              Add author and associated blog to form data before setting it as valid (so it is saved to model)
+              """
+              #Add logged-in user as author of comment
+              form.instance.author = self.request.user
+              #Associate comment with blog based on passed id
+              form.instance.blog=get_object_or_404(Blog, pk = self.kwargs['pk'])
+              # Call super-class form validation behaviour
+              return super(BlogCommentCreate, self).form_valid(form)
+      ```
+
+    - Для успешного перенаправления после проверки формы вам нужно будет указать URL-адрес; это должен быть оригинальный блог. Для этого вам нужно будет переопределить `get_success_url()` и «обратный» URL-адрес для исходного блога. Вы можете получить требуемый ID блога, используя `self.kwargs` атрибут, как показано в методе `form_valid()` выше.
+
+Мы кратко говорили о передаче контекста шаблону в представлении на основе классов в теме [Django Tutorial Part 6: Generic list and detail views](/ru/docs/Learn/Server-side/Django/Generic_views#Overriding_methods_in_class-based_views). Для этого вам нужно переопределить `get_context_data()` (сначала получить существующий контекст, обновить его любыми дополнительными переменными, которые вы хотите передать шаблону, а затем вернуть обновлённый контекст). Например, фрагмент кода ниже показывает, как вы можете добавить объект blogger в контекст на основе его `BlogAuthor` id.
+
+```python
+class SomeView(generic.ListView):
     ...
 
     def get_context_data(self, **kwargs):
@@ -285,36 +326,30 @@ translation_of: Learn/Server-side/Django/django_assessment_blog
         # Get the blogger object from the "pk" URL parameter and add it to the context
         context['blogger'] = get_object_or_404(BlogAuthor, pk = self.kwargs['pk'])
         return context
-</pre>
-
-<h2 id="Аттестация">Аттестация</h2>
-
-<p>Оценка этого задания <a href="https://github.com/mdn/django-diy-blog/blob/master/MarkingGuide.md">доступна здесь на Github</a>. Эта оценка в основном основана на том, насколько хорошо ваше приложение соответствует требованиям, перечисленным выше, хотя есть некоторые части оценки, которые проверяют ваш код на использование соответствующих моделей и что вы написали хотя бы некоторый тестовый код. Когда вы закончите, вы можете проверить по нашему <a href="https://github.com/mdn/django-diy-blog">готовому примеру</a> который соответствует "высокой оценке проекта".</p>
+```
 
-<p>После того, как вы завершили этот модуль, вы также закончили весь контент MDN для изучения базового веб-сайта на сервере Django! Надеемся, вам понравится этот модуль и вы почувствуете, что у вас есть хорошее понимание основ!</p>
+## Аттестация
 
-<p>{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}</p>
+Оценка этого задания [доступна здесь на Github](https://github.com/mdn/django-diy-blog/blob/master/MarkingGuide.md). Эта оценка в основном основана на том, насколько хорошо ваше приложение соответствует требованиям, перечисленным выше, хотя есть некоторые части оценки, которые проверяют ваш код на использование соответствующих моделей и что вы написали хотя бы некоторый тестовый код. Когда вы закончите, вы можете проверить по нашему [готовому примеру](https://github.com/mdn/django-diy-blog) который соответствует "высокой оценке проекта".
 
-<p> </p>
+После того, как вы завершили этот модуль, вы также закончили весь контент MDN для изучения базового веб-сайта на сервере Django! Надеемся, вам понравится этот модуль и вы почувствуете, что у вас есть хорошее понимание основ!
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+{{PreviousMenu("Learn/Server-side/Django/web_application_security", "Learn/Server-side/Django")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
-</ul>
+## В этом модуле
 
-<p> </p>
+- [Django introduction](/ru/docs/Learn/Server-side/Django/Introduction)
+- [Setting up a Django development environment](/ru/docs/Learn/Server-side/Django/development_environment)
+- [Django Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website)
+- [Django Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Django/skeleton_website)
+- [Django Tutorial Part 3: Using models](/ru/docs/Learn/Server-side/Django/Models)
+- [Django Tutorial Part 4: Django admin site](/ru/docs/Learn/Server-side/Django/Admin_site)
+- [Django Tutorial Part 5: Creating our home page](/ru/docs/Learn/Server-side/Django/Home_page)
+- [Django Tutorial Part 6: Generic list and detail views](/ru/docs/Learn/Server-side/Django/Generic_views)
+- [Django Tutorial Part 7: Sessions framework](/ru/docs/Learn/Server-side/Django/Sessions)
+- [Django Tutorial Part 8: User authentication and permissions](/ru/docs/Learn/Server-side/Django/Authentication)
+- [Django Tutorial Part 9: Working with forms](/ru/docs/Learn/Server-side/Django/Forms)
+- [Django Tutorial Part 10: Testing a Django web application](/ru/docs/Learn/Server-side/Django/Testing)
+- [Django Tutorial Part 11: Deploying Django to production](/ru/docs/Learn/Server-side/Django/Deployment)
+- [Django web application security](/ru/docs/Learn/Server-side/Django/web_application_security)
+- [DIY Django mini blog](/ru/docs/Learn/Server-side/Django/django_assessment_blog)
diff --git a/files/ru/learn/server-side/django/forms/index.md b/files/ru/learn/server-side/django/forms/index.md
index bccde7196b06fe..2f47bed4bd0fec 100644
--- a/files/ru/learn/server-side/django/forms/index.md
+++ b/files/ru/learn/server-side/django/forms/index.md
@@ -11,215 +11,195 @@ tags:
   - Формы Django
 translation_of: Learn/Server-side/Django/Forms
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</div>
+На этом уроке мы покажем вам процесс работы с HTML-формами в Django. В частности, продемонстрируем самый простой способ построения формы для создания, обновления и удаления экземпляров модели. При этом мы расширим сайт [местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), чтобы библиотекари могли обновлять книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не возможности приложения администратора).
 
-<p class="summary">На этом уроке мы покажем вам процесс работы с HTML-формами в Django. В частности, продемонстрируем самый простой способ построения формы для создания, обновления и удаления экземпляров модели. При этом мы расширим сайт  <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">местной библиотеки</a>, чтобы библиотекари могли обновлять книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не возможности приложения администратора).</p>
+| Необходимые условия: | Завершите все предыдущие учебные темы, в том числе [Django руководство часть 8: Аутентификация пользователя и права доступа](/ru/docs/Learn/Server-side/Django/authentication_and_sessions).                                              |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Научиться понимать, как создавать формы, чтобы получать информацию от пользователей и обновлять базу данных. Узнать, как обобщённые классы отображения форм могут значительно упростить процесс создания форм при работе с одной моделью. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Завершите все предыдущие учебные темы, в том числе <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions">Django руководство часть 8: Аутентификация пользователя и права доступа</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Научиться понимать, как создавать формы, чтобы получать информацию от пользователей и обновлять базу данных. Узнать, как обобщённые классы отображения форм могут значительно упростить процесс создания форм при работе с одной моделью.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+[HTML форма ](/ru/docs/Web/Guide/HTML/Forms)- это группа из одного или нескольких полей/виджетов на веб-странице, которая используется для сбора информации от пользователей для последующей отправки на сервер. Формы являются гибким механизмом сбора пользовательских данных, поскольку имеют целый набор виджетов для ввода различных типов данных, как то: текстовые поля, флажки, переключатели, установщики дат и т. д. Формы являются относительно безопасным способом взаимодействия пользовательского клиента и сервера, поскольку они позволяют отправлять данные в POST-запросах, применяя защиту от [Межсайтовой подделки запроса](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0) (_Cross Site Request Forgery - CSRF_)
 
-<p><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форма </a>- это группа из одного или нескольких полей/виджетов на веб-странице, которая используется для сбора информации от пользователей для последующей отправки на сервер. Формы являются гибким механизмом сбора пользовательских данных, поскольку имеют целый набор виджетов для ввода различных типов данных, как то: текстовые поля, флажки, переключатели, установщики дат и т. д. Формы являются относительно безопасным способом взаимодействия пользовательского клиента и сервера, поскольку они позволяют отправлять данные в POST-запросах, применяя защиту от <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D0%B0%D1%8F_%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D0%BB%D0%BA%D0%B0_%D0%B7%D0%B0%D0%BF%D1%80%D0%BE%D1%81%D0%B0">Межсайтовой подделки запроса</a> (<em>Cross Site Request Forgery - CSRF</em>)</p>
+Пока что мы не создавали каких-либо форм в этом учебнике, но мы встречались с ними в административной панели Django — например, снимок экрана ниже показывает форму для редактирования одной из наших моделей книг ([Book](/ru/docs/Learn/Server-side/Django/Models)), состоящую из нескольких списков выбора и текстовых редакторов.
 
-<p>Пока что мы не создавали каких-либо форм в этом учебнике, но мы встречались с ними в административной панели Django —  например, снимок экрана ниже показывает форму для редактирования одной из наших моделей книг (<a href="/en-US/docs/Learn/Server-side/Django/Models">Book</a>), состоящую из нескольких списков выбора и текстовых редакторов. </p>
+![Admin Site - Book Add](https://mdn.mozillademos.org/files/13979/admin_book_add.png)
 
-<p><img alt="Admin Site - Book Add" src="https://mdn.mozillademos.org/files/13979/admin_book_add.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+Работа с формами может быть достаточно сложной! Разработчикам надо описать форму на HTML, проверить её валидность, а также, на стороне сервера, проверять введённые пользователем данные (а возможно и на стороне клиента), далее, в случае возникновения ошибок необходимо опять показать пользователю форму и, при этом, указать на то, что пошло не так, в случае же успеха проделать с данными необходимые операции и каким-то образом проинформировать об этом пользователя. Django, при работе с формами, берёт большую часть, описанной выше работы, на себя. Он предоставляет фреймворк, который позволяет вам определять форму и её поля программно, а затем использовать эти объекты и для генерации непосредственно кода HTML-формы, и для контроля за процессом валидации и других пользовательский взаимодействий с формой.
 
-<p>Работа с формами может быть достаточно сложной! Разработчикам надо описать форму на HTML, проверить её валидность, а также, на стороне сервера, проверять введённые пользователем данные (а возможно и на стороне клиента), далее, в случае возникновения ошибок необходимо опять показать пользователю форму и, при этом, указать на то, что пошло не так, в случае же успеха проделать с данными необходимые операции и каким-то образом проинформировать об этом пользователя. Django, при работе с формами, берёт большую часть, описанной выше работы, на себя. Он предоставляет фреймворк, который позволяет вам определять форму и её поля программно, а затем использовать эти объекты и для генерации непосредственно кода HTML-формы, и для контроля за процессом валидации и других пользовательский взаимодействий с формой.</p>
+В данной части руководства мы покажем вам несколько способов создания и работы с формами и, в частности, как применение обобщённых классов работы с формой могут значительно уменьшить необходимый объем работы. Кроме того, мы расширим возможности нашего сайта _LocalLibrary,_ путём добавления функциональности для библиотекарей, которая будет позволять им обновлять информацию - добавим страницы для создания, редактирования, удаления книг и авторов (воспроизведём и расширим стандартные возможности административной части сайта).
 
-<p>В данной части руководства мы покажем вам несколько способов создания и работы с формами и, в частности, как применение обобщённых классов работы с формой могут значительно уменьшить необходимый объем работы. Кроме того, мы расширим возможности нашего сайта <em>LocalLibrary,</em> путём добавления функциональности для библиотекарей, которая будет позволять им обновлять информацию - добавим страницы для создания, редактирования, удаления книг и авторов (воспроизведём и расширим стандартные возможности административной части сайта).</p>
+## Формы HTML
 
-<h2 id="Формы_HTML">Формы HTML</h2>
+Начнём мы с краткого обзора [Форм HTML](/ru/docs/Web/Guide/HTML/Forms). Рассмотрим простую форму HTML, имеющую поле для ввода имени некоторой "команды" ("team"), и, связанную с данным полем, текстовой меткой:
 
-<p>Начнём мы с краткого обзора <a href="/en-US/docs/Web/Guide/HTML/Forms">Форм HTML</a>. Рассмотрим простую форму HTML, имеющую поле для ввода имени некоторой "команды" ("team"), и, связанную с данным полем, текстовой меткой:</p>
+![Simple name field example in HTML form](https://mdn.mozillademos.org/files/14117/form_example_name_field.png)
 
-<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+Форма описывается на языке HTML как набор элементов, расположенных внутри парных тэгов `<form>...</form>`. Любая форма содержит как минимум одно поле-тэг `input` типа `type="submit"`.
 
-<p>Форма описывается на языке HTML как набор элементов, расположенных внутри парных тэгов <code>&lt;form&gt;...&lt;/form&gt;</code>. Любая форма содержит как минимум одно поле-тэг <code>input</code> типа <code>type="submit"</code>.</p>
+```html
+<form action="/team_name_url/" method="post">
+    <label for="team_name">Enter name: </label>
+    <input id="team_name" type="text" name="name_field" value="Default name for team.">
+    <input type="submit" value="OK">
+</form>
+```
 
-<pre class="brush: html">&lt;form action="/team_name_url/" method="post"&gt;
-    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
-    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
-    &lt;input type="submit" value="OK"&gt;
-&lt;/form&gt;</pre>
+Здесь у нас только одно поле для ввода имени команды, но форма _может_ иметь любое количество элементов ввода и, связанных с ними, текстовых меток. Атрибут элемента `type` определяет какого типа виджет будет показан в данной строке. Атрибуты `name` и `id` используются для однозначной идентификации данного поля в JavaScript/CSS/HTML, в то время как `value` содержит значение для поля (когда оно показывается в первый раз). Текстовая метка добавляется при помощи тэга `label` (смотрите "Enter name", в предыдущем фрагменте) и имеет атрибут `for` со значением идентификатора `id`, того поля, с которым данная текстовая метка связана.
 
-<p>Здесь у нас только одно поле для ввода имени команды, но форма <em>может</em> иметь любое количество элементов ввода и, связанных с ними, текстовых меток. Атрибут элемента <code>type</code> определяет какого типа виджет будет показан в данной строке. Атрибуты <code>name</code> и  <code>id</code> используются для однозначной идентификации данного поля в JavaScript/CSS/HTML, в то время как <code>value</code> содержит значение для поля (когда оно показывается в первый раз). Текстовая метка добавляется при помощи тэга <code style="font-style: normal; font-weight: normal;">label</code> (смотрите "Enter name", в предыдущем фрагменте) и имеет атрибут <code style="font-style: normal; font-weight: normal;">for</code> со значением идентификатора <code style="font-style: normal; font-weight: normal;">id</code>, того поля, с которым данная текстовая метка связана.</p>
+Элемент `input` с `type="submit"` будет показана как кнопка (по умолчанию), нажав на которую, пользователь отправляет введённые им данные на сервер (в данном случае только значение поля с идентификатором `team_name`). Атрибуты формы определяют каким методом будут отправлены данные на сервер (атрибут `method`) и куда (атрибут `action`):
 
-<p>Элемент <code>input</code>  с  <code>type="submit"</code> будет показана как кнопка (по умолчанию), нажав на которую, пользователь отправляет введённые им данные на сервер (в данном случае только значение поля с идентификатором <code>team_name</code>). Атрибуты формы определяют каким методом будут отправлены данные на сервер (атрибут <code>method</code>) и куда  (атрибут <code>action</code>):</p>
+- `action`: Это ресурс/URL-адрес куда будут отправлены данные для обработки. Если значение не установлено (то есть, значением поля является пустая строка), тогда данные будут отправлены в отображение (функцию, или класс), которое сформировало текущую страницу.
+- `method`: HTTP-метод, используемый для отправки данных: _post_, или _get_.
 
-<ul>
- <li><code>action</code>: Это ресурс/URL-адрес куда будут отправлены данные для обработки. Если значение не установлено (то есть, значением поля является пустая строка), тогда данные будут отправлены в отображение (функцию, или класс), которое сформировало текущую страницу.</li>
- <li><code>method</code>: HTTP-метод, используемый для отправки данных: <em>post</em>, или <em>get</em>.
-  <ul>
-   <li>Метод <code>POST</code> должен всегда использоваться если отправка данных приведёт к внесению изменений в базе данных на сервере. Применение данного метода должно повысить уровень защиты от CSRF.</li>
-   <li>Метод <code>GET</code> должен применяться только для форм, действия с которыми не приводят к изменению базы данных (например для поисковых запросов). Кроме того, данный метод рекомендуется применять для создания внешних ссылок на ресурсы сайта.</li>
-  </ul>
- </li>
-</ul>
+  - Метод `POST` должен всегда использоваться если отправка данных приведёт к внесению изменений в базе данных на сервере. Применение данного метода должно повысить уровень защиты от CSRF.
+  - Метод `GET` должен применяться только для форм, действия с которыми не приводят к изменению базы данных (например для поисковых запросов). Кроме того, данный метод рекомендуется применять для создания внешних ссылок на ресурсы сайта.
 
-<p>Ролью сервера в первую очередь является отрисовка начального состояния формы — либо содержащей пустые поля, либо с установленными начальными значениями. После того как пользователь нажмёт на кнопку,  сервер получит все данные формы, а затем должен провести их валидацию. В том случае, если форма содержит неверные данные, сервер должен снова отрисовать форму, показав при этом поля с правильными данными, а также сообщения, описывающие "что именно пошло не так". В тот момент, когда сервер получит запрос с "правильными" данными он должен выполнить все необходимые действия (например, сохранение данных, возврат результата поиска, загрузка файла и тому подобное), а затем, в случае необходимости, проинформировать пользователя.</p>
+Ролью сервера в первую очередь является отрисовка начального состояния формы — либо содержащей пустые поля, либо с установленными начальными значениями. После того как пользователь нажмёт на кнопку, сервер получит все данные формы, а затем должен провести их валидацию. В том случае, если форма содержит неверные данные, сервер должен снова отрисовать форму, показав при этом поля с правильными данными, а также сообщения, описывающие "что именно пошло не так". В тот момент, когда сервер получит запрос с "правильными" данными он должен выполнить все необходимые действия (например, сохранение данных, возврат результата поиска, загрузка файла и тому подобное), а затем, в случае необходимости, проинформировать пользователя.
 
-<p>Как вы видите, создание HTML-формы, валидация и возврат данных, переотрисовка введённых значений, при необходимости, а также выполнение желаемых действий с "правильными данными", в целом, может потребовать довольно больших усилий для того, чтобы все "заработало". Django делает этот процесс намного проще, беря на себя некоторые "тяжёлые" и повторяющиеся участки кода!</p>
+Как вы видите, создание HTML-формы, валидация и возврат данных, переотрисовка введённых значений, при необходимости, а также выполнение желаемых действий с "правильными данными", в целом, может потребовать довольно больших усилий для того, чтобы все "заработало". Django делает этот процесс намного проще, беря на себя некоторые "тяжёлые" и повторяющиеся участки кода!
 
-<h2 id="Процесс_управления_формой_в_Django_2"><a id="Процесс_управления_формой_в_Django">Процесс управления формой в Django</a></h2>
+## Процесс управления формой в Django
 
-<p>Управление формами в Django использует те же самые техники, которые мы изучали в предыдущих частях руководства (при показе информации из наших моделей): отображение получает запрос, выполняет необходимые действия, включающие в себя чтение данных из моделей, генерацию и возврат страницы HTML (из шаблона, в который передаётся <em>контекст,</em> содержащий данные, которые и будут показаны). Что делает данный процесс более сложным, так это то, что серверной части надо дополнительно обработать данные, предоставленные пользователем и, в случае возникновения ошибок, снова перерисовать страницу.</p>
+Управление формами в Django использует те же самые техники, которые мы изучали в предыдущих частях руководства (при показе информации из наших моделей): отображение получает запрос, выполняет необходимые действия, включающие в себя чтение данных из моделей, генерацию и возврат страницы HTML (из шаблона, в который передаётся _контекст,_ содержащий данные, которые и будут показаны). Что делает данный процесс более сложным, так это то, что серверной части надо дополнительно обработать данные, предоставленные пользователем и, в случае возникновения ошибок, снова перерисовать страницу.
 
-<p>Диаграмма, представленная ниже, демонстрирует процесс работы с формой в Django, начиная с запроса страницы, содержащей форму (выделено зелёным цветом).</p>
+Диаграмма, представленная ниже, демонстрирует процесс работы с формой в Django, начиная с запроса страницы, содержащей форму (выделено зелёным цветом).
 
-<p><img alt="Updated form handling process doc." src="https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png" style="display: block; height: 569px; margin: 0px auto; width: 800px;"></p>
+![Updated form handling process doc.](https://mdn.mozillademos.org/files/14205/Form%20Handling%20-%20Standard.png)
 
-<p>В соответствии с данной диаграммой, главными моментами, которые берут на себя формы Django являются:</p>
+В соответствии с данной диаграммой, главными моментами, которые берут на себя формы Django являются:
 
-<ol>
- <li>Показ формы по умолчанию при первом запросе со стороны пользователя.
-  <ul>
-   <li>Форма может содержать пустые поля (например, если вы создаёте новую запись в базе данных), или они (поля) могут иметь начальные значения (например, если вы изменяете запись, или хотите заполнить её каким-либо начальным значением).</li>
-   <li>Форма в данный момент является <em>несвязанной</em>, потому что она не ассоциируется с какими-либо введёнными пользователем данными (хотя и может иметь начальные значения).</li>
-  </ul>
- </li>
- <li>Получение данных из формы (из HTML-формы) со стороны клиента и связывание их с формой (классом формы) на стороне сервера.
-  <ul>
-   <li>Связывание данных с формой означает, что данные, введённые пользователем, а также возможные ошибки, при переотрисовке в дальнейшем, будут относиться именно к данной форме, а не к какой-либо ещё.</li>
-  </ul>
- </li>
- <li>Очистка и валидация данных.
-  <ul>
-   <li>Очистка данных  - это их проверка на наличие возможных значений, или вставок в поля ввода (то есть очистка - это удаление неправильных символов, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер), с последующей конвертацией очищенных данных в подходящие типы данных Python.</li>
-   <li>Валидация проверяет, значения полей (например, правильность введённых дат, их диапазон и так далее)</li>
-  </ul>
- </li>
- <li>Если какие-либо данные являются неверными, то выполнение перерисовки формы, но на этот раз, с уже введёнными пользователем данными и сообщениями об ошибках, описывающих возникшие проблемы.</li>
- <li>Если все данные верны, то исполнение необходимых действий (например, сохранение данных, отправка писем, возврат результата поиска, загрузка файла и так далее)</li>
- <li>Когда все действия были успешно завершены, то перенаправление пользователя на другую страницу.</li>
-</ol>
+1.  Показ формы по умолчанию при первом запросе со стороны пользователя.
 
-<p>Django предоставляет несколько инструментов и приёмов, которые помогают вам во время выполнения задач, описанных выше. Наиболее фундаментальным из них является класс <code>Form</code>, который упрощает генерацию HTML-формы и очистку/валидацию её данных. В следующем разделе мы опишем процесс работы с формами при помощи практического примера по созданию страницы, которая позволит библиотекарям обновлять информацию о книгах.</p>
+    - Форма может содержать пустые поля (например, если вы создаёте новую запись в базе данных), или они (поля) могут иметь начальные значения (например, если вы изменяете запись, или хотите заполнить её каким-либо начальным значением).
+    - Форма в данный момент является _несвязанной_, потому что она не ассоциируется с какими-либо введёнными пользователем данными (хотя и может иметь начальные значения).
 
-<div class="note">
-<p><strong>Примечание:</strong> Понимание того, как используется класс <code>Form</code> поможет вам когда мы будем рассматривать классы фреймворка Django, для работы с формами более "высокого уровня".</p>
-</div>
+2.  Получение данных из формы (из HTML-формы) со стороны клиента и связывание их с формой (классом формы) на стороне сервера.
 
-<h2 id="HTML-форма_обновления_книги._Класс_Form_и_функция_отображения">HTML-форма обновления книги. Класс Form и функция отображения</h2>
+    - Связывание данных с формой означает, что данные, введённые пользователем, а также возможные ошибки, при переотрисовке в дальнейшем, будут относиться именно к данной форме, а не к какой-либо ещё.
 
-<p>Данная глава будет посвящена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библиотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введённых значений, которая будет проверять, чтобы введённая дата не относилась к прошлому, или к слишком далёкому будущему. Когда будет получена "правильная" дата мы запишем её значение в поле  <code>BookInstance.due_back</code>.</p>
+3.  Очистка и валидация данных.
 
-<p>Данный пример будет использовать отображение на основе функции, а также продемонстрирует работу с классом <code>Form</code>. Следующие разделы покажут изменения, которые вам надо сделать, чтобы продемонстрировать работу форм в проекте <em>LocalLibrary</em>.</p>
+    - Очистка данных - это их проверка на наличие возможных значений, или вставок в поля ввода (то есть очистка - это удаление неправильных символов, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер), с последующей конвертацией очищенных данных в подходящие типы данных Python.
+    - Валидация проверяет, значения полей (например, правильность введённых дат, их диапазон и так далее)
 
-<h3 id="Класс_Form">Класс Form</h3>
+4.  Если какие-либо данные являются неверными, то выполнение перерисовки формы, но на этот раз, с уже введёнными пользователем данными и сообщениями об ошибках, описывающих возникшие проблемы.
+5.  Если все данные верны, то исполнение необходимых действий (например, сохранение данных, отправка писем, возврат результата поиска, загрузка файла и так далее)
+6.  Когда все действия были успешно завершены, то перенаправление пользователя на другую страницу.
 
-<p>Класс <code>Form</code> является сердцем системы Django при работе с формами. Он определяет поля формы, их расположение, показ виджетов, текстовых меток, начальных значений, валидацию значений и сообщения об ошибках для "неправильных" полей (если таковые имеются). Данный класс, кроме того, предоставляет методы для отрисовки самого себя в шаблоне при помощи предопределённых форматов (таблицы, списки и так далее), или для получения значения любого элемента (позволяя выполнять более точную отрисовку).</p>
+Django предоставляет несколько инструментов и приёмов, которые помогают вам во время выполнения задач, описанных выше. Наиболее фундаментальным из них является класс `Form`, который упрощает генерацию HTML-формы и очистку/валидацию её данных. В следующем разделе мы опишем процесс работы с формами при помощи практического примера по созданию страницы, которая позволит библиотекарям обновлять информацию о книгах.
 
-<h4 id="Объявление_класса_формы_Form">Объявление класса формы Form</h4>
+> **Примечание:** Понимание того, как используется класс `Form` поможет вам когда мы будем рассматривать классы фреймворка Django, для работы с формами более "высокого уровня".
 
-<p>Синтаксис объявления для класса формы <code>Form</code> очень похож на объявление класса модели <code>Model</code>, он даже использует те же типы полей (и некоторые похожие параметры). Это существенный момент, поскольку в обоих случаях нам надо убедиться, что каждое поле управляет правильным типом данных, соответствует нужному диапазону (или другому критерию) и имеет необходимое описание для показа/документации.</p>
+## HTML-форма обновления книги. Класс Form и функция отображения
 
-<p>Для того, чтобы создать класс с возможностями базового класса <code>Form</code> мы должны импортировать библиотеку <code>forms</code>, наследовать наш класс от класса <code>Form</code>, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:</p>
+Данная глава будет посвящена процессу создания страницы, которая позволит библиотекарям обновлять информацию о книгах (в частности, вводить дату возврата книги). Для того, чтобы сделать это мы создадим форму, которая позволит пользователям вводить значение дат. Мы проинициализируем поле датой, равной 3 неделям, начиная с текущего дня, и, для того, чтобы библиотекарь не имел возможность ввести "неправильную" дату, мы добавим валидацию введённых значений, которая будет проверять, чтобы введённая дата не относилась к прошлому, или к слишком далёкому будущему. Когда будет получена "правильная" дата мы запишем её значение в поле `BookInstance.due_back`.
 
-<pre class="brush: python">from django import forms
+Данный пример будет использовать отображение на основе функции, а также продемонстрирует работу с классом `Form`. Следующие разделы покажут изменения, которые вам надо сделать, чтобы продемонстрировать работу форм в проекте _LocalLibrary_.
+
+### Класс Form
+
+Класс `Form` является сердцем системы Django при работе с формами. Он определяет поля формы, их расположение, показ виджетов, текстовых меток, начальных значений, валидацию значений и сообщения об ошибках для "неправильных" полей (если таковые имеются). Данный класс, кроме того, предоставляет методы для отрисовки самого себя в шаблоне при помощи предопределённых форматов (таблицы, списки и так далее), или для получения значения любого элемента (позволяя выполнять более точную отрисовку).
+
+#### Объявление класса формы Form
+
+Синтаксис объявления для класса формы `Form` очень похож на объявление класса модели `Model`, он даже использует те же типы полей (и некоторые похожие параметры). Это существенный момент, поскольку в обоих случаях нам надо убедиться, что каждое поле управляет правильным типом данных, соответствует нужному диапазону (или другому критерию) и имеет необходимое описание для показа/документации.
+
+Для того, чтобы создать класс с возможностями базового класса `Form` мы должны импортировать библиотеку `forms`, наследовать наш класс от класса `Form`, а затем объявить поля формы. Таким образом, самый простой класс формы в нашем случае будет иметь вид, показанный ниже:
+
+```python
+from django import forms
 
 class RenewBookForm(forms.Form):
     renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
-</pre>
+```
 
-<h4 id="Поля_формы">Поля формы</h4>
+#### Поля формы
 
-<p>В  нашем случае мы имеем одно поле типа <code><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield">DateField</a></code>, которое служит для ввода обновлённой даты возврата книги, которое будет отрендерено в HTML с пустым значением и текстовой меткой "<em>Renewal date:</em>", а также текстовым описанием: "<em>Enter a date between now and 4 weeks (default 3 weeks).</em>" Так как никаких дополнительных опций мы не определяем, то поле будет "получать" даты в следующем формате <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats">input_formats</a>: YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), а для отрисовки по умолчанию, будет использовать <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">виджет</a>: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput">DateInput</a>.</p>
+В нашем случае мы имеем одно поле типа [`DateField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield), которое служит для ввода обновлённой даты возврата книги, которое будет отрендерено в HTML с пустым значением и текстовой меткой "_Renewal date:_", а также текстовым описанием: "_Enter a date between now and 4 weeks (default 3 weeks)._" Так как никаких дополнительных опций мы не определяем, то поле будет "получать" даты в следующем формате [input_formats](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#django.forms.DateField.input_formats): YYYY-MM-DD (2016-11-06), MM/DD/YYYY (02/26/2016), MM/DD/YY (10/25/16), а для отрисовки по умолчанию, будет использовать [виджет](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget): [DateInput](https://docs.djangoproject.com/en/1.10/ref/forms/widgets/#django.forms.DateInput).
 
-<p>Существует множество других типов полей для класса формы, которые по своей функциональности подобны соответствующим им эквивалентам типов полей для классов моделей: <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield"><code>BooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield"><code>CharField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield"><code>ChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield"><code>TypedChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield"><code>DateField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield"><code>DateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield"><code>DecimalField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield"><code>DurationField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield"><code>EmailField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield"><code>FileField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield"><code>FilePathField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield"><code>FloatField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield"><code>ImageField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield"><code>IntegerField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield"><code>GenericIPAddressField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield"><code>MultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield"><code>TypedMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield"><code>NullBooleanField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield"><code>RegexField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield"><code>SlugField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield"><code>TimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield"><code>URLField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield"><code>UUIDField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield"><code>ComboField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield"><code>MultiValueField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield"><code>SplitDateTimeField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield"><code>ModelMultipleChoiceField</code></a>, <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield"><code>ModelChoiceField</code></a>​​​​.</p>
+Существует множество других типов полей для класса формы, которые по своей функциональности подобны соответствующим им эквивалентам типов полей для классов моделей: [`BooleanField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#booleanfield), [`CharField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#charfield), [`ChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#choicefield), [`TypedChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedchoicefield), [`DateField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datefield), [`DateTimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#datetimefield), [`DecimalField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#decimalfield), [`DurationField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#durationfield), [`EmailField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#emailfield), [`FileField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filefield), [`FilePathField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#filepathfield), [`FloatField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#floatfield), [`ImageField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#imagefield), [`IntegerField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#integerfield), [`GenericIPAddressField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#genericipaddressfield), [`MultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multiplechoicefield), [`TypedMultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#typedmultiplechoicefield), [`NullBooleanField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#nullbooleanfield), [`RegexField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#regexfield), [`SlugField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#slugfield), [`TimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#timefield), [`URLField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#urlfield), [`UUIDField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#uuidfield), [`ComboField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#combofield), [`MultiValueField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#multivaluefield), [`SplitDateTimeField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#splitdatetimefield), [`ModelMultipleChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelmultiplechoicefield), [`ModelChoiceField`](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#modelchoicefield)​​​​.
 
-<p>Общие аргументы для большинства полей перечислены ниже:</p>
+Общие аргументы для большинства полей перечислены ниже:
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required">required</a>: Если <code>True</code>, то данное поле не может быть пустым, или иметь значение<code>None</code>. Данное значение установлено по умолчанию.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a>: Текстовая метка, используемая для рендеринга поля в HTML-код. Если <a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label">label</a> не определена, то Django попытается создать её значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчёркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: <em>Renewal date</em>).</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix">label_suffix</a>: По умолчанию показывает двоеточие после текста метки (например, Renewal date<strong>:</strong>). Данный параметр позволяет вам указать любой суффикс по вашему желанию.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial">initial</a>: Начальное значение для поля при показе формы.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget">widget</a>: Применяемый виджет для поля.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text">help_text</a> (как показано в примере выше): Дополнительный текст, который может быть показан на форме, для описания того, как использовать поле.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages">error_messages</a>: Список сообщений об ошибках для данного поля. Вы можете переопределить его своими сообщениями, при необходимости.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators">validators</a>: Список функций, которые будут вызваны для валидации, введённого в поле значения.</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize">localize</a>: Позволяет осуществить локализацию данных поля формы (например, формат ввода числовых значений, или дат).</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled">disabled</a>: Если установлено в <code>True</code>, то поле показывается, но его значение изменить нельзя. По умолчанию равно <code>False</code>.</li>
-</ul>
+- [required](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#required): Если `True`, то данное поле не может быть пустым, или иметь значение`None`. Данное значение установлено по умолчанию.
+- [label](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label): Текстовая метка, используемая для рендеринга поля в HTML-код. Если [label](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label) не определена, то Django попытается создать её значение при помощи имени поля, переводя первый символ в верхний регистр, а также заменяя символы подчёркивания пробелами (например, для переменной с именем renewal_date, будет создан следующий текст метки: _Renewal date_).
+- [label_suffix](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#label-suffix): По умолчанию показывает двоеточие после текста метки (например, Renewal date**:**). Данный параметр позволяет вам указать любой суффикс по вашему желанию.
+- [initial](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#initial): Начальное значение для поля при показе формы.
+- [widget](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#widget): Применяемый виджет для поля.
+- [help_text](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#help-text) (как показано в примере выше): Дополнительный текст, который может быть показан на форме, для описания того, как использовать поле.
+- [error_messages](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#error-messages): Список сообщений об ошибках для данного поля. Вы можете переопределить его своими сообщениями, при необходимости.
+- [validators](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#validators): Список функций, которые будут вызваны для валидации, введённого в поле значения.
+- [localize](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#localize): Позволяет осуществить локализацию данных поля формы (например, формат ввода числовых значений, или дат).
+- [disabled](https://docs.djangoproject.com/en/1.10/ref/forms/fields/#disabled): Если установлено в `True`, то поле показывается, но его значение изменить нельзя. По умолчанию равно `False`.
 
-<h4 id="Валидация">Валидация</h4>
+#### Валидация
 
-<p>Django предоставляет несколько мест где вы можете осуществить валидацию ваших данных. Простейшим способом проверки значения одиночного поля является переопределение метода<code>clean_<strong>&lt;fieldname&gt;</strong>()</code> (здесь, <code><strong>&lt;fieldname&gt;</strong></code> это имя поля, которое вы хотите проверить). Например, мы хотим проверить, что введённое значение <code>renewal_date</code> находится между текущей датой и  4 неделями в будущем. Для этого мы создаём метод <code>clean_<strong>renewal_date</strong>()</code>, как показано ниже:</p>
+Django предоставляет несколько мест где вы можете осуществить валидацию ваших данных. Простейшим способом проверки значения одиночного поля является переопределение метода`clean_<fieldname>()` (здесь, **`<fieldname>`** это имя поля, которое вы хотите проверить). Например, мы хотим проверить, что введённое значение `renewal_date` находится между текущей датой и 4 неделями в будущем. Для этого мы создаём метод `clean_renewal_date()`, как показано ниже:
 
-<pre class="brush: python">from django import forms
+```python
+from django import forms
 
-<strong>from django.core.exceptions import ValidationError
+from django.core.exceptions import ValidationError
 from django.utils.translation import ugettext_lazy as _
 import datetime #for checking renewal date range.
-</strong>
+
 class RenewBookForm(forms.Form):
     renewal_date = forms.DateField(help_text="Enter a date between now and 4 weeks (default 3).")
 
-<strong>    def clean_renewal_date(self):
+    def clean_renewal_date(self):
         data = self.cleaned_data['renewal_date']
 
         #Проверка того, что дата не выходит за "нижнюю" границу (не в прошлом).
-        if data &lt; datetime.date.today():
+        if data < datetime.date.today():
             raise ValidationError(_('Invalid date - renewal in past'))
 
         #Проверка того, то дата не выходит за "верхнюю" границу (+4 недели).
-        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
             raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
 
         # Помните, что всегда надо возвращать "очищенные" данные.
-        return data</strong></pre>
+        return data
+```
 
-<p>Необходимо отметить два важных момента. Первый это то, что мы получаем наши данные при помощи словаря <code>self.cleaned_data['renewal_date']</code>, а затем в конце возвращаем полученное значение, для проведения необходимых проверок. Данный шаг позволяет нам, при помощи валидаторов, получить "очищенные", проверенные, а затем, приведённые к стандартным типам, данные (в нашем случае к типу Python <code>datetime.datetime</code>).</p>
+Необходимо отметить два важных момента. Первый это то, что мы получаем наши данные при помощи словаря `self.cleaned_data['renewal_date']`, а затем в конце возвращаем полученное значение, для проведения необходимых проверок. Данный шаг позволяет нам, при помощи валидаторов, получить "очищенные", проверенные, а затем, приведённые к стандартным типам, данные (в нашем случае к типу Python `datetime.datetime`).
 
-<p>Второй момент касается того случая, когда наше значение "выпадает за рамки" и мы "выкидываем" исключение <code>ValidationError</code>, в котором указываем текст, который мы хотим показать на форме, для случая когда были введены неправильные данные. Пример, показанный выше, оборачивает данный текст при помощи <a href="https://docs.djangoproject.com/en/1.10/topics/i18n/translation/">функции перевода Django</a> <code>ugettext_lazy()</code> (импортируемую через <code>_()</code>), которая может вам пригодиться, если вы планируете перевести ваш сайт в будущем.</p>
+Второй момент касается того случая, когда наше значение "выпадает за рамки" и мы "выкидываем" исключение `ValidationError`, в котором указываем текст, который мы хотим показать на форме, для случая когда были введены неправильные данные. Пример, показанный выше, оборачивает данный текст при помощи [функции перевода Django](https://docs.djangoproject.com/en/1.10/topics/i18n/translation/) `ugettext_lazy()` (импортируемую через `_()`), которая может вам пригодиться, если вы планируете перевести ваш сайт в будущем.
 
-<div class="note">
-<p><strong>Примечание:</strong> Существует множество других методов и примеров валидации различных форм, которые можно найти в <a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Формы и валидация поля</a> (Django docs). Например, в случае, если у вас имеется много полей, которые зависят один от другого, вы можете переопределить функцию <a href="https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.clean">Form.clean()</a> и, при необходимости, "выкинуть" <code>ValidationError</code>.</p>
-</div>
+> **Примечание:** Существует множество других методов и примеров валидации различных форм, которые можно найти в [Формы и валидация поля](https://docs.djangoproject.com/en/1.10/ref/forms/validation/) (Django docs). Например, в случае, если у вас имеется много полей, которые зависят один от другого, вы можете переопределить функцию [Form.clean()](https://docs.djangoproject.com/en/1.10/ref/forms/api/#django.forms.Form.clean) и, при необходимости, "выкинуть" `ValidationError`.
 
-<p>В целом, это все, что нам понадобится для создания формы в данном примере!</p>
+В целом, это все, что нам понадобится для создания формы в данном примере!
 
-<h4 id="Копирование_класса_формы">Копирование класса формы</h4>
+#### Копирование класса формы
 
-<p>Создайте и откройте файл <strong>locallibrary/catalog/forms.py</strong>, а затем скопируйте в него весь код, указанный в предыдущем фрагменте.</p>
+Создайте и откройте файл **locallibrary/catalog/forms.py**, а затем скопируйте в него весь код, указанный в предыдущем фрагменте.
 
-<h3 id="Конфигурация_URL-адресов">Конфигурация URL-адресов</h3>
+### Конфигурация URL-адресов
 
-<p>Перед созданием отображения давайте добавим соответствующую конфигурацию URL-адреса для страницы обновления книг. Скопируйте следующий фрагмент в нижнюю часть файла<strong> locallibrary/catalog/urls.py</strong>.</p>
+Перед созданием отображения давайте добавим соответствующую конфигурацию URL-адреса для страницы обновления книг. Скопируйте следующий фрагмент в нижнюю часть файла **locallibrary/catalog/urls.py**.
 
-<pre class="brush: python">urlpatterns += [
-    url(r'^book/(?P&lt;pk&gt;[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
-]</pre>
+```python
+urlpatterns += [
+    url(r'^book/(?P<pk>[-\w]+)/renew/$', views.renew_book_librarian, name='renew-book-librarian'),
+]
+```
 
-<p>Данная конфигурация перенаправит запросы с адресов формата <strong>/catalog/book/<em>&lt;bookinstance id&gt;</em>/renew/</strong> в функции с именем <code>renew_book_librarian()</code> в <strong>views.py</strong>, туда же передаст идентификатор id записи <code>BookInstance</code> в качестве параметра с именем <code>pk</code>. Шаблон соответствует только если <strong>pk </strong>это правильно отформатированный <strong>uiid.</strong></p>
+Данная конфигурация перенаправит запросы с адресов формата **/catalog/book/_\<bookinstance id>_/renew/** в функции с именем `renew_book_librarian()` в **views.py**, туда же передаст идентификатор id записи `BookInstance` в качестве параметра с именем `pk`. Шаблон соответствует только если **pk** это правильно отформатированный **uiid.**
 
-<div class="note">
-<p><strong>Примечание</strong>: Вместо имени "pk" мы можем использовать любое другое, по нашему желанию, потому что мы имеем полный контроль над функцией отображения (которого у нас нет в случае использования встроенного обобщённого класса отображения, который ожидает параметр с определённым именем). Тем не менее имя <code>pk</code> является понятным сокращением от "primary key", поэтому мы его тут и используем!</p>
-</div>
+> **Примечание:** Вместо имени "pk" мы можем использовать любое другое, по нашему желанию, потому что мы имеем полный контроль над функцией отображения (которого у нас нет в случае использования встроенного обобщённого класса отображения, который ожидает параметр с определённым именем). Тем не менее имя `pk` является понятным сокращением от "primary key", поэтому мы его тут и используем!
 
-<h3 id="Отображение">Отображение</h3>
+### Отображение
 
-<p>Как было отмечено в разделе <a href="#Процесс_управления_формой_в_Django">Процесс управление формой в Django</a>, отображение должно отрендерить форму по умолчанию, когда она вызывается в первый раз и, затем, перерендерить её, в том случае, если возникли какие-либо ошибки при работе с её полями. В случае же успеха, после обработки "правильных" данных отображение перенаправляет пользователя на новую (другую) страницу. Для того чтобы выполнить все эти действия, отображение должно знать вызвано ли оно в первый раз для отрисовки формы по умолчанию, а если это не так, то провести валидацию полученных данных.</p>
+Как было отмечено в разделе [Процесс управление формой в Django](#Процесс_управления_формой_в_Django), отображение должно отрендерить форму по умолчанию, когда она вызывается в первый раз и, затем, перерендерить её, в том случае, если возникли какие-либо ошибки при работе с её полями. В случае же успеха, после обработки "правильных" данных отображение перенаправляет пользователя на новую (другую) страницу. Для того чтобы выполнить все эти действия, отображение должно знать вызвано ли оно в первый раз для отрисовки формы по умолчанию, а если это не так, то провести валидацию полученных данных.
 
-<p>Для форм, которые используют <code>POST</code>-запрос при отправке информации на сервер, наиболее общей схемой проверки данного факта является следующая строка кода <code>if request.method == 'POST':</code>. <code>GET</code>-запросу, а также первому запросу формы, в таком случае соответствует блок <code>else</code>. Если вы хотите отправлять свои данные в виде <code>GET</code>-запроса, то в таком случае приёмом проверки того факта, что данный запрос первый (или последующий), является получение значения какого-либо поля формы (например, если значение скрытого поля формы пустое, то данный вызов является первым).</p>
+Для форм, которые используют `POST`-запрос при отправке информации на сервер, наиболее общей схемой проверки данного факта является следующая строка кода `if request.method == 'POST':`. `GET`-запросу, а также первому запросу формы, в таком случае соответствует блок `else`. Если вы хотите отправлять свои данные в виде `GET`-запроса, то в таком случае приёмом проверки того факта, что данный запрос первый (или последующий), является получение значения какого-либо поля формы (например, если значение скрытого поля формы пустое, то данный вызов является первым).
 
-<p>Процесс обновления книги приводит к изменению информации в базе данных, таким образом, в соответствии с нашими соглашениями, в таком случае мы должны применять запрос типа <code>POST</code>. Фрагмент кода, представленный ниже, показывает (наиболее общую) схему работы для таких запросов. </p>
+Процесс обновления книги приводит к изменению информации в базе данных, таким образом, в соответствии с нашими соглашениями, в таком случае мы должны применять запрос типа `POST`. Фрагмент кода, представленный ниже, показывает (наиболее общую) схему работы для таких запросов.
 
-<pre class="brush: python">from django.shortcuts import get_object_or_404
+```python
+from django.shortcuts import get_object_or_404
 from django.http import HttpResponseRedirect
 from django.urls import reverse
 import datetime
@@ -230,13 +210,13 @@ def renew_book_librarian(request, pk):
     book_inst = get_object_or_404(BookInstance, pk=pk)
 
     # Если данный запрос типа POST, тогда
-<strong>    if request.method == 'POST':</strong>
+    if request.method == 'POST':
 
         # Создаём экземпляр формы и заполняем данными из запроса (связывание, binding):
         form = RenewBookForm(request.POST)
 
         # Проверка валидности данных формы:
-        <strong>if form.is_valid():</strong>
+        if form.is_valid():
             # Обработка данных из form.cleaned_data
             #(здесь мы просто присваиваем их полю due_back)
             book_inst.due_back = form.cleaned_data['renewal_date']
@@ -246,43 +226,45 @@ def renew_book_librarian(request, pk):
             return HttpResponseRedirect(reverse('all-borrowed') )
 
     # Если это GET (или какой-либо ещё), создать форму по умолчанию.
-<strong>    else:</strong>
+    else:
         proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
         form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
 
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+```
 
-<p>В первую очередь мы импортируем наш класс формы (<code>RenewBookForm</code>), а также другие необходимые объекты и методы:</p>
+В первую очередь мы импортируем наш класс формы (`RenewBookForm`), а также другие необходимые объекты и методы:
 
-<ul>
- <li><code><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404">get_object_or_404()</a></code>: Возвращает определённый объект из модели в зависимости от значения его первичного ключа, или выбрасывает исключение <code>Http404</code>, если данной записи не существует. </li>
- <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect">HttpResponseRedirect</a></code>: Данный класс перенаправляет на другой адрес (HTTP код статуса 302). </li>
- <li><code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse">reverse()</a></code>: Данная функция генерирует URL-адрес при помощи соответствующего имени URL конфигурации/преобразования и дополнительных аргументов. Это эквивалент Python тэгу <code>url</code>, которые мы использовали в наших шаблонах.</li>
- <li><code><a href="https://docs.python.org/3/library/datetime.html">datetime</a></code>: Библиотека Python для работы с датами и временим. </li>
-</ul>
+- [`get_object_or_404()`](https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#get-object-or-404): Возвращает определённый объект из модели в зависимости от значения его первичного ключа, или выбрасывает исключение `Http404`, если данной записи не существует.
+- [`HttpResponseRedirect`](https://docs.djangoproject.com/en/1.10/ref/request-response/#django.http.HttpResponseRedirect): Данный класс перенаправляет на другой адрес (HTTP код статуса 302).
+- [`reverse()`](https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#django.urls.reverse): Данная функция генерирует URL-адрес при помощи соответствующего имени URL конфигурации/преобразования и дополнительных аргументов. Это эквивалент Python тэгу `url`, которые мы использовали в наших шаблонах.
+- [`datetime`](https://docs.python.org/3/library/datetime.html): Библиотека Python для работы с датами и временим.
 
-<p>В отображении аргумент <code>pk</code> мы используем в функции<code>get_object_or_404()</code> для получения текущего объекта типа <code>BookInstance</code> (если его не существует, то функция, а следом и наше отображение прервут своё выполнение, а на странице пользователя отобразится сообщение об ошибке: "объект не найден"). Если запрос вызова отображения <em>не является</em> <code>POST</code>-запросом, то мы переходим к условному блоку <code>else</code>, в котором мы создаём форму по умолчанию и передаём ей начальное значения<code>initial</code> для поля <code>renewal_date</code> (выделено жирным ниже, - 3 недели, начиная с текущей даты). </p>
+В отображении аргумент `pk` мы используем в функции`get_object_or_404()` для получения текущего объекта типа `BookInstance` (если его не существует, то функция, а следом и наше отображение прервут своё выполнение, а на странице пользователя отобразится сообщение об ошибке: "объект не найден"). Если запрос вызова отображения _не является_ `POST`-запросом, то мы переходим к условному блоку `else`, в котором мы создаём форму по умолчанию и передаём ей начальное значения`initial` для поля `renewal_date` (выделено жирным ниже, - 3 недели, начиная с текущей даты).
 
-<pre class="brush: python">    book_inst = get_object_or_404(BookInstance, pk=pk)
+```python
+    book_inst = get_object_or_404(BookInstance, pk=pk)
 
     # Если это GET (или другой метод), тогда создаём форму по умолчанию
-    <strong>else:</strong>
-        proposed_renewal_date = datetime.date.today() + datetime.timedelta(<strong>weeks=3</strong>)
-        <strong>form = RenewBookForm(initial={'</strong>renewal_date<strong>': </strong>proposed_renewal_date<strong>,})</strong>
+    else:
+        proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
+        form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
 
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+```
 
-<p>После создания формы мы вызываем функцию <code>render()</code>, чтобы создать HTML страницу; передаём ей в качестве параметров шаблон и контекст, который содержит объект формы. Кроме того, контекст содержит объект типа <code>BookInstance</code>, который мы будем использовать в шаблоне, для получения информации об обновляемой книге.</p>
+После создания формы мы вызываем функцию `render()`, чтобы создать HTML страницу; передаём ей в качестве параметров шаблон и контекст, который содержит объект формы. Кроме того, контекст содержит объект типа `BookInstance`, который мы будем использовать в шаблоне, для получения информации об обновляемой книге.
 
-<p>Если все таки у нас <code>POST</code>-запрос, тогда мы создаём объект с  именем <code>form</code> и заполняем его данными, полученными из запроса. Данный процесс называется связыванием (или, биндингом, от англ. "binding") и позволяет нам провести валидацию данных. Далее осуществляется валидация формы, при этом проверяются все поля формы — для этого используются как код обобщённого класса, так и пользовательских функций, в частности нашей функции проверки введённых дат <code>clean_renewal_date()</code>. </p>
+Если все таки у нас `POST`-запрос, тогда мы создаём объект с именем `form` и заполняем его данными, полученными из запроса. Данный процесс называется связыванием (или, биндингом, от англ. "binding") и позволяет нам провести валидацию данных. Далее осуществляется валидация формы, при этом проверяются все поля формы — для этого используются как код обобщённого класса, так и пользовательских функций, в частности нашей функции проверки введённых дат `clean_renewal_date()`.
 
-<pre class="brush: python">    book_inst = get_object_or_404(BookInstance, pk=pk)
+```python
+    book_inst = get_object_or_404(BookInstance, pk=pk)
 
     # Если данный запрос типа POST, тогда
     if request.method == 'POST':
 
         # Создаём экземпляр формы и заполняем данными из запроса (связывание, binding):
-<strong>        form = RenewBookForm(request.POST)</strong>
+        form = RenewBookForm(request.POST)
 
         # Проверка валидности формы:
         if form.is_valid():
@@ -293,23 +275,23 @@ def renew_book_librarian(request, pk):
             # redirect to a new URL:
             return HttpResponseRedirect(reverse('all-borrowed') )
 
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+```
 
-<p>Если формы не прошла валидацию, то мы снова вызываем функцию <code>render()</code>, но на этот раз форма будет содержать сообщения об ошибках. </p>
+Если формы не прошла валидацию, то мы снова вызываем функцию `render()`, но на этот раз форма будет содержать сообщения об ошибках.
 
-<p>Если форма прошла валидацию, тогда мы можем начать использовать данные, получая их из атрибута формы <code>form.cleaned_data</code>  (то есть, <code>data = form.cleaned_data['renewal_date']</code>). Здесь мы просто сохраняем данные в поле <code>due_back</code> , соответствующего объекта<code> BookInstance</code>.</p>
+Если форма прошла валидацию, тогда мы можем начать использовать данные, получая их из атрибута формы `form.cleaned_data` (то есть, `data = form.cleaned_data['renewal_date']`). Здесь мы просто сохраняем данные в поле `due_back` , соответствующего объекта` BookInstance`.
 
-<div class="warning">
-<p><strong>Важно</strong>: Хотя вы также можете получить доступ к данным формы непосредственно через запрос (например <code>request.POST['renewal_date'],</code> или <code>request.GET['renewal_date']</code> (в случае GET-запроса), это НЕ рекомендуется. Очищенные данные проверены на вредоносность и преобразованы в типы, совместимые с Python.</p>
-</div>
+> **Предупреждение:** **Важно**: Хотя вы также можете получить доступ к данным формы непосредственно через запрос (например `request.POST['renewal_date'],` или `request.GET['renewal_date']` (в случае GET-запроса), это НЕ рекомендуется. Очищенные данные проверены на вредоносность и преобразованы в типы, совместимые с Python.
 
-<p>Последним шагом в части обработки формы представления является перенаправление на другую страницу, обычно страницу «Успех». В нашем случае мы используем объект класса <code>HttpResponseRedirect</code> и функцию <code>reverse()</code> для перехода к отображению с именем <code>'all-borrowed'</code> (это было домашним заданием в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Руководство часть 8: Аутентификация и разграничение доступа</a>). Если вы не создали данную страницу, то просто укажите переход на домашнюю страницу сайта по адресу '/').</p>
+Последним шагом в части обработки формы представления является перенаправление на другую страницу, обычно страницу «Успех». В нашем случае мы используем объект класса `HttpResponseRedirect` и функцию `reverse()` для перехода к отображению с именем `'all-borrowed'` (это было домашним заданием в [Руководство часть 8: Аутентификация и разграничение доступа](/ru/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself)). Если вы не создали данную страницу, то просто укажите переход на домашнюю страницу сайта по адресу '/').
 
-<p>Все это необходимо для управления формой как таковой, но нам нужно как-то ограничить доступ к отображению (открыть доступ только библиотекарям). Мы могли бы создать новое разрешение (permission) в классе <code>BookInstance</code> ("<code>can_renew</code>"), но мы пойдём простым путём и воспользуемся функцией-декоратором <code>@permission_required</code>  вместе с нашим существующим разрешением<code>can_mark_returned</code>.</p>
+Все это необходимо для управления формой как таковой, но нам нужно как-то ограничить доступ к отображению (открыть доступ только библиотекарям). Мы могли бы создать новое разрешение (permission) в классе `BookInstance` ("`can_renew`"), но мы пойдём простым путём и воспользуемся функцией-декоратором `@permission_required` вместе с нашим существующим разрешением`can_mark_returned`.
 
-<p>Окончательный вид отображения показан ниже. Пожалуйста, скопируйте данный текст в нижнюю часть файла <strong>locallibrary/catalog/views.py</strong>.</p>
+Окончательный вид отображения показан ниже. Пожалуйста, скопируйте данный текст в нижнюю часть файла **locallibrary/catalog/views.py**.
 
-<pre><strong>from django.contrib.auth.decorators import permission_required</strong>
+```
+from django.contrib.auth.decorators import permission_required
 
 from django.shortcuts import get_object_or_404
 from django.http import HttpResponseRedirect
@@ -318,7 +300,7 @@ import datetime
 
 from .forms import RenewBookForm
 
-<strong>@permission_required('catalog.<code>can_mark_returned</code>')</strong>
+@permission_required('catalog.can_mark_returned')
 def renew_book_librarian(request, pk):
     """
     View function for renewing a specific BookInstance by librarian
@@ -346,183 +328,182 @@ def renew_book_librarian(request, pk):
         form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
 
     return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
-</pre>
+```
 
-<h3 id="Шаблон">Шаблон</h3>
+### Шаблон
 
-<p>Создайте шаблон, на который ссылается наше отображение (<strong>/catalog/templates/catalog/book_renew_librarian.html</strong>) и скопируйте в него код, указанный ниже:</p>
+Создайте шаблон, на который ссылается наше отображение (**/catalog/templates/catalog/book_renew_librarian.html**) и скопируйте в него код, указанный ниже:
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 {% block content %}
 
-    &lt;h1&gt;Renew: \{{bookinst.book.title}}&lt;/h1&gt;
-    &lt;p&gt;Borrower: \{{bookinst.borrower}}&lt;/p&gt;
-    &lt;p{% if bookinst.is_overdue %} class="text-danger"{% endif %}&gt;Due date: \{{bookinst.due_back}}&lt;/p&gt;
+    <h1>Renew: \{{bookinst.book.title}}</h1>
+    <p>Borrower: \{{bookinst.borrower}}</p>
+    <p{% if bookinst.is_overdue %} class="text-danger"{% endif %}>Due date: \{{bookinst.due_back}}</p>
 
-<strong>    &lt;form action="" method="post"&gt;
+    <form action="" method="post">
         {% csrf_token %}
-        &lt;table&gt;
+        <table>
         \{{ form }}
-        &lt;/table&gt;
-        &lt;input type="submit" value="Submit" /&gt;
-    &lt;/form&gt;</strong>
+        </table>
+        <input type="submit" value="Submit" />
+    </form>
 
-{% endblock %}</pre>
+{% endblock %}
+```
 
-<p>Большая его часть вам знакома из предыдущих частей руководства. Мы расширяем базовый шаблон, а затем замещаем блок содержимого <code>content</code>. У нас имеется возможность ссылаться на переменную <code>\{{bookinst}}</code> (и её поля) поскольку мы передали её в объект контекста при вызове функции <code>render()</code>. Здесь мы используем данный объект для вывода заголовка книги, дат её получения и возврата.</p>
+Большая его часть вам знакома из предыдущих частей руководства. Мы расширяем базовый шаблон, а затем замещаем блок содержимого `content`. У нас имеется возможность ссылаться на переменную `\{{bookinst}}` (и её поля) поскольку мы передали её в объект контекста при вызове функции `render()`. Здесь мы используем данный объект для вывода заголовка книги, дат её получения и возврата.
 
-<p>Код формы относительно прост. В первую очередь мы объявляем тэг<code>form</code>, затем определяем куда будут отправлены данные (<code>action</code>) и каким способом (<code>method</code>, в данном случае "HTTP POST") — если обратитесь к обзору раздела <a href="#HTML_forms">Формы HTML</a> в верхней части данной страницы, то найдёте там замещение, что пустое значение атрибута <code>action</code>, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы  (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку <code>submit</code> при помощи которой мы можем отправить наши данные. Блок <code>{% csrf_token %}</code>, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.</p>
+Код формы относительно прост. В первую очередь мы объявляем тэг`form`, затем определяем куда будут отправлены данные (`action`) и каким способом (`method`, в данном случае "HTTP POST") — если обратитесь к обзору раздела [Формы HTML](#HTML_forms) в верхней части данной страницы, то найдёте там замещение, что пустое значение атрибута `action`, означает, что данные из формы будут переданы обратно по текущему URL-адресу данной страницы (чего мы и хотим!). Внутри тэга формы мы объявляем кнопку `submit` при помощи которой мы можем отправить наши данные. Блок `{% csrf_token %}`, добавленный первой строкой внутри блока формы, является частью фреймворка Django и служит для борьбы с CSRF.
 
-<div class="note">
-<p><strong>Примечание:</strong> Добавляйте <code>{% csrf_token %}</code> в каждый шаблон Django, в котором вы создаёте форму для отправки данных методом <code>POST</code>. Это поможет уменьшить вероятность взлома вашего сайта злоумышленниками.</p>
-</div>
+> **Примечание:** Добавляйте `{% csrf_token %}` в каждый шаблон Django, в котором вы создаёте форму для отправки данных методом `POST`. Это поможет уменьшить вероятность взлома вашего сайта злоумышленниками.
 
-<p>Все что осталось, это указать переменную <code>\{{form}}</code>, которую мы передали в шаблон в словаре контекста. Возможно это вас не удивит, но таким образом мы предоставим возможность форме отрендерить свои поля с их метками, виджетами и дополнительными текстами, и в результате мы получим следующее:</p>
+Все что осталось, это указать переменную `\{{form}}`, которую мы передали в шаблон в словаре контекста. Возможно это вас не удивит, но таким образом мы предоставим возможность форме отрендерить свои поля с их метками, виджетами и дополнительными текстами, и в результате мы получим следующее:
 
-<pre class="brush: html">&lt;tr&gt;
-  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
-  &lt;td&gt;
-    &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required /&gt;
-    &lt;br /&gt;
-    &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
-  &lt;/td&gt;
-&lt;/tr&gt;
-</pre>
+```html
+<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+  <td>
+    <input id="id_renewal_date" name="renewal_date" type="text" value="2016-11-08" required />
+    <br />
+    <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+  </td>
+</tr>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Возможно это не очевидно, поскольку наша форма содержит только одно поле, но по умолчанию каждое поле формы помещается в её собственную строку таблицы (поэтому переменная <code>\{{form}}</code> находится внутри тэга <code>table </code>.​​​​​​ Тот же результат можно получить, если воспользоваться следующим вызовом <code>\{{ form.as_table }}</code>.</p>
-</div>
+> **Примечание:** Возможно это не очевидно, поскольку наша форма содержит только одно поле, но по умолчанию каждое поле формы помещается в её собственную строку таблицы (поэтому переменная `\{{form}}` находится внутри тэга `table `.​​​​​​ Тот же результат можно получить, если воспользоваться следующим вызовом `\{{ form.as_table }}`.
 
-<p>Если вы ввели неправильную дату, то на странице вы должны получить список сообщений об ошибках (показано жирным ниже).</p>
+Если вы ввели неправильную дату, то на странице вы должны получить список сообщений об ошибках (показано жирным ниже).
 
-<pre class="brush: html">&lt;tr&gt;
-  &lt;th&gt;&lt;label for="id_renewal_date"&gt;Renewal date:&lt;/label&gt;&lt;/th&gt;
-   &lt;td&gt;
-<strong>      &lt;ul class="errorlist"&gt;
-        &lt;li&gt;Invalid date - renewal in past&lt;/li&gt;
-      &lt;/ul&gt;</strong>
-      &lt;input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required /&gt;
-      &lt;br /&gt;
-      &lt;span class="helptext"&gt;Enter date between now and 4 weeks (default 3 weeks).&lt;/span&gt;
-    &lt;/td&gt;
-&lt;/tr&gt;</pre>
+```html
+<tr>
+  <th><label for="id_renewal_date">Renewal date:</label></th>
+   <td>
+      <ul class="errorlist">
+        <li>Invalid date - renewal in past</li>
+      </ul>
+      <input id="id_renewal_date" name="renewal_date" type="text" value="2015-11-08" required />
+      <br />
+      <span class="helptext">Enter date between now and 4 weeks (default 3 weeks).</span>
+    </td>
+</tr>
+```
 
-<h4 id="Другие_варианты_применения_переменной_шаблона_form">Другие варианты применения переменной шаблона form</h4>
+#### Другие варианты применения переменной шаблона form
 
-<p>В простом случае применения <code>\{{form}}</code> как показано выше, каждое поле рендерится  в виде отдельной строки таблицы. Кроме того, вы можете отрендерить каждое поле как список элементов (<code>\{{form.as_ul}}</code> ), или как параграф (<code>\{{form.as_p}}</code>).</p>
+В простом случае применения `\{{form}}` как показано выше, каждое поле рендерится в виде отдельной строки таблицы. Кроме того, вы можете отрендерить каждое поле как список элементов (`\{{form.as_ul}}` ), или как параграф (`\{{form.as_p}}`).
 
-<p>Что ещё больше вдохновляет, так это то, что вы можете полностью контролировать процесс рендеринга любой части формы, используя для этого дот-нотацию (точку). Например, мы можем получить доступ к следующим полям поля формы <code>renewal_date</code>:</p>
+Что ещё больше вдохновляет, так это то, что вы можете полностью контролировать процесс рендеринга любой части формы, используя для этого дот-нотацию (точку). Например, мы можем получить доступ к следующим полям поля формы `renewal_date`:
 
-<ul>
- <li><code>\{{form.renewal_date}}:</code> само поле.</li>
- <li><code>\{{form.renewal_date.errors}}</code>: Список ошибок.</li>
- <li><code>\{{form.renewal_date.id_for_label}}</code>: Идентификатор текстовой метки.</li>
- <li><code>\{{form.renewal_date.help_text}}</code>: Дополнительный текст.</li>
- <li>и так далее!</li>
-</ul>
+- `\{{form.renewal_date}}:` само поле.
+- `\{{form.renewal_date.errors}}`: Список ошибок.
+- `\{{form.renewal_date.id_for_label}}`: Идентификатор текстовой метки.
+- `\{{form.renewal_date.help_text}}`: Дополнительный текст.
+- и так далее!
 
-<p>Примеры того как вручную отрендерить формы в шаблонах, а также пробежать циклом по шаблонным полям, смотрите <a href="https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually">Работы с формами &gt; Ручная работа с формами</a> (Django docs).</p>
+Примеры того как вручную отрендерить формы в шаблонах, а также пробежать циклом по шаблонным полям, смотрите [Работы с формами > Ручная работа с формами](https://docs.djangoproject.com/en/1.10/topics/forms/#rendering-fields-manually) (Django docs).
 
-<h3 id="Тестирование_страницы">Тестирование страницы</h3>
+### Тестирование страницы
 
-<p>Если вы выполнили задание в <a href="/en-US/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself">Django руководство часть 8: Аутентификация и разрешение доступа</a>, то у вас должна быть страница со списком всех книг в наличии библиотеки и данный список (страница) должен быть доступен только её сотрудникам. На данной странице в каждом пункте (для каждой книги) мы можем добавить ссылку на нашу новую страницу обновления книги.</p>
+Если вы выполнили задание в [Django руководство часть 8: Аутентификация и разрешение доступа](/ru/docs/Learn/Server-side/Django/authentication_and_sessions#Challenge_yourself), то у вас должна быть страница со списком всех книг в наличии библиотеки и данный список (страница) должен быть доступен только её сотрудникам. На данной странице в каждом пункте (для каждой книги) мы можем добавить ссылку на нашу новую страницу обновления книги.
 
-<pre class="brush: html">{% if perms.catalog.can_mark_returned %}- &lt;a href="{% url 'renew-book-librarian' bookinst.id %}"&gt;Renew&lt;/a&gt;  {% endif %}</pre>
+```html
+{% if perms.catalog.can_mark_returned %}- <a href="{% url 'renew-book-librarian' bookinst.id %}">Renew</a>  {% endif %}
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Помните что, для того чтобы перейти на страницу обновления книги, ваш тестовый логин должен иметь разрешение доступа типа "<code>catalog.can_mark_returned</code>"(возможно надо воспользоваться вашим аккаунтом для суперпользователя).</p>
-</div>
+> **Примечание:** Помните что, для того чтобы перейти на страницу обновления книги, ваш тестовый логин должен иметь разрешение доступа типа "`catalog.can_mark_returned`"(возможно надо воспользоваться вашим аккаунтом для суперпользователя).
 
-<p>Вы можете попробовать вручную создать URL-адрес для тестирования, например — <a href="http://127.0.0.1:8000/catalog/book/&lt;bookinstance id>/renew/">http://127.0.0.1:8000/catalog/book/<em>&lt;bookinstance_id&gt;</em>/renew/</a> (правильный идентификатор записи id для bookinstance можно получить, если перейти на страницу детальной информации книги и скопировать поле <code>id</code>).</p>
+Вы можете попробовать вручную создать URL-адрес для тестирования, например — [http://127.0.0.1:8000/catalog/book/_\<bookinstance\_id>_/renew/](<http://127.0.0.1:8000/catalog/book/\<bookinstance id\>/renew/>) (правильный идентификатор записи id для bookinstance можно получить, если перейти на страницу детальной информации книги и скопировать поле `id`).
 
-<h3 id="Как_теперь_все_это_выглядит">Как теперь все это выглядит?</h3>
+### Как теперь все это выглядит?
 
-<p>Если все получилось как надо, то форма по умолчанию должна выглядеть следующим образом:</p>
+Если все получилось как надо, то форма по умолчанию должна выглядеть следующим образом:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png" style="border-style: solid; border-width: 1px; display: block; height: 292px; margin: 0px auto; width: 680px;"></p>
+![](https://mdn.mozillademos.org/files/14209/forms_example_renew_default.png)
 
-<p>А такой наша форма будет в случае ввода неправильной даты:</p>
+А такой наша форма будет в случае ввода неправильной даты:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png" style="border-style: solid; border-width: 1px; display: block; height: 290px; margin: 0px auto; width: 658px;"></p>
+![](https://mdn.mozillademos.org/files/14211/forms_example_renew_invalid.png)
 
-<p>Список всех книг с ссылками на страницу обновления данных:</p>
+Список всех книг с ссылками на страницу обновления данных:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png" style="border-style: solid; border-width: 1px; display: block; height: 256px; margin: 0px auto; width: 613px;"></p>
+![](https://mdn.mozillademos.org/files/14207/forms_example_renew_allbooks.png)
 
-<h2 id="Класс_ModelForm">Класс ModelForm</h2>
+## Класс ModelForm
 
-<p>Создание класса формы <code>Form</code> при помощи примера, описанного выше, является довольно гибким способом, позволяющим вам создавать формы любой структуры которую вы пожелаете, в связке с любой моделью, или моделями.</p>
+Создание класса формы `Form` при помощи примера, описанного выше, является довольно гибким способом, позволяющим вам создавать формы любой структуры которую вы пожелаете, в связке с любой моделью, или моделями.
 
-<p>Тем не менее, если вам просто нужна форма для отображения полей одиночной модели, тогда эта самая модель уже содержит большую часть информации, которая вам нужна для построения формы: сами поля, текстовые метки, дополнительный текст и так далее. И чтобы не воспроизводить информацию из модели для вашей формы, проще воспользоваться классом <a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">ModelForm</a>, который помогает создавать формы непосредственно из модели. Класс <code>ModelForm</code> может применяться в ваших отображениях точно таким же образом как и "классический" класс формы <code>Form</code>.</p>
+Тем не менее, если вам просто нужна форма для отображения полей одиночной модели, тогда эта самая модель уже содержит большую часть информации, которая вам нужна для построения формы: сами поля, текстовые метки, дополнительный текст и так далее. И чтобы не воспроизводить информацию из модели для вашей формы, проще воспользоваться классом [ModelForm](https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/), который помогает создавать формы непосредственно из модели. Класс `ModelForm` может применяться в ваших отображениях точно таким же образом как и "классический" класс формы `Form`.
 
-<p>Базовая реализация <code>ModelForm</code> содержит тоже поле как и ваш предыдущий класс формы  <code>RenewBookForm</code>, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс <code>Meta</code> и связать его с моделью <code>model</code> (<code>BookInstance</code>), а затем перечислить поля модели в поле <code>fields</code> которые должны быть включены в форму (вы можете включить все поля при помощи <code>fields = '__all__'</code>, или можно воспользоваться полем <code>exclude</code> (вместо <code>fields</code>), чтобы определить поля модели, которые <em>не</em> нужно включать).</p>
+Базовая реализация `ModelForm` содержит тоже поле как и ваш предыдущий класс формы `RenewBookForm`, что и показано ниже. Все что вам необходимо сделать, - внутри вашего нового класса добавить класс `Meta` и связать его с моделью `model` (`BookInstance`), а затем перечислить поля модели в поле `fields` которые должны быть включены в форму (вы можете включить все поля при помощи `fields = '__all__'`, или можно воспользоваться полем `exclude` (вместо `fields`), чтобы определить поля модели, которые _не_ нужно включать).
 
-<pre class="brush: python">from django.forms import ModelForm
+```python
+from django.forms import ModelForm
 from .models import BookInstance
 
 class RenewBookModelForm(ModelForm):
-<strong>    class Meta:
+    class Meta:
         model = BookInstance
-        fields = ['due_back',]</strong>
-</pre>
+        fields = ['due_back',]
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Это не выглядит сильно проще, чем просто использовать класс <code>Form</code> (и это действительно так, поскольку мы используем только одно поле). Тем не менее, если вы хотите иметь много полей, то такой способ построения формы может значительно уменьшить количество кода и ускорить разработку!</p>
-</div>
+> **Примечание:** Это не выглядит сильно проще, чем просто использовать класс `Form` (и это действительно так, поскольку мы используем только одно поле). Тем не менее, если вы хотите иметь много полей, то такой способ построения формы может значительно уменьшить количество кода и ускорить разработку!
 
-<p>Оставшаяся часть информации касается объявления полей модели (то есть, текстовых меток, виджетов, текстов, сообщений об ошибках). Если они недостаточно "правильные", то тогда мы можем переопределить их в нашем классе <code>Meta</code> при помощи словаря, содержащего поле, которое надо изменить и его новое значение. Например, в нашей форме мы могли бы поменять текст метки для поля "<em>Renewal date</em>" (вместо того, чтобы оставить текст по умолчанию: <em>Due date</em>), а кроме того мы хотим написать другой вспомогательный текст. Класс <code>Meta</code>, представленный ниже, показывает вам, как переопределить данные поля. Кроме того, при необходимости, вы можете установить значения для виджетов <code>widgets</code> и сообщений об ошибках <code>error_messages</code>.</p>
+Оставшаяся часть информации касается объявления полей модели (то есть, текстовых меток, виджетов, текстов, сообщений об ошибках). Если они недостаточно "правильные", то тогда мы можем переопределить их в нашем классе `Meta` при помощи словаря, содержащего поле, которое надо изменить и его новое значение. Например, в нашей форме мы могли бы поменять текст метки для поля "_Renewal date_" (вместо того, чтобы оставить текст по умолчанию: _Due date_), а кроме того мы хотим написать другой вспомогательный текст. Класс `Meta`, представленный ниже, показывает вам, как переопределить данные поля. Кроме того, при необходимости, вы можете установить значения для виджетов `widgets` и сообщений об ошибках `error_messages`.
 
-<pre class="brush: python">class Meta:
+```python
+class Meta:
     model = BookInstance
     fields = ['due_back',]
-<strong>    labels = { 'due_back': _('Renewal date'), }
-    help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), } </strong>
-</pre>
+    labels = { 'due_back': _('Renewal date'), }
+    help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
+```
 
-<p>Чтобы добавить валидацию, вы можете использовать тот же способ как и для класса <code>Form</code> — вы определяете функцию с именем  <code>clean_<em>field_name</em>()</code> из которой выбрасываете исключение <code>ValidationError</code>, если это необходимо. Единственным отличием от нашей оригинальной формы будет являться то, что поле модели имеет имя <code>due_back</code>, а не "<code>renewal_date</code>".</p>
+Чтобы добавить валидацию, вы можете использовать тот же способ как и для класса `Form` — вы определяете функцию с именем `clean_field_name()` из которой выбрасываете исключение `ValidationError`, если это необходимо. Единственным отличием от нашей оригинальной формы будет являться то, что поле модели имеет имя `due_back`, а не "`renewal_date`".
 
-<pre class="brush: python">from django.forms import ModelForm
+```python
+from django.forms import ModelForm
 from .models import BookInstance
 
 class RenewBookModelForm(ModelForm):
-<strong>    def clean_due_back(self):
+    def clean_due_back(self):
        data = self.cleaned_data['due_back']
 
        #Проверка того, что дата не в прошлом
-       if data &lt; datetime.date.today():
+       if data < datetime.date.today():
            raise ValidationError(_('Invalid date - renewal in past'))
 
        #Check date is in range librarian allowed to change (+4 weeks)
-       if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+       if data > datetime.date.today() + datetime.timedelta(weeks=4):
            raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
 
        # Не забывайте всегда возвращать очищенные данные
        return data
-</strong>
+
     class Meta:
         model = BookInstance
         fields = ['due_back',]
         labels = { 'due_back': _('Renewal date'), }
         help_texts = { 'due_back': _('Enter a date between now and 4 weeks (default 3).'), }
-</pre>
+```
 
-<p>Теперь класс <code>RenewBookModelForm</code> является функциональным эквивалентом нашему предыдущему классу <code>RenewBookForm</code>. Вы можете импортировать и использовать его в тех же местах, где и <code>RenewBookForm</code>.</p>
+Теперь класс `RenewBookModelForm` является функциональным эквивалентом нашему предыдущему классу `RenewBookForm`. Вы можете импортировать и использовать его в тех же местах, где и `RenewBookForm`.
 
-<h2 id="Обобщённые_классы_отображения_для_редактирования">Обобщённые классы отображения для редактирования</h2>
+## Обобщённые классы отображения для редактирования
 
-<p>Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить большую часть данной работы, путём широкого применения <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">обобщённых классов отображений</a>, которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы  (<code>ModelForm</code>).</p>
+Алгоритм управления формой, который мы использовали в нашей функции отображения, является примером достаточно общего подхода к работе с формой. Django старается абстрагировать и упростить большую часть данной работы, путём широкого применения [обобщённых классов отображений](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/), которые служат для создания, редактирования и удаления отображений на основе моделей. Они не только управляют поведением отображения, но, кроме того, они из вашей модели автоматически создают класс формы (`ModelForm`).
 
-<div class="note">
-<p><strong>Примечание: </strong>В дополнение к отображениям для редактирования, описываемых здесь, существует также класс <a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview">FormView</a>, который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщёнными отображениями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя <code>FormView,</code> вы все ещё нуждаетесь в создании класса <code>Form</code>, но вам не нужно реализовывать всю "стандартную" функциональность работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).</p>
-</div>
+> **Примечание:**В дополнение к отображениям для редактирования, описываемых здесь, существует также класс [FormView](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/#formview), который по своему предназначению находится где-то между "простой" функцией отображения и другими обобщёнными отображениями, то есть в каком-то смысле, в диапазоне: "гибкость" против "усилия при программировании". Применяя `FormView,` вы все ещё нуждаетесь в создании класса `Form`, но вам не нужно реализовывать всю "стандартную" функциональность работы с формой. Вместо этого, вы должны просто реализовать функцию, которая будет вызвана в тот момент, когда станет понятно, что получаемые из формы данные, "правильные" (валидны).
 
-<p>В данном разделе мы собираемся  использовать обобщённые классы для редактирования, для того, чтобы создать страницы, который добавляют функциональность создания, редактирования и удаления записей типа <code>Author</code> из нашей библиотеки — предоставляя базовую функциональность некоторых частей административной части сайта (это может быть полезно для случаев, когда вам нужно создать административную часть сайта, которая, в отличие от стандартной, была бы более гибкой).</p>
+В данном разделе мы собираемся использовать обобщённые классы для редактирования, для того, чтобы создать страницы, который добавляют функциональность создания, редактирования и удаления записей типа `Author` из нашей библиотеки — предоставляя базовую функциональность некоторых частей административной части сайта (это может быть полезно для случаев, когда вам нужно создать административную часть сайта, которая, в отличие от стандартной, была бы более гибкой).
 
-<h3 id="Отображения">Отображения</h3>
+### Отображения
 
-<p>Откройте файл отображений (<strong>locallibrary/catalog/views.py</strong>) и добавьте следующий код в его нижнюю часть:</p>
+Откройте файл отображений (**locallibrary/catalog/views.py**) и добавьте следующий код в его нижнюю часть:
 
-<pre class="brush: python">from django.views.generic.edit import CreateView, UpdateView, DeleteView
+```python
+from django.views.generic.edit import CreateView, UpdateView, DeleteView
 from django.urls import reverse_lazy
 from .models import Author
 
@@ -537,114 +518,113 @@ class AuthorUpdate(UpdateView):
 
 class AuthorDelete(DeleteView):
     model = Author
-    success_url = reverse_lazy('authors')</pre>
+    success_url = reverse_lazy('authors')
+```
 
-<p>Как вы видите, для создания отображений вам надо наследоваться от следующих классов<code>CreateView</code>, <code>UpdateView</code> и <code>DeleteView</code> (соответственно), а затем связать их с соответствующей моделью.</p>
+Как вы видите, для создания отображений вам надо наследоваться от следующих классов`CreateView`, `UpdateView` и `DeleteView` (соответственно), а затем связать их с соответствующей моделью.
 
-<p>Для случаев "создать" и "обновить" вам также понадобится определить поля для показа на форме (применяя тот же синтаксис, что и для <code>ModelForm</code>). В этом случае мы демонстрируем синтаксис и для показа "всех" полей, и перечисление их по отдельности. Также вы можете указать начальные значения для каждого поля, применяя словарь пар <em>имя_поля</em>/<em>значение</em> (в целях демонстрации, в нашем примере мы явно указываем дату смерти — если хотите, то вы можете удалить это поле). По умолчанию отображения перенаправляют пользователя на страницу "успеха", показывая только что созданные/отредактированные данные (записи в модели). В нашем случае это, созданная в предыдущей части руководства, подробная информация об авторе. Вы можете указать альтернативное перенаправление при помощи параметра <code>success_url</code> (как в примере с классом <code>AuthorDelete</code>).</p>
+Для случаев "создать" и "обновить" вам также понадобится определить поля для показа на форме (применяя тот же синтаксис, что и для `ModelForm`). В этом случае мы демонстрируем синтаксис и для показа "всех" полей, и перечисление их по отдельности. Также вы можете указать начальные значения для каждого поля, применяя словарь пар _имя_поля_/_значение_ (в целях демонстрации, в нашем примере мы явно указываем дату смерти — если хотите, то вы можете удалить это поле). По умолчанию отображения перенаправляют пользователя на страницу "успеха", показывая только что созданные/отредактированные данные (записи в модели). В нашем случае это, созданная в предыдущей части руководства, подробная информация об авторе. Вы можете указать альтернативное перенаправление при помощи параметра `success_url` (как в примере с классом `AuthorDelete`).
 
-<p>Классу <code>AuthorDelete</code> не нужно показывать каких либо полей, таким образом их не нужно и декларировать. Тем не менее, вам нужно указать <code>success_url</code>, потому что, в данном случае, для Django не очевидно что делать после успешного выполнения операции удаления записи. Мы используем функцию <code><a href="https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#reverse-lazy">reverse_lazy()</a></code> для перехода на страницу списка авторов после удаления одного из них — <code>reverse_lazy()</code> это более "ленивая" версия <code>reverse().</code></p>
+Классу `AuthorDelete` не нужно показывать каких либо полей, таким образом их не нужно и декларировать. Тем не менее, вам нужно указать `success_url`, потому что, в данном случае, для Django не очевидно что делать после успешного выполнения операции удаления записи. Мы используем функцию [`reverse_lazy()`](https://docs.djangoproject.com/en/1.10/ref/urlresolvers/#reverse-lazy) для перехода на страницу списка авторов после удаления одного из них — `reverse_lazy()` это более "ленивая" версия `reverse().`
 
-<h3 id="Шаблоны">Шаблоны</h3>
+### Шаблоны
 
-<p>Отображения  "создать" и "обновить" используют  шаблоны с именем <em>model_name</em><strong>_form.html,</strong> по умолчанию: (вы можете поменять суффикс на что-нибудь другое, при помощи поля <code>template_name_suffix</code> в вашем отображении, например, <code>template_name_suffix = '_other_suffix'</code>)</p>
+Отображения "создать" и "обновить" используют шаблоны с именем _model_name_**\_form.html,** по умолчанию: (вы можете поменять суффикс на что-нибудь другое, при помощи поля `template_name_suffix` в вашем отображении, например, `template_name_suffix = '_other_suffix'`)
 
-<p>Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_form.html</strong>  и скопируйте в него следующий текст.</p>
+Создайте файл шаблона **locallibrary/catalog/templates/catalog/author_form.html** и скопируйте в него следующий текст.
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
 
-&lt;form action="" method="post"&gt;
+<form action="" method="post">
     {% csrf_token %}
-    &lt;table&gt;
+    <table>
     \{{ form.as_table }}
-    &lt;/table&gt;
-    &lt;input type="submit" value="Submit" /&gt;
+    </table>
+    <input type="submit" value="Submit" />
 
-&lt;/form&gt;
-{% endblock %}</pre>
+</form>
+{% endblock %}
+```
 
-<p>Это напоминает наши предыдущие формы и рендер полей при помощи таблицы. Заметьте, что мы снова используем<code>{% csrf_token %}</code>.</p>
+Это напоминает наши предыдущие формы и рендер полей при помощи таблицы. Заметьте, что мы снова используем`{% csrf_token %}`.
 
-<p>Отображения "удалить" ожидает "найти" шаблон с именем формата <em>model_name</em><strong>_confirm_delete.html</strong> (и снова, вы можете изменить суффикс при помощи поля отображения<code>template_name_suffix</code>). Создайте файл шаблона <strong>locallibrary/catalog/templates/catalog/author_confirm_delete</strong><strong>.html</strong> и скопируйте в него текст, указанный ниже.</p>
+Отображения "удалить" ожидает "найти" шаблон с именем формата _model_name_**\_confirm_delete.html** (и снова, вы можете изменить суффикс при помощи поля отображения`template_name_suffix`). Создайте файл шаблона **locallibrary/catalog/templates/catalog/author_confirm_delete\*\***.html\*\* и скопируйте в него текст, указанный ниже.
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
 
-&lt;h1&gt;Delete Author&lt;/h1&gt;
+<h1>Delete Author</h1>
 
-&lt;p&gt;Are you sure you want to delete the author: \{{ author }}?&lt;/p&gt;
+<p>Are you sure you want to delete the author: \{{ author }}?</p>
 
-&lt;form action="" method="POST"&gt;
+<form action="" method="POST">
   {% csrf_token %}
-  &lt;input type="submit" value="Yes, delete." /&gt;
-&lt;/form&gt;
+  <input type="submit" value="Yes, delete." />
+</form>
 
 {% endblock %}
-</pre>
+```
 
-<h3 id="Настройки_URL-адресов">Настройки URL-адресов</h3>
+### Настройки URL-адресов
 
-<p>Откройте файл конфигураций URL-адресов (<strong>locallibrary/catalog/urls.py</strong>) и добавьте в его нижнюю часть следующие настройки:</p>
+Откройте файл конфигураций URL-адресов (**locallibrary/catalog/urls.py**) и добавьте в его нижнюю часть следующие настройки:
 
-<pre class="brush: python">urlpatterns += [
+```python
+urlpatterns += [
     url(r'^author/create/$', views.AuthorCreate.as_view(), name='author_create'),
-    url(r'^author/(?P&lt;pk&gt;\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
-    url(r'^author/(?P&lt;pk&gt;\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
-]</pre>
-
-<p>Здесь нет ничего нового! Как вы видите отображения являются классами и следовательно должны вызываться через метод <code>.as_view()</code>. Паттерны URL-адресов для каждого случая должны быть вам понятны. Мы обязаны использовать <code>pk</code> как имя для "захваченного" значения первичного ключа, так как параметр именно с таким именем ожидается классами отображения.</p>
+    url(r'^author/(?P<pk>\d+)/update/$', views.AuthorUpdate.as_view(), name='author_update'),
+    url(r'^author/(?P<pk>\d+)/delete/$', views.AuthorDelete.as_view(), name='author_delete'),
+]
+```
 
-<p>Страницы создания, обновления и удаления автора теперь готовы к тестированию (мы не будем создавать на них ссылки в отдельном меню, но вы, если хотите, можете их сделать).</p>
+Здесь нет ничего нового! Как вы видите отображения являются классами и следовательно должны вызываться через метод `.as_view()`. Паттерны URL-адресов для каждого случая должны быть вам понятны. Мы обязаны использовать `pk` как имя для "захваченного" значения первичного ключа, так как параметр именно с таким именем ожидается классами отображения.
 
-<div class="note">
-<p><strong>Примечание</strong>: Наблюдательные пользователи могли заметить, что мы ничего не делаем, чтобы предотвратить несанкционированный доступ к страницам! Мы оставили это в качестве упражнения для вас (подсказка: вы можете использовать <code>PermissionRequiredMixin</code> и, либо создать новое разрешение, или воспользоваться нашим прежним <code>can_mark_returned</code>).</p>
-</div>
+Страницы создания, обновления и удаления автора теперь готовы к тестированию (мы не будем создавать на них ссылки в отдельном меню, но вы, если хотите, можете их сделать).
 
-<h3 id="Тестирование_страницы_2">Тестирование страницы</h3>
+> **Примечание:** Наблюдательные пользователи могли заметить, что мы ничего не делаем, чтобы предотвратить несанкционированный доступ к страницам! Мы оставили это в качестве упражнения для вас (подсказка: вы можете использовать `PermissionRequiredMixin` и, либо создать новое разрешение, или воспользоваться нашим прежним `can_mark_returned`).
 
-<p>Залогиньтесь на сайте с аккаунтом, который позволит вам получить доступ к страницам редактирования данных (и записей) автора.</p>
+### Тестирование страницы
 
-<p>Затем перейдите на страницу создания новой записи автора: <a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a>, которая должна быть похожей на следующий скриншот.</p>
+Залогиньтесь на сайте с аккаунтом, который позволит вам получить доступ к страницам редактирования данных (и записей) автора.
 
-<p><img alt="Form Example: Create Author" src="https://mdn.mozillademos.org/files/14223/forms_example_create_author.png" style="border-style: solid; border-width: 1px; display: block; height: 184px; margin: 0px auto; width: 645px;"></p>
+Затем перейдите на страницу создания новой записи автора: <http://127.0.0.1:8000/catalog/author/create/>, которая должна быть похожей на следующий скриншот.
 
-<p>Введите в поля значения и нажмите на кнопку <strong>Submit</strong>, чтобы сохранить новую запись об авторе. После этого, вы должны были перейти на страницу редактирования только что созданного автора, имеющий адрес, похожий на следующий <em>http://127.0.0.1:8000/catalog/author/10</em>.</p>
+![Form Example: Create Author](https://mdn.mozillademos.org/files/14223/forms_example_create_author.png)
 
-<p>У вас есть возможность редактирования записей при помощи добавления<em> /update/</em> в конец адреса подробной информации (то есть, <em>http://127.0.0.1:8000/catalog/author/10/update/</em>) — мы не показываем скриншот, потому что он выглядит в точности также как  страница "создать"!</p>
+Введите в поля значения и нажмите на кнопку **Submit**, чтобы сохранить новую запись об авторе. После этого, вы должны были перейти на страницу редактирования только что созданного автора, имеющий адрес, похожий на следующий _http\://127.0.0.1:8000/catalog/author/10_.
 
-<p>И последнее, мы можем удалить страницу, добавляя строку <em>/delete/</em> в конец адреса подробной информации автора (то есть, <em>http://127.0.0.1:8000/catalog/author/10/delete/</em>). Django должен показать страницу, которая похожа на представленную ниже. Нажмите <strong>Yes, delete.</strong>, чтобы удалить запись и перейти на страницу со списком авторов.</p>
+У вас есть возможность редактирования записей при помощи добавления _/update/_ в конец адреса подробной информации (то есть, _http\://127.0.0.1:8000/catalog/author/10/update/_) — мы не показываем скриншот, потому что он выглядит в точности также как страница "создать"!
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png" style="border-style: solid; border-width: 1px; display: block; height: 194px; margin: 0px auto; width: 561px;"></p>
+И последнее, мы можем удалить страницу, добавляя строку _/delete/_ в конец адреса подробной информации автора (то есть, _http\://127.0.0.1:8000/catalog/author/10/delete/_). Django должен показать страницу, которая похожа на представленную ниже. Нажмите **Yes, delete.**, чтобы удалить запись и перейти на страницу со списком авторов.
 
-<h2 id="Проверьте_себя">Проверьте себя</h2>
+![](https://mdn.mozillademos.org/files/14221/forms_example_delete_author.png)
 
-<p>Создайте несколько форм создания, редактирования и удаления записей в модели <code>Book</code>. При желании, вы можете использовать тоже структуры как и в случае с моделью <code>Authors</code>. Если ваш шаблон <strong>book_form.html</strong> является просто копией шаблона <strong>author_form.html</strong>, тогда новая страница "create book" будет выглядеть как на следующем скриншоте:</p>
+## Проверьте себя
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14225/forms_example_create_book.png" style="border-style: solid; border-width: 1px; display: block; height: 521px; margin: 0px auto; width: 595px;"></p>
+Создайте несколько форм создания, редактирования и удаления записей в модели `Book`. При желании, вы можете использовать тоже структуры как и в случае с моделью `Authors`. Если ваш шаблон **book_form.html** является просто копией шаблона **author_form.html**, тогда новая страница "create book" будет выглядеть как на следующем скриншоте:
 
-<ul>
-</ul>
+![](https://mdn.mozillademos.org/files/14225/forms_example_create_book.png)
 
-<h2 id="Итоги">Итоги</h2>
+## Итоги
 
-<p>Создание и управление формами может быть достаточно сложным! Django делает этот процесс намного проще, предоставляя прикладные механизмы объявления, рендеринга и проверки форм. Более того, Django предоставляет обобщённые классы  редактирования форм, которые могут выполнять <em>практически любую</em> работу по созданию, редактированию и удалению записей, связанных с одиночной моделью.</p>
+Создание и управление формами может быть достаточно сложным! Django делает этот процесс намного проще, предоставляя прикладные механизмы объявления, рендеринга и проверки форм. Более того, Django предоставляет обобщённые классы редактирования форм, которые могут выполнять _практически любую_ работу по созданию, редактированию и удалению записей, связанных с одиночной моделью.
 
-<p>Существует много чего ещё, что можно делать с формами (ознакомьтесь со списком ниже), но теперь вы должны понимать как добавлять базовые формы и создавать код управления формой на вашем сайте.  </p>
+Существует много чего ещё, что можно делать с формами (ознакомьтесь со списком ниже), но теперь вы должны понимать как добавлять базовые формы и создавать код управления формой на вашем сайте.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/">Работа с формами</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial04/#write-a-simple-form">Создание вашего первого приложения, часть 4 &gt; Создание простой формы </a>(Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/api/">Forms API</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/fields/">Поля класса Form</a> (Django docs) </li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/forms/validation/">Класс Form и валидация поля</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/">Управление классом Form из классов отображений</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/">Создание форм из моделей</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/">Обобщённые отображения для редактирования</a> (Django docs)</li>
-</ul>
+- [Работа с формами](https://docs.djangoproject.com/en/1.10/topics/forms/) (Django docs)
+- [Создание вашего первого приложения, часть 4 > Создание простой формы ](https://docs.djangoproject.com/en/1.10/intro/tutorial04/#write-a-simple-form)(Django docs)
+- [Forms API](https://docs.djangoproject.com/en/1.10/ref/forms/api/) (Django docs)
+- [Поля класса Form](https://docs.djangoproject.com/en/1.10/ref/forms/fields/) (Django docs)
+- [Класс Form и валидация поля](https://docs.djangoproject.com/en/1.10/ref/forms/validation/) (Django docs)
+- [Управление классом Form из классов отображений](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-editing/) (Django docs)
+- [Создание форм из моделей](https://docs.djangoproject.com/en/1.10/topics/forms/modelforms/) (Django docs)
+- [Обобщённые отображения для редактирования](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-editing/) (Django docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django/Testing", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/generic_views/index.md b/files/ru/learn/server-side/django/generic_views/index.md
index 9b794c8c3744c2..9a957d2f7c8a45 100644
--- a/files/ru/learn/server-side/django/generic_views/index.md
+++ b/files/ru/learn/server-side/django/generic_views/index.md
@@ -9,96 +9,93 @@ tags:
   - Шаблоны django
 translation_of: Learn/Server-side/Django/Generic_views
 ---
-<div>{{LearnSidebar}}<br>
-{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</div>
+{{LearnSidebar}}
+{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
 
-<p class="summary">Данная часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя в него списки и страницы, путём предоставления подробной информации о книгах и авторах. В текущей части мы подробно изучим обобщённые базовые классы отображения и покажем как они могут существенно сократить количество кода, который вы должны были бы написать в обычной ситуации. Кроме того, мы более подробно рассмотрим управление и настройки URL-адресов, показывая как выполнить простое сопоставление какой-либо строки паттерну регулярного выражения.</p>
+Данная часть расширяет наш сайт [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), добавляя в него списки и страницы, путём предоставления подробной информации о книгах и авторах. В текущей части мы подробно изучим обобщённые базовые классы отображения и покажем как они могут существенно сократить количество кода, который вы должны были бы написать в обычной ситуации. Кроме того, мы более подробно рассмотрим управление и настройки URL-адресов, показывая как выполнить простое сопоставление какой-либо строки паттерну регулярного выражения.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Завершить все предыдущие части руководства, включая <a href="/en-US/docs/Learn/Server-side/Django/Home_page">Руководство Django Часть 5: Создание домашней страницы</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать где и как применять обобщённые базовые классы отображения, и как применять паттерны URL-адресов для передачи информации в отображения.</td>
-  </tr>
- </tbody>
-</table>
+| Требования: | Завершить все предыдущие части руководства, включая [Руководство Django Часть 5: Создание домашней страницы](/ru/docs/Learn/Server-side/Django/Home_page). |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понимать где и как применять обобщённые базовые классы отображения, и как применять паттерны URL-адресов для передачи информации в отображения.            |
 
-<h2 id="Обзор">Обзор</h2>
+## Обзор
 
-<p>В данном руководстве мы завершим первую версию сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, с помощью добавления страницы перечисления и подробной информации о книгах и авторах (или, если быть более точными, мы покажем как вам реализовать соответствующие страницы для книг, а для авторов вы сможете сделать их самостоятельно!)</p>
+В данном руководстве мы завершим первую версию сайта [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), с помощью добавления страницы перечисления и подробной информации о книгах и авторах (или, если быть более точными, мы покажем как вам реализовать соответствующие страницы для книг, а для авторов вы сможете сделать их самостоятельно!)
 
-<p>Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи её отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении  обобщённых классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.</p>
+Данный процесс похож на создание главной страницы сайта, который мы показывали в предыдущей части руководства. Нам все также надо создать URL-преобразования, отображения и шаблоны страниц. Основным отличием будет то, что для страниц подробной информации перед нами встанет дополнительная задача получения информации из паттерна URL-адреса и передачи её отображению. Для этих страниц мы собираемся продемонстрировать совершенно другой тип отображения, основанный на применении обобщённых классов отображения списка и детальной информации о записи. Это может существенно сократить количество кода, необходимого для отображения и сделает его (код) более простым для написания и поддержки.
 
-<p>Завершающая часть данного руководства будет посвящена демонстрации постраничного показа ваших данных (pagination) при применении обобщённого класса отображения списка.</p>
+Завершающая часть данного руководства будет посвящена демонстрации постраничного показа ваших данных (pagination) при применении обобщённого класса отображения списка.
 
-<h2 id="Страница_со_списком_книг">Страница со списком книг</h2>
+## Страница со списком книг
 
-<p>Страница со списком книг показывает все книги в наличии и будет доступна по адресу: <code>catalog/books/</code>. Эта страница для каждой записи выводит заголовок и автора, при этом каждый заголовок является гиперссылкой на соответствующую страницу подробной информации о книге. Данная страница будет иметь ту же структуру и навигацию как и все остальные страницы сайта, таким образом мы сможем расширить базовый шаблон сайта (<strong>base_generic.html</strong>), который мы создали в предыдущей части руководства.</p>
+Страница со списком книг показывает все книги в наличии и будет доступна по адресу: `catalog/books/`. Эта страница для каждой записи выводит заголовок и автора, при этом каждый заголовок является гиперссылкой на соответствующую страницу подробной информации о книге. Данная страница будет иметь ту же структуру и навигацию как и все остальные страницы сайта, таким образом мы сможем расширить базовый шаблон сайта (**base_generic.html**), который мы создали в предыдущей части руководства.
 
-<h3 id="Преобразования_URL-адресов">Преобразования URL-адресов</h3>
+### Преобразования URL-адресов
 
-<p>Откройте файл <strong>/catalog/urls.py</strong> и скопируйте в него строки, выделенные жирным внизу. Практически также как и для главной страницы сайта, данная функция <code>url()</code> определяет регулярное выражение (<strong>r'^books/$'</strong>), связывающее URL-адрес с функцией отображения (<code>views.BookListView.as_view()</code> ), которая будет вызвана, если URL-адрес будет соответствовать паттерну РВ. Кроме того, определяется имя для данного сопоставления.</p>
+Откройте файл **/catalog/urls.py** и скопируйте в него строки, выделенные жирным внизу. Практически также как и для главной страницы сайта, данная функция `url()` определяет регулярное выражение (**r'^books/$'**), связывающее URL-адрес с функцией отображения (`views.BookListView.as_view()` ), которая будет вызвана, если URL-адрес будет соответствовать паттерну РВ. Кроме того, определяется имя для данного сопоставления.
 
-<pre class="brush: python">from django.urls import path
+```python
+from django.urls import path
 from . import views
-<strong>from django.conf.urls import url</strong>
+from django.conf.urls import url
 
 urlpatterns = [
     url(r'^$', views.index, name='index'),
-<strong>    url(r'^books/$', views.BookListView.as_view(), name='books'),
-</strong>]</pre>
+    url(r'^books/$', views.BookListView.as_view(), name='books'),
+]
+```
 
-<p>Данный паттерн РВ сопоставления URL-адреса полностью соответствует строке <code>books/</code> (<code>^</code> является маркером начала строки, а <code>$</code>  - маркер конца строки). Как было отмечено в предыдущей части руководства, URL-адрес уже должен содержать <code>/catalog</code>, таким образом полный адрес, на самом деле, имеет вид : <code>/catalog/books/</code>.</p>
+Данный паттерн РВ сопоставления URL-адреса полностью соответствует строке `books/` (`^` является маркером начала строки, а `$` - маркер конца строки). Как было отмечено в предыдущей части руководства, URL-адрес уже должен содержать `/catalog`, таким образом полный адрес, на самом деле, имеет вид : `/catalog/books/`.
 
-<p>Функция отображения имеет другой формат, чем ранее — это связано с тем, что данное отображение реализуется через класс. Мы будем наследоваться от существующей общей функции из <strong>view</strong>, которая уже делает большую часть того, что мы хотим, что нам и нужно, вместо того, чтобы писать свою собственную функцию во <strong>view</strong> с нуля.</p>
+Функция отображения имеет другой формат, чем ранее — это связано с тем, что данное отображение реализуется через класс. Мы будем наследоваться от существующей общей функции из **view**, которая уже делает большую часть того, что мы хотим, что нам и нужно, вместо того, чтобы писать свою собственную функцию во **view** с нуля.
 
-<p>При использовании обобщённых классов отображения в Django мы получаем доступ к соответствующей функции отображения при помощи вызова метода  <code>as_view()</code>. Таким образом выполняется вся работа по созданию экземпляра класса и гарантируется вызов правильных методов для входящих HTTP-запросов.</p>
+При использовании обобщённых классов отображения в Django мы получаем доступ к соответствующей функции отображения при помощи вызова метода `as_view()`. Таким образом выполняется вся работа по созданию экземпляра класса и гарантируется вызов правильных методов для входящих HTTP-запросов.
 
-<h3 id="Отображение_(на_основе_базового_класса)">Отображение (на основе базового класса)</h3>
+### Отображение (на основе базового класса)
 
-<p>Мы могли бы достаточно просто реализовать отображение списка книг при помощи обычной функции (также, как мы сделали это для главной страницы сайта), которая должны была бы выполнить запрос получения всех книг из базы данных, затем вызвать  функцию  <code>render()</code>, в которую передать данный список, в соответствующий шаблон страницы. Тем не менее, вместо это мы будем использовать обобщённый класс отображения списка — класс, который наследуется от существующего отображения (ListView). Поскольку обобщённый класс уже реализует большую часть того, что нам нужно, и следуя лучшим практикам Django, мы сможем создать более эффективный список при помощи меньшего количества кода, меньшего количества повторений и гораздо лучшей поддержкой.</p>
+Мы могли бы достаточно просто реализовать отображение списка книг при помощи обычной функции (также, как мы сделали это для главной страницы сайта), которая должны была бы выполнить запрос получения всех книг из базы данных, затем вызвать функцию `render()`, в которую передать данный список, в соответствующий шаблон страницы. Тем не менее, вместо это мы будем использовать обобщённый класс отображения списка — класс, который наследуется от существующего отображения (ListView). Поскольку обобщённый класс уже реализует большую часть того, что нам нужно, и следуя лучшим практикам Django, мы сможем создать более эффективный список при помощи меньшего количества кода, меньшего количества повторений и гораздо лучшей поддержкой.
 
-<p>Откройте <strong>catalog/views.py</strong> и скопируйте следующий код, в нижнюю часть данного файла:</p>
+Откройте **catalog/views.py** и скопируйте следующий код, в нижнюю часть данного файла:
 
-<pre class="brush: python">from django.views import generic
+```python
+from django.views import generic
 
 class BookListView(generic.ListView):
-    model = Book</pre>
+    model = Book
+```
 
-<p>Это всё! Обобщённое отображение выполнит запрос к базе данных, получит все записи заданной модели (<code>Book</code>), затем отрендерит (отрисует) соответствующий шаблон, расположенный в <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> (который мы создадим позже). Внутри данного шаблона вы можете получить доступ к списку книг при помощи переменной шаблона <code>object_list</code> ИЛИ <code>book_list</code> (если обобщить, то "<code><em>the_model_name</em>_list</code>").</p>
+Это всё! Обобщённое отображение выполнит запрос к базе данных, получит все записи заданной модели (`Book`), затем отрендерит (отрисует) соответствующий шаблон, расположенный в **/locallibrary/catalog/templates/catalog/book_list.html** (который мы создадим позже). Внутри данного шаблона вы можете получить доступ к списку книг при помощи переменной шаблона `object_list` ИЛИ `book_list` (если обобщить, то "`the_model_name_list`").
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот, выглядящий странно, путь к файлу шаблона не является опечаткой — обобщённое отображение ищет файл шаблона <code>/<em>application_name</em>/<em>the_model_name</em>_list.html</code> (<code>catalog/book_list.html</code>, в данном случае) внутри директории приложения <code>/<em>application_name</em>/templates/</code> (у нас - <code>/catalog/templates/)</code>.</p>
-</div>
+> **Примечание:** Этот, выглядящий странно, путь к файлу шаблона не является опечаткой — обобщённое отображение ищет файл шаблона `/application_name/the_model_name_list.html` (`catalog/book_list.html`, в данном случае) внутри директории приложения `/application_name/templates/` (у нас - `/catalog/templates/)`.
 
-<p>Вы можете использовать атрибуты для того, чтобы изменить поведение по умолчанию. Например, вы могли бы указать другой файл шаблона, например, если в вашем распоряжении имеется несколько отображений, которые используют одну и ту же модель, или вам позарез захотелось бы использовать другое имя переменной шаблона, если <code>book_list</code> не является интуитивно понятным. Возможно, наиболее полезным вариантом является изменение/отфильтрованные результата запроса к базе данных — таким образом, вместо перечисления всех книг вы могли бы показывать 5 наиболее популярных.</p>
+Вы можете использовать атрибуты для того, чтобы изменить поведение по умолчанию. Например, вы могли бы указать другой файл шаблона, например, если в вашем распоряжении имеется несколько отображений, которые используют одну и ту же модель, или вам позарез захотелось бы использовать другое имя переменной шаблона, если `book_list` не является интуитивно понятным. Возможно, наиболее полезным вариантом является изменение/отфильтрованные результата запроса к базе данных — таким образом, вместо перечисления всех книг вы могли бы показывать 5 наиболее популярных.
 
-<pre class="brush: python">class BookListView(generic.ListView):
+```python
+class BookListView(generic.ListView):
     model = Book
     context_object_name = 'my_book_list'   # ваше собственное имя переменной контекста в шаблоне
     queryset = Book.objects.filter(title__icontains='war')[:5] # Получение 5 книг, содержащих слово 'war' в заголовке
-    template_name = 'books/my_arbitrary_template_name_list.html'  # Определение имени вашего шаблона и его расположения</pre>
+    template_name = 'books/my_arbitrary_template_name_list.html'  # Определение имени вашего шаблона и его расположения
+```
 
-<h4 id="Переопределение_методов_в_классах_отображения">Переопределение методов в классах отображения</h4>
+#### Переопределение методов в классах отображения
 
-<p>Пока что вам не приходилось этого делать, но у вас имеется возможность переопределять некоторые методы класса отображения.</p>
+Пока что вам не приходилось этого делать, но у вас имеется возможность переопределять некоторые методы класса отображения.
 
-<p>Например, мы можем переопределить метод получения списка всех записей <code>get_queryset()</code>. Данный подход является более гибким, чем использование атрибута <code>queryset</code>, как мы сделали в предыдущем фрагменте кода (хотя, в данном случае и нет никакой разницы):</p>
+Например, мы можем переопределить метод получения списка всех записей `get_queryset()`. Данный подход является более гибким, чем использование атрибута `queryset`, как мы сделали в предыдущем фрагменте кода (хотя, в данном случае и нет никакой разницы):
 
-<pre class="brush: python">class BookListView(generic.ListView):
+```python
+class BookListView(generic.ListView):
     model = Book
 
     def get_queryset(self):
         return Book.objects.filter(title__icontains='war')[:5] # Получить 5 книг, содержащих 'war' в заголовке
-</pre>
+```
 
-<p>Мы также могли бы переопределить метод <code>get_context_data()</code> для того, чтобы в контексте (в переменной контекста) передавать шаблону дополнительные переменные (например, список книг передаётся по умолчанию). Фрагмент, представленный ниже, показывает как добавить переменную с именем "some_data" в контекст (затем она будет доступна как переменная шаблона).</p>
+Мы также могли бы переопределить метод `get_context_data()` для того, чтобы в контексте (в переменной контекста) передавать шаблону дополнительные переменные (например, список книг передаётся по умолчанию). Фрагмент, представленный ниже, показывает как добавить переменную с именем "some_data" в контекст (затем она будет доступна как переменная шаблона).
 
-<pre class="brush: python">class BookListView(generic.ListView):
+```python
+class BookListView(generic.ListView):
     model = Book
 
     def get_context_data(self, **kwargs):
@@ -106,500 +103,419 @@ class BookListView(generic.ListView):
         context = super(BookListView, self).get_context_data(**kwargs)
         # Добавляем новую переменную к контексту и инициализируем её некоторым значением
         context['some_data'] = 'This is just some data'
-        return context</pre>
+        return context
+```
 
-<p>В процессе выполнения всего этого важно придерживаться определённой последовательности действий:</p>
+В процессе выполнения всего этого важно придерживаться определённой последовательности действий:
 
-<ul>
- <li>В первую очередь - получить существующий контекст из нашего суперкласса.</li>
- <li>Затем добавить в контекст новую информацию.</li>
- <li>Затем вернуть новый (обновлённый) контекст.</li>
-</ul>
+- В первую очередь - получить существующий контекст из нашего суперкласса.
+- Затем добавить в контекст новую информацию.
+- Затем вернуть новый (обновлённый) контекст.
 
-<div class="note">
-<p><strong>Примечание</strong>: Посмотрите <a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщённые классы отображения</a> (Django docs) для ознакомления с большим количеством примеров того, что вы могли бы сделать.</p>
-</div>
+> **Примечание:** Посмотрите [Встроенные обобщённые классы отображения](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/) (Django docs) для ознакомления с большим количеством примеров того, что вы могли бы сделать.
 
-<h3 id="Создание_шаблона_Отображения_Списка">Создание шаблона Отображения Списка</h3>
+### Создание шаблона Отображения Списка
 
-<p>Создайте HTML-файл <strong>/locallibrary/catalog/templates/catalog/book_list.html</strong> и скопируйте в него текст, указанный ниже. Как было отмечено ранее, это файл шаблона по умолчанию, который будет "искать" обобщённый класс отображения списка (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p>
+Создайте HTML-файл **/locallibrary/catalog/templates/catalog/book_list.html** и скопируйте в него текст, указанный ниже. Как было отмечено ранее, это файл шаблона по умолчанию, который будет "искать" обобщённый класс отображения списка (для модели с именем `Book` в приложении с именем `catalog`).
 
-<p>Шаблоны для обобщённых отображений такие же как все остальные шаблоны (хотя, естественно, передаваемые в них контекст, или информация могут отличаться). Так же как и с нашим шаблоном для главной страницы, в первой строке мы расширяем наш базовый шаблон, а затем определяем и замещаем блок с именем <code>content</code>.</p>
+Шаблоны для обобщённых отображений такие же как все остальные шаблоны (хотя, естественно, передаваемые в них контекст, или информация могут отличаться). Так же как и с нашим шаблоном для главной страницы, в первой строке мы расширяем наш базовый шаблон, а затем определяем и замещаем блок с именем `content`.
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
-    &lt;h1&gt;Book List&lt;/h1&gt;
+    <h1>Book List</h1>
 
-    <strong>{% if book_list %}</strong>
-    &lt;ul&gt;
+    {% if book_list %}
+    <ul>
 
       {% for book in book_list %}
-      &lt;li&gt;
-        &lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
-      &lt;/li&gt;
+      <li>
+        <a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+      </li>
       {% endfor %}
 
-    &lt;/ul&gt;
-    <strong>{% else %}</strong>
-      &lt;p&gt;There are no books in the library.&lt;/p&gt;
-    <strong>{% endif %} </strong>
-{% endblock %}</pre>
+    </ul>
+    {% else %}
+      <p>There are no books in the library.</p>
+    {% endif %}
+{% endblock %}
+```
 
-<p>По умолчанию отображение передаёт контекст (список книг) как <code>object_list</code> и <code>book_list</code> (синонимы; оба варианта будут работать).</p>
+По умолчанию отображение передаёт контекст (список книг) как `object_list` и `book_list` (синонимы; оба варианта будут работать).
 
-<h4 id="Условные_ветвления">Условные ветвления</h4>
+#### Условные ветвления
 
-<p>Мы применяем теги шаблона <code><a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if">if</a></code>, <code>else</code> и <code>endif</code> для того, чтобы проверить определена ли переменная <code>book_list</code> и содержит ли она данные. Если список НЕ пуст, тогда мы выполняем итерации по списку книг. Если список пуст (<code>else</code>-случай) тогда мы показываем текст, поясняющий, что в наличии нет книг.</p>
+Мы применяем теги шаблона [`if`](https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if), `else` и `endif` для того, чтобы проверить определена ли переменная `book_list` и содержит ли она данные. Если список НЕ пуст, тогда мы выполняем итерации по списку книг. Если список пуст (`else`-случай) тогда мы показываем текст, поясняющий, что в наличии нет книг.
 
-<pre class="brush: html"><strong>{% if book_list %}</strong>
-  &lt;!-- здесь наш код "бежит" по списку книг --&gt;
-<strong>{% else %}</strong>
-  &lt;p&gt;В библиотеке книг нет.&lt;/p&gt;
-<strong>{% endif %}</strong>
-</pre>
+```html
+{% if book_list %}
+  <!-- здесь наш код "бежит" по списку книг -->
+{% else %}
+  <p>В библиотеке книг нет.</p>
+{% endif %}
+```
 
-<p>В данном фрагменте проверяется только одно условие, но вы можете протестировать другие варианты при помощи тэга шаблона <code>elif</code> (например, <code>{% elif var2 %}</code> ). Для дополнительной информации по данной теме смотрите: <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if">if</a>, <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifequal-and-ifnotequal">ifequal/ifnotequal</a> и <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifchanged">ifchanged</a> в главе <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins">Встроенные тэги и фильтры шаблона</a> (Django Docs).</p>
+В данном фрагменте проверяется только одно условие, но вы можете протестировать другие варианты при помощи тэга шаблона `elif` (например, `{% elif var2 %}` ). Для дополнительной информации по данной теме смотрите: [if](https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#if), [ifequal/ifnotequal](https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifequal-and-ifnotequal) и [ifchanged](https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#ifchanged) в главе [Встроенные тэги и фильтры шаблона](https://docs.djangoproject.com/en/1.10/ref/templates/builtins) (Django Docs).
 
-<h4 id="Цикл_For">Цикл For</h4>
+#### Цикл For
 
-<p>Шаблон использует тэги <a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for">for</a> и <code>endfor</code> для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона <code>book</code> передаётся информация текущего элемента списка.</p>
+Шаблон использует тэги [for](https://docs.djangoproject.com/en/1.10/ref/templates/builtins/#for) и `endfor` для того, чтобы "пробежаться" по списку книг, как показано ниже. На каждой итерации (каждом цикле) в переменную шаблона `book` передаётся информация текущего элемента списка.
 
-<pre class="brush: html">{% for <strong>book</strong> in book_list %}
-  &lt;li&gt; &lt;!-- здесь код, который использует информацию из каждого элемента <strong>book </strong>списка--&gt; &lt;/li&gt;
+```html
+{% for book in book_list %}
+  <li> <!-- здесь код, который использует информацию из каждого элемента book списка--> </li>
 {% endfor %}
-</pre>
+```
 
-<p>Мы не применяем здесь, но внутри каждого цикла Django создаёт переменные, которые вы можете использовать при итерации. Например, вы можете проверять переменную <code>forloop.last</code> (указывает на последнюю итерацию в цикле) для выполнения каких-либо завершающих действий для данного цикла.</p>
+Мы не применяем здесь, но внутри каждого цикла Django создаёт переменные, которые вы можете использовать при итерации. Например, вы можете проверять переменную `forloop.last` (указывает на последнюю итерацию в цикле) для выполнения каких-либо завершающих действий для данного цикла.
 
-<h4 id="Доступ_к_переменным">Доступ к переменным</h4>
+#### Доступ к переменным
 
-<p>Код внутри цикла создаёт экземпляр для каждой книги из списка, при помощи которой показывается заголовок (как ссылка на "скоро-будет-сделано" подробное отображение) и автора книги.</p>
+Код внутри цикла создаёт экземпляр для каждой книги из списка, при помощи которой показывается заголовок (как ссылка на "скоро-будет-сделано" подробное отображение) и автора книги.
 
-<pre class="brush: html">&lt;a href="\{{ book.get_absolute_url }}"&gt;\{{ book.title }}&lt;/a&gt; (\{{book.author}})
-</pre>
+```html
+<a href="\{{ book.get_absolute_url }}">\{{ book.title }}</a> (\{{book.author}})
+```
 
-<p>Мы получаем доступ к <em>полям</em> соответствующей записи о книге при помощи "дот-нотации", то есть через точку (например, <code>book.title</code> и <code>book.author</code>), где текст, который идёт после <code>book</code>, является именем поля (так, как определено в модели).</p>
+Мы получаем доступ к _полям_ соответствующей записи о книге при помощи "дот-нотации", то есть через точку (например, `book.title` и `book.author`), где текст, который идёт после `book`, является именем поля (так, как определено в модели).
 
-<p>Кроме того, внутри нашего шаблона, мы можем вызывать <em>функции</em> модели — в данном случае, мы вызываем <code>Book.get_absolute_url()</code> для получения URL-адреса, который мы используем для показа детальной информации о книге. Данный вызов работает только для функции у которой нет аргументов (в шаблоне не существует возможности передать аргументы в функцию!)</p>
+Кроме того, внутри нашего шаблона, мы можем вызывать _функции_ модели — в данном случае, мы вызываем `Book.get_absolute_url()` для получения URL-адреса, который мы используем для показа детальной информации о книге. Данный вызов работает только для функции у которой нет аргументов (в шаблоне не существует возможности передать аргументы в функцию!)
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы должны быть достаточно осмотрительными для того, чтобы избегать "сторонних эффектов" когда мы вызываем функции из шаблона. В данном случае мы просто получаем URL-адрес, но функции могут делать всё что угодно — мы не хотели бы "убить" наша базу данных (например) просто отрендеривая наш шаблон!</p>
-</div>
+> **Примечание:** Мы должны быть достаточно осмотрительными для того, чтобы избегать "сторонних эффектов" когда мы вызываем функции из шаблона. В данном случае мы просто получаем URL-адрес, но функции могут делать всё что угодно — мы не хотели бы "убить" наша базу данных (например) просто отрендеривая наш шаблон!
 
-<h4 id="Обновление_базового_шаблона">Обновление базового шаблона</h4>
+#### Обновление базового шаблона
 
-<p>Откройте файл базового шаблона (<strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong>) и вставьте <strong>{% url 'books' %} </strong> в URL-ссылку для пункта <strong>All books</strong>, как показано ниже. Тем самым, мы создали "переход" на страницу с книгами (теперь мы можем смело это сделать, поскольку у нас имеется соответствующее "книжное" url-преобразование).</p>
+Откройте файл базового шаблона (**/locallibrary/catalog/templates/_base_generic.html_**) и вставьте **{% url 'books' %}** в URL-ссылку для пункта **All books**, как показано ниже. Тем самым, мы создали "переход" на страницу с книгами (теперь мы можем смело это сделать, поскольку у нас имеется соответствующее "книжное" url-преобразование).
 
-<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
-<strong>&lt;li&gt;&lt;a href="{% url 'books' %}"&gt;All books&lt;/a&gt;&lt;/li&gt;</strong>
-&lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;</pre>
+```python
+<li><a href="{% url 'index' %}">Home</a></li>
+<li><a href="{% url 'books' %}">All books</a></li>
+<li><a href="">All authors</a></li>
+```
 
-<h3 id="Как_же_теперь_все_это_выглядит">Как же теперь все это выглядит?</h3>
+### Как же теперь все это выглядит?
 
-<p>Пока что у вас нет возможности создать список книг, потому что мы не учли ещё необходимые зависимости — преобразование URL-адреса для страниц с подробной информации о книге, которое необходимо для ссылок на отдельные книги. Мы покажем страницы со списком и подробной информацией о книге после следующего раздела.</p>
+Пока что у вас нет возможности создать список книг, потому что мы не учли ещё необходимые зависимости — преобразование URL-адреса для страниц с подробной информации о книге, которое необходимо для ссылок на отдельные книги. Мы покажем страницы со списком и подробной информацией о книге после следующего раздела.
 
-<h2 id="Страница_с_подробной_информацией_о_книге">Страница с подробной информацией о книге</h2>
+## Страница с подробной информацией о книге
 
-<p>Доступ к странице с подробной информацией о книге осуществляется при помощи URL-адреса <code>catalog/book/<em>&lt;id&gt;</em></code> (где <code><em>&lt;id&gt;</em></code> является первичным ключом для данной книги). В дополнение к полям модели <code>Book</code>  (автор, краткое содержание, ISBN, язык и жанр), также мы перечислим детали доступных экземпляров книги (<code>BookInstances</code>) включая их статус, ожидаемую дату возврата, штамп (imprint) и id. Это должно позволить нашим читателям не просто узнать о книге, но также убедиться, имеется ли она в наличии и/или когда будет доступна.</p>
+Доступ к странице с подробной информацией о книге осуществляется при помощи URL-адреса `catalog/book/<id>` (где `<id>` является первичным ключом для данной книги). В дополнение к полям модели `Book` (автор, краткое содержание, ISBN, язык и жанр), также мы перечислим детали доступных экземпляров книги (`BookInstances`) включая их статус, ожидаемую дату возврата, штамп (imprint) и id. Это должно позволить нашим читателям не просто узнать о книге, но также убедиться, имеется ли она в наличии и/или когда будет доступна.
 
-<h3 id="URL-преобразования">URL-преобразования</h3>
+### URL-преобразования
 
-<p>Откройте <strong>/catalog/urls.py</strong> и добавьте '<strong>book-detail</strong>' URL-преобразование, отмеченное жирным в следующем фрагменте. Эта функция <code>url()</code> определяет паттерн, связанный с обобщённым классом отображения детальной информации, а также имя для данной связи.</p>
+Откройте **/catalog/urls.py** и добавьте '**book-detail**' URL-преобразование, отмеченное жирным в следующем фрагменте. Эта функция `url()` определяет паттерн, связанный с обобщённым классом отображения детальной информации, а также имя для данной связи.
 
-<pre class="brush: python">from django.urls import path
+```python
+from django.urls import path
 from . import views
-<strong>from django.conf.urls import url</strong>
+from django.conf.urls import url
 
 urlpatterns = [
     url(r'^$', views.index, name='index'),
     url(r'^books/$', views.BookListView.as_view(), name='books'),
-    <strong>url(r'^book/(?P&lt;pk&gt;\d+)$', views.BookDetailView.as_view(), name='book-detail'),</strong>
-]</pre>
-
-<p>В отличие от предыдущих преобразований, в данном случае мы применяем наше регулярное выражение (РВ) для сопоставления "настоящего паттерна", а не просто строки. Данное РВ сопоставляет любой URL-адрес, который начинается с <code>book/</code>, за которым до конца строки (до маркера конца строки - $) следуют одна, или более <em>цифр</em>. В процессе выполнения данного преобразования, оно "захватывает" цифры и передаёт их в функцию отображения как параметр с именем <code>pk</code>.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: как было отмечено ранее, наш преобразуемый URL-адрес в реальности выглядит вот так <code>catalog/book/&lt;digits&gt;</code> (потому что мы находимся в приложении <strong>catalog</strong>, то подразумевается каталог <code>/catalog/</code>).</p>
-</div>
-
-<div class="warning">
-<p><strong>Важно</strong>: Обобщённый класс отображения подробной информации ожидает получить параметр с именем pk. Если вы пишете свою собственную функцию отображения, то тогда вы можете использовать параметр с любым именем, который пожелаете, или вообще передавать информацию в безымянном аргументе.</p>
-</div>
-
-<h4 id="Отдельный_пример_с_регулярными_выражениями">Отдельный пример с регулярными выражениями</h4>
-
-<p>Паттерны <a href="https://docs.python.org/3/library/re.html">регулярного выражения</a> является невероятно мощным инструментом преобразования. Пока что, мы не очень много говорили о них, поскольку мы сопоставляли URL-адреса с простыми строками (а не паттернами), и потому что они не интуитивны и  пугающий для начинающих.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Без паники! Мы будем рассматривать и использовать достаточно простые паттерны и при этом хорошо задокументированные!</p>
-</div>
-
-<p>В первую очередь вы должны знать что обычно регулярные выражения объявляются при помощи строкового литерала (то есть, они заключены в кавычки: <strong>r'&lt;ваше регулярное выражение&gt;'</strong>).</p>
-
-<p>Главными элементами синтаксиса объявления паттерна, который вы должны знать, являются:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Символ</th>
-   <th scope="col">Значение</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td>^</td>
-   <td>Соответствует началу строки</td>
-  </tr>
-  <tr>
-   <td>$</td>
-   <td>Соответствует концу строки</td>
-  </tr>
-  <tr>
-   <td>\d</td>
-   <td>Соответствует цифре (0, 1, 2, ... 9)</td>
-  </tr>
-  <tr>
-   <td>\w</td>
-   <td>Соответствует любому символу из алфавита в верхнем- или нижнем- регистре, цифре, или символу подчёркивания (_)</td>
-  </tr>
-  <tr>
-   <td>+</td>
-   <td>Соответствует <strong>одному, или более</strong> предыдущему символу. Например, для соответствия <strong>одной, или более</strong> цифре вы должны использовать <code>\d+</code>. Для <strong>одного и более</strong> символа "a", вы можете использовать <code>a+</code></td>
-  </tr>
-  <tr>
-   <td>*</td>
-   <td>Соответствует отсутствию вообще, или присутствию <strong>одного, или более</strong> предыдущему символу. Например, для соответствия "ничему", или слову (то есть, любому символу) вы можете использовать  <code>\w*</code></td>
-  </tr>
-  <tr>
-   <td>( )</td>
-   <td>Захват части паттерна внутри скобок. Любое захваченное значение будет передано отображению как безымянный параметр (если захватывается множество паттернов, то соответствующие параметры будут поставляться в порядке их объявления).</td>
-  </tr>
-  <tr>
-   <td>(?P&lt;name&gt;...)</td>
-   <td>Захват части паттерна (обозначенного через ...) как именованной переменной (в данном случае &lt;name&gt;). Захваченные значения передаются в отображение с определённым именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем!</td>
-  </tr>
-  <tr>
-   <td>[  ]</td>
-   <td>Соответствует одному символу из множества. Например, [abc] будет соответствовать либо 'a', или 'b', или 'c'. [-\w] будет соответствовать либо символу '-' , или любому другому словарному символу.</td>
-  </tr>
- </tbody>
-</table>
-
-<p>Большинство других символов могут быть заданы буквально!</p>
-
-<p>Давайте рассмотрим несколько реальных примеров паттернов:</p>
-
-<table class="standard-table">
- <thead>
-  <tr>
-   <th scope="col">Паттерн</th>
-   <th scope="col">Описание</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><strong>r'^book/(?P&lt;pk&gt;\d+)$'</strong></td>
-   <td>
-    <p>Это РВ применяется в нашем url-преобразовании. Оно соответствует строке, которая начинается с <code>book/</code> (<strong>^book/</strong>), затем имеет одну, или более цифр (<code>\d+</code>), а затем завершается (цифрой и только цифрой).</p>
-
-    <p>Оно также захватывает все цифры <strong>(?P&lt;pk&gt;\d+)</strong> и передаёт их в отображение, в параметре с именем 'pk'. <strong>Захваченные значения всегда передаются как строка!</strong></p>
-
-    <p>Например, данному паттерну должна соответствовать следующая строка <code>book/1234</code> , которая отправляет переменную <code>pk='1234'</code> в отображение.</p>
-   </td>
-  </tr>
-  <tr>
-   <td><strong>r'^book/(\d+)$'</strong></td>
-   <td>Этот паттерн соответствует тем же самым URL-адресам как и в предыдущем случае. Захваченная информация будет отправлена в отображение как безымянный параметр.</td>
-  </tr>
-  <tr>
-   <td><strong>r'^book/(?P&lt;stub&gt;[-\w]+)$'</strong></td>
-   <td>
-    <p>Данный паттерн соответствует строке, которая начинается с <code>book/</code> (<strong>^book/</strong>), затем идут один, или более символов либо '-', или  словарные символы (<strong>[-\w]+</strong>), а затем завершается. Он также захватывает данное множество символов и передаёт их в отображение в параметре с именем 'stub'.</p>
-
-    <p>Это довольно типичный паттерн для "стаба". Стабы являются дружественными URL-адресами - первичными ключами для данных. Вы могли бы применить стаб,  если вы захотели бы, чтобы URL-адрес вашей книги был более информативным. Например, <code>/catalog/book/the-secret-garden</code>, выглядит немного лучше чем <code>/catalog/book/33</code>.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
-
-<p>Вы можете захватить (указать) несколько паттернов в одном преобразовании и, тем самым, закодировать много различной информации в URL-адресе.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: В качестве дополнительного задания, рассмотрите возможность того, как вы могли бы закодировать url на список всех книг, вышедших в определённый год, месяц, день и какое РВ (паттерн) должно соответствовать этому.</p>
-</div>
-
-<h4 id="Передача_дополнительных_настроек_в_ваши_преобразования_URL-адресов">Передача дополнительных настроек в ваши преобразования URL-адресов</h4>
-
-<p>Одной возможностью, которую мы не применяли здесь, но которая могла бы быть вам полезной, является то, что вы можете объявлять и передавать <a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/#views-extra-options">дополнительные настройки</a> в отображения. Данные настройки объявляются как словарь, который вы передаёте как третий безымянный аргумент функции <code>url()</code>. Этот способ может быть полезен, если вы хотите воспользоваться тем же самым отображением для нескольких ресурсов и передавать данные для изменения его поведения в каждом отдельном случае (ниже, мы передаём разные имена шаблонов).</p>
-
-<pre class="brush: python">url(r'^/url/$', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
-url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
-
-</pre>
-
-<div class="note">
-<p><strong>Примечание:</strong> И дополнительные настройки, и именованные захваченные паттерны передаются в отображение как именованные параметры. Если вы используете одинаковое имя и для захваченного паттерна и для дополнительной настройки, то последняя будет отброшена, а в отображение будет передано значение захваченного паттерна. </p>
-</div>
-
-<h3 id="Отображение_(на_основе_класса)">Отображение (на основе класса)</h3>
-
-<p>Откройте <strong>catalog/views.py</strong>, и скопируйте следующий код в нижнюю часть файла:</p>
-
-<pre class="brush: python">class BookDetailView(generic.DetailView):
-    model = Book</pre>
-
-<p>Это всё! Все что вам надо теперь сделать это создать шаблон с именем <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>, а отображение передаст ему информацию из базы данных для определённой записи <code>Book,</code>выделенной при помощи URL-преобразования. Внутри шаблона вы можете получить доступ к списку книг при помощи переменной с именем <code>object</code> или <code>book</code> (обобщённо "<code><em>the_model_name</em></code>").</p>
-
-<p>Если у вас имеется необходимость, то вы можете изменить текущий шаблон и/или имя объекта контекста, используемого для ссылки на книгу в шаблоне. Кроме того, вы можете переопределить методы, например, для добавления дополнительной информации к контексту.</p>
-
-<h4 id="Что_произойдёт_если_записи_не_существует">Что произойдёт,  если записи не существует?</h4>
-
-<p>Если запрашиваемой записи не существует, тогда обобщённый класс отображения подробной информации автоматически "выкинет" исключение Http404 — в продакшене это приведёт к автоматическому отображению страницы с текстом "resource not found" ("ресурс не найден"), которую, конечно же, вы можете настроить по своему усмотрению.</p>
-
-<p>Просто для иллюстрации идеи как это могло бы работать, мы приведём фрагмент кода, демонстрирующего возможную реализацию отображения в виде функции, если по каким-либо причинам вы не используете отображение на основе обобщённого класса.</p>
-
-<pre class="brush: python">def book_detail_view(request,pk):
-    try:
-        book_id=Book.objects.get(pk=pk)
-    except Book.DoesNotExist:
-        raise Http404("Book does not exist")
-
-    #book_id=get_object_or_404(Book, pk=pk)
-
-    return render(
-        request,
-        'catalog/book_detail.html',
-        context={'book':book_id,}
-    )
-</pre>
+    url(r'^book/(?P<pk>\d+)$', views.BookDetailView.as_view(), name='book-detail'),
+]
+```
 
-<p>В первую очередь отображение пытается получить определённую запись о книге из модели. Если ей это не удаётся, то "выбрасывается" исключение <code>Http404</code>, которое сигнализирует, что данная книга не найдена "not found". Последним шагом является, как обычно, вызов функции <code>render()</code> с именем соответствующего шаблона и данных о книге, передаваемых в параметре с именем <code>context</code> (в виде словаря).</p>
+В отличие от предыдущих преобразований, в данном случае мы применяем наше регулярное выражение (РВ) для сопоставления "настоящего паттерна", а не просто строки. Данное РВ сопоставляет любой URL-адрес, который начинается с `book/`, за которым до конца строки (до маркера конца строки - $) следуют одна, или более _цифр_. В процессе выполнения данного преобразования, оно "захватывает" цифры и передаёт их в функцию отображения как параметр с именем `pk`.
 
-<div class="note">
-<p><strong>Примечание</strong>: Функция <code>get_object_or_404()</code> (показана закомментированной) является удобным "ярлыком" для генерации исключения <code>Http404</code> если запись не найдена.</p>
-</div>
+> **Примечание:** как было отмечено ранее, наш преобразуемый URL-адрес в реальности выглядит вот так `catalog/book/<digits>` (потому что мы находимся в приложении **catalog**, то подразумевается каталог `/catalog/`).
 
-<h3 id="Создание_шаблона_детальной_информации">Создание шаблона детальной информации</h3>
+> **Предупреждение:** **Важно**: Обобщённый класс отображения подробной информации ожидает получить параметр с именем pk. Если вы пишете свою собственную функцию отображения, то тогда вы можете использовать параметр с любым именем, который пожелаете, или вообще передавать информацию в безымянном аргументе.
 
-<p>Создайте HTML файл <strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong> и скопируйте в него содержимое, представленное ниже. Как было указано ранее, это шаблон "по умолчанию" (имя шаблона), который "ожидается"обобщённым классом отображения детальной информации (для модели с именем <code>Book</code> в приложении с именем <code>catalog</code>).</p>
+#### Отдельный пример с регулярными выражениями
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+Паттерны [регулярного выражения](https://docs.python.org/3/library/re.html) является невероятно мощным инструментом преобразования. Пока что, мы не очень много говорили о них, поскольку мы сопоставляли URL-адреса с простыми строками (а не паттернами), и потому что они не интуитивны и пугающий для начинающих.
 
-{% block content %}
-  &lt;h1&gt;Title: \{{ book.title }}&lt;/h1&gt;
+> **Примечание:** Без паники! Мы будем рассматривать и использовать достаточно простые паттерны и при этом хорошо задокументированные!
 
-  &lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href=""&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt; &lt;!-- author detail link not yet defined --&gt;
-  &lt;p&gt;&lt;strong&gt;Summary:&lt;/strong&gt; \{{ book.summary }}&lt;/p&gt;
-  &lt;p&gt;&lt;strong&gt;ISBN:&lt;/strong&gt; \{{ book.isbn }}&lt;/p&gt;
-  &lt;p&gt;&lt;strong&gt;Language:&lt;/strong&gt; \{{ book.language }}&lt;/p&gt;
-  &lt;p&gt;&lt;strong&gt;Genre:&lt;/strong&gt; {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}&lt;/p&gt;
+В первую очередь вы должны знать что обычно регулярные выражения объявляются при помощи строкового литерала (то есть, они заключены в кавычки: **r'<ваше регулярное выражение>'**).
 
-  &lt;div style="margin-left:20px;margin-top:20px"&gt;
-    &lt;h4&gt;Copies&lt;/h4&gt;
+Главными элементами синтаксиса объявления паттерна, который вы должны знать, являются:
 
-    {% for copy in book.bookinstance_set.all %}
-    &lt;hr&gt;
-    &lt;p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'd' %}text-danger{% else %}text-warning{% endif %}"&gt;\{{ copy.get_status_display }}&lt;/p&gt;
-    {% if copy.status != 'a' %}&lt;p&gt;&lt;strong&gt;Due to be returned:&lt;/strong&gt; \{{copy.due_back}}&lt;/p&gt;{% endif %}
-    &lt;p&gt;&lt;strong&gt;Imprint:&lt;/strong&gt; \{{copy.imprint}}&lt;/p&gt;
-    &lt;p class="text-muted"&gt;&lt;strong&gt;Id:&lt;/strong&gt; \{{copy.id}}&lt;/p&gt;
-    {% endfor %}
-  &lt;/div&gt;
-{% endblock %}</pre>
+| Символ         | Значение                                                                                                                                                                                                                                                   |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| ^              | Соответствует началу строки                                                                                                                                                                                                                                |
+| $              | Соответствует концу строки                                                                                                                                                                                                                                 |
+| \d             | Соответствует цифре (0, 1, 2, ... 9)                                                                                                                                                                                                                       |
+| \w             | Соответствует любому символу из алфавита в верхнем- или нижнем- регистре, цифре, или символу подчёркивания (\_)                                                                                                                                            |
+| +              | Соответствует **одному, или более** предыдущему символу. Например, для соответствия **одной, или более** цифре вы должны использовать `\d+`. Для **одного и более** символа "a", вы можете использовать `a+`                                               |
+| \*             | Соответствует отсутствию вообще, или присутствию **одного, или более** предыдущему символу. Например, для соответствия "ничему", или слову (то есть, любому символу) вы можете использовать `\w*`                                                          |
+| ( )            | Захват части паттерна внутри скобок. Любое захваченное значение будет передано отображению как безымянный параметр (если захватывается множество паттернов, то соответствующие параметры будут поставляться в порядке их объявления).                      |
+| (?P\<name>...) | Захват части паттерна (обозначенного через ...) как именованной переменной (в данном случае \<name>). Захваченные значения передаются в отображение с определённым именем. Таким образом, ваше отображение должно объявить аргумент с тем же самым именем! |
+| \[ ]           | Соответствует одному символу из множества. Например, \[abc] будет соответствовать либо 'a', или 'b', или 'c'. \[-\w] будет соответствовать либо символу '-' , или любому другому словарному символу.                                                       |
 
-<ul>
-</ul>
+Большинство других символов могут быть заданы буквально!
 
-<div class="note">
-<p>Ссылка на автора в шаблоне содержит пустой URL-адрес, потому что мы ещё не создали страницу детальной информации об авторе. Когда это произойдёт, вы должны будете обновить данный URL-адрес как указано ниже:</p>
+Давайте рассмотрим несколько реальных примеров паттернов:
 
-<pre>&lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;
-</pre>
-</div>
+| Паттерн                          | Описание                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **r'^book/(?P\<pk>\d+)$'**       | Это РВ применяется в нашем url-преобразовании. Оно соответствует строке, которая начинается с `book/` (**^book/**), затем имеет одну, или более цифр (`\d+`), а затем завершается (цифрой и только цифрой).Оно также захватывает все цифры **(?P\<pk>\d+)** и передаёт их в отображение, в параметре с именем 'pk'. **Захваченные значения всегда передаются как строка!**Например, данному паттерну должна соответствовать следующая строка `book/1234` , которая отправляет переменную `pk='1234'` в отображение.                                                                                                     |
+| **r'^book/(\d+)$'**              | Этот паттерн соответствует тем же самым URL-адресам как и в предыдущем случае. Захваченная информация будет отправлена в отображение как безымянный параметр.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| **r'^book/(?P\<stub>\[-\w]+)$'** | Данный паттерн соответствует строке, которая начинается с `book/` (**^book/**), затем идут один, или более символов либо '-', или словарные символы (**\[-\w]+**), а затем завершается. Он также захватывает данное множество символов и передаёт их в отображение в параметре с именем 'stub'.Это довольно типичный паттерн для "стаба". Стабы являются дружественными URL-адресами - первичными ключами для данных. Вы могли бы применить стаб, если вы захотели бы, чтобы URL-адрес вашей книги был более информативным. Например, `/catalog/book/the-secret-garden`, выглядит немного лучше чем `/catalog/book/33`. |
 
-<p>Хотя и несколько больше, но почти все в данном шаблоне нам уже встречалось ранее:</p>
+Вы можете захватить (указать) несколько паттернов в одном преобразовании и, тем самым, закодировать много различной информации в URL-адресе.
 
-<ul>
- <li>Мы расширяем наш базовый шаблон и переопределяем блок <code>content</code>.</li>
- <li>Мы используем условие <code>if</code> для показа того, или иного содержимого.</li>
- <li>Мы используем циклы <code>for</code> того, чтобы пробежаться по элементам (объектам) в соответствующих списках.</li>
- <li>Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщённый класс отображения детальной информации, то контекст имеет имя <code>book</code>; также можем использовать имя <code>object</code>)</li>
-</ul>
+> **Примечание:** В качестве дополнительного задания, рассмотрите возможность того, как вы могли бы закодировать url на список всех книг, вышедших в определённый год, месяц, день и какое РВ (паттерн) должно соответствовать этому.
 
-<p>Одной интересной вещью, которую мы не видели ранее, является функция <code>book.bookinstance_set.all()</code>. Данный метод является "автомагически"-сконструированным Django для того, чтобы вернуть множество записей <code>BookInstance</code>, связанных с данной книгой <code>Book</code>.</p>
+#### Передача дополнительных настроек в ваши преобразования URL-адресов
 
-<pre class="brush: python">{% for copy in book.bookinstance_set.all %}
-&lt;!-- итерации по каждой копии/экземпляру книги --&gt;
-{% endfor %}</pre>
+Одной возможностью, которую мы не применяли здесь, но которая могла бы быть вам полезной, является то, что вы можете объявлять и передавать [дополнительные настройки](https://docs.djangoproject.com/en/1.10/topics/http/urls/#views-extra-options) в отображения. Данные настройки объявляются как словарь, который вы передаёте как третий безымянный аргумент функции `url()`. Этот способ может быть полезен, если вы хотите воспользоваться тем же самым отображением для нескольких ресурсов и передавать данные для изменения его поведения в каждом отдельном случае (ниже, мы передаём разные имена шаблонов).
 
-<p>Этот метод создан, потому что вы, на стороне "многим" данной связи, объявили поле <code>ForeignKey</code> (один-ко многим). Поскольку вы ничего не объявили на другой стороне ("один") данной модели (то есть, модель <code>Book</code> "ничего не знает" про модель <code>BookInstance</code>), то она не имеет никакой возможности (по умолчанию) для получения множества соответствующих записей. Для того, чтобы обойти эту проблему, Django конструирует соответствующую функцию "обратного просмотра" ("reverse lookup"), которой вы можете воспользоваться. Имя данной функции создаётся в нижнем регистре и состоит из имени модели, в которой был объявлен <code>ForeignKey</code> (то есть, <code>bookinstance</code>), за которым следует <code>_set</code> (то есть функция, созданная для <code>Book</code> будет иметь вид <code>bookinstance_set()</code>).</p>
+```python
+url(r'^/url/$', views.my_reused_view, {'my_template_name': 'some_path'}, name='aurl'),
+url(r'^/anotherurl/$', views.my_reused_view, {'my_template_name': 'another_path'}, name='anotherurl'),
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Здесь мы используем  <code>all()</code> для получения всех записей (по умолчанию). Вы, наверное, могли бы использовать метод <code>filter()</code> для получения подмножества записей в коде, но, к сожалению, вы НЕ можете применить данный вызов в шаблоне, потому что вы не можете передать в нем (в шаблоне) аргументы в функцию.</p>
+> **Примечание:** И дополнительные настройки, и именованные захваченные паттерны передаются в отображение как именованные параметры. Если вы используете одинаковое имя и для захваченного паттерна и для дополнительной настройки, то последняя будет отброшена, а в отображение будет передано значение захваченного паттерна.
 
-<p>Обратите внимание, что если вы не определяете порядок выдачи данных (в вашем отображении, или в модели), то сервер разработки "выкинет" сообщения об ошибках, похожие на следующие:</p>
+### Отображение (на основе класса)
 
-<pre>[29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
-/foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: &lt;QuerySet [&lt;Author: Ortiz, David&gt;, &lt;Author: H. McRaven, William&gt;, &lt;Author: Leigh, Melinda&gt;]&gt;
-  allow_empty_first_page=allow_empty_first_page, **kwargs)
-</pre>
+Откройте **catalog/views.py**, и скопируйте следующий код в нижнюю часть файла:
 
-<p>Это случилось потому что, <a href="https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects">paginator object</a> (далее объект постраничного вывода) ожидает видеть некую упорядоченность ORDER BY при запросе к базе данных. Без этого, он не сможет гарантировать правильный вывод полученных данных!<strong> </strong></p>
+```python
+class BookDetailView(generic.DetailView):
+    model = Book
+```
 
-<p>Данное руководство пока не дошло до описания <strong>Pagination</strong> (пока, но скоро будет), и поскольку вы не можете использовать функцию <code>sort_by()</code> и передавать параметр (по той же причине, что и <code>filter()</code>) вы должны выбрать один из трёх вариантов дальнейших действий:</p>
+Это всё! Все что вам надо теперь сделать это создать шаблон с именем **/locallibrary/catalog/templates/catalog/book_detail.html**, а отображение передаст ему информацию из базы данных для определённой записи `Book,`выделенной при помощи URL-преобразования. Внутри шаблона вы можете получить доступ к списку книг при помощи переменной с именем `object` или `book` (обобщённо "`the_model_name`").
 
-<ol>
- <li>Добавить атрибут <code>ordering</code> внутри <code>Meta-класса</code> объявленного в вашей модели.</li>
- <li>Добавить атрибут <code>queryset</code> в вашей реализации класса отображения, определяющего <code>order_by()</code>.</li>
- <li>Добавить метод <code>get_queryset</code> в вашу реализацию класса отображения и также определить метод <code>order_by()</code>.</li>
-</ol>
+Если у вас имеется необходимость, то вы можете изменить текущий шаблон и/или имя объекта контекста, используемого для ссылки на книгу в шаблоне. Кроме того, вы можете переопределить методы, например, для добавления дополнительной информации к контексту.
 
-<p>Если вы выбрали пункт номер один с <code>Meta-классом</code> для модели Author  (вероятно, не такой гибкий как вариант с настройкой класса отображения, но тем не менее, достаточно простой), вы должны прийти к чему-то похожему на следующее:</p>
+#### Что произойдёт, если записи не существует?
 
-<pre>class Author(models.Model):
-    first_name = models.CharField(max_length=100)
-    last_name = models.CharField(max_length=100)
-    date_of_birth = models.DateField(null=True, blank=True)
-    date_of_death = models.DateField('Died', null=True, blank=True)
+Если запрашиваемой записи не существует, тогда обобщённый класс отображения подробной информации автоматически "выкинет" исключение Http404 — в продакшене это приведёт к автоматическому отображению страницы с текстом "resource not found" ("ресурс не найден"), которую, конечно же, вы можете настроить по своему усмотрению.
 
-    def get_absolute_url(self):
-        return reverse('author-detail', args=[str(self.id)])
+Просто для иллюстрации идеи как это могло бы работать, мы приведём фрагмент кода, демонстрирующего возможную реализацию отображения в виде функции, если по каким-либо причинам вы не используете отображение на основе обобщённого класса.
 
-    def __str__(self):
-        return '%s, %s' % (self.last_name, self.first_name)
+```python
+def book_detail_view(request,pk):
+    try:
+        book_id=Book.objects.get(pk=pk)
+    except Book.DoesNotExist:
+        raise Http404("Book does not exist")
 
-<strong>    class Meta:
-        ordering = ['last_name']</strong></pre>
+    #book_id=get_object_or_404(Book, pk=pk)
 
-<p>Конечно же, поле не обязательно должно иметь имя <code>last_name</code>: оно может быть любым.</p>
+    return render(
+        request,
+        'catalog/book_detail.html',
+        context={'book':book_id,}
+    )
+```
 
-<p>И последнее, но не окончательное, вы должны сортировать по атрибуту/колонке, которая была проиндексирована (уникально, или нет) в вашей базе данных для того, чтобы избежать проблем с быстродействием. Конечно, это не является необходимым в данном примере (и мы, вероятно, забегаем далеко вперёд), если у нас такое небольшое количество книг (и пользователей!),  но это необходимо помнить для будущих проектов.</p>
-</div>
+В первую очередь отображение пытается получить определённую запись о книге из модели. Если ей это не удаётся, то "выбрасывается" исключение `Http404`, которое сигнализирует, что данная книга не найдена "not found". Последним шагом является, как обычно, вызов функции `render()` с именем соответствующего шаблона и данных о книге, передаваемых в параметре с именем `context` (в виде словаря).
 
-<h2 id="Как_это_теперь_выглядит">Как это теперь выглядит?</h2>
+> **Примечание:** Функция `get_object_or_404()` (показана закомментированной) является удобным "ярлыком" для генерации исключения `Http404` если запись не найдена.
 
-<p>На данный момент мы должны были создать все необходимое для показа страниц со списком книг и детальной информацией. Запустите сервер (<code>python3 manage.py runserver</code>) и откройте ваш браузер <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>.</p>
+### Создание шаблона детальной информации
 
-<div class="warning">
-<p><strong>Предупреждение:</strong> Не кликайте на каком-либо авторе, - ссылки пока не заданы — это будет вашим дополнительным заданием!</p>
-</div>
+Создайте HTML файл **/locallibrary/catalog/templates/catalog/book_detail.html** и скопируйте в него содержимое, представленное ниже. Как было указано ранее, это шаблон "по умолчанию" (имя шаблона), который "ожидается"обобщённым классом отображения детальной информации (для модели с именем `Book` в приложении с именем `catalog`).
 
-<p>Кликните ссылку <strong>All books</strong> для перехода на страницу со списком книг. </p>
+```html
+{% extends "base_generic.html" %}
 
-<p><img alt="Book List Page" src="https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 823px;"></p>
+{% block content %}
+  <h1>Title: \{{ book.title }}</h1>
 
-<p>Затем кликните на ссылку одной из ваших книг. Если все настроено как надо, то вы должны увидеть то, что указано на картинке.</p>
+  <p><strong>Author:</strong> <a href="">\{{ book.author }}</a></p> <!-- author detail link not yet defined -->
+  <p><strong>Summary:</strong> \{{ book.summary }}</p>
+  <p><strong>ISBN:</strong> \{{ book.isbn }}</p>
+  <p><strong>Language:</strong> \{{ book.language }}</p>
+  <p><strong>Genre:</strong> {% for genre in book.genre.all %} \{{ genre }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
 
-<p><img alt="Book Detail Page" src="https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 783px; margin: 0px auto; width: 926px;"></p>
+  <div style="margin-left:20px;margin-top:20px">
+    <h4>Copies</h4>
 
-<h2 id="Постраничный_вывод_(Pagination)">Постраничный вывод (Pagination)</h2>
+    {% for copy in book.bookinstance_set.all %}
+    <hr>
+    <p class="{% if copy.status == 'a' %}text-success{% elif copy.status == 'd' %}text-danger{% else %}text-warning{% endif %}">\{{ copy.get_status_display }}</p>
+    {% if copy.status != 'a' %}<p><strong>Due to be returned:</strong> \{{copy.due_back}}</p>{% endif %}
+    <p><strong>Imprint:</strong> \{{copy.imprint}}</p>
+    <p class="text-muted"><strong>Id:</strong> \{{copy.id}}</p>
+    {% endfor %}
+  </div>
+{% endblock %}
+```
 
-<p>Если у вас всего лишь несколько записей в базе данных, то наша страница вывода списка книг будет выглядеть отлично. Тем не менее, когда у вас появятся десятки, или сотни записей ваша страница станет значительно дольше загружаться (и станет слишком длинной для комфортного просмотра). Решением данной проблемы является добавление постраничного вывода (Pagination) к вашему отображению списка, который будет выводить ограниченное количество элементов на каждой странице.</p>
+> **Примечание:** Ссылка на автора в шаблоне содержит пустой URL-адрес, потому что мы ещё не создали страницу детальной информации об авторе. Когда это произойдёт, вы должны будете обновить данный URL-адрес как указано ниже:
+>
+> ```
+> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a>
+> ```
 
-<p>Django имеет отличный встроенный механизм для постраничного вывода. Даже более того, он встроен в обобщённый класс отображения списков, следовательно вам не нужно проделывать большой объем работы, чтобы воспользоваться возможностями постраничного вывода!</p>
+Хотя и несколько больше, но почти все в данном шаблоне нам уже встречалось ранее:
 
-<h3 id="Отображения">Отображения</h3>
+- Мы расширяем наш базовый шаблон и переопределяем блок `content`.
+- Мы используем условие `if` для показа того, или иного содержимого.
+- Мы используем циклы `for` того, чтобы пробежаться по элементам (объектам) в соответствующих списках.
+- Мы получаем доступ к полям контекста при помощи "дот-нотации" (поскольку мы использовали обобщённый класс отображения детальной информации, то контекст имеет имя `book`; также можем использовать имя `object`)
 
-<p>Откройте <strong>catalog/views.py</strong> и добавьте поле <code>paginate_by</code> как показано жирным в следующем фрагменте.</p>
+Одной интересной вещью, которую мы не видели ранее, является функция `book.bookinstance_set.all()`. Данный метод является "автомагически"-сконструированным Django для того, чтобы вернуть множество записей `BookInstance`, связанных с данной книгой `Book`.
 
-<pre class="brush: python">class BookListView(generic.ListView):
+```python
+{% for copy in book.bookinstance_set.all %}
+<!-- итерации по каждой копии/экземпляру книги -->
+{% endfor %}
+```
+
+Этот метод создан, потому что вы, на стороне "многим" данной связи, объявили поле `ForeignKey` (один-ко многим). Поскольку вы ничего не объявили на другой стороне ("один") данной модели (то есть, модель `Book` "ничего не знает" про модель `BookInstance`), то она не имеет никакой возможности (по умолчанию) для получения множества соответствующих записей. Для того, чтобы обойти эту проблему, Django конструирует соответствующую функцию "обратного просмотра" ("reverse lookup"), которой вы можете воспользоваться. Имя данной функции создаётся в нижнем регистре и состоит из имени модели, в которой был объявлен `ForeignKey` (то есть, `bookinstance`), за которым следует `_set` (то есть функция, созданная для `Book` будет иметь вид `bookinstance_set()`).
+
+> **Примечание:** Здесь мы используем `all()` для получения всех записей (по умолчанию). Вы, наверное, могли бы использовать метод `filter()` для получения подмножества записей в коде, но, к сожалению, вы НЕ можете применить данный вызов в шаблоне, потому что вы не можете передать в нем (в шаблоне) аргументы в функцию.
+>
+> Обратите внимание, что если вы не определяете порядок выдачи данных (в вашем отображении, или в модели), то сервер разработки "выкинет" сообщения об ошибках, похожие на следующие:
+>
+> ```
+> [29/May/2017 18:37:53] "GET /catalog/books/?page=1 HTTP/1.1" 200 1637
+> /foo/local_library/venv/lib/python3.5/site-packages/django/views/generic/list.py:99: UnorderedObjectListWarning: Pagination may yield inconsistent results with an unordered object_list: <QuerySet [<Author: Ortiz, David>, <Author: H. McRaven, William>, <Author: Leigh, Melinda>]>
+>   allow_empty_first_page=allow_empty_first_page, **kwargs)
+> ```
+>
+> Это случилось потому что, [paginator object](https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects) (далее объект постраничного вывода) ожидает видеть некую упорядоченность ORDER BY при запросе к базе данных. Без этого, он не сможет гарантировать правильный вывод полученных данных!\*\*\*\*
+>
+> Данное руководство пока не дошло до описания **Pagination** (пока, но скоро будет), и поскольку вы не можете использовать функцию `sort_by()` и передавать параметр (по той же причине, что и `filter()`) вы должны выбрать один из трёх вариантов дальнейших действий:
+>
+> 1.  Добавить атрибут `ordering` внутри `Meta-класса` объявленного в вашей модели.
+> 2.  Добавить атрибут `queryset` в вашей реализации класса отображения, определяющего `order_by()`.
+> 3.  Добавить метод `get_queryset` в вашу реализацию класса отображения и также определить метод `order_by()`.
+>
+> Если вы выбрали пункт номер один с `Meta-классом` для модели Author (вероятно, не такой гибкий как вариант с настройкой класса отображения, но тем не менее, достаточно простой), вы должны прийти к чему-то похожему на следующее:
+>
+> ```
+> class Author(models.Model):
+>     first_name = models.CharField(max_length=100)
+>     last_name = models.CharField(max_length=100)
+>     date_of_birth = models.DateField(null=True, blank=True)
+>     date_of_death = models.DateField('Died', null=True, blank=True)
+>
+>     def get_absolute_url(self):
+>         return reverse('author-detail', args=[str(self.id)])
+>
+>     def __str__(self):
+>         return '%s, %s' % (self.last_name, self.first_name)
+>
+>     class Meta:
+>         ordering = ['last_name']
+> ```
+>
+> Конечно же, поле не обязательно должно иметь имя `last_name`: оно может быть любым.
+>
+> И последнее, но не окончательное, вы должны сортировать по атрибуту/колонке, которая была проиндексирована (уникально, или нет) в вашей базе данных для того, чтобы избежать проблем с быстродействием. Конечно, это не является необходимым в данном примере (и мы, вероятно, забегаем далеко вперёд), если у нас такое небольшое количество книг (и пользователей!), но это необходимо помнить для будущих проектов.
+
+## Как это теперь выглядит?
+
+На данный момент мы должны были создать все необходимое для показа страниц со списком книг и детальной информацией. Запустите сервер (`python3 manage.py runserver`) и откройте ваш браузер <http://127.0.0.1:8000/>.
+
+> **Предупреждение:** Не кликайте на каком-либо авторе, - ссылки пока не заданы — это будет вашим дополнительным заданием!
+
+Кликните ссылку **All books** для перехода на страницу со списком книг.
+
+![Book List Page](https://mdn.mozillademos.org/files/14049/book_list_page_no_pagination.png)
+
+Затем кликните на ссылку одной из ваших книг. Если все настроено как надо, то вы должны увидеть то, что указано на картинке.
+
+![Book Detail Page](https://mdn.mozillademos.org/files/14051/book_detail_page_no_pagination.png)
+
+## Постраничный вывод (Pagination)
+
+Если у вас всего лишь несколько записей в базе данных, то наша страница вывода списка книг будет выглядеть отлично. Тем не менее, когда у вас появятся десятки, или сотни записей ваша страница станет значительно дольше загружаться (и станет слишком длинной для комфортного просмотра). Решением данной проблемы является добавление постраничного вывода (Pagination) к вашему отображению списка, который будет выводить ограниченное количество элементов на каждой странице.
+
+Django имеет отличный встроенный механизм для постраничного вывода. Даже более того, он встроен в обобщённый класс отображения списков, следовательно вам не нужно проделывать большой объем работы, чтобы воспользоваться возможностями постраничного вывода!
+
+### Отображения
+
+Откройте **catalog/views.py** и добавьте поле `paginate_by` как показано жирным в следующем фрагменте.
+
+```python
+class BookListView(generic.ListView):
     model = Book
-    <strong>paginate_by = 10</strong></pre>
+    paginate_by = 10
+```
 
-<p>Как только у вас появится более 10 записей в базе данных отображение начнёт формировать постраничный вывод данных, которые он передаёт шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: <code>/catalog/books/<strong>?page=2</strong></code>.</p>
+Как только у вас появится более 10 записей в базе данных отображение начнёт формировать постраничный вывод данных, которые он передаёт шаблону. К различным страницам данного вывода можно получить доступ при помощи параметров GET-запроса — к странице 2 вы можете получить доступ, используя URL-адрес: `/catalog/books/?page=2`.
 
-<h3 id="Шаблоны">Шаблоны</h3>
+### Шаблоны
 
-<p>Теперь, когда данные выводятся постранично, нам надо добавить функциональность переключения между страницами в шаблона страницы. Поскольку мы хотели бы использовать данный механизм для всех списков на сайте, то мы пропишем его в базовом шаблоне сайта.</p>
+Теперь, когда данные выводятся постранично, нам надо добавить функциональность переключения между страницами в шаблона страницы. Поскольку мы хотели бы использовать данный механизм для всех списков на сайте, то мы пропишем его в базовом шаблоне сайта.
 
-<p>Откройте <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> и, ниже блока <code>content</code>, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включён" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки <code>next</code> и <code>previous,</code>соответственно (а также, номер текущей страницы). </p>
+Откройте **/locallibrary/catalog/templates/_base_generic.html_** и, ниже блока `content`, вставьте блок (во фрагменте не выделен жирным), отвечающий за постраничный вывод. Данный код, в первую очередь, проверяет "включён" ли механизм постраничного вывода для данной страницы и если это так, то он добавляет ссылки `next` и `previous,`соответственно (а также, номер текущей страницы).
 
-<pre class="brush: python"><strong>{% block content %}{% endblock %}</strong>
+```python
+{% block content %}{% endblock %}
 
 {% block pagination %}
   {% if is_paginated %}
-      &lt;div class="pagination"&gt;
-          &lt;span class="page-links"&gt;
+      <div class="pagination">
+          <span class="page-links">
               {% if page_obj.has_previous %}
-                  &lt;a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}"&gt;previous&lt;/a&gt;
+                  <a href="\{{ request.path }}?page=\{{ page_obj.previous_page_number }}">previous</a>
               {% endif %}
-              &lt;span class="page-current"&gt;
+              <span class="page-current">
                   Page \{{ page_obj.number }} of \{{ page_obj.paginator.num_pages }}.
-              &lt;/span&gt;
+              </span>
               {% if page_obj.has_next %}
-                  &lt;a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}"&gt;next&lt;/a&gt;
+                  <a href="\{{ request.path }}?page=\{{ page_obj.next_page_number }}">next</a>
               {% endif %}
-          &lt;/span&gt;
-      &lt;/div&gt;
+          </span>
+      </div>
   {% endif %}
-{% endblock %} </pre>
-
-<p>Параметр <code>page_obj</code> является объектом типа <a href="https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects">Paginator</a>, который будет создаваться каждый раз, когда будет применяться постраничный вывод данных для текущей страницы. Он позволяет получить всю информацию о текущей странице, о предыдущих страницах, сколько всего страниц и так далее. </p>
-
-<p>Мы используем <code>\{{ request.path }}</code> для получения URL-адреса текущей страницы, для того, чтобы создать ссылки на соответствующие страницы, обратите внимание, что данный вызов не зависит от объекта <code>page_obj</code>и, таким образом, может использоваться отдельно.</p>
-
-<p>На этом все!</p>
+{% endblock %}
+```
 
-<h3 id="Как_это_выглядит">Как это выглядит?</h3>
+Параметр `page_obj` является объектом типа [Paginator](https://docs.djangoproject.com/en/1.10/topics/pagination/#paginator-objects), который будет создаваться каждый раз, когда будет применяться постраничный вывод данных для текущей страницы. Он позволяет получить всю информацию о текущей странице, о предыдущих страницах, сколько всего страниц и так далее.
 
-<p>Картинка ниже показывает как выглядит постраничный вывод — если вы не добавили более 10 записей в вашу базу данных, тогда вы можете проверить как это работает, просто уменьшив значение в <code>paginate_by,</code> в файле <strong>catalog/views.py</strong>. Для получения результата, соответствующего картинке ниже, мы изменили<code>paginate_by = 2</code>.</p>
+Мы используем `\{{ request.path }}` для получения URL-адреса текущей страницы, для того, чтобы создать ссылки на соответствующие страницы, обратите внимание, что данный вызов не зависит от объекта `page_obj`и, таким образом, может использоваться отдельно.
 
-<p>Ссылки на страницы показаны в нижней части страницы. Показаны ссылки следующая/предыдущая в зависимости от того на какой странице вы в данный момент находитесь.</p>
+На этом все!
 
-<p><img alt="Book List Page - paginated" src="https://mdn.mozillademos.org/files/14057/book_list_paginated.png" style="border-style: solid; border-width: 1px; display: block; height: 216px; margin: 0px auto; width: 924px;"></p>
+### Как это выглядит?
 
-<h2 id="Проверьте_себя">Проверьте себя</h2>
+Картинка ниже показывает как выглядит постраничный вывод — если вы не добавили более 10 записей в вашу базу данных, тогда вы можете проверить как это работает, просто уменьшив значение в `paginate_by,` в файле **catalog/views.py**. Для получения результата, соответствующего картинке ниже, мы изменили`paginate_by = 2`.
 
-<p>Дополнительным задание в данной статье и для завершения данного этапа проекта будет создание отображений детальной информации об авторе и их списка. Эти отображения должны находиться по следующим адресам:</p>
+Ссылки на страницы показаны в нижней части страницы. Показаны ссылки следующая/предыдущая в зависимости от того на какой странице вы в данный момент находитесь.
 
-<ul>
- <li><code>catalog/authors/</code> — Список авторов.</li>
- <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— Детальная информация об авторе со значением первичного ключа равным <em><code>&lt;id&gt;</code></em></li>
-</ul>
+![Book List Page - paginated](https://mdn.mozillademos.org/files/14057/book_list_paginated.png)
 
-<p>Соответствующий код для URL-преобразований и отображений должен быть идентичным коду для списка книг и детальной информации о книге <code>Book</code>, который мы создали ранее. Шаблоны будут отличаться, но будут иметь похожее поведение.</p>
+## Проверьте себя
 
-<div class="note">
-<p><strong>Примечание</strong>:</p>
+Дополнительным задание в данной статье и для завершения данного этапа проекта будет создание отображений детальной информации об авторе и их списка. Эти отображения должны находиться по следующим адресам:
 
-<ul>
- <li>Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку <strong>All authors</strong> в базовом шаблоне. Следуйте <a href="#Update_the_base_template">тем же путём</a>, который мы проделали когда обновляли ссылку <strong>All books</strong>.</li>
- <li>Когда вы создадите URL-преобразование для страницы с детальной информацией об авторе,  вы должны будете обновить <a href="#Creating_the_Detail_View_template">шаблон детальной информации о книге</a> (<strong>/locallibrary/catalog/templates/catalog/book_detail.html</strong>), таким образом, чтобы ссылка автора указывала на страницу с детальной информации о нем (а не быть пустой). Данная ссылка будет иметь вид как указано жирным во фрагменте ниже.
-  <pre class="brush: html">&lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; &lt;a href="<strong>{% url 'author-detail' book.author.pk %}</strong>"&gt;\{{ book.author }}&lt;/a&gt;&lt;/p&gt;
-</pre>
- </li>
-</ul>
-</div>
+- `catalog/authors/` — Список авторов.
+- `catalog/author/<id>`\_ _— Детальная информация об авторе со значением первичного ключа равным _`<id>`\_
 
-<p>Когда вы закончите, ваши страницы должны будут выглядеть как на картинке.</p>
+Соответствующий код для URL-преобразований и отображений должен быть идентичным коду для списка книг и детальной информации о книге `Book`, который мы создали ранее. Шаблоны будут отличаться, но будут иметь похожее поведение.
 
-<p><img alt="Author List Page" src="https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+> **Примечание:** :
+>
+> - Когда вы создадите URL-преобразование для страницы списка авторов вам понадобится обновить ссылку **All authors** в базовом шаблоне. Следуйте [тем же путём](#Update_the_base_template), который мы проделали когда обновляли ссылку **All books**.
+> - Когда вы создадите URL-преобразование для страницы с детальной информацией об авторе, вы должны будете обновить [шаблон детальной информации о книге](#Creating_the_Detail_View_template) (**/locallibrary/catalog/templates/catalog/book_detail.html**), таким образом, чтобы ссылка автора указывала на страницу с детальной информации о нем (а не быть пустой). Данная ссылка будет иметь вид как указано жирным во фрагменте ниже.
+>
+>   ```html
+>   <p><strong>Author:</strong> <a href="{% url 'author-detail' book.author.pk %}">\{{ book.author }}</a></p>
+>   ```
 
-<ul>
-</ul>
+Когда вы закончите, ваши страницы должны будут выглядеть как на картинке.
 
-<p><img alt="Author Detail Page" src="https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png" style="border-style: solid; border-width: 1px; display: block; height: 358px; margin: 0px auto; width: 825px;"></p>
+![Author List Page](https://mdn.mozillademos.org/files/14053/author_list_page_no_pagination.png)
 
-<ul>
-</ul>
+![Author Detail Page](https://mdn.mozillademos.org/files/14055/author_detail_page_no_pagination.png)
 
-<h2 id="Итоги">Итоги</h2>
+## Итоги
 
-<p>Поздравляем! Наша базовая функциональность библиотеки готова! </p>
+Поздравляем! Наша базовая функциональность библиотеки готова!
 
-<p>В данной статье мы изучили как применять обобщённые классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приёмов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.</p>
+В данной статье мы изучили как применять обобщённые классы отображения списка и детальной информации, и использовать их для создания страниц отображения наших книг и авторов. Кроме того, мы многое узнали о паттернах преобразования, построенных на основе регулярных выражений, а также то, как вы можете передавать данные из URL-адреса в ваше отображение. Мы изучили несколько приёмов применения шаблонов. В самом конце мы показали как осуществлять постраничный вывод списков, так, что наши списки управляются даже тогда, когда они содержат много записей.
 
-<p>В нашей следующей статье мы расширим нашу библиотеку, путём поддержки пользовательских аккаунтов,  и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и  формы.</p>
+В нашей следующей статье мы расширим нашу библиотеку, путём поддержки пользовательских аккаунтов, и так образом продемонстрируем аутентификацию, разграничение уровней доступа, сессии и формы.
 
-<h2 id="Дополнительная_информация">Дополнительная информация</h2>
+## Дополнительная информация
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/">Встроенные обобщённые классы отображения</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-display/">Обобщённый вид отображения</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/">Введение в отображения на основе классов</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/templates/builtins">Встроенные теги шаблона и фильтры</a> (Django docs).</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/pagination/">Постраничный вывод (Pagination)</a> (Django docs)</li>
-</ul>
+- [Встроенные обобщённые классы отображения](https://docs.djangoproject.com/en/1.10/topics/class-based-views/generic-display/) (Django docs)
+- [Обобщённый вид отображения](https://docs.djangoproject.com/en/1.10/ref/class-based-views/generic-display/) (Django docs)
+- [Введение в отображения на основе классов](https://docs.djangoproject.com/en/1.10/topics/class-based-views/intro/) (Django docs)
+- [Встроенные теги шаблона и фильтры](https://docs.djangoproject.com/en/1.10/ref/templates/builtins) (Django docs).
+- [Постраничный вывод (Pagination)](https://docs.djangoproject.com/en/1.10/topics/pagination/) (Django docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Home_page", "Learn/Server-side/Django/Sessions", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/home_page/index.md b/files/ru/learn/server-side/django/home_page/index.md
index 11d85aa67f4fc4..e784002ebe9c27 100644
--- a/files/ru/learn/server-side/django/home_page/index.md
+++ b/files/ru/learn/server-side/django/home_page/index.md
@@ -13,115 +13,102 @@ tags:
   - Шаблоны
 translation_of: Learn/Server-side/Django/Home_page
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</div>
+Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретём практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.
 
-<p class="summary">Теперь мы готовы создать код нашей первой страницы — домашняя страница сайта <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> будет показывать количество записей в каждой модели, кроме того, она будет выводить боковую навигационную панель с ссылками на другие страницы сайта. В результате мы приобретём практический навык написания простых URL-преобразований и отображений, получения записей из базы данных и применения шаблонов.</p>
+| Требования: | Прочитать [Введение в Django](/ru/docs/Learn/Server-side/Django/Introduction). Завершить изучение предыдущих частей руководства (включая [Руководство часть 4: Django административный раздел сайта](/ru/docs/Learn/Server-side/Django/Admin_site)). |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понимать как создавать простые url-преобразования (которые не содержат никаких данных) и отображения, как получать данные из моделей и создавать шаблоны.                                                                                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Прочитать <a href="/en-US/docs/Learn/Server-side/Django/Introduction">Введение в Django</a>. Завершить изучение предыдущих частей руководства (включая <a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Руководство часть 4: Django административный раздел сайта</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать как создавать простые url-преобразования (которые не содержат никаких данных) и отображения, как получать данные из моделей и создавать шаблоны.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Теперь, когда мы определили наши модели и создали несколько записей в них, пришло время написать код, который будет показывать данную информацию пользователям. И первое, что нам необходимо сделать это определиться какую информацию мы бы хотели показывать на наших страницах, а затем определить соответствующие URL-адреса для получения соответствующих ресурсов. Затем нам надо создать url-преобразования, отображения (функции, или классы), а затем шаблоны страницы.
 
-<p>Теперь, когда мы определили наши модели и создали несколько записей в них, пришло время написать код, который будет показывать данную информацию пользователям. И первое, что нам необходимо сделать это определиться какую информацию мы бы хотели показывать на наших страницах,  а затем определить соответствующие URL-адреса для получения соответствующих ресурсов. Затем нам надо создать url-преобразования, отображения (функции, или классы), а затем шаблоны страницы. </p>
+Диаграмма, представленная ниже, демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остаётся создать следующее:
 
-<p>Диаграмма, представленная ниже,  демонстрирует главный поток данных и элементов, которые нужно реализовать для управления HTTP запросами и ответами. Поскольку мы уже создали модель, то нам остаётся создать следующее:</p>
+- URL-преобразования для перехода по соответствующему URL-адресу (с учётом информации, передаваемой в данном адресе) к соответствующей функции отображения.
+- Функции отображения для запроса соответствующих данных из моделей, создание страниц HTML для показа этих данных и их отправку в клиент пользователя (в браузер).
+- Шаблоны, которые используются отображениями для рендеринга (отрисовки) данных.
 
-<ul>
- <li>URL-преобразования для перехода по соответствующему URL-адресу (с учётом информации, передаваемой в данном адресе) к соответствующей функции отображения.</li>
- <li>Функции отображения для запроса соответствующих данных из моделей, создание страниц HTML для показа этих данных и их отправку в клиент пользователя (в браузер).</li>
- <li>Шаблоны, которые используются отображениями для рендеринга (отрисовки) данных.</li>
-</ul>
+![](https://mdn.mozillademos.org/files/13931/basic-django.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="display: block; margin: 0px auto;"></p>
+Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдём в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.
 
-<p>Как вы увидите в следующем разделе, у нас будет 5 страниц, которые мы немного опишем в данной статье. Данная статья, большей частью, будет сконцентрирована на реализации всего-лишь одной, домашней страницы нашего сайта (к другим страницам мы перейдём в других частях руководства). Это должно дать вам хорошее базовое представление о работе с URL-преобразованиями (связывании), отображениями и моделями.</p>
+## Определяем URL-адреса страниц
 
-<h2 id="Определяем_URL-адреса_страниц">Определяем URL-адреса страниц</h2>
+По сути, так как для конечных пользователей, данная версия сайта _LocalLibrary_ является read-only (только для чтения), то нам надо создать домашнюю страницу и страницы, которые будут _показывать_ списки авторов и книг, а также детальную информацию о них, соответственно.
 
-<p>По сути, так как для конечных пользователей, данная версия сайта <em>LocalLibrary</em> является read-only (только для чтения), то нам надо создать домашнюю страницу и страницы, которые будут <em>показывать</em> списки авторов и книг, а также детальную информацию о них, соответственно. </p>
+Перечислим URL-адреса, которые понадобятся для наших страниц:
 
-<p>Перечислим URL-адреса, которые понадобятся для наших страниц:</p>
+- `catalog/` — Домашняя/индексная страница.
+- `catalog/books/` — Список всех книг.
+- `catalog/authors/` — Список всех авторов.
+- `catalog/book/<id>` — Детальная информация для определённой книги со значением первичного ключа равного `<id>`. Например, `/catalog/book/3`, для `id = 3`.
+- `catalog/author/<id>`\_ _— Детальная информация для определённого автора со значением первичного ключа равного _`<id>. `\_Например, `/catalog/author/11`, для автора с `id = 11`.
 
-<ul>
- <li><code>catalog/</code> — Домашняя/индексная страница.</li>
- <li><code>catalog/books/</code> — Список всех книг.</li>
- <li><code>catalog/authors/</code> — Список всех авторов.</li>
- <li><code>catalog/book/<em>&lt;id&gt;</em></code> — Детальная информация для определённой книги со значением первичного ключа равного <code><em>&lt;id&gt;</em></code>. Например, <code>/catalog/book/3</code>, для <code>id = 3</code>.</li>
- <li><code>catalog/author/<em>&lt;id&gt;</em></code><em> </em>— Детальная информация для определённого автора со значением первичного ключа равного <em><code>&lt;id&gt;. </code></em>Например, <code>/catalog/author/11</code>, для автора с <code>id = 11</code>.</li>
-</ul>
+Первые три URL-адреса используются для показа домашней страницы, а также списков книг и авторов. Они не кодируют никакой дополнительной информации и результат показа данных страниц будет полностью зависеть от того, что находится в базе данных и, по сути, будет все время одним и тем же (при неизменной базе данных, конечно).
 
-<p>Первые три URL-адреса используются для показа домашней страницы, а также списков книг и авторов. Они не кодируют никакой дополнительной информации и результат показа данных страниц будет полностью зависеть от того, что находится в базе данных  и, по сути, будет все время одним и тем же (при неизменной базе данных, конечно).</p>
+Последние два URL-адреса применяются для показа детальной информации об определённой книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как `<id>`, выше). URL-преобразование получает данную информацию и передаёт её в отображение, которое применяет её для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора).
 
-<p>Последние два URL-адреса применяются для показа детальной информации об определённой книге, или авторе — в себе они содержат соответствующее значение идентификатора (показан как <code><em>&lt;id&gt;</em></code>, выше). URL-преобразование получает данную информацию и передаёт её в отображение, которое применяет её для запроса к базе данных. Для кодирования и применения данной информации в вашем URL-адресе нам понадобится только одно url-преобразование, соответствующее отображение и шаблон страницы для показа любой книги (или автора). </p>
+> **Примечание:** Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа `GET` (например, `/book/?id=6`). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными ([посмотрите совет W3C здесь](https://www.w3.org/Provider/Style/URI)).
+>
+> Документация Django рекомендует кодировать информацию в теле URL-адреса, на практике это приводит к лучшей структуре сайта.
 
-<div class="note">
-<p><strong>Примечание</strong>: Django позволяет вам конструировать ваши URL-адреса любым, удобным для вас, способом — вы можете закодировать информацию в теле URL-адреса, как показано выше, или использовать URL-адрес типа <code>GET</code> (например, <code>/book/?id=6</code>). Независимо от ваших предпочтений, URL-адреса должны быть понятными, логичными и читабельными (<a href="https://www.w3.org/Provider/Style/URI">посмотрите совет W3C здесь</a>).<br>
- <br>
- Документация Django рекомендует кодировать информацию в теле URL-адреса, на практике это приводит к лучшей структуре сайта.</p>
-</div>
+Как было отмечено ранее, оставшаяся часть данной статьи описывает как сделать главную страницу сайта.
 
-<p>Как было отмечено ранее, оставшаяся часть данной статьи описывает как сделать главную страницу сайта.</p>
+## Создание главной страницы сайта
 
-<h2 id="Создание_главной_страницы_сайта">Создание главной страницы сайта</h2>
+Первой страницей, которую мы создадим, будет главная страница сайта (`catalog/`). Она будет небольшой статической HTML-страницей, которая будет показывать вычисленные "количества" различных записей из базы данных. Для того, чтобы проделать данную работу мы вначале создадим URL-преобразование, затем отображение и шаблон.
 
-<p>Первой страницей, которую мы создадим, будет главная страница сайта (<code>catalog/</code>). Она будет небольшой статической HTML-страницей, которая будет показывать вычисленные "количества" различных записей из базы данных. Для того, чтобы проделать данную работу мы вначале создадим URL-преобразование, затем отображение и шаблон. </p>
+> **Примечание:** Лучше уделить больше внимания на данный раздел, поскольку информация, представленная здесь, применяется для создания всех страниц сайта.
 
-<div class="note">
-<p><strong>Примечание</strong>: Лучше уделить больше внимания на данный раздел, поскольку информация, представленная здесь, применяется для создания всех страниц сайта.</p>
-</div>
+### URL-преобразование
 
-<h3 id="URL-преобразование">URL-преобразование</h3>
+Когда мы создавали [скелет сайта](/ru/docs/Learn/Server-side/Django/skeleton_website) мы обновили **locallibrary/urls.py** так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключён для обработки оставшейся части строки.
 
-<p>Когда мы создавали <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">скелет сайта</a> мы обновили <strong>locallibrary/urls.py </strong>так что всякий раз, когда начинается URL-адрес наш catalog/ получен и URLConf catalog.urls подключён для обработки оставшейся части строки.</p>
-
-<pre><code>urlpatterns += [
+```
+urlpatterns += [
     path('catalog/', include('catalog.urls')),
-]</code></pre>
+]
+```
 
-<p>Примечание: всякий раз, когда Django сталкивается c  <code><a href="https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.include" title="django.conf.urls.include">django.urls.include()</a></code>  он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включённый URLconf для дальнейшей обработки.</p>
+Примечание: всякий раз, когда Django сталкивается c [`django.urls.include()`](https://docs.djangoproject.com/en/2.0/ref/urls/#django.urls.include "django.conf.urls.include") он отбрасывает часть совпавшего URL , и отправляет оставшуюся строку в включённый URLconf для дальнейшей обработки.
 
-<p>Внутри нашего каталога приложения откройте <strong>urls.py</strong> и поместите в него текст, отмеченный жирным, ниже. </p>
+Внутри нашего каталога приложения откройте **urls.py** и поместите в него текст, отмеченный жирным, ниже.
 
-<pre class="brush: python line-numbers  language-python"><code class="language-python">urlpatterns = [
-<strong>    path('', views.index, name='index'),</strong>
-]</code></pre>
+```python
+urlpatterns = [
+    path('', views.index, name='index'),
+]
+```
 
-<p>Эта функция <code>path()</code> определяет URL-паттерн (в данном случае это пустая строка:<code>'' - </code>мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введённый адрес будет соответствует данному паттерну (<code>views.index</code> — это функция с именем <code>index()</code> в <strong>views.py</strong>).</p>
+Эта функция `path()` определяет URL-паттерн (в данном случае это пустая строка:`'' - `мы поговорим чуть более подробно о них далее в данном руководстве) и функцию отображения, которая будет вызвана, если введённый адрес будет соответствует данному паттерну (`views.index` — это функция с именем `index()` в **views.py**).
 
-<p>Данная функция <code>path()</code>, кроме того, определяет параметр <code>name</code>, который уникально определяет <em>это </em>частное URL-преобразование. Вы можете использовать данное имя для "обратного" ("reverse") преобразования — то есть, для динамического создания URL-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:</p>
+Данная функция `path()`, кроме того, определяет параметр `name`, который уникально определяет _это_ частное URL-преобразование. Вы можете использовать данное имя для "обратного" ("reverse") преобразования — то есть, для динамического создания URL-адреса, указывающего на ресурс, на которое указывает данное преобразование. Например, теперь, когда у нас имеется данное символическое имя, мы можем ссылаться на нашу домашнюю страницу при помощи создания следующей ссылки внутри какого-либо шаблона:
 
-<pre class="brush: html">&lt;a href="<strong>{% url 'index' %}</strong>"&gt;Home&lt;/a&gt;.</pre>
+```html
+<a href="{% url 'index' %}">Home</a>.
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы могли бы, конечно, жёстко указать прямую ссылку (то есть, <code>&lt;a href="<strong>/catalog/</strong>"&gt;Home&lt;/a&gt;</code>), но тогда, если мы изменим адрес нашей домашней страницы (например на <code>/catalog/index</code>), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!</p>
-</div>
+> **Примечание:** Мы могли бы, конечно, жёстко указать прямую ссылку (то есть, `<a href="/catalog/">Home</a>`), но тогда, если мы изменим адрес нашей домашней страницы (например на `/catalog/index`), то данные ссылки перестанут корректно работать. Применение "обратного" url-преобразования более гибкий и эффективный подход!
 
-<h3 id="Отображения_(на_основе_функций)">Отображения (на основе функций)</h3>
+### Отображения (на основе функций)
 
-<p>Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей <code>Book</code>, <code>BookInstance</code>, доступности <code>BookInstance</code>, а также записи <code>Author</code> из базы данных, затем передаёт эти записи в шаблон страницы, генерирует страницу и передаёт её пользователю (клиенту пользователя, например браузеру).</p>
+Отображение является функцией, которая обрабатывает HTTP-запрос, получает данные из базы данных (при необходимости), которые применяются для генерации страницы HTML. Затем функция отображения возвращает сгенерированную страницу пользователю в виде HTTP-ответа. В нашем случае, индексная функция демонстрирует этот процесс — она получает информацию о количестве записей `Book`, `BookInstance`, доступности `BookInstance`, а также записи `Author` из базы данных, затем передаёт эти записи в шаблон страницы, генерирует страницу и передаёт её пользователю (клиенту пользователя, например браузеру).
 
-<p>Откройте <strong>catalog/views.py</strong> и отметьте для себя, что данный файл уже импортирует функцию <a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">render()</a> - функцию, которая генерирует HTML-файлы при помощи шаблонов страниц и соответствующих данных. </p>
+Откройте **catalog/views.py** и отметьте для себя, что данный файл уже импортирует функцию [render()](https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render) - функцию, которая генерирует HTML-файлы при помощи шаблонов страниц и соответствующих данных.
 
-<pre class="brush: python">from django.shortcuts import render
+```python
+from django.shortcuts import render
 
 # Создайте ваше отображение здесь
-</pre>
+```
 
-<p>Скопируйте следующий код в нижнюю часть файла. Первая строка импортирует классы модели, которые мы будем использовать для доступа к данным во всех наших функциях (позже и классах) отображения.</p>
+Скопируйте следующий код в нижнюю часть файла. Первая строка импортирует классы модели, которые мы будем использовать для доступа к данным во всех наших функциях (позже и классах) отображения.
 
-<pre class="brush: python">from .models import Book, Author, BookInstance, Genre
+```python
+from .models import Book, Author, BookInstance, Genre
 
 def index(request):
     """
@@ -140,220 +127,217 @@ def index(request):
         request,
         'index.html',
         context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
-    )</pre>
+    )
+```
 
-<p>Первая часть функции отображения получает количество записей при помощи вызова функции <code>objects.all()</code> у атрибута <code>objects</code>, доступного для всех классов моделей. Похожим образом мы получаем список объектов <code>BookInstance</code>, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства (<a href="/en-US/docs/Learn/Server-side/Django/Models#Searching_for_records">Руководство часть 3: Применение моделей &gt; Поиск записей</a>).</p>
+Первая часть функции отображения получает количество записей при помощи вызова функции `objects.all()` у атрибута `objects`, доступного для всех классов моделей. Похожим образом мы получаем список объектов `BookInstance`, которые имеют статус 'a' (Доступно). Вы можете найти дополнительную информацию о работе с моделями в предыдущей части руководства ([Руководство часть 3: Применение моделей > Поиск записей](/ru/docs/Learn/Server-side/Django/Models#Searching_for_records)).
 
-<p>В конце функции <code>index</code> вызывается функция  <code>render()</code>, которая, в качестве ответа, создаёт и возвращает страницу HTML  (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект <code>request</code>  (типа <code>HttpRequest</code>), шаблон HTML-страницы с метками (<code>placeholders</code>), которые будут замещены данными,  а также переменной <code>context</code> (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне). </p>
+В конце функции `index` вызывается функция `render()`, которая, в качестве ответа, создаёт и возвращает страницу HTML (эта функция "оборачивает" вызовы нескольких функций, тем самым существенно упрощая процесс разработки). В качестве параметров ей передаются объект `request` (типа `HttpRequest`), шаблон HTML-страницы с метками (`placeholders`), которые будут замещены данными, а также переменной `context` (словарь Python, который содержит данные, которые и будут замещать метки в шаблоне).
 
-<p>В следующем разделе мы более подробно поговорим о шаблонах и переменной контекста. Давайте создадим наш шаблон, чтобы показать уже что-нибудь пользователю!</p>
+В следующем разделе мы более подробно поговорим о шаблонах и переменной контекста. Давайте создадим наш шаблон, чтобы показать уже что-нибудь пользователю!
 
-<h3 id="Шаблон">Шаблон</h3>
+### Шаблон
 
-<p>Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем '<strong>templates</strong>' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов <code>render()</code> будет пытаться найти файл <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдёте в браузер и наберёте в адресной строке <code>127.0.0.1:8000</code>. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.</p>
+Шаблон это текстовый файл, который определяет структуру и расположение данных в файле, кроме того, в нем размещают специальные метки (placeholders), которые используются для показа реального содержимого, то есть данных. По умолчанию Django ищет файлы шаблонов в директории с именем '**templates**' внутри вашего приложения. Например, внутри индексной функции отображения, которую мы только что создали, вызов `render()` будет пытаться найти файл **/locallibrary/catalog/templates/_index.html_** и в случае неудачи сгенерирует ошибку о том, что файл не найден. Вы можете увидеть данную ошибку, если вы сохраните предыдущие изменения, затем перейдёте в браузер и наберёте в адресной строке `127.0.0.1:8000`. В результате, в окно браузера будет выведено сообщение об ошибке "TemplateDoesNotExist at /catalog/" и некоторая другая информация.
 
-<div class="note">
-<p><strong>Примечание</strong>: На самом деле, в зависимости от настроек проекта, Django просматривает несколько мест в поисках шаблона (поиск в директории приложения осуществляется по умолчанию!). Вы можете найти больше информации о шаблонах и форматах, которые они поддерживают, перейдя по ссылке <a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Шаблоны</a> (Django docs).</p>
-</div>
+> **Примечание:** На самом деле, в зависимости от настроек проекта, Django просматривает несколько мест в поисках шаблона (поиск в директории приложения осуществляется по умолчанию!). Вы можете найти больше информации о шаблонах и форматах, которые они поддерживают, перейдя по ссылке [Шаблоны](https://docs.djangoproject.com/en/1.10/topics/templates/) (Django docs).
 
-<h4 id="Расширение_шаблонов">Расширение шаблонов</h4>
+#### Расширение шаблонов
 
-<p>Шаблон главной страницы нашего сайта должен соответствовать стандарту разметки HTML для разделов <code>head</code> и <code>body</code>, кроме того иметь разделы для навигации (на другие страницы, которые мы создадим позже) и показа некоторого вводного текста. Большая часть данной структуры будет одинаковой для всех страниц нашего сайта. Таким образом, чтобы избежать копирования одной и той же информации, язык создания шаблонов Django позволяет вам объявить базовый шаблон, а затем расширить его, замещая только те части, которые являются специфическими для каждой страницы. </p>
+Шаблон главной страницы нашего сайта должен соответствовать стандарту разметки HTML для разделов `head` и `body`, кроме того иметь разделы для навигации (на другие страницы, которые мы создадим позже) и показа некоторого вводного текста. Большая часть данной структуры будет одинаковой для всех страниц нашего сайта. Таким образом, чтобы избежать копирования одной и той же информации, язык создания шаблонов Django позволяет вам объявить базовый шаблон, а затем расширить его, замещая только те части, которые являются специфическими для каждой страницы.
 
-<p>Например, базовый шаблон <strong>base_generic.html</strong> может выглядеть как показано ниже. Как вы видите, этот файл содержит некоторую "общую" структуру HTML, разделы для заголовка, панель навигации и содержимое, отмеченное тэгами шаблона <code>block</code> и <code>endblock</code> (показано жирным). Данные блоки могут быть пустыми, или иметь содержимое, которое будет использоваться "по умолчанию" всеми страницами-наследниками.</p>
+Например, базовый шаблон **base_generic.html** может выглядеть как показано ниже. Как вы видите, этот файл содержит некоторую "общую" структуру HTML, разделы для заголовка, панель навигации и содержимое, отмеченное тэгами шаблона `block` и `endblock` (показано жирным). Данные блоки могут быть пустыми, или иметь содержимое, которое будет использоваться "по умолчанию" всеми страницами-наследниками.
 
-<div class="note">
-<p><strong>Примечание</strong>: <em>Тэги</em> шаблона подобны функциям, которые могут применяться для создания циклов по спискам, выполнять условные операции и так далее. Кроме тэгов, язык шаблона позволяет использовать переменные (которые передаются в шаблон из отображения), а также <em>шаблонные фильтры</em>, которые переформатируют переменные (например, переводят строку в нижний регистр).</p>
-</div>
+> **Примечание:** _Тэги_ шаблона подобны функциям, которые могут применяться для создания циклов по спискам, выполнять условные операции и так далее. Кроме тэгов, язык шаблона позволяет использовать переменные (которые передаются в шаблон из отображения), а также _шаблонные фильтры_, которые переформатируют переменные (например, переводят строку в нижний регистр).
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-  <strong>{% block title %}</strong>&lt;title&gt;Local Library&lt;/title&gt;<strong>{% endblock %}</strong>
-&lt;/head&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% block title %}<title>Local Library</title>{% endblock %}
+</head>
 
-&lt;body&gt;
-  <strong>{% block sidebar %}</strong>&lt;!-- insert default navigation text for every page --&gt;<strong>{% endblock %}</strong>
-  <strong>{% block content %}</strong>&lt;!-- default content text (typically empty) --&gt;<strong>{% endblock %}</strong>
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<body>
+  {% block sidebar %}<!-- insert default navigation text for every page -->{% endblock %}
+  {% block content %}<!-- default content text (typically empty) -->{% endblock %}
+</body>
+</html>
+```
 
-<p>Когда мы определяем шаблон для конкретного отображения, то в первую очередь мы объявляем базовый шаблон (при помощи тэга <code>extends</code> — смотрите код в следующем фрагменте). Если имеются блоки в базовом шаблоне, которые мы хотим заместить, тогда в нашем текущем шаблоне мы объявляем <code>block</code>/<code>endblock</code> и указываем соответствующее имя блока. </p>
+Когда мы определяем шаблон для конкретного отображения, то в первую очередь мы объявляем базовый шаблон (при помощи тэга `extends` — смотрите код в следующем фрагменте). Если имеются блоки в базовом шаблоне, которые мы хотим заместить, тогда в нашем текущем шаблоне мы объявляем `block`/`endblock` и указываем соответствующее имя блока.
 
-<p>Например фрагмент кода, показанный ниже, демонстрирует применение тэга <code>extends</code> и переопределяет блок с именем <code>content</code>. Окончательный код HTML будет содержать все структуры базового файла шаблона (включая содержимое по умолчанию, которое мы указали в блоке <code>title</code>) и код блока <code>content</code>, который мы разместили в текущем файле шаблона.</p>
+Например фрагмент кода, показанный ниже, демонстрирует применение тэга `extends` и переопределяет блок с именем `content`. Окончательный код HTML будет содержать все структуры базового файла шаблона (включая содержимое по умолчанию, которое мы указали в блоке `title`) и код блока `content`, который мы разместили в текущем файле шаблона.
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
-&lt;h1&gt;Local Library Home&lt;/h1&gt;
-&lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
-{% endblock %}</pre>
+<h1>Local Library Home</h1>
+<p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
+{% endblock %}
+```
 
-<h4 id="Базовый_шаблон_сайта_LocalLibrary">Базовый шаблон сайта LocalLibrary</h4>
+#### Базовый шаблон сайта LocalLibrary
 
-<p>Базовый шаблон, который мы планируем использовать для сайта <em>LocalLibrary</em>, представлен ниже. Как вы видите, данный фрагмент содержит HTML код и объявляет следующие блоки <code>title</code>, <code>sidebar</code> и <code>content</code>. Мы добавили заголовок по умолчанию (который, возможно, мы захотим изменить), а также боковую панель навигации, содержащей ссылки на списки всех книг и авторов (панель навигации, мы, вероятно, не будем менять/замещать, но, тем не менее, добавив этот блок, мы оставим для себя такую возможность).</p>
+Базовый шаблон, который мы планируем использовать для сайта _LocalLibrary_, представлен ниже. Как вы видите, данный фрагмент содержит HTML код и объявляет следующие блоки `title`, `sidebar` и `content`. Мы добавили заголовок по умолчанию (который, возможно, мы захотим изменить), а также боковую панель навигации, содержащей ссылки на списки всех книг и авторов (панель навигации, мы, вероятно, не будем менять/замещать, но, тем не менее, добавив этот блок, мы оставим для себя такую возможность).
 
-<div class="note">
-<p><strong>Примечание</strong>: Во фрагменте мы используем два дополнительных шаблонных тега: <code>url</code> и <code>load static</code>. Они будут описаны в следующих разделах.</p>
-</div>
+> **Примечание:** Во фрагменте мы используем два дополнительных шаблонных тега: `url` и `load static`. Они будут описаны в следующих разделах.
 
-<p>Создайте новый файл — <strong>/locallibrary/catalog/templates/<em>base_generic.html</em></strong> — и добавьте в него следующее содержимое:</p>
+Создайте новый файл — **/locallibrary/catalog/templates/_base_generic.html_** — и добавьте в него следующее содержимое:
 
-<pre class="brush: html">&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
 
-  {% block title %}&lt;title&gt;Local Library&lt;/title&gt;{% endblock %}
-  &lt;meta charset="utf-8"&gt;
-  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
-  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
-  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
-  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
+  {% block title %}<title>Local Library</title>{% endblock %}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 
-  &lt;!-- Добавление дополнительного статического CSS файла --&gt;
+  <!-- Добавление дополнительного статического CSS файла -->
   {% load static %}
-  &lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;
-&lt;/head&gt;
+  <link rel="stylesheet" href="{% static 'css/styles.css' %}">
+</head>
 
-&lt;body&gt;
+<body>
 
-  &lt;div class="container-fluid"&gt;
+  <div class="container-fluid">
 
-    &lt;div class="row"&gt;
-      &lt;div class="col-sm-2"&gt;
+    <div class="row">
+      <div class="col-sm-2">
       {% block sidebar %}
-      &lt;ul class="sidebar-nav"&gt;
-          &lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href=""&gt;All books&lt;/a&gt;&lt;/li&gt;
-          &lt;li&gt;&lt;a href=""&gt;All authors&lt;/a&gt;&lt;/li&gt;
-      &lt;/ul&gt;
+      <ul class="sidebar-nav">
+          <li><a href="{% url 'index' %}">Home</a></li>
+          <li><a href="">All books</a></li>
+          <li><a href="">All authors</a></li>
+      </ul>
      {% endblock %}
-      &lt;/div&gt;
-      &lt;div class="col-sm-10 "&gt;
+      </div>
+      <div class="col-sm-10 ">
       {% block content %}{% endblock %}
-      &lt;/div&gt;
-    &lt;/div&gt;
+      </div>
+    </div>
 
-  &lt;/div&gt;
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+  </div>
+</body>
+</html>
+```
 
-<p>Шаблон использует (и включает в себя) JavaScript и CSS от <a href="http://getbootstrap.com/">Bootstrap</a> для лучшего размещения элементов и формирования внешнего вида HTML страницы. Применение Bootstrap, или любого другого фреймворка для клиентской части сайта, является довольно продуктивным способом повышения привлекательности страницы, в том числе, это учитывает возможность запроса и показа сайта с устройств, с различными разрешениями экрана, а кроме того, это позволяет нам повысить уровень взаимодействия с пользователем — мы направим большую часть своих усилий на серверную часть нашего сайта!</p>
+Шаблон использует (и включает в себя) JavaScript и CSS от [Bootstrap](http://getbootstrap.com/) для лучшего размещения элементов и формирования внешнего вида HTML страницы. Применение Bootstrap, или любого другого фреймворка для клиентской части сайта, является довольно продуктивным способом повышения привлекательности страницы, в том числе, это учитывает возможность запроса и показа сайта с устройств, с различными разрешениями экрана, а кроме того, это позволяет нам повысить уровень взаимодействия с пользователем — мы направим большую часть своих усилий на серверную часть нашего сайта!
 
-<p>Базовый шаблон ссылается на локальный файл css  (<strong>styles.css</strong>), который предоставляет дополнительные стили. Создайте <strong>/locallibrary/catalog/static/css/styles.css</strong> и добавьте в него следующее содержимое:</p>
+Базовый шаблон ссылается на локальный файл css (**styles.css**), который предоставляет дополнительные стили. Создайте **/locallibrary/catalog/static/css/styles.css** и добавьте в него следующее содержимое:
 
-<pre class="brush: css">.sidebar-nav {
+```css
+.sidebar-nav {
     margin-top: 20px;
     padding: 0;
     list-style: none;
-}</pre>
+}
+```
 
-<h4 id="Индексный_шаблон_(шаблон_главной_страницы_сайта)">Индексный шаблон (шаблон главной страницы сайта)</h4>
+#### Индексный шаблон (шаблон главной страницы сайта)
 
-<p>Создайте файл HTML <strong>/locallibrary/catalog/templates/<em>index.html</em></strong> и скопируйте в него код, указанный ниже. Как вы наверное заметили, в первой строке мы расширяем наш базовый шаблон, а затем замещаем содержимое блока <code>content</code>, базового шаблона, новым содержимым текущего шаблона.</p>
+Создайте файл HTML **/locallibrary/catalog/templates/_index.html_** и скопируйте в него код, указанный ниже. Как вы наверное заметили, в первой строке мы расширяем наш базовый шаблон, а затем замещаем содержимое блока `content`, базового шаблона, новым содержимым текущего шаблона.
 
-<pre class="brush: html">{% extends "base_generic.html" %}
+```html
+{% extends "base_generic.html" %}
 
 {% block content %}
-&lt;h1&gt;Local Library Home&lt;/h1&gt;
+<h1>Local Library Home</h1>
 
-  &lt;p&gt;Welcome to &lt;em&gt;LocalLibrary&lt;/em&gt;, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.&lt;/p&gt;
+  <p>Welcome to <em>LocalLibrary</em>, a very basic Django website developed as a tutorial example on the Mozilla Developer Network.</p>
 
-&lt;h2&gt;Dynamic content&lt;/h2&gt;
+<h2>Dynamic content</h2>
 
-  &lt;p&gt;The library has the following record counts:&lt;/p&gt;
-  &lt;ul&gt;
-    &lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; <strong>\{{ num_books }}</strong>&lt;/li&gt;
-    &lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; <strong>\{{ num_instances }}</strong>&lt;/li&gt;
-    &lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; <strong>\{{ num_instances_available }}</strong>&lt;/li&gt;
-    &lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; <strong>\{{ num_authors }}</strong>&lt;/li&gt;
-  &lt;/ul&gt;
+  <p>The library has the following record counts:</p>
+  <ul>
+    <li><strong>Books:</strong> \{{ num_books }}</li>
+    <li><strong>Copies:</strong> \{{ num_instances }}</li>
+    <li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+    <li><strong>Authors:</strong> \{{ num_authors }}</li>
+  </ul>
 
-{% endblock %}</pre>
+{% endblock %}
+```
 
-<p>В данном фрагменте, в разделе <em>Динамическое содержимое, </em>мы объявили метки (<em>шаблонные переменные</em>) для информации, которую мы получаем из соответствующего отображения.  Данные переменные объявляются при помощи "двойных фигурных скобок" (в предыдущем фрагменте выделено жирным).</p>
+В данном фрагменте, в разделе _Динамическое содержимое,_ мы объявили метки (_шаблонные переменные_) для информации, которую мы получаем из соответствующего отображения. Данные переменные объявляются при помощи "двойных фигурных скобок" (в предыдущем фрагменте выделено жирным).
 
-<div class="note">
-<p><strong>Примечание:</strong> Переменные шаблона заключаются в двойные фигурные скобки (<code>\{{ num_books }}</code>) , а тэги шаблона (функции шаблона), помещаются в одинарные фигурные скобки со знаками процента (<code>{% extends "base_generic.html" %}</code>).</p>
-</div>
+> **Примечание:** Переменные шаблона заключаются в двойные фигурные скобки (`\{{ num_books }}`) , а тэги шаблона (функции шаблона), помещаются в одинарные фигурные скобки со знаками процента (`{% extends "base_generic.html" %}`).
 
-<p>Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых <em>ключей</em> из словаря переменной <code>context</code>, которая, в свою очередь, передаётся из отображения, во время вызова функции <code>render()</code> (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, <em>значения</em>.  </p>
+Важно отметить, что данные переменные имеют имена, соответствующие именам передаваемых _ключей_ из словаря переменной `context`, которая, в свою очередь, передаётся из отображения, во время вызова функции `render()` (смотри ниже). При отрисовке шаблона, вместо этих ключей будут подставлены, соответствующие им, _значения_.
 
-<pre class="brush: python">return render(
+```python
+return render(
     request,
     'index.html',
-     context={'<strong>num_books</strong>':num_books,'<strong>num_instances</strong>':num_instances,'<strong>num_instances_available</strong>':num_instances_available,'<strong>num_authors</strong>':num_authors},
-)</pre>
+     context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors},
+)
+```
 
-<h4 id="Ссылка_на_статические_файлы_их_шаблонов">Ссылка на статические файлы их шаблонов</h4>
+#### Ссылка на статические файлы их шаблонов
 
-<p>Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения <code>STATIC_URL</code> (по умолчанию, значение параметра <code>STATIC_URL</code> установлено в '<code>/static/</code>',  но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то ещё).</p>
+Любой ваш проект с большой вероятностью будет использовать статические ресурсы, включая JavaScript, CSS и изображения. В связи с тем, что расположение этих файлов может быть неизвестно (или может измениться), Django позволяет вам в шаблоне указать относительное расположение данных файлов при помощи глобального значения `STATIC_URL` (по умолчанию, значение параметра `STATIC_URL` установлено в '`/static/`', но вы можете выбрать любое другое значение, указав, например, сетевой ресурс, или что-то ещё).
 
-<p>Внутри шаблона вы  вызываете функцию (тэг) <code>load</code>, которая загружает статическую библиотеку "static" (как показано ниже). После того как статическая библиотека загружена, вы можете использовать тэг шаблона <code>static</code>, который указывает относительный путь URL к интересующему вас файлу.</p>
+Внутри шаблона вы вызываете функцию (тэг) `load`, которая загружает статическую библиотеку "static" (как показано ниже). После того как статическая библиотека загружена, вы можете использовать тэг шаблона `static`, который указывает относительный путь URL к интересующему вас файлу.
 
-<pre class="brush: html"> &lt;!-- Добавляем дополнительный статический CSS-файл --&gt;
+```html
+ <!-- Добавляем дополнительный статический CSS-файл -->
 {% load static %}
-&lt;link rel="stylesheet" href="{% static 'css/styles.css' %}"&gt;</pre>
-
-<p>Тем же способом вы можете загрузить нужное изображение. Например:</p>
+<link rel="stylesheet" href="{% static 'css/styles.css' %}">
+```
 
-<pre class="brush: html">{% load static %}
-&lt;img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/&gt;
-</pre>
+Тем же способом вы можете загрузить нужное изображение. Например:
 
-<div class="note">
-<p><strong>Примечание</strong>: Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (<strong>/locallibrary/locallibrary/urls.py</strong>), который мы создали в части <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">создание скелета сайта</a>. В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернёмся к этому позже.</p>
-</div>
+```html
+{% load static %}
+<img src="{% static 'catalog/images/local_library_model_uml.png' %}" alt="My image" style="width:555px;height:540px;"/>
+```
 
-<p>Для получения более подробной информации о работе со статическими файлами  обратитесь к документации по ссылке <a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Управление статическими файлами</a> (Django docs).</p>
+> **Примечание:** Фрагменты выше указывают пути расположения файлов, но Django не использует их по умолчанию. В процессе разработки сервер использует значения, указанные в глобальном файле URL-преобразований (**/locallibrary/locallibrary/urls.py**), который мы создали в части [создание скелета сайта](/ru/docs/Learn/Server-side/Django/skeleton_website). В дальнейшем, в продакшене, вам нужно будет уточнить параметры расположения статических файлов. Мы вернёмся к этому позже.
 
-<h4 id="Построение_URL-адресов">Построение URL-адресов</h4>
+Для получения более подробной информации о работе со статическими файлами обратитесь к документации по ссылке [Управление статическими файлами](https://docs.djangoproject.com/en/1.10/howto/static-files/) (Django docs).
 
-<p>Базовый шаблон, указанный выше, вводит тэг <code>url</code>.</p>
+#### Построение URL-адресов
 
-<pre class="brush: python">&lt;li&gt;&lt;a href="{% url 'index' %}"&gt;Home&lt;/a&gt;&lt;/li&gt;
-</pre>
+Базовый шаблон, указанный выше, вводит тэг `url`.
 
-<p>Данный тэг с именем <code>url()</code>, ищет в файле <strong>urls.py</strong> связанное значение переменной, указанной в качестве её параметра <code>'index'</code>, а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.</p>
+```python
+<li><a href="{% url 'index' %}">Home</a></li>
+```
 
-<h2 id="Как_теперь_все_это_выглядит">Как теперь все это выглядит?</h2>
+Данный тэг с именем `url()`, ищет в файле **urls.py** связанное значение переменной, указанной в качестве её параметра `'index'`, а затем возвращает URL, который вы можете использовать для ссылки на соответствующие ресурсы.
 
-<p>На данный момент мы должны были сделать всё что необходимо, для того, чтобы показать главную страницу нашего сайта. Запустите сервер (<code>python3 manage.py runserver</code>) и введите в ваш браузер адрес <a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>. Если все настроено как надо, то ваш сайт должен выглядеть как показано на следующей картинке.</p>
+## Как теперь все это выглядит?
 
-<p><img alt="Index page for LocalLibrary website" src="https://mdn.mozillademos.org/files/14045/index_page_ok.png" style="border-style: solid; border-width: 1px; display: block; height: 356px; margin: 0px auto; width: 874px;"></p>
+На данный момент мы должны были сделать всё что необходимо, для того, чтобы показать главную страницу нашего сайта. Запустите сервер (`python3 manage.py runserver`) и введите в ваш браузер адрес <http://127.0.0.1:8000/>. Если все настроено как надо, то ваш сайт должен выглядеть как показано на следующей картинке.
 
-<div class="note">
-<p><strong>Примечание:</strong> На данном этапе вы не сможете воспользоваться ссылками на страницы <strong>All books</strong> и <strong>All authors</strong>, потому что url-адреса, отображения и шаблоны для данных страниц не созданы (мы просто объявили метки для соответствующих ссылок в базовом шаблоне<code> base_generic.html</code>).</p>
-</div>
+![Index page for LocalLibrary website](https://mdn.mozillademos.org/files/14045/index_page_ok.png)
 
-<h2 id="Проверьте_себя">Проверьте себя</h2>
+> **Примечание:** На данном этапе вы не сможете воспользоваться ссылками на страницы **All books** и **All authors**, потому что url-адреса, отображения и шаблоны для данных страниц не созданы (мы просто объявили метки для соответствующих ссылок в базовом шаблоне` base_generic.html`).
 
-<p>А теперь парочка заданий, чтобы проверить, насколько вы усвоили работу с запросами к моделям базы данных, взаимодействия с отображениями и шаблонами. </p>
+## Проверьте себя
 
-<ol>
- <li>В главном файле шаблона (<em>base_generic.html</em>) есть блок <code>title</code>. Переопределите этот блок в индексном шаблоне (<em>index.html</em>) и задайте новый заголовок для этой страницы.</li>
- <li>Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учёта регистра), а затем передайте эти значения в шаблон.</li>
-</ol>
+А теперь парочка заданий, чтобы проверить, насколько вы усвоили работу с запросами к моделям базы данных, взаимодействия с отображениями и шаблонами.
 
-<ul>
-</ul>
+1.  В главном файле шаблона (_base_generic.html_) есть блок `title`. Переопределите этот блок в индексном шаблоне (_index.html_) и задайте новый заголовок для этой страницы.
+2.  Модифицируйте функцию отображения таким образом, чтобы получать из базы данных количество жанров и количество книг, которые содержат в своих заголовках какое-либо слово (без учёта регистра), а затем передайте эти значения в шаблон.
 
-<h2 id="Итог">Итог</h2>
+## Итог
 
-<p>Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-ещё-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.</p>
+Мы создали домашнюю страницу для нашего сайта — HTML страница, которая показывает количество некоторых записей из базы данных и содержит ссылки на другие "все-ещё-будут-созданы" страницы. Кроме того, мы изучили большое количество базовой информации об url-преобразованиях, отображениях, запросах к базе данных, используя наши модели, передачу информации из отображений в шаблоны, кроме того, создание и расширение шаблонов.
 
-<p>В  следующей части, при помощи наших новых знаний, мы  создадим ещё четыре страницы.</p>
+В следующей части, при помощи наших новых знаний, мы создадим ещё четыре страницы.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial03/">Написание вашего первого приложения Django, часть 3: Отображения и Шаблоны</a>  (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/urls/">URL-диспетчер</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/views/">Функции отображения</a> (DJango docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/templates/">Шаблоны</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/howto/static-files/">Управление статическими файлами</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render">Удобные (встроенные) функции Django</a> (Django docs)</li>
-</ul>
+- [Написание вашего первого приложения Django, часть 3: Отображения и Шаблоны](https://docs.djangoproject.com/en/1.10/intro/tutorial03/) (Django docs)
+- [URL-диспетчер](https://docs.djangoproject.com/en/1.10/topics/http/urls/) (Django docs)
+- [Функции отображения](https://docs.djangoproject.com/en/1.10/topics/http/views/) (DJango docs)
+- [Шаблоны](https://docs.djangoproject.com/en/1.10/topics/templates/) (Django docs)
+- [Управление статическими файлами](https://docs.djangoproject.com/en/1.10/howto/static-files/) (Django docs)
+- [Удобные (встроенные) функции Django](https://docs.djangoproject.com/en/1.10/topics/http/shortcuts/#django.shortcuts.render) (Django docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/index.md b/files/ru/learn/server-side/django/index.md
index f1049736788249..88438e77d6bf87 100644
--- a/files/ru/learn/server-side/django/index.md
+++ b/files/ru/learn/server-side/django/index.md
@@ -9,58 +9,52 @@ tags:
   - Начинающим
 translation_of: Learn/Server-side/Django
 ---
-<div>{{LearnSidebar}}</div>
-
-<p>Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Данный модуль расскажет о том, почему Django один из самых популярных серверных веб-фреймворков, как установить среду разработки, и как начать использовать его для создания собственных веб-приложений.</p>
-
-<h2 id="Требования">Требования</h2>
-
-<p>Перед началом работы с этим модулем вам не обязательно уже быть знакомым с Django. Вам бы пригодилось общее понимание того, что такое серверное веб-программирование и веб-фреймворки, почерпнутое, в идеале, из топиков другого нашего модуля <a href="./First_steps">Первые шаги серверного программирования веб-сайтов</a>.</p>
-
-<p>Рекомендуется базовое понимание концепций программирования и языка Python, но это не обязательно для освоения основных понятий.</p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Python является одним из самых доступных в чтении и понимании для новичков языком программирования. Тем не менее, если вы захотите глубже понять этот модуль, в Интернете сейчас доступны многочисленные бесплатные книги и учебные пособия (новички в программирование возможно захотят посетить <a href="https://wiki.python.org/moin/BeginnersGuide/NonProgrammers">Python for Non Programmers</a> на вики-страницах python.org).</p>
-</div>
-
-<h2 id="Руководство">Руководство</h2>
-
-<dl>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Introduction">Введение в Django</a></dt>
- <dd>В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторую продвинутую функциональность, на которой у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдёте к установке и начнёте экспериментировать.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/development_environment">Установка среды разработки Django</a></dt>
- <dd>Теперь, когда вы знаете, что такое Django, мы покажем вам, как установить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам понимание того, что вам потребуется, чтобы начать разработку Django-приложений .</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">Учебник Django: Веб-сайт местной библиотеки</a></dt>
- <dd>Первая статья в нашей серии практических уроков объясняет, что вы узнаете, и представит обзор веб-сайта «местной библиотеки», над которым мы будем работать и развиваться в последующих статьях.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/skeleton_website">Учебник Django часть 2: Создание скелета веб-сайта</a></dt>
- <dd>В этой статье показано, как вы можете создать проект  веб-сайта «каркас» в качестве основы, после чего вы сможете заполнить параметры сайта, urls, модели, представления и шаблоны.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Models">Учебник Django часть 3: Использование моделей</a></dt>
- <dd>В этой статье показано, как определить модели для сайта местной библиотеки — модели представляют структуры данных, в которых мы хотим хранить данные нашего приложения, а также позволяют Django хранить данные в базе данных для нас (и модифицировать позже). Она раскрывает, что такое модель, как она объявляется и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Admin_site">Учебник Django часть 4: Django admin веб-сайта</a></dt>
- <dd>Теперь, когда мы создали модели для сайта местной библиотеки, мы будем использовать Django Admin, чтобы добавить данные о книгах в библиотеке. Сначала мы покажем вам, как регистрировать и администрировать модели сайта а затем мы покажем вам, как входить в систему и создавать некоторые данные. В конце мы покажем некоторые способы дальнейшего улучшения представлений сайта.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Home_page">Учебник Django часть 5: Создание главной страницы </a></dt>
- <dd>Теперь мы готовы добавить код для отображения нашей первой полной страницы — главной страницы сайта местной библиотеки, которая показывает, сколько записей у нас есть для каждого типа модели, и предоставляет ссылки на боковых панелях на другие наши страницы. По пути мы получим практический опыт написания основных карт и представлений URL, получения записей из базы данных и использования шаблонов.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Generic_views">Учебник Django часть 6: Общий список и подробные представления</a></dt>
- <dd>Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Sessions">Учебник Django часть 7:  Структура сессий</a></dt>
- <dd>Это руководство расширяет наш сайт местной библиотеки, добавляя счётчик посещений домашней страницы. Это относительно простой пример, но он показывает, как вы можете использовать структуру сессии, чтобы обеспечить постоянное поведение анонимных пользователей на ваших собственных сайтах.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Authentication">Учебник Django часть 8: Авторизация и права пользователей</a></dt>
- <dd>В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учётными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Forms">Учебник Django часть 9: Работа с формами</a></dt>
- <dd>В этом уроке мы покажем вам, как работать с <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a> в Django, и  в частности, самый простой способ писать формы для создания, обновления и удаления экземпляров модели. В рамках этой демонстрации мы расширим сайт местной библиотеки, чтобы библиотекари могли вносить новые книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не использовать приложение администратора).</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Testing">Учебник Django часть10: Тестирование веб-приложения Django</a></dt>
- <dd>По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надёжно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/Deployment">Учебник Django часть 11: Деплой Django на продакшн</a></dt>
- <dd>Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Django/web_application_security">Безопасность веб-приложений Django</a></dt>
- <dd>Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространённых угроз безопасности в статье <a href="https://developer.mozilla.org/ru/docs/Web/Security">Web security</a> — Эта статья даёт практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.</dd>
-</dl>
-
-<h2 id="Задания">Задания</h2>
-
-<p>Следующее задание проверит ваше понимание того, как создать сайт с помощью Django, как описано в руководствах, перечисленных выше.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django мини-блог</a></dt>
- <dd>В этом задании вы будете использовать некоторые знания, которые вы узнали из этого модуля, чтобы создать свой собственный блог.</dd>
-</dl>
+{{LearnSidebar}}
+
+Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Данный модуль расскажет о том, почему Django один из самых популярных серверных веб-фреймворков, как установить среду разработки, и как начать использовать его для создания собственных веб-приложений.
+
+## Требования
+
+Перед началом работы с этим модулем вам не обязательно уже быть знакомым с Django. Вам бы пригодилось общее понимание того, что такое серверное веб-программирование и веб-фреймворки, почерпнутое, в идеале, из топиков другого нашего модуля [Первые шаги серверного программирования веб-сайтов](./First_steps).
+
+Рекомендуется базовое понимание концепций программирования и языка Python, но это не обязательно для освоения основных понятий.
+
+> **Примечание:** Python является одним из самых доступных в чтении и понимании для новичков языком программирования. Тем не менее, если вы захотите глубже понять этот модуль, в Интернете сейчас доступны многочисленные бесплатные книги и учебные пособия (новички в программирование возможно захотят посетить [Python for Non Programmers](https://wiki.python.org/moin/BeginnersGuide/NonProgrammers) на вики-страницах python.org).
+
+## Руководство
+
+- [Введение в Django](/ru/docs/Learn/Server-side/Django/Introduction)
+  - : В этой первой статье по Django мы ответим на вопрос "Что такое Django?" и сделаем обзор того, что делает этот веб-фреймворк особенным. Мы кратко рассмотрим основные особенности, включая некоторую продвинутую функциональность, на которой у нас не будет возможности подробно остановиться в этом модуле. Мы также покажем вам некоторые из основных строительных блоков приложения Django, чтобы дать вам представление о том, что он может сделать, прежде чем вы перейдёте к установке и начнёте экспериментировать.
+- [Установка среды разработки Django](/ru/docs/Learn/Server-side/Django/development_environment)
+  - : Теперь, когда вы знаете, что такое Django, мы покажем вам, как установить и протестировать среду разработки Django для Windows, Linux (Ubuntu) и Mac OS X — какую бы операционную систему вы не использовали, эта статья должна дать вам понимание того, что вам потребуется, чтобы начать разработку Django-приложений .
+- [Учебник Django: Веб-сайт местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website)
+  - : Первая статья в нашей серии практических уроков объясняет, что вы узнаете, и представит обзор веб-сайта «местной библиотеки», над которым мы будем работать и развиваться в последующих статьях.
+- [Учебник Django часть 2: Создание скелета веб-сайта](/ru/docs/Learn/Server-side/Django/skeleton_website)
+  - : В этой статье показано, как вы можете создать проект веб-сайта «каркас» в качестве основы, после чего вы сможете заполнить параметры сайта, urls, модели, представления и шаблоны.
+- [Учебник Django часть 3: Использование моделей](/ru/docs/Learn/Server-side/Django/Models)
+  - : В этой статье показано, как определить модели для сайта местной библиотеки — модели представляют структуры данных, в которых мы хотим хранить данные нашего приложения, а также позволяют Django хранить данные в базе данных для нас (и модифицировать позже). Она раскрывает, что такое модель, как она объявляется и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.
+- [Учебник Django часть 4: Django admin веб-сайта](/ru/docs/Learn/Server-side/Django/Admin_site)
+  - : Теперь, когда мы создали модели для сайта местной библиотеки, мы будем использовать Django Admin, чтобы добавить данные о книгах в библиотеке. Сначала мы покажем вам, как регистрировать и администрировать модели сайта а затем мы покажем вам, как входить в систему и создавать некоторые данные. В конце мы покажем некоторые способы дальнейшего улучшения представлений сайта.
+- [Учебник Django часть 5: Создание главной страницы](/ru/docs/Learn/Server-side/Django/Home_page)
+  - : Теперь мы готовы добавить код для отображения нашей первой полной страницы — главной страницы сайта местной библиотеки, которая показывает, сколько записей у нас есть для каждого типа модели, и предоставляет ссылки на боковых панелях на другие наши страницы. По пути мы получим практический опыт написания основных карт и представлений URL, получения записей из базы данных и использования шаблонов.
+- [Учебник Django часть 6: Общий список и подробные представления](/ru/docs/Learn/Server-side/Django/Generic_views)
+  - : Это руководство расширяет наш сайт местной библиотеки, добавляя список и подробные страницы для книг и авторов. Здесь мы узнаем об общих представлениях на основе классов и покажем, как они могут уменьшить количество кода, который вы должны писать для случаев общего использования. Мы также перейдём к обработке URL-адресов более подробно, покажем, как выполнить базовое сопоставление шаблонов.
+- [Учебник Django часть 7: Структура сессий](/ru/docs/Learn/Server-side/Django/Sessions)
+  - : Это руководство расширяет наш сайт местной библиотеки, добавляя счётчик посещений домашней страницы. Это относительно простой пример, но он показывает, как вы можете использовать структуру сессии, чтобы обеспечить постоянное поведение анонимных пользователей на ваших собственных сайтах.
+- [Учебник Django часть 8: Авторизация и права пользователей](/ru/docs/Learn/Server-side/Django/Authentication)
+  - : В этом уроке мы покажем вам, как разрешить пользователям входить на ваш сайт со своими учётными записями и как управлять тем, что они могут делать и видеть на основе того, зарегистрированы ли они или нет, и их допусках. В рамках этой демонстрации мы расширим сайт местной библиотеки, добавив страницы входа и выхода, а также страницы пользователей и персональные страницы для просмотра книг, которые были взяты на руки.
+- [Учебник Django часть 9: Работа с формами](/ru/docs/Learn/Server-side/Django/Forms)
+  - : В этом уроке мы покажем вам, как работать с [HTML Forms](/ru/docs/Web/Guide/HTML/Forms) в Django, и в частности, самый простой способ писать формы для создания, обновления и удаления экземпляров модели. В рамках этой демонстрации мы расширим сайт местной библиотеки, чтобы библиотекари могли вносить новые книги, создавать, обновлять и удалять авторов, используя наши собственные формы (а не использовать приложение администратора).
+- [Учебник Django часть10: Тестирование веб-приложения Django](/ru/docs/Learn/Server-side/Django/Testing)
+  - : По мере роста веб-сайтов становится сложнее проверять вручную — требуется больше проверок, поскольку взаимодействие между компонентами усложняется, небольшое изменение в одной области может потребовать дополнительные тесты для проверки его влияния на другие области. Один из способов смягчить эти проблемы - написать автоматизированные тесты, которые можно легко и надёжно запускать каждый раз, когда вы вносите изменения. В этом руководстве показано, как автоматизировать модульное тестирование вашего сайта с помощью тестовой среды Django.
+- [Учебник Django часть 11: Деплой Django на продакшн](/ru/docs/Learn/Server-side/Django/Deployment)
+  - : Теперь вы создали (и протестировали) удивительный сайт местной библиотеки, вам захочется установить его на общедоступный веб-сервер, чтобы к нему мог получить доступ персонал библиотеки и пользователи Интернета. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего веб-сайта и что вам нужно сделать, чтобы подготовить ваш сайт к выпуску.
+- [Безопасность веб-приложений Django](/ru/docs/Learn/Server-side/Django/web_application_security)
+  - : Защита пользовательских данных является неотъемлемой частью любой разработки сайта. Ранее мы объяснили некоторые из наиболее распространённых угроз безопасности в статье [Web security](/ru/docs/Web/Security) — Эта статья даёт практическую демонстрацию того, как встроенные средства защиты Django справляются с такими угрозами.
+
+## Задания
+
+Следующее задание проверит ваше понимание того, как создать сайт с помощью Django, как описано в руководствах, перечисленных выше.
+
+- [DIY Django мини-блог](/ru/docs/Learn/Server-side/Django/django_assessment_blog)
+  - : В этом задании вы будете использовать некоторые знания, которые вы узнали из этого модуля, чтобы создать свой собственный блог.
diff --git a/files/ru/learn/server-side/django/introduction/index.md b/files/ru/learn/server-side/django/introduction/index.md
index ba53070b2f7c42..dc061dbbfb42ae 100644
--- a/files/ru/learn/server-side/django/introduction/index.md
+++ b/files/ru/learn/server-side/django/introduction/index.md
@@ -11,127 +11,115 @@ tags:
 translation_of: Learn/Server-side/Django/Introduction
 original_slug: Learn/Server-side/Django/Введение
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
 
-<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).
 
-<p class="summary">В первой статье о Django мы отвечаем на вопрос «Что такое Django?» и даём обзор того, что делает его особенным. Мы опишем основные функции, в том числе некоторые из расширенных функций, которые у нас не будет времени подробно рассмотреть в этом модуле. Мы также покажем вам некоторые основные строительные блоки приложения Django (хотя на данный момент у вас ещё не будет среды разработки для тестирования).</p>
+| Требования: | Базовая компьютерная грамотность. Общее понимание [server-side website programming](/ru/docs/Learn/Server-side/First_steps), и в частности, механики [client-server interactions in websites](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview). |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:     | Узнать, что такое Django, какие функции он предоставляет, и основные строительные блоки приложения Django.                                                                                                                                                    |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/First_steps">server-side website programming</a>, и в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">client-server interactions in websites</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Узнать, что такое Django, какие функции он предоставляет, и основные строительные блоки приложения Django.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое Django?
 
-<h2 id="Что_такое_Django">Что такое Django?</h2>
+Django — это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед. Он бесплатный и с открытым исходным кодом, имеет растущее и активное сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.
 
-<p>Django — это высокоуровневый Python веб-фреймворк, который позволяет быстро создавать безопасные и поддерживаемые веб-сайты. Созданный опытными разработчиками, Django берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего веб-приложения без необходимости изобретать велосипед. Он бесплатный и с открытым исходным кодом, имеет растущее и активное сообщество, отличную документацию и множество вариантов как бесплатной, так и платной поддержки.</p>
+Django помогает писать программное обеспечение, которое будет:
 
-<p>Django помогает писать программное обеспечение, которое будет:</p>
+- Полным
+  - : Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и [актуальную документацию](https://docs.djangoproject.com/en/3.0/).
+- Разносторонним
 
-<dl>
- <dt>Полным</dt>
- <dd>Django следует философии «Всё включено» и предоставляет почти всё, что разработчики могут захотеть сделать «из коробки». Поскольку всё, что вам нужно, является частью единого «продукта», всё это безупречно работает вместе, соответствует последовательным принципам проектирования и имеет обширную и <a href="https://docs.djangoproject.com/en/3.0/">актуальную документацию</a>.</dd>
- <dt>Разносторонним</dt>
- <dd><p>Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!</p>
- <p>Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.</p></dd>
- <dt>Безопасным</dt>
- <dd><p>Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.</p>
- <p><em>Хэш пароля </em>—<em> это значение фиксированной длины, созданное путём обработки пароля через <a href="https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F">криптографическую хэш-функцию</a>. Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.</em></p>
- <p>Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. <a href="/ru/docs/Learn/Server-side/First_steps/%D0%92%D0%B5%D0%B1_%D0%91%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D1%8C">Website security</a> для получения дополнительной информации об этих атаках).</p></dd>
- <dt>Масштабируемым</dt>
- <dd>Django использует компонентную “<a href="https://en.wikipedia.org/wiki/Shared_nothing_architecture">shared-nothing</a>” архитектуру (каждая её часть  независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кеширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).</dd>
- <dt>Удобным в сопровождении</dt>
- <dd>Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нём используется принцип «Don't Repeat Yourself» (DRY, «не повторяйся»), поэтому нет ненужного дублирования, что сокращает объём кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном <a href="https://developer.mozilla.org/en-US/docs/Glossary/MVC">Model View Controller (MVC)</a>).</dd>
- <dt>Переносным</dt>
- <dd>Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определённую инфраструктуру и документацию для размещения сайтов Django.</dd>
-</dl>
+  - : Django может быть (и был) использован для создания практически любого типа веб-сайтов — от систем управления контентом и wiki до социальных сетей и новостных сайтов. Он может работать с любой клиентской средой и может доставлять контент практически в любом формате (включая HTML, RSS-каналы, JSON, XML и т. д.). Сайт, который вы сейчас читаете, создан с помощью Django!
 
-<h2 id="Как_он_появился">Как он появился?</h2>
+    Хотя Django предоставляет решения практически для любой функциональности, которая вам может понадобиться (например, для нескольких популярных баз данных, шаблонизаторов и т. д.), внутренне он также может быть расширен сторонними компонентами, если это необходимо.
 
-<p>Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк, который превратился в проект "Django" с открытым исходным кодом в июле 2005 года.</p>
+- Безопасным
 
-<p>Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кеширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).</p>
+  - : Django помогает разработчикам избежать многих распространённых ошибок безопасности, предоставляя фреймворк, разработанный чтобы «делать правильные вещи» для автоматической защиты сайта. Например, Django предоставляет безопасный способ управления учётными записями пользователей и паролями, избегая распространённых ошибок, таких как размещение информации о сеансе в файлы cookie, где она уязвима (вместо этого файлы cookie содержат только ключ, а фактические данные хранятся в базе данных) или непосредственное хранение паролей вместо хэша пароля.
 
-<div class="note">
-<p><strong>Примечание</strong>: Ознакомьтесь с <a href="https://docs.djangoproject.com/en/3.1/releases/">примечаниями к версии</a> на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.</p>
-</div>
+    _Хэш пароля_ — _это значение фиксированной длины, созданное путём обработки пароля через [криптографическую хэш-функцию](https://ru.wikipedia.org/wiki/%D0%9A%D1%80%D0%B8%D0%BF%D1%82%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B0%D1%8F_%D1%85%D0%B5%D1%88-%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D1%8F) Django может проверить правильность введённого пароля, пропустив его через хэш-функцию и сравнив вывод с сохранённым значением хэша. Благодаря «одностороннему» характеру функции, даже если сохранённое хэш-значение скомпрометировано, злоумышленнику будет сложно определить исходный пароль.\_
 
-<p>Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.</p>
+    Django, по умолчанию, обеспечивает защиту от многих уязвимостей, включая SQL-инъекцию, межсайтовый скриптинг, подделку межсайтовых запросов и кликджекинг (см. [Website security](/ru/docs/Learn/Server-side/First_steps/%D0%92%D0%B5%D0%B1_%D0%91%D0%B5%D0%B7%D0%BE%D0%BF%D0%B0%D1%81%D0%BD%D0%BE%D1%81%D1%82%D1%8C) для получения дополнительной информации об этих атаках).
 
-<h2 id="Насколько_популярен_Django">Насколько популярен Django?</h2>
+- Масштабируемым
+  - : Django использует компонентную “[shared-nothing](https://en.wikipedia.org/wiki/Shared_nothing_architecture)” архитектуру (каждая её часть независима от других и, следовательно, может быть заменена или изменена, если это необходимо). Чёткое разделение частей означает, что Django может масштабироваться при увеличении трафика, путём добавления оборудования на любом уровне: серверы кеширования, серверы баз данных или серверы приложений. Одни из самых загруженных сайтов успешно масштабировали Django (например, Instagram и Disqus, если назвать только два из них).
+- Удобным в сопровождении
+  - : Код Django написан с использованием принципов и шаблонов проектирования, которые поощряют создание поддерживаемого и повторно используемого кода. В частности, в нём используется принцип «Don't Repeat Yourself» (DRY, «не повторяйся»), поэтому нет ненужного дублирования, что сокращает объём кода. Django также способствует группированию связанных функциональных возможностей в повторно используемые «приложения» и, на более низком уровне, группирует связанный код в модули (в соответствии с шаблоном [Model View Controller (MVC)](/ru/docs/Glossary/MVC)).
+- Переносным
+  - : Django написан на Python, который работает на многих платформах. Это означает, что вы не привязаны к какой-либо конкретной серверной платформе и можете запускать приложения на многих версиях Linux, Windows и Mac OS X. Кроме того, Django хорошо поддерживается многими веб-хостингами, которые часто предоставляют определённую инфраструктуру и документацию для размещения сайтов Django.
 
-<p>Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты наподобие <a href="http://hotframeworks.com/">Hot Framework</a> и пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос — «достаточно ли Django популярен», чтобы избежать проблем непопулярных платформ. Продолжает ли он развиваться? Можете ли вы получить помощь, если вам нужно? Найдёте ли вы оплачиваемую работу, если изучите Django?</p>
+## Как он появился?
 
-<p>Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно ответить: да, Django — популярный фреймворк!</p>
+Django был разработан в период с 2003 по 2005 год командой, которая занималась созданием и обслуживанием газетных веб-сайтов. После создания нескольких сайтов, команда начала повторно использовать множество общего кода и шаблонов проектирования. Этот общий код эволюционировал в веб-фреймворк, который превратился в проект "Django" с открытым исходным кодом в июле 2005 года.
 
-<p>Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest и Open Stack (источник: <a href="https://www.djangoproject.com/start/overview/">обзорная страница Django</a>).</p>
+Django продолжает расти и улучшаться с момента его первого релиза (1.0) в сентябре 2008 года до недавно выпущенной версии 3.1 (2020). В каждой версии добавлены новые функциональные возможности и исправлены ошибки, начиная от поддержки новых типов баз данных, шаблонизаторов и кеширования, до добавления «общих» функций просмотра и классов (уменьшающих объём кода, который разработчики должны писать для ряда программных задач).
 
-<h2 id="Является_ли_Django_гибким">Является ли Django гибким?</h2>
+> **Примечание:** Ознакомьтесь с [примечаниями к версии](https://docs.djangoproject.com/en/3.1/releases/) на сайте Django, чтобы увидеть что изменилось в последних версиях и как много работы было проделано, чтобы улучшить Django.
 
-<p>Веб-фреймворки часто можно поделить на "гибкие" и "негибкие".</p>
+Django — это процветающий совместный проект с открытым исходным кодом, в котором заняты многие тысячи пользователей и участников. Несмотря на то, что у него всё ещё есть некоторые особенности, которые отражают его происхождение, Django превратился в универсальный фреймворк, способный разрабатывать веб-сайты любого типа.
 
-<p>Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в <em>определённой области</em> (решение проблем определённого типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.</p>
+## Насколько популярен Django?
 
-<p>Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счёт того, что вам нужно самим найти эти компоненты.</p>
+Нет никаких доступных и окончательных оценок популярности серверных фреймворков (хотя сайты наподобие [Hot Framework](http://hotframeworks.com/) и пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос — «достаточно ли Django популярен», чтобы избежать проблем непопулярных платформ. Продолжает ли он развиваться? Можете ли вы получить помощь, если вам нужно? Найдёте ли вы оплачиваемую работу, если изучите Django?
 
-<p>Django «умеренно гибкий» и, следовательно, обеспечивает «лучшее из обоих миров». Он предоставляет набор компонентов для обработки большинства задач веб-разработки и один (или два) предпочтительных способа их использования. Однако такая архитектура Django означает, что вы обычно можете выбирать из нескольких различных опций или при необходимости добавлять поддержку для совершенно новых.</p>
+Основываясь на количестве крупных сайтов, которые используют Django, количестве участников и количестве людей, предоставляющих как бесплатную, так и платную поддержку, можно ответить: да, Django — популярный фреймворк!
 
-<h2 id="Как_выглядит_код_Django">Как выглядит код Django?</h2>
+Django используют такие крупные сайты, как Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest и Open Stack (источник: [обзорная страница Django](https://www.djangoproject.com/start/overview/)).
 
-<p>На традиционном информационном веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в <code>POST</code> или <code>GET</code> запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.</p>
+## Является ли Django гибким?
 
-<p>Веб-приложения, написанные на Django, обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:</p>
+Веб-фреймворки часто можно поделить на "гибкие" и "негибкие".
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/13931/basic-django.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
+Негибкие - это те, у которых есть "правильный путь" для решения какой-либо конкретной задачи. Они часто поддерживают быстрое развёртывание в _определённой области_ (решение проблем определённого типа), потому что правильный способ сделать что-либо обычно хорошо понимается и хорошо документируется. Однако они могут быть менее гибкими при решении проблем за пределами их основной сферы и, как правило, предлагают меньше вариантов того, какие компоненты и подходы они могут использовать.
 
-<ul>
- <li><strong>URLs: </strong>Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-маршрутизатор используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. Кроме того, URL-маршрутизатор может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию отображения (view) в виде аргументов.</li>
- <li><strong>View:</strong> View (англ. «отображение») — это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. Функция view имеет доступ к данным, необходимым для удовлетворения запросов, и делегирует ответы в шаблоны через модели.</li>
- <li><strong>Models:</strong> Модели представляют собой объекты Python, которые определяют структуру данных приложения и предоставляют механизмы для управления (добавления, изменения, удаления) и выполнения запросов в базу данных.</li>
- <li><strong>Templates:</strong> Template (англ. «шаблон») — это текстовый файл, определяющий структуру или разметку страницы (например HTML-страницы), с полями для подстановки, которые используются для вывода актуального содержимого. <em>View</em> может динамически создавать HTML-страницы, используя HTML-шаблоны и заполняя их данными из модели (<em>model).</em> Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.</li>
-</ul>
+Напротив, у гибких фреймворков гораздо меньше ограничений на лучший способ склеивания компонентов для достижения цели или даже того, какие компоненты следует использовать. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, хотя и за счёт того, что вам нужно самим найти эти компоненты.
 
-<div class="note">
-<p><strong>Примечание</strong>: Django реализует уровневую архитектуру "Model View Template (MVT)". Она имеет много общего с более известной архитектурой <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">Model View Controller</a>. </p>
-</div>
+Django «умеренно гибкий» и, следовательно, обеспечивает «лучшее из обоих миров». Он предоставляет набор компонентов для обработки большинства задач веб-разработки и один (или два) предпочтительных способа их использования. Однако такая архитектура Django означает, что вы обычно можете выбирать из нескольких различных опций или при необходимости добавлять поддержку для совершенно новых.
 
-<ul>
-</ul>
+## Как выглядит код Django?
 
-<p>Следующие разделы дадут вам понимание того, как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика). </p>
+На традиционном информационном веб-сайте веб-приложение ожидает HTTP-запросы от веб-браузера (или другого клиента). Когда запрос получен, приложение разрабатывает то, что необходимо на основе URL-адреса и, возможно, данных в `POST` или `GET` запросах. В зависимости от того, что требуется, далее он может читать или записывать информацию из базы данных или выполнять другие задачи, необходимые для удовлетворения запроса. Затем приложение вернёт ответ веб-браузеру, часто динамически создавая HTML-страницу для отображения в браузере, вставляя полученные данные в HTML-шаблон.
 
-<h3 id="Отправка_запроса_в_правильное_view_urls.py">Отправка запроса в правильное view (urls.py)</h3>
+Веб-приложения, написанные на Django, обычно группируют код, который обрабатывает каждый из этих шагов, в отдельные файлы:
 
-<p>Сопоставитель URL-адресов обычно содержится в файле <strong>urls.py</strong>. В примере ниже сопоставитель (<code>urlpatterns</code>) определяет список сопоставлений между<em>маршрутами </em>(определёнными URL-<em>шаблонами</em>) и соответствующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.</p>
+![](https://mdn.mozillademos.org/files/13931/basic-django.png)
 
-<pre>urlpatterns = [
-    <strong>path('admin/', admin.site.urls),
-    </strong>path('book/&lt;int:id&gt;/', views.book_detail, name='book_detail'),
+- **URLs:** Хотя можно обрабатывать запросы с каждого URL-адреса с помощью одной функции, гораздо удобнее писать отдельную функцию для обработки каждого ресурса. URL-маршрутизатор используется для перенаправления HTTP-запросов в соответствующее представление на основе URL-адреса запроса. Кроме того, URL-маршрутизатор может извлекать данные из URL-адреса в соответствии с заданным шаблоном и передавать их в соответствующую функцию отображения (view) в виде аргументов.
+- **View:** View (англ. «отображение») — это функция обработчика запросов, которая получает HTTP-запросы и возвращает ответы. Функция view имеет доступ к данным, необходимым для удовлетворения запросов, и делегирует ответы в шаблоны через модели.
+- **Models:** Модели представляют собой объекты Python, которые определяют структуру данных приложения и предоставляют механизмы для управления (добавления, изменения, удаления) и выполнения запросов в базу данных.
+- **Templates:** Template (англ. «шаблон») — это текстовый файл, определяющий структуру или разметку страницы (например HTML-страницы), с полями для подстановки, которые используются для вывода актуального содержимого. _View_ может динамически создавать HTML-страницы, используя HTML-шаблоны и заполняя их данными из модели (_model)._ Шаблон может быть использован для определения структуры файлов любых типов, не обязательно HTML.
+
+> **Примечание:** Django реализует уровневую архитектуру "Model View Template (MVT)". Она имеет много общего с более известной архитектурой [Model View Controller](/ru/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture).
+
+Следующие разделы дадут вам понимание того, как выглядят основные части Django (мы их изучим более детально чуть позже на курсе, когда будет настраивать окружение разработчика).
+
+### Отправка запроса в правильное view (urls.py)
+
+Сопоставитель URL-адресов обычно содержится в файле **urls.py**. В примере ниже сопоставитель (`urlpatterns`) определяет список сопоставлений между*маршрутами* (определёнными URL-_шаблонами_) и соответствующими функциями отображения (view). Если получен HTTP-запрос, который имеет URL-адрес, соответствующий определённому шаблону, то затем будет вызвана связанная функция отображения (view) и передана в запрос.
+
+```
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('book/<int:id>/', views.book_detail, name='book_detail'),
     path('catalog/', include('catalog.urls')),
     re_path(r'^([0-9]+)/$', views.best),
-]</pre>
+]
+```
 
-<p>Объект <code>urlpatterns</code> является списком функций <code>path()</code> и/или <code>re_path()</code> (в Python списки определяются с помощью квадратных скобок, внутри которых элементы разделены запятыми и могут содержать <a href="https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples">необязательную завершающую запятую</a>. Например: <code>[item1, item2, item3,]</code>).</p>
+Объект `urlpatterns` является списком функций `path()` и/или `re_path()` (в Python списки определяются с помощью квадратных скобок, внутри которых элементы разделены запятыми и могут содержать [необязательную завершающую запятую](https://docs.python.org/2/faq/design.html#why-does-python-allow-commas-at-the-end-of-lists-and-tuples). Например: `[item1, item2, item3,]`).
 
-<p>Первый аргумент в обоих методах - маршрут (шаблон), который будет сопоставлен. В методе <code>path()</code> угловые скобки используются для определения частей URL-адреса, которые будут захвачены и переданы в функцию отображения (view) в качестве именованных аргументов. Функция <code>re_path()</code> использует гибкий подход к сопоставлению с шаблоном, известный как регулярное выражение. Мы поговорим об этом в следующей статье!</p>
+Первый аргумент в обоих методах - маршрут (шаблон), который будет сопоставлен. В методе `path()` угловые скобки используются для определения частей URL-адреса, которые будут захвачены и переданы в функцию отображения (view) в качестве именованных аргументов. Функция `re_path()` использует гибкий подход к сопоставлению с шаблоном, известный как регулярное выражение. Мы поговорим об этом в следующей статье!
 
-<p>Второй аргумент — это ещё одна функция, которая будет вызываться при сопоставлении шаблона. Обозначение <code>views.book_detail</code> указывает, что функция называется <code>book_detail()</code> и может быть обнаружена в модуле с именем <code>views</code> (т.е. внутри файла с именем <code>views.py</code>).</p>
+Второй аргумент — это ещё одна функция, которая будет вызываться при сопоставлении шаблона. Обозначение `views.book_detail` указывает, что функция называется `book_detail()` и может быть обнаружена в модуле с именем `views` (т.е. внутри файла с именем `views.py`).
 
-<h3 id="Обработка_запроса_views.py">Обработка запроса (views.py)</h3>
+### Обработка запроса (views.py)
 
-<p>Отображения (views) — это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. Между этим они используют другие ресурсы фреймворка для доступа к базам данных, шаблонам визуализации и т. д.  </p>
+Отображения (views) — это сердце веб-приложения, принимающего HTTP-запросы от веб-клиентов и возвращающего HTTP-ответы. Между этим они используют другие ресурсы фреймворка для доступа к базам данных, шаблонам визуализации и т. д.
 
-<p>В приведённом ниже примере показана минимальная функция представления <code>index()</code>, которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект <code>HttpRequest</code> в качестве параметра (<code>request</code>) и возвращает объект <code>HttpResponse</code>. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.</p>
+В приведённом ниже примере показана минимальная функция представления `index()`, которая могла быть вызвана нашим сопоставителем URL-адресов в предыдущем разделе. Как и все функции отображения (view), она получает объект `HttpRequest` в качестве параметра (`request`) и возвращает объект `HttpResponse`. В этом случае мы ничего не делаем с запросом, и наш ответ просто возвращает жёстко запрограммированную строку. Мы покажем вам запрос, который делает что-то более интересное в следующем разделе.
 
-<pre class="brush: python">## filename: views.py (Django view functions)
+```python
+## filename: views.py (Django view functions)
 
 from django.http import HttpResponse
 
@@ -140,29 +128,23 @@ def index(request):
     # Выполнить операции, используя информацию из запроса.
     # Вернуть HttpResponse
     return HttpResponse('Hello from Django!')
-</pre>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Немного Python:</p>
+> **Примечание:** Немного Python:
+>
+> - [Модули Python](https://docs.python.org/3/tutorial/modules.html) это библиотеки функций, сохранённые в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект `HttpResponse` из модуля `django.http` чтобы использовать его в нашем отображении (view): `from django.http import HttpResponse` . Также есть другие способы импортирования некоторых или всех объектов модуля.
+> - Функции объявляются с помощью ключевого слова `def`, как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы. Отступы важны, так как они определяют, какие строки кода находятся внутри конкретного блока (обязательные отступы — это ключевая особенность Python и одна из причин, почему код на Python так легко читать).
 
-<ul>
- <li><a href="https://docs.python.org/3/tutorial/modules.html">Модули Python</a> это библиотеки функций, сохранённые в различных файлах, которые мы можем использовать в нашем коде. Здесь мы импортируем только объект <code>HttpResponse</code> из модуля <code>django.http</code> чтобы использовать его в нашем отображении (view): <code>from django.http import HttpResponse</code> . Также есть другие способы импортирования некоторых или всех объектов модуля.</li>
- <li>Функции объявляются с помощью ключевого слова <code>def</code>, как показано выше, с именованными параметрами, перечисленными в скобках после имени функции; строка завершается двоеточием. Заметьте, что следующие строки содержат отступы.  Отступы важны, так как они определяют, какие строки кода находятся внутри конкретного блока (обязательные отступы — это ключевая особенность Python и одна из причин, почему код на Python так легко читать).</li>
-</ul>
-</div>
+Отображения (view) обычно содержатся в файле **views.py**.
 
-<ul>
-</ul>
+### Определение данных модели (models.py)
 
-<p>Отображения (view) обычно содержатся в файле <strong>views.py</strong>.</p>
+Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращаться к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.
 
-<h3 id="Определение_данных_модели_models.py">Определение данных модели (models.py)</h3>
+В приведённом ниже фрагменте кода показана очень простая модель Django для объекта `Team`. Класс `Team` наследуется от класса `models.Model`. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. `Team_level` может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.
 
-<p>Веб-приложения Django обрабатывают и запрашивают данные через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от используемой базы данных — ваши модели будут работать в любой из них. После того как вы выбрали базу данных, которую хотите использовать, вам не нужно напрямую обращаться к ней — вы просто пишете свою структуру модели и другой код, а Django выполняет всю «грязную работу» по обращению к базе данных за вас.</p>
-
-<p>В приведённом ниже фрагменте кода показана очень простая модель Django для объекта <code>Team</code>. Класс <code>Team</code> наследуется от класса <code>models.Model</code>. Он определяет имя команды и командный уровень в качестве полей символов и задаёт максимальное количество символов, которые могут быть сохранены для каждой записи. <code>Team_level</code> может быть одним из нескольких значений, поэтому мы определяем его как поле выбора и предоставляем сопоставление между отображаемыми вариантами и хранимыми данными вместе со значением по умолчанию.</p>
-
-<pre class="brush: python"># filename: models.py
+```python
+# filename: models.py
 
 from django.db import models
 
@@ -176,83 +158,77 @@ class Team(models.Model):
         ...  #список других командных уровней
     )
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-</pre>
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: Немного Python:</p>
+> **Примечание:** Немного Python:
+>
+> - Python поддерживает «объектно-ориентированное программирование», то есть стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя использовать одинаковое поведение между связанными объектами. В Python мы используем ключевое слово `class`, чтобы определить «скелет» для объекта. Мы можем создать несколько конкретных _экземпляров_ типа объекта на основе модели в классе.
+>
+>   Так, например, мы имеем класс `Team`, который происходит от класса `Model`. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.
 
-<ul>
- <li>Python поддерживает «объектно-ориентированное программирование», то есть стиль программирования, в котором мы организуем наш код в объекты, которые включают связанные данные и функции для работы с этими данными. Объекты также могут наследовать / расширять / выводить из других объектов, позволяя использовать одинаковое поведение между связанными объектами. В Python мы используем ключевое слово <code>class</code>, чтобы определить «скелет» для объекта. Мы можем создать несколько конкретных <em>экземпляров</em> типа объекта на основе модели в классе.<br>
-  <br>
-  Так, например, мы имеем класс <code>Team</code>, который происходит от класса <code>Model</code>. Это означает, что эта модель будет содержать все методы модели, но мы также можем дать ей специализированные возможности. В нашей модели мы определяем поля нашей базы данных, в которой будем хранить данные, присваивая им конкретные имена. Django использует эти определения, включая имена полей, для создания основной базы данных.</li>
-</ul>
-</div>
+### Запросы данных (views.py)
 
-<h3 id="Запросы_данных_views.py">Запросы данных (views.py)</h3>
+Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).
 
-<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Поиск может осуществляться по нескольким полям одновременно, используя различные критерии (такие как exact («точный»), case-insensitive («без учёта регистра»), greater than («больше чем») и т. д.), и может поддерживать сложные выражения (например, вы можете указать поиск в командах U11, у которых есть имя команды, начинающееся с «Fr» или заканчивается на «al»).</p>
+Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывает, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле `team_level` в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции `filter()` в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчёркиванием: **team_level\_\_exact**).
 
-<p>Фрагмент кода показывает функцию view (обработчик ресурсов) для отображения всех команд U09. Выделенная жирным строка показывает, как мы можем использовать модель API-запросов для того, чтобы отфильтровать все записи, где поле <code>team_level</code> в точности содержит текст 'U09' (обратите внимание, как эти критерии передаются функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, разделённым двойным подчёркиванием: <strong>team_level__exact</strong>). </p>
-
-<pre class="brush: python">## filename: views.py
+```python
+## filename: views.py
 
 from django.shortcuts import render
 from .models import Team
 
 def index(request):
-    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    list_teams = Team.objects.filter(team_level__exact="U09")
     context = {'youngest_teams': list_teams}
     return render(request, '/best/index.html', context)
-</pre>
-
-<dl>
-</dl>
+```
 
-<p>Данная функция использует функцию <code>render()</code> для того, чтобы создать <code>HttpResponse</code>, который будет отправлен назад браузеру. Эта функция является <em>ярлыком</em>; она создаёт HTML-файл, комбинируя указанный HTML-шаблон и некоторые данные для вставки в шаблон (предоставляется в переменной с именем «<code>context</code>»). В следующем разделе мы  покажем как данные вставляются в шаблон для создания HTML-кода.</p>
+Данная функция использует функцию `render()` для того, чтобы создать `HttpResponse`, который будет отправлен назад браузеру. Эта функция является _ярлыком_; она создаёт HTML-файл, комбинируя указанный HTML-шаблон и некоторые данные для вставки в шаблон (предоставляется в переменной с именем «`context`»). В следующем разделе мы покажем как данные вставляются в шаблон для создания HTML-кода.
 
-<h3 id="Вывод_данных_HTML-шаблоны">Вывод данных (HTML-шаблоны)</h3>
+### Вывод данных (HTML-шаблоны)
 
-<p>Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут вставлены при генерировании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django «из коробки» поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).</p>
+Системы шаблонов позволяют указать структуру выходного документа, используя заполнители для данных, которые будут вставлены при генерировании страницы. Шаблоны часто используются для создания HTML, но также могут создавать другие типы документов. Django «из коробки» поддерживает как собственную систему шаблонов, так и другую популярную библиотеку Python под названием Jinja2 (она также может быть использована для поддержки других систем, если это необходимо).
 
-<p>Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией  <code>render()</code> из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной <code>youngest_teams</code> (содержащейся в контекстной переменной внутри функции <code>render()</code> выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>. При каждом повторе шаблон отображает значение <code>team_name</code> каждой команды в элементе <code>{{htmlelement("li")}}</code>.</p>
+Фрагмент кода показывает, как может выглядеть HTML-шаблон, вызванный функцией `render()` из предыдущего раздела. Этот шаблон был написан с предположением, что во время отрисовки он будет иметь доступ к переменной списка, названной `youngest_teams` (содержащейся в контекстной переменной внутри функции `render()` выше). Внутри скелета HTML мы имеем выражение, которое сначала проверяет, существует ли переменная `youngest_teams`, а затем повторяет её в цикле `for`. При каждом повторе шаблон отображает значение `team_name` каждой команды в элементе `{{htmlelement("li")}}`.
 
-<pre>## filename: best/templates/best/index.html
+```
+## filename: best/templates/best/index.html
 
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;head&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;title&gt;Home page&lt;/title&gt;
-&lt;/head&gt;
-&lt;body&gt;
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Home page</title>
+</head>
+<body>
   {% if youngest_teams %}
-    &lt;ul&gt;
+    <ul>
       {% for team in youngest_teams %}
-        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+        <li>\{\{ team.team_name \}\}</li>
       {% endfor %}
-    &lt;/ul&gt;
+    </ul>
   {% else %}
-    &lt;p&gt;No teams are available.&lt;/p&gt;
+    <p>No teams are available.</p>
   {% endif %}
-&lt;/body&gt;
-&lt;/html&gt;</pre>
+</body>
+</html>
+```
 
-<h2 id="Что_ещё_можно_сделать">Что ещё можно сделать?</h2>
+## Что ещё можно сделать?
 
-<p>В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL-адресов, отображение, модели и шаблоны. Также Django предоставляет несколько других вещей:</p>
+В предыдущих разделах показаны основные особенности, которые вы будете использовать почти в каждом веб-приложении: сопоставление URL-адресов, отображение, модели и шаблоны. Также Django предоставляет несколько других вещей:
 
-<ul>
- <li><strong>Формы</strong>: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.</li>
- <li><strong>Аутентификация пользователя и разрешения</strong>: Django включает надёжную систему аутентификации и авторизации пользователей, которая была построена с учётом безопасности.</li>
- <li><strong>Кеширование:</strong> Создание динамического контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого. Django обеспечивает гибкое кеширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.</li>
- <li><strong>Админ-панель: </strong>Административная панель в Django включена по умолчанию при создании приложения с использованием основного каркаса. Это упрощает управление админкой администраторам сайта для создания, редактирования и просмотра любых данных на вашем сайте.</li>
- <li><strong>Сериализация данных (преобразование в последовательную форму)</strong>: Django упрощает сериализацию и обслуживание ваших данных в таких форматах как XML или JSON. Это может быть полезно при создании веб-сервисов (веб-сайтов, которые исключительно служат для использования данных другими приложениями или сайтами и сами ничего не отображают) или при создании веб-сайта, на котором клиентский код обрабатывает весь рендеринг данных.</li>
-</ul>
+- **Формы**: HTML-формы используются для сбора пользовательских данных для обработки на сервере. Django упрощает создание, проверку и обработку формы.
+- **Аутентификация пользователя и разрешения**: Django включает надёжную систему аутентификации и авторизации пользователей, которая была построена с учётом безопасности.
+- **Кеширование:** Создание динамического контента намного более интенсивно (и медленнее), чем обслуживание статического содержимого. Django обеспечивает гибкое кеширование, чтобы вы могли хранить всю или часть отображаемой страницы, для того, чтобы она не вызывалась повторно, за исключением случаев, когда это необходимо.
+- **Админ-панель:** Административная панель в Django включена по умолчанию при создании приложения с использованием основного каркаса. Это упрощает управление админкой администраторам сайта для создания, редактирования и просмотра любых данных на вашем сайте.
+- **Сериализация данных (преобразование в последовательную форму)**: Django упрощает сериализацию и обслуживание ваших данных в таких форматах как XML или JSON. Это может быть полезно при создании веб-сервисов (веб-сайтов, которые исключительно служат для использования данных другими приложениями или сайтами и сами ничего не отображают) или при создании веб-сайта, на котором клиентский код обрабатывает весь рендеринг данных.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Поздравляем, вы завершили первый шаг в своём путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.</p>
+Поздравляем, вы завершили первый шаг в своём путешествии по Django! Теперь вы должны понимать основные преимущества Django, немного его истории, и примерно как может выглядеть каждая из основных частей приложения Django. Вы должны также изучить несколько вещей о языке программирования Python, включая синтаксис списков, функций и классов.
 
-<p>Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.</p>
+Вы уже видели код на Django выше, но в отличие от клиентского кода вам нужно настроить среду разработки для её запуска. Это наш следующий шаг.
 
-<div>{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}</div>
+{{NextMenu("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/models/index.md b/files/ru/learn/server-side/django/models/index.md
index 35996f69d8e4e2..8ab086d1fb3150 100644
--- a/files/ru/learn/server-side/django/models/index.md
+++ b/files/ru/learn/server-side/django/models/index.md
@@ -8,62 +8,50 @@ tags:
   - туториал
 translation_of: Learn/Server-side/Django/Models
 ---
-<div>             {{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</div>
+В этой статье показано, как определить модели для [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) сайта. Она объясняет, что такое модель, как она объявляется, и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.
 
-<p class="summary">В этой статье показано, как определить модели для <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> сайта. Она объясняет, что такое модель, как она объявляется, и некоторые из основных типов полей. В ней также кратко показаны некоторые из основных способов доступа к данным модели.</p>
+| Предпосылки | [Django Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Django/skeleton_website). |
+| ----------- | ---------------------------------------------------------------------------------------------------------- |
+| Задача:     | Научиться проектировать и создавать свои собственные модели, выбирая подходящие поля.                      |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предпосылки</th>
-   <td><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научиться проектировать и создавать свои собственные модели, выбирая подходящие поля.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Веб-приложения Django получают доступ и управляют данными через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от основной базы данных - вы можете выбрать один из нескольких компонентов вашей настройки проекта. После того, как вы выбрали какую базу данных хотите использовать, вам не нужно напрямую работать с ней - вы просто пишете свою структуру модели и код, а Django делает всю грязную работу, связанную с базой данных за вас.
 
-<p>Веб-приложения Django получают доступ и управляют данными через объекты Python, называемые моделями. Модели определяют структуру хранимых данных, включая типы полей и, возможно, их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст меток для форм и т. д. Определение модели не зависит от основной базы данных - вы можете выбрать один из нескольких компонентов вашей настройки проекта. После того, как вы выбрали какую базу данных хотите использовать, вам не нужно напрямую работать с ней - вы просто пишете свою структуру модели и код, а Django делает всю грязную работу, связанную с базой данных за вас.</p>
+В этом учебнике показано, как определить и получить доступ к моделям на примере [LocalLibrary website](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website).
 
-<p>В этом учебнике показано, как определить и получить доступ к моделям на примере <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary website</a>.</p>
+## Проектирование моделей LocalLibrary
 
-<h2 id="Проектирование_моделей_LocalLibrary">Проектирование моделей LocalLibrary</h2>
+Перед тем, как вы начнёте программировать модели, стоит потратить несколько минут, чтобы подумать о том, какие данные нам нужно хранить, и о взаимоотношениях между разными объектами.
 
-<p>Перед тем, как вы начнёте программировать модели, стоит потратить несколько минут, чтобы подумать о том, какие данные нам нужно хранить, и о взаимоотношениях между разными объектами.</p>
+Мы знаем, что нам нужно хранить информацию о книгах (название, резюме, автор, язык, на котором написана книга, категория, ISBN) и что у нас может быть несколько доступных экземпляров (с уникальным глобальным идентификатором, статусом доступности и т. Д.). Нам может потребоваться хранить больше информации об авторе, чем просто их имя, и могут быть несколько авторов с одинаковыми или похожими именами. Мы хотим иметь возможность сортировать информацию на основе названия книги, автора, письменного языка и категории.
 
-<p>Мы знаем, что нам нужно хранить информацию о книгах (название, резюме, автор, язык, на котором написана книга, категория, ISBN) и что у нас может быть несколько доступных экземпляров (с уникальным глобальным идентификатором, статусом доступности и т. Д.). Нам может потребоваться хранить больше информации об авторе, чем просто их имя, и могут быть несколько авторов с одинаковыми или похожими именами. Мы хотим иметь возможность сортировать информацию на основе названия книги, автора, письменного языка и категории.</p>
+При проектировании ваших моделей имеет смысл иметь отдельные модели для каждого «объекта» (группа связанной информации). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.
 
-<p>При проектировании ваших моделей имеет смысл иметь отдельные модели для каждого «объекта» (группа связанной информации). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.</p>
+Вы также можете использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте - это рекомендуется, когда все варианты неизвестны заранее или могут измениться. Очевидные кандидаты на модели в этом случае включают жанр книги (например, «Научная фантастика», «Французская поэзия» и т. д.) И язык (английский, французский, японский).
 
-<p>Вы также можете использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте - это рекомендуется, когда все варианты неизвестны заранее или могут измениться. Очевидные кандидаты на модели в этом случае включают жанр книги (например, «Научная фантастика», «Французская поэзия» и т. д.) И язык (английский, французский, японский).</p>
+Как только мы определились с нашими моделями и полями, нам нужно подумать об отношениях. Django позволяет вам определять отношения, как один к одному (`OneToOneField`), один ко многим (`ForeignKey`) и многие ко многим (`ManyToManyField`).
 
-<p>Как только мы определились с нашими моделями и полями, нам нужно подумать об отношениях. Django позволяет вам определять отношения, как один к одному (<code>OneToOneField</code>), один ко многим (<code>ForeignKey</code>) и многие ко многим (<code>ManyToManyField</code>).</p>
+Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жёстко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.
 
-<p>Диаграмма ассоциации UML, приведённая ниже показывает модели, которые мы определили в этом случае (в виде блоков). Как и выше, мы создали модели для книги (общие сведения о книге), экземпляр книги (статус конкретных физических копий книги, доступных в системе) и автора.Мы также решили создать модель для жанра, чтобы можно было создавать / выбирать значения через интерфейс администратора. Мы решили не иметь модель для BookInstance: status - мы жёстко закодировали значения (LOAN_STATUS), потому что мы не ожидаем их изменения. В каждом из полей вы можете увидеть имя модели, имена и типы полей, а также методы и их типы возврата.</p>
+На диаграмме также показаны зависимости между моделями, включая их _множители_. Множители представляют собой числа на диаграмме, показывающие минимум и максимум единиц каждой модели, которые могут присутствовать в этой связи. Например, соединительная линия между ящиками показывает, что книга и жанр связаны между собой. Цифры, близкие к модели жанра, показывают, что у книги может быть один или несколько жанров (сколько угодно), а числа на другом конце строки рядом с моделью книги показывают, что у жанра может быть ноль или более связанных книг.
 
-<p>На диаграмме также показаны зависимости между моделями, включая их <em>множители</em>. Множители представляют собой числа на диаграмме, показывающие минимум и максимум единиц каждой модели, которые могут присутствовать в этой связи. Например, соединительная линия между ящиками показывает, что книга и жанр связаны между собой. Цифры, близкие к модели жанра, показывают, что у книги может быть один или несколько жанров (сколько угодно), а числа на другом конце строки рядом с моделью книги показывают, что у жанра может быть ноль или более связанных книг.</p>
+![LocalLibrary Model UML - v3](https://mdn.mozillademos.org/files/15646/local_library_model_uml.png)
 
-<p><img alt="LocalLibrary Model UML - v3" src="https://mdn.mozillademos.org/files/15646/local_library_model_uml.png" style="height: 660px; width: 977px;"></p>
+> **Примечание:** Примечание. В следующем разделе приведён базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.
 
-<div class="note">
-<p>Примечание. В следующем разделе приведён базовый пример, поясняющий, как модели определяются и используются. Когда вы его прочитаете, подумайте, как мы построим каждую из моделей на диаграмме выше.</p>
-</div>
+## Модель для начинающих
 
-<h2 id="Модель_для_начинающих">Модель для начинающих</h2>
+В этом разделе представлен краткий обзор того, как определяется модель, и некоторые из наиболее важных полей и аргументы поля.
 
-<p>В этом разделе представлен краткий обзор того, как определяется модель, и некоторые из наиболее важных полей и аргументы поля.</p>
+### Определение модели
 
-<h3 id="Определение_модели">Определение модели</h3>
+Модели обычно определяются в приложении **models.py**. Они реализуются как подклассы `django.db.models.Model`, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная `MyModelName`:
 
-<p>Модели обычно определяются в приложении <strong>models.py</strong>. Они реализуются как подклассы <code>django.db.models.Model</code>, и могут включать поля, методы и метаданные. В приведённом ниже фрагменте кода показана «типичная» модель, названная <code>MyModelName</code>:</p>
-
-<pre>from django.db import models
+```
+from django.db import models
 
 class MyModelName(models.Model):
     """
@@ -89,181 +77,188 @@ class MyModelName(models.Model):
         """
         String for representing the MyModelName object (in Admin site etc.)
         """
-        return self.field_name</pre>
+        return self.field_name
+```
 
-<p>В следующих разделах мы подробно рассмотрим каждый элемент внутри модели:</p>
+В следующих разделах мы подробно рассмотрим каждый элемент внутри модели:
 
-<h4 id="Поля">Поля</h4>
+#### Поля
 
-<p>Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:</p>
+Модель может иметь произвольное количество полей любого типа - каждый представляет столбец данных, который мы хотим сохранить в одной из наших таблиц базы данных. Каждая запись (строка) базы данных будет состоять из одного значения каждого поля. Давайте рассмотрим приведённый выше пример:
 
-<pre class="brush: js">my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")</pre>
+```js
+my_field_name = models.CharField(max_length=20, help_text="Enter field documentation")
+```
 
-<p>Наш вышеприведённый пример имеет одно поле, называемое my_<code>field_name</code>, типа <code>models.CharField</code> — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определённых классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даём нашему полю два аргумента:</p>
+Наш вышеприведённый пример имеет одно поле, называемое my\_`field_name`, типа `models.CharField` — что означает, что это поле будет содержать строки буквенно-цифровых символов. Типы полей назначаются с использованием определённых классов, которые определяют тип записи, которая используется для хранения данных в базе данных, а также критерии проверки, которые должны использоваться, когда значения получены из формы HTML (то есть, что составляет действительное значение). Типы полей также могут принимать аргументы, которые дополнительно определяют, как поле хранится или может использоваться. В этом случае мы даём нашему полю два аргумента:
 
-<ul>
- <li><code>max_length=20</code> — Указывает, что максимальная длина значения в этом поле составляет 20 символов.</li>
- <li><code>help_text="Enter field documentation"</code> — предоставляет текстовую метку для отображения, чтобы помочь пользователям узнать, какое значение необходимо предоставить, когда это значение должно быть введено пользователем через HTML-форму.</li>
-</ul>
+- `max_length=20` — Указывает, что максимальная длина значения в этом поле составляет 20 символов.
+- `help_text="Enter field documentation"` — предоставляет текстовую метку для отображения, чтобы помочь пользователям узнать, какое значение необходимо предоставить, когда это значение должно быть введено пользователем через HTML-форму.
 
-<p>Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задаётся как аргумент (verbose_name), либо выводится путём заглавной буквы первой буквы имени переменной поля и замены любых символов подчёркивания пробелом (например, my_field_name будет иметь метку по умолчанию <em>My field name</em>).</p>
+Имя поля используется для обращения к нему в запросах и шаблонах. В полях также есть метка, которая задаётся как аргумент (verbose_name), либо выводится путём заглавной буквы первой буквы имени переменной поля и замены любых символов подчёркивания пробелом (например, my_field_name будет иметь метку по умолчанию _My field name_).
 
-<p>Порядок, в котором объявляются поля, будет влиять на их порядок по умолчанию, если модель отображается в форме (например, на сайте администратора), хотя это может быть переопределено.</p>
+Порядок, в котором объявляются поля, будет влиять на их порядок по умолчанию, если модель отображается в форме (например, на сайте администратора), хотя это может быть переопределено.
 
-<h5 id="Общие_аргументы_поля">Общие аргументы поля</h5>
+##### Общие аргументы поля
 
-<p>Следующие общие аргументы могут использоваться при объявлении многих / разных типов полей:</p>
+Следующие общие аргументы могут использоваться при объявлении многих / разных типов полей:
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text">help_text</a>: Предоставляет текстовую метку для HTML-форм (например, на сайте администратора), как описано выше.</li>
- <li><a href="https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name">verbose_name</a>: Удобочитаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#default">default</a>: Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создаётся новая запись.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#null">null</a>: Если True, Django будет хранить пустые значения как NULL в базе данных для полей, где это уместно (CharField вместо этого сохранит пустую строку). По умолчанию используется значение False.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#blank">blank</a>: Если True, поле может быть пустым в ваших формах. По умолчанию используется значение False, что означает, что проверка формы Django заставит вас ввести значение. Это часто используется с null = True, потому что если вы хотите разрешить пустые значения, вы также хотите, чтобы база данных могла представлять их соответствующим образом.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#choices">choices</a>: Группа вариантов для этого поля. Если это предусмотрено, по умолчанию соответствующий виджет формы будет полем выбора с этими вариантами вместо стандартного текстового поля.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#primary-key">primary_key</a>: Если True, задаёт текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.</li>
-</ul>
+- [help_text](https://docs.djangoproject.com/en/2.1/ref/models/fields/#help-text): Предоставляет текстовую метку для HTML-форм (например, на сайте администратора), как описано выше.
+- [verbose_name](https://docs.djangoproject.com/en/2.1/ref/models/fields/#verbose-name): Удобочитаемое имя для поля, используемого в поле метки. Если не указано, Django выведет по умолчанию подробное название от имени поля.
+- [default](https://docs.djangoproject.com/en/2.2/ref/models/fields/#default): Значение по умолчанию для поля. Это может быть значение или вызываемый объект, и в этом случае объект будет вызываться каждый раз, когда создаётся новая запись.
+- [null](https://docs.djangoproject.com/en/2.2/ref/models/fields/#null): Если True, Django будет хранить пустые значения как NULL в базе данных для полей, где это уместно (CharField вместо этого сохранит пустую строку). По умолчанию используется значение False.
+- [blank](https://docs.djangoproject.com/en/2.2/ref/models/fields/#blank): Если True, поле может быть пустым в ваших формах. По умолчанию используется значение False, что означает, что проверка формы Django заставит вас ввести значение. Это часто используется с null = True, потому что если вы хотите разрешить пустые значения, вы также хотите, чтобы база данных могла представлять их соответствующим образом.
+- [choices](https://docs.djangoproject.com/en/2.2/ref/models/fields/#choices): Группа вариантов для этого поля. Если это предусмотрено, по умолчанию соответствующий виджет формы будет полем выбора с этими вариантами вместо стандартного текстового поля.
+- [primary_key](https://docs.djangoproject.com/en/2.2/ref/models/fields/#primary-key): Если True, задаёт текущее поле в качестве первичного ключа для модели (первичный ключ - это специальный столбец базы данных, предназначенный для однозначной идентификации всех разных записей таблицы). Если в качестве первичного ключа не указано поле, Django автоматически добавит для этой цели поле.
 
-<p>Есть много других вариантов - вы можете просмотреть <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/">full list of field options here</a>.</p>
+Есть много других вариантов - вы можете просмотреть [full list of field options here](https://docs.djangoproject.com/en/2.2/ref/models/fields/).
 
-<h5 id="Общие_типы_полей">Общие типы полей</h5>
+##### Общие типы полей
 
-<p>Следующие общие аргументы могут использоваться при объявлении многих / разных типов полей:</p>
+Следующие общие аргументы могут использоваться при объявлении многих / разных типов полей:
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.CharField">CharField</a> Используется для определения строк фиксированной длины от короткой до средней. Вы должны указать max_length для хранения данных.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.TextField">TextField</a> используется для больших строк произвольной длины. Вы можете указать <code>max_length</code> для поля, но это используется только тогда, когда поле отображается в формах (оно не применяется на уровне базы данных).</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.IntegerField" title="django.db.models.IntegerField">IntegerField</a> это поле для хранения значений (целого числа) и для проверки введённых значений в виде целых чисел в формах.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateField">DateField</a> и <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateTimeField">DateTimeField</a> используются для хранения / представления дат и информации о дате / времени (как Python datetime.date и datetime.datetime, соответственно). Эти поля могут дополнительно объявлять (взаимоисключающие) параметры <code>auto_now=True</code> (для установки поля на текущую дату каждый раз, когда модель сохраняется), auto_now_add (только для установки даты, когда модель была впервые создана) и по умолчанию (чтобы установить дату по умолчанию, которую пользователь может переустановить).</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.EmailField">EmailField</a> используется для хранения и проверки адресов электронной почты.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.FileField">FileField</a> и <a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ImageField">ImageField</a> используются для загрузки файлов и изображений соответственно ( <code>ImageField</code> просто добавляет дополнительную проверку, что загруженный файл является изображением). Они имеют параметры для определения того, как и где хранятся загруженные файлы.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.AutoField">AutoField</a> - это особый тип IntegerField, который автоматически увеличивается. Первичный ключ этого типа автоматически добавляется в вашу модель, если вы явно не укажете его.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ForeignKey">ForeignKey</a> Используется для указания отношения «один ко многим» к другой модели базы данных (например, автомобиль имеет одного производителя, но производитель может делать много автомобилей). «Одна» сторона отношения - это модель, содержащая ключ.</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ManyToManyField">ManyToManyField</a> используется для определения отношения «многие ко многим» (например, книга может иметь несколько жанров, и каждый жанр может содержать несколько книг). В нашем приложении для библиотек мы будем использовать их аналогично ForeignKeys, но их можно использовать более сложными способами для описания отношений между группами. Они имеют параметр on_delete, чтобы определить, что происходит, когда связанная запись удаляется (например, значение <code>models.SET_NULL</code> просто установило бы значение NULL)</li>
-</ul>
+- [CharField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.CharField) Используется для определения строк фиксированной длины от короткой до средней. Вы должны указать max_length для хранения данных.
+- [TextField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.TextField) используется для больших строк произвольной длины. Вы можете указать `max_length` для поля, но это используется только тогда, когда поле отображается в формах (оно не применяется на уровне базы данных).
+- [IntegerField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.IntegerField "django.db.models.IntegerField") это поле для хранения значений (целого числа) и для проверки введённых значений в виде целых чисел в формах.
+- [DateField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateField) и [DateTimeField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.DateTimeField) используются для хранения / представления дат и информации о дате / времени (как Python datetime.date и datetime.datetime, соответственно). Эти поля могут дополнительно объявлять (взаимоисключающие) параметры `auto_now=True` (для установки поля на текущую дату каждый раз, когда модель сохраняется), auto_now_add (только для установки даты, когда модель была впервые создана) и по умолчанию (чтобы установить дату по умолчанию, которую пользователь может переустановить).
+- [EmailField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.EmailField) используется для хранения и проверки адресов электронной почты.
+- [FileField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.FileField) и [ImageField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ImageField) используются для загрузки файлов и изображений соответственно ( `ImageField` просто добавляет дополнительную проверку, что загруженный файл является изображением). Они имеют параметры для определения того, как и где хранятся загруженные файлы.
+- [AutoField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.AutoField) - это особый тип IntegerField, который автоматически увеличивается. Первичный ключ этого типа автоматически добавляется в вашу модель, если вы явно не укажете его.
+- [ForeignKey](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ForeignKey) Используется для указания отношения «один ко многим» к другой модели базы данных (например, автомобиль имеет одного производителя, но производитель может делать много автомобилей). «Одна» сторона отношения - это модель, содержащая ключ.
+- [ManyToManyField](https://docs.djangoproject.com/en/2.2/ref/models/fields/#django.db.models.ManyToManyField) используется для определения отношения «многие ко многим» (например, книга может иметь несколько жанров, и каждый жанр может содержать несколько книг). В нашем приложении для библиотек мы будем использовать их аналогично ForeignKeys, но их можно использовать более сложными способами для описания отношений между группами. Они имеют параметр on_delete, чтобы определить, что происходит, когда связанная запись удаляется (например, значение `models.SET_NULL` просто установило бы значение NULL)
 
-<p>Существует много других типов полей, включая поля для разных типов чисел (большие целые числа, малые целые числа, дробные), логические значения, URL-адреса, slugs, уникальные идентификаторы и другие «связанные с временем» сведения (продолжительность, время и т. д.). Вы можете просмотреть <a href="https://docs.djangoproject.com/en/1.10/ref/models/fields/#field-types">full list here</a>.</p>
+Существует много других типов полей, включая поля для разных типов чисел (большие целые числа, малые целые числа, дробные), логические значения, URL-адреса, slugs, уникальные идентификаторы и другие «связанные с временем» сведения (продолжительность, время и т. д.). Вы можете просмотреть [full list here](https://docs.djangoproject.com/en/1.10/ref/models/fields/#field-types).
 
-<h4 id="Метаданные">Метаданные</h4>
+#### Метаданные
 
-<p>Вы можете объявить метаданные на уровне модели для своей модели, объявив класс Meta, как показано на рисунке.</p>
+Вы можете объявить метаданные на уровне модели для своей модели, объявив класс Meta, как показано на рисунке.
 
-<pre class="brush: python">class Meta:
+```python
+class Meta:
     ordering = ["-my_field_name"]
-    ...</pre>
+    ...
+```
 
-<p>Одной из наиболее полезных функций этих метаданных является управление сортировка записей, возвращаемых при запросе типа модели. Вы можете сделать это, указав соответствия названия полей для сортировки, как показано выше. Порядок будет зависеть от типа поля (поля символов отсортированы в алфавитном порядке, а поля даты отсортированы в хронологическом порядке). Как показано выше, вы можете префикс имени поля минус-символом (-), чтобы изменить порядок сортировки.</p>
+Одной из наиболее полезных функций этих метаданных является управление сортировка записей, возвращаемых при запросе типа модели. Вы можете сделать это, указав соответствия названия полей для сортировки, как показано выше. Порядок будет зависеть от типа поля (поля символов отсортированы в алфавитном порядке, а поля даты отсортированы в хронологическом порядке). Как показано выше, вы можете префикс имени поля минус-символом (-), чтобы изменить порядок сортировки.
 
-<p>Например, если мы решили сортировать книги по умолчанию:</p>
+Например, если мы решили сортировать книги по умолчанию:
 
-<pre class="brush: python">ordering = ["title", "-pubdate"]</pre>
+```python
+ordering = ["title", "-pubdate"]
+```
 
-<p>Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.</p>
+Книги будут отсортированы по алфавиту по названию, от A-Z, а затем по дате публикации внутри каждого названия, от самого нового до самого старого.
 
-<p>Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:</p>
+Другим распространённым атрибутом является verbose_name, подробное имя для класса в единственной и множественной форме:
 
-<pre class="brush: python">verbose_name = "BetterName"</pre>
+```python
+verbose_name = "BetterName"
+```
 
-<p>Другие полезные атрибуты позволяют создавать и применять новые «разрешения доступа» для модели (разрешения по умолчанию применяются автоматически), разрешить упорядочение на основе другого поля или объявить, что класс является «абстрактным» (базовый класс, для которого вы не можете создавать записи, и вместо этого будет создан для создания других моделей). Многие другие параметры метаданных управляют тем, какая база данных должна использоваться для модели и как хранятся данные (это действительно полезно, если вам нужно сопоставить модель с существующей базой данных). Полный список опций метаданных доступен здесь: <a href="https://docs.djangoproject.com/en/2.2/ref/models/options/#model-meta-options">Model metadata options</a> (Django документация).</p>
+Другие полезные атрибуты позволяют создавать и применять новые «разрешения доступа» для модели (разрешения по умолчанию применяются автоматически), разрешить упорядочение на основе другого поля или объявить, что класс является «абстрактным» (базовый класс, для которого вы не можете создавать записи, и вместо этого будет создан для создания других моделей). Многие другие параметры метаданных управляют тем, какая база данных должна использоваться для модели и как хранятся данные (это действительно полезно, если вам нужно сопоставить модель с существующей базой данных). Полный список опций метаданных доступен здесь: [Model metadata options](https://docs.djangoproject.com/en/2.2/ref/models/options/#model-meta-options) (Django документация).
 
-<h4 id="Методы">Методы</h4>
+#### Методы
 
-<p>Модель также может иметь методы. Минимально в каждой модели вы должны определить стандартный метод класса для Python __str __ (), чтобы вернуть удобочитаемую строку для каждого объекта. Эта строка используется для представления отдельных записей на сайте администрирования (и в любом другом месте, где вам нужно обратиться к экземпляру модели). Часто это возвращает поле названия или имени из модели.</p>
+Модель также может иметь методы. Минимально в каждой модели вы должны определить стандартный метод класса для Python \_\_str \_\_ (), чтобы вернуть удобочитаемую строку для каждого объекта. Эта строка используется для представления отдельных записей на сайте администрирования (и в любом другом месте, где вам нужно обратиться к экземпляру модели). Часто это возвращает поле названия или имени из модели.
 
-<pre class="brush: python">def __str__(self):
-    return self.field_name</pre>
+```python
+def __str__(self):
+    return self.field_name
+```
 
-<p>Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.</p>
+Другим распространённым методом включения в модели Django является get_absolute_url (), который возвращает URL-адрес для отображения отдельных записей модели на веб-сайте (если вы определяете этот метод, тогда Django автоматически добавит кнопку «Просмотр на сайте» на экранах редактирования записей модели на сайте администратора). Типичный шаблон для get_absolute_url () показан ниже.
 
-<pre class="brush: python">def get_absolute_url(self):
+```python
+def get_absolute_url(self):
     """
     Returns the url to access a particular instance of the model.
     """
     return reverse('model-detail-view', args=[str(self.id)])
-</pre>
-
-<div class="note">
-<p>Примечание. Предполагается, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определённой записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведённом выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.</p>
+```
 
-<p>Конечно, для выполнения этой работы вам всё равно придётся писать сопоставление URL-адрес, просмотр и шаблон!</p>
-</div>
+> **Примечание:** Примечание. Предполагается, что вы будете использовать URL-адреса, например / myapplication / mymodelname / 2, для отображения отдельных записей для вашей модели (где «2» - это идентификатор для определённой записи), вам нужно будет создать URL-карту, чтобы передать ответ и идентификатор «Образцовое представление модели» (которое будет выполнять работу, необходимую для отображения записи). Вышеуказанная функция reverse () может «перевернуть» ваш URL-адрес (в приведённом выше примере с именем «model-detail-view»), чтобы создать URL-адрес правильного формата.
+>
+> Конечно, для выполнения этой работы вам всё равно придётся писать сопоставление URL-адрес, просмотр и шаблон!
 
-<p>Вы также можете определить любые другие методы, которые вам нравятся, и вызывать их из вашего кода или шаблонов (при условии, что они не принимают никаких параметров).</p>
+Вы также можете определить любые другие методы, которые вам нравятся, и вызывать их из вашего кода или шаблонов (при условии, что они не принимают никаких параметров).
 
-<h3 id="Управление_моделью">Управление моделью</h3>
+### Управление моделью
 
-<p>После того, как вы определили свои классы моделей, вы можете использовать их для создания, обновления или удаления записей и для запуска запросов для получения всех записей или отдельных подмножеств записей. Мы покажем вам, как это сделать в учебнике, когда мы определяем наши представления, с кратким обзором.</p>
+После того, как вы определили свои классы моделей, вы можете использовать их для создания, обновления или удаления записей и для запуска запросов для получения всех записей или отдельных подмножеств записей. Мы покажем вам, как это сделать в учебнике, когда мы определяем наши представления, с кратким обзором.
 
-<h4 id="Создание_и_изменение_записей">Создание и изменение записей</h4>
+#### Создание и изменение записей
 
-<p>Чтобы создать запись, вы можете определить экземпляр модели, а затем вызвать метод save ().</p>
+Чтобы создать запись, вы можете определить экземпляр модели, а затем вызвать метод save ().
 
-<pre class="brush: python"># Create a new record using the model's constructor.
+```python
+# Create a new record using the model's constructor.
 a_record = MyModelName(my_field_name="Instance #1")
 
 # Save the object into the database.
 a_record.save()
-</pre>
+```
 
-<div class="note">
-<p>Примечание. Если вы не указали какое-либо поле в качестве primary_key, новая запись будет выдаваться автоматически, с идентификатором имени поля. Вы можете запросить это поле после сохранения указанной выше записи, и оно будет иметь значение 1.</p>
-</div>
+> **Примечание:** Примечание. Если вы не указали какое-либо поле в качестве primary_key, новая запись будет выдаваться автоматически, с идентификатором имени поля. Вы можете запросить это поле после сохранения указанной выше записи, и оно будет иметь значение 1.
 
-<p>Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.</p>
+Вы можете получить доступ к полям в этой новой записи с использованием синтаксиса точек и изменить значения. Вы должны вызвать save (), чтобы сохранить изменённые значения в базе данных.
 
-<pre class="brush: python"># Access model field values using Python attributes.
+```python
+# Access model field values using Python attributes.
 print(a_record.id) #should return 1 for the first record.
 print(a_record.my_field_name) # should print 'Instance #1'
 
 # Change record by modifying the fields, then calling save().
 a_record.my_field_name="New Instance Name"
-a_record.save()</pre>
+a_record.save()
+```
 
-<h4 id="Поиск_записей">Поиск записей</h4>
+#### Поиск записей
 
-<p>Вы можете искать записи, соответствующие определённым критериям, используя атрибут объектов модели (предоставляемый базовым классом).</p>
+Вы можете искать записи, соответствующие определённым критериям, используя атрибут объектов модели (предоставляемый базовым классом).
 
-<div class="note">
-<p>Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведённом ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.</p>
-</div>
+> **Примечание:** Примечание. Объяснение того, как искать записи, используя «абстрактную» модель и имена полей, может быть немного запутанным. В приведённом ниже обсуждении мы будем ссылаться на модель книги с полями названия и жанра, где жанр также является моделью с единственным именем в поле.
 
-<p>Мы можем получить все записи для модели как объект QuerySet,  используя <code>objects.all()</code>. QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.</p>
+Мы можем получить все записи для модели как объект QuerySet, используя `objects.all()`. QuerySet - это итерируемый объект, означающий, что он содержит несколько объектов, которые мы можем перебирать / прокручивать.
 
-<pre class="brush: python">all_books = Book.objects.all()
-</pre>
+```python
+all_books = Book.objects.all()
+```
 
-<p>Метод <code>filter()</code> Django позволяет отфильтровать возвращаемый <code>QuerySet</code> для соответствия указанному текстовому или числовому полю по конкретным критериям. Например, чтобы отфильтровать книги, содержащие  слово «wild» («дикие») в заголовке, а затем подсчитать их, мы могли бы сделать следующее.</p>
+Метод `filter()` Django позволяет отфильтровать возвращаемый `QuerySet` для соответствия указанному текстовому или числовому полю по конкретным критериям. Например, чтобы отфильтровать книги, содержащие слово «wild» («дикие») в заголовке, а затем подсчитать их, мы могли бы сделать следующее.
 
-<pre class="brush: python">wild_books = Book.objects.filter(title__contains='wild')
+```python
+wild_books = Book.objects.filter(title__contains='wild')
 number_wild_books = Book.objects.filter(title__contains='wild').count()
-</pre>
+```
 
-<p>Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: <code>field_name__match_type </code>(обратите внимание на двойное подчёркивание между заголовком выше). Выше мы фильтруем заголовок с учётом регистра. Есть много других типов совпадений, которые вы можете сделать: <code>icontains</code> (без учёта регистра), <code>iexact </code>(точное совпадение без учёта регистра), <code>exact </code>(точное совпадение с учётом регистра ) и <code>in</code>, <code>gt </code>(больше), <code>startswith</code> и т. д <a href="https://docs.djangoproject.com/en/2.2/ref/models/querysets/#field-lookups">смотреть полный список </a>(Django Docs, [EN]).</p>
+Соответствующие поля и тип соответствия определяются в имени параметра фильтра, используя формат: `field_name__match_type `(обратите внимание на двойное подчёркивание между заголовком выше). Выше мы фильтруем заголовок с учётом регистра. Есть много других типов совпадений, которые вы можете сделать: `icontains` (без учёта регистра), `iexact `(точное совпадение без учёта регистра), `exact `(точное совпадение с учётом регистра ) и `in`, `gt `(больше), `startswith` и т. д [смотреть полный список ](https://docs.djangoproject.com/en/2.2/ref/models/querysets/#field-lookups)(Django Docs, \[EN]).
 
-<p>В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, <code>ForeignKey</code>). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчёркиваниями. Так, например, чтобы фильтровать книги с определённым жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:</p>
+В некоторых случаях вам нужно будет фильтровать поле, которое определяет отношение «один ко многим» к другой модели (например, `ForeignKey`). В этом случае вы можете «индексировать» поля в связанной модели с дополнительными двойными подчёркиваниями. Так, например, чтобы фильтровать книги с определённым жанровым рисунком, вам нужно будет указывать имя в поле жанра, как показано ниже:
 
-<pre class="brush: python">books_containing_genre = Book.objects.filter(genre<strong>__</strong>name<strong>__</strong>icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
-</pre>
+```python
+books_containing_genre = Book.objects.filter(genre__name__icontains='fiction')  # Will match on: Fiction, Science fiction, non-fiction etc.
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Вы можете использовать символы подчёркивания (__) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type__cover__name__exact = 'hard'.</p>
-</div>
+> **Примечание:** Вы можете использовать символы подчёркивания (\_\_) для навигации по многим уровням отношений (ForeignKey / ManyToManyField) по своему усмотрению. Например, книга, имеющая разные типы, определяемая с использованием дополнительной связи «обложка», может иметь имя параметра: type\_\_cover\_\_name\_\_exact = 'hard'.
 
-<p>Существует гораздо больше возможностей для запросов, включая обратные поиски от связанных моделей, цепочки фильтров, возврат меньшего набора значений и т. д. Для получения дополнительной информации см. <a href="https://docs.djangoproject.com/en/2.2/topics/db/queries/">Making queries</a> (Django Docs, [EN]).</p>
+Существует гораздо больше возможностей для запросов, включая обратные поиски от связанных моделей, цепочки фильтров, возврат меньшего набора значений и т. д. Для получения дополнительной информации см. [Making queries](https://docs.djangoproject.com/en/2.2/topics/db/queries/) (Django Docs, \[EN]).
 
-<h2 id="Определение_моделей_LocalLibrary">Определение моделей LocalLibrary</h2>
+## Определение моделей LocalLibrary
 
-<p>В этом разделе мы начнём определять модели для библиотеки. Откройте <em>models.py (в / locallibrary / catalog /)</em>. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели <code>models.Model</code>, от которого наследуются наши модели.</p>
+В этом разделе мы начнём определять модели для библиотеки. Откройте _models.py (в / locallibrary / catalog /)_. Шаблон в верхней части страницы импортирует модуль моделей, который содержит базовый класс модели `models.Model`, от которого наследуются наши модели.
 
-<pre class="brush: python">from django.db import models
+```python
+from django.db import models
 
-# Create your models here.</pre>
+# Create your models here.
+```
 
-<h3 id="Модель_жанра">Модель жанра</h3>
+### Модель жанра
 
-<p>Скопируйте приведённый ниже код модели <code>Genre </code>и вставьте его в нижнюю часть вашего файла <code>models.py</code>. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.</p>
+Скопируйте приведённый ниже код модели `Genre `и вставьте его в нижнюю часть вашего файла `models.py`. Эта модель используется для хранения информации о категории книг - например, будь то художественная или документальная, роман или военно-историческая и т. д. Как уже упоминалось выше, мы создали жанр как модель, а не как свободный текст или список выбора, чтобы возможные значения могли управляться через базу данных, а не были закодированными.
 
-<pre class="brush: python">class Genre(models.Model):
+```python
+class Genre(models.Model):
     """
     Model representing a book genre (e.g. Science Fiction, Non Fiction).
     """
@@ -273,15 +268,17 @@ number_wild_books = Book.objects.filter(title__contains='wild').count()
         """
         String for representing the Model object (in Admin site etc.)
         """
-        return self.name</pre>
+        return self.name
+```
 
-<p>Модель имеет один <code>CharField</code> field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый <code>help_text</code>. В конце модели мы объявляем метод <code>__str__()</code>, который просто возвращает имя жанра, определённого конкретной записью. Verbose name не был определён, поэтому поле будет называться <code>Name</code> в формах.</p>
+Модель имеет один `CharField` field (имя), которое используется для описания жанра (оно ограничено 200 символами и имеет некоторый `help_text`. В конце модели мы объявляем метод `__str__()`, который просто возвращает имя жанра, определённого конкретной записью. Verbose name не был определён, поэтому поле будет называться `Name` в формах.
 
-<h3 id="Модель_книги">Модель книги</h3>
+### Модель книги
 
-<p>Скопируйте модель книги ниже и снова вставьте её в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.</p>
+Скопируйте модель книги ниже и снова вставьте её в нижнюю часть файла. Модель книги представляет всю информацию о доступной книге в общем смысле, но не конкретный физический «экземпляр» или «копию» для временного использования. Модель использует CharField для представления названия книги и isbn (обратите внимание, как isbn указывает свой ярлык как «ISBN», используя первый неименованный параметр, поскольку в противном случае ярлык по умолчанию был бы «Isbn»). Модель использует TextField для summary, потому что этот текст, возможно, должен быть очень длинным.
 
-<pre class="brush: python">from django.urls import reverse #Used to generate URLs by reversing the URL patterns
+```python
+from django.urls import reverse #Used to generate URLs by reversing the URL patterns
 
 class Book(models.Model):
     """
@@ -292,7 +289,7 @@ class Book(models.Model):
     # Foreign Key used because book can only have one author, but authors can have multiple books
     # Author as a string rather than object because it hasn't been declared yet in the file.
     summary = models.TextField(max_length=1000, help_text="Enter a brief description of the book")
-    isbn = models.CharField('ISBN',max_length=13, help_text='13 Character &lt;a href="https://www.isbn-international.org/content/what-isbn"&gt;ISBN number&lt;/a&gt;')
+    isbn = models.CharField('ISBN',max_length=13, help_text='13 Character <a href="https://www.isbn-international.org/content/what-isbn">ISBN number</a>')
     genre = models.ManyToManyField(Genre, help_text="Select a genre for this book")
     # ManyToManyField used because genre can contain many books. Books can cover many genres.
     # Genre class has already been defined so we can specify the object above.
@@ -309,24 +306,23 @@ class Book(models.Model):
         Returns the url to access a particular book instance.
         """
         return reverse('book-detail', args=[str(self.id)])
-</pre>
+```
 
-<p>Жанр представляет из себя ManyToManyField, так что книга может иметь несколько жанров, а жанр может иметь много книг. Автор объявляется через ForeignKey, поэтому в каждой книге будет только один автор, но у автора может быть много книг (на практике книга может иметь несколько авторов, но не в такой реализации!)</p>
+Жанр представляет из себя ManyToManyField, так что книга может иметь несколько жанров, а жанр может иметь много книг. Автор объявляется через ForeignKey, поэтому в каждой книге будет только один автор, но у автора может быть много книг (на практике книга может иметь несколько авторов, но не в такой реализации!)
 
-<p>В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс ещё не был определён в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются <code>null=True</code>, которое позволяет базе данных хранить значение <code>Null</code> , если автор не выбран, и on_delete = models. <code>SET_NULL </code>установит значение автора в Null, если связанная с автором запись будет удалена.</p>
+В обоих типах полей соответствующий класс модели объявляется как первый неименованный параметр, используя либо класс модели, либо строку, содержащую имя соответствующей модели. Вы должны использовать имя модели как строку, если связанный класс ещё не был определён в этом файле до того, как он будет указан! Другими параметрами, представляющими интерес для поля автора, являются `null=True`, которое позволяет базе данных хранить значение `Null` , если автор не выбран, и on_delete = models. `SET_NULL `установит значение автора в Null, если связанная с автором запись будет удалена.
 
-<p>Модель также определяет __str __ (), используя поле заголовка книги для представления книги. Окончательный метод get_absolute_url () возвращает URL-адрес, который можно использовать для доступа к подробной записи для этой модели (для этого нам нужно будет определить сопоставление URL-адресов, в котором содержится подробная информация о книге, и определить связанное представление и шаблон ).</p>
+Модель также определяет \_\_str \_\_ (), используя поле заголовка книги для представления книги. Окончательный метод get_absolute_url () возвращает URL-адрес, который можно использовать для доступа к подробной записи для этой модели (для этого нам нужно будет определить сопоставление URL-адресов, в котором содержится подробная информация о книге, и определить связанное представление и шаблон ).
 
-<h3 id="Модель_BookInstance">Модель BookInstance</h3>
+### Модель BookInstance
 
-<p>Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определённую копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует</p>
+Затем скопируйте модель BookInstance (показано ниже) под другие модели. BookInstance представляет собой определённую копию книги, которую кто-то может брать взаймы, и включает информацию о том, доступна ли копия или в какой день она ожидается, «отпечаток» или сведения о версии, а также уникальный идентификатор книги в библиотеке. Теперь некоторые из полей и методов будут знакомы. Модель использует
 
-<ul>
- <li>ForeignKey для идентификации связанной книги (в каждой книге может быть много копий, но в копии может быть только одна книга).</li>
- <li>CharField, для представления данных (конкретного выпуска) о книге.</li>
-</ul>
+- ForeignKey для идентификации связанной книги (в каждой книге может быть много копий, но в копии может быть только одна книга).
+- CharField, для представления данных (конкретного выпуска) о книге.
 
-<pre class="brush: python">import uuid # Required for unique book instances
+```python
+import uuid # Required for unique book instances
 
 class BookInstance(models.Model):
     """
@@ -354,35 +350,31 @@ class BookInstance(models.Model):
         """
         String for representing the Model object
         """
-        return '%s (%s)' % (self.id,self.book.title)</pre>
-
-<p>Мы дополнительно объявляем несколько новых типов полей:</p>
+        return '%s (%s)' % (self.id,self.book.title)
+```
 
-<ul>
- <li><code>UUIDField</code> используется для поля id, чтобы установить его как primary_key для этой модели. Этот тип поля выделяет глобальное уникальное значение для каждого экземпляра (по одному для каждой книги, которую вы можете найти в библиотеке).</li>
- <li><code>DateField</code> используется для данных due_back (при которых ожидается, что книга появится после заимствования или обслуживания). Это значение может быть blank или null (необходимо, когда книга доступна). Метаданные модели (Class Meta) используют это поле для упорядочивания записей, когда они возвращаются в запросе.</li>
- <li>status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаём его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.</li>
-</ul>
+Мы дополнительно объявляем несколько новых типов полей:
 
-<p>Модель __str __ () представляет объект BookInstance, используя комбинацию его уникального идентификатора и связанного с ним заголовка книги.</p>
+- `UUIDField` используется для поля id, чтобы установить его как primary_key для этой модели. Этот тип поля выделяет глобальное уникальное значение для каждого экземпляра (по одному для каждой книги, которую вы можете найти в библиотеке).
+- `DateField` используется для данных due_back (при которых ожидается, что книга появится после заимствования или обслуживания). Это значение может быть blank или null (необходимо, когда книга доступна). Метаданные модели (Class Meta) используют это поле для упорядочивания записей, когда они возвращаются в запросе.
+- status - это CharField, который определяет список choice/selection. Как вы можете видеть, мы определяем кортеж, содержащий кортежи пар ключ-значение и передаём его аргументу выбора. Значение в key/value паре - это отображаемое значение, которое пользователь может выбрать, а ключи - это значения, которые фактически сохраняются, если выбрана опция. Мы также установили значение по умолчанию «m» (техническое обслуживание), поскольку книги изначально будут созданы недоступными до того, как они будут храниться на полках.
 
-<div class="note">
-<p>Примечание. Немного Python:</p>
+Модель \_\_str \_\_ () представляет объект BookInstance, используя комбинацию его уникального идентификатора и связанного с ним заголовка книги.
 
-<ul>
- <li>Значение, возвращаемое __str __ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Моё значение:% S' % переменная.<br>
-  <br>
-  Обратите также внимание на то, что, хотя этот подход совершенно применим, но он более не является предпочтительным. Начиная с Python 3, вы должны использовать метод format, например. '{0} ({1})'.format (self.id, self.book.title). Вы можете узнать больше об этом  <a href="https://www.python.org/dev/peps/pep-3101/">здесь</a>.</li>
-</ul>
-</div>
+> **Примечание:** Примечание. Немного Python:
+>
+> - Значение, возвращаемое \_\_str \_\_ (), является форматированной строкой. В строке мы используем % S для объявления 'placeholders'. После строки укажем %, а затем кортеж, содержащий значения, которые будут вставлены в заполнители. Если у вас просто один заполнитель, вы можете опустить кортеж - например, 'Моё значение:% S' % переменная.
+>
+>   Обратите также внимание на то, что, хотя этот подход совершенно применим, но он более не является предпочтительным. Начиная с Python 3, вы должны использовать метод format, например. '{0} ({1})'.format (self.id, self.book.title). Вы можете узнать больше об этом [здесь](https://www.python.org/dev/peps/pep-3101/).
 
-<h3 id="Модель_автора">Модель автора</h3>
+### Модель автора
 
-<p>Скопируйте модель автора (показано ниже) под существующим кодом в models.py.</p>
+Скопируйте модель автора (показано ниже) под существующим кодом в models.py.
 
-<p>Теперь все поля/методы должны быть знакомы. Модель определяет автора как имя, фамилию, дату рождения и (необязательную) дату смерти. Он указывает, что по умолчанию __str __ () возвращает имя в фамилии, порядковый номер первого имени. Метод get_absolute_url () отменяет сопоставление URL-адреса автора с целью получения URL-адреса для отображения отдельного автора.</p>
+Теперь все поля/методы должны быть знакомы. Модель определяет автора как имя, фамилию, дату рождения и (необязательную) дату смерти. Он указывает, что по умолчанию \_\_str \_\_ () возвращает имя в фамилии, порядковый номер первого имени. Метод get_absolute_url () отменяет сопоставление URL-адреса автора с целью получения URL-адреса для отображения отдельного автора.
 
-<pre class="brush: python">class Author(models.Model):
+```python
+class Author(models.Model):
     """
     Model representing an author.
     """
@@ -403,46 +395,40 @@ class BookInstance(models.Model):
         String for representing the Model object.
         """
         return '%s, %s' % (self.last_name, self.first_name)
-</pre>
-
-<h2 id="Повторно_выполнить_миграцию_базы_данных">Повторно выполнить миграцию базы данных</h2>
+```
 
-<p>Теперь все ваши модели созданы. Теперь переустановите миграцию базы данных, чтобы добавить их в свою базу данных.</p>
+## Повторно выполнить миграцию базы данных
 
-<pre><code>python3 manage.py makemigrations
-python3 manage.py migrate</code></pre>
+Теперь все ваши модели созданы. Теперь переустановите миграцию базы данных, чтобы добавить их в свою базу данных.
 
-<h2 id="Языковая_модель_-_вызов">Языковая модель - вызов</h2>
+```
+python3 manage.py makemigrations
+python3 manage.py migrate
+```
 
-<p>Представьте себе, что местный благотворитель жертвует ряд новых книг, написанных на другом языке (скажем, фарси). Задача состоит в том, чтобы определить, как они будут лучше всего представлены на нашем веб-сайте библиотеки, а затем добавить их в модели.</p>
+## Языковая модель - вызов
 
-<p>Некоторые вещи, которые следует учитывать:</p>
+Представьте себе, что местный благотворитель жертвует ряд новых книг, написанных на другом языке (скажем, фарси). Задача состоит в том, чтобы определить, как они будут лучше всего представлены на нашем веб-сайте библиотеки, а затем добавить их в модели.
 
-<ul>
- <li>Должен ли «язык» ассоциироваться с Book, BookInstance или каким-либо другим объектом?</li>
- <li>Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жёстко запрограммированного списка выбора?</li>
-</ul>
+Некоторые вещи, которые следует учитывать:
 
-<p>После того, как вы решили, добавьте поле. Вы можете увидеть наше решение на Github <a href="https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py">here</a>.</p>
+- Должен ли «язык» ассоциироваться с Book, BookInstance или каким-либо другим объектом?
+- Должны ли быть представлены разные языки с использованием модели, свободного текстового поля или жёстко запрограммированного списка выбора?
 
-<ul>
-</ul>
+После того, как вы решили, добавьте поле. Вы можете увидеть наше решение на Github [here](https://github.com/mdn/django-locallibrary-tutorial/blob/master/catalog/models.py).
 
-<ul>
-</ul>
+<!---->
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>В этой статье мы узнали, как определять модели, а затем использовать эту информацию в разработке и внедрении соответствующих моделей для сайта LocalLibrary.</p>
+В этой статье мы узнали, как определять модели, а затем использовать эту информацию в разработке и внедрении соответствующих моделей для сайта LocalLibrary.
 
-<p>На этом этапе мы отвлечёмся от создания сайта и проверим <em>Django Administration site</em>. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (ещё не созданных) представлений и шаблонов.</p>
+На этом этапе мы отвлечёмся от создания сайта и проверим _Django Administration site_. Этот сайт позволит нам добавить некоторые данные в библиотеку, которые мы можем отобразить с помощью наших (ещё не созданных) представлений и шаблонов.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial02/">Writing your first Django app, part 2</a> (Django Docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/db/queries/">Making queries</a> (Django Docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/ref/models/querysets/">QuerySet API Reference</a> (Django Docs)</li>
-</ul>
+- [Writing your first Django app, part 2](https://docs.djangoproject.com/en/1.10/intro/tutorial02/) (Django Docs)
+- [Making queries](https://docs.djangoproject.com/en/1.10/topics/db/queries/) (Django Docs)
+- [QuerySet API Reference](https://docs.djangoproject.com/en/1.10/ref/models/querysets/) (Django Docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django/Admin_site", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/sessions/index.md b/files/ru/learn/server-side/django/sessions/index.md
index fc542177ec6e90..2800f7ef391294 100644
--- a/files/ru/learn/server-side/django/sessions/index.md
+++ b/files/ru/learn/server-side/django/sessions/index.md
@@ -15,70 +15,60 @@ tags:
 translation_of: Learn/Server-side/Django/Sessions
 original_slug: Learn/Server-side/Django/Сессии
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/authentication_and_sessions", "Learn/Server-side/Django")}}</div>
+Эта часть расширяет наш сайт [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), добавляя счётчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.
 
-<p class="summary">Эта часть расширяет наш сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, добавляя счётчик посещений домашней страницы, реализованного при помощи сессий. Это относительно простой пример, но он демонстрирует то, как при помощи сессий реализовать анализ поведения анонимных пользователей на сайте.</p>
+| Требования: | Завершить изучение всех предыдущих разделов, включая [Django Руководство Часть 6: Обобщённые отображения списков и детальной информации](/ru/docs/Learn/Server-side/Django/Generic_views) |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понимать как применять сессии.                                                                                                                                                            |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Завершить изучение всех предыдущих разделов, включая <a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Руководство Часть 6: Обобщённые отображения списков и детальной информации</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать как применять сессии.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+В предыдущих частях мы создали сайт [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), который позволяет пользователям получать из каталога списки книг и авторов. На данный момент каждый посетитель сайта получает доступ к одним и тем же страницам и типам информации динамически сформированными из базы данных.
 
-<p>В предыдущих частях мы создали сайт <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>, который позволяет пользователям получать из каталога списки книг и авторов. На данный момент каждый посетитель сайта получает доступ к одним и тем же страницам и типам информации динамически сформированными из базы данных.</p>
+В "настоящей" библиотеке вам хотелось бы предоставить пользователю индивидуальные услуги, которые зависят от его предпочтений и предыдущего опыта использования сайта, его настроек и тому подобное. Например, при очередном посещении сайта вы можете скрыть сообщения об ошибках для тех пользователей, которые их уже получали, или сохранить и учитывать пользовательские настройки (например, количество выводимых данных на странице как результат какого-либо поиска).
 
-<p>В "настоящей" библиотеке вам хотелось бы предоставить пользователю индивидуальные услуги, которые зависят от его предпочтений и предыдущего опыта использования сайта, его настроек и тому подобное. Например, при очередном посещении сайта вы можете скрыть сообщения об ошибках для тех пользователей, которые их уже получали, или сохранить и учитывать пользовательские настройки (например, количество выводимых данных на странице как результат какого-либо поиска). </p>
+Сессии позволяют вам реализовать такой род функциональности, который позволит вам хранить и получать произвольные данные, полученные на основе индивидуального поведения пользователя на сайте.
 
-<p>Сессии позволяют вам реализовать такой род функциональности, который позволит вам хранить и получать произвольные данные, полученные на основе индивидуального поведения пользователя на сайте.</p>
+## Что такое сессии?
 
-<h2 id="Что_такое_сессии">Что такое сессии?</h2>
+Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет своё состояние (_stateless)_. Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.
 
-<p>Все взаимодействия между браузерами и серверами осуществляются при помощи протокола HTTP, который не сохраняет своё состояние (<em>stateless)</em>. Данный факт означает, что сообщения между клиентом и сервером являются полностью независимыми один от другого — то есть не существует какого-либо представления "последовательности", или поведения в зависимости от предыдущих сообщений. В результате, если вы хотите создать сайт который будет отслеживать взаимодействие с клиентом (браузером), вам нужно реализовать это самостоятельно.</p>
+Сессии являются механизмом, который использует Django (да и весь остальной "Интернет") для отслеживания "состояния" между сайтом и каким-либо браузером. Сессии позволяют вам хранить произвольные данные браузера и получать их в тот момент, когда между данным браузером и сайтом устанавливается соединение. Данные получаются и сохраняются в сессии при помощи соответствующего "ключа".
 
-<p>Сессии являются механизмом, который использует Django (да и весь остальной "Интернет") для отслеживания "состояния" между сайтом и каким-либо браузером. Сессии позволяют вам хранить произвольные данные браузера и получать их в тот момент, когда между данным браузером и сайтом устанавливается соединение. Данные получаются и сохраняются в сессии при помощи соответствующего "ключа".</p>
+Django использует куки (cookie), которые содержат специальный _идентификатор сессии,_ который выделяет среди остальных, каждый браузер и соответствующую сессию. Реальные _данные_ сессии, по умолчанию, хранятся в базе данных сайта (это более безопасно, чем сохранять данные в куки, где они могут быть уязвимы для злоумышленников). Однако, у вас есть возможность настроить Django так, чтобы сохранять данные сессий в других местах (кеше, файлах, "безопасных" куки). Но всё же хранение по умолчанию является хорошей и безопасной возможностью.
 
-<p>Django использует куки (cookie), которые содержат специальный <em>идентификатор сессии,</em> который выделяет среди остальных, каждый браузер и соответствующую сессию. Реальные <em>данные</em> сессии, по умолчанию, хранятся в базе данных сайта (это более безопасно, чем сохранять данные в куки, где они могут быть уязвимы для злоумышленников). Однако, у вас есть возможность настроить Django так, чтобы сохранять данные сессий в других местах (кеше, файлах, "безопасных" куки). Но всё же хранение по умолчанию является хорошей и безопасной возможностью.</p>
+## Подключение сессий
 
-<h2 id="Подключение_сессий">Подключение сессий</h2>
+Сессии стали доступны автоматически в тот момент, когда мы [создали скелет сайта](/ru/docs/Learn/Server-side/Django/skeleton_website) (во второй части руководства).
 
-<p>Сессии стали доступны автоматически в тот момент, когда мы <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">создали скелет сайта</a> (во второй части руководства).</p>
+Необходимые конфигурации выполняются в разделах `INSTALLED_APPS` и `MIDDLEWARE` файла проекта (**locallibrary/locallibrary/settings.py**), как показано ниже:
 
-<p>Необходимые конфигурации выполняются в разделах <code>INSTALLED_APPS</code> и <code>MIDDLEWARE</code> файла проекта (<strong>locallibrary/locallibrary/settings.py</strong>), как показано ниже:</p>
-
-<pre class="brush: python">INSTALLED_APPS = [
+```python
+INSTALLED_APPS = [
     ...
-<strong>    'django.contrib.sessions',</strong>
+    'django.contrib.sessions',
     ....
 
 MIDDLEWARE = [
     ...
-<strong>    'django.contrib.sessions.middleware.SessionMiddleware',</strong>
-    ....</pre>
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    ....
+```
 
-<h2 id="Применение_сессий">Применение сессий</h2>
+## Применение сессий
 
-<p>Вы можете получить доступ к переменной <code>session</code>, в соответствующем отображении, через параметр <code>request</code> (<code>HttpRequest</code> передаётся как первый аргумент в каждое отображение). Переменная сессии является связью с определённым пользователем (или, если быть более точным, связью с определённым <em>браузером</em>, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).</p>
+Вы можете получить доступ к переменной `session`, в соответствующем отображении, через параметр `request` (`HttpRequest` передаётся как первый аргумент в каждое отображение). Переменная сессии является связью с определённым пользователем (или, если быть более точным, связью с определённым _браузером_, который определяется при помощи идентификатора (id) сессии, получаемого из куки браузера).
 
-<p>Переменная (или поле) <code>session</code> является объектом-словарём, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на  обычные "словарные" операции - получения и установки значений.</p>
+Переменная (или поле) `session` является объектом-словарём, который служит для чтения и записи неограниченное число раз. С ним вы можете выполнять любые стандартные операции, включая очистку всех данных, проверку наличия ключа, циклы по данным и так далее. Большую часть времени вы будете тратить на обычные "словарные" операции - получения и установки значений.
 
-<p>Ниже представлены фрагменты кода, которые показывают вам как получать, задавать и удалять некоторые данные при помощи ключа "<code>my_car</code>", связанного с текущей сессией (браузером). </p>
+Ниже представлены фрагменты кода, которые показывают вам как получать, задавать и удалять некоторые данные при помощи ключа "`my_car`", связанного с текущей сессией (браузером).
 
-<div class="note">
-<p><strong>Примечание</strong>: Одной из самых грандиозных вещей в Django является то, что вам не надо думать о механизме, который связывает сессию с текущим запросом в отображении. Во фрагменте ниже, всё что вам надо знать, это то, что  <code>my_car</code> связана с тем браузером, который отправил текущий запрос.</p>
-</div>
+> **Примечание:** Одной из самых грандиозных вещей в Django является то, что вам не надо думать о механизме, который связывает сессию с текущим запросом в отображении. Во фрагменте ниже, всё что вам надо знать, это то, что `my_car` связана с тем браузером, который отправил текущий запрос.
 
-<pre class="brush: python"># Получение значения сессии при помощи ключа(то есть, 'my_car').
+```python
+# Получение значения сессии при помощи ключа(то есть, 'my_car').
 # Если такого ключа нет, то возникнет ошибка KeyError
 my_car = request.session['my_car']
 
@@ -91,92 +81,89 @@ request.session['my_car'] = 'mini'
 
 # Удаление значения из сессии
 del request.session['my_car']
-</pre>
+```
 
-<p>Данное API имеет другие методы, которые большей частью используются для управления куки, связанных с сессией.  Например, существуют методы проверки того, что куки поддерживаются клиентским браузером, другие методы служат для установки и проверки предельных дат жизни куки, а также для очистки просроченных сессий из хранилища. Подробное описание API вы можете найти в разделе <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Как использовать сессии</a> (Django docs).</p>
+Данное API имеет другие методы, которые большей частью используются для управления куки, связанных с сессией. Например, существуют методы проверки того, что куки поддерживаются клиентским браузером, другие методы служат для установки и проверки предельных дат жизни куки, а также для очистки просроченных сессий из хранилища. Подробное описание API вы можете найти в разделе [Как использовать сессии](https://docs.djangoproject.com/en/1.10/topics/http/sessions/) (Django docs).
 
-<h2 id="Хранение_данных_сессии">Хранение данных сессии</h2>
+## Хранение данных сессии
 
-<p>По умолчанию Django сохраняет данные сессии в базу данных и отправляет соответствующие куки клиенту только тогда, когда сессия была <em>изменена</em>, или <em>удалена</em>. Если вы обновляете какие-либо данные при помощи ключа сессии, как показано в предыдущем фрагменте, тогда вам не надо беспокоиться о процессе сохранения! Например:</p>
+По умолчанию Django сохраняет данные сессии в базу данных и отправляет соответствующие куки клиенту только тогда, когда сессия была _изменена_, или _удалена_. Если вы обновляете какие-либо данные при помощи ключа сессии, как показано в предыдущем фрагменте, тогда вам не надо беспокоиться о процессе сохранения! Например:
 
-<pre class="brush: python"># Данное присваивание распознается как обновление сессии
+```python
+# Данное присваивание распознается как обновление сессии
 # и данные будут сохранены
-request.session['my_car'] = 'mini'</pre>
+request.session['my_car'] = 'mini'
+```
 
-<p>Если вы обновите информацию <em>внутри</em> данных сессии, тогда Django не распознает эти изменения и не выполнит сохранение данных (например, если вы изменили "<code>wheels</code>" внутри переменной "<code>my_car</code>", как показано ниже). В таких случаях вам надо явно указывать, что сессия была изменена.</p>
+Если вы обновите информацию _внутри_ данных сессии, тогда Django не распознает эти изменения и не выполнит сохранение данных (например, если вы изменили "`wheels`" внутри переменной "`my_car`", как показано ниже). В таких случаях вам надо явно указывать, что сессия была изменена.
 
-<pre class="brush: python"># Объект сессии модифицируется неявно.
+```python
+# Объект сессии модифицируется неявно.
 # Изменения НЕ БУДУТ сохранены!
 request.session['my_car']['wheels'] = 'alloy'
 
 # Явное указание, что данные изменены.
 # Сессия будет сохранена, куки обновлены (если необходимо).
-<code>request.session.modified = True</code>
-</pre>
+request.session.modified = True
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: вы можете изменить поведение сессий таким образом, чтобы они записывали любое своё изменение в базу данных и отправляли куки, при каждом запросе, путём установки <code>SESSION_SAVE_EVERY_REQUEST = True</code>, в файле настроек проекта (<strong>locallibrary/locallibrary/settings.py</strong>).</p>
-</div>
+> **Примечание:** вы можете изменить поведение сессий таким образом, чтобы они записывали любое своё изменение в базу данных и отправляли куки, при каждом запросе, путём установки `SESSION_SAVE_EVERY_REQUEST = True`, в файле настроек проекта (**locallibrary/locallibrary/settings.py**).
 
-<h2 id="Простой_пример_—_получение_числа_визитов">Простой пример — получение числа визитов</h2>
+## Простой пример — получение числа визитов
 
-<p>В качестве примера из реального мира мы обновим нашу библиотеку так, чтобы сообщать пользователю количество совершенных им визитов главной страницы сайта <em>LocalLibrary</em>. </p>
+В качестве примера из реального мира мы обновим нашу библиотеку так, чтобы сообщать пользователю количество совершенных им визитов главной страницы сайта _LocalLibrary_.
 
-<p>Откройте <strong>/locallibrary/catalog/views.py</strong> и добавьте изменения, выделенных жирным, ниже. </p>
+Откройте **/locallibrary/catalog/views.py** и добавьте изменения, выделенных жирным, ниже.
 
-<pre class="brush: python">def index(request):
+```python
+def index(request):
     ...
 
     num_authors=Author.objects.count()  # The 'all()' is implied by default.
 
-<strong>    # Number of visits to this view, as counted in the session variable.
+    # Number of visits to this view, as counted in the session variable.
     num_visits=request.session.get('num_visits', 0)
-    request.session['num_visits'] = num_visits+1</strong>
+    request.session['num_visits'] = num_visits+1
 
     # Render the HTML template index.html with the data in the context variable.
     return render(
         request,
         'index.html',
-<strong>        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors,
-            'num_visits':num_visits}, # num_visits appended</strong>
-    )</pre>
-
-<p>В первую очередь мы получаем значение <code>'num_visits'</code> из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная <code>num_visits</code> передаётся в шаблон через переменную контекста <code>context</code>.  </p>
-
-<div class="note">
-<p><strong>Примечание</strong>: Можно проверить наличие поддержки куки в браузере (для примера, смотрите <a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Как использовать сессии</a>), или разработать наш UI таким образом, чтобы это не имело значения.</p>
-</div>
+        context={'num_books':num_books,'num_instances':num_instances,'num_instances_available':num_instances_available,'num_authors':num_authors,
+            'num_visits':num_visits}, # num_visits appended
+    )
+```
 
-<p>Для показа значения переменной, из следующего фрагмента добавьте нижнюю строчку кода в ваш шаблон главной страницы сайта (<strong>/locallibrary/catalog/templates/index.html</strong>), в его нижний раздел "Dynamic content":</p>
+В первую очередь мы получаем значение `'num_visits'` из сессии, возвращая 0, если оно не было установлено ранее. Каждый раз при получении запроса, мы увеличиваем данное значение на единицу и сохраняем его обратно в сессии (до следующего посещения данной страницы пользователем). Затем переменная `num_visits` передаётся в шаблон через переменную контекста `context`.
 
-<pre class="brush: html">&lt;h2&gt;Dynamic content&lt;/h2&gt;
+> **Примечание:** Можно проверить наличие поддержки куки в браузере (для примера, смотрите [Как использовать сессии](https://docs.djangoproject.com/en/1.10/topics/http/sessions/)), или разработать наш UI таким образом, чтобы это не имело значения.
 
-&lt;p&gt;The library has the following record counts:&lt;/p&gt;
-&lt;ul&gt;
-&lt;li&gt;&lt;strong&gt;Books:&lt;/strong&gt; \{{ num_books }}&lt;/li&gt;
-&lt;li&gt;&lt;strong&gt;Copies:&lt;/strong&gt; \{{ num_instances }}&lt;/li&gt;
-&lt;li&gt;&lt;strong&gt;Copies available:&lt;/strong&gt; \{{ num_instances_available }}&lt;/li&gt;
-&lt;li&gt;&lt;strong&gt;Authors:&lt;/strong&gt; \{{ num_authors }}&lt;/li&gt;
-&lt;/ul&gt;
+Для показа значения переменной, из следующего фрагмента добавьте нижнюю строчку кода в ваш шаблон главной страницы сайта (**/locallibrary/catalog/templates/index.html**), в его нижний раздел "Dynamic content":
 
-<strong>&lt;p&gt;You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.&lt;/p&gt;</strong>
-</pre>
-
-<p>Сохраните ваши изменения и перезапустите сервер. Данное значение должно изменяться всякий раз, когда вы обновляете страницу.</p>
+```html
+<h2>Dynamic content</h2>
 
+<p>The library has the following record counts:</p>
 <ul>
+<li><strong>Books:</strong> \{{ num_books }}</li>
+<li><strong>Copies:</strong> \{{ num_instances }}</li>
+<li><strong>Copies available:</strong> \{{ num_instances_available }}</li>
+<li><strong>Authors:</strong> \{{ num_authors }}</li>
 </ul>
 
-<h2 id="Итоги">Итоги</h2>
+<p>You have visited this page \{{ num_visits }}{% if num_visits == 1 %} time{% else %} times{% endif %}.</p>
+```
 
-<p>Вы узнали как применять сессии для улучшения взаимодействие с <em>анонимными</em> пользователями. </p>
+Сохраните ваши изменения и перезапустите сервер. Данное значение должно изменяться всякий раз, когда вы обновляете страницу.
 
-<p>В наших следующих статьях мы рассмотрим фреймворк аутентификации и авторизации (разрешение доступа, permission), и покажем вам как поддерживать пользовательские аккаунты.</p>
+## Итоги
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+Вы узнали как применять сессии для улучшения взаимодействие с _анонимными_ пользователями.
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/http/sessions/">Как использовать сессии</a> (Django docs)</li>
-</ul>
+В наших следующих статьях мы рассмотрим фреймворк аутентификации и авторизации (разрешение доступа, permission), и покажем вам как поддерживать пользовательские аккаунты.
+
+## Смотрите также
+
+- [Как использовать сессии](https://docs.djangoproject.com/en/1.10/topics/http/sessions/) (Django docs)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Generic_views", "Learn/Server-side/Django/Authentication", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/skeleton_website/index.md b/files/ru/learn/server-side/django/skeleton_website/index.md
index 67ee62eb3013fd..e6e6955231243c 100644
--- a/files/ru/learn/server-side/django/skeleton_website/index.md
+++ b/files/ru/learn/server-side/django/skeleton_website/index.md
@@ -10,183 +10,173 @@ tags:
   - Статья
 translation_of: Learn/Server-side/Django/skeleton_website
 ---
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</div>
+{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
 
-<p class="summary">Это вторая статья из нашего <a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">руководства по Django</a>, которая показывает, как можно создать "скелет" сайта, как фундамент, на котором можно строить всё остальное: настройки, ссылки, модели, контроллеры и представления.</p>
+Это вторая статья из нашего [руководства по Django](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website), которая показывает, как можно создать "скелет" сайта, как фундамент, на котором можно строить всё остальное: настройки, ссылки, модели, контроллеры и представления.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимо:</th>
-   <td>
-    <p><a href="/ru/docs/Learn/Server-side/Django/development_environment">Настройка окружения</a>. Прочитать первую статью <a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">руководства по Django</a>.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Научиться использовать инструменты Django для создания новых веб-сайтов.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимо: | [Настройка окружения](/ru/docs/Learn/Server-side/Django/development_environment). Прочитать первую статью [руководства по Django](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website). |
+| ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Научиться использовать инструменты Django для создания новых веб-сайтов.                                                                                                                             |
 
-<h2 id="Обзор">Обзор</h2>
+## Обзор
 
-<p>Эта статья показывает, как можно создать "скелет"(прототип) сайта, который затем можно расширить при помощи различных настроек, url адресов, моделей, представлений, и шаблонов (эти темы будут объясняться в последующих статьях).</p>
+Эта статья показывает, как можно создать "скелет"(прототип) сайта, который затем можно расширить при помощи различных настроек, url адресов, моделей, представлений, и шаблонов (эти темы будут объясняться в последующих статьях).
 
-<p>Алгоритм следующий:</p>
+Алгоритм следующий:
 
-<ol>
- <li>Использовать <code style="font-style: normal; font-weight: normal; line-height: 1.5;">django-admin</code> для создания папки проекта, шаблонов остальных файлов, и скрипта для управления проектом (<strong style="line-height: 1.5;">manage.py</strong>).</li>
- <li>Использовать <strong style="line-height: 1.5;">manage.py</strong><em> </em>для создания одного или нескольких <em>приложений</em>.
-  <div class="note">
-  <p><strong>Примечание: </strong>Сайт может состоять из одной или нескольких различных частей, например: основная часть, блог, вики, раздел загрузок, и так далее. Философия Django подталкивает разработчиков создавать эти части, как разные <strong>приложения</strong>, которые, если понадобится, могут быть использованы повторно в других проектах. </p>
-  </div>
- </li>
- <li>Зарегистрировать в настройках эти приложения, чтобы использовать их в проекте. </li>
- <li>Настроить маршруты url адресов для каждого из приложений.</li>
-</ol>
+1.  Использовать `django-admin` для создания папки проекта, шаблонов остальных файлов, и скрипта для управления проектом (**manage.py**).
+2.  Использовать **manage.py**\_ *для создания одного или нескольких *приложений\_.
 
-<p>Для <a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">Сайта местной библиотеки</a> папка сайта и проекта будет называться <em>locallibrary</em>, и у нас будет одно приложение с названием <em>catalog</em>. Верхняя структура проекта будет следующей:</p>
+    > **Примечание:**Сайт может состоять из одной или нескольких различных частей, например: основная часть, блог, вики, раздел загрузок, и так далее. Философия Django подталкивает разработчиков создавать эти части, как разные **приложения**, которые, если понадобится, могут быть использованы повторно в других проектах.
 
-<pre class="brush: bash"><em>locallibrary/         # Папка сайта</em>
-    <strong>manage.py         </strong># Скрипт для управления проектов (создан manage.py)
-    <em>locallibrary/     # Папка сайта/проекта </em>(создана manage.py)
-    <em>catalog/          # Папка приложения </em>(также создана manage.py)
-</pre>
+3.  Зарегистрировать в настройках эти приложения, чтобы использовать их в проекте.
+4.  Настроить маршруты url адресов для каждого из приложений.
 
-<p>Следующие разделы статьи разложат по полочкам этапы создания "скелета", и покажут вам, как можно проверить сделанные изменения. В конце статьи мы обсудим некоторые другие настройки сайта, которые можно назначить на этом этапе.</p>
+Для [Сайта местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) папка сайта и проекта будет называться _locallibrary_, и у нас будет одно приложение с названием _catalog_. Верхняя структура проекта будет следующей:
 
-<h2 id="Создание_проекта">Создание проекта</h2>
+```bash
+locallibrary/         # Папка сайта
+    manage.py         # Скрипт для управления проектов (создан manage.py)
+    locallibrary/     # Папка сайта/проекта (создана manage.py)
+    catalog/          # Папка приложения (также создана manage.py)
+```
 
-<p>Для начала откройте командную строку/терминал, перейдите в ту папку, куда вы хотите поместить проект Django(лучше в папке профиля пользователя C:\Users\user_name, при запуске командной строки используется именно эта директория), и создайте папку для вашего нового сайта (в данном случае: <em>locallibrary</em>). Затем войдите в эту папку, используя команду cd:</p>
+Следующие разделы статьи разложат по полочкам этапы создания "скелета", и покажут вам, как можно проверить сделанные изменения. В конце статьи мы обсудим некоторые другие настройки сайта, которые можно назначить на этом этапе.
 
-<pre class="brush: bash">mkdir locallibrary
-cd locallibrary</pre>
+## Создание проекта
 
-<p>Создайте новую папку, используя команду <code>django-admin startproject</code> как в примере ниже, и затем зайдите в созданную папку.</p>
+Для начала откройте командную строку/терминал, перейдите в ту папку, куда вы хотите поместить проект Django(лучше в папке профиля пользователя C:\Users\user_name, при запуске командной строки используется именно эта директория), и создайте папку для вашего нового сайта (в данном случае: _locallibrary_). Затем войдите в эту папку, используя команду cd:
 
-<pre class="brush: bash">  django-admin startproject locallibrary .
-cd locallibrary</pre>
+```bash
+mkdir locallibrary
+cd locallibrary
+```
 
-<p>Команда <code>django-admin</code> создаст файловую структуру, как в примере ниже:</p>
+Создайте новую папку, используя команду `django-admin startproject` как в примере ниже, и затем зайдите в созданную папку.
 
-<pre class="brush: bash"><em>locallibrary/</em>
-    <strong>manage.py</strong>
-    <em>locallibrary/</em>
+```bash
+  django-admin startproject locallibrary .
+cd locallibrary
+```
+
+Команда `django-admin` создаст файловую структуру, как в примере ниже:
+
+```bash
+locallibrary/
+    manage.py
+    locallibrary/
         settings.py
         urls.py
-        wsgi.py</pre>
+        wsgi.py
+```
 
-<p>Подпапка проекта <em>locallibrary</em> это ключевая директория нашего проекта: </p>
+Подпапка проекта _locallibrary_ это ключевая директория нашего проекта:
 
-<ul>
- <li><strong>settings.py</strong> содержит в себе все настройки проекта. Здесь мы регистрируем приложения, задаём размещение <em>статичных</em> файлов, настройки базы данных и так далее.  </li>
- <li><strong>urls.py</strong> задаёт ассоциации url адресов с представлениями. Несмотря на то, что этот файл может содержать <em>все</em> настройки url, обычно его делят на части, по одной на приложение, как будет показано далее. </li>
- <li><strong style="line-height: 1.5;">wsgi.py</strong> используется для налаживания связи между вашим Django приложением и веб-сервером. Вы можете воспринимать его, как утилиту.</li>
-</ul>
+- **settings.py** содержит в себе все настройки проекта. Здесь мы регистрируем приложения, задаём размещение _статичных_ файлов, настройки базы данных и так далее.
+- **urls.py** задаёт ассоциации url адресов с представлениями. Несмотря на то, что этот файл может содержать _все_ настройки url, обычно его делят на части, по одной на приложение, как будет показано далее.
+- **wsgi.py** используется для налаживания связи между вашим Django приложением и веб-сервером. Вы можете воспринимать его, как утилиту.
 
-<p>Скрипт <strong>manage.py</strong> используется для создания приложений, работы с базами данных и для запуска отладочного сервера. </p>
+Скрипт **manage.py** используется для создания приложений, работы с базами данных и для запуска отладочного сервера.
 
-<h2 id="Создание_приложения_Каталог">Создание приложения Каталог</h2>
+## Создание приложения Каталог
 
-<p>Выполнив предыдущие шаги, запустите следующую команду для создания приложения <em>catalog</em>, который будет размещён внутри папки locallibrary (команду необходимо выполнять из папки, в которой находится <strong>manage.py</strong>):</p>
+Выполнив предыдущие шаги, запустите следующую команду для создания приложения _catalog_, который будет размещён внутри папки locallibrary (команду необходимо выполнять из папки, в которой находится **manage.py**):
 
-<pre class="brush: bash">python3 manage.py startapp catalog</pre>
+```bash
+python3 manage.py startapp catalog
+```
 
-<div class="note">
-<p><strong>Примечание</strong>: приведённая выше команда справедлива для GNU Linux/Mac OS. На Windows команда должна иметь вид: <code>py -3 manage.py startapp catalog</code></p>
+> **Примечание:** приведённая выше команда справедлива для GNU Linux/Mac OS. На Windows команда должна иметь вид: `py -3 manage.py startapp catalog`
+>
+> Если вы работаете под Windows, заменяйте команду `python3` на `py -3` в этой и следующих статьях.
 
-<p>Если вы работаете под Windows, заменяйте команду <code>python3</code> на <code>py -3</code> в этой и следующих статьях.</p>
-</div>
+Эта команда создаст новую папку и наполнит её файлами различных частей приложения (выделенные **полужирным** ниже). Большинство файлов названы, исходя из их назначения (например контроллеры(views) должны находится во **views.py**, модели в **models.py**, тесты в **tests.py**, настройки административной части в **admin.py**, регистрация приложения в **apps.py**) и уже содержат некоторый шаблонный код для работы с вышеназванными объектами.
 
-<p>Эта команда создаст новую папку и наполнит её файлами различных частей приложения (выделенные <strong>полужирным </strong>ниже). Большинство файлов названы, исходя из их назначения (например контроллеры(views) должны находится во <strong>views.py</strong>, модели в <strong>models.py</strong>, тесты в <strong>tests.py</strong>, настройки административной части в <strong>admin.py</strong>, регистрация приложения в <strong>apps.py</strong>) и уже содержат некоторый шаблонный код для работы с вышеназванными объектами.</p>
+Обновлённая директория должна выглядеть следующим образом:
 
-<p>Обновлённая директория должна выглядеть следующим образом:</p>
-
-<pre class="brush: bash"><em>locallibrary/</em>
+```bash
+locallibrary/
     manage.py
-    <em>locallibrary/
-</em><strong>    <em>catalog/</em>
+    locallibrary/
+    catalog/
         admin.py
         apps.py
         models.py
         tests.py
         views.py
         __init__.py
-        <em>migrations/</em></strong>
-</pre>
+        migrations/
+```
 
-<p>Кроме перечисленных выше файлов были созданы:</p>
+Кроме перечисленных выше файлов были созданы:
 
-<ul>
- <li>Папка <em>migrations</em> используется, чтобы хранить"миграции" — файлы, которые позволяют вам автоматически обновлять базу данных по мере изменения моделей. </li>
- <li><strong>__init__.py</strong> — пустой файл для того, чтобы Django и Python распознавали папку как <a href="https://docs.python.org/3/tutorial/modules.html#packages">Python модуль </a>и позволяет нам использовать его объекты внутри других частей проекта.</li>
-</ul>
+- Папка _migrations_ используется, чтобы хранить"миграции" — файлы, которые позволяют вам автоматически обновлять базу данных по мере изменения моделей.
+- **\_\_init\_\_.py** — пустой файл для того, чтобы Django и Python распознавали папку как [Python модуль ](https://docs.python.org/3/tutorial/modules.html#packages)и позволяет нам использовать его объекты внутри других частей проекта.
 
-<div class="note">
-<p><strong>Примечание</strong>: Заметили, что некоторых файлов не хватает? В то время, как там нашли себе место файлы для контроллеров(views) и моделей(models), файлов для настройки url соотносителя, шаблонов, и статичных файлов создано не было. Далее мы покажем, как их создать (они не обязательны для каждого сайта, но нужны в данном примере).</p>
-</div>
+> **Примечание:** Заметили, что некоторых файлов не хватает? В то время, как там нашли себе место файлы для контроллеров(views) и моделей(models), файлов для настройки url соотносителя, шаблонов, и статичных файлов создано не было. Далее мы покажем, как их создать (они не обязательны для каждого сайта, но нужны в данном примере).
 
-<h2 id="Регистрация_папки_с_приложением">Регистрация папки с приложением</h2>
+## Регистрация папки с приложением
 
-<p>После создания приложения, нам нужно зарегистрировать его в проекте, чтобы различные утилиты затрагивали его своим действием (например при добавлении моделей в базу данных). Приложения регистрируются добавлением их названий в список <code>INSTALLED_APPS</code> в настройках проекта(который, как мы помним, называется <strong>settings.py</strong>). </p>
+После создания приложения, нам нужно зарегистрировать его в проекте, чтобы различные утилиты затрагивали его своим действием (например при добавлении моделей в базу данных). Приложения регистрируются добавлением их названий в список `INSTALLED_APPS` в настройках проекта(который, как мы помним, называется **settings.py**).
 
-<p>Откройте файл <strong>locallibrary/locallibrary/settings.py</strong> и найдите в нём список <code>INSTALLED_APPS</code> . Затем добавьте новую строку в конец списка, как показано <strong>полужирным </strong>ниже.</p>
+Откройте файл **locallibrary/locallibrary/settings.py** и найдите в нём список `INSTALLED_APPS` . Затем добавьте новую строку в конец списка, как показано **полужирным** ниже.
 
-<pre class="brush: bash">INSTALLED_APPS = [
+```bash
+INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-<strong>    'catalog.apps.CatalogConfig', </strong>
-]</pre>
+    'catalog.apps.CatalogConfig',
+]
+```
 
-<p>Новая строка указывает на файл конфигурации приложения (<code>CatalogConfig</code>), который был создан в <strong>/locallibrary/catalog/apps.py</strong> , когда вы создали приложение.</p>
+Новая строка указывает на файл конфигурации приложения (`CatalogConfig`), который был создан в **/locallibrary/catalog/apps.py** , когда вы создали приложение.
 
-<div class="note">
-<p><strong>Примечание</strong>: Легко заметить, что в <code>INSTALLED_APPS</code> уже подключено большое количество приложений (и объектов <code>MIDDLEWARE</code>, ниже в файле конфигурации). Они добавляют поддержку <a href="/ru/docs/Learn/Server-side/Django/Admin_site">админ-панели Django</a> и, как следствие, огромное количество функциональности (включая сессии, аутентификацию и прочее).</p>
-</div>
+> **Примечание:** Легко заметить, что в `INSTALLED_APPS` уже подключено большое количество приложений (и объектов `MIDDLEWARE`, ниже в файле конфигурации). Они добавляют поддержку [админ-панели Django](/ru/docs/Learn/Server-side/Django/Admin_site) и, как следствие, огромное количество функциональности (включая сессии, аутентификацию и прочее).
 
-<h2 id="Настройка_базы_данных">Настройка базы данных</h2>
+## Настройка базы данных
 
-<p>На этом шаге обычно указывают базу данных для будущего проекта — имеет смысл использовать для разработки и размещённого в Сети одну и ту же базу данных, по возможности, чтобы исключить различия в поведении.  Про различные варианты вы можете прочитать в документации Django в разделе <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#databases">Базы данных</a>. </p>
+На этом шаге обычно указывают базу данных для будущего проекта — имеет смысл использовать для разработки и размещённого в Сети одну и ту же базу данных, по возможности, чтобы исключить различия в поведении. Про различные варианты вы можете прочитать в документации Django в разделе [Базы данных](https://docs.djangoproject.com/en/1.10/ref/settings/#databases).
 
-<p>Мы будем использовать базу данных SQLite для этого проекта, потому что не предполагаем большое количество одновременных запросов на неё, а ещё потому, что для её настройки совсем не надо ничего делать! Вы можете видеть, что база данных уже настроена в <strong>settings.py</strong> (подробная информация указана ниже):</p>
+Мы будем использовать базу данных SQLite для этого проекта, потому что не предполагаем большое количество одновременных запросов на неё, а ещё потому, что для её настройки совсем не надо ничего делать! Вы можете видеть, что база данных уже настроена в **settings.py** (подробная информация указана ниже):
 
-<pre class="brush: python">DATABASES = {
+```python
+DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.sqlite3',
         'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
     }
 }
-</pre>
+```
 
-<p>Так как мы используем SQLite, то нам не нужно ничего делать.</p>
+Так как мы используем SQLite, то нам не нужно ничего делать.
 
-<p>Давайте продолжим!</p>
+Давайте продолжим!
 
-<h2 id="Другие_настройки_проекта">Другие настройки проекта</h2>
+## Другие настройки проекта
 
-<p>Файл <strong>settings.py</strong> так же применяется и для некоторых других настроек, но на данном шаге имеет смысл поменять разве что <a href="https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-TIME_ZONE">TIME_ZONE</a> — это значение должно быть представлено строкой, указанной в <a href="https://en.wikipedia.org/wiki/List_of_tz_database_time_zones">списке часовых поясов tz </a>(колонка TZ в таблице, в строке временной зоны, которая вам нужна). Измените <code>TIME_ZONE</code> на одну из строк из таблицы, которая отвечает вашему часовому поясу. Например:</p>
+Файл **settings.py** так же применяется и для некоторых других настроек, но на данном шаге имеет смысл поменять разве что [TIME_ZONE](https://docs.djangoproject.com/en/1.10/ref/settings/#std:setting-TIME_ZONE) — это значение должно быть представлено строкой, указанной в [списке часовых поясов tz ](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)(колонка TZ в таблице, в строке временной зоны, которая вам нужна). Измените `TIME_ZONE` на одну из строк из таблицы, которая отвечает вашему часовому поясу. Например:
 
-<pre class="brush: python">TIME_ZONE = 'Europe/Moscow'</pre>
+```python
+TIME_ZONE = 'Europe/Moscow'
+```
 
-<p>В файле присутствует две настройки, которые не нужно менять сейчас, но о назначении которых следует знать:</p>
+В файле присутствует две настройки, которые не нужно менять сейчас, но о назначении которых следует знать:
 
-<ul>
- <li><code>SECRET_KEY</code>. Это секретный ключ, который используется Django для поддержки безопасности сайта. Если вы раскроете этот ключ в процессе разработки кому-либо, то необходимо будет его сменить (возможно считать его с какого-либо файла на сервере или переменной окружения) когда будете размещать проект на сервер. </li>
- <li><code>DEBUG</code>. Включает подробные сообщения об ошибках, вместо стандартных HTTP статусов ответов. Должно быть изменено на <code>False</code> на сервере, так как эта информация очень много расскажет взломщикам. </li>
-</ul>
+- `SECRET_KEY`. Это секретный ключ, который используется Django для поддержки безопасности сайта. Если вы раскроете этот ключ в процессе разработки кому-либо, то необходимо будет его сменить (возможно считать его с какого-либо файла на сервере или переменной окружения) когда будете размещать проект на сервер.
+- `DEBUG`. Включает подробные сообщения об ошибках, вместо стандартных HTTP статусов ответов. Должно быть изменено на `False` на сервере, так как эта информация очень много расскажет взломщикам.
 
-<h2 id="Подключение_URL-адреса">Подключение URL-адреса</h2>
+## Подключение URL-адреса
 
-<p>При создании сайта, был создан файл сопоставления URL (<strong>urls.py</strong>) в корне проекта. Хотя можно использовать его для обработки всех URL адресов, более целесообразно подключать отдельные файлы сопоставлений для каждого приложения.</p>
+При создании сайта, был создан файл сопоставления URL (**urls.py**) в корне проекта. Хотя можно использовать его для обработки всех URL адресов, более целесообразно подключать отдельные файлы сопоставлений для каждого приложения.
 
-<p>Откройте <strong>locallibrary/locallibrary/urls.py</strong> и обратите внимание на закомментированный текст, который объясняет суть происходящего. </p>
+Откройте **locallibrary/locallibrary/urls.py** и обратите внимание на закомментированный текст, который объясняет суть происходящего.
 
-<pre class="brush: python">"""
+```python
+"""
 locallibrary URL Configuration
 
 The `urlpatterns` list routes URLs to views. For more information please see:
@@ -202,110 +192,111 @@ Including another URLconf
     1. Import the include() function: from django.conf.urls import url, include
     2. Add a URL to urlpatterns:  url(r'^blog/', include('blog.urls'))
 """
-<code>from django.urls import path</code>
+from django.urls import path
 from django.contrib import admin
 
 
 urlpatterns = [
-    <code>path('admin/', admin.site.urls),</code>
+    path('admin/', admin.site.urls),
 ]
-</pre>
+```
 
-<p>URL соотношения хранятся в переменной <code>urlpatterns</code>, которая является списком функций <code>path()</code>. Каждая <code>path()</code> функция или ассоциирует шаблон URL<em> </em>с контроллером(views) или же его с другим таким списком (во втором случае, первый URL становится "базовым" для других, которые определяются в дочернем списке). Список <code>urlpatterns</code> инициализирует список функции, которая, например, соотносит <em>admin/</em> с модулем <code>admin.site.urls</code> , который содержит собственный файл-соотноситель.</p>
+URL соотношения хранятся в переменной `urlpatterns`, которая является списком функций `path()`. Каждая `path()` функция или ассоциирует шаблон URL\_ _с контроллером(views) или же его с другим таким списком (во втором случае, первый URL становится "базовым" для других, которые определяются в дочернем списке). Список `urlpatterns` инициализирует список функции, которая, например, соотносит \_admin/_ с модулем `admin.site.urls` , который содержит собственный файл-соотноситель.
 
-<p>Добавьте строчки, приведённые ниже в низ файла <strong>urls.py</strong> , чтобы добавить новый элемент в список <code>urlpatterns</code>. Этот элемент содержит <code>url()</code> который направляет запросы с URL <code>catalog/</code> к модулю  <code>catalog.urls</code> (файл с относительным путём <strong>/catalog/urls.py</strong>).</p>
+Добавьте строчки, приведённые ниже в низ файла **urls.py** , чтобы добавить новый элемент в список `urlpatterns`. Этот элемент содержит `url()` который направляет запросы с URL `catalog/` к модулю `catalog.urls` (файл с относительным путём **/catalog/urls.py**).
 
-<pre class="brush: python"># Используйте include() чтобы добавлять URL из каталога приложения
-<code>from django.urls import include
-from django.urls import path</code>
+```python
+# Используйте include() чтобы добавлять URL из каталога приложения
+from django.urls import include
+from django.urls import path
 urlpatterns += [
-    <code> path('catalog/', include('catalog.urls')),</code>
+     path('catalog/', include('catalog.urls')),
 ]
-</pre>
+```
 
-<p>Теперь давайте перенаправим корневой URL нашего сайта (например <code>127.0.0.1:8000</code>) на URL <code>127.0.0.1:8000/catalog/</code>; это единственное приложение, которое мы собираемся использовать, поэтому это вполне разумно. Чтобы это использовать, нам понадобится специальная функция (<code>RedirectView</code>), которая принимает первым параметром новый относительный URL на который следует перенаправлять (<code>/catalog/</code>) когда указанный в функции <code>url()</code> адрес  соотносится с адресом запроса (корневой URL, в данном случае).</p>
+Теперь давайте перенаправим корневой URL нашего сайта (например `127.0.0.1:8000`) на URL `127.0.0.1:8000/catalog/`; это единственное приложение, которое мы собираемся использовать, поэтому это вполне разумно. Чтобы это использовать, нам понадобится специальная функция (`RedirectView`), которая принимает первым параметром новый относительный URL на который следует перенаправлять (`/catalog/`) когда указанный в функции `url()` адрес соотносится с адресом запроса (корневой URL, в данном случае).
 
-<p>Добавьте следующие строчки, тоже в конец файла:</p>
+Добавьте следующие строчки, тоже в конец файла:
 
-<pre class="brush: python"># Добавьте URL соотношения, чтобы перенаправить запросы с корневого URL, на URL приложения
+```python
+# Добавьте URL соотношения, чтобы перенаправить запросы с корневого URL, на URL приложения
 from django.views.generic import RedirectView
 urlpatterns += [
-    <code>path('', RedirectView.as_view(url='/catalog/', permanent=True)),</code>
-]</pre>
+    path('', RedirectView.as_view(url='/catalog/', permanent=True)),
+]
+```
 
-<p>Django не размещает <em>статические</em> файлы(CSS, JavaScript, и изображения) по умолчанию, но это было бы крайне полезно на этапе разработки нашего сайта. В самом конце нашего URL соотносителя, можно включить размещение статических файлов. </p>
+Django не размещает _статические_ файлы(CSS, JavaScript, и изображения) по умолчанию, но это было бы крайне полезно на этапе разработки нашего сайта. В самом конце нашего URL соотносителя, можно включить размещение статических файлов.
 
-<p>Добавьте последнюю часть в конец файла:</p>
+Добавьте последнюю часть в конец файла:
 
-<pre><code># Используйте static() чтобы добавить соотношения для статических файлов
+```
+# Используйте static() чтобы добавить соотношения для статических файлов
 # Только на период разработки
 from django.conf import settings
 from django.conf.urls.static import static
 
-urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code>
-</pre>
-
-<div class="note">
-<p><strong>Примечание</strong>: Существуют различные способы дополнения списка <code>urlpatterns</code> (в примере мы просто добавляли объект, используя оператор <code>+=</code> чтобы чётко разделить изначальный и дописанный код). Вместо этого, мы могли бы добавить соотношения внутрь определения переменной:</p>
+urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+```
 
-<pre>urlpatterns = [   path('admin/', admin.site.urls),
-path('catalog/', include('catalog.urls')),path('',
-RedirectView.as_view(url='/catalog/', permanent=True)), ] +
-<code>static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)</code></pre>
+> **Примечание:** Существуют различные способы дополнения списка `urlpatterns` (в примере мы просто добавляли объект, используя оператор `+=` чтобы чётко разделить изначальный и дописанный код). Вместо этого, мы могли бы добавить соотношения внутрь определения переменной:
+>
+> ```
+> urlpatterns = [   path('admin/', admin.site.urls),
+> path('catalog/', include('catalog.urls')),path('',
+> RedirectView.as_view(url='/catalog/', permanent=True)), ] +
+> static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
+> ```
+>
+> Кроме того, мы добавили import вниз файла (`from django.urls import include`) ,чтобы видеть, что мы добавили, но обычно все инструкции import добавляются в верхнюю часть файла.
 
-<p>Кроме того, мы добавили import вниз файла (<code>from django.urls import include</code>) ,чтобы видеть, что мы добавили, но обычно все инструкции import добавляются в верхнюю часть файла.</p>
-</div>
+Напоследок, создайте файл **urls.py** внутри папки **catalog**, и добавьте следующий код, чтобы определить (пустой) `urlpatterns`. Сюда мы будем добавлять наши URL соотношения, по мере разработки сайта.
 
-<p>Напоследок, создайте файл <strong>urls.py</strong> внутри папки <strong>catalog</strong>, и добавьте следующий код, чтобы определить (пустой) <code>urlpatterns</code>. Сюда мы будем добавлять наши URL соотношения, по мере разработки сайта. </p>
-
-<pre class="brush: python">from django.urls import path
+```python
+from django.urls import path
 from . import views
 
 
 urlpatterns = [
 
 ]
-</pre>
+```
 
-<h2 id="Тестирование_работы_скелета">Тестирование работы скелета</h2>
+## Тестирование работы скелета
 
-<p>На этом, мы создали прототип сайта. Пока сайт ничего не умеет делать, но стоит запустить его, чтобы убедиться, что мы ничего не сломали. </p>
+На этом, мы создали прототип сайта. Пока сайт ничего не умеет делать, но стоит запустить его, чтобы убедиться, что мы ничего не сломали.
 
-<p>До этого, нам предстоит впервые запустить <em> миграцию базы данных</em>. Это обновит нашу базу данных и добавит туда необходимые модели (и уберёт некоторые предупреждения, которые были бы показаны при попытке запуска).</p>
+До этого, нам предстоит впервые запустить _миграцию базы данных_. Это обновит нашу базу данных и добавит туда необходимые модели (и уберёт некоторые предупреждения, которые были бы показаны при попытке запуска).
 
-<h3 id="Запуск_миграций_базы_данных">Запуск миграций базы данных</h3>
+### Запуск миграций базы данных
 
-<p>Django использует Объектный Соотноситель Связей (ORM) чтобы соотносить определения моделей в Django приложении со структурами данных, которые используются базой данных. Когда мы меняем наши модели, Django отслеживает изменения и может создать файлы миграций (в папке <strong>/locallibrary/catalog/migrations/</strong>) чтобы применить соответствующие структуры данных к базе, чтобы та соответствовала модели.</p>
+Django использует Объектный Соотноситель Связей (ORM) чтобы соотносить определения моделей в Django приложении со структурами данных, которые используются базой данных. Когда мы меняем наши модели, Django отслеживает изменения и может создать файлы миграций (в папке **/locallibrary/catalog/migrations/**) чтобы применить соответствующие структуры данных к базе, чтобы та соответствовала модели.
 
-<p>При создании сайта, Django автоматически добавил несколько моделей, чтобы мы могли их использовать в админ-панели (о которой мы поговорим позже). Выполните следующие команды, чтобы создать нужные таблицы в базе данных, соответствующие этим моделям (убедитесь, что вы находитесь в папке с<strong> manage.py</strong>):</p>
+При создании сайта, Django автоматически добавил несколько моделей, чтобы мы могли их использовать в админ-панели (о которой мы поговорим позже). Выполните следующие команды, чтобы создать нужные таблицы в базе данных, соответствующие этим моделям (убедитесь, что вы находитесь в папке с **manage.py**):
 
-<pre class="brush: bash">python3 manage.py makemigrations
+```bash
+python3 manage.py makemigrations
 python3 manage.py migrate
-</pre>
+```
 
-<div class="warning">
-<p><strong>Предупреждение</strong>: Необходимо выполнять команды выше каждый раз, когда вы меняете модели таким образом, что структура таблицы изменится(включая добавления и удаления как отдельных полей, так и целых моделей).</p>
-</div>
+> **Предупреждение:** Необходимо выполнять команды выше каждый раз, когда вы меняете модели таким образом, что структура таблицы изменится(включая добавления и удаления как отдельных полей, так и целых моделей).
 
-<p><code>Команда makemigrations</code> <em>создаёт</em> (но не применяет) миграции для всех приложений, которые установлены в ваш проект (вы так же можете указать в конце имя конкретного приложения, чтобы создать миграции только для него). Это даёт вам возможность проверить код перед тем, как их применить — когда вы станете хорошо разбираться в Django, то сможете даже менять их!</p>
+`Команда makemigrations` _создаёт_ (но не применяет) миграции для всех приложений, которые установлены в ваш проект (вы так же можете указать в конце имя конкретного приложения, чтобы создать миграции только для него). Это даёт вам возможность проверить код перед тем, как их применить — когда вы станете хорошо разбираться в Django, то сможете даже менять их!
 
-<p>Команда <code>migrate</code> применяет созданные миграции к базе (Django отслеживает, какие миграции были созданы для данной базы).</p>
+Команда `migrate` применяет созданные миграции к базе (Django отслеживает, какие миграции были созданы для данной базы).
 
-<div class="note">
-<p><strong>Примечание</strong>: Посмотрите раздел <a href="https://docs.djangoproject.com/en/2.2/topics/migrations/">Миграции</a> в документации Django чтобы получить информацию о менее распространённых командах для управления миграциями.</p>
-</div>
+> **Примечание:** Посмотрите раздел [Миграции](https://docs.djangoproject.com/en/2.2/topics/migrations/) в документации Django чтобы получить информацию о менее распространённых командах для управления миграциями.
 
-<h3 id="Запуск_сайта">Запуск сайта</h3>
+### Запуск сайта
 
-<p>Во время разработки, вы можете проверить свой сайт, разместив его на <em>встроенном отладочном сервере</em>, и просмотрев его в своём браузере. </p>
+Во время разработки, вы можете проверить свой сайт, разместив его на _встроенном отладочном сервере_, и просмотрев его в своём браузере.
 
-<div class="note">
-<p><strong>Примечание</strong>: Отладочный веб-сервер не настолько функционален и производителен, для постоянного размещения , но это самый простой способ запустить свой сайт на Django и проверить его на наличие ошибок. По умолчанию, он разместит сайт на вашем компьютере (<code>http://127.0.0.1:8000/)</code>, но вы так же можете указать различные компьютеры в вашей сети для этой цели. Для получения большего количества информации загляните в раздел <a href="https://docs.djangoproject.com/en/2.2/ref/django-admin/">django-admin и manage.py: отладочный сервер</a> документации Django.</p>
-</div>
+> **Примечание:** Отладочный веб-сервер не настолько функционален и производителен, для постоянного размещения , но это самый простой способ запустить свой сайт на Django и проверить его на наличие ошибок. По умолчанию, он разместит сайт на вашем компьютере (`http://127.0.0.1:8000/)`, но вы так же можете указать различные компьютеры в вашей сети для этой цели. Для получения большего количества информации загляните в раздел [django-admin и manage.py: отладочный сервер](https://docs.djangoproject.com/en/2.2/ref/django-admin/) документации Django.
 
-<p>Запустите веб-сервер, используя команду <em>runserver</em> (в той же папке, что и <strong>manage.py</strong>):</p>
+Запустите веб-сервер, используя команду _runserver_ (в той же папке, что и **manage.py**):
 
-<pre class="brush: bash">python3 manage.py runserver
+```bash
+python3 manage.py runserver
 
  Performing system checks...
 
@@ -314,44 +305,35 @@ python3 manage.py migrate
  Django version 1.10, using settings 'locallibrary.settings'
  Starting development server at http://127.0.0.1:8000/
  Quit the server with CTRL-BREAK.
-</pre>
-
-<p>Когда сервер запустится, вы сможете посетить сайт по адресу <code>http://127.0.0.1:8000/</code> в вашем веб-браузере. Вы должны увидеть страницу с ошибкой, навроде этой:</p>
+```
 
-<p><img alt="Django debug page for a 404 not found error" src="https://mdn.mozillademos.org/files/14009/django_404_debug_page.png" style="display: block; height: 545px; margin: 0px auto; width: 871px;"></p>
+Когда сервер запустится, вы сможете посетить сайт по адресу `http://127.0.0.1:8000/` в вашем веб-браузере. Вы должны увидеть страницу с ошибкой, навроде этой:
 
-<p>Не волнуйтесь! Эта страница должна появиться и сообщить нам, что мы ещё не настроили ни одной страницы в модуле <code>catalogs.urls</code> (на который мы были перенаправлены запросили корневой URL сайта). </p>
+![Django debug page for a 404 not found error](https://mdn.mozillademos.org/files/14009/django_404_debug_page.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Показанная выше страница открывает нам одно из замечательных свойств Django — автоматические отчёты об ошибках. На экране с ошибкой отображается множество полезной информации, когда страница не найдена, или ошибка была вызвана кодом. В данном случае, мы видим, что запрошенный URL  не соответствует ни одному шаблону (из указанных). Подобные отчёты будут выключены при DEBUG=False (когда мы разместим приложение в Сеть), в этом случае будет показана менее информативная, но более дружелюбная к пользователю страница(которую вам надо будет создать - прим. переводчика).</p>
-</div>
+Не волнуйтесь! Эта страница должна появиться и сообщить нам, что мы ещё не настроили ни одной страницы в модуле `catalogs.urls` (на который мы были перенаправлены запросили корневой URL сайта).
 
-<p>На данном этапе, мы поняли, что Django работает должным образом! </p>
+> **Примечание:** Показанная выше страница открывает нам одно из замечательных свойств Django — автоматические отчёты об ошибках. На экране с ошибкой отображается множество полезной информации, когда страница не найдена, или ошибка была вызвана кодом. В данном случае, мы видим, что запрошенный URL не соответствует ни одному шаблону (из указанных). Подобные отчёты будут выключены при DEBUG=False (когда мы разместим приложение в Сеть), в этом случае будет показана менее информативная, но более дружелюбная к пользователю страница(которую вам надо будет создать - прим. переводчика).
 
-<div class="note">
-<p><strong>Примечание</strong>: вам следует перезапускать миграцию и заново тестировать сайт, после того как вы делаете важные изменения. Поверьте, это не займёт много времени!</p>
-</div>
+На данном этапе, мы поняли, что Django работает должным образом!
 
-<h2 id="Домашнее_задание">Домашнее задание</h2>
+> **Примечание:** вам следует перезапускать миграцию и заново тестировать сайт, после того как вы делаете важные изменения. Поверьте, это не займёт много времени!
 
-<p>Папка <strong>catalog/</strong> содержит файлы контроллеров(views), моделей(models), и других частей приложения. Просмотрите эти файлы. </p>
+## Домашнее задание
 
-<p>Как было написано выше, URL соотноситель для админ-панели был подключён в файле <strong>urls.py</strong>. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).</p>
+Папка **catalog/** содержит файлы контроллеров(views), моделей(models), и других частей приложения. Просмотрите эти файлы.
 
-<ul>
-</ul>
+Как было написано выше, URL соотноситель для админ-панели был подключён в файле **urls.py**. Войдите в административную часть и посмотрите, что произойдёт (вы можете найти URL из соотношения выше).
 
-<h2 id="Подводя_итоги">Подводя итоги</h2>
+## Подводя итоги
 
-<p>Теперь вы создали полноценный скелет веб-приложения, который теперь вы можете расширить url соотносителями, контроллерами(views) и моделями(models).</p>
+Теперь вы создали полноценный скелет веб-приложения, который теперь вы можете расширить url соотносителями, контроллерами(views) и моделями(models).
 
-<p>Теперь скелет <a href="/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website">Сайта местной библиотеки</a> сделан и запущен, теперь самое время начать писать код, который научит сайт делать то, что он должен делать. </p>
+Теперь скелет [Сайта местной библиотеки](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) сделан и запущен, теперь самое время начать писать код, который научит сайт делать то, что он должен делать.
 
-<h2 id="Также_посмотрите_эти_статьи">Также посмотрите эти статьи</h2>
+## Также посмотрите эти статьи
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/2.2/intro/tutorial01/">Пишем своё первое приложение на Django - часть 1</a>  (документация Django)</li>
- <li><a href="https://docs.djangoproject.com/en/2.2/ref/applications/">Приложения</a> (документация Django). содержит информацию о настройке приложений.</li>
-</ul>
+- [Пишем своё первое приложение на Django - часть 1](https://docs.djangoproject.com/en/2.2/intro/tutorial01/) (документация Django)
+- [Приложения](https://docs.djangoproject.com/en/2.2/ref/applications/) (документация Django). содержит информацию о настройке приложений.
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Tutorial_local_library_website", "Learn/Server-side/Django/Models", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/testing/index.md b/files/ru/learn/server-side/django/testing/index.md
index ca00b91754cf98..3212479f284803 100644
--- a/files/ru/learn/server-side/django/testing/index.md
+++ b/files/ru/learn/server-side/django/testing/index.md
@@ -14,61 +14,47 @@ tags:
   - юнит-тесты
 translation_of: Learn/Server-side/Django/Testing
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</div>
+Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надёжно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации _юнит-тестирования_ вашего сайта при помощи фреймворка Django для тестов.
 
-<p class="summary">Сайты, в процессе развития и разработки, становится все сложнее тестировать вручную. Кроме такого тестирования, сложными становятся внутренние взаимодействия между компонентами - внесение небольшого изменения в одной части приложения влияет на другие. При этом, чтобы все продолжало работать нужно вносить все больше и больше изменений и, желательно так, чтобы не добавлялись новые ошибки. Одним из способов который позволяет смягчить последствия добавления изменений, является внедрение в разработку автоматического тестирования - оно должно просто и надёжно запускаться каждый раз, когда вы вносите изменения в свой код. Данное руководство рассматривает вопросы автоматизации<em> юнит-тестирования</em> вашего сайта при помощи фреймворка Django для тестов.</p>
+| Требования: | Изучить все предыдущие темы руководства, включая [Руководство Django Часть 9: Работа с формами](/ru/docs/Learn/Server-side/Django/Forms). |
+| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понимать как создавать юнит тесты для сайта на основе Django.                                                                             |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Изучить все предыдущие темы руководства, включая <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство Django Часть 9: Работа с формами</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понимать как создавать юнит тесты для сайта на основе Django.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+[LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website) в настоящий момент содержит страницы для показа списков всех книг, авторов, подробной информации о книгах `Book` и авторах `Author`, а также страницу для обновления информации об экземпляре книги `BookInstance` и, кроме того, страницы для создания, обновления и удаления записей модели `Author` (и модели `Book`, в том случае, если вы выполнили домашнее задание в руководстве [работа с формами](/ru/docs/Learn/Server-side/Django/Forms)). Даже в случае небольшого сайта, ручной переход на каждую страницу и _беглая_ проверка того, что все работает как следует, может занять несколько минут. В процессе внесения изменений и роста сайта требуемое время для проведения проверок будет только возрастать. Если бы мы продолжили в том же духе, то в какой-то момент на проведение тестов мы тратили бы больше времени, чем на написание кода и внесение изменений.
 
-<p><a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a> в настоящий момент содержит страницы для показа списков всех книг, авторов, подробной информации о книгах <code>Book</code> и авторах <code>Author</code>, а также страницу для обновления информации об экземпляре книги <code>BookInstance</code> и, кроме того, страницы для создания, обновления и удаления записей модели <code>Author</code> (и модели <code>Book</code>, в том случае, если вы выполнили домашнее задание в руководстве <a href="/en-US/docs/Learn/Server-side/Django/Forms">работа с формами</a>). Даже в случае небольшого сайта, ручной переход на каждую страницу и <em>беглая</em> проверка того, что все работает как следует, может занять несколько минут. В процессе внесения изменений и роста сайта требуемое время для проведения проверок будет только возрастать. Если бы мы продолжили в том же духе, то в какой-то момент на проведение тестов мы тратили бы больше времени, чем на написание кода и внесение изменений.</p>
+Автоматические тесты могут серьёзно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий (человек никогда не сможет тестировать так надёжно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).
 
-<p>Автоматические тесты могут серьёзно помочь нам справиться с этой проблемой! Очевидными преимуществами в таком случае являются значительно меньшие временные затраты на проведение тестов, их подробное выполнение, а кроме того, тесты имеют постоянную функциональность, или последовательность действий  (человек никогда не сможет тестировать так надёжно!). В связи с быстротой их выполнения автоматические тесты можно выполнять более часто, а если они провалятся, то укажут на соответствующее место (где что-то пошло не так как ожидалось).</p>
+Кроме того, автоматические тесты могут действовать как первый "настоящий пользователь" вашего кода, заставляя вас строго следить за объявлениями и документированием поведения вашего сайта. Тесты часто являются основой для создания примеров вашего кода и документации. По этим причинам иногда некоторые процессы разработки программного обеспечения начинаются с определения тестов и их реализации, а уже после этого следует написание кода который должен иметь соответствующее поведение (так называемая разработка [на основе тестов](https://en.wikipedia.org/wiki/Test-driven_development) и [на основе поведения](https://en.wikipedia.org/wiki/Behavior-driven_development)).
 
-<p>Кроме того, автоматические тесты могут действовать как первый "настоящий пользователь" вашего кода, заставляя вас строго следить за объявлениями и документированием поведения вашего сайта. Тесты часто являются основой для создания примеров вашего кода и документации. По этим причинам иногда некоторые процессы разработки программного обеспечения начинаются с определения тестов и их реализации, а уже после этого следует написание кода который должен иметь соответствующее поведение (так называемая разработка <a href="https://en.wikipedia.org/wiki/Test-driven_development">на основе тестов</a> и <a href="https://en.wikipedia.org/wiki/Behavior-driven_development">на основе поведения</a>).</p>
+Данное руководство показывает процесс создания автоматических тестов в Django при помощи добавления их к разработке сайта _LocalLibrary_.
 
-<p>Данное руководство показывает процесс создания автоматических тестов в Django при помощи добавления их к разработке сайта <em>LocalLibrary</em>.</p>
+### Типы тестирования
 
-<h3 id="Типы_тестирования">Типы тестирования</h3>
+Существует несколько типов, уровней, классификаций тестов и тестовых приёмов. Наиболее важными автоматическими тестами являются:
 
-<p>Существует несколько типов, уровней, классификаций тестов и тестовых приёмов. Наиболее важными автоматическими тестами являются:</p>
+- Юнит-тесты
+  - : Проверяют функциональное поведение для отдельных компонентов, часто классов и функций.
+- **Регрессионное тестирование**
+  - : Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесён снова с появлением новых изменений в коде.
+- Интеграционные тесты
+  - : Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращая внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.
 
-<dl>
- <dt>Юнит-тесты</dt>
- <dd>Проверяют функциональное поведение для отдельных компонентов, часто классов и функций.</dd>
- <dt><strong>Регрессионное тестирование</strong></dt>
- <dd>Тесты которые воспроизводят исторические ошибки (баги). Каждый тест вначале запускается для проверки того, что баг был исправлен, а затем перезапускается для того, чтобы убедиться, что он не был внесён снова с появлением новых изменений в коде.</dd>
- <dt>Интеграционные тесты</dt>
- <dd>Проверка совместной работы групп компонентов. Данные тесты отвечают за совместную работу между компонентами, не обращая внимания на внутренние процессы в компонентах. Они проводятся как для простых групп компонентов, так и для целых веб-сайтов.</dd>
-</dl>
+> **Примечание:**К другим типам тестов относятся методы чёрного ящика, белого ящика, ручные, автоматические, канареечные (canary), дымные (smoke), соответствия (conformance), принятия (acceptance), функциональные (functional), системные (system), эффективности (performance), загрузочные (load) и стресс-тесты (stress tests).
 
-<div class="note">
-<p><strong>Примечание:  </strong>К другим типам тестов относятся методы чёрного ящика, белого ящика, ручные, автоматические, канареечные (canary), дымные (smoke), соответствия (conformance), принятия (acceptance), функциональные (functional),  системные (system), эффективности (performance), загрузочные (load) и стресс-тесты (stress tests).</p>
-</div>
+### Что Django предоставляет для тестирования?
 
-<h3 id="Что_Django_предоставляет_для_тестирования">Что Django предоставляет для тестирования?</h3>
+Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоёв – от HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.
 
-<p>Тестирование сайта это сложная задача, потому что она состоит их нескольких логических слоёв – от  HTTP-запроса и запроса к моделям, до валидации формы и их обработки, а кроме того, рендеринга шаблонов страниц.</p>
+Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python [`unittest`](https://docs.python.org/3/library/unittest.html#module-unittest "(in Python v3.5)"). Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API ([LiveServerTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase)) и инструменты [для применения различных фреймворков тестирования](https://docs.djangoproject.com/en/1.10/topics/testing/advanced/#other-testing-frameworks), например вы можете подключить популярный фреймворк [Selenium](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) для имитации поведения пользователя в реальном браузере.
 
-<p>Django предоставляет фреймворк для создания тестов, построенного на основе иерархии классов, которые, в свою очередь, зависят от стандартной библиотеки Python  <code><a href="https://docs.python.org/3/library/unittest.html#module-unittest" title="(in Python v3.5)">unittest</a></code>. Несмотря на название, данный фреймворк подходит и для юнит-, и для интеграционного тестирования. Фреймворк Django добавляет методы API и инструменты, которые помогают тестировать как веб так и, специфическое для Django, поведение. Это позволяет вам имитировать URL-запросы, добавление тестовых данных, а также проводить проверку выходных данных ваших приложений. Кроме того, Django предоставляет API (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>) и инструменты <a href="https://docs.djangoproject.com/en/1.10/topics/testing/advanced/#other-testing-frameworks">для применения различных фреймворков тестирования</a>, например вы можете подключить популярный фреймворк <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> для имитации поведения пользователя в реальном браузере.</p>
+Для написания теста вы должны наследоваться от любого из классов тестирования Django (или _юниттеста_) ([SimpleTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#simpletestcase), [TransactionTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#transactiontestcase), [TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase), [LiveServerTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase)), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения `True` или `False`, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определённом в классе, как показано ниже.
 
-<p>Для написания теста вы должны наследоваться от любого из классов тестирования Django (или <em>юниттеста</em>)  (<a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#simpletestcase">SimpleTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#transactiontestcase">TransactionTestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#liveservertestcase">LiveServerTestCase</a>), а затем реализовать отдельные методы проверки кода (тесты это функции-"утверждения", которые проверяют, что результатом выражения являются значения <code>True</code> или <code>False</code>, или что два значения равны и так далее). Когда вы запускаете тест, фреймворк выполняет соответствующие тестовые методы в вашем классе-наследнике. Методы тестирования запускаются независимо друг от друга, начиная с метода настроек и/или завершаясь методом разрушения (tear-down), определённом в классе, как показано ниже.</p>
-
-<pre class="brush: python">class YourTestClass(TestCase):
+```python
+class YourTestClass(TestCase):
 
     def setUp(self):
         # Установки запускаются перед каждым тестом
@@ -83,23 +69,22 @@ translation_of: Learn/Server-side/Django/Testing
 
     def test_something_that_will_fail(self):
         self.assertTrue(False)
-</pre>
+```
 
-<p>Самый подходящий базовый класс для большинства тестов это <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a>.  Этот класс создаёт чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client" title="django.test.Client">Клиент</a>, который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">TestCase</a>.</p>
+Самый подходящий базовый класс для большинства тестов это [django.test.TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase). Этот класс создаёт чистую базу данных перед запуском своих методов, а также запускает каждую функцию тестирования в его собственной транзакции. У данного класса также имеется тестовый [Клиент](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client "django.test.Client"), который вы можете использовать для имитации взаимодействия пользователя с кодом на уровне отображения. В следующих разделах мы сконцентрируемся на юнит-тестах, которые будут созданы на основе класса [TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase).
 
-<div class="note">
-<p><strong>Примечание:</strong> Класс <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase">django.test.TestCase</a> очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображением). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.</p>
-</div>
+> **Примечание:** Класс [django.test.TestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#testcase) очень удобен, но он может приводить к замедленной работе в некоторых случаях (не для каждого теста необходимо настраивать базу данных, или имитировать взаимодействие с отображением). Когда вы познакомитесь с работой данного класса, то сможете заменить некоторые из ваших тестов на более простые классы тестирования.
 
-<h3 id="Что_вы_должны_тестировать">Что вы должны тестировать?</h3>
+### Что вы должны тестировать?
 
-<p>Вы должны тестировать все аспекты, касающиеся вашего кода, но не библиотеки, или функциональность, предоставляемые Python, или Django.</p>
+Вы должны тестировать все аспекты, касающиеся вашего кода, но не библиотеки, или функциональность, предоставляемые Python, или Django.
 
-<p>Например, рассмотрим модель <code>Author</code>, определённую ниже. Вам не нужно проверять тот факт, что <code>first_name</code> и <code>last_name</code> были сохранены в базу данных как <code>CharField</code>, потому что за это отвечает непосредственно Django (хотя конечно, на практике  в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле <code>date_of_birth</code> является датой, поскольку это тоже часть реализации Django.</p>
+Например, рассмотрим модель `Author`, определённую ниже. Вам не нужно проверять тот факт, что `first_name` и `last_name` были сохранены в базу данных как `CharField`, потому что за это отвечает непосредственно Django (хотя конечно, на практике в течение разработки вы косвенно будете проверять данную функциональность). Тоже касается и, например, проверки того, что поле `date_of_birth` является датой, поскольку это тоже часть реализации Django.
 
-<p>Вы должны проверить текст для меток (<em>First name, Last_name, Date of birth, Died</em>), и размер поля, выделенного для текста (<em>100 символов</em>), потому что они являются частью вашей разработки и чем-то, что может сломаться/измениться в будущем.</p>
+Вы должны проверить текст для меток (_First name, Last_name, Date of birth, Died_), и размер поля, выделенного для текста (_100 символов_), потому что они являются частью вашей разработки и чем-то, что может сломаться/измениться в будущем.
 
-<pre class="brush: python">class Author(models.Model):
+```python
+class Author(models.Model):
     first_name = models.CharField(max_length=100)
     last_name = models.CharField(max_length=100)
     date_of_birth = models.DateField(null=True, blank=True)
@@ -109,50 +94,50 @@ translation_of: Learn/Server-side/Django/Testing
         return reverse('author-detail', args=[str(self.id)])
 
     def __str__(self):
-        return '%s, %s' % (self.last_name, self.first_name)</pre>
+        return '%s, %s' % (self.last_name, self.first_name)
+```
 
-<p>Подобным же образом вы должны убедиться, что методы <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code> и <code style="font-style: normal; font-weight: normal;">__str__()</code> ведут себя как требуется, потому что они являются частью вашей бизнес логики. В случае функции <code style="font-style: normal; font-weight: normal;">get_absolute_url()</code> вы можете быть уверены, что функция из Django <code>reverse()</code> была реализована правильно и, следовательно, вы тестируете только то, чтобы соответствующий вызов в отображении был правильно определён.</p>
+Подобным же образом вы должны убедиться, что методы `get_absolute_url()` и `__str__()` ведут себя как требуется, потому что они являются частью вашей бизнес логики. В случае функции `get_absolute_url()` вы можете быть уверены, что функция из Django `reverse()` была реализована правильно и, следовательно, вы тестируете только то, чтобы соответствующий вызов в отображении был правильно определён.
 
-<div class="note">
-<p><strong>Примечание:</strong> Проницательные читатели могут заметить, что мы можем некоторым образом ограничить дату рождения и смерти какими-то граничными значениями и выполнять проверку, чтобы дата смерти шла после рождения. В Django данное ограничение может быть добавлено к вашим классам форм (хотя вы и можете определить валидаторы для этих полей, они будут проявлять себя только на уровне форм, а не уровне модели).</p>
-</div>
+> **Примечание:** Проницательные читатели могут заметить, что мы можем некоторым образом ограничить дату рождения и смерти какими-то граничными значениями и выполнять проверку, чтобы дата смерти шла после рождения. В Django данное ограничение может быть добавлено к вашим классам форм (хотя вы и можете определить валидаторы для этих полей, они будут проявлять себя только на уровне форм, а не уровне модели).
 
-<p>Ну что же, усвоив данную информацию, давайте перейдём к процессу определения и запуска тестов.</p>
+Ну что же, усвоив данную информацию, давайте перейдём к процессу определения и запуска тестов.
 
-<h2 id="Обзор_структуры_тестов">Обзор структуры тестов</h2>
+## Обзор структуры тестов
 
-<p>Перед тем как мы перейдём к тому "что тестировать", давайте кратко взглянем на моменты <em>где</em> и <em>как</em> определяются тесты.</p>
+Перед тем как мы перейдём к тому "что тестировать", давайте кратко взглянем на моменты _где_ и _как_ определяются тесты.
 
-<p>Django использует юнит-тестовый модуль - <a href="https://docs.python.org/3/library/unittest.html#unittest-test-discovery" title="(in Python v3.5)">встроенный "обнаружитель" тестов</a>, который находит тесты в текущей рабочей директории, в любом файле с шаблонным именем<strong> test*.py</strong>. Предоставляя соответствующие имена файлов, вы можете работать с любой структурой которая вас устраивает. Мы рекомендуем создать пакет для вашего тестирующего кода и, следовательно, отделить файлы моделей, отображений, форм и любые другие, от кода который будет использоваться для тестов. Например:</p>
+Django использует юнит-тестовый модуль - [встроенный "обнаружитель" тестов](https://docs.python.org/3/library/unittest.html#unittest-test-discovery "(in Python v3.5)"), который находит тесты в текущей рабочей директории, в любом файле с шаблонным именем **test\*.py**. Предоставляя соответствующие имена файлов, вы можете работать с любой структурой которая вас устраивает. Мы рекомендуем создать пакет для вашего тестирующего кода и, следовательно, отделить файлы моделей, отображений, форм и любые другие, от кода который будет использоваться для тестов. Например:
 
-<pre>catalog/
+```
+catalog/
   /tests/
     __init__.py
     test_models.py
     test_forms.py
     test_views.py
-</pre>
-
-<p>В проекте <em>LocalLibrary</em> создайте файловую структуру, указанную выше. Файл <strong>__init__.py</strong> должен быть пустым (так мы говорим Питону, что данная директория является пакетом). Вы можете создать три тестовых файла при помощи копирования и переименования файла-образца <strong>/catalog/tests.py</strong>.</p>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Скелет тестового файла <strong>/catalog/tests.py</strong> был создан автоматически когда мы выполняли <a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">построение скелета сайта Django</a>. Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придёте к очень большому и неуправляемому файлу тестирования.</p>
+В проекте _LocalLibrary_ создайте файловую структуру, указанную выше. Файл **\_\_init\_\_.py** должен быть пустым (так мы говорим Питону, что данная директория является пакетом). Вы можете создать три тестовых файла при помощи копирования и переименования файла-образца **/catalog/tests.py**.
 
-<p>Можете удалить данный файл, поскольку больше он нам не понадобится.</p>
-</div>
+> **Примечание:** Скелет тестового файла **/catalog/tests.py** был создан автоматически когда мы выполняли [построение скелета сайта Django](/ru/docs/Learn/Server-side/Django/skeleton_website). Является абсолютно "легальным" действием - поместить все ваши тесты в данный файл, тем не менее, если вы проводите тесты "правильно", то вы очень быстро придёте к очень большому и неуправляемому файлу тестирования.
+>
+> Можете удалить данный файл, поскольку больше он нам не понадобится.
 
-<p>Откройте <strong>/catalog/tests/test_models.py</strong>. Файл должен импортировать <code>django.test.TestCase</code>, как показано ниже:</p>
+Откройте **/catalog/tests/test_models.py**. Файл должен импортировать `django.test.TestCase`, как показано ниже:
 
-<pre class="brush: python">from django.test import TestCase
+```python
+from django.test import TestCase
 
 # Поместите ваш код тестов здесь
-</pre>
+```
 
-<p>Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функциональности, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете её придерживаться.</p>
+Вы часто будете добавлять соответствующий тестовый класс для каждой модели/отображения/формы с отдельными методами проверки каждой отдельной функциональности. В каких-то случаях вы захотите иметь отдельный класс для тестирования какого-то особого варианта работы, или функциональности, с отдельными функциями тестирования, которые будут проверять элемент/элементы данного варианта (например, мы можем создать отдельный класс тестирования для проверки того, что поле валидно, - функции данного класса будут проверять каждый неверный вариант использования). Опять же, структура файлов и пакетов полностью зависит от вас и будет лучше если вы будете её придерживаться.
 
-<p>Добавьте тестовый класс, показанный ниже, в нижнюю часть файла. Данный класс демонстрирует как создать класс тестирования при помощи наследования от <code>TestCase</code>.</p>
+Добавьте тестовый класс, показанный ниже, в нижнюю часть файла. Данный класс демонстрирует как создать класс тестирования при помощи наследования от `TestCase`.
 
-<pre class="brush: python">class YourTestClass(TestCase):
+```python
+class YourTestClass(TestCase):
 
     @classmethod
     def setUpTestData(cls):
@@ -173,47 +158,45 @@ translation_of: Learn/Server-side/Django/Testing
 
     def test_one_plus_one_equals_two(self):
         print("Method: test_one_plus_one_equals_two.")
-        self.assertEqual(1 + 1, 2)</pre>
+        self.assertEqual(1 + 1, 2)
+```
 
-<p>Этот класс определяет два метода которые вы можете использовать для дотестовой настройки (например, создание какой-либо модели, или других объектов, которые вам понадобятся):</p>
+Этот класс определяет два метода которые вы можете использовать для дотестовой настройки (например, создание какой-либо модели, или других объектов, которые вам понадобятся):
 
-<ul>
- <li><code>setUpTestData()</code> вызывается каждый раз перед запуском теста на уровне настройки всего класса. Вы должны использовать данный метод для создания объектов, которые не будут модифицироваться/изменяться в каком-либо из тестовых методов.</li>
- <li><code>setUp()</code> вызывается перед каждой тестовой функцией для настройки объектов, которые могут изменяться во время тестов (каждая функция тестирования будет получать "свежую" версию данных объектов).</li>
-</ul>
+- `setUpTestData()` вызывается каждый раз перед запуском теста на уровне настройки всего класса. Вы должны использовать данный метод для создания объектов, которые не будут модифицироваться/изменяться в каком-либо из тестовых методов.
+- `setUp()` вызывается перед каждой тестовой функцией для настройки объектов, которые могут изменяться во время тестов (каждая функция тестирования будет получать "свежую" версию данных объектов).
 
-<div class="note">
-<p><strong>Примечание</strong>. Классы тестирования также содержат метод <code>tearDown()</code>, который мы пока не используем. Этот метод не особенно полезен для тестирования баз данных, поскольку базовый класс <code>TestCase</code> автоматически разрывает соединения с ними.</p>
-</div>
+> **Примечание:** . Классы тестирования также содержат метод `tearDown()`, который мы пока не используем. Этот метод не особенно полезен для тестирования баз данных, поскольку базовый класс `TestCase` автоматически разрывает соединения с ними.
 
-<p>Далее идут несколько методов, которые используют функции <code>Assert</code>, проверяющие условия "истинно" (true), "ложно" (false) или равенство (<code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code>). Если условия не выполняются как ожидалось, то это приводит к провалу теста и выводу соответствующего сообщения об ошибке на консоль.</p>
+Далее идут несколько методов, которые используют функции `Assert`, проверяющие условия "истинно" (true), "ложно" (false) или равенство (`AssertTrue`, `AssertFalse`, `AssertEqual`). Если условия не выполняются как ожидалось, то это приводит к провалу теста и выводу соответствующего сообщения об ошибке на консоль.
 
-<p>Функции проверки утверждений <code>AssertTrue</code>, <code>AssertFalse</code>, <code>AssertEqual</code> реализованы в <strong>unittest</strong>.  В данном фреймворке существуют и другие подобные функции, а кроме того, <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#assertions">специфические для Django функции</a> проверки, например, перехода из/к отображению (<code>assertRedirects</code>), проверки использования какого-то конкретного шаблона (<code>assertTemplateUsed</code>) и так далее.</p>
+Функции проверки утверждений `AssertTrue`, `AssertFalse`, `AssertEqual` реализованы в **unittest**. В данном фреймворке существуют и другие подобные функции, а кроме того, [специфические для Django функции](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#assertions) проверки, например, перехода из/к отображению (`assertRedirects`), проверки использования какого-то конкретного шаблона (`assertTemplateUsed`) и так далее.
 
-<div class="note">
-<p>В обычной ситуации у вас нет необходимости вызывать функции <strong>print()</strong> из методов теста, как во фрагменте выше. Мы поступили так только для того, чтобы вы в консоле увидели порядок вызова тестовых функций класса.</p>
-</div>
+> **Примечание:** В обычной ситуации у вас нет необходимости вызывать функции **print()** из методов теста, как во фрагменте выше. Мы поступили так только для того, чтобы вы в консоле увидели порядок вызова тестовых функций класса.
 
-<h2 id="Как_запускать_тесты">Как запускать тесты</h2>
+## Как запускать тесты
 
-<p>Простейшим способом запуска всех тестов является применение следующей команды:</p>
+Простейшим способом запуска всех тестов является применение следующей команды:
 
-<pre class="brush: bash">python3 manage.py test</pre>
+```bash
+python3 manage.py test
+```
 
-<p>Таким образом мы найдём в текущей директории все файлы с именем <strong>test*.py</strong> и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только <strong>/catalog/tests/test_models.py</strong> содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.</p>
+Таким образом мы найдём в текущей директории все файлы с именем **test\*.py** и запустим все тесты (у нас имеются несколько файлов для тестирования, но на данный момент, только **/catalog/tests/test_models.py** содержит какие-либо тесты). По умолчанию, тесты сообщат что-нибудь, только в случае провала.
 
-<p>Запустите тесты из корневой папки сайта <em>LocalLibrary</em>. Вы должны увидеть вывод, который похож на следующий.</p>
+Запустите тесты из корневой папки сайта _LocalLibrary_. Вы должны увидеть вывод, который похож на следующий.
 
-<pre class="brush: bash">&gt;python manage.py test
+```bash
+>python manage.py test
 
 Creating test database for alias 'default'...
-<strong>setUpTestData: Run once to set up non-modified data for all class methods.
+setUpTestData: Run once to set up non-modified data for all class methods.
 setUp: Run once for every test method to setup clean data.
 Method: test_false_is_false.
 .setUp: Run once for every test method to setup clean data.
 Method: test_false_is_true.
 .setUp: Run once for every test method to setup clean data.
-Method: test_one_plus_one_equals_two.</strong>
+Method: test_one_plus_one_equals_two.
 .
 ======================================================================
 FAIL: test_false_is_true (catalog.tests.tests_models.YourTestClass)
@@ -227,51 +210,52 @@ AssertionError: False is not true
 Ran 3 tests in 0.075s
 
 FAILED (failures=1)
-Destroying test database for alias 'default'...</pre>
+Destroying test database for alias 'default'...
+```
 
-<p>Как видите, один тест провалился и мы можем точно увидеть в какой именно функции это произошло и почему (так и было задумано, поскольку <code>False</code> не равен <code>True</code>!).</p>
+Как видите, один тест провалился и мы можем точно увидеть в какой именно функции это произошло и почему (так и было задумано, поскольку `False` не равен `True`!).
 
-<div class="note">
-<p><strong>Совет: </strong> Самая важная вещь, которую нужно извлечь из тестового выхода выше, заключается в том, что это гораздо более ценно, если вы используете описательные/информативные имена для ваших объектов и методов.</p>
-</div>
+> **Примечание:** **Совет:** Самая важная вещь, которую нужно извлечь из тестового выхода выше, заключается в том, что это гораздо более ценно, если вы используете описательные/информативные имена для ваших объектов и методов.
 
-<p>Текст выделенный жирным, обычно не должен появляться в тестовом выводе (это результат работы функций <code>print()</code> в наших тестах). Он показывает, что вызов метода  <code>setUpTestData()</code> происходит один раз для всего класса в целом, а вызовы<code>setUp()</code> осуществляются перед каждым методом.</p>
+Текст выделенный жирным, обычно не должен появляться в тестовом выводе (это результат работы функций `print()` в наших тестах). Он показывает, что вызов метода `setUpTestData()` происходит один раз для всего класса в целом, а вызовы`setUp()` осуществляются перед каждым методом.
 
-<p>Следующий раздел показывает как запускать отдельные тесты и как контролировать процесс вывода информации.</p>
+Следующий раздел показывает как запускать отдельные тесты и как контролировать процесс вывода информации.
 
-<h3 id="Ещё_больше_тестовой_информации">Ещё больше тестовой информации</h3>
+### Ещё больше тестовой информации
 
-<p>Если вы желаете получать больше информации о тестах вы должны изменить значение параметра <em>verbosity</em>. Например, для вывода списка успешных и неуспешных тестов (и всю информацию о том, как прошла настройка базы данных) вы можете установить значение verbosity равным "2":</p>
+Если вы желаете получать больше информации о тестах вы должны изменить значение параметра _verbosity_. Например, для вывода списка успешных и неуспешных тестов (и всю информацию о том, как прошла настройка базы данных) вы можете установить значение verbosity равным "2":
 
-<pre class="brush: bash">python3 manage.py test --verbosity 2</pre>
+```bash
+python3 manage.py test --verbosity 2
+```
 
-<p>Доступными значениями для verbosity являются  0, 1 (значение по умолчанию), 2 и 3.</p>
+Доступными значениями для verbosity являются 0, 1 (значение по умолчанию), 2 и 3.
 
-<h3 id="Запуск_определённых_тестов">Запуск определённых тестов</h3>
+### Запуск определённых тестов
 
-<p>Если вы хотите запустить подмножество тестов, тогда вам надо указать полный путь к вашему пакету, модулю/подмодулю, классу наследнику<code>TestCase</code>, или методу:</p>
+Если вы хотите запустить подмножество тестов, тогда вам надо указать полный путь к вашему пакету, модулю/подмодулю, классу наследнику`TestCase`, или методу:
 
-<pre class="brush: bash">python3 manage.py test catalog.tests   # Run the specified module
+```bash
+python3 manage.py test catalog.tests   # Run the specified module
 python3 manage.py test catalog.tests.test_models  # Run the specified module
 python3 manage.py test catalog.tests.test_models.YourTestClass # Run the specified class
 python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one_equals_two  # Run the specified method
-</pre>
+```
 
-<h2 id="Тестирование_LocalLibrary">Тестирование LocalLibrary</h2>
+## Тестирование LocalLibrary
 
-<p>Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмотрим некоторые практические примеры.</p>
+Теперь, когда мы знаем как запустить наши тесты и что именно мы должны тестировать, давайте рассмотрим некоторые практические примеры.
 
-<div class="note">
-<p><strong>Примечание: </strong>Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что ещё вы можете с ними сделать.</p>
-</div>
+> **Примечание:**Мы не будем расписывать все тесты, а просто покажем вам пример того, как они должны работать и что ещё вы можете с ними сделать.
 
-<h3 id="Модели">Модели</h3>
+### Модели
 
-<p>Как было отмечено ранее, мы должны тестировать все то, что является частью нашего кода, а не библиотеки/код, которые уже были протестированы командами разработчиков Django, или Python.</p>
+Как было отмечено ранее, мы должны тестировать все то, что является частью нашего кода, а не библиотеки/код, которые уже были протестированы командами разработчиков Django, или Python.
 
-<p>Рассмотрим модель <code>Author</code>. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведём их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.</p>
+Рассмотрим модель `Author`. Мы должны провести тесты текстовых меток всех полей, поскольку, даже несмотря на то, что не все они определены, у нас есть проект, в котором сказано, что все их значения должны быть заданы. Если мы не проведём их тестирование, тогда мы не будем знать, что данные метки действительно содержат необходимые значения. Мы уверены в том, что Django создаст поле заданной длины, таким образом наши тесты будут проверять нужный нам размер поля, а заодно и его содержимое.
 
-<pre class="brush: python">class Author(models.Model):
+```python
+class Author(models.Model):
     first_name = models.CharField(max_length=100)
     last_name = models.CharField(max_length=100)
     date_of_birth = models.DateField(null=True, blank=True)
@@ -281,13 +265,15 @@ python3 manage.py test catalog.tests.test_models.YourTestClass.test_one_plus_one
         return reverse('author-detail', args=[str(self.id)])
 
     def __str__(self):
-        return '%s, %s' % (self.last_name, self.first_name)</pre>
+        return '%s, %s' % (self.last_name, self.first_name)
+```
 
-<p>Откройте файл <strong>/catalog/tests/test_models.py</strong> и замените все его содержимое кодом, приведённом во фрагменте для тестирования модели <code>Author</code> (фрагмент представлен ниже).</p>
+Откройте файл **/catalog/tests/test_models.py** и замените все его содержимое кодом, приведённом во фрагменте для тестирования модели `Author` (фрагмент представлен ниже).
 
-<p>В первой строке мы импортируем класс <code>TestCase</code>, а затем наследуемся от него, создавая класс с описательным именем (<code>AuthorModelTest</code>), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаём метод <code>setUpTestData()</code>, в котором создаём объект автора, который мы будем использовать в тестах, но нигде не будем изменять.</p>
+В первой строке мы импортируем класс `TestCase`, а затем наследуемся от него, создавая класс с описательным именем (`AuthorModelTest`), оно поможет нам идентифицировать места провалов в тестах во время вывода информации на консоль. Затем мы создаём метод `setUpTestData()`, в котором создаём объект автора, который мы будем использовать в тестах, но нигде не будем изменять.
 
-<pre class="brush: python">from django.test import TestCase
+```python
+from django.test import TestCase
 
 # Create your tests here.
 
@@ -323,33 +309,33 @@ class AuthorModelTest(TestCase):
     def test_get_absolute_url(self):
         author=Author.objects.get(id=1)
         #This will also fail if the urlconf is not defined.
-        self.assertEquals(author.get_absolute_url(),'/catalog/author/1')</pre>
+        self.assertEquals(author.get_absolute_url(),'/catalog/author/1')
+```
 
-<p>Тесты полей проверяют значения текстовых меток (<code>verbose_name</code>), включая их ожидаемую длину. Все методы имеют описательные имена, а их логика придерживается одной и той же структуры:</p>
+Тесты полей проверяют значения текстовых меток (`verbose_name`), включая их ожидаемую длину. Все методы имеют описательные имена, а их логика придерживается одной и той же структуры:
 
-<pre class="brush: python"># Получение объекта для тестирования
+```python
+# Получение объекта для тестирования
 author=Author.objects.get(id=1)
 
 # Получение метаданных поля для получения необходимых значений
 field_label = author._meta.get_field('first_name').verbose_name
 
 # Сравнить значение с ожидаемым результатом
-self.assertEquals(field_label,'first name')  </pre>
+self.assertEquals(field_label,'first name')
+```
 
-<p>Интересно отметить следующее:</p>
+Интересно отметить следующее:
 
-<ul>
- <li>Мы не можем получить поле <code>verbose_name</code> напрямую через <code>author.first_name.verbose_name</code>, потому что <code>author.first_name</code> является <em>строкой</em>. Вместо этого, нам надо использовать атрибут <code>_meta</code> объекта автора для получения того экземпляра поля, который будет использоваться для получения дополнительной информации.</li>
- <li>Мы выбрали метод <code>assertEquals(field_label,'first name')</code> вместо  <code>assertTrue(field_label == 'first name')</code>, потому что, в случае провала теста, в выводе будет указано какое именно значение содержит метка и это немного облегчит нам задачу по отладке кода.</li>
-</ul>
+- Мы не можем получить поле `verbose_name` напрямую через `author.first_name.verbose_name`, потому что `author.first_name` является _строкой_. Вместо этого, нам надо использовать атрибут `_meta` объекта автора для получения того экземпляра поля, который будет использоваться для получения дополнительной информации.
+- Мы выбрали метод `assertEquals(field_label,'first name')` вместо `assertTrue(field_label == 'first name')`, потому что, в случае провала теста, в выводе будет указано какое именно значение содержит метка и это немного облегчит нам задачу по отладке кода.
 
-<div class="note">
-<p><strong>Примечание:</strong> Тесты для текстовых меток <code>last_name</code> и <code>date_of_birth</code>, а также тест длины поля <code>last_name</code> были опущены. Добавьте свою версию этих тестов,  соблюдая соглашение об именовании и следуя структуре логики, представленной выше.</p>
-</div>
+> **Примечание:** Тесты для текстовых меток `last_name` и `date_of_birth`, а также тест длины поля `last_name` были опущены. Добавьте свою версию этих тестов, соблюдая соглашение об именовании и следуя структуре логики, представленной выше.
 
-<p>Кроме того, нам надо провести тесты наших собственных методов. Они просто проверяют, что имена объектов имеют следующие значения "Last Name, First Name" и что URL-адрес, по которому мы получаем экземпляр <code>Author</code>, такой как ожидается.</p>
+Кроме того, нам надо провести тесты наших собственных методов. Они просто проверяют, что имена объектов имеют следующие значения "Last Name, First Name" и что URL-адрес, по которому мы получаем экземпляр `Author`, такой как ожидается.
 
-<pre class="brush: python">def test_object_name_is_last_name_comma_first_name(self):
+```python
+def test_object_name_is_last_name_comma_first_name(self):
     author=Author.objects.get(id=1)
     expected_object_name = '%s, %s' % (author.last_name, author.first_name)
     self.assertEquals(expected_object_name,str(author))
@@ -357,11 +343,13 @@ self.assertEquals(field_label,'first name')  </pre>
 def test_get_absolute_url(self):
     author=Author.objects.get(id=1)
     #This will also fail if the urlconf is not defined.
-    self.assertEquals(author.get_absolute_url(),'/catalog/author/1')</pre>
+    self.assertEquals(author.get_absolute_url(),'/catalog/author/1')
+```
 
-<p>Теперь запустите тесты. Если вы создали модель Author, в соответствии с разделом о моделях данного руководства, то весьма вероятно, что вы получите сообщение об ошибке для метки <code>date_of_death</code>, как показано ниже. Тест провалился потому что, в соответствии с соглашением Django, первый символ имени метки должен быть в верхнем регистре (Django делает это автоматически).</p>
+Теперь запустите тесты. Если вы создали модель Author, в соответствии с разделом о моделях данного руководства, то весьма вероятно, что вы получите сообщение об ошибке для метки `date_of_death`, как показано ниже. Тест провалился потому что, в соответствии с соглашением Django, первый символ имени метки должен быть в верхнем регистре (Django делает это автоматически).
 
-<pre class="brush: bash">======================================================================
+```bash
+======================================================================
 FAIL: test_date_of_death_label (catalog.tests.test_models.AuthorModelTest)
 ----------------------------------------------------------------------
 Traceback (most recent call last):
@@ -371,25 +359,25 @@ AssertionError: 'Died' != 'died'
 - Died
 ? ^
 + died
-? ^</pre>
+? ^
+```
 
-<p>Это несущественный баг, но он демонстрирует нам то, что написание тестов может более тщательно проверить все неточности, которые вы можете сделать.</p>
+Это несущественный баг, но он демонстрирует нам то, что написание тестов может более тщательно проверить все неточности, которые вы можете сделать.
 
-<div class="note">
-<p><strong>Примечание: </strong>Измените значение метки для поля date_of_death (/catalog/models.py) на "died" и перезапустите тесты.</p>
-</div>
+> **Примечание:**Измените значение метки для поля date_of_death (/catalog/models.py) на "died" и перезапустите тесты.
 
-<p>Тот же подход применяется к тестированию других моделей. Самостоятельно создайте свои собственные тесты для оставшихся моделей.</p>
+Тот же подход применяется к тестированию других моделей. Самостоятельно создайте свои собственные тесты для оставшихся моделей.
 
-<h3 id="Формы">Формы</h3>
+### Формы
 
-<p>Смысл проведения тестов для форм тот же, что и для моделей; надо проверить весь собственный код и другие особенности проекта, но не то, что касается фреймворка, или сторонних библиотек.</p>
+Смысл проведения тестов для форм тот же, что и для моделей; надо проверить весь собственный код и другие особенности проекта, но не то, что касается фреймворка, или сторонних библиотек.
 
-<p>В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали своё собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.</p>
+В основном это означает, что вы должны протестировать то, что формы имеют соответствующие поля и что они показываются с соответствующими метками и вспомогательными текстами. Вам не надо проверять то, что Django правильно осуществляет валидацию полей (если только вы не создали своё собственное поле и валидацию) — то есть вам не надо проверять что, например, поле ввода электронного адреса принимает только электронного адреса. Но вы должны протестировать каждую дополнительную валидацию, которую вы добавляете для полей и любые сообщения, который ваш код генерирует в случае ошибок.
 
-<p>Рассмотрим форму для обновления книг. Она имеет только одно поле обновления даты, которое будет иметь текстовую метку и вспомогательный текст, который вам надо проверить.</p>
+Рассмотрим форму для обновления книг. Она имеет только одно поле обновления даты, которое будет иметь текстовую метку и вспомогательный текст, который вам надо проверить.
 
-<pre class="brush: python">class RenewBookForm(forms.Form):
+```python
+class RenewBookForm(forms.Form):
     """
     Форма обновления книг для библиотекарей
     """
@@ -399,18 +387,20 @@ AssertionError: 'Died' != 'died'
         data = self.cleaned_data['renewal_date']
 
         #Проверка, что дата не в прошлом.
-        if data &lt; datetime.date.today():
+        if data < datetime.date.today():
             raise ValidationError(_('Invalid date - renewal in past'))
         #Если дата в "далёком" будущем (+4 недели)
-        if data &gt; datetime.date.today() + datetime.timedelta(weeks=4):
+        if data > datetime.date.today() + datetime.timedelta(weeks=4):
             raise ValidationError(_('Invalid date - renewal more than 4 weeks ahead'))
 
         # Всегда надо возвращать очищенные данные.
-        return data</pre>
+        return data
+```
 
-<p>Откройте файл <strong>/catalog/tests/test_forms.py</strong> и замените весь существующий в нем код, следующим кодом теста для формы <code>RenewBookForm</code>. Мы начали его с импорта нашей формы и некоторых библиотек Python и Django, которые помогут нам провести тесты. Затем, тем же способом как мы делали для моделей, объявляем тестовый класс нашей формы, то есть применяя описательное имя класс наследника <code>TestCase</code>.</p>
+Откройте файл **/catalog/tests/test_forms.py** и замените весь существующий в нем код, следующим кодом теста для формы `RenewBookForm`. Мы начали его с импорта нашей формы и некоторых библиотек Python и Django, которые помогут нам провести тесты. Затем, тем же способом как мы делали для моделей, объявляем тестовый класс нашей формы, то есть применяя описательное имя класс наследника `TestCase`.
 
-<pre class="brush: python">from django.test import TestCase
+```python
+from django.test import TestCase
 
 # Создайте ваши тесты здесь
 
@@ -451,36 +441,36 @@ class RenewBookFormTest(TestCase):
         form_data = {'renewal_date': date}
         form = RenewBookForm(data=form_data)
         self.assertTrue(form.is_valid())
-</pre>
-
-<p>Первые две функции проверяют текст который должны содержать поля <code>label</code> и <code>help_text</code>. Доступ к полю мы получаем при помощи словаря (то есть, <code>form.fields['renewal_date']</code>). Отметим, что мы должны проверять содержит ли метка значение <code>None</code>, иначе в поле текста метки вы увидите "<code>None</code>".</p>
+```
 
-<p>Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определённого интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (<code>datetime.date.today()</code>), а также функцию <code>datetime.timedelta()</code> (которая принимает определённое число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя её на валидность.</p>
+Первые две функции проверяют текст который должны содержать поля `label` и `help_text`. Доступ к полю мы получаем при помощи словаря (то есть, `form.fields['renewal_date']`). Отметим, что мы должны проверять содержит ли метка значение `None`, иначе в поле текста метки вы увидите "`None`".
 
-<div class="note">
-<p><strong>Примечание:</strong> В данном примере мы не использовали ни базу данных, ни тестовый клиент. Рассмотрите модификацию этих тестов при помощи класса <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase">SimpleTestCase</a>.</p>
+Оставшиеся функции проверяют валидность дат, то есть их нахождение внутри определённого интервала, а также невалидность для значений, которые находятся вне заданного интервала. Для получения исходного значения мы использовали функцию получения текущей даты (`datetime.date.today()`), а также функцию `datetime.timedelta()` (которая принимает определённое число дней, или недель). Затем мы просто создали форму, передавая ей наши данные и проверяя её на валидность.
 
-<p>Нам также надо бы проверять возникновение ошибок, которые появляются если форма не валидна. Но, обычно, это относится к процессу вывода информации, таким образом, мы позаботимся об этом в следующем разделе.</p>
-</div>
+> **Примечание:** В данном примере мы не использовали ни базу данных, ни тестовый клиент. Рассмотрите модификацию этих тестов при помощи класса [SimpleTestCase](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.SimpleTestCase).
+>
+> Нам также надо бы проверять возникновение ошибок, которые появляются если форма не валидна. Но, обычно, это относится к процессу вывода информации, таким образом, мы позаботимся об этом в следующем разделе.
 
-<p>На этом с формами можно закончить; у нас имеются и другие тесты, но они были созданы обобщёнными классами отображения для редактирования! Запустите тесты и убедитесь, что наш код все ещё им соответствует!</p>
+На этом с формами можно закончить; у нас имеются и другие тесты, но они были созданы обобщёнными классами отображения для редактирования! Запустите тесты и убедитесь, что наш код все ещё им соответствует!
 
-<h3 id="Отображения">Отображения</h3>
+### Отображения
 
-<p>Для проверки поведения отображения мы используем тестовый клиент Django <a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client">Client</a>. Данный класс действует как упрощённый веб-браузер который мы применяем для имитации  <code>GET</code> и <code>POST</code> запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передаётся в соответствующий  шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.</p>
+Для проверки поведения отображения мы используем тестовый клиент Django [Client](https://docs.djangoproject.com/en/1.10/topics/testing/tools/#django.test.Client). Данный класс действует как упрощённый веб-браузер который мы применяем для имитации `GET` и `POST` запросов и проверки ответов. Про ответы мы можем узнать почти все, начиная с низкоуровневого HTTP (итоговые заголовки и коды статусов) и вплоть до применяемых шаблонов, которые используются для HTML-рендера, а также контекста, который передаётся в соответствующий шаблон. Кроме того, мы можем отследить последовательность перенаправлений (если имеются), проверить URL-адреса и коды статусов на каждом шаге. Все это позволит нам проверить, что каждое отображение выполняет то, что ожидается.
 
-<p>Давайте начнём с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу <strong>/catalog/authors/</strong> (данный URL-адрес можно найти в разделе приложения catalog,  в файле настроек urls.py по имени  'authors').</p>
+Давайте начнём с одного из простейших отображений которое возвращает список всех авторов. Вы можете его увидеть по URL-адресу **/catalog/authors/** (данный URL-адрес можно найти в разделе приложения catalog, в файле настроек urls.py по имени 'authors').
 
-<pre class="brush: python">class AuthorListView(generic.ListView):
+```python
+class AuthorListView(generic.ListView):
     model = Author
     paginate_by = 10
-</pre>
+```
 
-<p>Поскольку это обобщённое отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.</p>
+Поскольку это обобщённое отображение списка, то почти все за нас делает Django. Если вы доверяете Django, то единственной вещью, которую вам нужно протестировать, является переход к данному отображению по указанному URL-адресу. Таким образом, если вы применяете методику TDD (test-driven development, разработка через тесты), то начните проект с написания тестов, которые будут проверять, что данное отображение выводит всех авторов и, к тому же, например, блоками по 10.
 
-<p>Откройте файл <strong>/catalog/tests/test_views.py</strong> замените все его содержимое на следующий код теста для класса <code>AuthorListView</code>. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе <code>setUpTestData()</code> мы задаём число объектов класса <code>Author</code> которые мы тестируем при постраничном выводе.</p>
+Откройте файл **/catalog/tests/test_views.py** замените все его содержимое на следующий код теста для класса `AuthorListView`. Как и ранее, мы импортируем нашу модель и некоторые полезные классы. В методе `setUpTestData()` мы задаём число объектов класса `Author` которые мы тестируем при постраничном выводе.
 
-<pre class="brush: python">from django.test import TestCase
+```python
+from django.test import TestCase
 
 # Create your tests here.
 
@@ -523,23 +513,26 @@ class AuthorListViewTest(TestCase):
         self.assertEqual(resp.status_code, 200)
         self.assertTrue('is_paginated' in resp.context)
         self.assertTrue(resp.context['is_paginated'] == True)
-        self.assertTrue( len(resp.context['author_list']) == 3)</pre>
+        self.assertTrue( len(resp.context['author_list']) == 3)
+```
 
-<p>Все тесты используют клиент (принадлежащего классу <code>TestCase</code>, от которого мы наследовались) для имитации <code>GET</code>-запроса и получения ответа (<code>resp</code>). Первая версия проверяет заданный URL-адрес (заметьте, - просто определённый путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.</p>
+Все тесты используют клиент (принадлежащего классу `TestCase`, от которого мы наследовались) для имитации `GET`-запроса и получения ответа (`resp`). Первая версия проверяет заданный URL-адрес (заметьте, - просто определённый путь без указания домена), в то время как второй генерирует URL-адрес при помощи его имени, указанного в настройках.
 
-<pre class="brush: python">resp = self.client.get('/catalog/authors/')
+```python
+resp = self.client.get('/catalog/authors/')
 resp = self.client.get(reverse('authors'))
-</pre>
+```
 
-<p>Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включён" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.</p>
+Когда мы получаем ответ, то мы извлекаем код статуса, используемый шаблон, "включён" ли постраничный вывод, количество элементов в подмножестве (на странице) и общее число элементов.
 
-<p>Наиболее интересной переменной является <code>resp.context</code>, которая является объектом контекста, который передаётся шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.</p>
+Наиболее интересной переменной является `resp.context`, которая является объектом контекста, который передаётся шаблону из отображения. Он (объект контекста) очень полезен для тестов, поскольку позволяет нам убедиться, что наш шаблон получает все данные которые ему необходимы. Другими словами мы можем проверить, что мы используем правильный шаблон с данными, которые проделывают долгий путь проверок чтобы соответствовать данному шаблону.
 
-<h4 id="Отображения_и_регистрация_пользователей">Отображения и регистрация пользователей</h4>
+#### Отображения и регистрация пользователей
 
-<p>В некоторых случаях вам нужно провести тесты отображений к которым имеют доступ только зарегистрированные пользователи. Например, <code>LoanedBooksByUserListView</code> очень похоже на наше предыдущее отображение, но доступно только для залогинившихся пользователей и показывает только те записи (<code>BookInstance)</code>, которые соответствуют текущему пользователю, имеют статус 'on loan' (книга взята домой), а также забронированы.</p>
+В некоторых случаях вам нужно провести тесты отображений к которым имеют доступ только зарегистрированные пользователи. Например, `LoanedBooksByUserListView` очень похоже на наше предыдущее отображение, но доступно только для залогинившихся пользователей и показывает только те записи (`BookInstance)`, которые соответствуют текущему пользователю, имеют статус 'on loan' (книга взята домой), а также забронированы.
 
-<pre class="brush: python">from django.contrib.auth.mixins import LoginRequiredMixin
+```python
+from django.contrib.auth.mixins import LoginRequiredMixin
 
 class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
     """
@@ -550,15 +543,15 @@ class LoanedBooksByUserListView(LoginRequiredMixin,generic.ListView):
     paginate_by = 10
 
     def get_queryset(self):
-        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')</pre>
+        return BookInstance.objects.filter(borrower=self.request.user).filter(status__exact='o').order_by('due_back')
+```
 
-<p>Добавьте тестовый код следующего фрагмента в <strong>/catalog/tests/test_views.py</strong>. В нем, для создания нескольких аккаунтов и  объектов <code>BookInstance</code> которые будут использоваться в дальнейших тестах, мы используем метод <code>SetUp()</code> (вместе с соответствующими книгами и другими записями). Половина книг бронируется  тестовыми пользователями, но в начале для них всех мы устанавливаем статус "доступно". Использование метода <code>SetUp()</code> предпочтительнее чем <code>setUpTestData()</code>, поскольку в дальнейшем мы будем модифицировать некоторые объекты.</p>
+Добавьте тестовый код следующего фрагмента в **/catalog/tests/test_views.py**. В нем, для создания нескольких аккаунтов и объектов `BookInstance` которые будут использоваться в дальнейших тестах, мы используем метод `SetUp()` (вместе с соответствующими книгами и другими записями). Половина книг бронируется тестовыми пользователями, но в начале для них всех мы устанавливаем статус "доступно". Использование метода `SetUp()` предпочтительнее чем `setUpTestData()`, поскольку в дальнейшем мы будем модифицировать некоторые объекты.
 
-<div class="note">
-<p><strong>Примечание:</strong> Метод <code>setUp()</code> создаёт книгу с заданным языком <code>Language</code>, но <em>ваш</em> код может не включать в себя модель <code>Language</code>, поскольку это было <em>домашним заданием</em>. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвящённом <code>RenewBookInstancesViewTest.</code></p>
-</div>
+> **Примечание:** Метод `setUp()` создаёт книгу с заданным языком `Language`, но _ваш_ код может не включать в себя модель `Language`, поскольку это было _домашним заданием_. В таком случае просто закомментируйте соответствующие строки. Поступите также и в следующем разделе, посвящённом `RenewBookInstancesViewTest.`
 
-<pre class="brush: python">import datetime
+```python
+import datetime
 from django.utils import timezone
 
 from catalog.models import BookInstance, Book, Genre, Language
@@ -609,13 +602,14 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
 
         # Проверка того, что мы используем правильный шаблон
         self.assertTemplateUsed(resp, 'catalog/bookinstance_list_borrowed_user.html')
-</pre>
+```
 
-<p>Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдёт на страницу входа (логирования), мы используем метод <code>assertRedirects</code>, что продемонстрировано в методе <code>test_redirect_if_not_logged_in()</code>. Затем мы осуществляем вход для пользователя и проверяем что полученный статус <code>status_code</code> равен 200 (успешно). </p>
+Если пользователь не залогирован то, чтобы убедиться в том что отображение перейдёт на страницу входа (логирования), мы используем метод `assertRedirects`, что продемонстрировано в методе `test_redirect_if_not_logged_in()`. Затем мы осуществляем вход для пользователя и проверяем что полученный статус `status_code` равен 200 (успешно).
 
-<p>Остальные тесты проверяют, соответственно, что наше отображение показывает только те книги которые взяты текущим пользователем. Скопируйте код, показанный ниже, в нижнюю часть предыдущего класса.</p>
+Остальные тесты проверяют, соответственно, что наше отображение показывает только те книги которые взяты текущим пользователем. Скопируйте код, показанный ниже, в нижнюю часть предыдущего класса.
 
-<pre class="brush: python">    def test_only_borrowed_books_in_list(self):
+```python
+    def test_only_borrowed_books_in_list(self):
         login = self.client.login(username='testuser1', password='12345')
         resp = self.client.get(reverse('my-borrowed'))
 
@@ -672,17 +666,19 @@ class LoanedBookInstancesByUserListViewTest(TestCase):
             if last_date==0:
                 last_date=copy.due_back
             else:
-                self.assertTrue(last_date &lt;= copy.due_back)</pre>
+                self.assertTrue(last_date <= copy.due_back)
+```
 
-<p>Если хотите, то вы, безусловно, можете добавить тесты проверяющие постраничный вывод!</p>
+Если хотите, то вы, безусловно, можете добавить тесты проверяющие постраничный вывод!
 
-<h4 id="Тестирование_форм_и_отображений">Тестирование форм и отображений</h4>
+#### Тестирование форм и отображений
 
-<p>Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и её данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.</p>
+Процесс тестирования отображений с формами немного более сложен, чем в представленных ранее случаях, поскольку вам надо протестировать большее количество кода: начальное состояние показа формы, показ формы и её данных в случае ошибок, а также показ формы в случае успеха. Хорошей новостью является то, что мы применяем клиент для тестирования практически тем же способом, как мы делали это в случае отображений, которые отвечают только за вывод информации.
 
-<p>В качестве демонстрации давайте напишем некоторые тесты для отображения, которые отвечают за обновление книг(<code>renew_book_librarian()</code>):</p>
+В качестве демонстрации давайте напишем некоторые тесты для отображения, которые отвечают за обновление книг(`renew_book_librarian()`):
 
-<pre class="brush: python">from .forms import RenewBookForm
+```python
+from .forms import RenewBookForm
 
 @permission_required('catalog.can_mark_returned')
 def renew_book_librarian(request, pk):
@@ -711,13 +707,15 @@ def renew_book_librarian(request, pk):
         proposed_renewal_date = datetime.date.today() + datetime.timedelta(weeks=3)
         form = RenewBookForm(initial={'renewal_date': proposed_renewal_date,})
 
-    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})</pre>
+    return render(request, 'catalog/book_renew_librarian.html', {'form': form, 'bookinst':book_inst})
+```
 
-<p>Нам надо проверить что к данному отображению имеют доступ только те пользователи, которые имеют разрешение типа <code>can_mark_returned</code>, а кроме того, что пользователи перенаправляются на страницу ошибки HTTP 404  если они пытаются обновить экземпляр книги  <code>BookInstance</code>, который не существует. Мы должны проверить что начальное значение формы соответствует дате через 3 недели в будущем, а также то, что если форма прошла валидацию, то мы переходим на страницу отображения книг "all-borrowed" (забронированных). Для тестов, отвечающих за проверку "провалов", мы также должны удостовериться что они отправляют соответствующие сообщения об ошибках.</p>
+Нам надо проверить что к данному отображению имеют доступ только те пользователи, которые имеют разрешение типа `can_mark_returned`, а кроме того, что пользователи перенаправляются на страницу ошибки HTTP 404 если они пытаются обновить экземпляр книги `BookInstance`, который не существует. Мы должны проверить что начальное значение формы соответствует дате через 3 недели в будущем, а также то, что если форма прошла валидацию, то мы переходим на страницу отображения книг "all-borrowed" (забронированных). Для тестов, отвечающих за проверку "провалов", мы также должны удостовериться что они отправляют соответствующие сообщения об ошибках.
 
-<p>В нижнюю часть файла <strong>/catalog/tests/test_views.py</strong> добавьте класс тестирования (показан во фрагменте, ниже). Он создаёт двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:</p>
+В нижнюю часть файла **/catalog/tests/test_views.py** добавьте класс тестирования (показан во фрагменте, ниже). Он создаёт двух пользователей и два экземпляра книги, но только один пользователь получает необходимый доступ к соответствующему отображению. Код, который "присваивает" соответствующий доступ, выделен в коде жирным:
 
-<pre class="brush: python">from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
+```python
+from django.contrib.auth.models import Permission # Required to grant the permission needed to set a book as returned.
 
 class RenewBookInstancesViewTest(TestCase):
 
@@ -728,9 +726,9 @@ class RenewBookInstancesViewTest(TestCase):
 
         test_user2 = User.objects.create_user(username='testuser2', password='12345')
         test_user2.save()
-<strong>        permission = Permission.objects.get(name='Set book as returned')
+        permission = Permission.objects.get(name='Set book as returned')
         test_user2.user_permissions.add(permission)
-        test_user2.save()</strong>
+        test_user2.save()
 
         #Создание книги
         test_author = Author.objects.create(first_name='John', last_name='Smith')
@@ -748,11 +746,13 @@ class RenewBookInstancesViewTest(TestCase):
 
         #Создание объекта BookInstance для для пользователя test_user2
         return_date= datetime.date.today() + datetime.timedelta(days=5)
-        self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')</pre>
+        self.test_bookinstance2=BookInstance.objects.create(book=test_book,imprint='Unlikely Imprint, 2016', due_back=return_date, borrower=test_user2, status='o')
+```
 
-<p>В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствующим доступом (<em>testuser2</em>) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заёмщиком книги (тест должен быть успешным), а также, что произойдёт если попытаться получить доступ к книге <code>BookInstance</code> которой не существует. Кроме того, мы проверяем то, что используется правильный (необходимый) шаблон.</p>
+В нижнюю часть класса тестирования добавьте следующие методы (из следующего фрагмента). Они проверяют, что только пользователь с соответствующим доступом (_testuser2_) имеет доступ к отображению. Мы проверяем все случаи: когда пользователь не залогинился, когда залогинился, но не имеет соответствующего доступа, когда имеет доступ, но не является заёмщиком книги (тест должен быть успешным), а также, что произойдёт если попытаться получить доступ к книге `BookInstance` которой не существует. Кроме того, мы проверяем то, что используется правильный (необходимый) шаблон.
 
-<pre class="brush: python">    def test_redirect_if_not_logged_in(self):
+```python
+    def test_redirect_if_not_logged_in(self):
         resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
         #Manually check redirect (Can't use assertRedirect, because the redirect URL is unpredictable)
         self.assertEqual( resp.status_code,302)
@@ -794,99 +794,100 @@ class RenewBookInstancesViewTest(TestCase):
 
         #Check we used correct template
         self.assertTemplateUsed(resp, 'catalog/book_renew_librarian.html')
-</pre>
+```
 
-<p>Добавьте ещё один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трём неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).</p>
+Добавьте ещё один тестовый метод, показанный ниже. Он проверяет что начальная дата равна трём неделям в будущем. Заметьте, что мы имеем возможность получить доступ к начальному значению из поля формы (выделено жирным).
 
-<pre class="brush: python">    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
+```python
+    def test_form_renewal_date_initially_has_date_three_weeks_in_future(self):
         login = self.client.login(username='testuser2', password='12345')
         resp = self.client.get(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}) )
         self.assertEqual( resp.status_code,200)
 
         date_3_weeks_in_future = datetime.date.today() + datetime.timedelta(weeks=3)
-        self.assertEqual(<strong>resp.context['form'].initial['renewal_date']</strong>, date_3_weeks_in_future )
-</pre>
+        self.assertEqual(resp.context['form'].initial['renewal_date'], date_3_weeks_in_future )
+```
 
-<p>Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в <code>POST</code>-запросе. Данный запрос передаётся вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.</p>
+Следующий тест (тоже добавьте его в свой класс) проверяет что отображение, в случае успеха, перенаправляет пользователя к списку всех забронированных книг. Здесь мы показываем как при помощи клиента вы можете создать и передать данные в `POST`-запросе. Данный запрос передаётся вторым аргументом в пост-функцию и представляет из себя словарь пар ключ/значение.
 
-<pre class="brush: python">    def test_redirects_to_all_borrowed_book_list_on_success(self):
+```python
+    def test_redirects_to_all_borrowed_book_list_on_success(self):
         login = self.client.login(username='testuser2', password='12345')
         valid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=2)
-        resp = <strong>self.client.<em>post</em>(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future} )</strong>
+        resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future} )
         self.assertRedirects(resp, reverse('all-borrowed') )
-</pre>
-
-<div class="warning">
-<p>Вместо перехода к отображению <em>all-borrowed</em>, добавленного в качестве <em>домашнего задания</em>, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание <code>follow=True</code>, в запросе, гарантирует что запрос вернёт окончательный URL-адрес пункта назначения (следовательно проверяется <code>/catalog/</code>, а не <code>/</code>).</p>
+```
 
-<pre class="brush: python"> resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},<strong>follow=True</strong> )
- <strong>self.assertRedirects(resp, '/catalog/')</strong></pre>
-</div>
+> **Предупреждение:** Вместо перехода к отображению _all-borrowed_, добавленного в качестве _домашнего задания_, вы можете перенаправить пользователя на домашнюю страницу '/'. В таком случае, исправьте две последние строки тестового кода на код, показанный ниже. Присваивание `follow=True`, в запросе, гарантирует что запрос вернёт окончательный URL-адрес пункта назначения (следовательно проверяется `/catalog/`, а не `/`).
+>
+> ```python
+>  resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':valid_date_in_future},follow=True )
+>  self.assertRedirects(resp, '/catalog/')
+> ```
 
-<p>Скопируйте две последние функции в класс, представленные ниже. Они тоже проверяют  <code>POST</code>-запросы, но для случая неверных дат. Мы используем функцию <code>assertFormError()</code>, чтобы проверить сообщения об ошибках.</p>
+Скопируйте две последние функции в класс, представленные ниже. Они тоже проверяют `POST`-запросы, но для случая неверных дат. Мы используем функцию `assertFormError()`, чтобы проверить сообщения об ошибках.
 
-<pre class="brush: python">    def test_form_invalid_renewal_date_past(self):
+```python
+    def test_form_invalid_renewal_date_past(self):
         login = self.client.login(username='testuser2', password='12345')
         date_in_past = datetime.date.today() - datetime.timedelta(weeks=1)
         resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':date_in_past} )
         self.assertEqual( resp.status_code,200)
-        <strong>self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal in past')</strong>
+        self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal in past')
 
     def test_form_invalid_renewal_date_future(self):
         login = self.client.login(username='testuser2', password='12345')
         invalid_date_in_future = datetime.date.today() + datetime.timedelta(weeks=5)
         resp = self.client.post(reverse('renew-book-librarian', kwargs={'pk':self.test_bookinstance1.pk,}), {'renewal_date':invalid_date_in_future} )
         self.assertEqual( resp.status_code,200)
-        <strong>self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')</strong>
-</pre>
+        self.assertFormError(resp, 'form', 'renewal_date', 'Invalid date - renewal more than 4 weeks ahead')
+```
 
-<p>Такие же способы тестирования могут применяться для проверок других отображений.</p>
+Такие же способы тестирования могут применяться для проверок других отображений.
 
-<h3 id="Шаблоны">Шаблоны</h3>
+### Шаблоны
 
-<p>Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передаётся соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.</p>
+Django предоставляет API для тестирования, которое проверяет что функции отображения вызывают правильные шаблоны, а также позволяют убедиться, что им передаётся соответствующая информация. Кроме того, в Django имеется возможность использовать сторонние API для проверок того, что ваш HTML показывает то, что надо.
 
-<h2 id="Другие_рекомендованные_инструменты_для_тестирования">Другие рекомендованные инструменты для тестирования</h2>
+## Другие рекомендованные инструменты для тестирования
 
-<p>Django фреймворк для тестирования помогает вам создавать эффективные юнит- и интеграционные тесты — мы рассмотрели только небольшую часть того, что может делать фреймворк <strong>unittest</strong> и совсем не упоминали дополнения Django (например, посмотрите на модуль <a href="https://docs.python.org/3.5/library/unittest.mock-examples.html">unittest.mock</a>, который подключает сторонние библиотеки тестирования).</p>
+Django фреймворк для тестирования помогает вам создавать эффективные юнит- и интеграционные тесты — мы рассмотрели только небольшую часть того, что может делать фреймворк **unittest** и совсем не упоминали дополнения Django (например, посмотрите на модуль [unittest.mock](https://docs.python.org/3.5/library/unittest.mock-examples.html), который подключает сторонние библиотеки тестирования).
 
-<p>Из всего множества сторонних инструментов тестирования, мы кратко опишем возможности двух:</p>
+Из всего множества сторонних инструментов тестирования, мы кратко опишем возможности двух:
 
-<ul>
- <li><a href="http://coverage.readthedocs.io/en/latest/">Coverage</a>: Это инструмент Python, который формирует отчёты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.</li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Selenium</a> это фреймворк проведения автоматического тестирования в настоящем браузере. Он позволяет вам имитировать взаимодействие пользователя с вашим сайтом (что является следующим шагом в проведении интеграционных тестов).</li>
-</ul>
+- [Coverage](http://coverage.readthedocs.io/en/latest/): Это инструмент Python, который формирует отчёты о том, какое количество кода выполняется во время проведения тестов. Это полезно для уточнения степени "покрытия" кода тестами.
+- [Selenium](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment) это фреймворк проведения автоматического тестирования в настоящем браузере. Он позволяет вам имитировать взаимодействие пользователя с вашим сайтом (что является следующим шагом в проведении интеграционных тестов).
 
-<h2 id="Домашняя_работы">Домашняя работы</h2>
+## Домашняя работы
 
-<p>Существуют другие модели и отображения, которые мы могли бы протестировать. В качестве простого упражнения, попробуйте создать тестовый вариант для отображения <code>AuthorCreate</code>.</p>
+Существуют другие модели и отображения, которые мы могли бы протестировать. В качестве простого упражнения, попробуйте создать тестовый вариант для отображения `AuthorCreate`.
 
-<pre class="brush: python">class AuthorCreate(PermissionRequiredMixin, CreateView):
+```python
+class AuthorCreate(PermissionRequiredMixin, CreateView):
     model = Author
     fields = '__all__'
     initial={'date_of_death':'12/10/2016',}
-    permission_required = 'catalog.can_mark_returned'</pre>
+    permission_required = 'catalog.can_mark_returned'
+```
 
-<p>Помните, - вам надо проверить все, что касается вашего кода, или структуры. Это включает в себя: кто имеет доступ к отображению, начальную дату, применяемый шаблон, а также перенаправление из отображения в случае успеха.</p>
+Помните, - вам надо проверить все, что касается вашего кода, или структуры. Это включает в себя: кто имеет доступ к отображению, начальную дату, применяемый шаблон, а также перенаправление из отображения в случае успеха.
 
-<h2 id="Итоги">Итоги</h2>
+## Итоги
 
-<p>Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остаётся напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.</p>
+Написание тестов не является ни весельем, ни развлечением и, соответственно, при создании сайтов часто остаётся напоследок (или вообще не используется). Но тем не менее, они являются действенным механизмом, который позволяет вам убедиться, что ваш код в находится безопасности, даже если в него добавляются какие-либо изменения. Кроме того, тесты повышают эффективность поддержки вашего кода.
 
-<p>В данном руководстве мы продемонстрировали вам принципы написания тестов для ваших моделей, форм и отображений. Мы кратко перечислили что именно необходимо тестировать, что обычно сложно выявить в самом начале разработки. Существует много аспектов которые необходимо изучить, но даже с тем что мы уже узнали, вы имеете возможность создавать эффективные юнит-тесты для значительного улучшения процесса разработки.</p>
+В данном руководстве мы продемонстрировали вам принципы написания тестов для ваших моделей, форм и отображений. Мы кратко перечислили что именно необходимо тестировать, что обычно сложно выявить в самом начале разработки. Существует много аспектов которые необходимо изучить, но даже с тем что мы уже узнали, вы имеете возможность создавать эффективные юнит-тесты для значительного улучшения процесса разработки.
 
-<p>Следующая и последняя часть руководства покажет вам как запустить ваш чудесный (и полностью протестированный!) веб-сайт Django.</p>
+Следующая и последняя часть руководства покажет вам как запустить ваш чудесный (и полностью протестированный!) веб-сайт Django.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/overview/">Написание и запуск тестов</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/intro/tutorial05/">Написание вашего первого приложения Django, часть 5 &gt; Введение в автоматическое тестирование</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/tools/">Инструменты для тестирования</a> (Django docs)</li>
- <li><a href="https://docs.djangoproject.com/en/1.10/topics/testing/advanced/">Продвинутое тестирование</a> (Django docs)</li>
- <li><a href="http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/">Путеводитель по тестированию в Django</a> (Toast Driven Blog, 2011)</li>
- <li><a href="http://test-driven-django-development.readthedocs.io/en/latest/index.html">Мастерская: Разработка через тесты с Django (TDD)</a> (San Diego Python, 2014)</li>
- <li><a href="https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/">Тестирование в Django (Часть 1) - Лучшие практики и Примеры </a>(RealPython, 2013)</li>
-</ul>
+- [Написание и запуск тестов](https://docs.djangoproject.com/en/1.10/topics/testing/overview/) (Django docs)
+- [Написание вашего первого приложения Django, часть 5 > Введение в автоматическое тестирование](https://docs.djangoproject.com/en/1.10/intro/tutorial05/) (Django docs)
+- [Инструменты для тестирования](https://docs.djangoproject.com/en/1.10/topics/testing/tools/) (Django docs)
+- [Продвинутое тестирование](https://docs.djangoproject.com/en/1.10/topics/testing/advanced/) (Django docs)
+- [Путеводитель по тестированию в Django](http://toastdriven.com/blog/2011/apr/10/guide-to-testing-in-django/) (Toast Driven Blog, 2011)
+- [Мастерская: Разработка через тесты с Django (TDD)](http://test-driven-django-development.readthedocs.io/en/latest/index.html) (San Diego Python, 2014)
+- [Тестирование в Django (Часть 1) - Лучшие практики и Примеры ](https://realpython.com/blog/python/testing-in-django-part-1-best-practices-and-examples/)(RealPython, 2013)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/Forms", "Learn/Server-side/Django/Deployment", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/tutorial_local_library_website/index.md b/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
index 78f25db0cd20bc..d49ecef38ec83b 100644
--- a/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
+++ b/files/ru/learn/server-side/django/tutorial_local_library_website/index.md
@@ -9,66 +9,53 @@ tags:
   - Серверная часть
 translation_of: Learn/Server-side/Django/Tutorial_local_library_website
 ---
-<div>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</div>
+{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
 
-<p class="summary">Первая статья в нашем цикле объясняет, что вы узнаете, и разбирает пример сайта "местная библиотека", который мы будем разрабатывать и улучшать в последующих статьях.</p>
+Первая статья в нашем цикле объясняет, что вы узнаете, и разбирает пример сайта "местная библиотека", который мы будем разрабатывать и улучшать в последующих статьях.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимо:</th>
-   <td>Прочитайте наше <a href="/ru/docs/Learn/Server-side/Django/Introduction">вступление</a>. Для последующих статей вам так же потребуется настроить <a href="/ru/docs/Learn/Server-side/Django/development_environment">среду разработки.</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Представить читателю пример веб-приложения, которое будет использоваться в нашем руководстве и показать, какие темы будут изучены в этом цикле статей.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимо: | Прочитайте наше [вступление](/ru/docs/Learn/Server-side/Django/Introduction). Для последующих статей вам так же потребуется настроить [среду разработки.](/ru/docs/Learn/Server-side/Django/development_environment) |
+| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Представить читателю пример веб-приложения, которое будет использоваться в нашем руководстве и показать, какие темы будут изучены в этом цикле статей.                                                               |
 
-<h2 id="Обзор_руководства">Обзор руководства</h2>
+## Обзор руководства
 
-<p>Добро пожаловать на руководство MDN "Сайт местной библиотеки" по фреймворку Django, который может использоваться для управления архивом библиотеки.</p>
+Добро пожаловать на руководство MDN "Сайт местной библиотеки" по фреймворку Django, который может использоваться для управления архивом библиотеки.
 
-<p>В цикле статей мы научимся:</p>
+В цикле статей мы научимся:
 
-<ul>
- <li>При помощи Django создавать прототип сайта. </li>
- <li>Запускать и останавливать сервер для разработки.</li>
- <li>Создавать модели для представления данных.</li>
- <li>Использовать админ-панель Django для управления сайтом</li>
- <li>Создавать представления для того, чтобы формировать из данных ответы на различные запросы и превращать их в HTML разметку, которая будет отображаться в браузере.</li>
- <li>Создавать маршруты, чтобы определённые URL адреса ассоциировались сервером с определёнными представлениями</li>
- <li>Создавать авторизацию пользователей и сессии, чтобы управлять доступом к сайту.</li>
- <li>Работать с формами.</li>
- <li>Тестировать ваше веб-приложение.</li>
- <li>Эффективно использовать средства безопасности Django.</li>
- <li>Размещать ваш сайт в Сети.</li>
-</ul>
+- При помощи Django создавать прототип сайта.
+- Запускать и останавливать сервер для разработки.
+- Создавать модели для представления данных.
+- Использовать админ-панель Django для управления сайтом
+- Создавать представления для того, чтобы формировать из данных ответы на различные запросы и превращать их в HTML разметку, которая будет отображаться в браузере.
+- Создавать маршруты, чтобы определённые URL адреса ассоциировались сервером с определёнными представлениями
+- Создавать авторизацию пользователей и сессии, чтобы управлять доступом к сайту.
+- Работать с формами.
+- Тестировать ваше веб-приложение.
+- Эффективно использовать средства безопасности Django.
+- Размещать ваш сайт в Сети.
 
-<p>С некоторыми темами вы уже сталкивались, а про некоторые только знаете, что они существуют. По окончанию цикла статей вы должны будете иметь достаточно знаний, чтобы разрабатывать несложные сайты на Django для своих целей.</p>
+С некоторыми темами вы уже сталкивались, а про некоторые только знаете, что они существуют. По окончанию цикла статей вы должны будете иметь достаточно знаний, чтобы разрабатывать несложные сайты на Django для своих целей.
 
-<h2 id="Сайт_местной_библиотеки">Сайт местной библиотеки</h2>
+## Сайт местной библиотеки
 
-<p><em>Это </em>название сайта, который мы создадим и будем улучшать, в течение этого цикла статей. Как можно догадаться, цель этого сайта в том, чтобы представить небольшой онлайн каталог маленькой местной библиотеки, где пользователи смогут загружать доступные книги и управлять своими профилями.</p>
+_Это_ название сайта, который мы создадим и будем улучшать, в течение этого цикла статей. Как можно догадаться, цель этого сайта в том, чтобы представить небольшой онлайн каталог маленькой местной библиотеки, где пользователи смогут загружать доступные книги и управлять своими профилями.
 
-<p>Этот пример был выбран потому, что его можно масштабировать, чтобы рассказать настолько детально или поверхностно, насколько это требуется, о почти любой особенности Django. Что более важно, этот пример позволяет показать <em>последовательный</em> путь по самым важным функциям фреймворка Django:</p>
+Этот пример был выбран потому, что его можно масштабировать, чтобы рассказать настолько детально или поверхностно, насколько это требуется, о почти любой особенности Django. Что более важно, этот пример позволяет показать _последовательный_ путь по самым важным функциям фреймворка Django:
 
-<ul>
- <li>В самом начале, мы создадим библиотеку, в которой пользователи смогут только просматривать доступные книги. Это позволит нам исследовать операции, которые присутствуют почти на каждом сайте: чтение и отображение информации из базы данных.</li>
- <li>По мере продвижения, на сайте станут использоваться более продвинутые возможности Django. Например, мы сможем расширить библиотеку и позволить пользователям резервировать книги, чтобы показать как использовать формы и авторизацию.</li>
-</ul>
+- В самом начале, мы создадим библиотеку, в которой пользователи смогут только просматривать доступные книги. Это позволит нам исследовать операции, которые присутствуют почти на каждом сайте: чтение и отображение информации из базы данных.
+- По мере продвижения, на сайте станут использоваться более продвинутые возможности Django. Например, мы сможем расширить библиотеку и позволить пользователям резервировать книги, чтобы показать как использовать формы и авторизацию.
 
-<p>Несмотря на то, что это довольно обширный пример, проект называется сайтом <em>местной</em> библиотеки потому, что мы надеемся показать минимум достаточной информации, которая поможет вам быстро научиться разрабатывать на Django. Поэтому мы будем хранить данные о книгах, копиях книг, авторах и другую ключевую информацию. Однако мы не будем хранить другую информацию, которая могла бы быть полезной библиотеке, или создавать обширную инфраструктуру для поддержки нескольких сайтов библиотек или другие особенности "крупных библиотек". </p>
+Несмотря на то, что это довольно обширный пример, проект называется сайтом _местной_ библиотеки потому, что мы надеемся показать минимум достаточной информации, которая поможет вам быстро научиться разрабатывать на Django. Поэтому мы будем хранить данные о книгах, копиях книг, авторах и другую ключевую информацию. Однако мы не будем хранить другую информацию, которая могла бы быть полезной библиотеке, или создавать обширную инфраструктуру для поддержки нескольких сайтов библиотек или другие особенности "крупных библиотек".
 
-<h2 id="Я_застрял_где_мне_взять_код">Я застрял, где мне взять код?</h2>
+## Я застрял, где мне взять код?
 
-<p>По мере усложнения руководства, мы будем предоставлять необходимый код, который можно скопировать и вставить, а так же будет и другой код, который, мы надеемся, вы улучшите самостоятельно.</p>
+По мере усложнения руководства, мы будем предоставлять необходимый код, который можно скопировать и вставить, а так же будет и другой код, который, мы надеемся, вы улучшите самостоятельно.
 
-<p>Если вы застряли, то можете найти полноценную версию сайта на <a href="https://github.com/mdn/django-locallibrary-tutorial">Github</a>.</p>
+Если вы застряли, то можете найти полноценную версию сайта на [Github](https://github.com/mdn/django-locallibrary-tutorial).
 
-<h2 id="Подводя_итоги">Подводя итоги</h2>
+## Подводя итоги
 
-<p>Теперь вы знаете чуть больше о сайте, который мы будем разрабатывать, и теперь самое время создать <a href="/ru/docs/Learn/Server-side/Django/skeleton_website">скелет</a>  нашего сайта.</p>
+Теперь вы знаете чуть больше о сайте, который мы будем разрабатывать, и теперь самое время создать [скелет](/ru/docs/Learn/Server-side/Django/skeleton_website) нашего сайта.
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Django/development_environment", "Learn/Server-side/Django/skeleton_website", "Learn/Server-side/Django")}}
diff --git a/files/ru/learn/server-side/django/web_application_security/index.md b/files/ru/learn/server-side/django/web_application_security/index.md
index bb45fdf8ef4566..2efbdfb9c302d1 100644
--- a/files/ru/learn/server-side/django/web_application_security/index.md
+++ b/files/ru/learn/server-side/django/web_application_security/index.md
@@ -3,177 +3,149 @@ title: Безопасность веб-приложения Django
 slug: Learn/Server-side/Django/web_application_security
 translation_of: Learn/Server-side/Django/web_application_security
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</div>
+Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространённые угрозы безопасности в теме [Веб безопасность](/ru/docs/Web/Security). В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.
 
-<p class="summary">Защита пользовательских данных - важная часть проектирования любого веб-сайта.Ранее мы рассматривали некоторые наиболее распространённые угрозы безопасности в теме <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a>. В данной статье будет представлена практическая демонстрация того, как встроенные механизмы защиты Django's обрабатывают подобные угрозы.</p>
+| Требования: | Прочитайте тему [Веб безопасность](/ru/docs/Web/Security). Завершите изучение предыдущих частей руководства до [Руководство часть 9: Работа с формами ](/ru/docs/Learn/Server-side/Django/Forms)включительно. |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:       | Понять, что нужно делать (или наоборот не делать), для обеспечения безопасности вашего веб-приложения.                                                                                                        |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Прочитайте тему <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a>. Завершите изучение предыдущих частей руководства до <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами </a>включительно.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, что нужно делать (или наоборот не делать), для обеспечения безопасности вашего веб-приложения.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Тема [Веб безопасность](/ru/docs/Web/Security) рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространённых угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).
 
-<p>Тема <a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a> рассматривает значение безопасности веб-приложения для проектирования серверного приложения и некоторые из наиболее распространённых угроз, от которых вам может потребоваться защита. Одна из ключевых идей этой темы состоит в том, что практически все атаки будут успешны, если веб-приложение доверяет пользовательским данным (например данным из браузера).</p>
+> **Предупреждение:** **Важно:** Наиболее важный урок, который вы должны усвоить, состоит в том - что никогда не стоит доверять переданным пользователем данным. Они включают в себя GET параметры в URL, тело POST запроса, HTTP заголовки, cookies, загруженные пользователем данные и т.д. Всегда проверяйте и обрабатывайте все входные данные. Всегда готовьтесь к худшему.
 
-<div class="warning">
-<p><strong>Важно:</strong> Наиболее важный урок, который вы должны усвоить, состоит в том - что никогда не стоит доверять переданным пользователем данным. Они включают в себя GET параметры в URL, тело POST запроса, HTTP заголовки, cookies, загруженные пользователем данные и т.д. Всегда проверяйте и обрабатывайте все входные данные. Всегда готовьтесь к худшему.</p>
-</div>
+Хорошей новостью для всех разработчиков, использующих Django, является то, что большинство известных атак обрабатывается фреймворком! Статья [Безопасность в Django](https://docs.djangoproject.com/en/2.0/topics/security/) (Django docs) описывает методы обеспечения безопасности Django и стратегии защиты веб-приложения разработанного на данном фреймворке.
 
-<p>Хорошей новостью для всех разработчиков, использующих Django, является то, что большинство известных атак обрабатывается фреймворком! Статья <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Безопасность в Django</a> (Django docs) описывает методы обеспечения безопасности Django и стратегии защиты веб-приложения разработанного на данном фреймворке.</p>
+## Распространённые угрозы/методы защиты
 
-<h2 id="Распространённые_угрозыметоды_защиты">Распространённые угрозы/методы защиты</h2>
+Мы не будем дублировать документацию Django и в данной статье продемонстрируем некоторые основные методы обеспечения безопасности в контексте разрабатываемого в данном руководстве приложения [LocalLibrary](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website).
 
-<p>Мы не будем дублировать документацию Django и в данной статье продемонстрируем некоторые основные методы обеспечения безопасности в контексте разрабатываемого в данном руководстве приложения <a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">LocalLibrary</a>.</p>
+### Межсайтовый скриптинг (XSS)
 
-<h3 id="Межсайтовый_скриптинг_(XSS)">Межсайтовый скриптинг (XSS)</h3>
+XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращён и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега \<script> с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определённую ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своём браузере.
 
-<p>XSS это термин, применяющийся для описания класса атак, позволяющего атакующему, через веб-сайт внедрить скрипты, которые будут выполнены на устройстве зашедшего на страницу пользователя. Часто это происходит через сохранение вредоносного кода в базе данных, откуда данный код будет возвращён и выполнен для запросившего некие данные пользователя (типичный пример - сохранение тега &lt;script&gt; с вредоносным кодом в комментарии, который может увидеть другой пользователь). Другой вектор атаки - в том чтобы сгенерировать определённую ссылку, при клике на которую пользователь запустит выполнение некоего замаскированного кода JavaScript в своём браузере.</p>
+Система шаблонов Django защищает от большинства XSS-атак, [экранируя определённые символы](https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping), считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript-код в наше приложение LocalLibrary через форму добавления автора, созданную в [Руководство часть 9: Работа с формами](/ru/docs/Learn/Server-side/Django/Forms).
 
-<p>Система шаблонов Django защищает от большинства XSS-атак,  <a href="https://docs.djangoproject.com/en/2.0/ref/templates/language/#automatic-html-escaping">экранируя определённые символы</a>, считающиеся "опасными" в HTML. Мы можем продемонстрировать это, попытавшись внедрить произвольный JavaScript-код в наше приложение LocalLibrary через форму добавления автора, созданную в <a href="/en-US/docs/Learn/Server-side/Django/Forms">Руководство часть 9: Работа с формами</a>.</p>
+1.  Запустите веб-сайт, используя сервер разработки (`python3 manage.py runserver`).
+2.  Откройте сайт в вашем браузере и войдите под аккаунтом супер-пользователя.
+3.  Перейдите на страницу добавления автора (она должна быть доступна по URL: [`http://127.0.0.1:8000/catalog/author/create/`](http://127.0.0.1:8000/catalog/author/create/)).
+4.  Введите данные об имени и фамилии, датах рождения и смерти автора. Затем добавьте следующую строку в поле фамилии:
+    `<script>alert('Test alert');</script>`.
+    ![Author Form XSS test](https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png)
 
-<ol>
- <li>Запустите веб-сайт, используя сервер разработки (<code>python3 manage.py runserver</code>).</li>
- <li>Откройте сайт в вашем браузере и войдите под аккаунтом супер-пользователя.</li>
- <li>Перейдите на страницу добавления автора (она должна быть доступна по URL: <code><a href="http://127.0.0.1:8000/catalog/author/create/">http://127.0.0.1:8000/catalog/author/create/</a></code>).</li>
- <li>Введите данные об имени и фамилии, датах рождения и смерти автора. Затем добавьте следующую строку в поле фамилии:<br>
-  <code>&lt;script&gt;alert('Test alert');&lt;/script&gt;</code>.<br>
-  <img alt="Author Form XSS test" src="https://mdn.mozillademos.org/files/14305/author_create_form_alert_xss.png" style="border-style: solid; border-width: 1px; height: 245px; width: 594px;">
-  <div class="note">
-  <p><strong>Примечание:</strong> Это безобидный скрипт, который, если будет выполнен, отобразит окно с сообщением "Test alert" в вашем браузере. Если данное окно отображается при открытии страницы с созданной подобным образом записью - значит сайт уязвим перед атаками XSS.</p>
-  </div>
- </li>
- <li>Нажмите <strong>Submit</strong> для сохранения записи.</li>
- <li>После сохранения автора - он должен быть отображён, как показано ниже. Так как сработала защита от XSS - команда <code>alert()</code> не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.<img alt="Author detail view XSS test" src="https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png" style="border-style: solid; border-width: 1px; height: 248px; width: 986px;"></li>
-</ol>
+    > **Примечание:** Это безобидный скрипт, который, если будет выполнен, отобразит окно с сообщением "Test alert" в вашем браузере. Если данное окно отображается при открытии страницы с созданной подобным образом записью - значит сайт уязвим перед атаками XSS.
 
-<p>Если вы посмотрите исходный HTML код, вы увидите, что "опасные" символы - например такие как скобки тегов - были заменены на их безопасные эквивалентные html сущности (к примеру <code>&gt;</code> на <code>&amp;gt;</code>)</p>
+5.  Нажмите **Submit** для сохранения записи.
+6.  После сохранения автора - он должен быть отображён, как показано ниже. Так как сработала защита от XSS - команда `alert()` не будет запущена. Вместо этого скрипт будет отображаться как обычный текст.![Author detail view XSS test](https://mdn.mozillademos.org/files/14307/author_detail_alert_xss.png)
 
-<pre class="brush: html">&lt;h1&gt;Author: Boon&amp;lt;script&amp;gt;alert(&amp;#39;Test alert&amp;#39;);&amp;lt;/script&amp;gt;, David (Boonie) &lt;/h1&gt;
-</pre>
+Если вы посмотрите исходный HTML код, вы увидите, что "опасные" символы - например такие как скобки тегов - были заменены на их безопасные эквивалентные html сущности (к примеру `>` на `&gt;`)
 
-<p>Использование шаблонов Django защищает вас от большинства XSS-атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле <code>help_text</code> обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).</p>
+```html
+<h1>Author: Boon&lt;script&gt;alert(&#39;Test alert&#39;);&lt;/script&gt;, David (Boonie) </h1>
+```
 
-<p>Так же XSS-атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.</p>
+Использование шаблонов Django защищает вас от большинства XSS-атак. Однако существует возможность отключения данной защиты, при котором экранирование не будет автоматически применятся ко всем полям, которые не должны будут заполнятся пользователем(к примеру, поле `help_text` обычно заполняется не пользователем, поэтому Django не будет экранировать его значение).
 
-<h3 id="Межсайтовая_подделка_запроса_(CSRF)">Межсайтовая подделка запроса (CSRF)</h3>
+Так же XSS-атаки могут быть осуществлены через другие ненадёжные источники данных, такие как cookies, сторонние сервисы или загруженные файлы (и прочие источники, данные которых не были специально обработаны перед отображением на странице). Если вы отображаете данные из этих источников, вы должны добавить ваш собственный обработчик для фильтрации данных.
 
-<p>CSRF атаки позволяют атакующему выполнять действия от имени другого пользователя без его согласия. Например, предположим что есть хакер, который хочет добавить авторов в наше приложение LocalLibrary.</p>
+### Межсайтовая подделка запроса (CSRF)
 
-<div class="note">
-<p><strong>Примечание:</strong> Очевидно, что наш хакер делает это не ради денег! Более амбициозные хакеры могут использовать описываемый подход для выполнения более опасных задач (например, переводы денег пользователей на их личные счета и т.д).</p>
-</div>
+CSRF атаки позволяют атакующему выполнять действия от имени другого пользователя без его согласия. Например, предположим что есть хакер, который хочет добавить авторов в наше приложение LocalLibrary.
 
-<p>Для того, чтобы сделать это, хакер может создать HTML файл, подобный продемонстрированному ниже, который будет содержать форму создания автора (похожую на ту, что мы разрабатывали в предыдущих частях руководства), которая будет отправлена как только данный файл будет загружен в браузер. Хакер отправит данный файл всем Библиотекарям и будет ждать пока кто-либо из них откроет файл (он содержит только безобидную информацию, честно!). Если файл будет открыт любым залогиненным пользователем, с правами Библиотекаря - тогда форма будет  отправлена от его имени и создаст нового пользователя.</p>
+> **Примечание:** Очевидно, что наш хакер делает это не ради денег! Более амбициозные хакеры могут использовать описываемый подход для выполнения более опасных задач (например, переводы денег пользователей на их личные счета и т.д).
 
-<pre class="brush: html">&lt;html&gt;
-&lt;body onload='document.EvilForm.submit()'&gt;
+Для того, чтобы сделать это, хакер может создать HTML файл, подобный продемонстрированному ниже, который будет содержать форму создания автора (похожую на ту, что мы разрабатывали в предыдущих частях руководства), которая будет отправлена как только данный файл будет загружен в браузер. Хакер отправит данный файл всем Библиотекарям и будет ждать пока кто-либо из них откроет файл (он содержит только безобидную информацию, честно!). Если файл будет открыт любым залогиненным пользователем, с правами Библиотекаря - тогда форма будет отправлена от его имени и создаст нового пользователя.
 
-&lt;form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'&gt;
-  &lt;table&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_first_name"&gt;First name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_last_name"&gt;Last name:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_birth"&gt;Date of birth:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_birth" name="date_of_birth" type="text" /&gt;&lt;/td&gt;&lt;/tr&gt;
-    &lt;tr&gt;&lt;th&gt;&lt;label for="id_date_of_death"&gt;Died:&lt;/label&gt;&lt;/th&gt;&lt;td&gt;&lt;input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /&gt;&lt;/td&gt;&lt;/tr&gt;
-  &lt;/table&gt;
-  &lt;input type="submit" value="Submit" /&gt;
-&lt;/form&gt;
+```html
+<html>
+<body onload='document.EvilForm.submit()'>
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+<form action="http://127.0.0.1:8000/catalog/author/create/" method="post" name='EvilForm'>
+  <table>
+    <tr><th><label for="id_first_name">First name:</label></th><td><input id="id_first_name" maxlength="100" name="first_name" type="text" value="Mad" required /></td></tr>
+    <tr><th><label for="id_last_name">Last name:</label></th><td><input id="id_last_name" maxlength="100" name="last_name" type="text" value="Man" required /></td></tr>
+    <tr><th><label for="id_date_of_birth">Date of birth:</label></th><td><input id="id_date_of_birth" name="date_of_birth" type="text" /></td></tr>
+    <tr><th><label for="id_date_of_death">Died:</label></th><td><input id="id_date_of_death" name="date_of_death" type="text" value="12/10/2016" /></td></tr>
+  </table>
+  <input type="submit" value="Submit" />
+</form>
 
-<p>Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведённый выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!</p>
+</body>
+</html>
+```
 
-<p>Механизм защиты заключается в том, что вы добавляете тег шаблона <code>{% csrf_token %}</code> в вашу форму. Этот токен будет отображён в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.</p>
+Запустите веб-сервер разработки и войдите в аккаунт супер-пользователя. Скопируйте приведённый выше текст в файл и затем откройте его в браузере. Вы должны получить CSRF ошибку, потому что у Django есть защита от атак данного вида!
 
-<pre class="brush: html">&lt;input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' /&gt;
-</pre>
+Механизм защиты заключается в том, что вы добавляете тег шаблона `{% csrf_token %}` в вашу форму. Этот токен будет отображён в вашем HTML как показано ниже, со значением, уникальным для каждого запрашивающего форму пользователя.
 
-<p>Django генерирует уникальный для пользователя/браузера токен и отклоняет все формы, которые не содержат его или содержат его неверное значение.</p>
+```html
+<input type='hidden' name='csrfmiddlewaretoken' value='0QRWHnYVg776y2l66mcvZqp8alrv4lb8S8lZ4ZJUWGZFA5VHrVfL2mpH29YZ39PW' />
+```
 
-<p>Для продолжения использования данного вида атак, хакер теперь должен найти и добавить верный CSRF токен для каждого выбранного целью пользователя. Это означает, что хакер теперь не может использовать массовые рассылки одного вредоносного файла всем Библиотекарям, так как для каждого из них CSRF токен будет уникальным.</p>
+Django генерирует уникальный для пользователя/браузера токен и отклоняет все формы, которые не содержат его или содержат его неверное значение.
 
-<p>Защита Django от CSRF атак по умолчанию включена. Вам всегда следует использовать тег<code>{% csrf_token %}</code> в ваших формах и использовать <code>POST</code> для запросов, которые могут изменить или добавить данные в вашу базу данных.</p>
+Для продолжения использования данного вида атак, хакер теперь должен найти и добавить верный CSRF токен для каждого выбранного целью пользователя. Это означает, что хакер теперь не может использовать массовые рассылки одного вредоносного файла всем Библиотекарям, так как для каждого из них CSRF токен будет уникальным.
 
-<h3 id="Другие_атаки">Другие атаки</h3>
+Защита Django от CSRF атак по умолчанию включена. Вам всегда следует использовать тег`{% csrf_token %}` в ваших формах и использовать `POST` для запросов, которые могут изменить или добавить данные в вашу базу данных.
 
-<p>Django так же предоставляет защиту от других видов атак ( демонстрация большинства из которых была бы сложна новичкам для понимания и не слишком полезна ):</p>
+### Другие атаки
 
-<dl>
- <dt>Защита от SQL инъекции</dt>
- <dd>Уязвимость SQL инъекции позволяет атакующему выполнить произвольный SQL код в базе данных и получить доступ к данным (прочитать, отредактировать и изменить) независимо от текущих прав доступа пользователя. В большинстве случаев вы будете получать доступ к данным базы данных, используя сущности queryset/model Django. Используя их для генерации SQL запросов, вы получите корректно сформированный и экранированный запрос для выбранной базы данных. Если вам необходимо писать "сырые" запросы, вам так же нужно будет продумать защиту от инъекций.</dd>
- <dt>Защита от Кликджекинга</dt>
- <dd>В данном виде атак атакующий перехватывает ввод на видимом слое страницы и перенаправляет их на скрытый слой под ним. Этот метод может быть использован к примеру для отображения официального сайта банка, с перехватом данных для входа в невидимом  <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (&lt;iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a>, который контролирует атакующий. Django содержит <a href="https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention">защиту от кликджекинга</a> в виде <code><a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#django.middleware.clickjacking.XFrameOptionsMiddleware" title="django.middleware.clickjacking.XFrameOptionsMiddleware">промежуточного програмного обеспечения (middleware) X-Frame-Options</a>,</code> который поддерживается браузерами и может запретить отображение страницы внутри <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="The HTML Inline Frame Element (&lt;iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an &lt;iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."><code>&lt;iframe&gt;</code></a>.</dd>
- <dt>SSL/HTTPS</dt>
- <dd>SSL/HTTPS может быть использован на веб-сервере для шифрования всего трафика между сервером и пользователем, включая данные входа, которые иначе будут отправляться как обычный текст (который сможет прочитать любой перехвативший запрос человек). Использование HTTPS высоко рекомендовано. Если используется HTTPS, Django позволяет использовать следующие методы защиты:</dd>
-</dl>
+Django так же предоставляет защиту от других видов атак ( демонстрация большинства из которых была бы сложна новичкам для понимания и не слишком полезна ):
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER"><code>SECURE_PROXY_SSL_HEADER</code></a> может быть использовано для проверки что всегда используется безопасное подключение, даже если данные поступают из прокси, использующего протокол отличный от HTTP.</li>
- <li><a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_SSL_REDIRECT"><code>SECURE_SSL_REDIRECT</code></a> используется для перенаправления всех запросов с HTTP на HTTPS.</li>
- <li>Используйте <a href="https://docs.djangoproject.com/en/2.0/ref/middleware/#http-strict-transport-security">HTTP Strict Transport Security</a> (HSTS). Этот HTTP заголовок информирует браузер о том, что все последующие запросы должны всегда использовать HTTPS. Совместно с перенаправлением HTTP запросов на HTTPS, эта опция позволяет обеспечить использование HTTPS в каждом запросе. HSTS может так же быть настроен опциями <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_SECONDS"><code>SECURE_HSTS_SECONDS</code></a> и <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS"><code>SECURE_HSTS_INCLUDE_SUBDOMAINS</code></a> или на веб-сервере.</li>
- <li>Используйте ‘безопасные’ cookies выставив <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE"><code>SESSION_COOKIE_SECURE</code></a> и <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE"><code>CSRF_COOKIE_SECURE</code></a> в <code>True</code>. Это позволит обеспечить пересылку данных cookies только через протокол HTTPS.</li>
-</ul>
+- Защита от SQL инъекции
+  - : Уязвимость SQL инъекции позволяет атакующему выполнить произвольный SQL код в базе данных и получить доступ к данным (прочитать, отредактировать и изменить) независимо от текущих прав доступа пользователя. В большинстве случаев вы будете получать доступ к данным базы данных, используя сущности queryset/model Django. Используя их для генерации SQL запросов, вы получите корректно сформированный и экранированный запрос для выбранной базы данных. Если вам необходимо писать "сырые" запросы, вам так же нужно будет продумать защиту от инъекций.
+- Защита от Кликджекинга
+  - : В данном виде атак атакующий перехватывает ввод на видимом слое страницы и перенаправляет их на скрытый слой под ним. Этот метод может быть использован к примеру для отображения официального сайта банка, с перехватом данных для входа в невидимом [`<iframe>`](/ru/docs/Web/HTML/Element/iframe "The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window."), который контролирует атакующий. Django содержит [защиту от кликджекинга](https://docs.djangoproject.com/en/2.0/ref/clickjacking/#clickjacking-prevention) в виде `промежуточного програмного обеспечения (middleware) X-Frame-Options,` который поддерживается браузерами и может запретить отображение страницы внутри [`<iframe>`](/ru/docs/Web/HTML/Element/iframe "The HTML Inline Frame Element (<iframe>) represents a nested browsing context, effectively embedding another HTML page into the current page. In HTML 4.01, a document may contain a head and a body or a head and a frameset, but not both a body and a frameset. However, an <iframe> can be used within a normal document body. Each browsing context has its own session history and active document. The browsing context that contains the embedded content is called the parent browsing context. The top-level browsing context (which has no parent) is typically the browser window.").
+- SSL/HTTPS
+  - : SSL/HTTPS может быть использован на веб-сервере для шифрования всего трафика между сервером и пользователем, включая данные входа, которые иначе будут отправляться как обычный текст (который сможет прочитать любой перехвативший запрос человек). Использование HTTPS высоко рекомендовано. Если используется HTTPS, Django позволяет использовать следующие методы защиты:
 
-<dl>
- <dt>Валидация заголовка Host</dt>
- <dd>Используйте <a href="https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-ALLOWED_HOSTS"><code>ALLOWED_HOSTS</code></a> чтобы принимать только запросы от доверенных хостов.</dd>
-</dl>
+<!---->
 
-<p>Так же существует множество других техник защиты и указаний по их использованию. Мы надеемся, что данная статья дала вам понимание, какие техники Django предлагает для обеспечения безопасности. Мы надеемся, что вы продолжите изучение этого вопроса по документации Django.</p>
+- [`SECURE_PROXY_SSL_HEADER`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_PROXY_SSL_HEADER) может быть использовано для проверки что всегда используется безопасное подключение, даже если данные поступают из прокси, использующего протокол отличный от HTTP.
+- [`SECURE_SSL_REDIRECT`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_SSL_REDIRECT) используется для перенаправления всех запросов с HTTP на HTTPS.
+- Используйте [HTTP Strict Transport Security](https://docs.djangoproject.com/en/2.0/ref/middleware/#http-strict-transport-security) (HSTS). Этот HTTP заголовок информирует браузер о том, что все последующие запросы должны всегда использовать HTTPS. Совместно с перенаправлением HTTP запросов на HTTPS, эта опция позволяет обеспечить использование HTTPS в каждом запросе. HSTS может так же быть настроен опциями [`SECURE_HSTS_SECONDS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_SECONDS) и [`SECURE_HSTS_INCLUDE_SUBDOMAINS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SECURE_HSTS_INCLUDE_SUBDOMAINS) или на веб-сервере.
+- Используйте ‘безопасные’ cookies выставив [`SESSION_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-SESSION_COOKIE_SECURE) и [`CSRF_COOKIE_SECURE`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-CSRF_COOKIE_SECURE) в `True`. Это позволит обеспечить пересылку данных cookies только через протокол HTTPS.
 
-<ul>
-</ul>
+<!---->
 
-<h2 id="Подводим_итоги">Подводим итоги</h2>
+- Валидация заголовка Host
+  - : Используйте [`ALLOWED_HOSTS`](https://docs.djangoproject.com/en/2.0/ref/settings/#std:setting-ALLOWED_HOSTS) чтобы принимать только запросы от доверенных хостов.
 
-<p>Django имеет методы обеспечения защиты от распространённых видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения <em>LocalLibrary</em>. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.</p>
+Так же существует множество других техник защиты и указаний по их использованию. Мы надеемся, что данная статья дала вам понимание, какие техники Django предлагает для обеспечения безопасности. Мы надеемся, что вы продолжите изучение этого вопроса по документации Django.
 
-<p>Это было очень краткое погружение в вопрос веб-безопасности. Мы крайне рекомендуем вам прочитать <a href="https://docs.djangoproject.com/en/2.0/topics/security/">Безопасность в Django</a> для более глубокого понимания.</p>
+## Подводим итоги
 
-<p>Следующим и последним шагом в данном руководстве будет выполнение <a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">самостоятельной работы</a>.</p>
+Django имеет методы обеспечения защиты от распространённых видов атак, включая XSS и CSRF атаки. В данной статье мы продемонстрировали, как различные виды атак обрабатываются Django на примере нашего приложения _LocalLibrary_. Мы так же кратко рассмотрели другие виды уязвимостей и методы защиты от них.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+Это было очень краткое погружение в вопрос веб-безопасности. Мы крайне рекомендуем вам прочитать [Безопасность в Django](https://docs.djangoproject.com/en/2.0/topics/security/) для более глубокого понимания.
 
-<ul>
- <li><a href="https://docs.djangoproject.com/en/2.0/topics/security/">Безопасность в Django</a> (Django docs)</li>
- <li><a href="https://developer.mozilla.org/en-US/docs/Web/Security">Веб безопасность</a> (MDN)</li>
- <li><a href="/en-US/docs/Web/Security/Securing_your_site">Безопасность вашего сайта</a> (MDN)</li>
-</ul>
+Следующим и последним шагом в данном руководстве будет выполнение [самостоятельной работы](/ru/docs/Learn/Server-side/Django/django_assessment_blog).
 
-<p>{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}</p>
+## Смотрите также
 
-<p> </p>
+- [Безопасность в Django](https://docs.djangoproject.com/en/2.0/topics/security/) (Django docs)
+- [Веб безопасность](/ru/docs/Web/Security) (MDN)
+- [Безопасность вашего сайта](/ru/docs/Web/Security/Securing_your_site) (MDN)
 
-<h2 id="In_this_module">In this module</h2>
+{{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Introduction">Django introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/development_environment">Setting up a Django development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Tutorial_local_library_website">Django Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/skeleton_website">Django Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Models">Django Tutorial Part 3: Using models</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Admin_site">Django Tutorial Part 4: Django admin site</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Home_page">Django Tutorial Part 5: Creating our home page</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Generic_views">Django Tutorial Part 6: Generic list and detail views</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Sessions">Django Tutorial Part 7: Sessions framework</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Authentication">Django Tutorial Part 8: User authentication and permissions</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Forms">Django Tutorial Part 9: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Testing">Django Tutorial Part 10: Testing a Django web application</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/Deployment">Django Tutorial Part 11: Deploying Django to production</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/web_application_security">Django web application security</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Django/django_assessment_blog">DIY Django mini blog</a></li>
-</ul>
+## In this module
 
-<p> </p>
+- [Django introduction](/ru/docs/Learn/Server-side/Django/Introduction)
+- [Setting up a Django development environment](/ru/docs/Learn/Server-side/Django/development_environment)
+- [Django Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Django/Tutorial_local_library_website)
+- [Django Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Django/skeleton_website)
+- [Django Tutorial Part 3: Using models](/ru/docs/Learn/Server-side/Django/Models)
+- [Django Tutorial Part 4: Django admin site](/ru/docs/Learn/Server-side/Django/Admin_site)
+- [Django Tutorial Part 5: Creating our home page](/ru/docs/Learn/Server-side/Django/Home_page)
+- [Django Tutorial Part 6: Generic list and detail views](/ru/docs/Learn/Server-side/Django/Generic_views)
+- [Django Tutorial Part 7: Sessions framework](/ru/docs/Learn/Server-side/Django/Sessions)
+- [Django Tutorial Part 8: User authentication and permissions](/ru/docs/Learn/Server-side/Django/Authentication)
+- [Django Tutorial Part 9: Working with forms](/ru/docs/Learn/Server-side/Django/Forms)
+- [Django Tutorial Part 10: Testing a Django web application](/ru/docs/Learn/Server-side/Django/Testing)
+- [Django Tutorial Part 11: Deploying Django to production](/ru/docs/Learn/Server-side/Django/Deployment)
+- [Django web application security](/ru/docs/Learn/Server-side/Django/web_application_security)
+- [DIY Django mini blog](/ru/docs/Learn/Server-side/Django/django_assessment_blog)
diff --git a/files/ru/learn/server-side/express_nodejs/development_environment/index.md b/files/ru/learn/server-side/express_nodejs/development_environment/index.md
index 179a8272d235b4..93791db91eba87 100644
--- a/files/ru/learn/server-side/express_nodejs/development_environment/index.md
+++ b/files/ru/learn/server-side/express_nodejs/development_environment/index.md
@@ -3,389 +3,375 @@ title: Setting up a Node development environment
 slug: Learn/Server-side/Express_Nodejs/development_environment
 translation_of: Learn/Server-side/Express_Nodejs/development_environment
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</div>
+Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Express для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Express.
 
-<p class="summary">Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Express для Windows, Linux (Ubuntu) и Mac OS X - какую бы операционную систему вы не использовали, эта статья должна дать вам все, что необходимо для возможности начать разрабатывать приложения Express.</p>
+| Требования: | Знание как открыть терминал / командную строку, как устанавливать программные пакеты в операционной системе вашего компьютера. |
+| ----------- | ------------------------------------------------------------------------------------------------------------------------------ |
+| Задача:     | Создать среду разработки для Express на вашем компьютере.                                                                      |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Требования:</th>
-   <td>Знание как открыть терминал / командную строку, как устанавливать программные пакеты в операционной системе вашего компьютера.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Создать среду разработки для Express  на вашем компьютере.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор среды разработки Express
 
-<h2 id="Обзор_среды_разработки_Express">Обзор среды разработки Express</h2>
+_Node_ и _Express_ упрощают настройку вашего компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, какие инструменты нужны, приводятся некоторые из самых простых способов установки Node (и Express) на Ubuntu, macOS, and Windows, и показывается как вы можете протестировать свою установку.
 
-<p><em>Node</em> и <em>Express</em> упрощают настройку вашего компьютера, чтобы вы могли начать разработку веб-приложений. В этом разделе объясняется, какие инструменты нужны, приводятся некоторые из самых простых способов установки Node (и Express) на Ubuntu, macOS, and Windows, и показывается как вы можете протестировать свою установку.</p>
+### Что такое среда разработки Express?
 
-<h3 id="Что_такое_среда_разработки_Express">Что такое среда разработки Express?</h3>
+Среда разработки Express включает в себя установку Nodejs, менеджера пакетов NPM и (необязательно) Express Application Generator на локальном компьютере.
 
-<p>Среда разработки Express включает в себя установку Nodejs, менеджера пакетов NPM и (необязательно) Express Application Generator на локальном компьютере.</p>
+Узел и менеджер пакетов NPM устанавливаются вместе из подготовленных двоичных пакетов, установщиков, менеджеров пакетов операционной системы или из исходного кода (как показано в следующих разделах). Затем Express устанавливается NPM как зависимость от ваших отдельных веб-приложений Express (наряду с другими библиотеками, такими как механизмы шаблонов, драйверы баз данных, промежуточное программное обеспечение для аутентификации, промежуточное программное обеспечение для обслуживания статических файлов и т. Д.)
 
-<p>Узел и менеджер пакетов NPM устанавливаются вместе из подготовленных двоичных пакетов, установщиков, менеджеров пакетов операционной системы или из исходного кода (как показано в следующих разделах). Затем Express устанавливается NPM как зависимость от ваших отдельных веб-приложений Express (наряду с другими библиотеками, такими как механизмы шаблонов, драйверы баз данных, промежуточное программное обеспечение для аутентификации, промежуточное программное обеспечение для обслуживания статических файлов и т. Д.)</p>
+NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.
 
-<p>NPM также можно использовать для (глобальной) установки Express Application Generator, удобного инструмента для создания каркасных веб-приложений Express, которые следуют шаблону MVC. Генератор приложений является необязательным, поскольку вам не нужно использовать этот инструмент для создания приложений, использующих Express, или для приложений для создан Express, имеющих одинаковую архитектурную разметку или зависимости. Мы будем использовать его, потому что это значительно облегчает начало работы и продвигает модульную структуру приложения.</p>
+> **Примечание:** Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!
 
-<div class="note">
-<p>Примечание: в отличие от некоторых других веб-сред, среда разработки не включает отдельный веб-сервер разработки. В Node / Express веб-приложение создаёт и запускает собственный веб-сервер!</p>
-</div>
+Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).
 
-<p>Существуют и другие периферийные инструменты, которые являются частью типичной среды разработки, в том числе текстовые редакторы или IDE для редактирования кода и инструменты управления исходным кодом, такие как Git, для безопасного управления различными версиями вашего кода. Мы предполагаем, что вы уже установили подобные инструменты (в частности, текстовый редактор).</p>
+### Какие операционные системы поддерживаются?
 
-<h3 id="Какие_операционные_системы_поддерживаются">Какие операционные системы поддерживаются?</h3>
+Узел может быть запущен в Windows, macOS, во многих «разновидностях» Linux, Docker и т. Д. (Полный список на странице загрузок nodejs). Практически любой персональный компьютер должен иметь необходимую производительность для запуска Node во время разработки. Express работает в среде Node и, следовательно, может работать на любой платформе, на которой работает Node.
 
-<p>Узел может быть запущен в Windows, macOS, во многих «разновидностях» Linux, Docker и т. Д. (Полный список на странице загрузок nodejs). Практически любой персональный компьютер должен иметь необходимую производительность для запуска Node во время разработки. Express работает в среде Node и, следовательно, может работать на любой платформе, на которой работает Node.</p>
+В этой статье мы предоставляем инструкции по установке для Windows, macOS и Ubuntu Linux.
 
-<p>В этой статье мы предоставляем инструкции по установке для Windows, macOS и Ubuntu Linux.</p>
+### Какую версию Node / Express следует использовать?
 
-<h3 id="Какую_версию_Node_Express_следует_использовать">Какую версию Node / Express следует использовать?</h3>
+Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.
 
-<p>Существует множество выпусков Node - более новые выпуски содержат исправления ошибок, поддержку более свежих версий стандартов ECMAScript (JavaScript) и улучшения API-интерфейсов Node.</p>
+Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.
 
-<p>Как правило, вы должны использовать самый последний выпуск LTS (с долгосрочной поддержкой), поскольку он будет более стабильным, чем «текущий» выпуск, при этом все ещё имея относительно недавние функции (и все ещё активно поддерживается). Вы должны использовать Текущий выпуск, если вам нужна функция, которой нет в версии LTS.</p>
+Для Express вы всегда должны использовать последнюю версию.
 
-<p>Для Express вы всегда должны использовать последнюю версию.</p>
+### Как насчёт баз данных и других зависимостей?
 
-<h3 id="Как_насчёт_баз_данных_и_других_зависимостей">Как насчёт баз данных и других зависимостей?</h3>
+Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.
 
-<p>Другие зависимости, такие как драйверы баз данных, механизмы шаблонов, механизмы аутентификации и т. д., Являются частью приложения и импортируются в среду приложения с помощью диспетчера пакетов NPM. Мы обсудим их в следующих статьях для конкретных приложений.</p>
+## Установка Node
 
-<h2 id="Установка_Node">Установка Node</h2>
+Чтобы использовать Express, сначала необходимо установить Nodejs и Node Package Manager (NPM) в вашей операционной системе. В следующих разделах описывается самый простой способ установки версии Nodejs с долгосрочной поддержкой (LTS) в Ubuntu Linux 16.04, macOS и Windows 10.
 
-<p>Чтобы использовать Express, сначала необходимо установить Nodejs и Node Package Manager (NPM) в вашей операционной системе. В следующих разделах описывается самый простой способ установки версии Nodejs с долгосрочной поддержкой (LTS) в Ubuntu Linux 16.04, macOS и Windows 10.</p>
+> **Примечание:** Совет: В следующих разделах показан самый простой способ установки Node и NPM на наши целевые платформы ОС. Если вы используете другую ОС или просто хотите увидеть некоторые другие подходы для текущих платформ, см. Установка Node.js через менеджер пакетов (nodejs.org).
 
-<div class="note">
-<p>Совет: В следующих разделах показан самый простой способ установки Node и NPM на наши целевые платформы ОС. Если вы используете другую ОС или просто хотите увидеть некоторые другие подходы для текущих платформ, см. Установка Node.js через менеджер пакетов (nodejs.org).</p>
-</div>
+### Windows и macOS
 
-<h3 id="Windows_и_macOS">Windows и macOS</h3>
+Установка Node и NPM в Windows и macOS проста, потому что вы можете просто использовать предоставленный инсталлятор:
 
-<p>Установка Node и NPM в Windows и macOS проста, потому что вы можете просто использовать предоставленный инсталлятор:</p>
+1.  Загрузите необходимый установщик:
 
-<ol>
- <li>Загрузите необходимый установщик:
+    1.  Перейдите по ссылке <https://nodejs.org/en/>
+    2.  Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».
 
-  <ol>
-   <li>Перейдите по ссылке <a href="https://nodejs.org/en/">https://nodejs.org/en/</a></li>
-   <li>Нажмите кнопку, чтобы загрузить сборку LTS, которая «Рекомендуется для большинства пользователей».</li>
-  </ol>
- </li>
- <li>Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.</li>
-</ol>
+2.  Установите Node, дважды щёлкнув по загруженному файлу и следуя инструкциям по установке.
 
-<h3 id="Ubuntu_16.04">Ubuntu 16.04</h3>
+### Ubuntu 16.04
 
-<p>Самый простой способ установить последнюю версию LTS Node 6.x - это использовать <a href="https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions">package manager</a> чтобы получить его из репозитория бинарных дистрибутивов Ubuntu. Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:</p>
+Самый простой способ установить последнюю версию LTS Node 6.x - это использовать [package manager](https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions) чтобы получить его из репозитория бинарных дистрибутивов Ubuntu. Это можно сделать очень просто, выполнив следующие две команды на вашем терминале:
 
-<pre class="brush: bash"><code>curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
-sudo apt-get install -y nodejs</code>
-</pre>
+```bash
+curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
+sudo apt-get install -y nodejs
+```
 
-<div class="warning">
-<p><strong>Внимание:</strong> Не устанавливайте напрямую из обычных репозиториев Ubuntu, поскольку они содержат очень старые версии узла.</p>
-</div>
+> **Предупреждение:** **Внимание:** Не устанавливайте напрямую из обычных репозиториев Ubuntu, поскольку они содержат очень старые версии узла.
 
-<ol>
-</ol>
+### Проверка вашей установки Nodejs и NPM
 
-<h3 id="Проверка_вашей_установки_Nodejs_и_NPM">Проверка вашей установки Nodejs и NPM</h3>
+Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:
 
-<p>Самый простой способ проверить, установлен ли этот узел, - это запустить команду «версия» в своём терминале / командной строке и проверить, что возвращается строка версии:</p>
+```bash
+>node -v
+v8.11.3
+```
 
-<pre class="brush: bash">&gt;node -v
-v8.11.3</pre>
+Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:
 
-<p>Менеджер пакетов Nodejs NPM также должен быть установлен и может быть протестирован таким же образом:</p>
+```bash
+>npm -v
+5.8.0
+```
 
-<pre class="brush: bash">&gt;npm -v
-5.8.0</pre>
+В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:
 
-<p>В качестве немного более захватывающего теста давайте создадим очень простой сервер «чистого узла», который просто печатает «Hello World» в браузере, когда вы посещаете правильный URL в вашем браузере:</p>
+1.  Скопируйте следующий текст в файл с именем hellonode.js. Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:
 
-<ol>
- <li>Скопируйте следующий текст в файл с именем hellonode.js. Здесь используются чистые функции Node (ничего из Express) и некоторый синтаксис ES6:
+    ```js
+    //Загрузка модуля HTTP
+    const http = require("http");
+    const hostname = '127.0.0.1';
+    const port = 3000;
 
-  <pre class="brush: js">//Загрузка модуля HTTP
-const http = require("http");
-<code>const hostname = '127.0.0.1';
-const port = 3000;
+    //Создание HTTP-сервера
+    const server = http.createServer((req, res) => {
 
-//Создание HTTP-сервера
-const server = http.createServer((req, res) =&gt; {
+      //Установка HTTP-заголовков ответа с HTTP-статусом и Content type
+      res.statusCode = 200;
+      res.setHeader('Content-Type', 'text/plain');
+      res.end('Hello World\n');
+    });
 
-  //Установка HTTP-заголовков ответа с HTTP-статусом и Content type
-  res.statusCode = 200;
-  res.setHeader('Content-Type', 'text/plain');
-  res.end('Hello World\n');
-});
+    //Слушание запросов на порту 3000, и в качестве каллбака функция, которая пишет в лог
+    server.listen(port, hostname, () => {
+      console.log('Server running at http://${hostname}:${port}/');
+    });
+    ```
 
-//Слушание запросов на порту 3000, и в качестве каллбака функция, которая пишет в лог
-server.listen(port, hostname, () =&gt; {
-  console.log('Server running at http://${hostname}:${port}/');
-});</code>
+    Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».
 
-</pre>
+    > **Примечание:** Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!
 
-  <p>Код импортирует модуль «http» и использует его для создания сервера (createServer ()), который обрабатывает HTTP-запросы на порту 3000. Затем сценарий выводит на консоль сообщение о том, какой URL-адрес браузера можно использовать для тестирования сервера. Функция createServer () принимает в качестве аргумента колбэк-функцию, которая будет вызываться при получении HTTP-запроса - она просто возвращает ответ с кодом состояния HTTP 200 («ОК») и простым текстом «Hello World».</p>
+2.  Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:
 
-  <div class="note">
-  <p>Замечание: не беспокойтесь, если вы ещё не совсем понимаете, что делает этот код! Мы объясним наш код более подробно, как только мы начнём использовать Express!</p>
-  </div>
- </li>
- <li>Запустите сервер, перейдя в тот же каталог, что и ваш файл hellonode.js в командной строке, и вызвав узел вместе с именем скрипта, например так:
-  <pre class="brush: bash">&gt;node hellonode.js
-Server running at http://127.0.0.1:3000/
-</pre>
- </li>
- <li>Перейдите к URL-адресу http://127.0.0.1:3000. Если все работает, браузер должен просто отобразить строку «Hello World».</li>
-</ol>
+    ```bash
+    >node hellonode.js
+    Server running at http://127.0.0.1:3000/
+    ```
 
-<h2 id="Использование_NPM">Использование NPM</h2>
+3.  Перейдите к URL-адресу http\://127.0.0.1:3000. Если все работает, браузер должен просто отобразить строку «Hello World».
 
-<p>Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.</p>
+## Использование NPM
 
-<div class="note">
-<p><strong>Замечание:</strong>  С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.</p>
-</div>
+Помимо самого Node, NPM является наиболее важным инструментом для работы с приложениями Node. NPM используется для получения любых пакетов (библиотек JavaScript), которые необходимы приложению для разработки, тестирования и / или производства, а также может использоваться для запуска тестов и инструментов, используемых в процессе разработки.
 
-<p>Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).</p>
+> **Примечание:** **Замечание:** С точки зрения Node, Express - это просто ещё один пакет, который вам нужно установить с помощью NPM, а затем установить его в своём собственном коде.
 
-<h3 id="Добавление_зависимостей">Добавление зависимостей</h3>
+Вы можете вручную использовать NPM для получения каждого необходимого пакета отдельно. Обычно мы вместо этого управляем зависимостями, используя простой текстовый файл с именем package.json. В этом файле перечислены все зависимости для конкретного «пакета» JavaScript, включая имя пакета, версию, описание, исходный файл для выполнения, производственные зависимости, зависимости разработки, версии Node, с которыми он может работать, и т. Д. Файл package.json должен содержать все, что нужно NPM для загрузки и запуска вашего приложения (если вы пишете библиотеку многократного использования, вы можете использовать это определение для загрузки пакета в репозиторий npm и сделать его доступным для других пользователей).
 
-<p>Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.</p>
+### Добавление зависимостей
 
-<div class="note">
-<p><strong>Замечание:</strong>  Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.</p>
-</div>
+Следующие шаги показывают, как вы можете использовать NPM для загрузки пакета, сохранить его в зависимостях проекта, а затем потребовать его в приложении Node.
 
-<ol>
- <li>Сначала создайте каталог для вашего нового приложения и перейдите в него:
+> **Примечание:** **Замечание:** Здесь мы показываем инструкции для получения и установки пакета Express. Позже мы покажем, как этот пакет и другие уже указаны для нас с помощью Express Application Generator. Этот раздел предоставлен, потому что полезно понять, как работает NPM и что создаётся генератором приложений.
 
-  <pre class="brush: bash">mkdir myapp
-cd myapp</pre>
- </li>
- <li>Используйте команду npm init для создания файла package.json для вашего приложения. Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js). Сейчас просто примите значения по умолчанию:
-  <pre class="brush: bash">npm init</pre>
+1.  Сначала создайте каталог для вашего нового приложения и перейдите в него:
 
-  <p>Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.</p>
+    ```bash
+    mkdir myapp
+    cd myapp
+    ```
 
-  <pre class="brush: json">{
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-</pre>
- </li>
- <li>Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json</li>
- <li>
-  <pre class="brush: bash">npm install express --save</pre>
-
-  <p>Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.</p>
-
-  <pre class="brush: json">{
-  "name": "myapp",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
-  },
-  "author": "",
-  "license": "ISC",
-<strong>  "dependencies": {
-    "express": "^4.16.3"
-  }</strong>
-}
-</pre>
- </li>
- <li>Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.
-  <pre><code><strong>const express = require('express')</strong>
-const app = express();
-
-app.get('/', (req, res) =&gt; {
-  res.send('Hello World!')
-});
-
-app.listen(</code>8000<code>, () =&gt; {
-  console.log('Example app listening on port </code>8000<code>!')
-});</code>
-</pre>
-
-  <p>Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.<br>
-   <br>
-   Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.</p>
- </li>
- <li>Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:
-  <pre class="brush: bash">&gt;node index.js
-Example app listening on port 8000
-</pre>
- </li>
- <li>Перейдите к URL  (<a href="http://127.0.0.1:8000/">http://127.0.0.1:8000/</a>) . Если все работает, браузер должен просто отобразить строку «Hello World!».</li>
-</ol>
-
-<h3 id="Зависимости_разработки">Зависимости разработки</h3>
-
-<p>Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:</p>
-
-<pre class="brush: bash"><code>npm install eslint --save-dev</code></pre>
-
-<p>Следующая запись будет добавлена в package.json вашего приложения:</p>
-
-<pre class="brush: js">  "devDependencies": {
-    "eslint": "^4.12.1"
-  }
-</pre>
+2.  Используйте команду npm init для создания файла package.json для вашего приложения. Эта команда запрашивает у вас несколько вещей, включая имя и версию вашего приложения, а также имя исходного файла точки входа (по умолчанию это index.js). Сейчас просто примите значения по умолчанию:
 
-<div class="note">
-<p>Примечание: «Линтеры» - это инструменты, которые выполняют статический анализ программного обеспечения, чтобы распознавать и сообщать о приверженности / несоблюдении некоторого набора лучших практик кодирования.</p>
-</div>
+    ```bash
+    npm init
+    ```
 
-<h3 id="Запуск_задач">Запуск задач</h3>
+    Если вы отобразите файл package.json (cat package.json), вы увидите принятые по умолчанию значения, заканчивающиеся лицензией.
 
-<p>В дополнение к определению и извлечению зависимостей вы также можете определить именованные скрипты в ваших файлах package.json и вызвать NPM, чтобы выполнить их с помощью команды run-script. Этот подход обычно используется для автоматизации выполнения тестов и частей набора инструментов разработки или сборки (например, запуска инструментов для минимизации JavaScript, сжатия изображений, LINT / анализа вашего кода и т. Д.).</p>
+    ```json
+    {
+      "name": "myapp",
+      "version": "1.0.0",
+      "description": "",
+      "main": "index.js",
+      "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+      },
+      "author": "",
+      "license": "ISC"
+    }
+    ```
 
-<div class="note">
-<p><strong>Замечание:</strong> Для запуска тестов и других внешних инструментов могут также использоваться такие исполнители, как Gulp и Grunt.</p>
-</div>
+3.  Теперь установите Express в каталог myapp и сохраните его в списке зависимостей вашего файла package.json
+4.  ```bash
+    npm install express --save
+    ```
 
-<p>Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):</p>
+    Раздел зависимостей вашего package.json теперь появится в конце файла package.json и будет содержать Express.
 
-<pre class="brush: js">"scripts": {
-  ...
-  "lint": "eslint src/js"
-  ...
-}
-</pre>
+    ```json
+    {
+      "name": "myapp",
+      "version": "1.0.0",
+      "description": "",
+      "main": "index.js",
+      "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+      },
+      "author": "",
+      "license": "ISC",
+      "dependencies": {
+        "express": "^4.16.3"
+      }
+    }
+    ```
 
-<p>Чтобы пояснить немного подробнее, eslint src / js - это команда, которую мы могли бы ввести в нашем терминале / командной строке, чтобы запустить eslint для файлов JavaScript, содержащихся в каталоге src / js внутри каталога нашего приложения. Включение вышеупомянутого в файл package.json нашего приложения обеспечивает ярлык для этой команды - lint.</p>
+5.  Для использования библиотеки вы вызываете функцию require (), как показано ниже в вашем файле index.js.
 
-<p>Затем мы сможем запустить eslint с помощью NPM, вызвав:</p>
+    ```
+    const express = require('express')
+    const app = express();
 
-<pre class="brush: bash"><code>npm run-script lint
-# OR (using the alias)
-npm run lint</code>
-</pre>
+    app.get('/', (req, res) => {
+      res.send('Hello World!')
+    });
 
-<p>Этот пример может выглядеть не короче, чем исходная команда, но вы можете включить в свои сценарии npm гораздо более крупные команды, включая цепочки из нескольких команд. Вы можете определить один скрипт npm, который запускает все ваши тесты одновременно.</p>
+    app.listen(8000, () => {
+      console.log('Example app listening on port 8000!')
+    });
+    ```
 
-<h2 id="Установка_Express_Application_Generator">Установка Express Application Generator</h2>
+    Этот код показывает минимальное веб-приложение Express «HelloWorld». Это импортирует модуль «экспресс» и использует его для создания сервера (приложения), который обрабатывает HTTP-запросы на порту 8000 и выводит на консоль сообщение, объясняющее, какой URL-адрес браузера можно использовать для тестирования сервера. Функция app.get () отвечает только на запросы HTTP GET с указанным URL-путём ('/'), в этом случае вызывая функцию для отправки нашего Hello World! сообщение.
 
-<p>Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):</p>
+    Создайте файл с именем index.js в корне каталога приложения «myapp» и передайте ему содержимое, показанное выше.
 
-<pre><code>npm install express-generator -g</code></pre>
+6.  Вы можете запустить сервер, вызвав узел с помощью скрипта в командной строке:
 
-<p>Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:</p>
+    ```bash
+    >node index.js
+    Example app listening on port 8000
+    ```
 
-<pre class="brush: bash">express helloworld</pre>
+7.  Перейдите к URL (<http://127.0.0.1:8000/>) . Если все работает, браузер должен просто отобразить строку «Hello World!».
 
-<div class="note">
-<p><strong>Замечание:</strong> Вы также можете указать библиотеку шаблонов для использования и ряд других настроек. Используйте команду help, чтобы увидеть все параметры:</p>
+### Зависимости разработки
 
-<pre class="brush: bash">express --help
-</pre>
-</div>
+Если зависимость используется только во время разработки, вы должны вместо этого сохранить её как «зависимость разработки» (чтобы пользователям вашего пакета не приходилось устанавливать её в производстве). Например, чтобы использовать популярный инструмент JavaScript Linting eslint, вы должны вызвать NPM, как показано ниже:
 
-<p>NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.</p>
+```bash
+npm install eslint --save-dev
+```
 
-<div class="note">
-<p>Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:</p>
+Следующая запись будет добавлена в package.json вашего приложения:
 
-<pre class="brush: js">{
-  "name": "helloworld",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "start": "node ./bin/www"
-  },
-  "dependencies": {
-    "body-parser": "~1.18.2",
-    "cookie-parser": "~1.4.3",
-    "debug": "~2.6.9",
-    "express": "~4.15.5",
-    "jade": "~1.11.0",
-    "morgan": "~1.9.0",
-    "serve-favicon": "~2.4.5"
+```js
+  "devDependencies": {
+    "eslint": "^4.12.1"
   }
-}</pre>
-</div>
+```
+
+> **Примечание:** Примечание: «Линтеры» - это инструменты, которые выполняют статический анализ программного обеспечения, чтобы распознавать и сообщать о приверженности / несоблюдении некоторого набора лучших практик кодирования.
+
+### Запуск задач
 
-<p>Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:</p>
+В дополнение к определению и извлечению зависимостей вы также можете определить именованные скрипты в ваших файлах package.json и вызвать NPM, чтобы выполнить их с помощью команды run-script. Этот подход обычно используется для автоматизации выполнения тестов и частей набора инструментов разработки или сборки (например, запуска инструментов для минимизации JavaScript, сжатия изображений, LINT / анализа вашего кода и т. Д.).
 
-<pre class="brush: bash">cd helloworld
+> **Примечание:** **Замечание:** Для запуска тестов и других внешних инструментов могут также использоваться такие исполнители, как Gulp и Grunt.
+
+Например, чтобы определить скрипт для запуска зависимости разработки eslint, которую мы указали в предыдущем разделе, мы могли бы добавить следующий блок скрипта в наш файл package.json (при условии, что наш источник приложения находится в папке / src / js):
+
+```js
+"scripts": {
+  ...
+  "lint": "eslint src/js"
+  ...
+}
+```
+
+Чтобы пояснить немного подробнее, eslint src / js - это команда, которую мы могли бы ввести в нашем терминале / командной строке, чтобы запустить eslint для файлов JavaScript, содержащихся в каталоге src / js внутри каталога нашего приложения. Включение вышеупомянутого в файл package.json нашего приложения обеспечивает ярлык для этой команды - lint.
+
+Затем мы сможем запустить eslint с помощью NPM, вызвав:
+
+```bash
+npm run-script lint
+# OR (using the alias)
+npm run lint
+```
+
+Этот пример может выглядеть не короче, чем исходная команда, но вы можете включить в свои сценарии npm гораздо более крупные команды, включая цепочки из нескольких команд. Вы можете определить один скрипт npm, который запускает все ваши тесты одновременно.
+
+## Установка Express Application Generator
+
+Инструмент Express Application Generator создаёт «скелет» приложения Express. Установите генератор, используя NPM, как показано (флаг -g устанавливает инструмент глобально, чтобы вы могли вызывать его из любого места):
+
+```
+npm install express-generator -g
+```
+
+Чтобы создать приложение Express с именем «helloworld» с настройками по умолчанию, перейдите туда, где вы хотите его создать, и запустите приложение, как показано ниже:
+
+```bash
+express helloworld
+```
+
+> **Примечание:** **Замечание:** Вы также можете указать библиотеку шаблонов для использования и ряд других настроек. Используйте команду help, чтобы увидеть все параметры:
+>
+> ```bash
+> express --help
+> ```
+
+NPM создаст новое приложение Express в подпапке вашего текущего местоположения, отображая процесс сборки на консоли. По завершении инструмент отобразит команды, которые необходимо ввести, чтобы установить зависимости Node и запустить приложение.
+
+> **Примечание:** Новое приложение будет иметь файл package.json в своём корневом каталоге. Вы можете открыть это, чтобы увидеть, какие зависимости установлены, включая Express и библиотеку шаблонов Jade:
+>
+> ```js
+> {
+>   "name": "helloworld",
+>   "version": "0.0.0",
+>   "private": true,
+>   "scripts": {
+>     "start": "node ./bin/www"
+>   },
+>   "dependencies": {
+>     "body-parser": "~1.18.2",
+>     "cookie-parser": "~1.4.3",
+>     "debug": "~2.6.9",
+>     "express": "~4.15.5",
+>     "jade": "~1.11.0",
+>     "morgan": "~1.9.0",
+>     "serve-favicon": "~2.4.5"
+>   }
+> }
+> ```
+
+Установите все зависимости для приложения helloworld, используя NPM, как показано ниже:
+
+```bash
+cd helloworld
 npm install
-</pre>
+```
 
-<p>Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:</p>
+Затем запустите приложение (команды немного отличаются для Windows и Linux / macOS), как показано ниже:
 
-<pre class="brush: bash"># Run the helloworld on Windows with Command Prompt
-SET DEBUG=helloworld:* &amp; npm start
+```bash
+# Run the helloworld on Windows with Command Prompt
+SET DEBUG=helloworld:* & npm start
 
 # Run the helloworld on Windows with PowerShell
 SET DEBUG=helloworld:* | npm start
 
 # Run helloworld on Linux/macOS
 DEBUG=helloworld:* npm start
-</pre>
-
-<p>Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.</p>
+```
 
-<pre class="brush: bash">&gt;SET DEBUG=helloworld:* &amp; npm start
+Команда DEBUG создаёт полезное ведение журнала, что приводит к выводу, подобному показанному ниже.
 
-&gt; helloworld@0.0.0 start D:\Github\expresstests\helloworld
-&gt; node ./bin/www
+```bash
+>SET DEBUG=helloworld:* & npm start
 
-  helloworld:server Listening on port 3000 +0ms</pre>
+> helloworld@0.0.0 start D:\Github\expresstests\helloworld
+> node ./bin/www
 
-<p>Откройте браузер и перейдите по адресу http://127.0.0.1:3000/, чтобы увидеть страницу приветствия Express по умолчанию.</p>
+  helloworld:server Listening on port 3000 +0ms
+```
 
-<p><img alt="Express - Generated App Default Screen" src="https://mdn.mozillademos.org/files/14331/express_default_screen.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 675px;"></p>
+Откройте браузер и перейдите по адресу http\://127.0.0.1:3000/, чтобы увидеть страницу приветствия Express по умолчанию.
 
-<p>Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.</p>
+![Express - Generated App Default Screen](https://mdn.mozillademos.org/files/14331/express_default_screen.png)
 
-<ul>
-</ul>
+Мы поговорим больше о сгенерированном приложении, когда перейдём к статье о создании каркасного приложения.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.</p>
+Теперь на вашем компьютере установлена и запущена среда разработки Node, которую можно использовать для создания веб-приложений Express. Вы также увидели, как NPM можно использовать для импорта Express в приложение, а также как вы можете создавать приложения с помощью инструмента Express Application Generator и затем запускать их.
 
-<p>В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.</p>
+В следующей статье мы начнём работу с учебным пособием по созданию полноценного веб-приложения с использованием этой среды и связанных инструментов.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://nodejs.org/en/download/">Downloads</a> page (nodejs.org)</li>
- <li><a href="https://nodejs.org/en/download/package-manager/">Installing Node.js via package manager</a> (nodejs.org)</li>
- <li><a href="http://expressjs.com/en/starter/installing.html">Installing Express</a> (expressjs.com)</li>
- <li><a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a> (expressjs.com)</li>
-</ul>
+- [Downloads](https://nodejs.org/en/download/) page (nodejs.org)
+- [Installing Node.js via package manager](https://nodejs.org/en/download/package-manager/) (nodejs.org)
+- [Installing Express](http://expressjs.com/en/starter/installing.html) (expressjs.com)
+- [Express Application Generator](https://expressjs.com/en/starter/generator.html) (expressjs.com)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Introduction", "Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
+- [Express/Node introduction](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+- [Setting up a Node (Express) development environment](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+- [Express Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+- [Express Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+- [Express Tutorial Part 3: Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+- [Express Tutorial Part 4: Routes and controllers](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+- [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+- [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+- [Express Tutorial Part 7: Deploying to production](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
index ed8cd501547fe9..0d23a16b476251 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/author_list_page/index.md
@@ -3,15 +3,16 @@ title: Список авторов. Тест - список жанров
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page
 ---
-<p>Страница списка авторов должна показывать список всех авторов, хранимых в БД, причём каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.</p>
+Страница списка авторов должна показывать список всех авторов, хранимых в БД, причём каждое имя автора должно быть связано со страницей подробностей для этого автора. Дата рождения автора и дата смерти должны выводиться в одной строке после имени автора.
 
-<h2 class="highlight-spanned" id="Контроллер">Контроллер</h2>
+## Контроллер
 
-<p>Функция контроллера списка авторов должна получить список всех элементов в  <code>Author</code> , и передать этот список в шаблон для отображения.</p>
+Функция контроллера списка авторов должна получить список всех элементов в `Author` , и передать этот список в шаблон для отображения.
 
-<p>Откройте файл <strong>/controllers/authorController.js</strong>. Найдите экспортируемый метод <code>author_list()</code> в начале файла и замените его следующим ниже кодом:</p>
+Откройте файл **/controllers/authorController.js**. Найдите экспортируемый метод `author_list()` в начале файла и замените его следующим ниже кодом:
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Display list of all Authors.
+```js
+// Display list of all Authors.
 exports.author_list = function(req, res, next) {
 
   Author.find()
@@ -22,15 +23,17 @@ exports.author_list = function(req, res, next) {
       res.render('author_list', { title: 'Author List', author_list: list_authors });
     });
 
-};</code></pre>
+};
+```
 
-<p>Метод использует такие функции модели как <code>find()</code>, <code>sort()</code> и <code>exec()</code> для того, чтобы вернуть все объекты  <code>Author</code> отсортированными по  <code>family_name</code> в алфавитном порядке. В вызове <code>exec()</code> колбэк-функция имеет первый параметр- объект ошибок  (или <code>null</code>) и второй параметр - список всех авторов, если ошибок не было. При ошибках вызывается следующая функция промежуточного слоя  с полученным значением объекта ошибок, а если ошибок не было, отображается шаблон <strong>author_list</strong>(.pug), передавая странице <code>title</code> и список авторов (<code>author_list</code>).</p>
+Метод использует такие функции модели как `find()`, `sort()` и `exec()` для того, чтобы вернуть все объекты `Author` отсортированными по `family_name` в алфавитном порядке. В вызове `exec()` колбэк-функция имеет первый параметр- объект ошибок (или `null`) и второй параметр - список всех авторов, если ошибок не было. При ошибках вызывается следующая функция промежуточного слоя с полученным значением объекта ошибок, а если ошибок не было, отображается шаблон **author_list**(.pug), передавая странице `title` и список авторов (`author_list`).
 
-<h2 class="highlight-spanned" id="Представление">Представление</h2>
+## Представление
 
-<p>Создайте файл <strong>/views/author_list.pug</strong> и поместите в него следующий текст:</p>
+Создайте файл **/views/author_list.pug** и поместите в него следующий текст:
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">extends layout
+```js
+extends layout
 
 block content
   h1= title
@@ -42,44 +45,40 @@ block content
         |  (#{author.date_of_birth} - #{author.date_of_death})
 
     else
-      li There are no authors.</code></pre>
+      li There are no authors.
+```
 
-<p>Представление создано по тому же образцу, что и другие шаблоны.</p>
+Представление создано по тому же образцу, что и другие шаблоны.
 
-<h2 class="highlight-spanned" id="Как_это_выглядит">Как это выглядит?</h2>
+## Как это выглядит?
 
-<p>Запустите приложение и откройте браузер с адресом <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Выберите ссылку <em>All authors</em>. Если все было сделано правильно, страница должна выглядеть примерно так, как на следующем скриншоте.</p>
+Запустите приложение и откройте браузер с адресом <http://localhost:3000/>. Выберите ссылку _All authors_. Если все было сделано правильно, страница должна выглядеть примерно так, как на следующем скриншоте.
 
-<p><img alt="Author List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png" style="display: block; height: 453px; margin: 0px auto; width: 1200px;"></p>
+![Author List Page - Express Local Library site](https://mdn.mozillademos.org/files/14468/LocalLibary_Express_Author_List.png)
 
-<div class="note">
-<p><strong>Примечание:</strong> Представление дат продолжительности жизни автора выглядит безобразно! Это можно исправить, если использовать <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting">тот же подход</a> , который применялся для списка <code>BookInstance</code>  (добавить в модель <code>Author</code> виртуальное свойство  продолжительности жизни).  Но в этот раз, однако, некоторые даты могут отсутствовать, и ссылки на несуществующие свойства игнорируются, если не задан строгий режим.  Метод <code>moment()</code> возвращает текущее время, и нежелательно, чтобы отсутствующие  даты форматировались как "сегодня". Один из способов состоит в том, чтобы форматирующая функция возвращала пустую строку, если дата не существует. Например:</p>
+> **Примечание:** Представление дат продолжительности жизни автора выглядит безобразно! Это можно исправить, если использовать [тот же подход](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data#date_formatting) , который применялся для списка `BookInstance` (добавить в модель `Author` виртуальное свойство продолжительности жизни). Но в этот раз, однако, некоторые даты могут отсутствовать, и ссылки на несуществующие свойства игнорируются, если не задан строгий режим. Метод `moment()` возвращает текущее время, и нежелательно, чтобы отсутствующие даты форматировались как "сегодня". Один из способов состоит в том, чтобы форматирующая функция возвращала пустую строку, если дата не существует. Например:
+>
+> `return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';`
 
-<p><code>return this.date_of_birth ? moment(this.date_of_birth).format('YYYY-MM-DD') : '';</code></p>
-</div>
+## Тест - страница списка жанров!
 
-<h2 id="Тест_-_страница_списка_жанров!Edit">Тест - страница списка жанров!</h2>
+В этой части требуется создать собственную страницу списка жанров. Страница должна показывать жанры, имеющиеся в БД, а для каждого жанра должна быть создана ссылка на страницу с детальной информацией. Скриншот ожидаемого результата приводится ниже.
 
-<p>В этой части требуется создать собственную страницу списка жанров. Страница должна показывать жанры, имеющиеся в БД, а для каждого жанра должна быть создана ссылка на страницу с детальной информацией. Скриншот ожидаемого результата приводится ниже.</p>
+![Genre List - Express Local Library site](https://mdn.mozillademos.org/files/14460/LocalLibary_Express_Genre_List.png)
 
-<p><img alt="Genre List - Express Local Library site" src="https://mdn.mozillademos.org/files/14460/LocalLibary_Express_Genre_List.png" style="border-style: solid; border-width: 1px; display: block; height: 346px; margin: 0px auto; width: 600px;"></p>
+Функция контроллера списка жанров должна получить список всех экземпляров `Genre`, и передать его в шаблон для отображения.
 
-<p>Функция контроллера списка жанров должна получить список всех экземпляров <code>Genre</code>, и передать его в шаблон для отображения.</p>
+1.  Следует отредактировать `genre_list()` в файле **/controllers/genreController.js**.
+2.  Реализация почти такая же, как и для контроллера `author_list()` .
 
-<ol>
- <li>Следует отредактировать <code>genre_list()</code> в файле  <strong>/controllers/genreController.js</strong>. </li>
- <li>Реализация почти такая же, как и для контроллера <code>author_list()</code> .
-  <ul>
-   <li>Sort the results by name, in ascending order.</li>
-  </ul>
- </li>
- <li>Отображающий шаблон должен быть назван <strong>genre_list.pug</strong>.</li>
- <li>Шаблону для отображения должны быть переданы переменные <code>title</code> (строка 'Genre List') и <code>genre_list</code> (the list of список жанров, который вернёт колбэк-функция <code>Genre.find()</code>.</li>
- <li>Представление должно соответствовать скриншоту, приведённому ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).</li>
-</ol>
+    - Sort the results by name, in ascending order.
 
-<h2 id="Далее">Далее</h2>
+3.  Отображающий шаблон должен быть назван **genre_list.pug**.
+4.  Шаблону для отображения должны быть переданы переменные `title` (строка 'Genre List') и `genre_list` (the list of список жанров, который вернёт колбэк-функция `Genre.find()`.
+5.  Представление должно соответствовать скриншоту, приведённому ранее (оно должно иметь структуру и формат, похожие на таковые в представлении списка авторов, за исключением, конечно, продолжительности жизни, так как для жанров даты не заданы).
 
-<p>Вернуться к части 5 -  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</p>
+## Далее
 
-<p>Перейти к следующему подразделу в части 5: подробная информация о жанрах (<a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Genre detail page</a>).</p>
+Вернуться к части 5 - [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+
+Перейти к следующему подразделу в части 5: подробная информация о жанрах ([Genre detail page](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
index 82238d5e295e99..cab200492d1475 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/book_list_page/index.md
@@ -3,15 +3,16 @@ title: Страница списка книг
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page
 ---
-<p>Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причём каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.</p>
+Далее мы реализуем нашу страницу списка книг. На этой странице должен отображаться список всех книг и их авторов в базе данных, причём каждое название книги является гиперссылкой на соответствующую страницу сведений о книге.
 
-<h2 class="highlight-spanned" id="Контроллер">Контроллер</h2>
+## Контроллер
 
-<p>Функция контроллера списка книг должна получить список всех объектов <code>Book</code> в базе данных, а затем передать их для отрисовки шаблона.</p>
+Функция контроллера списка книг должна получить список всех объектов `Book` в базе данных, а затем передать их для отрисовки шаблона.
 
-<p>Откройте файл <strong>/controllers/bookController.js</strong>. Найдите экспортируемый метод контроллера  <code>book_list()</code> и замените его следующим кодом.</p>
+Откройте файл **/controllers/bookController.js**. Найдите экспортируемый метод контроллера `book_list()` и замените его следующим кодом.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Display list of all Books.
+```js
+// Display list of all Books.
 exports.book_list = function(req, res, next) {
 
   Book.find({}, 'title author')
@@ -22,17 +23,19 @@ exports.book_list = function(req, res, next) {
       res.render('book_list', { title: 'Book List', book_list: list_books });
     });
 
-};</code></pre>
+};
+```
 
-<p>Метод использует функцию модели<code>find()</code> для возврата всех объектов <code>Book</code>, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернёт <code>_id</code> и виртуальные поля). Здесь мы также вызываем <code>populate()</code> on <code>Book</code>, указывая поле  <code>author</code> —это заменит сохранённый идентификатор автора книги полными сведениями об авторе.</p>
+Метод использует функцию модели`find()` для возврата всех объектов `Book`, выбрав для возврата только заголовок и автора, поскольку нам не нужны другие поля (он также вернёт `_id` и виртуальные поля). Здесь мы также вызываем `populate()` on `Book`, указывая поле `author` —это заменит сохранённый идентификатор автора книги полными сведениями об авторе.
 
-<p>При успешном выполнении, колбэк передаст запрос на отрисовку шаблона <strong>book_list</strong>(.pug), передаст <code>title</code> и<code>book_list</code> (список книг с автором) в качестве переменных.</p>
+При успешном выполнении, колбэк передаст запрос на отрисовку шаблона **book_list**(.pug), передаст `title` и`book_list` (список книг с автором) в качестве переменных.
 
-<h2 class="highlight-spanned" id="Представление">Представление</h2>
+## Представление
 
-<p>Создайте файл <strong>/views/book_list.pug</strong> и скопируйте в него текст ниже.</p>
+Создайте файл **/views/book_list.pug** и скопируйте в него текст ниже.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">extends layout
+```js
+extends layout
 
 block content
   h1= title
@@ -44,25 +47,22 @@ block content
       |  (#{book.author.name})
 
   else
-    li There are no books.</code></pre>
+    li There are no books.
+```
 
-<p>View расширит базовый шаблон <strong>layout.pug</strong> и переопределит <code>block</code> с именем '<strong>content</strong>'. Он отображает  <code>title</code> который мы передали из контроллера (с помощью метода <code>render()</code> ), а затем перебирает переменную <code>book_list</code>  используя синтаксис <code>each</code>-<code>in</code>-<code>else</code> . Для каждой книги создаётся элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в  <code>book_list</code> нет книг,  то выполняется <code>else</code>, и  отображается текст "нет книг".'</p>
+View расширит базовый шаблон **layout.pug** и переопределит `block` с именем '**content**'. Он отображает `title` который мы передали из контроллера (с помощью метода `render()` ), а затем перебирает переменную `book_list` используя синтаксис `each`-`in`-`else` . Для каждой книги создаётся элемент списка, отображающий название книги в виде ссылки на страницу сведений о книге, за которой следует имя автора. Если в `book_list` нет книг, то выполняется `else`, и отображается текст "нет книг".'
 
-<div class="note">
-<p><strong>Примечание: </strong>Мы используем <code>book.url</code>  для предоставления ссылки на подробную запись для каждой книги (мы реализовали этот маршрут, но не страницу). Это виртуальное свойство модели <code>Book</code> , которая использует поле  <code>_id</code> для создания уникального URL.</p>
-</div>
+> **Примечание:**Мы используем `book.url` для предоставления ссылки на подробную запись для каждой книги (мы реализовали этот маршрут, но не страницу). Это виртуальное свойство модели `Book` , которая использует поле `_id` для создания уникального URL.
 
-<p>Здесь интересно, что каждая книга определена в двух строках, использование конвейера для второй строки (выделено выше) необходимо, чтобы имя автора не стало частью гиперссылки из первой строки.</p>
+Здесь интересно, что каждая книга определена в двух строках, использование конвейера для второй строки (выделено выше) необходимо, чтобы имя автора не стало частью гиперссылки из первой строки.
 
-<h2 class="highlight-spanned" id="На_что_это_похоже">На что это похоже?</h2>
+## На что это похоже?
 
-<p>Запустите приложение (смотрите <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes">тестирование маршрутов</a> для соответствующей команды) и откройте ваш браузер по адресу:  <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Затем выберите ссылку:  <em>All books</em>. Если все сделано корректно, то вы должны увидеть нечто подобное скриншоту ниже.</p>
+Запустите приложение (смотрите [тестирование маршрутов](/ru/docs/Learn/Server-side/Express_Nodejs/routes#Testing_the_routes) для соответствующей команды) и откройте ваш браузер по адресу: <http://localhost:3000/>. Затем выберите ссылку: _All books_. Если все сделано корректно, то вы должны увидеть нечто подобное скриншоту ниже.
 
-<p><img alt="Book List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png" style="border-style: solid; border-width: 1px; display: block; height: 387px; margin: 0px auto; width: 918px;"></p>
+![Book List Page - Express Local Library site](https://mdn.mozillademos.org/files/14464/LocalLibary_Express_Book_List.png)
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">BookInstance list page</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Proceed to the next subarticle of part 5: [BookInstance list page](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
index 1477f7ac44a490..f92fa432ac4322 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/bookinstance_list_page/index.md
@@ -3,36 +3,39 @@ title: Список экземпляров книг
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page
 ---
-<p>Далее мы реализуем список всех имеющихся в библиотеке копий книги (<code>BookInstance</code>) . Эта страница должна включать название книги из <code>Book</code>,  с которой связаны экземпляры <code>BookInstance</code> (linked to its detail page), а также дополнительную информацию, имеющуюся в модели <code>BookInstance</code>, включая статус, издание, и уникальный идентификатор каждой копии. Уникальное значение идентификатора копии должно быть связано со страницей детальной информации <code>BookInstance</code>.</p>
+Далее мы реализуем список всех имеющихся в библиотеке копий книги (`BookInstance`) . Эта страница должна включать название книги из `Book`, с которой связаны экземпляры `BookInstance` (linked to its detail page), а также дополнительную информацию, имеющуюся в модели `BookInstance`, включая статус, издание, и уникальный идентификатор каждой копии. Уникальное значение идентификатора копии должно быть связано со страницей детальной информации `BookInstance`.
 
-<h2 class="highlight-spanned" id="Контроллер">Контроллер</h2>
+## Контроллер
 
-<p>Функция контроллера списка <code>BookInstance</code> требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.</p>
+Функция контроллера списка `BookInstance` требуется для получения списка всех экземпляров некоторой книги, для получения информации, связанной с книгой, и для передачи полученного списка в шаблон для отображения.
 
-<p>Откройте файл <strong>/controllers/bookinstanceController.js</strong>. Найдите экспортируемый метод <code>bookinstance_list()</code> контроллера и замените его следующим кодом (изменённый код выделен жирным).</p>
+Откройте файл **/controllers/bookinstanceController.js**. Найдите экспортируемый метод `bookinstance_list()` контроллера и замените его следующим кодом (изменённый код выделен жирным).
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Display list of all BookInstances.
+```js
+// Display list of all BookInstances.
 exports.bookinstance_list = function(req, res, next) {
 
-  <strong>BookInstance.find()
+  BookInstance.find()
     .populate('book')
     .exec(function (err, list_bookinstances) {
       if (err) { return next(err); }
       // Successful, so render
       res.render('bookinstance_list', { title: 'Book Instance List', bookinstance_list: list_bookinstances });
-    });</strong>
+    });
 
-};</code></pre>
+};
+```
 
-<p>Чтобы вернуть все объекты <code>BookInstance,</code> метод использует функцию <code>find()</code> модели. Далее в цепочке вызывается метод <code>populate()</code> с аргументом - полем <code>book,</code> что приводит к замене идентификатора id, хранящегося для каждого экземпляра <code>BookInstance</code> полным документом <code>Book</code>.</p>
+Чтобы вернуть все объекты `BookInstance,` метод использует функцию `find()` модели. Далее в цепочке вызывается метод `populate()` с аргументом - полем `book,` что приводит к замене идентификатора id, хранящегося для каждого экземпляра `BookInstance` полным документом `Book`.
 
-<p>При удаче, колбэк-функция, переданная запросу, заполняет шаблон <strong>bookinstance_list</strong>(.pug), передав переменные <code>title</code> и <code>bookinstance_list</code>.</p>
+При удаче, колбэк-функция, переданная запросу, заполняет шаблон **bookinstance_list**(.pug), передав переменные `title` и `bookinstance_list`.
 
-<h2 class="highlight-spanned" id="Представление">Представление</h2>
+## Представление
 
-<p>Создайте файл  <strong>/views/bookinstance_list.pug</strong> и скопируйте в него текст, приведённый ниже.</p>
+Создайте файл **/views/bookinstance_list.pug** и скопируйте в него текст, приведённый ниже.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">extends layout
+```js
+extends layout
 
 block content
   h1= title
@@ -51,19 +54,18 @@ block content
           span  (Due: #{val.due_back} )
 
     else
-      li There are no book copies in this library.</code></pre>
+      li There are no book copies in this library.
+```
 
-<p>This view is much the same as all the others. It extends the layout, replacing the <em>content</em> block, displays the <code>title</code> passed in from the controller, and iterates through all the book copies in <code>bookinstance_list</code>. For each copy we display its status (colour coded) and if the book is not available, its expected return date. One new feature is introduced—we can use dot notation after a tag to assign a class. So <code>span.text-success</code> will be compiled to <code>&lt;span class="text-success"&gt;</code> (and might also be written in Pug as <code>span(class="text-success")</code>.</p>
+This view is much the same as all the others. It extends the layout, replacing the _content_ block, displays the `title` passed in from the controller, and iterates through all the book copies in `bookinstance_list`. For each copy we display its status (colour coded) and if the book is not available, its expected return date. One new feature is introduced—we can use dot notation after a tag to assign a class. So `span.text-success` will be compiled to `<span class="text-success">` (and might also be written in Pug as `span(class="text-success")`.
 
-<h2 class="highlight-spanned" id="What_does_it_look_like">What does it look like?</h2>
+## What does it look like?
 
-<p>Run the application, open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>, then select the <em>All book-instances </em>link. If everything is set up correctly, your site should look something like the following screenshot.</p>
+Run the application, open your browser to <http://localhost:3000/>, then select the _All book-instances_ link. If everything is set up correctly, your site should look something like the following screenshot.
 
-<p><img alt="BookInstance List Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14474/LocalLibary_Express_BookInstance_List.png" style="border-style: solid; border-width: 1px; display: block; height: 322px; margin: 0px auto; width: 1200px;"></p>
+![BookInstance List Page - Express Local Library site](https://mdn.mozillademos.org/files/14474/LocalLibary_Express_BookInstance_List.png)
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Date formatting using moment</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Proceed to the next subarticle of part 5: [Date formatting using moment](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
index 171b72d6cb22b9..4d249da6cfca00 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/date_formatting_using_moment/index.md
@@ -3,58 +3,54 @@ title: Форматирование даты при помощи moment
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment
 ---
-<p>По умолчанию отображение дат наших моделей некрасиво: <em>Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)</em>. В этом разделе мы покажем, как можно обновить страницу списка <em>BookInstance List </em>из предыдущего раздела, чтобы представить поле <code>due_date</code>  в более удобном формате: December 6th, 2016. </p>
+По умолчанию отображение дат наших моделей некрасиво: _Tue Dec 06 2016 15:49:58 GMT+1100 (AUS Eastern Daylight Time)_. В этом разделе мы покажем, как можно обновить страницу списка _BookInstance List_ из предыдущего раздела, чтобы представить поле `due_date` в более удобном формате: December 6th, 2016.
 
-<p>Подход, который будет использован, состоит в  создании виртуального свойства в модели <code>BookInstance</code>,  которое будет возвращать отформатированную дату. Форматирование будет производиться с использованием <a class="external external-icon" href="https://www.npmjs.com/package/moment" rel="noopener">moment</a>, легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.</p>
+Подход, который будет использован, состоит в создании виртуального свойства в модели `BookInstance`, которое будет возвращать отформатированную дату. Форматирование будет производиться с использованием [moment](https://www.npmjs.com/package/moment), легковесной библиотеки JavaScript для разбора, проверки, изменения и форматирования дат.
 
-<div class="note">
-<p><strong>Примечание:</strong> Можно применять <em>moment</em> для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи <code>due_date</code>. </p>
-</div>
+> **Примечание:** Можно применять _moment_ для форматирования непосредственно в шаблонах Pug, а можно отформатировать строку в других местах. Использование виртуального свойства позволяет получить дату, отформатированную точно так же, как при помощи `due_date`.
 
-<h2 class="highlight-spanned" id="Установка_moment">Установка moment</h2>
+## Установка moment
 
-<p>Ведите следующую команду в корне проекта:</p>
+Ведите следующую команду в корне проекта:
 
-<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">npm install moment</code></pre>
+```bash
+npm install moment
+```
 
-<h2 class="highlight-spanned" id="Создание_виртуального_свойства">Создание виртуального свойства</h2>
+## Создание виртуального свойства
 
-<ol>
- <li>Откройте файл <strong>./models/bookinstance.js</strong>.</li>
- <li>В начало файла введите строку для импортирования <em>moment</em>.
-  <pre class="brush: js line-numbers  language-js"><code class="language-js">var moment = require('moment');</code></pre>
- </li>
-</ol>
+1.  Откройте файл **./models/bookinstance.js**.
+2.  В начало файла введите строку для импортирования _moment_.
 
-<p>Добавьте виртуальное свойство <code>due_back_formatted</code> сразу после свойства url.</p>
+    ```js
+    var moment = require('moment');
+    ```
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">BookInstanceSchema
+Добавьте виртуальное свойство `due_back_formatted` сразу после свойства url.
+
+```js
+BookInstanceSchema
 .virtual('due_back_formatted')
 .get(function () {
   return moment(this.due_back).format('MMMM Do, YYYY');
-});</code></pre>
+});
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Метод format method может вывести дату почти по любому образцу. Синтаксис для представления различных составляющих даты можно найти в документации ( <a class="external external-icon" href="http://momentjs.com/docs/#/displaying/" rel="noopener">moment documentation</a>).</p>
-</div>
+> **Примечание:** Метод format method может вывести дату почти по любому образцу. Синтаксис для представления различных составляющих даты можно найти в документации ( [moment documentation](http://momentjs.com/docs/#/displaying/)).
 
-<h2 class="highlight-spanned" id="Обновляем_представление">Обновляем представление</h2>
+## Обновляем представление
 
-<p>Откройте файл <strong>/views/bookinstance_list.pug</strong> и замените <code>due_back</code> на <code>due_back_formatted</code>.</p>
+Откройте файл **/views/bookinstance_list.pug** и замените `due_back` на `due_back_formatted`.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">      if val.status!='Available'
+```js
+      if val.status!='Available'
         //span  (Due: #{val.due_back} )
-        span  (Due: #{val.due_back_formatted} )       </code></pre>
-
-<p>Вот и все. Если вы перейдёте к  <em>All book-instances</em> в боковом меню, вы должны увидеть все даты  в привлекательном формате!</p>
-
-<p> </p>
+        span  (Due: #{val.due_back_formatted} )
+```
 
-<h2 id="Далее">Далее</h2>
+Вот и все. Если вы перейдёте к _All book-instances_ в боковом меню, вы должны увидеть все даты в привлекательном формате!
 
-<ul>
- <li>Вернуться к <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Перейти к следующему подразделу части  5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Author list page and Genre list page challenge</a> (страница списка авторов и тест- страница списка жанров).</li>
-</ul>
+## Далее
 
-<p> </p>
+- Вернуться к [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Перейти к следующему подразделу части 5: [Author list page and Genre list page challenge](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page) (страница списка авторов и тест- страница списка жанров).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
index 985692066ad330..2af4ea7069e616 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/flow_control_using_async/index.md
@@ -6,52 +6,50 @@ tags:
   - Часть 5
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async
 ---
-<p>Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определённом порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован <a class="external external-icon" href="https://www.npmjs.com/package/async" rel="noopener">async</a> - известный модуль node.</p>
+Код контроллера для некоторых страниц библиотеки будет зависеть от результатов многих асинхронных запросов, которые должны выполняться в определённом порядке или параллельно. Для того, чтобы управлять потоком выполнения, и выводить страницы, когда получена вся необходимая информация, будет использован [async](https://www.npmjs.com/package/async) - известный модуль node.
 
-<div class="note">
-<p><strong>Примечание:</strong>  В JavaScript существует много других способов управления асинхронным поведением и потоком выполнения, включая такой относительно  новый элемент языка JavaScript как <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Techniques/Promises">промисы</a> (promises).</p>
-</div>
+> **Примечание:** В JavaScript существует много других способов управления асинхронным поведением и потоком выполнения, включая такой относительно новый элемент языка JavaScript как [промисы](/ru/docs/Mozilla/Add-ons/Techniques/Promises) (promises).
 
-<p>Модуль Async имеет массу полезных методов (см. документацию <a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html" rel="noopener">the documentation</a>). Вот некоторые наиболее важные функции:</p>
+Модуль Async имеет массу полезных методов (см. документацию [the documentation](https://caolan.github.io/async/v3/docs.html)). Вот некоторые наиболее важные функции:
 
-<ul>
- <li><code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#parallel" rel="noopener">async.parallel()</a></code> для осуществления любых операций, которые должны выполняться параллельно.</li>
- <li><code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#series" rel="noopener">async.series()</a></code> если нужно иметь уверенность, что асинхронные операции выполняются последовательно.</li>
- <li><code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#waterfall" rel="noopener">async.waterfall()</a></code> для операций, которые должны выполняться последовательно, причём каждая операция зависит от результатов предыдущих операций.</li>
-</ul>
+- [`async.parallel()`](https://caolan.github.io/async/v3/docs.html#parallel) для осуществления любых операций, которые должны выполняться параллельно.
+- [`async.series()`](https://caolan.github.io/async/v3/docs.html#series) если нужно иметь уверенность, что асинхронные операции выполняются последовательно.
+- [`async.waterfall()`](https://caolan.github.io/async/v3/docs.html#waterfall) для операций, которые должны выполняться последовательно, причём каждая операция зависит от результатов предыдущих операций.
 
-<h2 class="highlight-spanned" id="Почему_это_необходимо">Почему это необходимо?</h2>
+## Почему это необходимо?
 
-<p>Большинство методов, которые используются в  <em>Express</em> - асинхронные - вы определяете выполняемую операцию, передавая  колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в <em>Express</em>, колбэк-функция передаёт значение ошибки <em>error</em>  как первый параметр (или <code>null</code> при успехе) и результат функции (если есть) как второй параметр.</p>
+Большинство методов, которые используются в _Express_ - асинхронные - вы определяете выполняемую операцию, передавая колбэк-функцию. Метод завершается немедленно, а колбэк-функция вызывается тогда, когда завершилась запрошенная операция. По соглашению, принятому в _Express_, колбэк-функция передаёт значение ошибки _error_ как первый параметр (или `null` при успехе) и результат функции (если есть) как второй параметр.
 
-<p>Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели <code>SomeModel</code> (применяя метод Mongoose <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.count" rel="noopener">count()</a></code> ):</p>
+Если контроллер должен выполнить только одну асинхронную операцию, чтобы получить информацию для представления страницы, то реализация проста - мы просто представляем шаблон в колбэке. Фрагмент кода (ниже) демонстрирует это для функции, которая подсчитывает количество элементов модели `SomeModel` (применяя метод Mongoose [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count) ):
 
-<pre class="brush: js"><code>exports.some_model_count = function(req, res, next) {
+```js
+exports.some_model_count = function(req, res, next) {
 
-</code>  SomeModel.count({ a_model_field: 'match_value' }, function (err, count) {
+  SomeModel.count({ a_model_field: 'match_value' }, function (err, count) {
     // ... сделать что-то, если ошибка
 
     // При успехе представить результат, передав count в render-функцию (здесь - как переменную 'data').
     res.render('the_template', { data: count } );
   });
-<code>}</code>
-</pre>
+}
+```
 
-<p>Однако что, если требуется сделать <strong>множественные</strong> асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложнённому вложенному коду, что обычно называют адом колбэков ( <a class="external external-icon" href="http://callbackhell.com/" rel="noopener">callback hell</a> ).</p>
+Однако что, если требуется сделать **множественные** асинхронные запросы, и результат нельзя представить, пока не завершились все операции? Наивная реализация могла бы использовать "венок" запросов, запуская последующие запросы в колбэках предыдущих, и представляя ответ в последнем колбэке. Проблема такого подхода состоит в том, что запросы должны выполняться последовательно, хотя, вероятно, было бы более эффективно выполнять их параллельно. Это также может привести к усложнённому вложенному коду, что обычно называют адом колбэков ( [callback hell](http://callbackhell.com/) ).
 
-<p>Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль <em>Async</em> делает лёгким и простым!</p>
+Намного лучше было бы выполнять все запросы параллельно, и иметь единственную колбэк-функцию, которая будет вызвана после того как все запросы выполнены. Именно такое выполнение операций модуль _Async_ делает лёгким и простым!
 
-<h2 class="highlight-spanned" id="Параллельные_асинхронные_операции">Параллельные асинхронные операции</h2>
+## Параллельные асинхронные операции
 
-<p>Метод <code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#parallel" rel="noopener">async.parallel()</a></code> используется для параллельного выполнения нескольких асинхронных операций.</p>
+Метод [`async.parallel()`](https://caolan.github.io/async/v3/docs.html#parallel) используется для параллельного выполнения нескольких асинхронных операций.
 
-<p>Первый аргумент в <code>async.parallel()</code> - это коллекция асинхронных функций, которые требуется выполнить (массив, объект или другой итерируемый элемент). Каждая функция получает колбэк-функцию <code>callback(err, result)</code> , которую она должна вызвать при завершении, с ошибкой <code>err</code> (может быть <code>null</code>) и, возможно, со значением результата <code>results</code>.</p>
+Первый аргумент в `async.parallel()` - это коллекция асинхронных функций, которые требуется выполнить (массив, объект или другой итерируемый элемент). Каждая функция получает колбэк-функцию `callback(err, result)` , которую она должна вызвать при завершении, с ошибкой `err` (может быть `null`) и, возможно, со значением результата `results`.
 
-<p>Возможный второй аргумент для  <code>async.parallel()</code> - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передаётся <em>массив</em> асинхронных функций, итоговая колбэк-функция будет вызвана с <em>массивом</em> результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.</p>
+Возможный второй аргумент для `async.parallel()` - это callback -функция, которая должна быть вызвана после завершения всех функций, указанных в первом аргументе. Эта функция вызывается с аргументом ошибки и результатом - коллекцией результатов отдельных асинхронных операций. Тип коллекции - такой же, как и тип первого аргумента async.parallel (т.е. если передаётся _массив_ асинхронных функций, итоговая колбэк-функция будет вызвана с _массивом_ результатов). Если любая из параллельных функций сообщила об ошибке, сразу вызывается итоговая колбэк-функция, которая возвращает ошибку.
 
-<p>Пример ниже показывает, как это работает в случае, когда первый аргумент является объектом. Как видно, результаты возвращаются в объекте с такими же именами свойств, как у переданных функций.</p>
+Пример ниже показывает, как это работает в случае, когда первый аргумент является объектом. Как видно, результаты возвращаются в объекте с такими же именами свойств, как у переданных функций.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">async.parallel({
+```js
+async.parallel({
   one: function(callback) { ... },
   two: function(callback) { ... },
   ...
@@ -61,15 +59,17 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
   function(err, results) {
     // 'results' равны: {one: 1, two: 2, ..., something_else: some_value}
   }
-);</code></pre>
+);
+```
 
-<p>Если вместо объекта передать <em>массив </em>функций как первый аргумент, результатом будет массив (порядок результатов в массиве такой же, как и порядок функций в массиве, а не порядок выполнения функций).</p>
+Если вместо объекта передать _массив_ функций как первый аргумент, результатом будет массив (порядок результатов в массиве такой же, как и порядок функций в массиве, а не порядок выполнения функций).
 
-<h2 class="highlight-spanned" id="Последовательные_асинхронные_операции">Последовательные асинхронные операции</h2>
+## Последовательные асинхронные операции
 
-<p>Для выполнения нескольких асинхронных операций последовательно используется метод <code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#series" rel="noopener">async.series()</a></code> , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведёт себя так же, как и <code>async.parallel()</code>.</p>
+Для выполнения нескольких асинхронных операций последовательно используется метод [`async.series()`](https://caolan.github.io/async/v3/docs.html#series) , при этом последующие функции не зависят от результатов предыдущих функций. Метод определяется и ведёт себя так же, как и `async.parallel()`.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">async.series({
+```js
+async.series({
   one: function(callback) { ... },
   two: function(callback) { ... },
   ...
@@ -77,42 +77,44 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
   },
   // optional callback after the last asynchronous function completes.
   function(err, results) {
-    // 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value} 
+    // 'results' is now equals to: {one: 1, two: 2, ..., something_else: some_value}
   }
-);</code></pre>
+);
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок  в перечислении объектов не определён, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.</p>
-</div>
+> **Примечание:** Спецификация языка ECMAScript (JavaScript) устанавливает, что порядок в перечислении объектов не определён, поэтому возможно, что функции не будут вызываться в том порядке, в котором вы их задали на всех платформах. Если порядок вызова действительно важен, вместо объекта следует передавать массив, как показано ниже.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">async.series([
+```js
+async.series([
   function(callback) {
     // do some stuff ...
     callback(null, 'one');
   },
   function(callback) {
-    // do some more stuff ... 
+    // do some more stuff ...
     callback(null, 'two');
   }
  ],
   // optional callback
   function(err, results) {
-  // results is now equal to ['one', 'two'] 
+  // results is now equal to ['one', 'two']
   }
-);</code></pre>
+);
+```
 
-<h2 class="highlight-spanned" id="Последовательные_зависимые_асинхронные_операции">Последовательные зависимые асинхронные операции</h2>
+## Последовательные зависимые асинхронные операции
 
-<p>Выполнение нескольких асинхронных операций последовательно, когда каждая операция зависит от результатов предыдущих операций, осуществляется методом <code><a class="external external-icon" href="https://caolan.github.io/async/v3/docs.html#waterfall" rel="noopener">async.waterfall()</a></code>.</p>
+Выполнение нескольких асинхронных операций последовательно, когда каждая операция зависит от результатов предыдущих операций, осуществляется методом [`async.waterfall()`](https://caolan.github.io/async/v3/docs.html#waterfall).
 
-<p>Функции-callback, которая вызываются асинхронными функциями , содержит <code>null</code> как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда  операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведённого ниже ( пример взят из документации <em>async</em>):</p>
+Функции-callback, которая вызываются асинхронными функциями , содержит `null` как первый аргумент, и результаты в следующих аргументах. Каждая функция в последовательности (кроме первой) как аргументы использует результаты предыдущих функция, а колбэк-функция является последним аргументом. Когда операции завершаются, вызывается финальная колбэк-функция, аргументы которой - объект err и результат последней операции. Как это работает, станет более ясным после рассмотрения примера - фрагмента кода, приведённого ниже ( пример взят из документации _async_):
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">async.waterfall([
+```js
+async.waterfall([
   function(callback) {//первая функция в цепочке
     callback(null, 'one', 'two');//результаты 'one' и 'two'
   },
   function(arg1, arg2, callback) {//вторая функция в цепочке
-    // arg1 равен 'one' , arg2 равен  'two' 
+    // arg1 равен 'one' , arg2 равен  'two'
     callback(null, 'three'); //результат 'three'
   },
   function(arg1, callback) {
@@ -122,17 +124,18 @@ translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_us
 ], function (err, result) {
   // result равен 'done'
 }
-);</code></pre>
+);
+```
 
-<h2 class="highlight-spanned" id="Установка_async">Установка async</h2>
+## Установка async
 
-<p>Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своём коде. Это делается обычным способом - откроем окно команд в корне проекта <em>LocalLibrary</em> и введём команду:</p>
+Установим модуль async при помощи менеджера пакетов NPM, чтобы использовать его в своём коде. Это делается обычным способом - откроем окно команд в корне проекта _LocalLibrary_ и введём команду:
 
-<pre class="brush: bash line-numbers  language-bash"><code class="language-bash">npm install async</code></pre>
+```bash
+npm install async
+```
 
-<h2 id="Дальнейшие_шаги">Дальнейшие шаги</h2>
+## Дальнейшие шаги
 
-<ul>
- <li>Вернуться учебнику <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express, Part 5: Вывести данные библиотеки</a>.</li>
- <li>Перейти к следующему разделу части 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Основы шаблонов</a>.</li>
-</ul>
+- Вернуться учебнику [Express, Part 5: Вывести данные библиотеки](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Перейти к следующему разделу части 5: [Основы шаблонов](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
index 225f3c736206dc..c0fe02e2dc8a7d 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/genre_detail_page/index.md
@@ -3,22 +3,24 @@ title: Страница с подробностями жанров
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page
 ---
-<p>Страница "подробности" (<em>detail)</em> для жанров должна показывать информацию для отдельного жанра по его автоматически генерируем идентификатору <code>_id</code>. Должно быть показано название жанра и список книг этого жанра, со ссылками на страницу с детальной информацией для каждой книги.</p>
+Страница "подробности" (_detail)_ для жанров должна показывать информацию для отдельного жанра по его автоматически генерируем идентификатору `_id`. Должно быть показано название жанра и список книг этого жанра, со ссылками на страницу с детальной информацией для каждой книги.
 
-<h2 id="Controller">Controller</h2>
+## Controller
 
-<p>Откройте файл<em> </em><strong>/controllers/genreController.js</strong> и импортируйте модули <em>async</em> и <em>Book</em>  в первых строках файла.</p>
+Откройте файл\_ _**/controllers/genreController.js** и импортируйте модули \_async_ и _Book_ в первых строках файла.
 
-<pre class="brush: js">var Book = require('../models/book');
+```js
+var Book = require('../models/book');
 var async = require('async');
-</pre>
+```
 
-<p>Найдите экспортируемый метод контроллера <code>genre_detail</code><code>()</code> и замените его следующим кодом:</p>
+Найдите экспортируемый метод контроллера ` genre_detail``() ` и замените его следующим кодом:
 
-<pre class="brush: js">// Display detail page for a specific Genre.
+```js
+// Display detail page for a specific Genre.
 exports.genre_detail = function(req, res, next) {
 
-<strong>    async.parallel({
+    async.parallel({
         genre: function(callback) {
             Genre.findById(req.params.id)
               .exec(callback);
@@ -38,39 +40,39 @@ exports.genre_detail = function(req, res, next) {
         }
         // Successful, so render
         res.render('genre_detail', { title: 'Genre Detail', genre: results.genre, genre_books: results.genre_books } );
-    });</strong>
+    });
 
 };
-</pre>
+```
 
-<p>Метод использует <code>async.parallel()</code> для параллельного запроса названия жанра и связанных с ним книг, причём колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.</p>
+Метод использует `async.parallel()` для параллельного запроса названия жанра и связанных с ним книг, причём колбэк-функция возвращает страницу, когда (если) оба запроса завершились успешно.
 
-<p>The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (<strong>/genre/:id</strong>). The ID is accessed within the controller via the request parameters: <code style="font-style: normal; font-weight: normal;">req.params.id</code>. It is used in <code style="font-style: normal; font-weight: normal;">Genre.findById()</code> to get the current genre. It is also used to get all <code>Book</code> objects that have the genre ID in their <code>genre</code> field: <code>Book.find({ 'genre': req.params.id })</code>.</p>
+The ID of the required genre record is encoded at the end of the URL and extracted automatically based on the route definition (**/genre/:id**). The ID is accessed within the controller via the request parameters: `req.params.id`. It is used in `Genre.findById()` to get the current genre. It is also used to get all `Book` objects that have the genre ID in their `genre` field: `Book.find({ 'genre': req.params.id })`.
 
-<div class="note">
-<p><strong>Note:</strong> If the genre does not exist in the database (i.e. it may have been deleted) then <code>findById()</code>  will return successfully with no results. In this case we want to display a "not found" page, so we create an <code>Error</code> object and pass it to the <code>next</code> middleware function in the chain. </p>
+> **Примечание:** If the genre does not exist in the database (i.e. it may have been deleted) then `findById()` will return successfully with no results. In this case we want to display a "not found" page, so we create an `Error` object and pass it to the `next` middleware function in the chain.
+>
+> ```js
+> if (results.genre==null) { // No results.
+>     var err = new Error('Genre not found');
+>     err.status = 404;
+>     return next(err);
+> }
+> ```
+>
+> The message will then propagate through to our error handling code (this was set up when we [generated the app skeleton](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling) - for more information see [Handling Errors](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors)).
 
-<pre class="brush: js"><strong>if (results.genre==null) { // No results.
-    var err = new Error('Genre not found');
-    err.status = 404;
-    return next(err);
-}</strong>
-</pre>
+The rendered view is **genre_detail** and it is passed variables for the `title`, `genre` and the list of books in this genre (`genre_books`).
 
-<p>The message will then propagate through to our error handling code (this was set up when we <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website#error_handling">generated the app skeleton</a> - for more information see <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Handling_errors">Handling Errors</a>).</p>
-</div>
+## View
 
-<p>The rendered view is <strong>genre_detail</strong> and it is passed variables for the <code>title</code>, <code>genre</code> and the list of books in this genre (<code>genre_books</code>).</p>
+Create **/views/genre_detail.pug** and fill it with the text below:
 
-<h2 id="View">View</h2>
-
-<p>Create <strong>/views/genre_detail.pug</strong> and fill it with the text below:</p>
-
-<pre class="brush: js">extends layout
+```js
+extends layout
 
 block content
 
-  <strong>h1 Genre: #{genre.name}</strong>
+  h1 Genre: #{genre.name}
 
   div(style='margin-left:20px;margin-top:20px')
 
@@ -84,38 +86,37 @@ block content
 
       else
         p This genre has no books
-</pre>
-
-<p>The view is very similar to all our other templates. The main difference is that we don't use the <code>title</code> passed in for the first heading (though it is used in the underlying <strong>layout.pug</strong> template to set the page title).</p>
-
-<h2 id="What_does_it_look_like">What does it look like?</h2>
-
-<p>Run the application and open your browser to <a href="http://localhost:3000/">http://localhost:3000/</a>. Select the <em>All genres</em> link, then select one of the genres (e.g. "Fantasy"). If everything is set up correctly, your page should look something like the following screenshot.</p>
-
-<p><img alt="Genre Detail Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14462/LocalLibary_Express_Genre_Detail.png" style="border-style: solid; border-width: 1px; display: block; height: 523px; margin: 0px auto; width: 1000px;"></p>
-
-<div class="note">
-<p>You might get an error similar to this:</p>
-
-<pre class="brush: bash">Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre"
-</pre>
-
-<p>This is a mongoose error coming from the <strong>req.params.id</strong>. To solve this problem, first you need to require mongoose on the <strong>genreController.js</strong> page like this:</p>
-
-<pre class="brush: js"> var mongoose = require('mongoose');
-</pre>
-
-<p>Then use <strong>mongoose.Types.ObjectId() </strong>to convert the id to a that can be used. For example:</p>
-
-<pre class="brush: js">exports.genre_detail = function(req, res, next) {
-    var id = mongoose.Types.ObjectId(req.params.id);
-    ...
-</pre>
-</div>
-
-<h2 id="Next_steps">Next steps</h2>
-
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Book detail page</a>.</li>
-</ul>
+```
+
+The view is very similar to all our other templates. The main difference is that we don't use the `title` passed in for the first heading (though it is used in the underlying **layout.pug** template to set the page title).
+
+## What does it look like?
+
+Run the application and open your browser to <http://localhost:3000/>. Select the _All genres_ link, then select one of the genres (e.g. "Fantasy"). If everything is set up correctly, your page should look something like the following screenshot.
+
+![Genre Detail Page - Express Local Library site](https://mdn.mozillademos.org/files/14462/LocalLibary_Express_Genre_Detail.png)
+
+> **Примечание:** You might get an error similar to this:
+>
+> ```bash
+> Cast to ObjectId failed for value " 59347139895ea23f9430ecbb" at path "_id" for model "Genre"
+> ```
+>
+> This is a mongoose error coming from the **req.params.id**. To solve this problem, first you need to require mongoose on the **genreController.js** page like this:
+>
+> ```js
+>  var mongoose = require('mongoose');
+> ```
+>
+> Then use **mongoose.Types.ObjectId()** to convert the id to a that can be used. For example:
+>
+> ```js
+> exports.genre_detail = function(req, res, next) {
+>     var id = mongoose.Types.ObjectId(req.params.id);
+>     ...
+> ```
+
+## Next steps
+
+- Return to [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Proceed to the next subarticle of part 5: [Book detail page](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md
index 287620ec8b04c4..ac246424b3394d 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/home_page/index.md
@@ -3,52 +3,59 @@ title: Home page
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Home_page
 ---
-<p>Первой создаваемой страницей будет домашняя  страница веб-сайта, доступная из корня сайта (<code>'/'</code>) или из каталога (<code>catalog/</code>). На странице будет виден статический текст, описывающий сайт, и динамически вычисляемые "количества" записей разных типов имеющихся в БД.</p>
+Первой создаваемой страницей будет домашняя страница веб-сайта, доступная из корня сайта (`'/'`) или из каталога (`catalog/`). На странице будет виден статический текст, описывающий сайт, и динамически вычисляемые "количества" записей разных типов имеющихся в БД.
 
-<p>Маршрут для домашней страницы уже создан. Для завершения страницы обновить функции контроллера, чтобы он извлекал количество записей из БД, и создавал представление (шаблон), который можно использовать для презентации страницы.</p>
+Маршрут для домашней страницы уже создан. Для завершения страницы обновить функции контроллера, чтобы он извлекал количество записей из БД, и создавал представление (шаблон), который можно использовать для презентации страницы.
 
-<h2 id="Маршрут">Маршрут</h2>
+## Маршрут
 
-<p>Маршруты индексной страницы созданы ранее в предыдущем разделе (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial).</a> Напомним, все функции маршрутов определены в файле <strong>/routes/catalog.js</strong>:</p>
+Маршруты индексной страницы созданы ранее в предыдущем разделе ([previous tutorial).](/ru/docs/Learn/Server-side/Express_Nodejs/routes) Напомним, все функции маршрутов определены в файле **/routes/catalog.js**:
 
-<pre class="brush: js ">// GET catalog home page.
-router.get('/', book_controller.index);  //This actually maps to /catalog/ because we import the route with a /catalog prefix</pre>
+```js
+// GET catalog home page.
+router.get('/', book_controller.index);  //This actually maps to /catalog/ because we import the route with a /catalog prefix
+```
 
-<p>Параметр колбэк-функции определён в <strong>/controllers/bookController.js</strong>:</p>
+Параметр колбэк-функции определён в **/controllers/bookController.js**:
 
-<pre class="brush: js">exports.index = function(req, res, next) {
+```js
+exports.index = function(req, res, next) {
     res.send('NOT IMPLEMENTED: Site Home Page');
-}</pre>
-
-<p>Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать её, используя шаблоны (представления).</p>
+}
+```
 
-<h2 id="Контроллер">Контроллер</h2>
+Именно эту функцию контроллера мы расширим, чтобы получать информацию из моделей и затем отображать её, используя шаблоны (представления).
 
-<p>Функция контроллера индекса должна получать информацию о том, сколько книг (<code>Book)</code>, экземпляров книг (<code>BookInstance)</code>, сколько из них доступно, сколько авторов (<code>Author)</code>, жанров (<code>Genre)</code> имеется в БД, должна поместить эту информацию в шаблон, чтобы создать  HTML-страницу, после чего вернуть её в  HTTP-ответе.</p>
+## Контроллер
 
-<div class="note">
-<p><strong>Примечание:</strong> Количество экземпляров в каждой модели вычисляется при помощи метода <code><a class="external external-icon" href="http://mongoosejs.com/docs/api.html#model_Model.countDocuments" rel="noopener">countDocuments()</a></code> . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Using a Database (with Mongoose)</a>), причём можно вернуть также запрос <code>Query,</code> а затем выполнить его позже при помощи callback. Эта  колбэк-функция будет выполняться, когда БД вернёт количество записей.  Значение ошибки (or <code>null</code>) будет первым параметром, а количество записей (или null, если была ошибка) -  вторым параметром.</p>
+Функция контроллера индекса должна получать информацию о том, сколько книг (`Book)`, экземпляров книг (`BookInstance)`, сколько из них доступно, сколько авторов (`Author)`, жанров (`Genre)` имеется в БД, должна поместить эту информацию в шаблон, чтобы создать HTML-страницу, после чего вернуть её в HTTP-ответе.
 
-<pre class="brush: js ">SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) {
- // ... do something if there is an err
- // ... do something with the count if there was no error
- });</pre>
-</div>
+> **Примечание:** Количество экземпляров в каждой модели вычисляется при помощи метода [`countDocuments()`](http://mongoosejs.com/docs/api.html#model_Model.countDocuments) . Он вызывается для модели с возможным набором условий, необходимых для проверки соответствия первому аргументу и колбэк-функции второго аргумента (обсуждалось ранее в "Использование базы данных с Mongoose" [Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)), причём можно вернуть также запрос `Query,` а затем выполнить его позже при помощи callback. Эта колбэк-функция будет выполняться, когда БД вернёт количество записей. Значение ошибки (or `null`) будет первым параметром, а количество записей (или null, если была ошибка) - вторым параметром.
+>
+> ```js
+> SomeModel.countDocuments({ a_model_field: 'match_value' }, function (err, count) {
+>  // ... do something if there is an err
+>  // ... do something with the count if there was no error
+>  });
+> ```
 
-<p>Откройте файл <strong>/controllers/bookController.js</strong>. Почти в самом начале вы должны увидеть экспортируемую функцию <code>index()</code> .</p>
+Откройте файл **/controllers/bookController.js**. Почти в самом начале вы должны увидеть экспортируемую функцию `index()` .
 
-<pre class="brush: python ">var Book = require('../models/book')
+```python
+var Book = require('../models/book')
 
 exports.index = function(req, res, next) {
  res.send('NOT IMPLEMENTED: Site Home Page');
-}</pre>
+}
+```
 
-<p>Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (<code>require()</code>)  все модели (выделено жирным).  Это требуется, поскольку они нужны для подсчёта числа записей. Затем импортируется модуль <em>async</em> .</p>
+Замените весь код, показанный выше, на следующий фрагмент кода. Первое, что он делает - импортирует (`require()`) все модели (выделено жирным). Это требуется, поскольку они нужны для подсчёта числа записей. Затем импортируется модуль _async_ .
 
-<pre class="brush: js "><strong>var Book = require('../models/book');
+```js
+var Book = require('../models/book');
 var Author = require('../models/author');
 var Genre = require('../models/genre');
-var BookInstance = require('../models/bookinstance');</strong>
+var BookInstance = require('../models/bookinstance');
 
 var async = require('async');
 
@@ -56,39 +63,39 @@ exports.index = function(req, res) {
 
     async.parallel({
         book_count: function(callback) {
-            Book.count<s>Documents</s>({}, callback); // Pass an empty object as match condition to find all documents of this collection
-// count<s>Documents</s> не работает, работает только просто count
+            Book.countDocuments({}, callback); // Pass an empty object as match condition to find all documents of this collection
+// countDocuments не работает, работает только просто count
         },
         book_instance_count: function(callback) {
-            BookInstance.count<s>Documents</s>({}, callback);
+            BookInstance.countDocuments({}, callback);
         },
         book_instance_available_count: function(callback) {
-            BookInstance.count<s>Documents</s>({status:'Available'}, callback);
+            BookInstance.countDocuments({status:'Available'}, callback);
         },
         author_count: function(callback) {
-            Author.count<s>Documents</s>({}, callback);
+            Author.countDocuments({}, callback);
         },
         genre_count: function(callback) {
-            Genre.count<s>Documents</s>({}, callback);
+            Genre.countDocuments({}, callback);
         }
     }, function(err, results) {
         res.render('index', { title: 'Local Library Home', error: err, data: results });
     });
-};</pre>
+};
+```
 
-<p>Метод <code>async.parallel()</code> передаёт объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся,  будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).</p>
+Метод `async.parallel()` передаёт объект с функциями для получения количества элементов каждой модели. Все эти функции стартуют одновременно. Когда все они завершатся, будет вызвана финальная колбэк-функция, в итоговом параметре которой содержится нужный нам результат (или ошибка).
 
-<p>При успешном завершении колбэк-функции она вызывает <code><a class="external external-icon" href="http://expressjs.com/en/4x/api.html#res.render" rel="noopener">res.render()</a></code>, у которой в качестве параметров - представление (шаблон)  '<strong>index</strong>' и объект, содержащий данные, которые следует поместить в шаблон (среди них - количества элементов в моделях). Данные представлены как пары ключ-значение, и могут быть получены в шаблоне по ключу.</p>
+При успешном завершении колбэк-функции она вызывает [`res.render()`](http://expressjs.com/en/4x/api.html#res.render), у которой в качестве параметров - представление (шаблон) '**index**' и объект, содержащий данные, которые следует поместить в шаблон (среди них - количества элементов в моделях). Данные представлены как пары ключ-значение, и могут быть получены в шаблоне по ключу.
 
-<div class="note">
-<p><strong>Примечание:</strong>  В данном случае колбэк-функция, которую вызывает <code>async.parallel()</code> , несколько необычная - страница отображается всегда, независимо от того, была ошибка или нет (обычно используют отдельный путь выполнения для обработки выводимых ошибок).</p>
-</div>
+> **Примечание:** В данном случае колбэк-функция, которую вызывает `async.parallel()` , несколько необычная - страница отображается всегда, независимо от того, была ошибка или нет (обычно используют отдельный путь выполнения для обработки выводимых ошибок).
 
-<h2 id="Представление">Представление</h2>
+## Представление
 
-<p>Откройте файл  <strong>/views/index.pug</strong> и замените его содержимое текстом, приведённым ниже</p>
+Откройте файл **/views/index.pug** и замените его содержимое текстом, приведённым ниже
 
-<pre class="brush: js ">extends layout
+```js
+extends layout
 
 block content
   h1= title
@@ -106,29 +113,24 @@ block content
       li #[strong Copies:] !{data.book_instance_count}
       li #[strong Copies available:] !{data.book_instance_available_count}
       li #[strong Authors:] !{data.author_count}
-      li #[strong Genres:] !{data.genre_count}</pre>
+      li #[strong Genres:] !{data.genre_count}
+```
 
-<p>Представление несложное. Мы расширили базовый шаблон  <strong>layout.pug</strong>, переопределив блок (<code>block)</code> с именем '<strong>content</strong>'. Первый заголовок <code>h1</code> будет экранированным текстом - значением переменной <code>title</code> ,variable that  которая передаётся в функцию <code>render()</code> —заметьте, что применение '<code>h1=</code>'  говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с  LocalLibrary.</p>
+Представление несложное. Мы расширили базовый шаблон **layout.pug**, переопределив блок (`block)` с именем '**content**'. Первый заголовок `h1` будет экранированным текстом - значением переменной `title` ,variable that которая передаётся в функцию `render()` —заметьте, что применение '`h1=`' говорит, что следующий текст рассматривается как выражение JavaScript. Затем расположен параграф, знакомящий с LocalLibrary.
 
-<p>Под заголовком <em>Dynamic content</em>  мы проверяем, определена ли переданная из функции <code>render()</code> переменная error. Если да, отмечаем ошибку. Если нет, выводим ( как список) количества копий каждой модели, которые хранятся в переменной <code>data</code>.</p>
+Под заголовком _Dynamic content_ мы проверяем, определена ли переданная из функции `render()` переменная error. Если да, отмечаем ошибку. Если нет, выводим ( как список) количества копий каждой модели, которые хранятся в переменной `data`.
 
-<div class="note">
-<p><strong>Примечание:</strong>  Мы не экранируем количества элементов (т.е. используется синтаксис <code>!{}</code> ) потому что эти значения вычисляются. Если бы информация предоставлялась конечным пользователем, следовало бы экранировать переменную перед выводом.</p>
-</div>
+> **Примечание:** Мы не экранируем количества элементов (т.е. используется синтаксис `!{}` ) потому что эти значения вычисляются. Если бы информация предоставлялась конечным пользователем, следовало бы экранировать переменную перед выводом.
 
-<h2 id="Как_это_выглядит">Как это выглядит?</h2>
+## Как это выглядит?
 
-<p>Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведённом снимке экрана.</p>
+Сейчас у нас есть все для того, чтобы показать страницу index. Запустите приложение и откройте браузер с адресом <http://localhost:3000/>. Если все задано правильно, ваш сайт должен иметь примерно такой вид, как на приведённом снимке экрана.
 
-<p><img alt="Home page - Express Local Library site" src="https://mdn.mozillademos.org/files/14458/LocalLibary_Express_Home.png" style="display: block; height: 440px; margin: 0px auto; width: 1000px;"></p>
+![Home page - Express Local Library site](https://mdn.mozillademos.org/files/14458/LocalLibary_Express_Home.png)
 
-<div class="note">
-<p><strong>Примечание:</strong>  Элементы бокового меню использовать ещё нельзя, так как адреса, представления и шаблоны для этих страниц ещё не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например,  вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню.  Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".</p>
-</div>
+> **Примечание:** Элементы бокового меню использовать ещё нельзя, так как адреса, представления и шаблоны для этих страниц ещё не определены. Если вы попытаетесь их использовать, будет выведено сообщение об ошибке, например, вида "NOT IMPLEMENTED: Book list" (НЕ РЕАЛИЗОВАНО: список книг), в зависимости от выбранного элемента меню. Эти строковые литералы (которые будут замещены действительными данными) были заданы в различных файлах контроллеров в каталоге "controllers".
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Book list page</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Proceed to the next subarticle of part 5: [Book list page](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/index.md
index 70bd190b39c065..be737f808ec614 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/index.md
@@ -3,81 +3,64 @@ title: 'Учебник Express часть 5: Отображение данных
 slug: Learn/Server-side/Express_Nodejs/Displaying_data
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</div>
+Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта [LocalLibrary](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретём практический опыт в получении записей из баз данных и использовании шаблонов.
 
-<p class="summary">Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельные страницы для детального просмотра записей. Попутно мы приобретём практический опыт в получении записей из баз данных и использовании шаблонов.</p>
+| Предварительные знания: | Завершите изучение предыдущих тем учебника (включая [Учебник Express часть 4: Маршруты и контроллеры](/ru/docs/Learn/Server-side/Express_Nodejs/routes)). |
+| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                   | Понять, как использовать асинхронный модуль и язык шаблона Pug, и как получить данные из URL в наших функциях контроллера.                                |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные знания:</th>
-   <td>Завершите изучение предыдущих тем учебника (включая <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Учебник Express часть 4: Маршруты и контроллеры</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, как использовать асинхронный модуль и язык шаблона Pug, и как получить данные из URL в наших функциях контроллера.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+В предыдущих статьях учебника мы определили [Mongoose модели](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose), которые можно использовать для взаимодействия с базой данных и создания некоторых исходных записей библиотеки. Затем мы [создали все маршруты](/ru/docs/Learn/Server-side/Express_Nodejs/routes), необходимые для веб-сайта LocalLibrary, но с "фиктивными" функциями контроллеров (это скелетные функции, которые просто возвращают сообщение "не реализовано " при доступе к странице).
 
-<p>В  предыдущих статьях учебника мы определили <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Mongoose модели</a>, которые можно использовать для взаимодействия с базой данных и создания некоторых исходных записей библиотеки. Затем мы <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">создали все маршруты</a>, необходимые для веб-сайта LocalLibrary, но с "фиктивными"  функциями  контроллеров (это скелетные функции, которые просто возвращают сообщение "не реализовано " при доступе к странице).</p>
+Следующим шагом является обеспечение правильных реализаций для страниц, которые отображают информацию из библиотеки (мы рассмотрим реализацию страниц с формами для создания, обновления или удаления информации в последующих статьях). Это включает в себя обновление функций контроллера для извлечения записей с помощью наших моделей и определение шаблонов для отображения этой информации пользователям.
 
-<p>Следующим шагом является обеспечение правильных реализаций для страниц, которые отображают информацию из библиотеки (мы рассмотрим реализацию страниц с формами для создания, обновления или удаления информации в последующих статьях). Это включает в себя обновление функций контроллера для извлечения записей с помощью наших моделей и определение шаблонов для отображения этой информации пользователям.</p>
+Мы начнём с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.
 
-<p>Мы начнём с обзорных / основных тем, объясняющих, как управлять асинхронными операциями в функциях контроллера и как писать шаблоны с помощью Pug. Затем мы предоставим реализации для каждой из наших основных страниц" только для чтения " с кратким объяснением любых специальных или новых функций, которые они используют.</p>
+В конце этой статьи вы должны иметь хорошее сквозное понимание того, как маршруты, асинхронные функции, представления и модели работают на практике.
 
-<p>В конце этой статьи вы должны иметь хорошее сквозное понимание того, как маршруты, асинхронные функции, представления и модели работают на практике.</p>
+## Отображение данных библиотеки — подразделы
 
-<h2 id="Отображение_данных_библиотеки_—_подразделы">Отображение данных библиотеки — подразделы</h2>
+Следующие подразделы проходят процесс добавления различных функций, необходимых для отображения необходимых страниц веб-сайта. Вы должны прочитать и проработать каждый из них по очереди, прежде чем перейти к следующему.
 
-<p>Следующие подразделы проходят процесс добавления различных функций, необходимых для отображения необходимых страниц веб-сайта. Вы должны прочитать и проработать каждый из них по очереди, прежде чем перейти к следующему.</p>
+1.  [Асинхронное управление потоками с помощью async](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async)
+2.  [Пример шаблона](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer)
+3.  [Базовые шаблоны LocalLibrary](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template)
+4.  [Домашняя страница](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page)
+5.  [Страница списка книг](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page)
+6.  [Страница списка экземпляров книг](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page)
+7.  [Форматирование даты с момента использования](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment)
+8.  [Страница списка авторов и страница списка жанров](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page)
+9.  [Страница сведений о жанре](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page)
+10. [Страница сведений о книге](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page)
+11. [Страница информации об авторе](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page)
+12. [Страница сведений об экземпляре книги и вызове](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge)
 
-<ol>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/flow_control_using_async">Асинхронное управление потоками с помощью async</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer">Пример шаблона</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">Базовые шаблоны LocalLibrary</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Домашняя страница</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_list_page">Страница списка книг</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_list_page">Страница списка экземпляров книг</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Date_formatting_using_moment">Форматирование даты с момента использования</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_list_page">Страница списка авторов и страница списка жанров</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Genre_detail_page">Страница сведений о жанре</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Book_detail_page">Страница сведений о книге</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Author_detail_page">Страница информации об авторе</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/BookInstance_detail_page_and_challenge">Страница сведений об экземпляре книги и вызове</a></li>
-</ol>
+## Итог
 
-<h2 id="Итог">Итог</h2>
+Теперь мы создали все страницы "только для чтения " для нашего сайта: домашнюю страницу, которая отображает количество экземпляров каждой из наших моделей, а также список и подробные страницы для наших книг, экземпляров книг, авторов и жанров. По пути мы получили много фундаментальных знаний о контроллерах, управлении потоком при использовании асинхронных операций, создании представлений с помощью Pug, запросе базы данных с помощью наших моделей, как передавать информацию в шаблон из вашего представления, а также как создавать и расширять шаблоны. Те, кто выполнил вызов также узнали немного о дате обработки с помощью момента.
 
-<p>Теперь мы создали все страницы "только для чтения " для нашего сайта: домашнюю страницу, которая отображает количество экземпляров каждой из наших моделей, а также список и подробные страницы для наших книг, экземпляров книг, авторов и жанров. По пути мы получили много фундаментальных знаний о контроллерах, управлении потоком при использовании асинхронных операций, создании представлений с помощью Pug, запросе базы данных с помощью наших моделей, как передавать информацию в шаблон из вашего представления, а также как создавать и расширять шаблоны. Те, кто выполнил вызов также узнали немного о дате обработки с помощью момента.</p>
+В нашей следующей статье мы будем опираться на наши знания, создавая HTML-формы и код обработки форм, чтобы начать изменять данные, хранящиеся на сайте.
 
-<p>В нашей следующей статье мы будем опираться на наши знания, создавая HTML-формы и код обработки форм, чтобы начать изменять данные, хранящиеся на сайте.</p>
+## Смотрите также
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+- [Асинхронный модуль](http://caolan.github.io/async/docs.html) (Асинхронные документация)
+- [Использование механизмов шаблонов с Express](https://expressjs.com/en/guide/using-template-engines.html) (Express документация)
+- [Pug](https://pugjs.org/api/getting-started.html) (Pug документация)
+- [Moment](http://momentjs.com/docs/) (Moment документация)
 
-<ul>
- <li><a href="http://caolan.github.io/async/docs.html">Асинхронный модуль</a> (Асинхронные документация)</li>
- <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Использование механизмов шаблонов с Express</a> (Express документация)</li>
- <li><a href="https://pugjs.org/api/getting-started.html">Pug</a> (Pug документация)</li>
- <li><a href="http://momentjs.com/docs/">Moment</a> (Moment документация)</li>
-</ul>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs/forms", "Learn/Server-side/Express_Nodejs")}}</p>
+## In this module
 
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
+- [Express/Node introduction](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+- [Setting up a Node (Express) development environment](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+- [Express Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+- [Express Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+- [Express Tutorial Part 3: Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+- [Express Tutorial Part 4: Routes and controllers](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+- [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+- [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+- [Express Tutorial Part 7: Deploying to production](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
index 2a6b31a005be92..bc01f759907b6c 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/locallibrary_base_template/index.md
@@ -3,11 +3,12 @@ title: Базовый шаблон LocalLibrary
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template
 ---
-<p>Теперь, чтобы мы понимали как расширить шаблон с помощью Pug, давайте создадим базовый шаблон для проекта. У него будет боковая панель (sidebar)) со ссылками на страницы, которые мы надеемся создать на протяжении учебника (например, для отображения и создания книг, жанров, автор и т. д.) и основная область контента, которую мы переопределим на каждой из отдельных страниц.</p>
+Теперь, чтобы мы понимали как расширить шаблон с помощью Pug, давайте создадим базовый шаблон для проекта. У него будет боковая панель (sidebar)) со ссылками на страницы, которые мы надеемся создать на протяжении учебника (например, для отображения и создания книг, жанров, автор и т. д.) и основная область контента, которую мы переопределим на каждой из отдельных страниц.
 
-<p>Откройте файл <strong>/views/layout.pug </strong>и замените его содержимое следующим.</p>
+Откройте файл **/views/layout.pug** и замените его содержимое следующим.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+```html
+doctype html
 html(lang='en')
   head
     title= title
@@ -45,25 +46,26 @@ html(lang='en')
                 a(href='/catalog/bookinstance/create') Create new book instance (copy)
 
         div(class='col-sm-10')
-          block content</code></pre>
+          block content
+```
 
-<p>Шаблон использует (и включает) JavaScript и CSS из  <a class="external external-icon" href="http://getbootstrap.com/" rel="noopener">Bootstrap</a> , что позволяет улучшить макет и представление HTML-страницы. Применение Bootstrap или другого клиентского фреймворка - быстрый способ создать привлекательную, хорошо масштабируемую страницу. Кроме того, это позволяет получить представление страницы, не вдаваясь в детали - мы можем уделить все внимание коду на стороне сервера!</p>
+Шаблон использует (и включает) JavaScript и CSS из [Bootstrap](http://getbootstrap.com/) , что позволяет улучшить макет и представление HTML-страницы. Применение Bootstrap или другого клиентского фреймворка - быстрый способ создать привлекательную, хорошо масштабируемую страницу. Кроме того, это позволяет получить представление страницы, не вдаваясь в детали - мы можем уделить все внимание коду на стороне сервера!
 
-<p>Макет представляется достаточно очевидным, если вы уже прочли статью Основы шаблонов (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer">Template primer</a>) выше. Обратите внимание на использование <code>block content</code> в качестве места для  размещения контента отдельных страниц.</p>
+Макет представляется достаточно очевидным, если вы уже прочли статью Основы шаблонов ([Template primer](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data#Template_primer)) выше. Обратите внимание на использование `block content` в качестве места для размещения контента отдельных страниц.
 
-<p>Базовый шаблон также ссылается на локальный файл стилей (<strong>style.css</strong>), что обеспечивает дополнительное управление внешним видом. Откройте <strong>/public/stylesheets/style.css</strong> и замените его содержимое таким текстом:</p>
+Базовый шаблон также ссылается на локальный файл стилей (**style.css**), что обеспечивает дополнительное управление внешним видом. Откройте **/public/stylesheets/style.css** и замените его содержимое таким текстом:
 
-<pre class="brush: css line-numbers  language-css"><code class="language-css">.sidebar-nav {
+```css
+.sidebar-nav {
     margin-top: 20px;
     padding: 0;
     list-style: none;
-}</code></pre>
+}
+```
 
-<p>При запуске нашего сайта мы должны увидеть боковую панель! В следующих разделах мы будем использовать вышеуказанный макет для определения отдельных страниц.</p>
+При запуске нашего сайта мы должны увидеть боковую панель! В следующих разделах мы будем использовать вышеуказанный макет для определения отдельных страниц.
 
-<h2 id="Следующие_шаги">Следующие шаги</h2>
+## Следующие шаги
 
-<ul>
- <li>Вернуться к <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Учебник Express часть 5: Отображение данных библиотеки</a>.</li>
- <li>Перейти к следующему подразделу <a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page">Домашняя страница</a>.</li>
-</ul>
+- Вернуться к [Учебник Express часть 5: Отображение данных библиотеки](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Перейти к следующему подразделу [Домашняя страница](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/Home_page).
diff --git a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
index ed9df33d622e1d..2b88a226adc81f 100644
--- a/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
+++ b/files/ru/learn/server-side/express_nodejs/displaying_data/template_primer/index.md
@@ -3,42 +3,44 @@ title: Основы шаблонов
 slug: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
 translation_of: Learn/Server-side/Express_Nodejs/Displaying_data/Template_primer
 ---
-<p>Шаблон - это текстовый файл, определяющий <em>структуру</em>, или внешний вид выходного файла, с предусмотренными позициями, в которые будут помещаться данные при отображении по шаблону (в <em>Express</em> шаблоны также называют <em>представлениями</em>).</p>
+Шаблон - это текстовый файл, определяющий _структуру_, или внешний вид выходного файла, с предусмотренными позициями, в которые будут помещаться данные при отображении по шаблону (в _Express_ шаблоны также называют _представлениями_).
 
-<h2 id="Выбор_шаблонов_Express">Выбор шаблонов Express</h2>
+## Выбор шаблонов Express
 
-<p>В Express можно использовать много движков отображающих шаблонов ( <a class="external external-icon" href="https://expressjs.com/en/guide/using-template-engines.html" rel="noopener">template rendering engines</a>). В этом руководстве для шаблонов будет использован <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> (ранее известный как Jade) . Это наиболее популярный в  Node язык шаблонов, который о себе заявляет так: чистый, чувствительный к пробелам синтаксис для написания HTML, на который сильно повлиял <a class="external external-icon" href="http://haml.info/" rel="noopener">Haml</a>.</p>
+В Express можно использовать много движков отображающих шаблонов ( [template rendering engines](https://expressjs.com/en/guide/using-template-engines.html)). В этом руководстве для шаблонов будет использован [Pug](https://pugjs.org/api/getting-started.html) (ранее известный как Jade) . Это наиболее популярный в Node язык шаблонов, который о себе заявляет так: чистый, чувствительный к пробелам синтаксис для написания HTML, на который сильно повлиял [Haml](http://haml.info/).
 
-<p>Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должны компилироваться в  HTML. Pug - второго типа; он использует <em>представление</em> (<em>representation) </em> HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.</p>
+Разные языки шаблонов используют различные подходы для определения внешнего вида и разметки позиций для данных—некоторые используют HTML для определения внешнего вида, тогда как другие применяют различные форматы разметки, которые затем должны компилироваться в HTML. Pug - второго типа; он использует _представление_ (_representation)_ HTML, в котором первое слово в каждой строке обычно представляет элемент HTML, а отступы в следующих строках применяются, чтобы представить вложенные элементы. Результатом является определение страницы, которое транслируется непосредственно в HTML, и которое, вероятно, более краткое и легче читается.
 
-<div class="note">
-<p><strong>Примечание:</strong> недостаток применения <em>Pug</em> - это чувствительность к отступам и пробелам (если добавить лишний пробел в "плохом" месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.</p>
-</div>
+> **Примечание:** недостаток применения _Pug_ - это чувствительность к отступам и пробелам (если добавить лишний пробел в "плохом" месте, можно получить невразумительный код ошибки). Однако, если ваши шаблоны уже действуют, их очень легко читать и поддерживать.
 
-<h2 class="highlight-spanned" id="Конфигурация_шаблона">Конфигурация шаблона</h2>
+## Конфигурация шаблона
 
-<p>Когда создавался каркас (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">the skeleton website</a>) веб-сайта <em>LocalLibrary, </em>он был настроен  на использование <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">Pug</a> . Можно было заметить, что модуль pug включён в зависимости в файле <strong>package.json</strong>, и установлен (app.set(...)) как движок представлений в файле <strong>app.js</strong>. Эта установка показывает,, что движок представлений -  pug, и что  <em>Express</em> должен искать шаблоны в подкаталоге <strong>/views</strong>.</p>
+Когда создавался каркас ([the skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)) веб-сайта _LocalLibrary,_ он был настроен на использование [Pug](https://pugjs.org/api/getting-started.html) . Можно было заметить, что модуль pug включён в зависимости в файле **package.json**, и установлен (app.set(...)) как движок представлений в файле **app.js**. Эта установка показывает,, что движок представлений - pug, и что _Express_ должен искать шаблоны в подкаталоге **/views**.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// View engine setup.
+```js
+// View engine setup.
 app.set('views', path.join(__dirname, 'views'));
-app.set('view engine', 'pug');</code></pre>
+app.set('view engine', 'pug');
+```
 
-<p>Если посмотреть содержимое каталога <strong>views</strong>, можно увидеть файлы с расширением .pug, в которых шаблоны представлений по умолчанию.  Это представление  для домашней страницы (<strong>index.pug</strong>) и базовый шаблон (<strong>layout.pug</strong>), который следует заменить нашим содержимым.</p>
+Если посмотреть содержимое каталога **views**, можно увидеть файлы с расширением .pug, в которых шаблоны представлений по умолчанию. Это представление для домашней страницы (**index.pug**) и базовый шаблон (**layout.pug**), который следует заменить нашим содержимым.
 
-<pre><code>/express-locallibrary-tutorial  //the project root
+```
+/express-locallibrary-tutorial  //the project root
   /views
     error.pug
-    <strong>index.pug</strong>
-    layout.pug</code>
-</pre>
+    index.pug
+    layout.pug
+```
 
-<h2 class="highlight-spanned" id="Синтаксис_шаблонов">Синтаксис шаблонов</h2>
+## Синтаксис шаблонов
 
-<p>Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты  Pug.</p>
+Пример файла шаблона (ниже) демонстрирует многие наиболее полезные черты Pug.
 
-<p>Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент <code>body</code> находится внутри элемента <code>html</code>, а элементы <code>p</code>  (параграфы) - внутри элемента <code>body,</code> и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.</p>
+Сначала отметим, что файл отражает структуру типового HTML-файла, причём первое слов в (почти) каждой строке является элементом HTML, а отступы используются, чтобы показать вложенные элементы. Так, например, элемент `body` находится внутри элемента `html`, а элементы `p` (параграфы) - внутри элемента `body,` и так далее. Невложенные элементы (т.е. индивидуальные параграфы) располагаются в отдельных строках.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+```html
+doctype html
 html(lang="en")
   head
     title= title
@@ -47,11 +49,11 @@ html(lang="en")
     h1= title
 
     p This is a line with #[em some emphasis] and #[strong strong text] markup.
-    p This line has un-escaped data: !{'&lt;em&gt; is emphasised&lt;/em&gt;'} and escaped data: #{'&lt;em&gt; is not emphasised&lt;/em&gt;'}.
+    p This line has un-escaped data: !{'<em> is emphasised</em>'} and escaped data: #{'<em> is not emphasised</em>'}.
       | This line follows on.
-    p= 'Evaluated and &lt;em&gt;escaped expression&lt;/em&gt;:' + title
+    p= 'Evaluated and <em>escaped expression</em>:' + title
 
-    &lt;!-- You can add HTML comments directly --&gt;
+    <!-- You can add HTML comments directly -->
     // You can add single line JavaScript comments and they are generated to HTML comments
     //- Introducing a single line JavaScript comment with "//-" ensures the comment isn't rendered to HTML
 
@@ -72,78 +74,87 @@ html(lang="en")
 
     ul
       each val in [1, 2, 3, 4, 5]
-        li= val</code></pre>
+        li= val
+```
 
-<p>Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар <em>имя атрибута=значение,</em>причём элементы списка разделяются запятой или пробелом. Например:</p>
+Атрибуты элементов определены в скобках после соответствующих элементов. В скобках располагается список пар *имя атрибута=значение,*причём элементы списка разделяются запятой или пробелом. Например:
 
-<ul>
- <li><code>script(type='text/javascript')</code>, <code>link(rel='stylesheet', href='/stylesheets/style.css')</code></li>
- <li><code>meta(name='viewport' content='width=device-width initial-scale=1')</code></li>
-</ul>
+- `script(type='text/javascript')`, `link(rel='stylesheet', href='/stylesheets/style.css')`
+- `meta(name='viewport' content='width=device-width initial-scale=1')`
 
-<p>Значения всех атрибутов <em>экранируются</em> (т.е. такие символы как "<code>&gt;</code>" заменяются эквивалентными кодами HTML как "<code>&amp;gt;"</code>) , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.</p>
+Значения всех атрибутов _экранируются_ (т.е. такие символы как "`>`" заменяются эквивалентными кодами HTML как "`&gt;"`) , чтобы предотвратить JavaScript инъекции и межсайтовые атаки.
 
-<p>Если после тэга стоит знак = , следующий текст рассматривается как <em>выражение</em> JavaScript. Например, ниже в первой строке, содержимое тэга <code>h1</code> будет <em>переменной </em> <code>title</code> (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединённая с переменной  <code>title</code> . В каждом из случаев поведение по умолчанию - экранировать строки.</p>
+Если после тэга стоит знак = , следующий текст рассматривается как _выражение_ JavaScript. Например, ниже в первой строке, содержимое тэга `h1` будет _переменной_ `title` (которая определена в файле или передана в шаблон из Express). Во второй строке содержимое параграфа - это текстовая строка, соединённая с переменной `title` . В каждом из случаев поведение по умолчанию - экранировать строки.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">h1= title
-p= 'Evaluated and &lt;em&gt;escaped expression&lt;/em&gt;:' + title</code></pre>
+```html
+h1= title
+p= 'Evaluated and <em>escaped expression</em>:' + title
+```
 
-<p>Если после тэга знак = отсутствует, тогда содержимое рассматривается как обычный текст. Внутри текста можно вставить экранированные или неэкранированные данные, применяя синтаксис  <code>#{}</code> и<code> !{}</code>, как показано ниже. В простой текст можно также вставлять "сырой" HTML.</p>
+Если после тэга знак = отсутствует, тогда содержимое рассматривается как обычный текст. Внутри текста можно вставить экранированные или неэкранированные данные, применяя синтаксис `#{}` и` !{}`, как показано ниже. В простой текст можно также вставлять "сырой" HTML.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">p This is a line with #[em some emphasis] and #[strong strong text] markup.
-p This line has an un-escaped string: !{'&lt;em&gt; is emphasised&lt;/em&gt;'}, an escaped string: #{'&lt;em&gt; is not emphasised&lt;/em&gt;'}, and escaped variables: #{title}.</code></pre>
+```html
+p This is a line with #[em some emphasis] and #[strong strong text] markup.
+p This line has an un-escaped string: !{'<em> is emphasised</em>'}, an escaped string: #{'<em> is not emphasised</em>'}, and escaped variables: #{title}.
+```
 
-<div class="note">
-<p><strong>Совет:</strong> Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса <strong><code>#{}</code></strong> ). Данные, которым можно верить (т.е. подсчитанное количество  записей,  могут быть выведены без экранирования значений.</p>
-</div>
+> **Примечание:** **Совет:** Почти всегда желательно экранировать данные, полученные от пользователей (при помощи синтаксиса **`#{}`** ). Данные, которым можно верить (т.е. подсчитанное количество записей, могут быть выведены без экранирования значений.
 
-<p>Можно использовать символ конвейера ('<strong>|</strong>') в начале строки, чтобы отметить простой текст ("<a class="external external-icon" href="https://pugjs.org/language/plain-text.html" rel="noopener">plain text</a>"). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.</p>
+Можно использовать символ конвейера ('**|**') в начале строки, чтобы отметить простой текст ("[plain text](https://pugjs.org/language/plain-text.html)"). Например, дополнительный текст, приведённый ниже, будет показан в той же строке, что и предыдущий, но не будет относиться к ссылке.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">a(href='http://someurl/') Link text
-| Plain text</code></pre>
+```html
+a(href='http://someurl/') Link text
+| Plain text
+```
 
-<p>Pug позволяет выполнять условные операции <code>if</code>, <code>else</code> , <code>else if</code> и <code>unless</code>— пример приведён ниже:</p>
+Pug позволяет выполнять условные операции `if`, `else` , `else if` и `unless`— пример приведён ниже:
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">if title
+```html
+if title
   p Переменная с именем "title" существует
 else
-  p Переменной с именем "title" не существует</code></pre>
+  p Переменной с именем "title" не существует
+```
 
-<p>Можно также выполнять циклы (итерации), применяя синтаксис <code>each-in</code> или <code>while</code> . Фрагмент кода (ниже)  содержит цикл по элементам массива, чтобы показать список элементов (отметим применение 'li=' для оценки "val" как переменной). Значение итератора val может быть также передано в шаблон как переменная!</p>
+Можно также выполнять циклы (итерации), применяя синтаксис `each-in` или `while` . Фрагмент кода (ниже) содержит цикл по элементам массива, чтобы показать список элементов (отметим применение 'li=' для оценки "val" как переменной). Значение итератора val может быть также передано в шаблон как переменная!
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">ul
+```html
+ul
   each val in [1, 2, 3, 4, 5]
-    li= val</code></pre>
+    li= val
+```
 
-<p>Синтаксис разрешает также комментарии (которые попадут в результат или нет, по вашему желанию), смеси для создания повторно используемых блоков кода, операторы выбора case, и много другого. Более подробная информация - в документации <a class="external external-icon" href="https://pugjs.org/api/getting-started.html" rel="noopener">The Pug docs</a>.</p>
+Синтаксис разрешает также комментарии (которые попадут в результат или нет, по вашему желанию), смеси для создания повторно используемых блоков кода, операторы выбора case, и много другого. Более подробная информация - в документации [The Pug docs](https://pugjs.org/api/getting-started.html).
 
-<h2 class="highlight-spanned" id="Расширение_шаблонов">Расширение шаблонов</h2>
+## Расширение шаблонов
 
-<p>Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, <em>Pug</em> позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.</p>
+Принято иметь общую структуру для всех страниц сайта, включая стандартную HTML-разметку для заголовка, футера, навигации и т.д. Вместо того, чтобы заставлять разработчиков дублировать эти образцы на каждой странице, _Pug_ позволяет объявить базовой шаблон, а затем модифицировать его, заменяя только те небольшие части, которые различны на каждой конкретной странице.
 
-<p>Например, базовый шаблон <strong>layout.pug,</strong> созданный в каркасе проекта, имеет такой вид:</p>
+Например, базовый шаблон **layout.pug,** созданный в каркасе проекта, имеет такой вид:
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">doctype html
+```html
+doctype html
 html
   head
     title= title
     link(rel='stylesheet', href='/stylesheets/style.css')
   body
-    block content</code></pre>
+    block content
+```
 
-<p>Тэг  <code>block</code> применён для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).</p>
+Тэг `block` применён для отметки разделов контента, которые могут быть заменены в производных шаблона (если блок не переопределяется, будет использования его реализация в базовом классе).
 
-<p>Умолчание для  <strong>index.pug</strong> (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг <code>extends</code> идентифицирует базовый шаблон, который следует использовать, а затем мы используем  <code>block <em>section_name,</em></code> чтобы отметить новый контент раздела, который мы заменяем.</p>
+Умолчание для **index.pug** (созданный для каркаса проекта) показывает, как можно заменить базовый шаблон. Тэг `extends` идентифицирует базовый шаблон, который следует использовать, а затем мы используем `block section_name,` чтобы отметить новый контент раздела, который мы заменяем.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">extends layout
+```html
+extends layout
 
 block content
   h1= title
-  p Welcome to #{title}</code></pre>
+  p Welcome to #{title}
+```
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a>.</li>
- <li>Proceed to the next subarticle of part 5: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template">The LocalLibrary base template</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data).
+- Proceed to the next subarticle of part 5: [The LocalLibrary base template](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data/LocalLibrary_base_template).
diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
index 11974c8c1c46be..133b510ca15229 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
+++ b/files/ru/learn/server-side/express_nodejs/forms/create_bookinstance_form/index.md
@@ -3,24 +3,29 @@ title: "Форма для создания\_BookInstance"
 slug: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form
 translation_of: Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form
 ---
-<p>В этой статье показано, как определить страницу / форму для создания объектов <code>BookInstance</code>. Это очень похоже на форму, которую мы использовали для создания объектов <code>Book</code>.</p>
+В этой статье показано, как определить страницу / форму для создания объектов `BookInstance`. Это очень похоже на форму, которую мы использовали для создания объектов `Book`.
 
-<h2 class="highlight-spanned" id="Импорт_методов_проверки_и_очистки">Импорт методов проверки и очистки</h2>
+## Импорт методов проверки и очистки
 
-<p>Откройте <strong>/controllers/bookinstanceController.js</strong> и добавьте следующие строки вверху файла:</p>
+Откройте **/controllers/bookinstanceController.js** и добавьте следующие строки вверху файла:
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">const { body,validationResult } = require('express-validator/check');
-const { sanitizeBody } = require('express-validator/filter');</code></pre>
+```js
+const { body,validationResult } = require('express-validator/check');
+const { sanitizeBody } = require('express-validator/filter');
+```
 
-<h2 class="highlight-spanned" id="Controller—get_route">Controller—get route</h2>
+## Controller—get route
 
-<p>At the top of the file, require the <em>Book</em> module (needed because each <code>BookInstance</code> is associated with a particular <code>Book</code>).</p>
+At the top of the file, require the _Book_ module (needed because each `BookInstance` is associated with a particular `Book`).
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">var Book = require('../models/book');</code></pre>
+```js
+var Book = require('../models/book');
+```
 
-<p>Find the exported <code>bookinstance_create_get()</code> controller method and replace it with the following code.</p>
+Find the exported `bookinstance_create_get()` controller method and replace it with the following code.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Display BookInstance create form on GET.
+```js
+// Display BookInstance create form on GET.
 exports.bookinstance_create_get = function(req, res, next) {
 
     Book.find({},'title')
@@ -30,15 +35,17 @@ exports.bookinstance_create_get = function(req, res, next) {
       res.render('bookinstance_form', {title: 'Create BookInstance', book_list: books});
     });
 
-};</code></pre>
+};
+```
 
-<p>The controller gets a list of all books (<code>book_list</code>) and passes it to the view <code><strong>bookinstance_form.pug</strong></code> (along with the <code>title</code>)</p>
+The controller gets a list of all books (`book_list`) and passes it to the view **`bookinstance_form.pug`** (along with the `title`)
 
-<h2 class="highlight-spanned" id="Controller—post_route">Controller—post route</h2>
+## Controller—post route
 
-<p>Find the exported <code>bookinstance_create_post()</code> controller method and replace it with the following code.</p>
+Find the exported `bookinstance_create_post()` controller method and replace it with the following code.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Handle BookInstance create on POST.
+```js
+// Handle BookInstance create on POST.
 exports.bookinstance_create_post = [
 
     // Validate fields.
@@ -53,7 +60,7 @@ exports.bookinstance_create_post = [
     sanitizeBody('due_back').toDate(),
 
     // Process request after validation and sanitization.
-    (req, res, next) =&gt; {
+    (req, res, next) => {
 
         // Extract the validation errors from a request.
         const errors = validationResult(req);
@@ -85,15 +92,17 @@ exports.bookinstance_create_post = [
                 });
         }
     }
-];</code></pre>
+];
+```
 
-<p>The structure and behaviour of this code is the same as for creating our other objects. First we validate and sanitize the data. If the data is invalid, we then re-display the form along with the data that was originally entered by the user and a list of error messages. If the data is valid, we save the new <code>BookInstance</code> record and redirect the user to the detail page.</p>
+The structure and behaviour of this code is the same as for creating our other objects. First we validate and sanitize the data. If the data is invalid, we then re-display the form along with the data that was originally entered by the user and a list of error messages. If the data is valid, we save the new `BookInstance` record and redirect the user to the detail page.
 
-<h2 class="highlight-spanned" id="View">View</h2>
+## View
 
-<p>Create <strong>/views/bookinstance_form.pug</strong> and copy in the text below.</p>
+Create **/views/bookinstance_form.pug** and copy in the text below.
 
-<pre class="line-numbers  language-html"><code class="language-html">extends layout
+```html
+extends layout
 
 block content
   h1=title
@@ -102,7 +111,7 @@ block content
     div.form-group
       label(for='book') Book:
       select#book.form-control(type='select' placeholder='Select book' name='book' required='true')
-        - book_list.sort(function(a, b) {let textA = a.title.toUpperCase(); let textB = b.title.toUpperCase(); return (textA &lt; textB) ? -1 : (textA &gt; textB) ? 1 : 0;});
+        - book_list.sort(function(a, b) {let textA = a.title.toUpperCase(); let textB = b.title.toUpperCase(); return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;});
         for book in book_list
           if bookinstance
             option(value=book._id selected=(bookinstance.book.toString()==book._id.toString() ? 'selected' : false)) #{book.title}
@@ -129,23 +138,20 @@ block content
   if errors
     ul
       for error in errors
-        li!= error.msg</code></pre>
+        li!= error.msg
+```
 
-<p>The view structure and behaviour is almost the same as for the <strong>book_form.pug</strong> template, so we won't go over it again.</p>
+The view structure and behaviour is almost the same as for the **book_form.pug** template, so we won't go over it again.
 
-<div class="note">
-<p><strong>Note:</strong> The above template hard-codes the <em>Status</em> values (Maintenance, Available, etc.) and does not "remember" the user's entered values. Should you so wish, consider reimplementing the list, passing in option data from the controller and setting the selected value when the form is re-displayed.</p>
-</div>
+> **Примечание:** The above template hard-codes the _Status_ values (Maintenance, Available, etc.) and does not "remember" the user's entered values. Should you so wish, consider reimplementing the list, passing in option data from the controller and setting the selected value when the form is re-displayed.
 
-<h2 class="highlight-spanned" id="Как_это_выглядит">Как это выглядит?</h2>
+## Как это выглядит?
 
-<p>Запустите приложение и откройте в браузере  <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Затем выберите ссылку <em>Create new book instance (copy)</em>. Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный <code>BookInstance</code>, он должен быть сохранён, и вы попадёте на страницу сведений.</p>
+Запустите приложение и откройте в браузере <http://localhost:3000/>. Затем выберите ссылку _Create new book instance (copy)_. Если все настроено правильно, ваш сайт должен выглядеть примерно так, как показано на скриншоте. После того, как вы отправите валидный `BookInstance`, он должен быть сохранён, и вы попадёте на страницу сведений.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14490/LocalLibary_Express_BookInstance_Create_Empty.png" style="display: block; height: 554px; margin: 0px auto; width: 1000px;"></p>
+![](https://mdn.mozillademos.org/files/14490/LocalLibary_Express_BookInstance_Create_Empty.png)
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a>.</li>
- <li>Proceed to the next subarticle of part 6: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Delete Author form</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms).
+- Proceed to the next subarticle of part 6: [Delete Author form](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form).
diff --git a/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md b/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md
index 19a73e4624b9a7..f0014088fc69ad 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md
+++ b/files/ru/learn/server-side/express_nodejs/forms/create_genre_form/index.md
@@ -3,31 +3,35 @@ title: Create genre form
 slug: Learn/Server-side/Express_Nodejs/forms/Create_genre_form
 translation_of: Learn/Server-side/Express_Nodejs/forms/Create_genre_form
 ---
-<p>В этом подразделе рассказано, как сделать страницу для создания жанра (<code>Genre</code>). Хорошая точка для старта, у жанра всего одно поле - <code>name</code>. Как и для любой другой страницы, здесь потребуется внести изменения в соответствующие маршрут, контроллер и шаблон (route, controller, view).</p>
+В этом подразделе рассказано, как сделать страницу для создания жанра (`Genre`). Хорошая точка для старта, у жанра всего одно поле - `name`. Как и для любой другой страницы, здесь потребуется внести изменения в соответствующие маршрут, контроллер и шаблон (route, controller, view).
 
-<h2 id="Import_validation_and_sanitisation_methods">Import validation and sanitisation methods</h2>
+## Import validation and sanitisation methods
 
-<p>To use the <em>express-validator </em>in our controllers we have to <em>require</em> the functions we want to use from the <strong>'express-validator/check</strong>' and <strong>'express-validator/filter</strong>' modules.</p>
+To use the _express-validator_ in our controllers we have to _require_ the functions we want to use from the **'express-validator/check**' and **'express-validator/filter**' modules.
 
-<p>Open <strong>/controllers/genreController.js</strong>, and add the following line at the top of the file:</p>
+Open **/controllers/genreController.js**, and add the following line at the top of the file:
 
-<pre class="brush: js">const validator = require('express-validator');
-</pre>
+```js
+const validator = require('express-validator');
+```
 
-<h2 id="Controller—get_route">Controller—get route</h2>
+## Controller—get route
 
-<p>Find the exported <code>genre_create_get()</code> controller method and replace it with the following code. This simply renders the <strong>genre_form.pug</strong> view, passing a title variable.</p>
+Find the exported `genre_create_get()` controller method and replace it with the following code. This simply renders the **genre_form.pug** view, passing a title variable.
 
-<pre class="brush: js">// Display Genre create form on GET.
+```js
+// Display Genre create form on GET.
 exports.genre_create_get = function(req, res, next) {
   res.render('genre_form', { title: 'Create Genre' });
-};</pre>
+};
+```
 
-<h2 id="Controller—post_route">Controller—post route</h2>
+## Controller—post route
 
-<p>Find the exported <code>genre_create_post()</code> controller method and replace it with the following code.</p>
+Find the exported `genre_create_post()` controller method and replace it with the following code.
 
-<pre class="brush: js">// Handle Genre create on POST.
+```js
+// Handle Genre create on POST.
 exports.genre_create_post =  [
 
   // Validate that the name field is not empty.
@@ -37,7 +41,7 @@ exports.genre_create_post =  [
   validator.sanitizeBody('name').escape(),
 
   // Process request after validation and sanitization.
-  (req, res, next) =&gt; {
+  (req, res, next) => {
 
     // Extract the validation errors from a request.
     const errors = validator.validationResult(req);
@@ -77,26 +81,28 @@ exports.genre_create_post =  [
          });
     }
   }
-];</pre>
+];
+```
 
-<p>The first thing to note is that instead of being a single middleware function (with arguments <code>(req, res, next)</code>) the controller specifies an <em>array</em> of middleware functions. The array is passed to the router function and each method is called in order.</p>
+The first thing to note is that instead of being a single middleware function (with arguments `(req, res, next)`) the controller specifies an _array_ of middleware functions. The array is passed to the router function and each method is called in order.
 
-<div class="note">
-<p><strong>Note:</strong> This approach is needed, because the sanitisers/validators are middleware functions.</p>
-</div>
+> **Примечание:** This approach is needed, because the sanitisers/validators are middleware functions.
 
-<p>The first method in the array defines a validator (<code>validator.body()</code>) from the <code>validator</code>  module to check that the <em>name</em> field is not empty (calling <code>trim()</code> to remove any trailing/leading whitespace before performing the validation). The  second method in the array (<code>validator.sanitizeBody()</code>) creates a sanitizer to <code>escape()</code> any dangerous  HTML characters in the <em>name</em> field.</p>
+The first method in the array defines a validator (`validator.body()`) from the `validator` module to check that the _name_ field is not empty (calling `trim()` to remove any trailing/leading whitespace before performing the validation). The second method in the array (`validator.sanitizeBody()`) creates a sanitizer to `escape()` any dangerous HTML characters in the _name_ field.
 
-<pre class="brush: js">// Validate that the name field is not empty.
-validator<code>.</code>body('name', 'Genre name required').isLength({ min: 1 }).trim(),
+```js
+// Validate that the name field is not empty.
+validator.body('name', 'Genre name required').isLength({ min: 1 }).trim(),
 
 // Sanitize (escape) the name field.
-validator.sanitizeBody('name').escape()</pre>
+validator.sanitizeBody('name').escape()
+```
 
-<p>After specifying the validators and sanitizers we create a middleware function to extract any validation errors. We use <code>isEmpty()</code> to check whether there are any errors in the validation result. If there are then we render the form again, passing in our sanitised genre object and the array of error messages (<code>errors.array()</code>).</p>
+After specifying the validators and sanitizers we create a middleware function to extract any validation errors. We use `isEmpty()` to check whether there are any errors in the validation result. If there are then we render the form again, passing in our sanitised genre object and the array of error messages (`errors.array()`).
 
-<pre class="brush: js">// Process request after validation and sanitization.
-(req, res, next) =&gt; {
+```js
+// Process request after validation and sanitization.
+(req, res, next) => {
 
   // Extract the validation errors from a request.
   const errors = validator.validationResult(req);
@@ -113,13 +119,15 @@ validator.sanitizeBody('name').escape()</pre>
   }
   else {
     // Data from form is valid.
-    ... &lt;save the result/&gt; ...
+    ... <save the result/> ...
   }
-};</pre>
+};
+```
 
-<p>If the genre name data is valid then we check if a <code>Genre</code> with the same name already exists (as we don't want to create duplicates). If it does, we redirect to the existing genre's detail page. If not, we save the new <code>Genre</code> and redirect to its detail page.</p>
+If the genre name data is valid then we check if a `Genre` with the same name already exists (as we don't want to create duplicates). If it does, we redirect to the existing genre's detail page. If not, we save the new `Genre` and redirect to its detail page.
 
-<pre class="brush: js">// Check if Genre with same name already exists.
+```js
+// Check if Genre with same name already exists.
 Genre.findOne({ 'name': req.body.name })
   .exec( function(err, found_genre) {
   if (err) { return next(err); }
@@ -134,20 +142,24 @@ Genre.findOne({ 'name': req.body.name })
           res.redirect(genre.url);
         });
     }
-});</pre>
+});
+```
 
-<p>This same pattern is used in all our post controllers: we run validators, then sanitisers,  then check for errors and either re-render the form with error information or save the data. </p>
+This same pattern is used in all our post controllers: we run validators, then sanitisers, then check for errors and either re-render the form with error information or save the data.
 
-<h2 id="View">View</h2>
+## View
 
-<p>The same view is rendered in both the <code>GET</code> and <code>POST</code> controllers/routes when we create a new <code>Genre</code> (and later on it is also used when we <em>update</em> a <code>Genre</code>). In the <code>GET</code> case the form is empty, and we just pass a title variable. In the <code>POST</code> case the user has previously entered invalid data—in the <code>genre</code> variable we pass back a sanitized version of the entered data and in the <code>errors</code> variable we pass back an array of error messages.</p>
+The same view is rendered in both the `GET` and `POST` controllers/routes when we create a new `Genre` (and later on it is also used when we _update_ a `Genre`). In the `GET` case the form is empty, and we just pass a title variable. In the `POST` case the user has previously entered invalid data—in the `genre` variable we pass back a sanitized version of the entered data and in the `errors` variable we pass back an array of error messages.
 
-<pre class="brush: js">res.render('genre_form', { title: 'Create Genre'});
-res.render('genre_form', { title: 'Create Genre', genre: genre, errors: errors.array()});</pre>
+```js
+res.render('genre_form', { title: 'Create Genre'});
+res.render('genre_form', { title: 'Create Genre', genre: genre, errors: errors.array()});
+```
 
-<p>Create <strong>/views/genre_form.pug</strong> and copy in the text below.</p>
+Create **/views/genre_form.pug** and copy in the text below.
 
-<pre class="brush: html">extends layout
+```html
+extends layout
 
 block content
   h1 #{title}
@@ -161,39 +173,36 @@ block content
   if errors
    ul
     for error in errors
-     li!= error.msg</pre>
+     li!= error.msg
+```
 
-<p>Much of this template will be familiar from our previous tutorials. First, we extend the <strong>layout.pug</strong> base template and override the <code>block</code> named '<strong>content</strong>'. We then have a heading with the <code>title</code> we passed in from the controller (via the <code>render()</code> method).</p>
+Much of this template will be familiar from our previous tutorials. First, we extend the **layout.pug** base template and override the `block` named '**content**'. We then have a heading with the `title` we passed in from the controller (via the `render()` method).
 
-<p>Next, we have the pug code for our HTML form that uses the <code>POST</code> <code>method</code> to send the data to the server, and because the <code>action</code> is an empty string, will send the data to the same URL as the page.</p>
+Next, we have the pug code for our HTML form that uses the `POST` `method` to send the data to the server, and because the `action` is an empty string, will send the data to the same URL as the page.
 
-<p>The form defines a single required field of type "text" called "name". The default <em>value</em> of the field depends on whether the <code>genre</code> variable is defined. If called from the <code>GET</code> route it will be empty as this is a new form. If called from a <code>POST</code> route it will contain the (invalid) value originally entered by the user.</p>
+The form defines a single required field of type "text" called "name". The default _value_ of the field depends on whether the `genre` variable is defined. If called from the `GET` route it will be empty as this is a new form. If called from a `POST` route it will contain the (invalid) value originally entered by the user.
 
-<p>The last part of the page is the error code. This simply prints a list of errors, if the error variable has been defined (in other words, this section will not appear when the template is rendered on the <code>GET</code> route).</p>
+The last part of the page is the error code. This simply prints a list of errors, if the error variable has been defined (in other words, this section will not appear when the template is rendered on the `GET` route).
 
-<div class="note">
-<p><strong>Note:</strong> This is just one way to render the errors. You can also get the names of the affected fields from the error variable, and use these to control where the error messages are rendered, whether to apply custom CSS, etc.</p>
-</div>
+> **Примечание:** This is just one way to render the errors. You can also get the names of the affected fields from the error variable, and use these to control where the error messages are rendered, whether to apply custom CSS, etc.
 
-<h2 id="What_does_it_look_like">What does it look like?</h2>
+## What does it look like?
 
-<p>Run the application, open your browser to <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>, then select the <em>Create new genre </em>link. If everything is set up correctly, your site should look something like the following screenshot. After you enter a value, it should be saved and you'll be taken to the genre detail page.</p>
+Run the application, open your browser to <http://localhost:3000/>, then select the _Create new genre_ link. If everything is set up correctly, your site should look something like the following screenshot. After you enter a value, it should be saved and you'll be taken to the genre detail page.
 
-<p><img alt="Genre Create Page - Express Local Library site" src="https://mdn.mozillademos.org/files/14476/LocalLibary_Express_Genre_Create_Empty.png" style="border-style: solid; border-width: 1px; display: block; height: 301px; margin: 0px auto; width: 800px;"></p>
+![Genre Create Page - Express Local Library site](https://mdn.mozillademos.org/files/14476/LocalLibary_Express_Genre_Create_Empty.png)
 
-<p>The only error we validate against server-side is that the genre field must not be empty. The screenshot below shows what the error list would look like if you didn't supply a genre (highlighted in red).</p>
+The only error we validate against server-side is that the genre field must not be empty. The screenshot below shows what the error list would look like if you didn't supply a genre (highlighted in red).
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14480/LocalLibary_Express_Genre_Create_Error.png" style="border-style: solid; border-width: 1px; display: block; height: 249px; margin: 0px auto; width: 400px;"></p>
+![](https://mdn.mozillademos.org/files/14480/LocalLibary_Express_Genre_Create_Error.png)
 
-<div class="note">
-<p><strong>Note:</strong> Our validation uses <code>trim()</code> to ensure that whitespace is not accepted as a genre name. We can also validate that the field is not empty on the client side by adding the value <code>required='true'</code> to the field definition in the form:</p>
+> **Примечание:** Our validation uses `trim()` to ensure that whitespace is not accepted as a genre name. We can also validate that the field is not empty on the client side by adding the value `required='true'` to the field definition in the form:
+>
+> ```js
+> input#name.form-control(type='text', placeholder='Fantasy, Poetry etc.' name='name' value=(undefined===genre ? '' : genre.name), required='true' )
+> ```
 
-<pre class="brush: js">input#name.form-control(type='text', placeholder='Fantasy, Poetry etc.' name='name' value=(undefined===genre ? '' : genre.name), <strong>required='true'</strong> )</pre>
-</div>
+## Next steps
 
-<h2 id="Next_steps">Next steps</h2>
-
-<ol>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms.</a></li>
- <li>Proceed to the next sub article of part 6: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Create Author form</a>.</li>
-</ol>
+1.  Return to [Express Tutorial Part 6: Working with forms.](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+2.  Proceed to the next sub article of part 6: [Create Author form](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form).
diff --git a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md
index fee0ec5f7fd611..32ac551a0b18e4 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md
+++ b/files/ru/learn/server-side/express_nodejs/forms/delete_author_form/index.md
@@ -3,15 +3,16 @@ title: Delete Author form
 slug: Learn/Server-side/Express_Nodejs/forms/Delete_author_form
 translation_of: Learn/Server-side/Express_Nodejs/forms/Delete_author_form
 ---
-<p>В этой статье показано, как определить страницу для удаления объектов <code>Author</code>.</p>
+В этой статье показано, как определить страницу для удаления объектов `Author`.
 
-<p>Как описано в разделе  <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/forms#form_design">form design</a>,  наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим <code>Author</code> быть удалённым, если на него ссылается  <code>Book</code>). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удалён. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будет удалён объект <code>Author</code>.</p>
+Как описано в разделе [form design](/ru/docs/Learn/Server-side/Express_Nodejs/forms#form_design), наша стратегия будет заключаться в том, чтобы разрешить удаление только объектов, на которые не ссылаются другие объекты(в этом случае это означает, что мы не позволим `Author` быть удалённым, если на него ссылается `Book`). С точки зрения реализации это означает, что форма должна подтвердить, что нет никаких связанных книг, прежде чем автор будет удалён. Если есть связанные книги, то они должны отображаться и быть удалены до того, как будет удалён объект `Author`.
 
-<h2 class="highlight-spanned" id="Controller—get_route">Controller—get route</h2>
+## Controller—get route
 
-<p>Откройте <strong>/controllers/authorController.js</strong>. Найдите экспортируемый метод контроллера  <code>author_delete_get()</code> и замените его на следующий код.</p>
+Откройте **/controllers/authorController.js**. Найдите экспортируемый метод контроллера `author_delete_get()` и замените его на следующий код.
 
-<pre><code class="language-js">// Отображать форму для удаления автора GET
+```js
+// Отображать форму для удаления автора GET
 exports.author_delete_get = function(req, res, next) {
 
     async.parallel({
@@ -26,29 +27,31 @@ exports.author_delete_get = function(req, res, next) {
         if (results.author==null) { // No results.
             res.redirect('/catalog/authors');
         }
-        // </code>Удачно, значит рендерим.<code class="language-js">
+        // Удачно, значит рендерим.
         res.render('author_delete', { title: 'Delete Author', author: results.author, author_books: results.authors_books } );
     });
 
-};</code></pre>
+};
+```
 
-<p>Контроллер получает id экземпляра <code>Author</code> для удаления из параметра URL  (<code>req.params.id</code>). Он использует метод  <code>async.parallel()</code> , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу  <code><strong>author_delete</strong></code><strong>.pug</strong>, передаёт значения для <code>title</code>, <code>author</code>, и <code>author_books</code>.</p>
+Контроллер получает id экземпляра `Author` для удаления из параметра URL (`req.params.id`). Он использует метод `async.parallel()` , чтобы получить запись автора и параллельно вс связанные книги. Когда оба параметра авершины, он рендерит страницу **`author_delete`\*\***.pug\*\*, передаёт значения для `title`, `author`, и `author_books`.
 
-<div class="note">
-<p><strong>Примечание:</strong> Если <code>findById()</code><strong> </strong>не возвращает результатов, то автор отсутствует в базе данных. В этом случае удалять нечего, поэтому сразу выводим список всех авторов.</p>
+> **Примечание:** Если `findById()`\*\* \*\*не возвращает результатов, то автор отсутствует в базе данных. В этом случае удалять нечего, поэтому сразу выводим список всех авторов.
+>
+> ```js
+> }, function(err, results) {
+>     if (err) { return next(err); }
+>     if (results.author==null) { // No results.
+>         res.redirect('/catalog/authors')
+>     }
+> ```
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">}, function(err, results) {
-    if (err) { return next(err); }
-    if (results.author==null) { // No results.
-        res.redirect('/catalog/authors')
-    }</code></pre>
-</div>
+## Controller—post route
 
-<h2 class="highlight-spanned" id="Controller—post_route">Controller—post route</h2>
+Найдите экспортируемый метод контроллера `author_delete_post()` и замените его на следующий код.
 
-<p>Найдите экспортируемый метод контроллера <code>author_delete_post()</code> и замените его на следующий код.</p>
-
-<pre><code class="language-js">// Обработчик удаления автора POST.
+```js
+// Обработчик удаления автора POST.
 exports.author_delete_post = function(req, res, next) {
 
     async.parallel({
@@ -61,33 +64,33 @@ exports.author_delete_post = function(req, res, next) {
     }, function(err, results) {
         if (err) { return next(err); }
         // Success
-        if (results.authors_books.length &gt; 0) {
-            // </code>Автор книги. Визуализация выполняется так же, как и для GET route.<code class="language-js">
+        if (results.authors_books.length > 0) {
+            // Автор книги. Визуализация выполняется так же, как и для GET route.
             res.render('author_delete', { title: 'Delete Author', author: results.author, author_books: results.authors_books } );
             return;
         }
         else {
-            </code>//У автора нет никаких книг. Удалить объект и перенаправить в список авторов.<code class="language-js">
+            //У автора нет никаких книг. Удалить объект и перенаправить в список авторов.
             Author.findByIdAndRemove(req.body.authorid, function deleteAuthor(err) {
                 if (err) { return next(err); }
-                // </code>Успех-перейти к списку авторов<code class="language-js">
+                // Успех-перейти к списку авторов
                 res.redirect('/catalog/authors')
             })
         }
     });
-};</code></pre>
+};
+```
 
-<p>Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута <code>GET</code>. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть ещё книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.</p>
+Сначала мы проверяем, что был предоставлен id (он отправляется через параметры тела формы, а не через версию в URL). Затем мы получаем автора и связанные с ним книги так же, как и для маршрута `GET`. Если книг нет, то удаляем объект автора и перенаправляем в список всех авторов. Если есть ещё книги, то мы просто перерисовываем форму, передавая автора и список книг, которые нужно удалить.
 
-<div class="note">
-<p><strong>Примечание:</strong> Мы можем проверить, возвращает ли вызов <code>findbyid ()</code> какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он всё равно вернёт список авторов, если id не будет найден, но это произойдёт после <code>findByIdAndRemove()</code>).</p>
-</div>
+> **Примечание:** Мы можем проверить, возвращает ли вызов `findbyid ()` какой-либо результат, и если нет, немедленно отобразить список всех авторов.Для краткости мы оставили код как есть выше (он всё равно вернёт список авторов, если id не будет найден, но это произойдёт после `findByIdAndRemove()`).
 
-<h2 class="highlight-spanned" id="View">View</h2>
+## View
 
-<p>Создайте <strong>/views/author_delete.pug</strong> и скопируйте текст ниже.</p>
+Создайте **/views/author_delete.pug** и скопируйте текст ниже.
 
-<pre class="line-numbers  language-html"><code class="language-html">extends layout
+```html
+extends layout
 
 block content
   h1 #{title}: #{author.name}
@@ -114,52 +117,47 @@ block content
       div.form-group
         input#authorid.form-control(type='hidden',name='authorid', required='true', value=author._id )
 
-      button.btn.btn-primary(type='submit') Delete</code></pre>
+      button.btn.btn-primary(type='submit') Delete
+```
 
-<p>Представление расширяет шаблон макета, переопределяя блок с именем <code>content</code>. Вверху отображаются сведения об авторе. Затем он включает условный оператор, основанный на количестве <code><strong>author_books</strong></code> (пункты <code>if</code> и <code>else</code> ).</p>
+Представление расширяет шаблон макета, переопределяя блок с именем `content`. Вверху отображаются сведения об авторе. Затем он включает условный оператор, основанный на количестве **`author_books`** (пункты `if` и `else` ).
 
-<ul>
- <li>Если есть книги, связанные с автором, то на странице перечислены книги и говорится, что они должны быть удалены, прежде чем этот <code>Author</code> может быть удалён.</li>
- <li>Если книг нет, на странице отображается запрос на подтверждение. Если нажать кнопку <strong>Delete</strong>, то id автора будет отправлен на сервер в <code>POST</code>-запросе, и запись этого автора будет удалена.</li>
-</ul>
+- Если есть книги, связанные с автором, то на странице перечислены книги и говорится, что они должны быть удалены, прежде чем этот `Author` может быть удалён.
+- Если книг нет, на странице отображается запрос на подтверждение. Если нажать кнопку **Delete**, то id автора будет отправлен на сервер в `POST`-запросе, и запись этого автора будет удалена.
 
-<h2 class="highlight-spanned" id="Добавление_элемента_управления_delete">Добавление элемента управления delete</h2>
+## Добавление элемента управления delete
 
-<p>Затем мы добавим элемент управления <code>Delete</code> в представление сведений об авторе (страница сведений-хорошее место для удаления записи).</p>
+Затем мы добавим элемент управления `Delete` в представление сведений об авторе (страница сведений-хорошее место для удаления записи).
 
-<div class="note">
-<p><strong>Note:</strong> В полном объёме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!</p>
-</div>
+> **Примечание:** В полном объёме контроль будет доступен только авторизованным пользователям. Однако на данный момент у нас нет системы авторизации!
 
-<p>Откройте <strong>author_detail.pug</strong> и добавьте следующие строки внизу.</p>
+Откройте **author_detail.pug** и добавьте следующие строки внизу.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">hr
+```html
+hr
 p
-  a(href=author.url+'/delete') Delete author</code></pre>
+  a(href=author.url+'/delete') Delete author
+```
 
-<p>Теперь элемент управления должен отображаться в виде ссылки, как показано ниже на странице сведений об авторе.</p>
+Теперь элемент управления должен отображаться в виде ссылки, как показано ниже на странице сведений об авторе.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14492/LocalLibary_Express_Author_Detail_Delete.png" style="border-style: solid; border-width: 1px; display: block; height: 202px; margin: 0px auto; width: 500px;"></p>
+![](https://mdn.mozillademos.org/files/14492/LocalLibary_Express_Author_Detail_Delete.png)
 
-<h2 class="highlight-spanned" id="Как_это_выглядит">Как это выглядит?</h2>
+## Как это выглядит?
 
-<p>Запустите приложение и откройте в вашем браузере  <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>. Затем раздел <em>All authors </em>, а затем укажите конкретного пользователя. Наконец, выберите ссылку <em>Delete author</em>.</p>
+Запустите приложение и откройте в вашем браузере <http://localhost:3000/>. Затем раздел _All authors_ , а затем укажите конкретного пользователя. Наконец, выберите ссылку _Delete author_.
 
-<p>Если у автора нет книг, вам будет представлена такая страница. После нажатия клавиши delete сервер удалит автора и перенаправит в список авторов</p>
+Если у автора нет книг, вам будет представлена такая страница. После нажатия клавиши delete сервер удалит автора и перенаправит в список авторов
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14494/LocalLibary_Express_Author_Delete_NoBooks.png" style="border-style: solid; border-width: 1px; display: block; height: 342px; margin: 0px auto; width: 600px;"></p>
+![](https://mdn.mozillademos.org/files/14494/LocalLibary_Express_Author_Delete_NoBooks.png)
 
-<p>Если у автора есть книги, то вам будет представлен следующий вид. Затем вы можете удалить книги из их подробных страниц (как только этот код будет реализован!).</p>
+Если у автора есть книги, то вам будет представлен следующий вид. Затем вы можете удалить книги из их подробных страниц (как только этот код будет реализован!).
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14496/LocalLibary_Express_Author_Delete_WithBooks.png" style="border-style: solid; border-width: 1px; display: block; height: 327px; margin: 0px auto; width: 500px;"></p>
+![](https://mdn.mozillademos.org/files/14496/LocalLibary_Express_Author_Delete_WithBooks.png)
 
-<div class="note">
-<p><strong>Note:</strong> Другие страницы для удаления объектов могут быть реализованы примерно таким же образом. Мы оставили это как задачи.</p>
-</div>
+> **Примечание:** Другие страницы для удаления объектов могут быть реализованы примерно таким же образом. Мы оставили это как задачи.
 
-<h2 id="Next_steps">Next steps</h2>
+## Next steps
 
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a>.</li>
- <li>Proceed to the final subarticle of part 6: <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Update Book form</a>.</li>
-</ul>
+- Return to [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms).
+- Proceed to the final subarticle of part 6: [Update Book form](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form).
diff --git a/files/ru/learn/server-side/express_nodejs/forms/index.md b/files/ru/learn/server-side/express_nodejs/forms/index.md
index 1456d0963c67c6..0ab13c0e3a3b4a 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/index.md
+++ b/files/ru/learn/server-side/express_nodejs/forms/index.md
@@ -7,263 +7,232 @@ tags:
   - Формы
 translation_of: Learn/Server-side/Express_Nodejs/forms
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</div>
+В этой главе мы покажем вам как работать с HTML формами в Express, используя Pug, и в частности как написать формы для создания, обновления и удаления документов из базы данных.
 
-<p class="summary">В этой главе мы покажем вам как работать с HTML формами в Express, используя Pug, и в частности как написать формы для создания, обновления и удаления документов из базы данных.</p>
+| Предварительные знания: | Завершите изучение предыдущих тем учебника, включая [Учебник Express Часть 5: Отображение данных библиотеки](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data) |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                   | Понять, как писать формы для получения данных от пользователей и обновлять базу данных с этими данными.                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные знания:</th>
-   <td>Завершите изучение предыдущих тем учебника, включая <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Учебник Express Часть 5: Отображение данных библиотеки</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, как писать формы для получения данных от пользователей и обновлять базу данных с этими данными.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+[HTML форма](/ru/docs/Web/Guide/HTML/Forms) - это группа из одного или нескольких полей / виджетов на веб-странице, которая может использоваться для сбора информации от пользователей для отправки на сервер. Формы представляют собой гибкий механизм для сбора данных, вводимых пользователем, поскольку существуют подходящие входные данные форм, доступные для ввода различных типов данных-текстовые поля, флажки, переключатели, средства выбора даты и т. д. Формы также являются относительно безопасным способом обмена данными с сервером, поскольку они позволяют отправлять данные в запросах `POST` с защитой от подделки межсайтовых запросов.
 
-<p><a href="/en-US/docs/Web/Guide/HTML/Forms">HTML форма</a> - это группа из одного или нескольких полей / виджетов на веб-странице, которая может использоваться для сбора информации от пользователей для отправки на сервер. Формы представляют собой гибкий механизм для сбора данных, вводимых пользователем, поскольку существуют подходящие входные данные форм, доступные для ввода различных типов данных-текстовые поля, флажки, переключатели, средства выбора даты и т. д. Формы также являются относительно безопасным способом обмена данными с сервером, поскольку они позволяют отправлять данные в запросах <code>POST</code> с защитой от подделки межсайтовых запросов.</p>
+Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введённые данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.
 
-<p>Работа с формами может быть сложной! Разработчику нужно написать HTML код для форм, валидацию и правильно анализировать введённые данные на сервере (и, возможно, также в браузере), отобразить форму с сообщениями об ошибках, чтобы сообщить пользователям о любых недопустимых полях, обработать данные, когда они были успешно отправлены, и, наконец, каким-то образом ответить пользователю о том, что результат успешен.</p>
+В этом уроке мы покажем вам, как вышеуказанные операции могут быть выполнены в _Express_. По пути мы расширим веб-сайт _LocalLibrary_, чтобы пользователи могли создавать, редактировать и удалять элементы из библиотеки.
 
-<p>В этом уроке мы покажем вам, как вышеуказанные операции могут быть выполнены в <em>Express</em>. По пути мы расширим веб-сайт <em>LocalLibrary</em>, чтобы пользователи могли создавать, редактировать и удалять элементы из библиотеки.</p>
+> **Примечание:** Мы не рассматривали, как ограничить определённые маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.
 
-<div class="note">
-<p><strong>Примечание:</strong> Мы не рассматривали, как ограничить определённые маршруты аутентифицированными или авторизованными пользователями, поэтому на данный момент любой пользователь сможет вносить изменения в базу данных.</p>
-</div>
+### HTML Forms
 
-<h3 id="HTML_Forms">HTML Forms</h3>
+Первый краткий обзор [HTML Forms](/ru/docs/Web/Guide/HTML/Forms). Рассмотрим простую HTML-форму с одним текстовым полем для ввода имени некоторой "команды" и связанной с ней меткой:
 
-<p>Первый краткий обзор <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML Forms</a>. Рассмотрим простую HTML-форму с одним текстовым полем для ввода имени некоторой "команды" и связанной с ней меткой:</p>
+![Simple name field example in HTML form](https://mdn.mozillademos.org/files/14117/form_example_name_field.png)
 
-<p><img alt="Simple name field example in HTML form" src="https://mdn.mozillademos.org/files/14117/form_example_name_field.png" style="border-style: solid; border-width: 1px; display: block; height: 44px; margin: 0px auto; width: 399px;"></p>
+Определённые в HTML формы собираются внутри тэга `<form>...</form>`, содержащего хотя ы один элемент `input` с `type="submit"`.
 
-<p>Определённые в  HTML формы собираются внутри тэга <code>&lt;form&gt;...&lt;/form&gt;</code>, содержащего хотя ы один элемент <code>input</code> с <code>type="submit"</code>.</p>
+```html
+<form action="/team_name_url/" method="post">
+    <label for="team_name">Enter name: </label>
+    <input id="team_name" type="text" name="name_field" value="Default name for team.">
+    <input type="submit" value="OK">
+</form>
+```
 
-<pre class="brush: html">&lt;form action="/team_name_url/" method="post"&gt;
-    &lt;label for="team_name"&gt;Enter name: &lt;/label&gt;
-    &lt;input id="team_name" type="text" name="name_field" value="Default name for team."&gt;
-    &lt;input type="submit" value="OK"&gt;
-&lt;/form&gt;</pre>
+Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут `type` определяет какой из [виджетов](/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм) будет выбран для отображения поля. Атрибуты `name` и `id` идентифицируют поле в JavaScript/CSS/HTML, а `value` определяет его первоначальное значение. Связанная с полем метка, задаётся с помощью тега `label` (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута `for`, в котором указывается значение идентификатора поля (`input` `id`).
 
-<p>Хотя здесь мы включили только одно (текстовое) поле для ввода имени команды, форма может содержать любое количество других элементов ввода и связанных с ними меток. Атрибут <code>type</code> определяет какой из <a href="/ru/docs/Learn/HTML/Forms/Стандартные_виджеты_форм">виджетов</a> будет выбран для отображения поля. Атрибуты <code>name</code> и <code>id</code> идентифицируют поле в JavaScript/CSS/HTML, а <code>value</code> определяет его первоначальное значение. Связанная с полем метка, задаётся с помощью тега <code style="font-style: normal; font-weight: normal;">label</code> (располагается строкой выше и содержит в себе подпись "Enter name"). Связь метки и поля ввода устанавливается при помощи атрибута <code>for</code>, в котором указывается значение идентификатора поля (<code>input</code> <code>id</code>).</p>
+Input `submit `будет отображаться в виде кнопки (по умолчанию) - он может быть нажат пользователем, чтобы загрузить данные, содержащиеся в других входных элементов на сервер (в данном случае, только team_name). Атрибуты формы определяют метод HTTP, используемый для отправки данных, и назначение данных на сервере (action):
 
-<p>Input <code>submit </code>будет отображаться в виде кнопки (по умолчанию) - он может быть нажат пользователем, чтобы загрузить данные, содержащиеся в других входных элементов на сервер (в данном случае, только team_name). Атрибуты формы определяют метод HTTP, используемый для отправки данных, и назначение данных на сервере (action):</p>
+- `action`: ресурс/URL-адрес, по которому данные должны отправляться на обработку при отправке формы. Если это не установлено (или установлено в пустую строку), то форма будет отправлена назад к URL текущей страницы.
+- `method`: Метод HTTP, используемый для отправки данных: `POST` or `GET`.
 
-<ul>
- <li><code>action</code>: ресурс/URL-адрес, по которому данные должны отправляться на обработку при отправке формы. Если это не установлено (или установлено в пустую строку), то форма будет отправлена назад к URL текущей страницы.</li>
- <li><code>method</code>: Метод HTTP, используемый для отправки данных: <code>POST</code> or <code>GET</code>.
-  <ul>
-   <li>Метод <code>POST</code> должен всегда использоваться, если данные собираются привести к изменению базы данных сервера, потому что это может быть сделано более устойчивым к атакам запроса подделки межсайтового.</li>
-   <li>Метод <code>GET</code> следует использовать только для форм, которые не изменяют пользовательские данные (например, форма поиска). Рекомендуется, когда вы хотите, чтобы иметь возможность делать закладки или поделиться URL.</li>
-  </ul>
- </li>
-</ul>
+  - Метод `POST` должен всегда использоваться, если данные собираются привести к изменению базы данных сервера, потому что это может быть сделано более устойчивым к атакам запроса подделки межсайтового.
+  - Метод `GET` следует использовать только для форм, которые не изменяют пользовательские данные (например, форма поиска). Рекомендуется, когда вы хотите, чтобы иметь возможность делать закладки или поделиться URL.
 
-<h3 id="Процесс_обработки_формы">Процесс обработки формы</h3>
+### Процесс обработки формы
 
-<p>Обработка форм использует все те же методы, которые мы изучили для отображения информации о наших моделях: маршрут отправляет запрос в функцию контроллера, которая выполняет все необходимые действия с базой данных, включая чтение данных из моделей, а затем генерирует и возвращает HTML-страницу. Что усложняет ситуацию, так это то, что сервер также должен иметь возможность обрабатывать данные, предоставленные пользователем, и повторно отображать форму с информацией об ошибках, если есть какие-либо проблемы.</p>
+Обработка форм использует все те же методы, которые мы изучили для отображения информации о наших моделях: маршрут отправляет запрос в функцию контроллера, которая выполняет все необходимые действия с базой данных, включая чтение данных из моделей, а затем генерирует и возвращает HTML-страницу. Что усложняет ситуацию, так это то, что сервер также должен иметь возможность обрабатывать данные, предоставленные пользователем, и повторно отображать форму с информацией об ошибках, если есть какие-либо проблемы.
 
-<p>Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зелёным цветом):</p>
+Блок-схема процесса обработки запросов формы показана ниже, начиная с запроса страницы, содержащей форму (показана зелёным цветом):
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png" style="height: 649px; width: 800px;"></p>
+![](https://mdn.mozillademos.org/files/14478/Web%20server%20form%20handling.png)
 
-<p>Как показано на диаграмме выше, основные действия, которые необходимо выполнить коду обработки форм:</p>
+Как показано на диаграмме выше, основные действия, которые необходимо выполнить коду обработки форм:
 
-<ol>
- <li>Отображение формы по умолчанию при первом запросе пользователем.
-  <ul>
-   <li>Форма может содержать пустые поля (например, если вы создаёте новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).</li>
-  </ul>
- </li>
- <li>Получение данных, отправленных пользователем, обычно в запросе HTTP <code>POST</code>.</li>
- <li>Валидация и очистка данных.</li>
- <li>Если какие-либо данные недопустимы, повторно отобразите форму—на этот раз с заполненными пользователем значениями и сообщениями об ошибках для проблемных полей</li>
- <li>Если все данные верны, выполнить требуемые действия (например, сохранить данные в базе данных, отправьте уведомление по электронной почте, возвращающие результат поиска, загрузить файл и т. д.)</li>
- <li>После завершения всех действий перенаправьте пользователя на другую страницу.</li>
-</ol>
+1.  Отображение формы по умолчанию при первом запросе пользователем.
 
-<p>Часто код обработки формы реализуется с помощью <code>GET </code>route для начального отображения формы и <code>POST </code>route к тому же пути для обработки проверки и обработки данных формы. Это подход, который будет использоваться в этом уроке!</p>
+    - Форма может содержать пустые поля (например, если вы создаёте новую запись), или она может быть предварительно заполнена начальными значениями (например, если вы изменяете запись или имеете полезные начальные значения по умолчанию).
 
-<p>Сам Express не предоставляет какой-либо конкретной поддержки для операций обработки форм, но он может использовать промежуточное программное обеспечение для обработки <code>POST</code> и <code>GET</code> параметров из формы, а также для проверки/очистки их значений.</p>
+2.  Получение данных, отправленных пользователем, обычно в запросе HTTP `POST`.
+3.  Валидация и очистка данных.
+4.  Если какие-либо данные недопустимы, повторно отобразите форму—на этот раз с заполненными пользователем значениями и сообщениями об ошибках для проблемных полей
+5.  Если все данные верны, выполнить требуемые действия (например, сохранить данные в базе данных, отправьте уведомление по электронной почте, возвращающие результат поиска, загрузить файл и т. д.)
+6.  После завершения всех действий перенаправьте пользователя на другую страницу.
 
-<h3 id="Валидация_и_обработка">Валидация и обработка</h3>
+Часто код обработки формы реализуется с помощью `GET `route для начального отображения формы и `POST `route к тому же пути для обработки проверки и обработки данных формы. Это подход, который будет использоваться в этом уроке!
 
-<p>Перед сохранением данных формы их необходимо проверить и очистить:</p>
+Сам Express не предоставляет какой-либо конкретной поддержки для операций обработки форм, но он может использовать промежуточное программное обеспечение для обработки `POST` и `GET` параметров из формы, а также для проверки/очистки их значений.
 
-<ul>
- <li>Проверка проверяет, что введённые значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.</li>
- <li>Очистка удаляет / заменяет символы в данных, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер.</li>
-</ul>
+### Валидация и обработка
 
-<p>В этом уроке мы будем использовать популярный модуль <a href="https://www.npmjs.com/package/express-validator">express-validator</a> для проверки и очистки данных формы.</p>
+Перед сохранением данных формы их необходимо проверить и очистить:
 
-<h4 id="Установка">Установка</h4>
+- Проверка проверяет, что введённые значения являются подходящими для каждого поля (расположены в правильном диапазоне, формат и т. д.) и что значения были предоставлены для всех обязательных полей.
+- Очистка удаляет / заменяет символы в данных, которые потенциально могут использоваться для отправки вредоносного содержимого на сервер.
 
-<p>Установите модуль, выполнив следующую команду в корне проекта</p>
+В этом уроке мы будем использовать популярный модуль [express-validator](https://www.npmjs.com/package/express-validator) для проверки и очистки данных формы.
 
-<pre class="brush: bash">npm install express-validator
-</pre>
+#### Установка
 
-<h4 id="Использование_express-validator">Использование express-validator</h4>
+Установите модуль, выполнив следующую команду в корне проекта
 
-<div class="note">
-<p><strong>Note:</strong> <a href="https://github.com/ctavan/express-validator#express-validator">express-validator</a> руководство на Github предоставляет хороший обзор API. Мы рекомендуем вам прочитать это, чтобы получить представление о всех его возможностях (включая создание пользовательских валидаторов). Ниже мы рассмотрим только подмножество, которое полезно для <em>LocalLibrary</em>.</p>
-</div>
+```bash
+npm install express-validator
+```
 
-<p>Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей <strong>'express-validator/check</strong>' и <strong>'express-validator/filter</strong>', как показано ниже:</p>
+#### Использование express-validator
 
-<pre class="brush: js">const { body,validationResult } = require('express-validator/check');
+> **Примечание:** [express-validator](https://github.com/ctavan/express-validator#express-validator) руководство на Github предоставляет хороший обзор API. Мы рекомендуем вам прочитать это, чтобы получить представление о всех его возможностях (включая создание пользовательских валидаторов). Ниже мы рассмотрим только подмножество, которое полезно для _LocalLibrary_.
+
+Для того, чтобы использовать валидатор в наших контроллерах, мы должны требовать функции, которые мы хотим использовать из модулей **'express-validator/check**' и **'express-validator/filter**', как показано ниже:
+
+```js
+const { body,validationResult } = require('express-validator/check');
 const { sanitizeBody } = require('express-validator/filter');
-</pre>
+```
+
+Есть много доступных функций, позволяющих проверять и очищать данные из параметров запроса, тела, заголовков, файлов cookie и т. д., или все сразу. Для этого урока мы будем использовать `body`, `sanitizeBody`, and `validationResult` (как "требуется" выше).
+
+Функции определяются следующим образом:
+
+- [`body(fields[, message])`](https://github.com/ctavan/express-validator#bodyfields-message): Задаёт набор полей в теле запроса (параметр `POST`) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом `body()`. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку.
+
+  ```js
+  body('name', 'Empty name').isLength({ min: 1 }),
+  body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
+  ```
+
+  Можно также последовательно подключить различные валидаторы и добавить сообщения, отображаемые при выполнении предыдущих валидаторов.
+
+- ```js
+  body('name').isLength({ min: 1 }).trim().withMessage('Name empty.')
+      .isAlpha().withMessage('Name must be alphabet letters.'),
+  ```
+
+  > **Примечание:** Вы также можете добавить встроенные средства очистки, такие как `trim()`, как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.
 
-<p>Есть много доступных функций, позволяющих проверять и очищать данные из параметров запроса, тела, заголовков, файлов cookie и т. д., или все сразу. Для этого урока мы будем использовать <code>body</code>, <code>sanitizeBody</code>, and <code>validationResult</code> (как "требуется" выше).</p>
+- [`sanitizeBody(fields)`](https://github.com/ctavan/express-validator#sanitizebodyfields): Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки `escape()`, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript.
 
-<p>Функции определяются следующим образом:</p>
+  ```js
+  sanitizeBody('name').trim().escape(),
+  sanitizeBody('date').toDate(),
+  ```
 
-<ul>
- <li><code><a href="https://github.com/ctavan/express-validator#bodyfields-message">body(fields[, message])</a></code>: Задаёт набор полей в теле запроса (параметр <code>POST</code>) для проверки, а также необязательное сообщение об ошибке, которое может отображаться в случае сбоя тестов. Критерии проверки последовательно связаны с методом <code>body()</code>. Например, первая проверка ниже проверяет, что поле" имя "не пустое и задаёт сообщение об ошибке" пустое имя", если оно не пустое. Второй тест проверяет, что поле age является допустимой датой, и с помощью optional() указывает, что пустые и пустые строки не пройдут проверку.
+- [`validationResult(req)`](https://github.com/ctavan/express-validator#validationresultreq): Запускает проверку, делая ошибки доступными в виде объекта результата проверки. Это вызывается в отдельном обратном вызове, как показано ниже:
 
-  <pre class="brush: js">body('name', 'Empty name').isLength({ min: 1 }),
-body('age', 'Invalid age').optional({ checkFalsy: true }).isISO8601(),
-</pre>
-  Можно также последовательно подключить различные валидаторы и добавить сообщения, отображаемые при выполнении предыдущих валидаторов.</li>
- <li>
-  <pre class="brush: js">body('name').isLength({ min: 1 }).trim().withMessage('Name empty.')
-    .isAlpha().withMessage('Name must be alphabet letters.'),
-</pre>
+  ```js
+  (req, res, next) => {
+      // Extract the validation errors from a request.
+      const errors = validationResult(req);
 
-  <div class="note">
-  <p><strong>Note:</strong> Вы также можете добавить встроенные средства очистки, такие как <code>trim()</code>, как показано выше. Однако средства очистки, применяемые здесь, применяются только к шагу проверки. Если требуется очистить конечный результат, необходимо использовать отдельный метод очистки, как показано ниже.</p>
-  </div>
- </li>
- <li><code><a href="https://github.com/ctavan/express-validator#sanitizebodyfields">sanitizeBody(fields)</a></code>: Задаёт поле тела для очистки. затем операции очистки последовательно соединяются с этим методом. Например, операция очистки <code>escape()</code>, описанная ниже, удаляет символы HTML из переменной name, которые могут использоваться в атаках сценариев между сайтами JavaScript.
-  <pre class="brush: js">sanitizeBody('name').trim().escape(),
-sanitizeBody('date').toDate(),</pre>
- </li>
- <li><code><a href="https://github.com/ctavan/express-validator#validationresultreq">validationResult(req)</a></code>: Запускает проверку, делая ошибки доступными в виде объекта результата проверки. Это вызывается в отдельном обратном вызове, как показано ниже:
-  <pre class="brush: js">(req, res, next) =&gt; {
-    // Extract the validation errors from a request.
-    const errors = validationResult(req);
+      if (!errors.isEmpty()) {
+          // There are errors. Render form again with sanitized values/errors messages.
+          // Error messages can be returned in an array using `errors.array()`.
+          }
+      else {
+          // Data from form is valid.
+      }
+  }
+  ```
 
-    if (!errors.isEmpty()) {
-        // There are errors. Render form again with sanitized values/errors messages.
-        // Error messages can be returned in an array using `errors.array()`.
-        }
-    else {
-        // Data from form is valid.
-    }
-}</pre>
-  Мы используем метод <code>isEmpty()</code> результата проверки, чтобы проверить, были ли ошибки, и его метод array (), чтобы получить набор сообщений об ошибках. Дополнительные сведения см. в разделе API результатов проверки.</li>
-</ul>
+  Мы используем метод `isEmpty()` результата проверки, чтобы проверить, были ли ошибки, и его метод array (), чтобы получить набор сообщений об ошибках. Дополнительные сведения см. в разделе API результатов проверки.
 
-<p>Цепочки проверки и очистки являются промежуточными запросами, которые должны быть переданы обработчику Express -маршрута (мы делаем это косвенно, через контроллер). При запуске промежуточного по каждый валидатор / средства очистки выполняется в указанном порядке..</p>
+Цепочки проверки и очистки являются промежуточными запросами, которые должны быть переданы обработчику Express -маршрута (мы делаем это косвенно, через контроллер). При запуске промежуточного по каждый валидатор / средства очистки выполняется в указанном порядке..
 
-<p>Мы рассмотрим некоторые реальные примеры, когда мы реализуем <em>LocalLibrary </em>формы ниже.</p>
+Мы рассмотрим некоторые реальные примеры, когда мы реализуем _LocalLibrary_ формы ниже.
 
-<h3 id="Дизайн_формы">Дизайн формы</h3>
+### Дизайн формы
 
-<p>Многие модели в библиотеке связаны / зависимы—например, книга требует автора, а также может иметь один или несколько жанров. Это поднимает вопрос о том, как мы должны обрабатывать случай, когда пользователь хочет:</p>
+Многие модели в библиотеке связаны / зависимы—например, книга требует автора, а также может иметь один или несколько жанров. Это поднимает вопрос о том, как мы должны обрабатывать случай, когда пользователь хочет:
 
-<ul>
- <li>Создайте объект, если связанные с ним объекты ещё не существуют (например, книга, в которой не определён объект автора).</li>
- <li>Удаление объекта, который все ещё используется другим объектом (например, удаление жанра, который все ещё используется книгой).</li>
-</ul>
+- Создайте объект, если связанные с ним объекты ещё не существуют (например, книга, в которой не определён объект автора).
+- Удаление объекта, который все ещё используется другим объектом (например, удаление жанра, который все ещё используется книгой).
 
-<p>Для этого проекта мы упростили реализацию, объявив, что форма может быть только:</p>
+Для этого проекта мы упростили реализацию, объявив, что форма может быть только:
 
-<ul>
- <li>Создайте объект, используя объекты, которые уже существуют (таким образом, пользователи должны будут создать все необходимые экземпляры автора и жанра, прежде чем пытаться создать любые объекты книги).</li>
- <li>Удалите объект, если на него не ссылаются другие объекты (например, вы не сможете удалить книгу, пока не будут удалены все связанные объекты BookInstance).</li>
-</ul>
+- Создайте объект, используя объекты, которые уже существуют (таким образом, пользователи должны будут создать все необходимые экземпляры автора и жанра, прежде чем пытаться создать любые объекты книги).
+- Удалите объект, если на него не ссылаются другие объекты (например, вы не сможете удалить книгу, пока не будут удалены все связанные объекты BookInstance).
 
-<div class="note">
-<p><strong>Note:</strong> Более" надёжная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путём удаления зависимых объектов или путём удаления ссылок на удалённый объект из базы данных).</p>
-</div>
+> **Примечание:** Более" надёжная " реализация может позволить создавать зависимые объекты при создании нового объекта и удалять любой объект в любое время (например, путём удаления зависимых объектов или путём удаления ссылок на удалённый объект из базы данных).
 
-<h3 id="Маршруты">Маршруты</h3>
+### Маршруты
 
-<p>Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (<code>GET</code>) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (<code>POST</code>) используется для проверки введённых пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).</p>
+Чтобы реализовать наш код обработки форм, нам понадобятся два маршрута с одинаковым шаблоном URL. Первый (`GET`) маршрут используется для отображения новой пустой формы создания объекта. Второй маршрут (`POST`) используется для проверки введённых пользователем данных, а затем сохранения информации и перенаправления на страницу сведений (если данные верны) или повторного отображения формы с ошибками (если данные неверны).
 
-<p>Мы уже создали маршруты для всех страниц создания нашей модели в  <strong>/routes/catalog.js</strong> (in a <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes">previous tutorial</a>).  Например, жанровые маршруты показаны ниже:</p>
+Мы уже создали маршруты для всех страниц создания нашей модели в **/routes/catalog.js** (in a [previous tutorial](/ru/docs/Learn/Server-side/Express_Nodejs/routes)). Например, жанровые маршруты показаны ниже:
 
-<pre class="brush: js">// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
+```js
+// GET request for creating a Genre. NOTE This must come before route that displays Genre (uses id).
 router.get('/genre/create', genre_controller.genre_create_get);
 
 // POST request for creating Genre.
 router.post('/genre/create', genre_controller.genre_create_post);
-</pre>
+```
 
-<h2 id="Express_формы_—_подразделы">Express формы — подразделы</h2>
+## Express формы — подразделы
 
-<p>В следующих подразделах мы добавим необходимые формы для нашего веб-сайта. Вы должны прочитать и проработать каждый из них по очереди, прежде чем перейти к следующему.</p>
+В следующих подразделах мы добавим необходимые формы для нашего веб-сайта. Вы должны прочитать и проработать каждый из них по очереди, прежде чем перейти к следующему.
 
-<ol>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form">Форма для создания Genre</a> — Определение нашей страницы для создания объектов <code>Genre</code>.</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form">Форма для создания Author</a> — Определение страницы для создания объектов <code>Author</code>.</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form">Форма для создания Book</a> — Определение страницы/формы для создания объектов <code>Book</code>.</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form">Форма для создания BookInstance</a> — Определение страницы/формы для создания объектов <code>BookInstance</code>.</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form">Форма для удаления Author</a> — Определение страницы для удаления объектов <code>Author</code>.</li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form">Форма для обновления Book</a> — Определение страницы для обновления объектов <code>Book</code>.</li>
-</ol>
+1.  [Форма для создания Genre](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Create_genre_form) — Определение нашей страницы для создания объектов `Genre`.
+2.  [Форма для создания Author](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Create_author_form) — Определение страницы для создания объектов `Author`.
+3.  [Форма для создания Book](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Create_book_form) — Определение страницы/формы для создания объектов `Book`.
+4.  [Форма для создания BookInstance](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Create_BookInstance_form) — Определение страницы/формы для создания объектов `BookInstance`.
+5.  [Форма для удаления Author](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Delete_author_form) — Определение страницы для удаления объектов `Author`.
+6.  [Форма для обновления Book](/ru/docs/Learn/Server-side/Express_Nodejs/forms/Update_Book_form) — Определение страницы для обновления объектов `Book`.
 
-<h2 id="Challenge_yourself">Испытайте себя</h2>
+## Испытайте себя
 
-<p>Реализуйте страницы удаления для моделей <code>Book</code>, <code>BookInstance</code> и <code>Genre</code>, сделав на них ссылки с соответствующих страниц с подробными сведениями таким же образом, как это было нами сделано для страницы <em>Delete Author</em> («Удалить автора»). Эти страницы должны следовать тем же конструктивным принципам:</p>
+Реализуйте страницы удаления для моделей `Book`, `BookInstance` и `Genre`, сделав на них ссылки с соответствующих страниц с подробными сведениями таким же образом, как это было нами сделано для страницы _Delete Author_ («Удалить автора»). Эти страницы должны следовать тем же конструктивным принципам:
 
-<ul>
- <li>Если на объект, указанный к удалению, существуют ссылки из других объектов, то должен быть выведен список этих других объектов вместе с сообщением о том, что соответствующая запись в БД не может быть удалена до тех пор, пока не будут удалены объекты из списка.</li>
- <li>Если на объект, указанный к удалению, нет ссылок из других объектов, то на визуальном представлении страницы должен быть выведен вопрос о подтверждении удаления этого объекта. Если пользователь подтвердит удаление нажатием кнопки <strong>Delete</strong>, запись должна быть удалена.</li>
-</ul>
+- Если на объект, указанный к удалению, существуют ссылки из других объектов, то должен быть выведен список этих других объектов вместе с сообщением о том, что соответствующая запись в БД не может быть удалена до тех пор, пока не будут удалены объекты из списка.
+- Если на объект, указанный к удалению, нет ссылок из других объектов, то на визуальном представлении страницы должен быть выведен вопрос о подтверждении удаления этого объекта. Если пользователь подтвердит удаление нажатием кнопки **Delete**, запись должна быть удалена.
 
-<p>Несколько подсказок:</p>
+Несколько подсказок:
 
-<ul>
- <li>Удаление объекта модели <code>Genre</code> очень похоже на удаление объекта модели <code>Author</code>, так как на каждый из этих объектов могут быть ссылки из объектов модели <code>Book</code> (таким образом, в обоих этих случаях вы можете удалить объект только тогда, когда будут удалены объекты модели <code>Book</code>, из которых есть ссылки на объект, указанный к удалению).</li>
- <li>Удаление объекта модели <code>Book</code> тоже похоже на удаление объекта модели <code>Author</code>, но в этом случае вам нужно будет проверять, нет ли объектов модели <code>BookInstance</code>, из которых есть ссылки на объект, указанный к удалению.</li>
- <li>Удаление объекта модели <code>BookInstance</code> самое простое из всех, потому что не существует объектов, из которых могут быть ссылки на объект модели <code>BookInstance</code>. В данном случае вы можете просто найти соответствующую запись и удалить её.</li>
-</ul>
+- Удаление объекта модели `Genre` очень похоже на удаление объекта модели `Author`, так как на каждый из этих объектов могут быть ссылки из объектов модели `Book` (таким образом, в обоих этих случаях вы можете удалить объект только тогда, когда будут удалены объекты модели `Book`, из которых есть ссылки на объект, указанный к удалению).
+- Удаление объекта модели `Book` тоже похоже на удаление объекта модели `Author`, но в этом случае вам нужно будет проверять, нет ли объектов модели `BookInstance`, из которых есть ссылки на объект, указанный к удалению.
+- Удаление объекта модели `BookInstance` самое простое из всех, потому что не существует объектов, из которых могут быть ссылки на объект модели `BookInstance`. В данном случае вы можете просто найти соответствующую запись и удалить её.
 
-<p>Реализуйте страницы обновления для моделей <code>BookInstance</code>, <code>Author</code> и <code>Genre</code>, сделав на них ссылки с соответствующих страниц с подробными сведениями таким же образом, как это было нами сделано для страницы <em>Update Book</em> («Обновить книгу»).</p>
+Реализуйте страницы обновления для моделей `BookInstance`, `Author` и `Genre`, сделав на них ссылки с соответствующих страниц с подробными сведениями таким же образом, как это было нами сделано для страницы _Update Book_ («Обновить книгу»).
 
-<p>Несколько подсказок:</p>
+Несколько подсказок:
 
-<ul>
- <li>Страница <em>Update Book</em> («Обновить книгу»), которую мы только что реализовали, является самой сложной в реализации! Те же приёмы можно использовать для страниц обновления объектов других моделей.</li>
- <li>Свойства объектов модели <code>Author</code> с датой рождения и датой смерти и свойство due_back объектов модели <code>BookInstance</code> имеют неподходящий формат для ввода в поле формы с типом 'date' (оно требует ввод даты в виде строки в формате "YYYY-MM-DD"). Самый простой способ это обойти&nbsp;— создать новое виртуальное свойство в соответствующей модели для каждого реального свойства с датой, которое преобразует и возвратит дату в нужном формате, а затем использовать это виртуальное свойство в соответствующих шаблонах страниц.</li>
- <li>Если вы зашли в тупик, обратитесь к реализации страниц обновления в <a href="https://github.com/mdn/express-locallibrary-tutorial">примере вот тут</a>.</li>
-</ul>
+- Страница _Update Book_ («Обновить книгу»), которую мы только что реализовали, является самой сложной в реализации! Те же приёмы можно использовать для страниц обновления объектов других моделей.
+- Свойства объектов модели `Author` с датой рождения и датой смерти и свойство due_back объектов модели `BookInstance` имеют неподходящий формат для ввода в поле формы с типом 'date' (оно требует ввод даты в виде строки в формате "YYYY-MM-DD"). Самый простой способ это обойти — создать новое виртуальное свойство в соответствующей модели для каждого реального свойства с датой, которое преобразует и возвратит дату в нужном формате, а затем использовать это виртуальное свойство в соответствующих шаблонах страниц.
+- Если вы зашли в тупик, обратитесь к реализации страниц обновления в [примере вот тут](https://github.com/mdn/express-locallibrary-tutorial).
 
-<h2 id="Summary">Резюмируем</h2>
+## Резюмируем
 
-<p><em>Express</em>, Node.js и сторонние пакеты, полученные с помощью npm, обеспечивают всё, что вам потребуется для добавления форм на ваш сайт. В этой статье вы узнали, как создавать формы с помощью языка написания шаблонов <em>Pug</em>, как выполнять валидацию и очистку вводимых пользователем данных с помощью пакета <em>express-validator</em> и как добавлять, удалять и модифицировать записи в базе данных сайта.</p>
+_Express_, Node.js и сторонние пакеты, полученные с помощью npm, обеспечивают всё, что вам потребуется для добавления форм на ваш сайт. В этой статье вы узнали, как создавать формы с помощью языка написания шаблонов _Pug_, как выполнять валидацию и очистку вводимых пользователем данных с помощью пакета _express-validator_ и как добавлять, удалять и модифицировать записи в базе данных сайта.
 
-<p>Теперь вы должны представлять, как добавить на свои собственные Node.js-сайты простые формы и код для их обработки!</p>
+Теперь вы должны представлять, как добавить на свои собственные Node.js-сайты простые формы и код для их обработки!
 
-<h2 id="See_also">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li>Пакет <a href="https://www.npmjs.com/package/express-validator">express-validator</a> (документация на npm).</li>
-</ul>
+- Пакет [express-validator](https://www.npmjs.com/package/express-validator) (документация на npm).
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs/deployment", "Learn/Server-side/Express_Nodejs")}}
 
-<h2 id="In_this_module">Содержание этого модуля (блока статей)</h2>
+## Содержание этого модуля (блока статей)
 
-<ul>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/Introduction">Введение в Express/Node</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/development_environment">Настройка окружения для разработки на Node.js (Express)</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Учебник Express: сайт Local Library</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Учебник Express, часть 2: Создание скелета сайта</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/mongoose">Учебник Express, часть 3: Использование базы данных (с помощью Mongoose)</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/routes">Учебник Express, часть 4: Маршруты и контроллеры</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Учебник Express, часть 5: Отображение данных библиотеки</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/forms">Учебник Express, часть 6: Работа с формами</a></li>
- <li><a href="/ru/docs/Learn/Server-side/Express_Nodejs/deployment">Учебник Express, часть 7: Ввод сайта в эксплуатацию</a></li>
-</ul>
+- [Введение в Express/Node](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+- [Настройка окружения для разработки на Node.js (Express)](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+- [Учебник Express: сайт Local Library](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+- [Учебник Express, часть 2: Создание скелета сайта](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+- [Учебник Express, часть 3: Использование базы данных (с помощью Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+- [Учебник Express, часть 4: Маршруты и контроллеры](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+- [Учебник Express, часть 5: Отображение данных библиотеки](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+- [Учебник Express, часть 6: Работа с формами](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+- [Учебник Express, часть 7: Ввод сайта в эксплуатацию](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
diff --git a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md
index 418373eb5c49db..75b8c81553bd84 100644
--- a/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md
+++ b/files/ru/learn/server-side/express_nodejs/forms/update_book_form/index.md
@@ -3,13 +3,14 @@ title: Update Book form
 slug: Learn/Server-side/Express_Nodejs/forms/Update_Book_form
 translation_of: Learn/Server-side/Express_Nodejs/forms/Update_Book_form
 ---
-<p>Наконец, в разделе показано, как определить страницу для обновления объектов <code>Book</code>. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте <code>GET</code> значениями из базы данных.</p>
+Наконец, в разделе показано, как определить страницу для обновления объектов `Book`. Обработка форм при обновлении книги аналогична обработке форм при создании книги, за исключением того, что необходимо заполнить форму в маршруте `GET` значениями из базы данных.
 
-<h2 class="highlight-spanned" id="Controller—get_route">Controller—get route</h2>
+## Controller—get route
 
-<p>Откройте <strong>/controllers/bookController.js</strong>. Найдите экспортируемый метод контроллера <code>book_update_get()</code> и замените его на следующий код.</p>
+Откройте **/controllers/bookController.js**. Найдите экспортируемый метод контроллера `book_update_get()` и замените его на следующий код.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Display book update form on GET.
+```js
+// Display book update form on GET.
 exports.book_update_get = function(req, res, next) {
 
     // Get book, authors and genres for form.
@@ -32,8 +33,8 @@ exports.book_update_get = function(req, res, next) {
             }
             // Success.
             // Mark our selected genres as checked.
-            for (var all_g_iter = 0; all_g_iter &lt; results.genres.length; all_g_iter++) {
-                for (var book_g_iter = 0; book_g_iter &lt; results.book.genre.length; book_g_iter++) {
+            for (var all_g_iter = 0; all_g_iter < results.genres.length; all_g_iter++) {
+                for (var book_g_iter = 0; book_g_iter < results.book.genre.length; book_g_iter++) {
                     if (results.genres[all_g_iter]._id.toString()==results.book.genre[book_g_iter]._id.toString()) {
                         results.genres[all_g_iter].checked='true';
                     }
@@ -42,19 +43,21 @@ exports.book_update_get = function(req, res, next) {
             res.render('book_form', { title: 'Update Book', authors:results.authors, genres:results.genres, book: results.book });
         });
 
-};</code></pre>
+};
+```
 
-<p>Контроллер получит id <code>Book</code> книги для обновления из параметра URL (<code>req.params.id</code>). Он использует метод <code>async.parallel()</code>чтобы получить указанную запись <code>Book</code> (заполнение полей жанра и автора) и список всех объектов <code>Author</code> и <code>Genre</code>. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в <strong>book_form.pug</strong>, передаёт переменные <code>itle</code>, book, всех <code>authors</code>, и все<code>genres</code>.</p>
+Контроллер получит id `Book` книги для обновления из параметра URL (`req.params.id`). Он использует метод `async.parallel()`чтобы получить указанную запись `Book` (заполнение полей жанра и автора) и список всех объектов `Author` и `Genre`. Когда все операции завершены, он помечает выбранные жанры как отмеченные, а затем отображает их в **book_form.pug**, передаёт переменные `itle`, book, всех `authors`, и все`genres`.
 
-<h2 class="highlight-spanned" id="Controller—post_route">Controller—post route</h2>
+## Controller—post route
 
-<p>Найдите экспортируемый метод контроллера <code>book_update_post()</code> и замените его следующим кодом.</p>
+Найдите экспортируемый метод контроллера `book_update_post()` и замените его следующим кодом.
 
-<pre class="brush: js line-numbers  language-js"><code class="language-js">// Handle book update on POST.
+```js
+// Handle book update on POST.
 exports.book_update_post = [
 
     // Convert the genre to an array
-    (req, res, next) =&gt; {
+    (req, res, next) => {
         if(!(req.body.genre instanceof Array)){
             if(typeof req.body.genre==='undefined')
             req.body.genre=[];
@@ -78,7 +81,7 @@ exports.book_update_post = [
     sanitizeBody('genre.*').trim().escape(),
 
     // Process request after validation and sanitization.
-    (req, res, next) =&gt; {
+    (req, res, next) => {
 
         // Extract the validation errors from a request.
         const errors = validationResult(req);
@@ -108,8 +111,8 @@ exports.book_update_post = [
                 if (err) { return next(err); }
 
                 // Mark our selected genres as checked.
-                for (let i = 0; i &lt; results.genres.length; i++) {
-                    if (book.genre.indexOf(results.genres[i]._id) &gt; -1) {
+                for (let i = 0; i < results.genres.length; i++) {
+                    if (book.genre.indexOf(results.genres[i]._id) > -1) {
                         results.genres[i].checked='true';
                     }
                 }
@@ -126,15 +129,17 @@ exports.book_update_post = [
                 });
         }
     }
-];</code></pre>
+];
+```
 
-<p>Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги  и используем их для создание нового объекта <code>Book</code>(устанавливая его значение <code>_id</code> в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введённые пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем <code>Book.findByIdAndUpdate()</code> для обновления документа <code>Book</code>, а затем перенаправить на страницу сведений.</p>
+Это очень похоже на маршрут записи, используемый при создании Book. Сперва мы проверяем и очищаем данные книги и используем их для создание нового объекта `Book`(устанавливая его значение `_id` в идентификатор объекта для обновления). Если есть ошибки, когда мы проверяем данные, то мы повторно представляем форму, дополнительно отображая данные, введённые пользователем, ошибки, а также списки жанров и авторов. Если ошибок нет, то мы вызываем `Book.findByIdAndUpdate()` для обновления документа `Book`, а затем перенаправить на страницу сведений.
 
-<h2 class="highlight-spanned" id="View">View</h2>
+## View
 
-<p>Откройте <strong>/views/book_form.pug</strong> и обновите раздел, в котором элемент управления "форма автора" имеет условный код, показанный ниже.</p>
+Откройте **/views/book_form.pug** и обновите раздел, в котором элемент управления "форма автора" имеет условный код, показанный ниже.
 
-<pre class="line-numbers  language-html"><code class="language-html">    div.form-group
+```html
+    div.form-group
       label(for='author') Author:
       select#author.form-control(type='select' placeholder='Select author' name='author' required='true' )
         for author in authors
@@ -148,42 +153,35 @@ exports.book_update_post = [
               ) ? 'selected' : false
             ) #{author.name}
           else
-            option(value=author._id) #{author.name}</code></pre>
+            option(value=author._id) #{author.name}
+```
 
-<div class="note">
-<p><strong>Note</strong>: Это изменение кода необходимо для того, чтобы форму book_form можно было использовать как для создания, так и для обновления объектов book (без этого при создании формы на маршруте <code>GET</code> возникает ошибка).</p>
-</div>
+> **Примечание:** Это изменение кода необходимо для того, чтобы форму book_form можно было использовать как для создания, так и для обновления объектов book (без этого при создании формы на маршруте `GET` возникает ошибка).
 
-<h2 class="highlight-spanned" id="Добавить_кнопку_обновления">Добавить кнопку обновления</h2>
+## Добавить кнопку обновления
 
-<p>Откройте <strong>book_detail.pug</strong> и убедитесь, что есть ссылки для удаления и обновления книг в нижней части страницы, как показано ниже.</p>
+Откройте **book_detail.pug** и убедитесь, что есть ссылки для удаления и обновления книг в нижней части страницы, как показано ниже.
 
-<pre class="brush: html line-numbers  language-html"><code class="language-html">  hr
+```html
+  hr
   p
     a(href=book.url+'/delete') Delete Book
   p
-    a(href=book.url+'/update') Update Book</code></pre>
+    a(href=book.url+'/update') Update Book
+```
 
-<p>Теперь вы можете обновлять книги со страницы сведений о книге.</p>
+Теперь вы можете обновлять книги со страницы сведений о книге.
 
-<h2 class="highlight-spanned" id="Как_это_выглядит">Как это выглядит?</h2>
+## Как это выглядит?
 
-<p>Запустите приложение, откройте ваш браузер на  <a class="external external-icon" href="http://localhost:3000/" rel="noopener">http://localhost:3000/</a>, выберите ссылку  <em>All books</em>, затем выберите конкретную книгу. Наконец, выберите ссылку <em>Update Book</em>.</p>
+Запустите приложение, откройте ваш браузер на <http://localhost:3000/>, выберите ссылку _All books_, затем выберите конкретную книгу. Наконец, выберите ссылку _Update Book_.
 
-<p>Форма должна выглядеть так же, как страница <em>Create book</em>, только с заголовком  'Update book' и предварительно заполнены значениями записей.</p>
+Форма должна выглядеть так же, как страница _Create book_, только с заголовком 'Update book' и предварительно заполнены значениями записей.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14498/LocalLibary_Express_Book_Update_NoErrors.png" style="border-style: solid; border-width: 1px; display: block; height: 443px; margin: 0px auto; width: 1000px;"></p>
+![](https://mdn.mozillademos.org/files/14498/LocalLibary_Express_Book_Update_NoErrors.png)
 
-<div class="note">
-<p><strong>Note:</strong> Другие страницы для обновления объектов могут быть реализованы примерно таким же образом. Мы оставили это как задание.</p>
-</div>
+> **Примечание:** Другие страницы для обновления объектов могут быть реализованы примерно таким же образом. Мы оставили это как задание.
 
-<p> </p>
+## Next steps
 
-<h2 id="Next_steps">Next steps</h2>
-
-<ul>
- <li>Return to <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a>.</li>
-</ul>
-
-<p> </p>
+- Return to [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms).
diff --git a/files/ru/learn/server-side/express_nodejs/index.md b/files/ru/learn/server-side/express_nodejs/index.md
index f0a1be42bbd685..f81407789f004b 100644
--- a/files/ru/learn/server-side/express_nodejs/index.md
+++ b/files/ru/learn/server-side/express_nodejs/index.md
@@ -10,68 +10,52 @@ tags:
   - Учебник
 translation_of: Learn/Server-side/Express_Nodejs
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Express представляет собой популярный веб-фреймворк, написанный на JavaScript и работающий внутри среды исполнения node.js. Этот модуль освещает некоторые ключевые преимущества этого фреймворка, установку среды разработки и выполнение основных задач веб-разработки и развёртывания.</p>
+Express представляет собой популярный веб-фреймворк, написанный на JavaScript и работающий внутри среды исполнения node.js. Этот модуль освещает некоторые ключевые преимущества этого фреймворка, установку среды разработки и выполнение основных задач веб-разработки и развёртывания.
 
-<h2 id="Предварительные_требования">Предварительные требования</h2>
+## Предварительные требования
 
-<p>Перед началом этого модуля вам необходимо представлять, что из себя представляет серверное программирование и веб-фреймворки, желательно из прочтения статей другого модуля <a href="/en-US/docs/Learn/Server-side/First_steps">Server-side website programming first steps</a>. Знакомство с основными концепциями программирования и языком программирования <a href="/en-US/docs/Web/JavaScript">JavaScript</a> будет очень полезным, но оно не является обязательным для понимания базовых понятий этого модуля.</p>
+Перед началом этого модуля вам необходимо представлять, что из себя представляет серверное программирование и веб-фреймворки, желательно из прочтения статей другого модуля [Server-side website programming first steps](/ru/docs/Learn/Server-side/First_steps). Знакомство с основными концепциями программирования и языком программирования [JavaScript](/ru/docs/Web/JavaScript) будет очень полезным, но оно не является обязательным для понимания базовых понятий этого модуля.
 
-<div class="note">
-<p><strong>Примечание</strong>: Этот веб-сайт содержит множество источников для изучения JavaScript<em> в контексте  разработки на стороне клиента</em>: <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, <a href="/en-US/docs/Web/JavaScript/Guide">JavaScript Guide</a>, <a href="/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript Basics</a>, <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> (изучение). Ключевые особенности и концепции языка JavaScript остаются сходными и для серверной разработки на Node.js и используемый материал достаточно релевантен. Node.js предоставляет <a href="https://nodejs.org/dist/latest-v6.x/docs/api/">additional APIs</a> для обеспечения функциональности, которая полезна для "безбраузерной" разработки, т.е. для создания HTTP-сервера и доступа к файловой системе, но не поддерживает JavaScript APIs для работы с браузером и DOM.</p>
+> **Примечание:** Этот веб-сайт содержит множество источников для изучения JavaScript _в контексте разработки на стороне клиента_: [JavaScript](/ru/docs/Web/JavaScript), [JavaScript Guide](/ru/docs/Web/JavaScript/Guide), [JavaScript Basics](/ru/docs/Learn/Getting_started_with_the_web/JavaScript_basics), [JavaScript](/ru/docs/Learn/JavaScript) (изучение). Ключевые особенности и концепции языка JavaScript остаются сходными и для серверной разработки на Node.js и используемый материал достаточно релевантен. Node.js предоставляет [additional APIs](https://nodejs.org/dist/latest-v6.x/docs/api/) для обеспечения функциональности, которая полезна для "безбраузерной" разработки, т.е. для создания HTTP-сервера и доступа к файловой системе, но не поддерживает JavaScript APIs для работы с браузером и DOM.
+>
+> Это руководство обеспечит вас некоторой информацией о работе с Node.js и Express, но также существуют и другие многочисленные отличные ресурсы в Интернете и книгах — некоторые из них доступны из тем [How do I get started with Node.js](http://stackoverflow.com/a/5511507/894359) (StackOverflow) и [What are the best resources for learning Node.js?](https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?) (Quora).
 
-<p>Это руководство обеспечит вас некоторой информацией о работе с Node.js и Express, но также существуют и другие многочисленные отличные ресурсы в Интернете и книгах — некоторые из них доступны из тем <a href="http://stackoverflow.com/a/5511507/894359">How do I get started with Node.js</a> (StackOverflow) и <a href="https://www.quora.com/What-are-the-best-resources-for-learning-Node-js?">What are the best resources for learning Node.js?</a> (Quora).</p>
-</div>
+## Руководства
 
-<h2 id="Руководства">Руководства</h2>
+- [Введение в Express/Node](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+  - : В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
+- [Настройка среды разработки Node (Express)](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+  - : Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья даст вам то, что вам нужно, чтобы начать разработку приложений Express.
+- [Учебник Express: сайт LocalLibrary](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+  - : Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор веб-сайта «локальной библиотеки», над которым мы будем работать и развивать в последующих статьях.
+- [Учебник Express часть 2: Создание скелета веб-сайта](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+  - : В этой статье показано, как вы можете создать «скелет» веб-сайта, который затем можно будет заполнить с помощью маршрутов сайта, шаблонов/представлений и баз данных.
+- [Учебник Express часть 3: Использование базы данных (с помощью Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+  - : В этой статье кратко представлены базы данных для Node/Express. Затем показывается, как мы можем использовать [Mongoose](http://mongoosejs.com/) для обеспечения доступа к баз данных для сайта _LocalLibrary_. В уроке объясняется, как объявляются объектная схема и модели, основные типы полей и базовая валидация. Также кратко показаны некоторые из основных способов доступа к данным модели.
+- [Учебник Express часть 4: Маршруты и контроллеры](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+  - : В этом уроке мы создадим маршруты (код обработки URL) с "фиктивным" обработчиком функций для всех конечных точек ресурсов, которые нам в конечном итоге понадобятся для сайта _LocalLibrary_. По завершении мы будем иметь модульную структуру нашего кода обработки маршрута, который мы можем расширить с помощью функций реального обработчика в следующих статьях. Мы также будем очень хорошо понимать, как создавать модульные маршруты, используя Express.
+- [Учебник Express часть 5: Отображение данных библиотеки](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+  - : Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта _LocalLibrary_ и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.
+- [Учебник Express часть 6: Работы с формами](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+  - : В этой части мы покажем вам, как работать с [HTML формами](/ru/docs/Web/Guide/HTML/Forms) в Express, используя Pug, и в частности, как создавать, обновлять и удалять документы из базы данных.
+- [Учебник Express часть 7: Выкладка в production](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
+  - : Теперь когда вы создали восхитительный сайт _LocalLibrary_, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.
 
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Введение в Express/Node</a></dt>
- <dd>В первой статье об Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?" и дадим вам представление о том, что делает веб-фреймворк Express особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложений Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Настройка среды разработки Node (Express)</a></dt>
- <dd>
- <div style="padding-bottom: 30px;">Теперь, когда вы знаете, что такое Express, мы покажем вам, как настроить и протестировать среду разработки Node/Express в Windows, Linux (Ubuntu) и Mac OS X. Независимо от того, какую популярную операционную систему вы используете, эта статья даст вам то, что вам нужно, чтобы начать разработку приложений Express.</div>
- </dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Учебник Express: сайт LocalLibrary</a></dt>
- <dd>
- <div style="padding-bottom: 30px;">Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор веб-сайта «локальной библиотеки», над которым мы будем работать и развивать в последующих статьях.</div>
- </dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Учебник Express часть 2: Создание скелета веб-сайта</a></dt>
- <dd>
- <div style="padding-bottom: 30px;">В этой статье показано, как вы можете создать «скелет» веб-сайта, который затем можно будет заполнить с помощью маршрутов сайта, шаблонов/представлений и баз данных.</div>
- </dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Учебник Express часть 3: Использование базы данных (с помощью Mongoose)</a></dt>
- <dd>В этой статье кратко представлены базы данных для Node/Express. Затем показывается, как мы можем использовать <a href="http://mongoosejs.com/">Mongoose</a> для обеспечения доступа к баз данных для сайта <em>LocalLibrary</em>. В уроке объясняется, как объявляются объектная схема и модели, основные типы полей и базовая валидация. Также кратко показаны некоторые из основных способов доступа к данным модели.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Учебник Express часть 4: Маршруты и контроллеры</a></dt>
- <dd>В этом уроке мы создадим маршруты (код обработки URL) с "фиктивным" обработчиком функций для всех конечных точек ресурсов, которые нам в конечном итоге понадобятся для сайта<em> LocalLibrary</em>. По завершении мы будем иметь модульную структуру нашего кода обработки маршрута, который мы можем расширить с помощью функций реального обработчика в следующих статьях. Мы также будем очень хорошо понимать, как создавать модульные маршруты, используя Express.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Учебник Express часть 5: Отображение данных библиотеки</a></dt>
- <dd>Теперь мы готовы добавить страницы, на которых будут отображаться книги веб-сайта <em>LocalLibrary</em> и другие данные. Страницы будут включать главную страницу, которая показывает сколько записей определённого типа мы имеем и отдельную страницу для детального просмотра записи. По пути мы получим практический опыт в получении записей из баз данных и использовании шаблонов.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Учебник Express часть 6: Работы с формами</a></dt>
- <dd>В этой части мы покажем вам, как работать с <a href="/en-US/docs/Web/Guide/HTML/Forms">HTML формами</a> в Express, используя Pug, и в частности, как создавать, обновлять и удалять документы из базы данных.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Учебник Express часть 7: Выкладка в production</a></dt>
- <dd>Теперь когда вы создали восхитительный сайт <em>LocalLibrary</em>, вы захотите установить его на общедоступном сервере, чтобы он мог дать доступ персоналу библиотеки и пользователям в Интернет. В этой статье представлен обзор того, как вы можете найти хост для развёртывания вашего сайта и что вам нужно сделать, чтобы подготовить ваш сайт к публикации.</dd>
-</dl>
+## Смотрите также
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+- [Установка LocalLibrary на PWS/Cloud Foundry](/ru/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry)
+  - : В этой статье представлена практическая демонстрация того, как установить _LocalLibrary_ на [облаке Pivotal Web Services PaaS](http://run.pivotal.io) — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry определённо стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.
 
-<dl>
- <dt><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Installing_on_PWS_Cloud_Foundry">Установка LocalLibrary на PWS/Cloud Foundry</a></dt>
- <dd>В этой статье представлена практическая демонстрация того, как установить <em>LocalLibrary</em> на <a href="http://run.pivotal.io">облаке Pivotal Web Services PaaS</a> — это полнофункциональная альтернатива с открытым исходным кодом для Heroku, облачного сервиса PaaS  используемого в части 7 этого учебника, представленного выше. PWS/Cloud Foundry определённо стоит попробовать, если вы ищете альтернативу Heroku (или другому PaaS облачному сервису), или просто хотите попробовать что-то другое.</dd>
-</dl>
+## Изучите другие учебники
 
-<h2 id="Изучите_другие_учебники">Изучите другие учебники</h2>
+Это все статьи учебника (на данный момент). Если вы хотите продолжить обучение, есть другие интересные темы:
 
-<div>
-<p>Это все статьи учебника (на данный момент). Если вы хотите продолжить обучение, есть другие интересные темы:</p>
+- Использование сессий
+- Авторизация пользователей
+- Авторизация пользователей и уровни доступа
+- Тестирование веб приложений Express
+- Веб безопасность для веб приложений Express.
 
-<ul>
- <li>Использование сессий</li>
- <li>Авторизация пользователей</li>
- <li>Авторизация пользователей и уровни доступа</li>
- <li>Тестирование веб приложений Express</li>
- <li>Веб безопасность для веб приложений Express.</li>
-</ul>
-
-<p>И, конечно, было бы неплохо создать какой-либо проверочный тест знаний!</p>
-</div>
+И, конечно, было бы неплохо создать какой-либо проверочный тест знаний!
diff --git a/files/ru/learn/server-side/express_nodejs/introduction/index.md b/files/ru/learn/server-side/express_nodejs/introduction/index.md
index 3f45e5431f428f..c8bffc540cfe90 100644
--- a/files/ru/learn/server-side/express_nodejs/introduction/index.md
+++ b/files/ru/learn/server-side/express_nodejs/introduction/index.md
@@ -3,192 +3,184 @@ title: Express/Node introduction
 slug: Learn/Server-side/Express_Nodejs/Introduction
 translation_of: Learn/Server-side/Express_Nodejs/Introduction
 ---
-<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
-
-<p class="summary">В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).</p>
-
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные знания:</th>
-   <td>Базовая компьютерная грамотность. Общее понимание <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/First_steps">серверного программирования веб-сайтов </a>и, в частности, механики <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">клиент-серверного взаимодействия на веб-сайтах</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомить вас с фреймворком Express и как он вписывается в среду  Node, какие функции он предоставляет, и основные строительные блоки приложения Express.</td>
-  </tr>
- </tbody>
-</table>
+{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
 
-<h2 id="Что_такое_Express_и_Node">Что такое Express и Node?</h2>
+В этой первой статье по Express мы ответим на вопросы "Что такое Node?" и "Что такое Express?", и сделаем обзор того, что делает веб-фреймворк Express таким особенным. Мы расскажем об основных функциях и покажем вам некоторые из основных строительных блоков приложения Express (хотя на данный момент у вас ещё нет среды разработки, в которой можно её протестировать).
 
-<p><a href="https://nodejs.org/">Node</a> (или более формально<em> Node.js</em>) - кросплатформенная среда исполнения с открытым исходным кодом, которая позволяет разработчикам создавать всевозможные серверные инструменты и приложения  используя язык <a href="/en-US/docs/Glossary/JavaScript">JavaScript</a>. Среда исполнения предназначена для использования вне контекста браузера (т.е. выполняется непосредственно на компьютере или на серверной ОС). Таким образом, среда исключает API-интерфейсы JavaScript для браузера и добавляет поддержку более традиционных OS API-интерфейсов, включая библиотеки HTTP и файловых систем.</p>
+| Предварительные знания: | Базовая компьютерная грамотность. Общее понимание [серверного программирования веб-сайтов ](/ru/docs/Learn/Server-side/First_steps)и, в частности, механики [клиент-серверного взаимодействия на веб-сайтах](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview). |
+| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                   | Ознакомить вас с фреймворком Express и как он вписывается в среду Node, какие функции он предоставляет, и основные строительные блоки приложения Express.                                                                                                                    |
 
-<p>С точки зрения веб-серверной разработки Node имеет ряд преимуществ:</p>
+## Что такое Express и Node?
 
-<ul>
- <li>Отличная производительность! Node был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространёнными проблемами веб-разработки (например, веб-приложения реального времени).</li>
- <li>Код написан на «обычном старом JavaScript», а это означает, что затрачивается меньше времени при написании кода для браузера и веб-сервера связанное с  «переключением технологий» между языками.</li>
- <li>JavaScript является относительно новым языком программирования и имеет преимущества от улучшения дизайна языка по сравнению с другими традиционными языками для веб-серверов (например, Python, PHP, и т.д.). Многие другие новые и популярные языки компилируются/конвертируются в JavaScript, поэтому вы можете также использовать CoffeeScript, ClosureScript, Scala, LiveScript, etc.</li>
- <li>Менеджер пакетов Node (NPM) обеспечивает доступ к сотням тысяч многоразовых пакетов. Он также имеет лучшее в своём классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.</li>
- <li>Он портативен, имеет версии для  Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, и NonStop OS. Кроме того, он имеет хорошую поддержку среди многих хостинг-провайдеров, которые часто предоставляют конкретную инфраструктуру и документацию для размещения сайтов, работающих на Node.</li>
- <li>Он имеет очень активную стороннюю экосистему и сообщество разработчиков, которые всегда готовы помочь.</li>
-</ul>
+[Node](https://nodejs.org/) (или более формально _Node.js_) - кросплатформенная среда исполнения с открытым исходным кодом, которая позволяет разработчикам создавать всевозможные серверные инструменты и приложения используя язык [JavaScript](/ru/docs/Glossary/JavaScript). Среда исполнения предназначена для использования вне контекста браузера (т.е. выполняется непосредственно на компьютере или на серверной ОС). Таким образом, среда исключает API-интерфейсы JavaScript для браузера и добавляет поддержку более традиционных OS API-интерфейсов, включая библиотеки HTTP и файловых систем.
 
-<p>Вы можете использовать Node.js для создания простого веб сервера используя пакет Node HTTP. </p>
+С точки зрения веб-серверной разработки Node имеет ряд преимуществ:
 
-<h3 id="Hello_Node.js">Hello Node.js</h3>
+- Отличная производительность! Node был разработан для оптимизации пропускной способности и масштабируемости в веб-приложениях и очень хорошо справляется со многими распространёнными проблемами веб-разработки (например, веб-приложения реального времени).
+- Код написан на «обычном старом JavaScript», а это означает, что затрачивается меньше времени при написании кода для браузера и веб-сервера связанное с «переключением технологий» между языками.
+- JavaScript является относительно новым языком программирования и имеет преимущества от улучшения дизайна языка по сравнению с другими традиционными языками для веб-серверов (например, Python, PHP, и т.д.). Многие другие новые и популярные языки компилируются/конвертируются в JavaScript, поэтому вы можете также использовать CoffeeScript, ClosureScript, Scala, LiveScript, etc.
+- Менеджер пакетов Node (NPM) обеспечивает доступ к сотням тысяч многоразовых пакетов. Он также имеет лучшее в своём классе разрешение зависимостей и может также использоваться для автоматизации большинства инструментов построения.
+- Он портативен, имеет версии для Microsoft Windows, OS X, Linux, Solaris, FreeBSD, OpenBSD, WebOS, и NonStop OS. Кроме того, он имеет хорошую поддержку среди многих хостинг-провайдеров, которые часто предоставляют конкретную инфраструктуру и документацию для размещения сайтов, работающих на Node.
+- Он имеет очень активную стороннюю экосистему и сообщество разработчиков, которые всегда готовы помочь.
 
-<p>Следующий пример создаёт веб сервер который обрабатывает любой HTTP запрос на URL <code>http://127.0.0.1:8000/</code> — когда запрос будет получен, скрипт ответит строкой "Hello World". Если вы уже установили node, можете, следуя шагам инструкции попробовать пример:</p>
+Вы можете использовать Node.js для создания простого веб сервера используя пакет Node HTTP.
 
-<ol>
- <li>Откройте терминал (в Windows окно командной строки)</li>
- <li><p>Создайте папку, куда вы хотите сохранить программу, к примеру <code>test-node</code> и перейдите в неё с помощью следующей команды:</p>
- <pre><code>cd test-node</code></pre></li>
- <li><p>Используя любимый текстовый редактор, создайте файл <code>hello.js</code> и вставьте в него код:</p>
-  <pre class="brush: js">// Загружаем HTTP модуль
-    const http = require("http");
-    
-    const hostname = "127.0.0.1";
-    const port = 8000;
-    
-    // Создаём HTTP-сервер
-    const server = http.createServer((req, res) =&gt; {
-    
-       // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type
-       res.writeHead(200, {'Content-Type': 'text/plain'});
-    
-       // Отсылаем тело ответа "Hello World"
-       res.end('Hello World\n');
-    });
-    
-    // Выводим лог как только сервер будет запущен
-    server.listen(port, hostname, () =&gt; {
-       console.log(`Server running at http://${hostname}:${port}/`);
-    })
-    </pre>
-</li>
- <li>Сохраните файл в папку, созданную выше.</li>
- <li>Вернитесь в терминал и выполните следующую команду:</li>
-</ol>
+### Hello Node.js
 
-<pre><code>node hello.js</code></pre>
+Следующий пример создаёт веб сервер который обрабатывает любой HTTP запрос на URL `http://127.0.0.1:8000/` — когда запрос будет получен, скрипт ответит строкой "Hello World". Если вы уже установили node, можете, следуя шагам инструкции попробовать пример:
 
-<p>В итоге, перейдите по ссылке <code>http://localhost:8000</code> в вашем браузере; вы должны увидеть текст "<strong>Hello World</strong>" в верху слева на чистой странице.</p>
+1.  Откройте терминал (в Windows окно командной строки)
+2.  Создайте папку, куда вы хотите сохранить программу, к примеру `test-node` и перейдите в неё с помощью следующей команды:
 
-<h2 id="Веб_фреймворк">Веб фреймворк</h2>
+    ```
+    cd test-node
+    ```
 
-<p>Другие общие для веб-программирования задачи не поддерживаются на прямую Node. Если вы хотите добавить специфичную поддержку различных HTTP методов (например <code>GET</code>, <code>POST</code>, <code>DELETE</code>, и т.д.) по разному для разных URL путей ("routes"), отдачу статических файлов, или использовать шаблоны для создания динамических ответов, вам нужно написать код самим, или можете отказаться от изобретения колеса и использовать фреймворк!</p>
+3.  Используя любимый текстовый редактор, создайте файл `hello.js` и вставьте в него код:
 
-<h2 id="Введение_в_Express">Введение в Express</h2>
+    ```js
+    // Загружаем HTTP модуль
+        const http = require("http");
 
-<p><a href="https://expressjs.com/">Express</a> - самый популярный веб-фреймворк для <em>Node</em>. Он является базовой библиотекой для ряда других популярных <a href="https://expressjs.com/en/resources/frameworks.html">веб-фреймворков Node</a>. Он предоставляет следующие механизмы:</p>
+        const hostname = "127.0.0.1";
+        const port = 8000;
 
-<ul>
- <li>Написание обработчиков для запросов с различными HTTP-методами в разных URL-адресах (маршрутах).</li>
- <li>Интеграцию с механизмами рендеринга «view», для генерации ответов, вставляя данные в шаблоны.</li>
- <li>Установка общих параметров веб-приложения, такие как порт для подключения, и расположение шаблонов, которые используются для отображения ответа.</li>
- <li>«промежуточное ПО» для дополнительной обработки запроса в любой момент в конвейере обработки запросов.</li>
-</ul>
+        // Создаём HTTP-сервер
+        const server = http.createServer((req, res) => {
 
-<p>В то время как сам express довольно минималистичный, разработчики создали совместимые пакеты промежуточного программного обеспечения для решения практически любой проблемы с веб-разработкой. Существуют библиотеки для работы с куки-файлами, сеансами, входами пользователей, параметрами URL, данными POST, заголовками безопасности и многими другими. Вы можете найти список пакетов промежуточного программного обеспечения, поддерживаемых командой Express в <a href="http://expressjs.com/en/resources/middleware.html">Express Middleware</a> (наряду со списком некоторых популярных пакетов сторонних производителей) .</p>
+           // Устанавливаем HTTP-заголовок ответа с HTTP статусом и Content type
+           res.writeHead(200, {'Content-Type': 'text/plain'});
 
-<div class="note">
-<p><strong>Примечание:</strong> Гибкость это палка о двух концах. Существуют пакеты промежуточного программного обеспечения (middleware) для решения практически любых проблем или для удовлетворения любых ваших требований, но правильный выбор подходящих пакетов иногда может быть проблемой. Также нет «правильного пути» для структурирования приложения, и многие примеры, которые вы можете найти в Интернете, не являются оптимальными или лишь показывают небольшую часть того, что вам нужно сделать для разработки веб-приложения.</p>
-</div>
+           // Отсылаем тело ответа "Hello World"
+           res.end('Hello World\n');
+        });
 
-<h2 id="Откуда_это_все_взялось">Откуда это все взялось?</h2>
+        // Выводим лог как только сервер будет запущен
+        server.listen(port, hostname, () => {
+           console.log(`Server running at http://${hostname}:${port}/`);
+        })
 
-<p>Node первоначально был выпущен только под Linux в 2009. Менеджер пакетов NPM был выпущен в 2010, а поддержка Windows была добавлена в 2012. Текущая LTS-версия Node v12.16.1 , в то время как последний выпуск Node версии 13.11.0. Это короткий экскурс в историю; обратитесь к <a href="https://en.wikipedia.org/wiki/Node.js#History">Википедии</a>, если вы хотите узнать больше).</p>
+    ```
 
-<p>Express первоначально был выпущен в ноябре 2010 и текущая версия API 4.17.1 вы можете отследить <a href="https://expressjs.com/en/changelog/4x.html">изменения</a> и текущий релиз, и <a href="https://github.com/expressjs/express/blob/master/History.md">GitHub</a> для более детальной информации о релизах.</p>
+4.  Сохраните файл в папку, созданную выше.
+5.  Вернитесь в терминал и выполните следующую команду:
 
-<h2 id="Насколько_популярен_NodeExpress">Насколько популярен Node/Express?</h2>
+```
+node hello.js
+```
 
-<p>Популярность веб-фреймворка важна, поскольку она является индикатором того, будет ли она продолжаться, и какие ресурсы, вероятно, будут доступны с точки зрения документации, дополнительных библиотек и технической поддержки.</p>
+В итоге, перейдите по ссылке `http://localhost:8000` в вашем браузере; вы должны увидеть текст "**Hello World**" в верху слева на чистой странице.
 
-<p>Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?</p>
+## Веб фреймворк
 
-<p>Как только мы посмотрим на список <a href="https://expressjs.com/en/resources/companies-using-express.html">широкоизвестных компаний</a> пользующихся Express, количество разработчиков участвующих в разработке Express, и громадному числу людей, которые занимаются поддержкой Express, то мы с уверенностью скажем -  <em>Express</em> поистине популярный фреймворк!</p>
+Другие общие для веб-программирования задачи не поддерживаются на прямую Node. Если вы хотите добавить специфичную поддержку различных HTTP методов (например `GET`, `POST`, `DELETE`, и т.д.) по разному для разных URL путей ("routes"), отдачу статических файлов, или использовать шаблоны для создания динамических ответов, вам нужно написать код самим, или можете отказаться от изобретения колеса и использовать фреймворк!
 
-<h2 id="Является_ли_Express_ограничивающим">Является ли Express ограничивающим?</h2>
+## Введение в Express
 
-<p>Web-фреймворки часто принято делить на "ограничивающие" и "не ограничивающие".</p>
+[Express](https://expressjs.com/) - самый популярный веб-фреймворк для _Node_. Он является базовой библиотекой для ряда других популярных [веб-фреймворков Node](https://expressjs.com/en/resources/frameworks.html). Он предоставляет следующие механизмы:
 
-<p>Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку <em>в конкретной области</em>  (решение задач определённого типа), поскольку должный подход  к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения. </p>
+- Написание обработчиков для запросов с различными HTTP-методами в разных URL-адресах (маршрутах).
+- Интеграцию с механизмами рендеринга «view», для генерации ответов, вставляя данные в шаблоны.
+- Установка общих параметров веб-приложения, такие как порт для подключения, и расположение шаблонов, которые используются для отображения ответа.
+- «промежуточное ПО» для дополнительной обработки запроса в любой момент в конвейере обработки запросов.
 
-<p>Напротив, не ограничивающие фреймворки имеют гораздо меньше ограничений для связи компонентов, что бы достичь цели или ограничений в выборе используемых компонентов. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, но платой за это будет то, что вы самостоятельно должны найти такие компоненты.</p>
+В то время как сам express довольно минималистичный, разработчики создали совместимые пакеты промежуточного программного обеспечения для решения практически любой проблемы с веб-разработкой. Существуют библиотеки для работы с куки-файлами, сеансами, входами пользователей, параметрами URL, данными POST, заголовками безопасности и многими другими. Вы можете найти список пакетов промежуточного программного обеспечения, поддерживаемых командой Express в [Express Middleware](http://expressjs.com/en/resources/middleware.html) (наряду со списком некоторых популярных пакетов сторонних производителей) .
 
-<p>Express не ограничивающий. Вы можете вставить в цепочку обработки (middleware) запросов практически любое совместимые промежуточные компоненты, которые вам нравятся. Вы можете структурировать приложение в одном файле или в нескольких, использую любую структуру каталогов. Иногда вы можете чувствовать, что у вас слишком много вариантов!</p>
+> **Примечание:** Гибкость это палка о двух концах. Существуют пакеты промежуточного программного обеспечения (middleware) для решения практически любых проблем или для удовлетворения любых ваших требований, но правильный выбор подходящих пакетов иногда может быть проблемой. Также нет «правильного пути» для структурирования приложения, и многие примеры, которые вы можете найти в Интернете, не являются оптимальными или лишь показывают небольшую часть того, что вам нужно сделать для разработки веб-приложения.
 
-<h2 id="Как_выглядит_код_Express">Как выглядит код Express?</h2>
+## Откуда это все взялось?
 
-<p>В традиционных динамических веб-сайтах, веб-приложение ожидает HTTP-запроса от веб-браузера (или другого клиента). Когда запрос получен, приложение определяет, какое действие необходимо выполнить на основе URL шаблона и, возможно, связанной информации, содержащейся в данных <code>POST</code> или <code>GET</code>. В зависимости от того, что требуется, Express может затем читать или записывать данные из/в базы данных или выполнять другие задачи, в соответствии с полученным запросом. Затем приложение возвращает ответ в веб-браузер, зачастую динамически создавая HTML страницу для отображения браузером, вставляя извлечённые данные в заполнители HTML шаблона.</p>
+Node первоначально был выпущен только под Linux в 2009. Менеджер пакетов NPM был выпущен в 2010, а поддержка Windows была добавлена в 2012. Текущая LTS-версия Node v12.16.1 , в то время как последний выпуск Node версии 13.11.0. Это короткий экскурс в историю; обратитесь к [Википедии](https://en.wikipedia.org/wiki/Node.js#History), если вы хотите узнать больше).
 
-<p>Express предоставляет методы позволяющие указать, какая функция вызывается для конкретного HTTP запроса (<code>GET</code>, <code>POST</code>, <code>SET</code>, etc.), и URL шаблон ("Route"), а также методы позволяющие указать, какой механизм шаблона ("view") используется, где находятся шаблоны файлов и какой шаблон использовать для вывода ответа. Вы можете использовать Express middleware для добавления поддержки файлов cookies, сеансов, и пользователей, получения <code>POST</code>/<code>GET</code> параметров, и т.д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет поведение, связанное с базой данных).</p>
+Express первоначально был выпущен в ноябре 2010 и текущая версия API 4.17.1 вы можете отследить [изменения](https://expressjs.com/en/changelog/4x.html) и текущий релиз, и [GitHub](https://github.com/expressjs/express/blob/master/History.md) для более детальной информации о релизах.
 
-<p>В следующих разделах объясняются некоторые общие моменты, которые вы увидите при работе с кодом <em>Express</em> and <em>Node</em>.</p>
+## Насколько популярен Node/Express?
 
-<h3 id="Helloworld_Express">Helloworld Express</h3>
+Популярность веб-фреймворка важна, поскольку она является индикатором того, будет ли она продолжаться, и какие ресурсы, вероятно, будут доступны с точки зрения документации, дополнительных библиотек и технической поддержки.
 
-<p>Сначала давайте рассмотрим стандартный пример Express Hello World (мы обсудим каждую часть этого ниже и в следующих разделах).</p>
+Не существует какого-либо доступного и точного измерения популярности серверных фреймворков (хотя сайты, такие как Hot Frameworks, пытаются оценить популярность, используя такие механизмы, как подсчёт количества проектов на GitHub и вопросов на StackOverflow для каждой платформы). Лучший вопрос заключается в том, достаточно ли популярны Node и Express, чтобы избежать проблем с непопулярными платформами. Они продолжают развиваться? Можете ли вы получить помощь, если вам это нужно? Есть ли у вас возможность получить оплачиваемую работу, если вы изучаете Express?
 
-<div class="note">
-<p>Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js. отражения).</p>
-</div>
+Как только мы посмотрим на список [широкоизвестных компаний](https://expressjs.com/en/resources/companies-using-express.html) пользующихся Express, количество разработчиков участвующих в разработке Express, и громадному числу людей, которые занимаются поддержкой Express, то мы с уверенностью скажем - _Express_ поистине популярный фреймворк!
 
-<pre class="brush: js">var express = require('express');
+## Является ли Express ограничивающим?
+
+Web-фреймворки часто принято делить на "ограничивающие" и "не ограничивающие".
+
+Ограничивающими фреймворки считаются фреймворки, которые следуют "должным" ограничениям при выполнении отдельных задач. Довольно часто они ориентированы на ускоренную разработку _в конкретной области_ (решение задач определённого типа), поскольку должный подход к произвольно выбранной задаче бывает не прост для понимания и плохо документирован. При этом они лишаются гибкости при решении задач выходящих за сферу их обычного применения, а так же проявляют тенденцию к ограничению выбора компонентов и подходов своего применения.
+
+Напротив, не ограничивающие фреймворки имеют гораздо меньше ограничений для связи компонентов, что бы достичь цели или ограничений в выборе используемых компонентов. Они облегчают разработчикам использование наиболее подходящих инструментов для выполнения конкретной задачи, но платой за это будет то, что вы самостоятельно должны найти такие компоненты.
+
+Express не ограничивающий. Вы можете вставить в цепочку обработки (middleware) запросов практически любое совместимые промежуточные компоненты, которые вам нравятся. Вы можете структурировать приложение в одном файле или в нескольких, использую любую структуру каталогов. Иногда вы можете чувствовать, что у вас слишком много вариантов!
+
+## Как выглядит код Express?
+
+В традиционных динамических веб-сайтах, веб-приложение ожидает HTTP-запроса от веб-браузера (или другого клиента). Когда запрос получен, приложение определяет, какое действие необходимо выполнить на основе URL шаблона и, возможно, связанной информации, содержащейся в данных `POST` или `GET`. В зависимости от того, что требуется, Express может затем читать или записывать данные из/в базы данных или выполнять другие задачи, в соответствии с полученным запросом. Затем приложение возвращает ответ в веб-браузер, зачастую динамически создавая HTML страницу для отображения браузером, вставляя извлечённые данные в заполнители HTML шаблона.
+
+Express предоставляет методы позволяющие указать, какая функция вызывается для конкретного HTTP запроса (`GET`, `POST`, `SET`, etc.), и URL шаблон ("Route"), а также методы позволяющие указать, какой механизм шаблона ("view") используется, где находятся шаблоны файлов и какой шаблон использовать для вывода ответа. Вы можете использовать Express middleware для добавления поддержки файлов cookies, сеансов, и пользователей, получения `POST`/`GET` параметров, и т.д. Вы можете использовать любой механизм базы данных, поддерживаемый Node (Express не определяет поведение, связанное с базой данных).
+
+В следующих разделах объясняются некоторые общие моменты, которые вы увидите при работе с кодом _Express_ and _Node_.
+
+### Helloworld Express
+
+Сначала давайте рассмотрим стандартный пример Express Hello World (мы обсудим каждую часть этого ниже и в следующих разделах).
+
+> **Примечание:** Совет: Если у вас уже установлены Node и Express (или если вы устанавливаете их, как показано в следующей статье), вы можете сохранить этот код в файле с именем app.js и запустить его в командной строке, вызвав узел app.js. отражения).
+
+```js
+var express = require('express');
 var app = express();
 
-<strong>app.get('/', function(req, res) {
+app.get('/', function(req, res) {
   res.send('Hello World!');
-});</strong>
+});
 
 app.listen(3000, function() {
   console.log('Example app listening on port 3000!');
 });
-</pre>
+```
 
-<p>Первые две строки требуют () (импорт) модуля Express и создания приложения Express. Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру). , и т.д.)</p>
+Первые две строки требуют () (импорт) модуля Express и создания приложения Express. Этот объект, который традиционно называется app, имеет методы для маршрутизации HTTP-запросов, настройки промежуточного программного обеспечения, рендеринга представлений HTML, регистрации механизма шаблонов и изменения параметров приложения, которые управляют поведением приложения (например, режим среды, чувствительны ли определения маршрута к регистру). , и т.д.)
 
-<p>Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»</p>
+Средняя часть кода (три строки, начинающиеся с app.get) показывает определение маршрута. Метод app.get () указывает колбэк-функцию, которая будет вызываться всякий раз, когда есть HTTP-запрос GET с путём ('/') относительно корня сайта. Колбэк-функция принимает запрос и объект ответа в качестве аргументов и просто вызывает send () для ответа, чтобы вернуть строку «Hello World!»
 
-<p>Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.</p>
+Последний блок запускает сервер через порт «3000» и печатает комментарий журнала в консоль. Когда сервер работает, вы можете перейти к localhost: 3000 в вашем браузере, чтобы увидеть возвращённый пример ответа.
 
-<h3 id="Импорт_и_создание_модулей">Импорт и создание модулей</h3>
+### Импорт и создание модулей
 
-<p>Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node. Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.</p>
+Модуль - это библиотека / файл JavaScript, который вы можете импортировать в другой код с помощью функции require () Node. Express сам по себе является модулем, как и промежуточное программное обеспечение и библиотеки баз данных, которые мы используем в наших приложениях Express.
 
-<p>Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.</p>
+Приведённый ниже код показывает, как мы импортируем модуль по имени, используя в качестве примера платформу Express. Сначала мы вызываем функцию require (), определяя имя модуля в виде строки («express») и вызывая возвращённый объект для создания приложения Express. Затем мы можем получить доступ к свойствам и функциям объекта приложения.
 
-<pre class="brush: js">var express = require('express');
+```js
+var express = require('express');
 var app = express();
-</pre>
+```
 
-<p>Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.</p>
+Вы также можете создавать свои собственные модули, которые можно импортировать таким же образом.
 
-<div class="note">
-<p>Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.</p>
-</div>
+> **Примечание:** Совет: вы захотите создать свои собственные модули, потому что это позволяет вам организовать ваш код в управляемые части - монолитное однофайловое приложение трудно понять и поддерживать. Использование модулей также помогает вам управлять пространством имён, поскольку при использовании модуля импортируются только те переменные, которые вы явно экспортировали.
 
-<p>Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта. Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():</p>
+Чтобы сделать объекты доступными вне модуля, вам просто нужно назначить их объекту экспорта. Например, модуль square.js ниже представляет собой файл, который экспортирует методы area () и perimeter ():
 
-<pre class="brush: js">exports.area = function(width) { return width * width; };
+```js
+exports.area = function(width) { return width * width; };
 exports.perimeter = function(width) { return 4 * width; };
-</pre>
+```
 
-<p>Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:</p>
+Мы можем импортировать этот модуль, используя require (), а затем вызвать экспортированные методы, как показано:
 
-<pre class="brush: js">var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
-console.log('The area of a square with a width of 4 is ' + square.area(4));</pre>
+```js
+var square = require('./square'); // Here we require() the name of the file without the (optional) .js file extension
+console.log('The area of a square with a width of 4 is ' + square.area(4));
+```
 
-<div class="note">
-<p>Примечание. Вы также можете указать абсолютный путь к модулю (или имя, как мы делали изначально).</p>
-</div>
+> **Примечание:** Примечание. Вы также можете указать абсолютный путь к модулю (или имя, как мы делали изначально).
 
-<p>Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией) :</p>
+Если вы хотите экспортировать полный объект в одном назначении, а не создавать его по одному свойству за раз, назначьте его для module.exports, как показано ниже (вы также можете сделать это, чтобы сделать корень объекта экспорта конструктором или другой функцией) :
 
-<pre class="brush: js">module.exports = {
+```js
+module.exports = {
   area: function(width) {
     return width * width;
   },
@@ -197,67 +189,67 @@ console.log('The area of a square with a width of 4 is ' + square.area(4));</pre
     return 4 * width;
   }
 };
-</pre>
+```
 
-<p>Для получения дополнительной информации о модулях см. <a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs).</p>
+Для получения дополнительной информации о модулях см. [Modules](https://nodejs.org/api/modules.html#modules_modules) (Node API docs).
 
-<h3 id="Использование_асинхронных_API">Использование асинхронных API</h3>
+### Использование асинхронных API
 
-<p>Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время. Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции. Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).</p>
+Код JavaScript часто использует асинхронные, а не синхронные API для операций, выполнение которых может занять некоторое время. Синхронный API - это тот, в котором каждая операция должна завершиться до начала следующей операции. Например, следующие функции журнала являются синхронными и выводят текст на консоль по порядку (первый, второй).
 
-<pre class="brush: js">console.log('First');
+```js
+console.log('First');
 console.log('Second');
-</pre>
+```
 
-<p>В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.</p>
+В отличие от этого, асинхронный API - это тот, в котором API начнёт операцию и сразу же вернётся (до завершения операции). После завершения операции API будет использовать некоторый механизм для выполнения дополнительных операций. Например, приведённый ниже код выведет «Second, First», потому что хотя метод setTimeout () вызывается первым и возвращается немедленно, операция не завершается в течение нескольких секунд.
 
-<pre class="brush: js">setTimeout(function() {
+```js
+setTimeout(function() {
    console.log('First');
    }, 3000);
 console.log('Second');
-</pre>
+```
 
-<p>Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.</p>
+Использование неблокирующих асинхронных API-интерфейсов ещё более важно в Node, чем в браузере, поскольку Node - это однопоточная среда выполнения, управляемая событиями. «Однопоточный» означает, что все запросы к серверу выполняются в одном потоке (а не порождаются в отдельных процессах). Эта модель чрезвычайно эффективна с точки зрения скорости и ресурсов сервера, но это означает, что если любая из ваших функций вызывает синхронные методы, выполнение которых занимает много времени, они будут блокировать не только текущий запрос, но и любой другой запрос, обрабатываемый ваше веб-приложение.
 
-<p>Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.</p>
+Есть несколько способов, которыми асинхронный API уведомляет ваше приложение о том, что оно завершено. Наиболее распространённый способ - зарегистрировать колбэк-функцию при вызове асинхронного API, который будет вызываться после завершения операции. Это подход, использованный выше.
 
-<div class="note">
-<p>Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков. Эта проблема широко известна как «ад колбэков». Эту проблему можно решить с помощью хороших методов кодирования (см. Http://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.</p>
-</div>
+> **Примечание:** Совет: Использование колбэков может быть довольно «грязным», если у вас есть последовательность зависимых асинхронных операций, которые должны выполняться по порядку, потому что это приводит к нескольким уровням вложенных колбэков. Эта проблема широко известна как «ад колбэков». Эту проблему можно решить с помощью хороших методов кодирования (см. Http\://callbackhell.com/), использования такого модуля, как async, или даже перехода к функциям ES6, таким как Promises.
 
-<div class="note">
-<p>Примечание. Общим соглашением для Node и Express является использование колбэков с ошибками. В этом соглашении первое значение в ваших колбэк-функциях является значением ошибки, в то время как последующие аргументы содержат данные об успехе. В этом блоге есть хорошее объяснение того, почему этот подход полезен: путь Node.js - понимание колбэков с ошибками (fredkschott.com).</p>
-</div>
+> **Примечание:** Примечание. Общим соглашением для Node и Express является использование колбэков с ошибками. В этом соглашении первое значение в ваших колбэк-функциях является значением ошибки, в то время как последующие аргументы содержат данные об успехе. В этом блоге есть хорошее объяснение того, почему этот подход полезен: путь Node.js - понимание колбэков с ошибками (fredkschott.com).
 
-<h3 id="Создание_обработчиков_маршрута">Создание обработчиков маршрута</h3>
+### Создание обработчиков маршрута
 
-<p>В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').</p>
+В нашем примере Hello World Express (см. Выше) мы определили функцию обработчика маршрута (колбэка) для HTTP-запросов GET к корню сайта ('/').
 
-<pre class="brush: js">app.<strong>get</strong>('/', function(req, res) {
+```js
+app.get('/', function(req, res) {
   res.send('Hello World!');
 });
-</pre>
+```
 
-<p>Колбэк-функция принимает запрос и объект ответа в качестве аргументов. В этом случае метод просто вызывает send () в ответе, чтобы вернуть строку «Hello World!» Существует ряд других методов ответа для завершения цикла запрос / ответ, например, вы можете вызвать res.json () для отправки ответа JSON или res.sendFile () для отправки файла.</p>
+Колбэк-функция принимает запрос и объект ответа в качестве аргументов. В этом случае метод просто вызывает send () в ответе, чтобы вернуть строку «Hello World!» Существует ряд других методов ответа для завершения цикла запрос / ответ, например, вы можете вызвать res.json () для отправки ответа JSON или res.sendFile () для отправки файла.
 
-<div class="note">
-<p>Совет по JavaScript: вы можете использовать любые имена аргументов, которые вам нравятся, в колбэк-функциях; при вызове колбэка первый аргумент всегда будет запросом, а второй всегда будет ответом. Имеет смысл назвать их так, чтобы вы могли идентифицировать объект, с которым работаете, в теле колбэка.</p>
-</div>
+> **Примечание:** Совет по JavaScript: вы можете использовать любые имена аргументов, которые вам нравятся, в колбэк-функциях; при вызове колбэка первый аргумент всегда будет запросом, а второй всегда будет ответом. Имеет смысл назвать их так, чтобы вы могли идентифицировать объект, с которым работаете, в теле колбэка.
 
-<p>Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy ( ), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge ( ), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().</p>
+Объект приложения Express также предоставляет методы для определения обработчиков маршрутов для всех других HTTP-глаголов, которые в основном используются одинаково: post (), put (), delete (), options (), trace (), copy ( ), lock (), mkcol (), move (), purge (), propfind (), proppatch (), unlock (), report (), mkactivity (), checkout (), merge ( ), m-search (), notify (), subscribe (), unsubscribe (), patch (), search () и connect ().
 
-<p>Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).</p>
+Существует специальный метод маршрутизации app.all (), который будет вызываться в ответ на любой метод HTTP. Это используется для загрузки функций промежуточного программного обеспечения по определённому пути для всех методов запроса. В следующем примере (из документации Express) показан обработчик, который будет выполняться для запросов к / secret независимо от используемого глагола HTTP (при условии, что он поддерживается модулем http).
 
-<pre class="brush: js">app.all('/secret', function(req, res, next) {
+```js
+app.all('/secret', function(req, res, next) {
   console.log('Accessing the secret section ...');
   next(); // pass control to the next handler
-});</pre>
+});
+```
 
-<p>Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).</p>
+Маршруты позволяют сопоставлять определённые шаблоны символов в URL-адресе, извлекать некоторые значения из URL-адреса и передавать их в качестве параметров обработчику маршрута (в качестве атрибутов объекта запроса, передаваемого в качестве параметра).
 
-<p>Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:</p>
+Часто полезно группировать обработчики маршрутов для определённой части сайта и получать к ним доступ с помощью общего префикса маршрута (например, сайт с вики может иметь все связанные с вики маршруты в одном файле и иметь к ним доступ с префиксом маршрута из / вики /). В Express это достигается с помощью объекта express.Router. Например, мы можем создать наш вики-маршрут в модуле с именем wiki.js, а затем экспортировать объект Router, как показано ниже:
 
-<pre class="brush: js">// wiki.js - Wiki route module
+```js
+// wiki.js - Wiki route module
 
 var express = require('express');
 var router = express.Router();
@@ -273,58 +265,58 @@ router.get('/about', function(req, res) {
 });
 
 module.exports = router;
-</pre>
+```
 
-<div class="note">
-<p>Примечание. Добавление маршрутов к объекту Router аналогично добавлению маршрутов к объекту приложения (как показано ранее).</p>
-</div>
+> **Примечание:** Примечание. Добавление маршрутов к объекту Router аналогично добавлению маршрутов к объекту приложения (как показано ранее).
 
-<p>Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения. Эти два маршрута будут доступны из / wiki / и / wiki / about /.</p>
+Чтобы использовать маршрутизатор в нашем главном файле приложения, нам потребуется () модуль route (wiki.js), а затем вызовите use () в приложении Express, чтобы добавить маршрутизатор в путь обработки промежуточного программного обеспечения. Эти два маршрута будут доступны из / wiki / и / wiki / about /.
 
-<pre class="brush: js">var wiki = require('./wiki.js');
+```js
+var wiki = require('./wiki.js');
 // ...
-app.use('/wiki', wiki);</pre>
+app.use('/wiki', wiki);
+```
 
-<p>Мы покажем вам намного больше о работе с маршрутами, и в частности об использовании маршрутизатора, позже в связанном разделе <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/routes"> Routes and controllers .</a></p>
+Мы покажем вам намного больше о работе с маршрутами, и в частности об использовании маршрутизатора, позже в связанном разделе [Routes and controllers .](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
 
-<h3 id="Использование_промежуточного_программного_обеспечения">Использование промежуточного программного обеспечения</h3>
+### Использование промежуточного программного обеспечения
 
-<p>Промежуточное программное обеспечение широко используется в приложениях Express для задач от обслуживания статических файлов до обработки ошибок и сжатия HTTP-ответов. Принимая во внимание, что функции маршрута заканчивают цикл запроса-ответа HTTP, возвращая некоторый ответ клиенту HTTP, функции промежуточного программного обеспечения обычно выполняют некоторую операцию над запросом или ответом и затем вызывают следующую функцию в «стеке», которая может быть большим количеством промежуточного программного обеспечения или маршрута обработчик. Порядок вызова промежуточного программного обеспечения зависит от разработчика приложения.</p>
+Промежуточное программное обеспечение широко используется в приложениях Express для задач от обслуживания статических файлов до обработки ошибок и сжатия HTTP-ответов. Принимая во внимание, что функции маршрута заканчивают цикл запроса-ответа HTTP, возвращая некоторый ответ клиенту HTTP, функции промежуточного программного обеспечения обычно выполняют некоторую операцию над запросом или ответом и затем вызывают следующую функцию в «стеке», которая может быть большим количеством промежуточного программного обеспечения или маршрута обработчик. Порядок вызова промежуточного программного обеспечения зависит от разработчика приложения.
 
-<div class="note">
-<p>Примечание. Промежуточное программное обеспечение может выполнять любую операцию, выполнять любой код, вносить изменения в объект запроса и ответа, а также может завершать цикл запрос-ответ. Если он не завершает цикл, он должен вызвать next (), чтобы передать управление следующей функции промежуточного программного обеспечения (или запрос останется зависшим).</p>
-</div>
+> **Примечание:** Примечание. Промежуточное программное обеспечение может выполнять любую операцию, выполнять любой код, вносить изменения в объект запроса и ответа, а также может завершать цикл запрос-ответ. Если он не завершает цикл, он должен вызвать next (), чтобы передать управление следующей функции промежуточного программного обеспечения (или запрос останется зависшим).
 
-<p>Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти. (который также включает в себя другие популярные сторонние пакеты). Другие экспресс-пакеты доступны в диспетчере пакетов NPM.</p>
+Большинство приложений используют стороннее промежуточное программное обеспечение для упрощения общих задач веб-разработки, таких как работа с файлами cookie, сессиями, аутентификацией пользователя, доступом к данным запросов POST и JSON, ведение журнала и т. д. Список пакетов промежуточного программного обеспечения, поддерживаемых командой Express, можно найти. (который также включает в себя другие популярные сторонние пакеты). Другие экспресс-пакеты доступны в диспетчере пакетов NPM.
 
-<p>Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:</p>
+Для использования стороннего промежуточного программного обеспечения сначала необходимо установить его в своё приложение с помощью NPM. Например, чтобы установить промежуточное программное обеспечение средства регистрации HTTP-запросов morgan, вы должны сделать следующее:
 
-<pre class="brush: bash"><code>$ npm install morgan
-</code></pre>
+```bash
+$ npm install morgan
+```
 
-<p>Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:</p>
+Затем вы можете вызвать use () для объекта приложения Express, чтобы добавить промежуточное программное обеспечение в стек:
 
-<pre class="brush: js">var express = require('express');
-<strong>var logger = require('morgan');</strong>
+```js
+var express = require('express');
+var logger = require('morgan');
 var app = express();
-<strong>app.use(logger('dev'));</strong>
-...</pre>
+app.use(logger('dev'));
+...
+```
 
-<div class="note">
-<p>Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены. Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie). Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.</p>
-</div>
+> **Примечание:** Примечание. Промежуточное программное обеспечение и функции маршрутизации вызываются в том порядке, в котором они были объявлены. Для некоторого промежуточного программного обеспечения важен порядок (например, если промежуточное программное обеспечение сеанса зависит от промежуточного программного обеспечения cookie, то сначала должен быть добавлен обработчик cookie). Почти всегда случается так, что промежуточное ПО вызывается перед настройкой маршрутов, иначе ваши обработчики маршрутов не будут иметь доступа к функциям, добавленным вашим промежуточным ПО.
 
-<p>Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).</p>
+Вы можете написать свои собственные функции промежуточного программного обеспечения, и вам, вероятно, придётся это сделать (хотя бы для создания кода обработки ошибок). Единственное различие между функцией промежуточного программного обеспечения и обратным вызовом обработчика маршрута состоит в том, что функции промежуточного программного обеспечения имеют третий аргумент, следующий: какие функции промежуточного программного обеспечения должны вызываться, если они не завершают цикл запроса (когда вызывается функция промежуточного программного обеспечения, она содержит следующую функцию). это надо называть).
 
-<p>Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().</p>
+Вы можете добавить функцию промежуточного программного обеспечения в цепочку обработки с помощью app.use () или app.add (), в зависимости от того, хотите ли вы применить промежуточное программное обеспечение ко всем ответам или к ответам с определённым глаголом HTTP (GET, POST и т. д.). ). Маршруты задаются одинаково в обоих случаях, хотя маршрут необязателен при вызове app.use ().
 
-<p>В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.</p>
+В приведённом ниже примере показано, как можно добавить функцию промежуточного программного обеспечения, используя оба метода, а также с / без маршрута.
 
-<pre class="brush: js">var express = require('express');
+```js
+var express = require('express');
 var app = express();
 
 // An example middleware function
-var a_middleware_function = function(req, res, <em>next</em>) {
+var a_middleware_function = function(req, res, next) {
   // ... perform some operations
   next(); // Call next() so Express will call the next middleware function in the chain.
 }
@@ -338,85 +330,88 @@ app.use('/someroute', a_middleware_function);
 // A middleware function added for a specific HTTP verb and route
 app.get('/', a_middleware_function);
 
-app.listen(3000);</pre>
+app.listen(3000);
+```
 
-<div class="note">
-<p>Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.</p>
-</div>
+> **Примечание:** Совет по JavaScript: выше мы объявляем функцию промежуточного программного обеспечения отдельно, а затем устанавливаем её в качестве колбэка. В нашей предыдущей функции обработчика маршрута мы объявили колбэк-функцию, когда она использовалась. В JavaScript любой подход является допустимым.
 
-<p>Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.</p>
+Документация по Express содержит намного больше отличной информации по использованию и написанию промежуточного программного обеспечения Express.
 
-<h3 id="Обслуживание_статических_файлов">Обслуживание статических файлов</h3>
+### Обслуживание статических файлов
 
-<p>Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express). Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:</p>
+Вы можете использовать промежуточное программное обеспечение express.static для обслуживания статических файлов, включая ваши изображения, CSS и JavaScript (static () - единственная функция промежуточного программного обеспечения, которая фактически является частью Express). Например, вы должны использовать строку ниже для обслуживания изображений, файлов CSS и файлов JavaScript из каталога с именем public на том же уровне, где вы вызываете узел:
 
-<pre class="brush: js">app.use(express.static('public'));
-</pre>
+```js
+app.use(express.static('public'));
+```
 
-<p>Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:</p>
+Любые файлы в публичном каталоге обслуживаются путём добавления их имени файла (относительно базового «публичного» каталога) к базовому URL. Так, например:
 
-<pre><code>http://localhost:3000/images/dog.jpg
+```
+http://localhost:3000/images/dog.jpg
 http://localhost:3000/css/style.css
 http://localhost:3000/js/app.js
 http://localhost:3000/about.html
-</code></pre>
+```
 
-<p>Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов. Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).</p>
+Вы можете вызывать static () несколько раз для обслуживания нескольких каталогов. Если файл не может быть найден одной функцией промежуточного программного обеспечения, он будет просто передан последующему промежуточному программному обеспечению (порядок вызова промежуточного программного обеспечения основан на вашем порядке объявления).
 
-<pre class="brush: js">app.use(express.static('public'));
+```js
+app.use(express.static('public'));
 app.use(express.static('media'));
-</pre>
+```
 
-<p>Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу. Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":</p>
+Вы также можете создать виртуальный префикс для ваших статических URL-адресов, вместо добавления файлов к базовому URL-адресу. Например, здесь мы указываем путь монтирования, чтобы файлы загружались с префиксом "/ media":
 
-<pre class="brush: js">app.use('/media', express.static('public'));
-</pre>
+```js
+app.use('/media', express.static('public'));
+```
 
-<p>Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.</p>
+Теперь вы можете загружать файлы, находящиеся в публичном каталоге, из префикса / media path.
 
-<pre><code>http://localhost:3000/media/images/dog.jpg
+```
+http://localhost:3000/media/images/dog.jpg
 http://localhost:3000/media/video/cat.mp4
-http://localhost:3000/media/cry.mp3</code>
-</pre>
+http://localhost:3000/media/cry.mp3
+```
 
-<p>Для получения дополнительной информации см. <a href="Serving static files in Express">Serving static files in Express</a>.</p>
+Для получения дополнительной информации см. [Serving static files in Express](<Serving static files in Express>).
 
-<h3 id="Обработка_ошибок">Обработка ошибок</h3>
+### Обработка ошибок
 
-<p>Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next). Например:</p>
+Ошибки обрабатываются одной или несколькими специальными функциями промежуточного программного обеспечения, которые имеют четыре аргумента вместо обычных трёх: (err, req, res, next). Например:
 
-<pre class="brush: js">app.use(function(err, req, res, next) {
+```js
+app.use(function(err, req, res, next) {
   console.error(err.stack);
   res.status(500).send('Something broke!');
 });
-</pre>
+```
 
-<p>Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!</p>
+Они могут возвращать любой требуемый контент, но должны вызываться после всех других app.use () и маршрутизировать вызовы, чтобы они были последним промежуточным ПО в процессе обработки запросов!
 
-<p>Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.</p>
+Express поставляется со встроенным обработчиком ошибок, который заботится обо всех оставшихся ошибках, которые могут возникнуть в приложении. Эта промежуточная функция обработки ошибок по умолчанию добавляется в конец стека функций промежуточного программного обеспечения. Если вы передаёте ошибку в next () и не обрабатываете её в обработчике ошибок, она будет обработана встроенным обработчиком ошибок; ошибка будет записана клиенту с трассировкой стека.
 
-<div class="note">
-<p>Примечание. Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».</p>
-</div>
+> **Примечание:** Примечание. Трассировка стека не включена в производственную среду. Чтобы запустить его в производственном режиме, необходимо установить переменную среды NODE_ENV в «производство».
 
-<div class="note">
-<p>Примечание. HTTP404 и другие коды состояния «ошибка» не считаются ошибками. Если вы хотите справиться с этим, вы можете добавить функцию промежуточного программного обеспечения для этого. Для получения дополнительной информации см. FAQ.</p>
-</div>
+> **Примечание:** Примечание. HTTP404 и другие коды состояния «ошибка» не считаются ошибками. Если вы хотите справиться с этим, вы можете добавить функцию промежуточного программного обеспечения для этого. Для получения дополнительной информации см. FAQ.
 
-<p>Для получения дополнительной информации см. <a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs).</p>
+Для получения дополнительной информации см. [Error handling](http://expressjs.com/en/guide/error-handling.html) (Express docs).
 
-<h3 id="Использование_баз_данных">Использование баз данных</h3>
+### Использование баз данных
 
-<p>Приложения Express могут использовать любой механизм базы данных, поддерживаемый Node (сам по себе Express не определяет каких-либо дополнительных действий / требований для управления базой данных). Есть много вариантов, включая PostgreSQL, MySQL, Redis, SQLite, MongoDB и т. Д.</p>
+Приложения Express могут использовать любой механизм базы данных, поддерживаемый Node (сам по себе Express не определяет каких-либо дополнительных действий / требований для управления базой данных). Есть много вариантов, включая PostgreSQL, MySQL, Redis, SQLite, MongoDB и т. Д.
 
-<p>Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM. Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:</p>
+Чтобы использовать их, вы должны сначала установить драйвер базы данных, используя NPM. Например, чтобы установить драйвер для популярной NoSQL MongoDB, вы должны использовать команду:
 
-<pre class="brush: bash"><code>$ npm install mongodb
-</code></pre>
+```bash
+$ npm install mongodb
+```
 
-<p>Сама база данных может быть установлена локально или на облачном сервере. В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD). Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.</p>
+Сама база данных может быть установлена локально или на облачном сервере. В вашем экспресс-коде вам требуется драйвер, подключиться к базе данных, а затем выполнить операции создания, чтения, обновления и удаления (CRUD). Пример ниже (из документации Express) показывает, как вы можете найти записи «млекопитающих», используя MongoDB.
 
-<pre class="brush: js">var MongoClient = require('mongodb').MongoClient;
+```js
+var MongoClient = require('mongodb').MongoClient;
 
 MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
   if (err) throw err;
@@ -426,19 +421,21 @@ MongoClient.connect('mongodb://localhost:27017/animals', function(err, db) {
 
     console.log(result);
   });
-});</pre>
+});
+```
 
-<p>Другим популярным подходом является косвенный доступ к вашей базе данных с помощью Object Relational Mapper («ORM»). При таком подходе вы определяете свои данные как «объекты» или «модели», и ORM отображает их в базовый формат базы данных. Этот подход имеет то преимущество, что как разработчик вы можете продолжать думать с точки зрения объектов JavaScript, а не семантики базы данных, и что есть очевидное место для выполнения проверки и проверки входящих данных. Подробнее о базах данных мы поговорим в следующей статье.</p>
+Другим популярным подходом является косвенный доступ к вашей базе данных с помощью Object Relational Mapper («ORM»). При таком подходе вы определяете свои данные как «объекты» или «модели», и ORM отображает их в базовый формат базы данных. Этот подход имеет то преимущество, что как разработчик вы можете продолжать думать с точки зрения объектов JavaScript, а не семантики базы данных, и что есть очевидное место для выполнения проверки и проверки входящих данных. Подробнее о базах данных мы поговорим в следующей статье.
 
-<p>Для получения дополнительной информации см. <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+Для получения дополнительной информации см. [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs).
 
-<h3 id="Рендеринг_данных_просмотров">Рендеринг данных (просмотров)</h3>
+### Рендеринг данных (просмотров)
 
-<p>Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.</p>
+Механизмы шаблонов (в Express называемые «механизмами просмотра») позволяют указывать структуру выходного документа в шаблоне, используя заполнители для данных, которые будут заполняться при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов. В Express есть поддержка ряда шаблонных движков, и здесь есть полезное сравнение более популярных движков: Сравнение шаблонизаторов JavaScript: Jade, Mustache, Dust и More.
 
-<p>В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)</p>
+В своём коде настроек приложения вы задаёте механизм шаблонов для использования и место, где Express должен искать шаблоны, используя настройки «views» и «engine», как показано ниже (вам также нужно будет установить пакет, содержащий вашу библиотеку шаблонов). !)
 
-<pre class="brush: js">var express = require('express');
+```js
+var express = require('express');
 var app = express();
 
 // Set directory to contain the templates ('views')
@@ -446,44 +443,41 @@ app.set('views', path.join(__dirname, 'views'));
 
 // Set view engine to use, in this case 'some_template_engine_name'
 app.set('view engine', 'some_template_engine_name');
-</pre>
+```
 
-<p>Внешний вид шаблона будет зависеть от того, какой движок вы используете. Предполагая, что у вас есть файл шаблона с именем «index. &lt;Template_extension&gt;», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML. :</p>
+Внешний вид шаблона будет зависеть от того, какой движок вы используете. Предполагая, что у вас есть файл шаблона с именем «index. \<Template_extension>», который содержит заполнители для переменных данных с именами «title» и «message», вы должны вызвать Response.render () в функции обработчика маршрута для создания и отправки ответа HTML. :
 
-<pre class="brush: js">app.get('/', function(req, res) {
+```js
+app.get('/', function(req, res) {
   res.render('index', { title: 'About dogs', message: 'Dogs rock!' });
-});</pre>
-
-<p>Для получения дополнительной информации см. <a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs).</p>
+});
+```
 
-<h3 id="Файловая_структура">Файловая структура</h3>
+Для получения дополнительной информации см. [Using template engines with Express](http://expressjs.com/en/guide/using-template-engines.html) (Express docs).
 
-<p>Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете <a href="/en-US/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture">MVC architecture</a>).</p>
+### Файловая структура
 
-<p>В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.</p>
+Express не делает никаких предположений относительно структуры или компонентов, которые вы используете. Маршруты, представления, статические файлы и другая логика конкретного приложения могут находиться в любом количестве файлов с любой структурой каталогов. Хотя вполне возможно иметь все приложения Express в одном файле, обычно имеет смысл разделить ваше приложение на файлы на основе функций (например, управление учётными записями, блоги, доски обсуждений) и проблемной области архитектуры (например, модель, представление или контроллер, если вы случайно используете [MVC architecture](/ru/docs/Web/Apps/Fundamentals/Modern_web_app_architecture/MVC_architecture)).
 
-<ul>
-</ul>
+В более поздней теме мы будем использовать Express Application Generator, который создаёт модульный каркас приложения, который мы можем легко расширить для создания веб-приложений.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Поздравляем, вы завершили первый шаг в своём путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!</p>
+Поздравляем, вы завершили первый шаг в своём путешествии Express / Node! Теперь вы должны понимать основные преимущества Express и Node, а также примерно то, как могут выглядеть основные части приложения Express (маршруты, промежуточное ПО, обработка ошибок и код шаблона). Вы также должны понимать, что с Express, который является непонятным фреймворком, то, как вы собираете эти части вместе, и библиотеки, которые вы используете, в значительной степени зависит от вас!
 
-<p>Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.</p>
+Конечно, Express - это очень лёгкая платформа для веб-приложений, поэтому большая часть её преимуществ и возможностей обеспечивается сторонними библиотеками и функциями. Мы рассмотрим это более подробно в следующих статьях. В нашей следующей статье мы рассмотрим настройку среды разработки Node, чтобы вы могли увидеть некоторый код Express в действии.
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://nodejs.org/api/modules.html#modules_modules">Modules</a> (Node API docs)</li>
- <li><a href="https://expressjs.com/">Express</a> (home page)</li>
- <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a> (Express docs)</li>
- <li><a href="https://expressjs.com/en/guide/using-middleware.html">Using middleware</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/writing-middleware.html">Writing middleware for use in Express apps</a> (Express docs)</li>
- <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs)</li>
- <li><a href="Serving static files in Express">Serving static files in Express</a> (Express docs)</li>
- <li><a href="http://expressjs.com/en/guide/error-handling.html">Error handling</a> (Express docs)</li>
-</ul>
+- [Modules](https://nodejs.org/api/modules.html#modules_modules) (Node API docs)
+- [Express](https://expressjs.com/) (home page)
+- [Basic routing](http://expressjs.com/en/starter/basic-routing.html) (Express docs)
+- [Routing guide](http://expressjs.com/en/guide/routing.html) (Express docs)
+- [Using template engines with Express](http://expressjs.com/en/guide/using-template-engines.html) (Express docs)
+- [Using middleware](https://expressjs.com/en/guide/using-middleware.html) (Express docs)
+- [Writing middleware for use in Express apps](http://expressjs.com/en/guide/writing-middleware.html) (Express docs)
+- [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs)
+- [Serving static files in Express](<Serving static files in Express>) (Express docs)
+- [Error handling](http://expressjs.com/en/guide/error-handling.html) (Express docs)
 
-<div>{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}</div>
+{{NextMenu("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs")}}
diff --git a/files/ru/learn/server-side/express_nodejs/mongoose/index.md b/files/ru/learn/server-side/express_nodejs/mongoose/index.md
index bfb2a34abbeece..ea11e16aa1c14b 100644
--- a/files/ru/learn/server-side/express_nodejs/mongoose/index.md
+++ b/files/ru/learn/server-side/express_nodejs/mongoose/index.md
@@ -3,144 +3,113 @@ title: 'Учебник Express часть 3: Использование базы
 slug: Learn/Server-side/Express_Nodejs/mongoose
 translation_of: Learn/Server-side/Express_Nodejs/mongoose
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</div>
+В этой статье даётся краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать [Mongoose](http://mongoosejs.com/) для доступа к базе данных веб-сайта [LocalLibrary](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website). Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны основные методы доступа к данным модели.
 
-<p class="summary">В этой статье даётся краткое введение в базы данных, и методика их использования в приложениях Node/Express. Затем мы покажем, как можно использовать <a href="http://mongoosejs.com/">Mongoose</a> для доступа к базе данных веб-сайта  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. Мы объясним, как объявляются схемы и модели объектов, укажем основные типы полей, и методику базовой валидации. В статье также кратко показаны  основные методы доступа к данным модели.</p>
+| Предварительные сведения: | [Express Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website) |
+| ------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| Цель:                     | Уметь спроектировать и создать свои модели, используя Mongoose.                                                    |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные сведения:</th>
-   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Уметь спроектировать и создать свои модели, используя Mongoose.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Сотрудники библиотеки будут использовать сайт Local Library для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживания книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить её в базе данных.
 
-<p>Сотрудники библиотеки будут использовать сайт Local Library  для хранения информации о книгах и абонентах, а абоненты библиотеки будут использовать его для просмотра и поиска книг, для получения информации о доступных копиях, для резервирования или одалживания книг. Чтобы эффективно хранить и извлекать информацию, мы будем хранить её в базе данных.</p>
+Express-приложения могут использовать различные базы данных, и есть несколько подходов, которые можно использовать для выполнения операций **C**reate, **R**ead, **U**pdate and **D**elete (CRUD) (создать, прочесть, обновить, удалить). В руководстве дан краткий обзор некоторых доступных опций, и детально рассмотрены некоторые механизмы работы.
 
-<p>Express-приложения могут использовать различные базы данных, и есть несколько подходов, которые можно использовать для выполнения операций <strong>C</strong>reate, <strong>R</strong>ead, <strong>U</strong>pdate and <strong>D</strong>elete (CRUD) (создать, прочесть, обновить, удалить). В руководстве дан краткий обзор некоторых доступных опций, и детально рассмотрены некоторые механизмы работы.</p>
+### Какие базы данных можно использовать?
 
-<h3 id="Какие_базы_данных_можно_использовать">Какие базы данных можно использовать?</h3>
+*Express-*приложение может использовать любые базы данных, поддерживаемые _Node_ (сам по себе Express не определяет каких-либо конкретных дополнительных свойств и требований для управления базами данных). Есть [много популярных ](https://expressjs.com/en/guide/database-integration.html)вариантов -- PostgreSQL, MySQL, Redis, SQLite, и MongoDB.
 
-<p><em>Express-</em>приложение может использовать  любые базы данных, поддерживаемые <em>Node</em> (сам по себе Express не определяет каких-либо конкретных дополнительных свойств и требований для управления базами данных). Есть <a href="https://expressjs.com/en/guide/database-integration.html">много популярных </a>вариантов -- PostgreSQL, MySQL, Redis, SQLite, и MongoDB.</p>
+При выборе базы данных следует учитывать такие факторы как время разработки, время обучения, простота репликации и копирования, расходы, поддержка сообщества и т. д. Хотя нет единственной "лучшей" базы данных, почти любое из популярных решений будет приемлемым для сайта малого и среднего размера, такого как наша Local Library.
 
-<p>При выборе базы данных следует учитывать такие факторы как время разработки, время обучения, простота репликации и копирования, расходы, поддержка сообщества и т. д.  Хотя нет единственной "лучшей" базы данных, почти любое из популярных решений будет приемлемым для сайта малого и среднего размера, такого как наша Local Library.</p>
+Более подробно о вариантах смотрите в: [Database integration](https://expressjs.com/en/guide/database-integration.html) (Express docs).
 
-<p>Более подробно о вариантах смотрите в: <a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> (Express docs).</p>
+### Каков наилучший способ взаимодействия с базой данных?
 
-<h3 id="Каков_наилучший_способ_взаимодействия_с_базой_данных">Каков наилучший способ взаимодействия с базой данных?</h3>
+Существует два подхода при работе с базой данных:
 
-<p>Существует два подхода при работе с базой данных:</p>
+- Использование родного языка запросов баз данных (т.е. SQL)
+- Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM). ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM привязаны к определённой базе данных, тогда как другие не зависят от конкретной базы данных.
 
-<ul>
- <li>Использование родного языка запросов баз данных (т.е. SQL)</li>
- <li>Использование объектной модели данных (ODM) или объектно-реляционной модели (ORM).  ODM / ORM представляют данные веб-сайта как объекты JavaScript, которые затем отображаются на поддерживающую базу данных. Некоторые ORM  привязаны к определённой базе данных, тогда как другие не зависят от конкретной базы данных.</li>
-</ul>
+Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромиссы в смысле поддержки тех или иных функций базы данных).
 
-<p>Наилучшую производительность можно получить с помощью SQL или другого языка запросов, поддерживаемого базой данных. Объектные модели (ODM) часто медленнее, потому что требуют перевода объектов в формат базы данных, при этом не обязательно будут использованы наиболее эффективные запросы к базе данных (особенно, если ODM предназначена для различных баз данных и должна идти на большие компромиссы в смысле поддержки тех или иных функций базы данных).</p>
+Преимущество применения ORM состоит в том, что программисты могут сосредоточиться на объектах JavaScript, а не на семантике базы данных — особенно, если требуется работать с разными базами данных (на одном или разных веб-сайтах). Они также дают очевидное место для валидации и проверки данных.
 
-<p>Преимущество применения ORM состоит в том, что программисты могут сосредоточиться на объектах JavaScript, а не  на семантике базы данных —  особенно, если требуется работать с разными базами данных (на одном или разных веб-сайтах). Они также дают очевидное место для валидации и проверки данных.</p>
+> **Примечание:** Совет: Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если вы не очень хорошо знакомы с языком запросов базы данных или если производительность не имеет первостепенного значения, следует серьёзно рассмотреть возможность применения ODM.
 
-<div class="note">
-<p>Совет:  Применение ODM / ORMs часто приводит к снижению затрат на разработку и обслуживание! Если вы не очень хорошо знакомы с языком запросов базы данных или если производительность не имеет первостепенного значения, следует серьёзно рассмотреть возможность применения ODM.</p>
-</div>
+### Какую модель ORM/ODM следует использовать?
 
-<h3 id="Какую_модель_ORMODM_следует_использовать">Какую модель ORM/ODM следует использовать?</h3>
+Есть много ODM/ORM доступных решений на сайте менеджера пакетов NPM (проверьте теги по подгруппе [odm](https://www.npmjs.com/browse/keyword/odm) и [orm](https://www.npmjs.com/browse/keyword/orm)).
 
-<p>Есть много ODM/ORM доступных решений на сайте менеджера пакетов NPM (проверьте теги по подгруппе <a href="https://www.npmjs.com/browse/keyword/odm">odm</a> и <a href="https://www.npmjs.com/browse/keyword/orm">orm</a>).</p>
+Популярные решения на момент написания статьи:
 
-<p>Популярные решения на момент написания статьи:</p>
+- [Mongoose](https://www.npmjs.com/package/mongoose): -- это средство моделирование объектов базы данных [MongoDB](https://www.mongodb.org/), предназначенное для асинхронной работы.
+- [Waterline](https://www.npmjs.com/package/waterline): ORM фреймворка [Sails](http://sailsjs.com/) (основан на Express) . Она предоставляет единый API для доступа к множеству баз данных, в том числе Redis, mySQL, LDAP, MongoDB, и Postgres.
+- [Bookshelf](https://www.npmjs.com/package/bookshelf): поддерживает как promise- так и традиционные callback- интерфейсы, поддержка транзакций, eager/nested-eager relation loading, полиморфные ассоциации, и поддержка, один к одному, один ко многим, и многие ко многим. Работает с PostgreSQL, MySQL, и SQLite3.
+- [Objection](https://www.npmjs.com/package/objection): Делает настолько лёгким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает SQLite3, Postgres, и MySQL).
+- [Sequelize](https://www.npmjs.com/package/sequelize): Основанная на промисах ORM для Node.js и [io.js](https://ru.wikipedia.org/wiki/Io.js). Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надёжной поддержкой транзакций, отношений, чтения копий и т.д.
+- [Node ORM2](https://node-orm.readthedocs.io/en/latest/) -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.
+- [JugglingDB](http://1602.github.io/jugglingdb/) -- это кросс-ДБ ORM для NodeJS, обеспечивающая общий интерфейс для доступа к наиболее популярным форматам БД. Поддерживает MySQL, SQLite3, Postgres, MongoDB, Redis и хранение данных в памяти js (собственный движок, только для тестирования).
 
-<ul>
- <li><a href="https://www.npmjs.com/package/mongoose">Mongoose</a>: -- это средство моделирование объектов базы данных <a href="https://www.mongodb.org/">MongoDB</a>,  предназначенное для асинхронной работы.</li>
- <li><a href="https://www.npmjs.com/package/waterline">Waterline</a>: ORM  фреймворка <a href="http://sailsjs.com/">Sails</a> (основан на Express) . Она предоставляет единый API для доступа к множеству баз данных, в том числе Redis, mySQL, LDAP, MongoDB, и Postgres.</li>
- <li><a href="https://www.npmjs.com/package/bookshelf">Bookshelf</a>: поддерживает как promise- так и традиционные callback- интерфейсы, поддержка транзакций, eager/nested-eager relation loading, полиморфные ассоциации, и поддержка, один к одному, один ко многим, и многие ко многим. Работает с PostgreSQL, MySQL, и SQLite3.</li>
- <li><a href="https://www.npmjs.com/package/objection">Objection</a>: Делает настолько лёгким, насколько возможно, использование всей мощи SQL и движка базы данных ( поддерживает  SQLite3, Postgres, и MySQL).</li>
- <li><a href="https://www.npmjs.com/package/sequelize">Sequelize</a>: Основанная на промисах ORM для Node.js и <a href="https://ru.wikipedia.org/wiki/Io.js">io.js</a>. Поддерживает диалекты PostgreSQL, MySQL, MariaDB, SQLite и MSSQL, обладает надёжной поддержкой транзакций, отношений, чтения копий и т.д.</li>
- <li>
-  <p><a href="https://node-orm.readthedocs.io/en/latest/">Node ORM2</a> -- это OR менеджер для NodeJS. Поддерживает MySQL, SQLite и Progress, помогает работать с БД, используя объектный подход.</p>
- </li>
- <li>
-  <p><a href="http://1602.github.io/jugglingdb/">JugglingDB</a> -- это кросс-ДБ ORM для NodeJS, обеспечивающая общий интерфейс для доступа к наиболее популярным форматам БД. Поддерживает MySQL, SQLite3, Postgres, MongoDB, Redis и хранение данных в памяти js (собственный движок, только для тестирования).</p>
- </li>
-</ul>
+Как правило, при выборе решения следует учитывать как предоставляемые функции, так и "деятельность сообщества" ( загрузки, вклад, отчёты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.
 
-<p>Как правило, при выборе решения следует учитывать как предоставляемые функции, так и  "деятельность сообщества" ( загрузки, вклад, отчёты об ошибках, качество документации, и т.д. ) . На момент написания статьи Mongoose являлась очень популярной ORM, и разумно, если вы выбрали MongoDB.</p>
+### Применение Mongoose и MongoDb для LocalLibrary
 
-<h3 id="Применение_Mongoose_и_MongoDb_для_LocalLibrary">Применение Mongoose и MongoDb для LocalLibrary</h3>
+В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документов-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.
 
-<p>В примере LocalLibrary (и до конца раздела) мы будем использовать Mongoose ODM для доступа к данным нашей библиотеки. Mongoose является интерфейсом для MongoDB, NoSQL-базы данных с открытым исходным кодом, в которой использована документов-ориентированная модель данных. В MongoDB «коллекции» и «документы» -- это аналоги «таблиц» и «строк» в реляционных БД.</p>
+Это сочетание ODM и БД весьма популярно в сообществе Node, частично потому, что система хранения документов и запросов очень похожа на JSON и поэтому знакома разработчикам JavaScript.
 
-<p>Это сочетание ODM и БД весьма популярно в сообществе Node, частично потому, что система хранения документов и запросов очень похожа на JSON и поэтому знакома разработчикам JavaScript.</p>
+> **Примечание:** **Совет**: Не обязательно знать MongoDB, чтобы использовать Mongoose, хотя [документацию Mongoose](http://mongoosejs.com/docs/guide.html) легче использовать и понимать, если вы уже знакомы с MongoDB.
 
-<div class="note">
-<p><strong>Совет</strong>: Не обязательно знать MongoDB, чтобы использовать Mongoose, хотя  <a href="http://mongoosejs.com/docs/guide.html"> документацию Mongoose</a> легче использовать и понимать, если вы уже знакомы с MongoDB.</p>
-</div>
+Далее показано, как определить и получить доступ к схеме и моделям Mongoose для примера веб-сайта LocalLibrary.
 
-<p>Далее показано, как определить и получить доступ к схеме и моделям Mongoose для примера веб-сайта LocalLibrary.</p>
+## Проектирование моделей LocalLibrary
 
-<h2 id="Проектирование_моделей_LocalLibrary">Проектирование моделей LocalLibrary</h2>
+Прежде чем начинать писать код моделей, стоит обдумать, какие данные нам нужно хранить, и каковы отношения между разными объектами.
 
-<p> </p>
+Мы знаем, что нужно хранить информацию о книгах (название, резюме (краткое описание), автор, жанр, ISBN (Международный стандартный книжный номер) ) и что может быть несколько доступных экземпляров (с уникальными идентификаторами, статусом наличия и т. д.). Может потребоваться хранить больше информации об авторе (не только имя, т.к. могут быть авторы с одинаковыми или похожими именами). Мы хотим иметь возможность сортировать данные по названиям книг, по авторам, по жанрам и категориям.
 
-<p>Прежде чем начинать писать код моделей, стоит обдумать, какие данные нам нужно хранить, и каковы отношения между разными объектами.</p>
+При проектировании моделей имеет смысл иметь отдельные модели для каждого «объекта» (группы связанных данных). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.
 
-<p>Мы знаем, что нужно хранить информацию о книгах (название, резюме (краткое описание), автор, жанр, ISBN (Международный стандартный книжный номер) ) и что может быть несколько доступных экземпляров (с уникальными идентификаторами, статусом наличия и т. д.).  Может потребоваться хранить больше информации об авторе (не только имя, т.к. могут быть авторы с одинаковыми или похожими именами). Мы хотим иметь возможность сортировать данные по названиям книг, по авторам, по жанрам и категориям.</p>
+Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте - рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),
 
-<p>При проектировании моделей имеет смысл иметь отдельные модели для каждого «объекта» (группы связанных данных). В этом случае очевидными объектами являются книги, экземпляры книг и авторы.</p>
+Как только мы определились с моделями и полями, следует подумать об отношениях между ними.
 
-<p>Можно также использовать модели для представления параметров списка выбора (например, как выпадающий список вариантов), вместо жёсткого кодирования выбора на самом веб-сайте -  рекомендуется, когда не все параметры известны или могут быть изменены. Явный кандидат для модели такого типа -- это жанр книги (например, «Научная фантастика», «Французская поэзия» и т.д.),</p>
+С учётом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для `BookInstance:status` — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .
 
-<p>Как только мы определились с моделями и полями, следует подумать об отношениях между ними.</p>
+Также показаны отношения между моделями, включая множественные отношения. Числа на линиях связи показывают максимум и минимум моделей, участвующих отношении. Например, линия между `Book` и `Genre` показывает, что `Book` и `Genre` связаны. Числа на этой линии рядом с моделью `Book` показывают, что жанр может быть связан с любым количеством книг, а числа на другом конце линии рядом с `Genre` отмечают, что книга может быть связана с любым количеством жанров.
 
-<p>С учётом сказанного, UML-диаграмма связей (см. ниже) показывает модели, которые представлены как прямоугольники. Мы решили, что создадим модели для книги (общие сведения о книге), для экземпляра книги (состояние отдельных физических копий книги, доступных в системе) и для автора. Кроме того, у нас будет модель для жанра, чтобы эти значения можно было создавать динамически. Решено не создавать модель для  <code>BookInstance:status</code> — мы пропишем в коде необходимые значения, потому что не ожидаем их изменения. На элементах диаграммы показаны имя модели, имена и типы полей, имена методов и типы их результатов .</p>
+> **Примечание:** Как показано в [Учебнике по Mongoose](#Mongoose_Справочник) ниже, часто лучше иметь поле, определяющее отношение между документами (моделями), только в одной модели (обратное отношение можно найти по присвоенному идентификатору `_id` в другой модели). Ниже мы предпочли задать отношения между Book/Genre и между Book/Author в схеме Book, а отношение между Book/BookInstance -- в схеме BookInstance. Этот выбор в некотором смысле был произвольным -- таким же хорошим мог бы быть выбор другого поля в другой схеме.
 
-<p>Также показаны отношения между моделями, включая множественные отношения. Числа на линиях связи показывают максимум и минимум  моделей, участвующих отношении. Например, линия между <code>Book</code> и <code>Genre</code> показывает, что <code>Book</code> и <code>Genre</code> связаны. Числа на этой линии рядом с моделью <code>Book</code> показывают, что жанр может быть связан с любым количеством книг, а числа на другом конце линии рядом с <code>Genre</code> отмечают, что книга может быть связана с любым количеством жанров.</p>
+![Mongoose Library Model  with correct cardinality](https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png)
 
-<div class="note">
-<p><strong>Примечание</strong>: Как показано в <a href="#Mongoose_Справочник">Учебнике по Mongoose</a> ниже, часто лучше иметь поле, определяющее отношение между документами (моделями), только в одной модели (обратное отношение можно найти по присвоенному идентификатору <code>_id</code> в другой модели). Ниже мы предпочли задать отношения между Book/Genre и между Book/Author в схеме  Book, а отношение между  Book/BookInstance -- в схеме BookInstance. Этот выбор в некотором смысле был произвольным -- таким же хорошим мог бы быть выбор другого поля в другой схеме.</p>
-</div>
+> **Примечание:** В следующем разделе дан базовый учебник, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведённые на диаграмме.
 
-<p><img alt="Mongoose Library Model  with correct cardinality" src="https://mdn.mozillademos.org/files/15645/Library%20Website%20-%20Mongoose_Express.png" style="height: 620px; width: 737px;"></p>
+## Учебник по Mongoose
 
-<div class="note">
-<p><strong>Примечание</strong>: В следующем разделе дан базовый учебник, в котором объясняется, как задавать и как использовать модели. При чтении обратите внимание, как будут создаваться модели, приведённые на диаграмме.</p>
-</div>
+В этом разделе кратко описано как подключиться к базе MongoDB с помощью Mongoose, как определить схемы и модели, как сформировать основные запросы.
 
-<h2 id="Mongoose_Справочник">Учебник по Mongoose</h2>
+> **Примечание:**На этот учебник значительно повлияло руководство [Mongoose quick start](https://www.npmjs.com/package/mongoose) на npm и [официальная документация.](http://mongoosejs.com/docs/guide.html)
 
-<p>В этом разделе кратко описано как подключиться к базе MongoDB с помощью Mongoose, как определить схемы и модели, как сформировать основные запросы.</p>
+### Установка Mongoose и MongoDB
 
-<div class="note">
-<p><strong> Примечание: </strong>На этот учебник значительно повлияло руководство <a href="https://www.npmjs.com/package/mongoose">Mongoose quick start</a> на npm и <a href="http://mongoosejs.com/docs/guide.html">официальная документация.</a></p>
-</div>
+Mongoose устанавливается в ваш проект (**package.json**) как и другие зависимости - при помощи NPM. Команда установки (выполняется из каталога проекта):
 
-<h3 id="Установка_Mongoose_и_MongoDB">Установка Mongoose и MongoDB</h3>
+```bash
+npm install mongoose
+```
 
-<p>Mongoose устанавливается в ваш проект (<strong>package.json</strong>) как и другие зависимости - при помощи NPM. Команда установки (выполняется из каталога проекта): </p>
+Установка _Mongoose_ добавит все зависимости, включая драйвер MongoDB, но не установит саму базу данных. При желании установить сервер MongoDB локально, можно [скачать установочный файл здесь](https://www.mongodb.com/download-center) для своей операционной системы и установить его. Также можно использовать облако MongoDB.
 
-<pre class="brush: bash"><code>npm install mongoose</code>
-</pre>
+> **Примечание:** В примере для хранения базы данных мы используем облачный сервис [sandbox tier](https://mlab.com/plans/pricing/) ("песочницу"). Это удобно для разработки и имеет смысл для руководства, потому что такой подход делает "установку" базы данных независимой от операционной системы (база данных как веб-сервис — это также подход, который вы можете использовать для своей базы данных, находящейся в реальной эксплуатации).
 
-<p>Установка <em>Mongoose </em>добавит все зависимости, включая драйвер MongoDB, но не установит саму базу данных. При желании  установить сервер MongoDB локально,  можно <a href="https://www.mongodb.com/download-center">скачать установочный файл здесь</a> для своей операционной системы и установить его.  Также  можно использовать облако MongoDB.</p>
+### Подключение к MongoDB
 
-<div class="note">
-<p><strong>Примечание:</strong> В примере для хранения базы данных мы используем облачный сервис <a href="https://mlab.com/plans/pricing/">sandbox tier</a> ("песочницу"). Это удобно для разработки и имеет смысл для руководства, потому что такой подход делает "установку" базы данных независимой от операционной системы (база данных как веб-сервис — это также подход, который вы можете использовать для своей базы данных, находящейся в реальной эксплуатации).</p>
-</div>
+_Mongoose_ требует подключение к MongoDB. Вы можете использовать require() и подключится к локальной БД при помощи `mongoose.connect(),` как показано ниже.
 
-<h3 id="Подключение_к_MongoDB">Подключение к MongoDB</h3>
-
-<p><em>Mongoose </em>требует подключение к MongoDB. Вы можете использовать require() и подключится к локальной БД при помощи <code>mongoose.connect(),</code> как показано ниже.</p>
-
-<pre class="brush: js">// Импортировать модуль mongoose
+```js
+// Импортировать модуль mongoose
 var mongoose = require('mongoose');
 
 // Установим подключение по умолчанию
@@ -153,29 +122,26 @@ var db = mongoose.connection;
 
 // Привязать подключение к событию ошибки  (получать сообщения об ошибках подключения)
 db.on('error', console.error.bind(console, 'MongoDB connection error:'));
-</pre>
+```
 
-<p>При помощи <code>mongoose.connection</code> можно получить стандартный объект <code>Connection</code>. После подключения в экземпляре <code>Connection</code> возникает событие open (открыт).</p>
+При помощи `mongoose.connection` можно получить стандартный объект `Connection`. После подключения в экземпляре `Connection` возникает событие open (открыт).
 
-<div class="note">
-<p><strong>Tip:</strong> Если необходимо создать дополнительные подключения, можно использовать <code>mongoose.createConnection()</code>. При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в <code>connect()</code> и будет возвращён объект <code>Connection</code>.</p>
-</div>
+> **Примечание:** **Tip:** Если необходимо создать дополнительные подключения, можно использовать `mongoose.createConnection()`. При этом будут применены те же БД URI (хост, БД, порт, опции и т.д.), что и в `connect()` и будет возвращён объект `Connection`.
 
-<h3 id="Определение_и_создание_моделей">Определение и создание моделей</h3>
+### Определение и создание моделей
 
-<p>Модели можно создать при помощи интерфейса <code>Schema</code> . Schema позволяет указать поля, которые будут в каждом документе, значения полей по умолчанию и требования по валидации. Кроме того, можно задать статические методы и методы-хелперы (от help), облегчающие работу с вашими типами данных, а также задать виртуальные свойства,  которые можно использовать как и обычные поля, но без влияния на данные в самой базе данных.</p>
+Модели можно создать при помощи интерфейса `Schema` . Schema позволяет указать поля, которые будут в каждом документе, значения полей по умолчанию и требования по валидации. Кроме того, можно задать статические методы и методы-хелперы (от help), облегчающие работу с вашими типами данных, а также задать виртуальные свойства, которые можно использовать как и обычные поля, но без влияния на данные в самой базе данных.
 
-<p>Схемы "компилируются "  в окончательную модель методом  <code>mongoose.model()</code>. После создания модели её можно использовать для поиска, создания, обновления и удаления объектов данного типа.</p>
+Схемы "компилируются " в окончательную модель методом `mongoose.model()`. После создания модели её можно использовать для поиска, создания, обновления и удаления объектов данного типа.
 
-<div class="note">
-<p><strong>Примечание:</strong> Каждой модели соответствует <em>коллекция</em> <em>документов</em> в ДБ MongoDB. Документы будут содержать поля тех типов, которые заданы в модели <code>Schema</code>.</p>
-</div>
+> **Примечание:** Каждой модели соответствует _коллекция_ _документов_ в ДБ MongoDB. Документы будут содержать поля тех типов, которые заданы в модели `Schema`.
 
-<h4 id="Определение_схем_данных">Определение схем данных</h4>
+#### Определение схем данных
 
-<p>Код ниже показывает, как можно задать простую схему. Сначала при помощи <code>require()</code> создаётся объект mongoose, затем конструктор Schema создаёт новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.</p>
+Код ниже показывает, как можно задать простую схему. Сначала при помощи `require()` создаётся объект mongoose, затем конструктор Schema создаёт новый экземпляр схемы, при этом различные поля задаются как параметры конструктора.
 
-<pre class="brush: js">//Требуется Mongoose
+```js
+//Требуется Mongoose
 var mongoose = require('mongoose');
 
 //Определяем схему
@@ -185,15 +151,16 @@ var SomeModelSchema = new Schema({
     a_string: String,
     a_date: Date
 });
-</pre>
+```
 
-<p>В примере созданы два поля, типа String и типа Date. В следующем разделе будут примеры полей других типов, их валидации и примеры других методов.</p>
+В примере созданы два поля, типа String и типа Date. В следующем разделе будут примеры полей других типов, их валидации и примеры других методов.
 
-<h4 id="Создание_модели">Создание модели</h4>
+#### Создание модели
 
-<p>Модели создаются из схем методом <code>mongoose.model()</code>:</p>
+Модели создаются из схем методом `mongoose.model()`:
 
-<pre class="brush: js">// Определяем схему
+```js
+// Определяем схему
 var Schema = mongoose.Schema;
 
 var SomeModelSchema = new Schema({
@@ -201,78 +168,70 @@ var SomeModelSchema = new Schema({
     a_date: Date
 });
 
-<strong>// Компилируем модель из схемы
-var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
+// Компилируем модель из схемы
+var SomeModel = mongoose.model('SomeModel', SomeModelSchema );
+```
 
-<p>Первый аргумент - уникальное имя создаваемой для модели коллекции(Mongoose создаст коллекцию для модели <em>SomeModel</em>), второй аргумент - схема, которая используется для создания модели.</p>
+Первый аргумент - уникальное имя создаваемой для модели коллекции(Mongoose создаст коллекцию для модели _SomeModel_), второй аргумент - схема, которая используется для создания модели.
 
-<div class="note">
-<p><strong>Примечание:</strong> После создания классов модели они могут применяться для создания, обновления или удаления записей в базе, для выполнения запросов по всем записям или по их подмножествам. Как это делать, будет показано в разделе <a href="#Using_models">Использование моделей</a>, и когда будут создаваться представления.</p>
-</div>
+> **Примечание:** После создания классов модели они могут применяться для создания, обновления или удаления записей в базе, для выполнения запросов по всем записям или по их подмножествам. Как это делать, будет показано в разделе [Использование моделей](#Using_models), и когда будут создаваться представления.
 
-<h4 id="Типы_схемы_(поля)">Типы схемы (поля)</h4>
+#### Типы схемы (поля)
 
-<p>Схема может содержать любое количество полей, причём каждое поле будет полем документа, хранимого в БД <em>MongoDB</em>. Схема-пример содержит определения многих широко используемых типов полей.</p>
+Схема может содержать любое количество полей, причём каждое поле будет полем документа, хранимого в БД _MongoDB_. Схема-пример содержит определения многих широко используемых типов полей.
 
-<pre class="brush: js">var schema = new Schema(
+```js
+var schema = new Schema(
 {
-  name: <strong>String</strong>,
-  binary: <strong>Buffer</strong>,
-  living: <strong>Boolean</strong>,
-  updated: { type: <strong>Date</strong>, default: Date.now },
-  age: { type: <strong>Number</strong>, min: 18, max: 65, required: true },
-  mixed: <strong>Schema.Types.Mixed</strong>,
-  _someId: <strong>Schema.Types.ObjectId</strong>,
-  array: <strong>[]</strong>,
-  ofString: [<strong>String</strong>], // You can also have an array of each of the other types too.
-  nested: { stuff: { type: <strong>String</strong>, lowercase: true, trim: true } }
-})</pre>
-
-<p>Большинство типов в <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (указаны после “type:” или после имён полей) достаточно очевидны. Исключения:</p>
-
-<ul>
- <li><code>ObjectId</code>: Представляет отдельный экземпляр модели в БД. Например, book может ссылаться на объект- автора. Поле будет содержать уникальный идентификатор (<code>_id</code>) отдельного объекта. При необходимости использования этой информации применяют метод <code>populate()</code>.</li>
- <li><a href="http://mongoosejs.com/docs/schematypes.html#mixed">Mixed</a>: Произвольный тип в схеме.</li>
- <li>[]: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.).  Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.</li>
-</ul>
-
-<p>Код содержит также два способа объявления полей:</p>
-
-<ul>
- <li><em>Имя</em>  и <em>тип</em>поля как пара "ключ-значение" (поля <code>name</code>, <code>binary и</code> <code>living</code>).</li>
- <li><em>Имя</em> поля, после которого указывается объект, определяющий <em>тип</em>  и  другие возможности  поля, такие как:
-  <ul>
-   <li>значения по умолчанию.</li>
-   <li>встроенные валидаторы (например, значения max и min) и функции-валидаторы пользователя.</li>
-   <li>Является ли поле обязательным</li>
-   <li>Должны ли строковые поля автоматически преобразовываться в нижний или верхний регистр, удалять ли ведущие и хвостовые пробелы (<code>пример:</code> <code>{ type: <strong>String</strong>, lowercase: true, trim: true }</code>)</li>
-  </ul>
- </li>
-</ul>
-
-<p>Дополнительная информация - в <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> (документация Mongoose).</p>
-
-<h4 id="Валидация_(проверка_допустимости)">Валидация (проверка допустимости)</h4>
-
-<p>Mongoose предусматривает встроенные валидаторы, валидаторы пользователя, синхронные и асинхронные валидаторы. Во всех случаях можно задать допустимые диапазоны или значения, а также сообщения об ошибках при нарушении условий валидации.</p>
-
-<p>Встроенные валидаторы включают:</p>
-
-<ul>
- <li>Все <a href="http://mongoosejs.com/docs/schematypes.html">SchemaTypes</a> имеют встроенный валидатор <a href="http://mongoosejs.com/docs/api.html#schematype_SchemaType-required">required</a>, который определяет, должно ли поле быть заданным перед сохранением документа.</li>
- <li><a href="http://mongoosejs.com/docs/api.html#schema-number-js">Числа</a> имеют валидаторы <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min">min</a> и <a href="http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max">max</a>.</li>
- <li><a href="http://mongoosejs.com/docs/api.html#schema-string-js">Строки</a>  имеют:
-  <ul>
-   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum">enum</a> (перечисления): задают множество допустимых для поля значений.</li>
-   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match">match</a> (соответствия)): задают регулярное выражение, которому должна соответствовать строка.</li>
-   <li><a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength">maxlength</a>, <a href="http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength">minlength</a> -максимальная и минимальная длина строки.</li>
-  </ul>
- </li>
-</ul>
-
-<p>Пример ниже (с небольшими изменениями из документации Mongoose) показывает, как задать некоторые валидаторы и сообщения об ошибках:</p>
-
-<pre class="brush: js"><code>
+  name: String,
+  binary: Buffer,
+  living: Boolean,
+  updated: { type: Date, default: Date.now },
+  age: { type: Number, min: 18, max: 65, required: true },
+  mixed: Schema.Types.Mixed,
+  _someId: Schema.Types.ObjectId,
+  array: [],
+  ofString: [String], // You can also have an array of each of the other types too.
+  nested: { stuff: { type: String, lowercase: true, trim: true } }
+})
+```
+
+Большинство типов в [SchemaTypes](http://mongoosejs.com/docs/schematypes.html) (указаны после “type:” или после имён полей) достаточно очевидны. Исключения:
+
+- `ObjectId`: Представляет отдельный экземпляр модели в БД. Например, book может ссылаться на объект- автора. Поле будет содержать уникальный идентификатор (`_id`) отдельного объекта. При необходимости использования этой информации применяют метод `populate()`.
+- [Mixed](http://mongoosejs.com/docs/schematypes.html#mixed): Произвольный тип в схеме.
+- \[]: Массив элементов. В таких моделях можно выполнять JavaScript-операции для массивов (push, pop, unshift, etc.). Выше показан пример массивы объектов неопределённого типа и массив строк, но можно использовать массив объектов любого типа.
+
+Код содержит также два способа объявления полей:
+
+- _Имя_ и *тип*поля как пара "ключ-значение" (поля `name`, `binary и` `living`).
+- _Имя_ поля, после которого указывается объект, определяющий _тип_ и другие возможности поля, такие как:
+
+  - значения по умолчанию.
+  - встроенные валидаторы (например, значения max и min) и функции-валидаторы пользователя.
+  - Является ли поле обязательным
+  - Должны ли строковые поля автоматически преобразовываться в нижний или верхний регистр, удалять ли ведущие и хвостовые пробелы (`пример:` `{ type: String, lowercase: true, trim: true }`)
+
+Дополнительная информация - в [SchemaTypes](http://mongoosejs.com/docs/schematypes.html) (документация Mongoose).
+
+#### Валидация (проверка допустимости)
+
+Mongoose предусматривает встроенные валидаторы, валидаторы пользователя, синхронные и асинхронные валидаторы. Во всех случаях можно задать допустимые диапазоны или значения, а также сообщения об ошибках при нарушении условий валидации.
+
+Встроенные валидаторы включают:
+
+- Все [SchemaTypes](http://mongoosejs.com/docs/schematypes.html) имеют встроенный валидатор [required](http://mongoosejs.com/docs/api.html#schematype_SchemaType-required), который определяет, должно ли поле быть заданным перед сохранением документа.
+- [Числа](http://mongoosejs.com/docs/api.html#schema-number-js) имеют валидаторы [min](http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-min) и [max](http://mongoosejs.com/docs/api.html#schema_number_SchemaNumber-max).
+- [Строки](http://mongoosejs.com/docs/api.html#schema-string-js) имеют:
+
+  - [enum](http://mongoosejs.com/docs/api.html#schema_string_SchemaString-enum) (перечисления): задают множество допустимых для поля значений.
+  - [match](http://mongoosejs.com/docs/api.html#schema_string_SchemaString-match) (соответствия)): задают регулярное выражение, которому должна соответствовать строка.
+  - [maxlength](http://mongoosejs.com/docs/api.html#schema_string_SchemaString-maxlength), [minlength](http://mongoosejs.com/docs/api.html#schema_string_SchemaString-minlength) -максимальная и минимальная длина строки.
+
+Пример ниже (с небольшими изменениями из документации Mongoose) показывает, как задать некоторые валидаторы и сообщения об ошибках:
+
+```js
+
     var breakfastSchema = new Schema({
       eggs: {
         type: Number,
@@ -285,88 +244,91 @@ var SomeModel = mongoose.model('SomeModel', SomeModelSchema );</strong></pre>
         enum: ['Coffee', 'Tea', 'Water',]
       }
     });
-</code></pre>
+```
 
-<p>Подробная информация по валидации полей - в разделе <a href="http://mongoosejs.com/docs/validation.html">Validation</a> (документация Mongoose).</p>
+Подробная информация по валидации полей - в разделе [Validation](http://mongoosejs.com/docs/validation.html) (документация Mongoose).
 
-<h4 id="Виртуальные_свойства">Виртуальные свойства</h4>
+#### Виртуальные свойства
 
-<p>Виртуальные свойства - это свойства документа, которые можно читать (get) и задавать (set), но которые не хранятся в MongoDB. Методы "геттеры" полезны для форматирования и соединения полей, а "сеттеры" применяют для декомпозиции отдельных значений на несколько частей перед сохранением в БД. Пример из документации собирает (и разбирает) виртуальное свойство "полное имя" из полей "имя" и "фамилия", что удобнее, чем конструировать  полное имя каждый раз, когда оно используется в шаблоне.</p>
+Виртуальные свойства - это свойства документа, которые можно читать (get) и задавать (set), но которые не хранятся в MongoDB. Методы "геттеры" полезны для форматирования и соединения полей, а "сеттеры" применяют для декомпозиции отдельных значений на несколько частей перед сохранением в БД. Пример из документации собирает (и разбирает) виртуальное свойство "полное имя" из полей "имя" и "фамилия", что удобнее, чем конструировать полное имя каждый раз, когда оно используется в шаблоне.
 
-<div class="note">
-<p><strong>Замечание:</strong> В библиотеке виртуальное свойство будет применено для определения уникального URL каждой записи в модели по пути и по значению <code>_id</code> записи.</p>
-</div>
+> **Примечание:** **Замечание:** В библиотеке виртуальное свойство будет применено для определения уникального URL каждой записи в модели по пути и по значению `_id` записи.
 
-<p>Подробная информация - в разделе  <a href="http://mongoosejs.com/docs/guide.html#virtuals">Virtuals</a> (документация Mongoose).</p>
+Подробная информация - в разделе [Virtuals](http://mongoosejs.com/docs/guide.html#virtuals) (документация Mongoose).
 
-<h4 id="Методы_и_помощники_запросов">Методы и помощники запросов</h4>
+#### Методы и помощники запросов
 
-<p>В схеме можно также задать методы экземпляра (<a href="http://mongoosejs.com/docs/guide.html#methods">instance methods</a>), статические (<a href="http://mongoosejs.com/docs/guide.html#statics">static</a>) методы и  <a href="http://mongoosejs.com/docs/guide.html#query-helpers">помощники запросов</a>. Статические методы и методы экземпляра аналогичны, но различаются тем, что методы экземпляра связаны с конкретной записью и имеют доступ к текущему объекту. Помощники запросов позволяют расширить <a href="http://mongoosejs.com/docs/queries.html"> API построителя цепочек запросов</a> (например, можно добавить запрос "byName"  ("по имени") в дополнение к методам <code>find()</code>, <code>findOne()</code> и <code>findById()</code>).</p>
+В схеме можно также задать методы экземпляра ([instance methods](http://mongoosejs.com/docs/guide.html#methods)), статические ([static](http://mongoosejs.com/docs/guide.html#statics)) методы и [помощники запросов](http://mongoosejs.com/docs/guide.html#query-helpers). Статические методы и методы экземпляра аналогичны, но различаются тем, что методы экземпляра связаны с конкретной записью и имеют доступ к текущему объекту. Помощники запросов позволяют расширить [API построителя цепочек запросов](http://mongoosejs.com/docs/queries.html) (например, можно добавить запрос "byName" ("по имени") в дополнение к методам `find()`, `findOne()` и `findById()`).
 
-<h3 id="Применение_моделей">Применение моделей</h3>
+### Применение моделей
 
-<p>Подготовленную схему можно использовать для создания моделей. Модель представляет коллекцию документов в базе данных, в которой можно выполнять поиск, тогда как экземпляры модели представляют отдельные документы, которые можно сохранять и извлекать.</p>
+Подготовленную схему можно использовать для создания моделей. Модель представляет коллекцию документов в базе данных, в которой можно выполнять поиск, тогда как экземпляры модели представляют отдельные документы, которые можно сохранять и извлекать.
 
-<p>Ниже предлагается краткий обзор. Более подробно смотрите в <a href="http://mongoosejs.com/docs/models.html">Models</a> (документация Mongoose).</p>
+Ниже предлагается краткий обзор. Более подробно смотрите в [Models](http://mongoosejs.com/docs/models.html) (документация Mongoose).
 
-<h4 id="Создание_и_изменение_документов">Создание и изменение документов</h4>
+#### Создание и изменение документов
 
-<p>Чтобы создать запись, следует определить экземпляр модели и вызвать метод <code>save()</code>.  В примере ниже SomeModel -- это модель с единственным полем "name",  которую мы создадим из нашей схемы.</p>
+Чтобы создать запись, следует определить экземпляр модели и вызвать метод `save()`. В примере ниже SomeModel -- это модель с единственным полем "name", которую мы создадим из нашей схемы.
 
-<pre class="brush: js"><code>// Создать экземпляр модели SomeModel
-var awesome_instance = new </code>SomeModel<code>({ name: 'awesome' });
+```js
+// Создать экземпляр модели SomeModel
+var awesome_instance = new SomeModel({ name: 'awesome' });
 
 // Сохранить новый экземпляр, передав callback
 awesome_instance.save(function (err) {
   if (err) return handleError(err);
   // сохранили!
 });
-</code></pre>
+```
 
-<p>Создание записей (а также обновления, удаления и запросы) - это асинхронные операции, поэтому следует предусмотреть колбэк-функцию, которая будет вызвана при завершении  операции. В API используется соглашение о первом аргументе, согласно которому первый аргумент колбэк-функции должен быть значением ошибки (или null). Если API возвращает некоторый результат, он должен быть вторым аргументом.</p>
+Создание записей (а также обновления, удаления и запросы) - это асинхронные операции, поэтому следует предусмотреть колбэк-функцию, которая будет вызвана при завершении операции. В API используется соглашение о первом аргументе, согласно которому первый аргумент колбэк-функции должен быть значением ошибки (или null). Если API возвращает некоторый результат, он должен быть вторым аргументом.
 
-<p>Можно использовать метод <code>create()</code> для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернёт ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.</p>
+Можно использовать метод `create()` для создании экземпляра модели при его сохранении. Тогда колбэк-функция вернёт ошибку (или null) как первый аргумент и только что созданный экземпляр как второй аргумент.
 
-<pre class="brush: js">SomeModel<code>.create({ name: 'also_awesome' }, function (err, awesome_instance) {
+```js
+SomeModel.create({ name: 'also_awesome' }, function (err, awesome_instance) {
   if (err) return handleError(err);
   // сохранили!
-});</code></pre>
+});
+```
 
-<p>Каждая модель ассоциирована с соединением (с соединением по умолчанию, если используется <code>mongoose.model()</code>). Следует создать новое соединение  и вызвать для него <code>.model()</code>, чтобы создать документ в другой базе данных.</p>
+Каждая модель ассоциирована с соединением (с соединением по умолчанию, если используется `mongoose.model()`). Следует создать новое соединение и вызвать для него `.model()`, чтобы создать документ в другой базе данных.
 
-<p>Поля в новой записи могут быть получены и изменены с применением dot (точка)-синтаксиса. Для сохранения изменений служат методы <code>save()</code> и <code>update()</code>.</p>
+Поля в новой записи могут быть получены и изменены с применением dot (точка)-синтаксиса. Для сохранения изменений служат методы `save()` и `update()`.
 
-<pre class="brush: js">// Доступ к полям модели в dot-нотации
-console.log(<code>awesome_instance.name</code>); //вывод в консоль '<code>also_awesome</code>'
+```js
+// Доступ к полям модели в dot-нотации
+console.log(awesome_instance.name); //вывод в консоль 'also_awesome'
 
 // Изменить запись, модифицируя поля, потом вызвать save().
-<code>awesome_instance</code>.name="New cool name";
-<code>awesome_instance.save(function (err) {
+awesome_instance.name="New cool name";
+awesome_instance.save(function (err) {
    if (err) return handleError(err); // сохранили!
-   });</code>
-</pre>
+   });
+```
 
-<h4 id="Поиск_записей">Поиск записей</h4>
+#### Поиск записей
 
-<p>При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведённый фрагмент кода (ниже) показывает, как в БД найти имена (<em>name</em>) и возраст (<em>age</em>) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.</p>
+При поиске записей методами запросов, условия поиска следует задавать как документ JSON. Приведённый фрагмент кода (ниже) показывает, как в БД найти имена (_name_) и возраст (_age_) всех спортсменов-теннисистов. Соответствие будет определяться по одному полю (sport), но можно добавить критерии поиска, задав, например, регулярное выражение, или удалить все критерии, чтобы получить список всех спортсменов.
 
-<pre class="brush: js"><code>var Athlete = mongoose.model('Athlete', yourSchema);
+```js
+var Athlete = mongoose.model('Athlete', yourSchema);
 
 // найти всех теннисистов, выбирать поля 'name' и 'age'
 Athlete.find({ 'sport': 'Tennis' }, 'name age', function (err, athletes) {
   if (err) return handleError(err);
   // 'athletes' содержит список спортсменов, соответствующих критерию.
-})</code></pre>
+})
+```
 
-<p>Если задать колбэк-функцию так, как показано выше, запрос будет выполнен немедленно. Однако колбэк-функция будет вызвана только после завершения поиска.</p>
+Если задать колбэк-функцию так, как показано выше, запрос будет выполнен немедленно. Однако колбэк-функция будет вызвана только после завершения поиска.
 
-<div class="note">
-<p><strong>Примечание:</strong> Все колбэк-функции в Mongoose используют образец <code>callback(error, result)</code>. Если при выполнении запроса возникает ошибка, параметр <code>error</code> будет содержать объект error, а <code>result</code> будет null. При успешном запросе параметр <code>error</code> будет null, а <code>result</code> будет содержать результат запроса.</p>
-</div>
+> **Примечание:** Все колбэк-функции в Mongoose используют образец `callback(error, result)`. Если при выполнении запроса возникает ошибка, параметр `error` будет содержать объект error, а `result` будет null. При успешном запросе параметр `error` будет null, а `result` будет содержать результат запроса.
 
-<p>Если не задать колбэк-функцию, API вернёт переменную типа <a href="http://mongoosejs.com/docs/api.html#query-js">Query</a>. Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода <code>exec()</code>.</p>
+Если не задать колбэк-функцию, API вернёт переменную типа [Query](http://mongoosejs.com/docs/api.html#query-js). Можно использовать объект запроса, чтобы создать и выполнить свой запрос (с колбэк-функцией) позже, при помощи метода `exec()`.
 
-<pre class="brush: js"><code>// найти всех теннисистов
+```js
+// найти всех теннисистов
 var query = Athlete.find({ 'sport': 'Tennis' });
 
 // выбрать поля 'name' и 'age'
@@ -382,58 +344,60 @@ query.sort({ age: -1 });
 query.exec(function (err, athletes) {
   if (err) return handleError(err);
   // athletes содержит упорядоченный список из 5 теннисистов
-})</code></pre>
+})
+```
 
-<p>Выше условия поиска были заданы в методе <code>find()</code>. Можно также использовать функцию <code>where()</code>, кроме того, можно соединить все части в одном запросе применением оператора dot (.) вместо того, чтобы выполнять их раздельно. Фрагмент кода (см. ниже) выполняет тот же запрос, что и предыдущий фрагмент, но с дополнительным условием для возраста. </p>
+Выше условия поиска были заданы в методе `find()`. Можно также использовать функцию `where()`, кроме того, можно соединить все части в одном запросе применением оператора dot (.) вместо того, чтобы выполнять их раздельно. Фрагмент кода (см. ниже) выполняет тот же запрос, что и предыдущий фрагмент, но с дополнительным условием для возраста.
 
-<pre><code>Athlete.
+```
+Athlete.
   find().
   where('sport').equals('Tennis').
   where('age').gt(17).lt(50).  //Дополнительное условие
   limit(5).
   sort({ age: -1 }).
   select('name age').
-  exec(callback); // callback - имя нашей колбэк-функции.</code></pre>
+  exec(callback); // callback - имя нашей колбэк-функции.
+```
 
-<p>Метод <a href="http://mongoosejs.com/docs/api.html#query_Query-find">find()</a> находит все записи, удовлетворяющие условию, но часто требуется найти только одну из таких записей. Вот методы для поиска одной записи:</p>
+Метод [find()](http://mongoosejs.com/docs/api.html#query_Query-find) находит все записи, удовлетворяющие условию, но часто требуется найти только одну из таких записей. Вот методы для поиска одной записи:
 
-<ul>
- <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findById">findById()</a></code>: Находит документ по заданному идентификатору <code>id</code> (каждый документ имеет уникальный идентификатор <code>id</code>).</li>
- <li><code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOne">findOne()</a></code>: Находит один документ, удовлетворяющий заданному критерию.</li>
- <li><code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove">findByIdAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate">findByIdAndUpdate()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove">findOneAndRemove()</a></code>, <code><a href="http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate">findOneAndUpdate()</a></code>: Находит один документ по <code>id</code> или по критерию, а затем или обновляет, или удаляет его. Эти методы весьма полезны для обновления или удаления записей.</li>
-</ul>
+- [`findById()`](http://mongoosejs.com/docs/api.html#model_Model.findById): Находит документ по заданному идентификатору `id` (каждый документ имеет уникальный идентификатор `id`).
+- [`findOne()`](http://mongoosejs.com/docs/api.html#query_Query-findOne): Находит один документ, удовлетворяющий заданному критерию.
+- [`findByIdAndRemove()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndRemove), [`findByIdAndUpdate()`](http://mongoosejs.com/docs/api.html#model_Model.findByIdAndUpdate), [`findOneAndRemove()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndRemove), [`findOneAndUpdate()`](http://mongoosejs.com/docs/api.html#query_Query-findOneAndUpdate): Находит один документ по `id` или по критерию, а затем или обновляет, или удаляет его. Эти методы весьма полезны для обновления или удаления записей.
 
-<div class="note">
-<p><strong>Примечание:</strong> Есть также метод <code><a href="http://mongoosejs.com/docs/api.html#model_Model.count">count()</a></code>, который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчётов без фактического извлечения записей.</p>
-</div>
+> **Примечание:** Есть также метод [`count()`](http://mongoosejs.com/docs/api.html#model_Model.count), который определяет количество записей, соответствующих условию. Он полезен при выполнении подсчётов без фактического извлечения записей.
 
-<p>Запросы полезны и во многих других случаях. Дополнительная информация - в <a href="http://mongoosejs.com/docs/queries.html">Queries</a> (документация Mongoose).</p>
+Запросы полезны и во многих других случаях. Дополнительная информация - в [Queries](http://mongoosejs.com/docs/queries.html) (документация Mongoose).
 
-<h4 id="Работа_со_связанными_документами_—_загрузка">Работа со связанными документами — загрузка</h4>
+#### Работа со связанными документами — загрузка
 
-<p>Один документ (экземпляр модели) может ссылаться на другой документ при помощи поля <code>ObjectId</code> схемы, или на много других документов, используя массив идентификаторов <code>ObjectIds</code>. Идентификатор соответствующей модели хранится в поле. При необходимости получить действительное содержимое связанного документа, следует использовать в запросе метод <code><a href="http://mongoosejs.com/docs/api.html#query_Query-populate">populate()</a></code>, который заменит идентификатор в запросе действительными данными.</p>
+Один документ (экземпляр модели) может ссылаться на другой документ при помощи поля `ObjectId` схемы, или на много других документов, используя массив идентификаторов `ObjectIds`. Идентификатор соответствующей модели хранится в поле. При необходимости получить действительное содержимое связанного документа, следует использовать в запросе метод [`populate()`](http://mongoosejs.com/docs/api.html#query_Query-populate), который заменит идентификатор в запросе действительными данными.
 
-<p>Например, в следующей схеме определены авторы и рассказы. У каждого автора может быть несколько рассказов, которые представим массивом ссылок of <code>ObjectId</code>. У каждого рассказа может быть только один автор. Ссылка "ref" (выделена жирным) указывает в схеме, какая модель должна быть связана с этим полем.</p>
+Например, в следующей схеме определены авторы и рассказы. У каждого автора может быть несколько рассказов, которые представим массивом ссылок of `ObjectId`. У каждого рассказа может быть только один автор. Ссылка "ref" (выделена жирным) указывает в схеме, какая модель должна быть связана с этим полем.
 
-<pre class="brush: js"><code>var mongoose = require('mongoose')
+```js
+var mongoose = require('mongoose')
   , Schema = mongoose.Schema
 
 var authorSchema = Schema({
   name    : String,
-  stories : [{ type: Schema.Types.ObjectId, <strong>ref</strong>: 'Story' }]
+  stories : [{ type: Schema.Types.ObjectId, ref: 'Story' }]
 });
 
 var storySchema = Schema({
-  author : { type: Schema.Types.ObjectId, <strong>ref</strong>: 'Author' },
+  author : { type: Schema.Types.ObjectId, ref: 'Author' },
   title    : String
 });
 
 var Story  = mongoose.model('Story', storySchema);
-var Author = mongoose.model('Author', authorSchema);</code></pre>
+var Author = mongoose.model('Author', authorSchema);
+```
 
-<p>Можно сохранить ссылки в связанном документе, используя значение идентификатора <code>_id</code>. Ниже создаётся автор, затем   рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.</p>
+Можно сохранить ссылки в связанном документе, используя значение идентификатора `_id`. Ниже создаётся автор, затем рассказ, и значение идентификатора id автора сохраняется в поле "author" рассказа.
 
-<pre class="brush: js"><code>var bob = new Author({ name: 'Bob Smith' });
+```js
+var bob = new Author({ name: 'Bob Smith' });
 
 bob.save(function (err) {
   if (err) return handleError(err);
@@ -448,40 +412,43 @@ bob.save(function (err) {
     if (err) return handleError(err);
     // У Боба теперь есть рассказ!
   });
-});</code></pre>
+});
+```
 
-<p>Теперь документ "story" ссылается на автора по идентификатору документа "author". Для получения информации об авторе применяется метод <code>populate()</code> (показано ниже).</p>
+Теперь документ "story" ссылается на автора по идентификатору документа "author". Для получения информации об авторе применяется метод `populate()` (показано ниже).
 
-<pre class="brush: js"><code>Story
+```js
+Story
 .findOne({ title: 'Bob goes sledding' })
 .populate('author') //подменяет идентификатор автора информацией об авторе!
 .exec(function (err, story) {
   if (err) return handleError(err);
   console.log('The author is %s', story.author.name);
   // выводит "The author is Bob Smith"
-});</code></pre>
-
-<div class="note">
-<p><strong>Примечание:</strong> Внимательные читатели заметили, что автор добавлен к рассказу, но ничего не сделано, чтобы добавить рассказ к массиву рассказов <code>stories</code> автора. Как же тогда получить список всех рассказов конкретного автора? Один из возможных вариантов - добавить автора в массив рассказов, но при этом пришлось бы хранить данные об авторах и рассказах в двух местах и поддерживать их актуальность.</p>
-
-<p>Лучше получить <code>_id</code> нашего автора <em>author</em>, и применить <code>find()</code> для поиска этого идентификатора в поле "author" всех рассказов.</p>
+});
+```
 
-<pre class="brush: js"><code>Story
-.find({ author : bob._id })
-.exec(function (err, stories) {
-  if (err) return handleError(err);
-  // возвращает все рассказы, у которых идентификатор Боба.
-});</code>
-</pre>
-</div>
+> **Примечание:** Внимательные читатели заметили, что автор добавлен к рассказу, но ничего не сделано, чтобы добавить рассказ к массиву рассказов `stories` автора. Как же тогда получить список всех рассказов конкретного автора? Один из возможных вариантов - добавить автора в массив рассказов, но при этом пришлось бы хранить данные об авторах и рассказах в двух местах и поддерживать их актуальность.
+>
+> Лучше получить `_id` нашего автора _author_, и применить `find()` для поиска этого идентификатора в поле "author" всех рассказов.
+>
+> ```js
+> Story
+> .find({ author : bob._id })
+> .exec(function (err, stories) {
+>   if (err) return handleError(err);
+>   // возвращает все рассказы, у которых идентификатор Боба.
+> });
+> ```
 
-<p>Это почти все, что следует знать для работы со связанными данными <em>в нашем руководстве</em>. Более полную информацию можно найти в <a href="http://mongoosejs.com/docs/populate.html">Population</a> (документация Mongoose).</p>
+Это почти все, что следует знать для работы со связанными данными _в нашем руководстве_. Более полную информацию можно найти в [Population](http://mongoosejs.com/docs/populate.html) (документация Mongoose).
 
-<h3 id="Одна_схема_(модель)_-_один_файл">Одна схема (модель) - один файл</h3>
+### Одна схема (модель) - один файл
 
-<p>Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле),  экспортируя метод для создания модели. Пример приведён ниже:</p>
+Можно использовать любую структуру файлов при создании схем и моделей, однако мы настоятельно рекомендуем определять каждую схему модели в отдельном модуле (файле), экспортируя метод для создания модели. Пример приведён ниже:
 
-<pre class="brush: js"><code>// Файл: ./models/somemodel.js
+```js
+// Файл: ./models/somemodel.js
 
 //Требуется Mongoose
 var mongoose = require('mongoose');
@@ -494,121 +461,109 @@ var SomeModelSchema = new Schema({
     a_date            : Date,
 });
 
-<strong>//экспортируется функция для содания класса модели "SomeModel"
-module.exports = mongoose.model('SomeModel', SomeModelSchema );</strong></code></pre>
+//экспортируется функция для содания класса модели "SomeModel"
+module.exports = mongoose.model('SomeModel', SomeModelSchema );
+```
 
-<p>You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.</p>
+You can then require and use the model immediately in other files. Below we show how you might use it to get all instances of the model.
 
-<pre class="brush: js"><code>//Создаём модель SomeModel просто вызовом модуля из файла
+```js
+//Создаём модель SomeModel просто вызовом модуля из файла
 var SomeModel = require('../models/somemodel')
 
 // Используем объект SomeModel (модель) для поиска всех записей в SomeModel
-SomeModel.find(callback_function);</code></pre>
-
-<h2 id="Установка_базы_данных_MongoDB">Установка базы данных MongoDB</h2>
-
-<p>Мы уже немного понимаем,  что может делать Mongoose и как следует проектировать  модели. Теперь самое время начать работу над сайтом  <em>LocalLibrary</em>. Самое первое, что мы должны сделать - установить базу данных MongoDb, в которой будут храниться данные нашей   библиотеки.</p>
-
-<p>В этом руководстве мы будем использовать базу данных в "песочнице" ("<a href="https://mlab.com/plans/pricing/">sandbox</a>") - бесплатный облачный сервис, предоставляемый  <a href="https://mlab.com/welcome/">mLab</a>. Такая база не очень подходит для промышленных веб-сайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем её, так как она бесплатна, её легко установить, и потому что mLab - популярный поставщик  <em>базы данных как сервиса, </em>и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают <a href="https://www.compose.com/">Compose</a>, <a href="https://scalegrid.io/pricing.html">ScaleGrid</a> и <a href="https://www.mongodb.com/cloud/atlas">MongoDB Atlas</a>).</p>
-
-<div class="note">
-<p><strong>Примечание:</strong> При желании можно установить БД  MongoDb локально, загрузив и установив <a href="https://www.mongodb.com/download-center">подходящие для вашей системы двоичные файлы</a>. В этом случае приводимые ниже инструкции не изменятся, за исключением URL базы данных, который нужно будет задать для установки соединения.</p>
-</div>
-
-<p>Первым делом надо <a href="https://mlab.com/signup/">создать аккаунт</a> на mLab (это бесплатно, требует только основных контактных данных и ознакомления с условиями обслуживания). </p>
-
-<p>После входа в систему вы увидите главную страницу <a href="https://mlab.com/home">home</a>:</p>
-
-<ol>
- <li>Щёлкните <strong>Create New</strong> в разделе <em>MongoDB Deployments</em> для создания новой БД.<img alt="" src="https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png" style="height: 415px; width: 1000px;"></li>
- <li>Откроется экран <em>Cloud Provider Selection -  раздела провайдера облака</em>.<br>
-  <img alt="MLab - screen for new deployment" src="https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png" style="height: 931px; width: 1297px;"><br>
-
-  <ul>
-   <li>Выберите план SANDBOX (Free) из раздела Plan Type (тип плана). </li>
-   <li>Выберите любого провайдера в разделе <em>Cloud Provider (провайдер облака)</em>. Разные провайдеры обслуживают разные регионы (показаны под выбранным типом плана).</li>
-   <li>Щёлкните кнопку <strong>Continue</strong>.</li>
-  </ul>
- </li>
- <li>Откроется экран выбора региона <em>Select Region</em>.
-  <p><img alt="Select new region screen" src="https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png" style="height: 570px; width: 1293px;"></p>
-
-  <ul>
-   <li>
-    <p>Выберите ближайший к вам регион и щёлкните кнопку <strong>Continue</strong>.</p>
-   </li>
-  </ul>
- </li>
- <li>
-  <p>Откроется экран <em>Final Details </em>для ввода названия БД.</p>
-
-  <ul>
-   <li>
-    <p>Введите имя новой базы -  <code>local_library</code> и нажмите <strong>Continue</strong>.</p>
-   </li>
-  </ul>
- </li>
- <li>
-  <p>Откроется экран подтверждения заказа <em>Order Confirmation</em>.<br>
-   <img alt="Order confirmation screen" src="https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png" style="height: 687px; width: 1290px;"></p>
-
-  <ul>
-   <li>
-    <p>Щёлкните <strong>Submit Order</strong> (подтвердить заказ), чтобы создать БД.</p>
-   </li>
-  </ul>
- </li>
- <li>
-  <p>Вы вернётесь на главный (home) экран. Щёлкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).<br>
-   <img alt="mLab - Database details screen" src="https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png" style="height: 700px; width: 1398px;"><br>
-    <br>
-   На форме выше обведён URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введёт этот URL.</p>
- </li>
- <li>Щёлкните по вкладке <strong>Users</strong> и выберите кнопку <strong>Add database user </strong>(добавить пользователя БД).</li>
- <li>Введите имя пользователя и пароль (дважды), затем нажмите <strong>Create </strong>(создать). Не отмечайте <em>Make read only </em>(только для чтения)!<br>
-  <img alt="" src="https://mdn.mozillademos.org/files/14454/mLab_database_users.png" style="height: 204px; width: 600px;"></li>
-</ol>
-
-<p>Теперь БД создана, и для доступа к ней есть URL, имя пользователя и пароль. Это должно выглядеть примерно так: <code>mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library</code>.</p>
-
-<h2 id="Установка_Mongoose">Установка Mongoose</h2>
-
-<p>Откройте окно команд и перейдите в каталог, в котором создан  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">каркас веб-сайта Local Library</a>. Введите команду install, чтобы установить Mongoose (и её зависимости), а также добавьте её в файл <strong>package.json</strong>, если вы ещё не сделали этого ранее, при чтении <a href="#Installing_Mongoose_and_MongoDB">Учебника по Mongoose</a>.</p>
-
-<pre class="brush: bash">npm install mongoose
-</pre>
-
-<h2 id="Подключение_к_MongoDB">Подключение к MongoDB</h2>
-
-<p>Откройте <strong>/app.js</strong> (в корне проекта) и скопируйте приведённый ниже текст, в котором  объявляется <em>объект приложения</em> <em>Express</em> (после строки <code>var app = express();</code>). Замените строку url БД ('<em>insert_your_database_url_here</em>') тем URL, который представляет вашу БД  (т.е. используйте информацию, полученную от<a href="#Setting_up_the_MongoDB_database"> mLab</a>).</p>
-
-<pre class="brush: js">//Устанавливаем соединение с mongoose
+SomeModel.find(callback_function);
+```
+
+## Установка базы данных MongoDB
+
+Мы уже немного понимаем, что может делать Mongoose и как следует проектировать модели. Теперь самое время начать работу над сайтом _LocalLibrary_. Самое первое, что мы должны сделать - установить базу данных MongoDb, в которой будут храниться данные нашей библиотеки.
+
+В этом руководстве мы будем использовать базу данных в "песочнице" ("[sandbox](https://mlab.com/plans/pricing/)") - бесплатный облачный сервис, предоставляемый [mLab](https://mlab.com/welcome/). Такая база не очень подходит для промышленных веб-сайтов, поскольку не имеет избыточности, но она очень удобна для разработки и прототипирования. Мы используем её, так как она бесплатна, её легко установить, и потому что mLab - популярный поставщик _базы данных как сервиса,_ и это может быть разумным выбором для промышленной базы данных (на данный момент другие известные возможности включают [Compose](https://www.compose.com/), [ScaleGrid](https://scalegrid.io/pricing.html) и [MongoDB Atlas](https://www.mongodb.com/cloud/atlas)).
+
+> **Примечание:** При желании можно установить БД MongoDb локально, загрузив и установив [подходящие для вашей системы двоичные файлы](https://www.mongodb.com/download-center). В этом случае приводимые ниже инструкции не изменятся, за исключением URL базы данных, который нужно будет задать для установки соединения.
+
+Первым делом надо [создать аккаунт](https://mlab.com/signup/) на mLab (это бесплатно, требует только основных контактных данных и ознакомления с условиями обслуживания).
+
+После входа в систему вы увидите главную страницу [home](https://mlab.com/home):
+
+1.  Щёлкните **Create New** в разделе _MongoDB Deployments_ для создания новой БД.![](https://mdn.mozillademos.org/files/14446/mLabCreateNewDeployment.png)
+2.  Откроется экран _Cloud Provider Selection - раздела провайдера облака_.
+    ![MLab - screen for new deployment](https://mdn.mozillademos.org/files/15661/mLab_new_deployment_form_v2.png)
+
+    - Выберите план SANDBOX (Free) из раздела Plan Type (тип плана).
+    - Выберите любого провайдера в разделе _Cloud Provider (провайдер облака)_. Разные провайдеры обслуживают разные регионы (показаны под выбранным типом плана).
+    - Щёлкните кнопку **Continue**.
+
+3.  Откроется экран выбора региона _Select Region_.
+
+    ![Select new region screen](https://mdn.mozillademos.org/files/15662/mLab_new_deployment_select_region_v2.png)
+
+    - Выберите ближайший к вам регион и щёлкните кнопку **Continue**.
+
+4.  Откроется экран _Final Details_ для ввода названия БД.
+
+    - Введите имя новой базы - `local_library` и нажмите **Continue**.
+
+5.  Откроется экран подтверждения заказа _Order Confirmation_.
+    ![Order confirmation screen](https://mdn.mozillademos.org/files/15664/mLab_new_deployment_order_confirmation.png)
+
+    - Щёлкните **Submit Order** (подтвердить заказ), чтобы создать БД.
+
+6.  Вы вернётесь на главный (home) экран. Щёлкните по вновь созданной базе, чтобы открыть экран с детальной информацией. Как видно, в БД нет коллекций (данных).
+    ![mLab - Database details screen](https://mdn.mozillademos.org/files/15665/mLab_new_deployment_database_details.png)
+
+    На форме выше обведён URL для соединения с вашей БДthat you need to use to access your database is displayed on the form above (shown for this database circled above). Чтобы его использовать, необходимо создать пользователя БД, который позже введёт этот URL.
+
+7.  Щёлкните по вкладке **Users** и выберите кнопку **Add database user** (добавить пользователя БД).
+8.  Введите имя пользователя и пароль (дважды), затем нажмите **Create** (создать). Не отмечайте _Make read only_ (только для чтения)!
+    ![](https://mdn.mozillademos.org/files/14454/mLab_database_users.png)
+
+Теперь БД создана, и для доступа к ней есть URL, имя пользователя и пароль. Это должно выглядеть примерно так: `mongodb://your_user_namer:your_password@ds119748.mlab.com:19748/local_library`.
+
+## Установка Mongoose
+
+Откройте окно команд и перейдите в каталог, в котором создан [каркас веб-сайта Local Library](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website). Введите команду install, чтобы установить Mongoose (и её зависимости), а также добавьте её в файл **package.json**, если вы ещё не сделали этого ранее, при чтении [Учебника по Mongoose](#Installing_Mongoose_and_MongoDB).
+
+```bash
+npm install mongoose
+```
+
+## Подключение к MongoDB
+
+Откройте **/app.js** (в корне проекта) и скопируйте приведённый ниже текст, в котором объявляется _объект приложения_ _Express_ (после строки `var app = express();`). Замените строку url БД ('_insert_your_database_url_here_') тем URL, который представляет вашу БД (т.е. используйте информацию, полученную от[ mLab](#Setting_up_the_MongoDB_database)).
+
+```js
+//Устанавливаем соединение с mongoose
 var mongoose = require('mongoose');
-var mongoDB = '<em>insert_your_database_url_here</em>';//замените url!!!
+var mongoDB = 'insert_your_database_url_here';//замените url!!!
 mongoose.connect(mongoDB);
 mongoose.Promise = global.Promise;
 var db = mongoose.connection;
-db.on('error', console.error.bind(console, 'MongoDB connection error:'));</pre>
+db.on('error', console.error.bind(console, 'MongoDB connection error:'));
+```
 
-<p>Как указано ранее в <a href="#Connecting_to_MongoDB">Учебнике по Mongoose</a>, этот код задаёт соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль). </p>
+Как указано ранее в [Учебнике по Mongoose](#Connecting_to_MongoDB), этот код задаёт соединение по умолчанию с привязкой события ошибки error (так что ошибки будут выведены в консоль).
 
-<h2 id="Определение_схемы_LocalLibrary">Определение схемы LocalLibrary</h2>
+## Определение схемы LocalLibrary
 
-<p>Мы определим отдельный модуль для каждой модели как уже обсуждалось <a href="#One_schemamodel_per_file">выше</a>. Начнём с создания каталога для моделей в корне проекта (<strong>/models</strong>), после чего создадим отдельные файлы для каждой модели:</p>
+Мы определим отдельный модуль для каждой модели как уже обсуждалось [выше](#One_schemamodel_per_file). Начнём с создания каталога для моделей в корне проекта (**/models**), после чего создадим отдельные файлы для каждой модели:
 
-<pre>/express-locallibrary-tutorial  //the project root
-  <strong>/models</strong>
-    <strong>author.js</strong>
-    <strong>book.js</strong>
-    <strong>bookinstance.js</strong>
-    <strong>genre.js</strong>
-</pre>
+```
+/express-locallibrary-tutorial  //the project root
+  /models
+    author.js
+    book.js
+    bookinstance.js
+    genre.js
+```
 
-<h3 id="Модель_автора_Author">Модель автора Author</h3>
+### Модель автора Author
 
-<p>Скопируйте код схемы автора <code>Author</code> (приведён ниже) в файл <strong>./models/author.js</strong> . В схеме определено, что у автора есть обязательные поля имени и фамилии типа <code>String</code>  длиной не более 100 символов, и поля типа <code>Date</code> дата рождения и дата смерти.</p>
+Скопируйте код схемы автора `Author` (приведён ниже) в файл **./models/author.js** . В схеме определено, что у автора есть обязательные поля имени и фамилии типа `String` длиной не более 100 символов, и поля типа `Date` дата рождения и дата смерти.
 
-<pre class="brush: js">var mongoose = require('mongoose');
+```js
+var mongoose = require('mongoose');
 
 var Schema = mongoose.Schema;
 
@@ -621,12 +576,12 @@ var AuthorSchema = new Schema(
   }
 );
 
-<strong>// Виртуальное свойство для полного имени автора
+// Виртуальное свойство для полного имени автора
 AuthorSchema
 .virtual('name')
 .get(function () {
   return this.family_name + ', ' + this.first_name;
-});</strong>
+});
 
 // Виртуальное свойство - URL автора
 AuthorSchema
@@ -637,33 +592,31 @@ AuthorSchema
 
 //Export model
 module.exports = mongoose.model('Author', AuthorSchema);
+```
 
-</pre>
-
-<p>Мы объявим также в схеме AuthorSchema <a href="#Virtual_properties">виртуальное</a> свойство "url" , которое позволит получить абсолютный  URL конкретного экземпляра модели — используем это свойство  в шаблонах, если потребуется получить связь с конкретным автором.</p>
+Мы объявим также в схеме AuthorSchema [виртуальное](#Virtual_properties) свойство "url" , которое позволит получить абсолютный URL конкретного экземпляра модели — используем это свойство в шаблонах, если потребуется получить связь с конкретным автором.
 
-<div class="note">
-<p><strong>Примечание:</strong> Объявить  в схеме URL как виртуальные свойства - хорошая идея,  т.к. URL отдельного элемента при необходимости изменения требует коррекции только в одном месте.<br>
- Сейчас связь при помощи этого URL ещё не работает, так как у нас ещё нет кода, поддерживающего маршруты для экземпляров модели.  Мы построим его в следующей статье!</p>
-</div>
+> **Примечание:** Объявить в схеме URL как виртуальные свойства - хорошая идея, т.к. URL отдельного элемента при необходимости изменения требует коррекции только в одном месте.
+> Сейчас связь при помощи этого URL ещё не работает, так как у нас ещё нет кода, поддерживающего маршруты для экземпляров модели. Мы построим его в следующей статье!
 
-<p>В конце модуля экспортируется модель.</p>
+В конце модуля экспортируется модель.
 
-<h3 id="Модель_книги_Book">Модель книги Book</h3>
+### Модель книги Book
 
-<p>Скопируйте код схемы <code>Book</code> (приведён ниже) в файл <strong>./models/book.js</strong>. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения  URL конкретных книг, затем модель экспортируется.</p>
+Скопируйте код схемы `Book` (приведён ниже) в файл **./models/book.js**. Большая часть кода подобна коду для модели автора — объявляется схема с рядом строковых полей, с виртуальным свойством URL для получения URL конкретных книг, затем модель экспортируется.
 
-<pre class="brush: js">var mongoose = require('mongoose');
+```js
+var mongoose = require('mongoose');
 
 var Schema = mongoose.Schema;
 
 var BookSchema = new Schema(
   {
     title: {type: String, required: true},
-  <strong>  author: {type: Schema.ObjectId, ref: 'Author', required: true},</strong>
+    author: {type: Schema.ObjectId, ref: 'Author', required: true},
     summary: {type: String, required: true},
     isbn: {type: String, required: true},
-  <strong>  genre: [{type: Schema.ObjectId, ref: 'Genre'}]</strong>
+    genre: [{type: Schema.ObjectId, ref: 'Genre'}]
   }
 );
 
@@ -676,20 +629,19 @@ BookSchema
 
 //Export model
 module.exports = mongoose.model('Book', BookSchema);
-</pre>
+```
 
-<p>Основное отличие в том, что созданы две ссылки на другие модели:</p>
+Основное отличие в том, что созданы две ссылки на другие модели:
 
-<ul>
- <li>author - это ссылка на единственный объект модели <code>Author</code> , обязательный элемент.</li>
- <li>genre (жанр) - ссылка на массив объектов модели <code>Genre</code>. Эта модель ещё не объявлена!</li>
-</ul>
+- author - это ссылка на единственный объект модели `Author` , обязательный элемент.
+- genre (жанр) - ссылка на массив объектов модели `Genre`. Эта модель ещё не объявлена!
 
-<h3 id="Модель_экземпляра_книги_BookInstance">Модель экземпляра книги BookInstance</h3>
+### Модель экземпляра книги BookInstance
 
-<p>Наконец, скопируйте код схемы <code>BookInstance</code> (приведён ниже) в файл <strong>./models/bookinstance.js</strong>. Схема <code>BookInstance</code> представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.</p>
+Наконец, скопируйте код схемы `BookInstance` (приведён ниже) в файл **./models/bookinstance.js**. Схема `BookInstance` представляет конкретный экземпляр книги, которую можно одолжить на время, и содержит информацию о доступности экземпляров книги, о дате возврата одолженной книги, о деталях версии или печатного экземпляра.
 
-<pre class="brush: js">var mongoose = require('mongoose');
+```js
+var mongoose = require('mongoose');
 
 var Schema = mongoose.Schema;
 
@@ -697,8 +649,8 @@ var BookInstanceSchema = new Schema(
   {
     book: { type: Schema.ObjectId, ref: 'Book', required: true }, //ссылка на книгу
     imprint: {type: String, required: true},
-    status: {type: String, required: true, <strong>enum: ['Available', 'Maintenance', 'Loaned', 'Reserved']</strong>, <strong>default: 'Maintenance'</strong>},
-    due_back: {type: Date, <strong>default: Date.now</strong>}
+    status: {type: String, required: true, enum: ['Available', 'Maintenance', 'Loaned', 'Reserved'], default: 'Maintenance'},
+    due_back: {type: Date, default: Date.now}
   }
 );
 
@@ -710,91 +662,80 @@ BookInstanceSchema
 });
 
 //Export model
-module.exports = mongoose.model('BookInstance', BookInstanceSchema);</pre>
+module.exports = mongoose.model('BookInstance', BookInstanceSchema);
+```
+
+В этой схеме новыми являются опции поля:
+
+- `enum`: Позволяет указать допустимые значения строки. В нашем случае используются, чтобы задать статус доступности книги (применение enum (перечисления) означает, что мы ходим предотвратить ошибочное написание и произвольные значения статуса)
+- `default`: определяет значение статуса по умолчанию (maintenance) при создании экземпляра книги, и дату `due_back `возврата книги (`now,` сейчас). Отметьте, как используется функция Date при установке даты!
+
+Все остальное знакомо по предыдущим схемам.
 
-<p>В этой схеме новыми являются опции поля:</p>
+### Модель жанра Genre - проверьте себя!
 
-<ul>
- <li><code>enum</code>: Позволяет указать допустимые значения строки. В нашем случае используются, чтобы задать статус доступности книги (применение enum (перечисления) означает, что мы ходим предотвратить ошибочное написание и произвольные значения статуса)</li>
- <li><code>default</code>: определяет значение статуса по умолчанию (maintenance) при создании  экземпляра книги, и дату <code>due_back </code>возврата книги (<code>now,</code> сейчас). Отметьте, как используется функция  Date при установке даты!</li>
-</ul>
+Откройте файл **./models/genre.js** и создайте схему для хранения жанра (категории книги, т.е. художественная или научная, романтика или военная история и т.д.).
 
-<p>Все остальное знакомо по предыдущим схемам.</p>
+Определение будет подобно другим моделям:
 
-<h3 id="Модель_жанра_Genre_-_проверьте_себя!">Модель жанра Genre - проверьте себя!</h3>
+- В модели должно быть поле `name` типа `String` для указания жанра.
+- Это поле должно быть обязательным, допустимый размер - от 3 до 100 символов.
+- Объявите виртуальное ([virtual](#Virtual_properties)) свойство с именем `url` для URL жанра.
+- Экспортируйте модель.
 
-<p>Откройте файл <strong>./models/genre.js</strong>  и создайте схему для хранения жанра (категории книги, т.е. художественная или научная, романтика или военная история и т.д.).</p>
+## Тестирование — создаём элементы БД
 
-<p>Определение будет подобно другим моделям:</p>
+Вот так. У нас теперь есть все модели для создания сайта!
 
-<ul>
- <li>В модели должно быть поле <code>name</code> типа <code>String</code> для указания жанра.</li>
- <li>Это поле должно быть обязательным, допустимый размер - от 3 до 100 символов.</li>
- <li>Объявите виртуальное (<a href="#Virtual_properties">virtual</a>) свойство с именем <code>url</code>  для URL жанра.</li>
- <li>Экспортируйте модель.</li>
-</ul>
+Для тестирования моделей (и для создания примеров книг и других элементов, которые потребуются в следующих статьях) выполним _независимый_ скрипт, который создаст элементы каждого типа:
 
-<h2 id="Тестирование_—_создаём_элементы_БД">Тестирование — создаём элементы БД</h2>
+1.  Загрузите (или создайте) файл [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js) в каталоге _express-locallibrary-tutorial_ (на том же уровне, что и `package.json`).
 
-<p>Вот так. У нас теперь есть все модели для создания сайта!</p>
+    > **Примечание:** Не обязательно понимать, как работает [populatedb.js](https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js); он просто помещает некоторые данные в базу данных.
 
-<p>Для тестирования моделей (и для создания примеров книг и других элементов, которые потребуются в следующих статьях) выполним <em>независимый </em>скрипт, который создаст элементы каждого типа:</p>
+2.  Введите в корне проекта команду для установки модуля _async,_ который потребуется скрипту populatedb.js (роль async обсудим в следующих руководствах)
 
-<ol>
- <li>Загрузите (или создайте) файл <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a> в каталоге <em>express-locallibrary-tutorial</em> (на том же уровне, что и <code>package.json</code>).
+    ```bash
+    npm install async
+    ```
 
-  <div class="note">
-  <p><strong>Примечание:</strong> Не обязательно понимать, как работает <a href="https://raw.githubusercontent.com/hamishwillee/express-locallibrary-tutorial/master/populatedb.js">populatedb.js</a>; он просто помещает некоторые данные в базу данных.</p>
-  </div>
- </li>
- <li>Введите в корне проекта команду для установки модуля <em>async, </em>который потребуется скрипту populatedb.js (роль async обсудим в следующих руководствах)
-  <pre class="brush: bash">npm install async</pre>
- </li>
- <li>Запустите скрипт из командной строки, используя node. В качестве параметра укажите URL вашей БД <em>MongoDB</em> (тот самый, которым вы ранее заменили <em>insert_your_database_url_here </em>в<em> </em>файле <code>app.js</code> ):
-  <pre class="brush: bash">node populatedb &lt;your mongodb url&gt;​​​​</pre>
- </li>
- <li>Скрипт должен выполниться до конца, выводя в терминал создаваемые элементы.</li>
-</ol>
+3.  Запустите скрипт из командной строки, используя node. В качестве параметра укажите URL вашей БД _MongoDB_ (тот самый, которым вы ранее заменили _insert_your_database_url_here_ в\_ \_файле `app.js` ):
 
-<div class="note">
-<p><strong>Совет:</strong> Откройте свою базу на <a href="https://mlab.com/home">Lab</a>. Вы сможете увидеть коллекции Book, Author, Genre, BookInstance (книги, авторы, жанры, экземпляры книг) и просмотреть содержащиеся в них документы.</p>
-</div>
+    ```bash
+    node populatedb <your mongodb url>​​​​
+    ```
 
-<h2 id="Итог">Итог</h2>
+4.  Скрипт должен выполниться до конца, выводя в терминал создаваемые элементы.
 
-<p>В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей <code>Book</code>, <code>BookInstance</code>, <code>Author</code> и <code>Genre</code> для веб-сайта <em>LocalLibrary</em>.</p>
+> **Примечание:** **Совет:** Откройте свою базу на [Lab](https://mlab.com/home). Вы сможете увидеть коллекции Book, Author, Genre, BookInstance (книги, авторы, жанры, экземпляры книг) и просмотреть содержащиеся в них документы.
 
-<p>В конце мы испытали свои модели путём создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.</p>
+## Итог
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+В этой статье мы познакомились с БД и ОРМ (объектно-реляционными моделями) в системе Node/Express, узнали, как определяются схемы и модели Mongoose. Мы применили эти знания при проектировании и реализации моделей `Book`, `BookInstance`, `Author` и `Genre` для веб-сайта _LocalLibrary_.
 
-<ul>
- <li><a href="https://expressjs.com/en/guide/database-integration.html">Database integration</a> Интеграция БД (документация Express)</li>
- <li><a href="http://mongoosejs.com/">Mongoose website</a> Веб-сайт Mongoose (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/guide.html">Mongoose Guide</a> Справочник Mongoose (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/validation.html">Validation</a> Валидация (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/schematypes.html">Schema Types</a> Типы в схемах (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/models.html">Models</a> Модели (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/queries.html">Queries</a> Запросы (документация Mongoose)</li>
- <li><a href="http://mongoosejs.com/docs/populate.html">Population</a> Пополнение БД (документация Mongoose)</li>
-</ul>
+В конце мы испытали свои модели путём создания ряда элементов (при помощи автономного скрипта). В следующей статье мы рассмотрим создание страниц, на которых будут показаны эти элементы.
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}</p>
+## Смотрите также
 
-<p> </p>
+- [Database integration](https://expressjs.com/en/guide/database-integration.html) Интеграция БД (документация Express)
+- [Mongoose website](http://mongoosejs.com/) Веб-сайт Mongoose (документация Mongoose)
+- [Mongoose Guide](http://mongoosejs.com/docs/guide.html) Справочник Mongoose (документация Mongoose)
+- [Validation](http://mongoosejs.com/docs/validation.html) Валидация (документация Mongoose)
+- [Schema Types](http://mongoosejs.com/docs/schematypes.html) Типы в схемах (документация Mongoose)
+- [Models](http://mongoosejs.com/docs/models.html) Модели (документация Mongoose)
+- [Queries](http://mongoosejs.com/docs/queries.html) Запросы (документация Mongoose)
+- [Population](http://mongoosejs.com/docs/populate.html) Пополнение БД (документация Mongoose)
 
-<h2 id="In_this_module">In this module</h2>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs/routes", "Learn/Server-side/Express_Nodejs")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
+## In this module
 
-<p> </p>
+- [Express/Node introduction](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+- [Setting up a Node (Express) development environment](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+- [Express Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+- [Express Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+- [Express Tutorial Part 3: Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+- [Express Tutorial Part 4: Routes and controllers](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+- [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+- [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+- [Express Tutorial Part 7: Deploying to production](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
diff --git a/files/ru/learn/server-side/express_nodejs/routes/index.md b/files/ru/learn/server-side/express_nodejs/routes/index.md
index d92b4ccba9393f..f904d56912bb62 100644
--- a/files/ru/learn/server-side/express_nodejs/routes/index.md
+++ b/files/ru/learn/server-side/express_nodejs/routes/index.md
@@ -3,64 +3,50 @@ title: 'Учебник Express часть 4: Маршруты и контрол
 slug: Learn/Server-side/Express_Nodejs/routes
 translation_of: Learn/Server-side/Express_Nodejs/routes
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</div>
+В этом уроке мы настроим маршруты (код обработки URL) с "фиктивными" функциями-обработчиками для всех конечных точек ресурса, которые нам понадобятся на веб-сайте [LocalLibrary](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website). По завершении мы получим модульную структуру для нашего кода обработки маршрута, который будет расширен реальными функциями-обработчиками в следующих статьях. У нас также будет хорошее понимание того, как создавать модульные маршруты с помощью Express!
 
-<p class="summary">В этом уроке мы настроим маршруты (код обработки URL) с "фиктивными" функциями-обработчиками для всех конечных точек ресурса, которые нам понадобятся на веб-сайте <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">LocalLibrary</a>. По завершении мы получим модульную структуру для нашего кода обработки маршрута, который будет расширен реальными функциями-обработчиками в следующих статьях. У нас также будет хорошее понимание того, как создавать модульные маршруты с помощью Express!</p>
+| Предварительные знания: | Прочесть [введение в Express/Node ](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction). Завершить предыдущие уроки (включая [Express Tutorial Part 3: Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)). |
+| ----------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                   | Понять, как создать простые маршруты. Настроить конечные точки URL.                                                                                                                                                                                |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предварительные знания:</th>
-   <td>Прочесть  <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">введение в Express/Node </a>. Завершить предыдущие уроки (включая <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять, как создать простые маршруты. Настроить конечные точки URL.</td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+В [последней статье ](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)мы определили модели _Mongoose_ для взаимодействия с базой данных, и использовали (автономный) скрипт, который создал некоторые исходные записи библиотеки. Теперь можно написать код, чтобы представить эту информацию пользователям. Первое, что нужно сделать, это решить, какие возможности для отображения информации мы хотим иметь на наших страницах, а затем определить соответствующие URL-адреса для получения этих ресурсов. Затем нужно будет создать маршруты (обработчики URL-адресов) и представления (шаблоны) для отображения этих страниц.
 
-<p>В <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">последней статье </a>мы определили модели <em>Mongoose</em>  для взаимодействия с базой данных, и использовали (автономный) скрипт, который создал некоторые исходные записи библиотеки. Теперь можно написать код, чтобы представить эту информацию пользователям. Первое, что нужно сделать, это решить, какие возможности для отображения информации мы хотим иметь на наших страницах, а затем определить соответствующие URL-адреса для получения этих ресурсов. Затем нужно будет создать маршруты (обработчики URL-адресов) и представления (шаблоны) для отображения этих страниц.</p>
+Приведённая ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.
 
-<p>Приведённая ниже диаграмма напоминает об основном потоке данных и об элементах, которые необходимо реализовать при обработке HTTP-запроса/ответа. Кроме представлений и маршрутов на диаграмме показаны "контроллеры" - функции, которые отделяют код для маршрутизации запросов от кода, который фактически обрабатывает запросы.</p>
+Поскольку модели уже созданы, основные элементы, которые следует создать, таковы:
 
-<p>Поскольку модели уже созданы, основные элементы, которые следует создать, таковы:</p>
+- "Маршруты" для перенаправления поддерживаемых запросов (и любой закодированной информации в URL-запросах) соответствующим функциям контроллера.
+- Контроллеры -функции для получения запрашиваемых данных из моделей, создание HTML страницы, отображающей данные, и возращение их пользователю для просмотра в браузере.
+- Представления (шаблоны), используемые контроллерами для отрисовки данных.
 
-<ul>
- <li>"Маршруты" для перенаправления поддерживаемых запросов (и любой закодированной информации в URL-запросах) соответствующим функциям контроллера.</li>
- <li>Контроллеры -функции для получения запрашиваемых данных из моделей, создание HTML страницы, отображающей данные, и возращение их пользователю для просмотра в браузере.</li>
- <li>Представления (шаблоны), используемые контроллерами для отрисовки данных.</li>
-</ul>
+![](https://mdn.mozillademos.org/files/14456/MVC%20Express.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14456/MVC%20Express.png" style="height: 460px; width: 800px;"></p>
+В итоге, у нас должны быть страницы для вывода списков и детальной информации по книгам, жанрам, авторам и экземплярам книг, а также страницы для создания, обновления и удаления записей. Это много для одной статьи. Поэтому большая часть этой статьи будет сосредоточена на настройке наших маршрутов и контроллеров для возврата "фиктивного" контента. Мы расширим методы контроллеров для работы с данными модели в следующих статьях .
 
-<p>В итоге, у нас должны быть страницы для вывода списков  и  детальной информации по книгам, жанрам, авторам и экземплярам книг, а также страницы для создания, обновления и удаления записей. Это много для одной статьи. Поэтому большая часть этой статьи будет сосредоточена на настройке наших маршрутов и контроллеров для возврата "фиктивного" контента. Мы расширим методы контроллеров для работы с данными модели в следующих статьях .</p>
+В первом разделе ниже приведён краткие основы того, как использовать промежуточное средство (middleware) Express [Router](http://expressjs.com/en/4x/api.html#router). Эти знания будут использованы в следующих разделах при настройке маршрутов для LocalLibrary.
 
-<p>В первом разделе ниже приведён краткие основы того, как использовать промежуточное средство (middleware)  Express <a href="http://expressjs.com/en/4x/api.html#router">Router</a>. Эти знания будут использованы в следующих разделах при настройке  маршрутов для LocalLibrary.</p>
+## Маршруты - основы
 
-<h2 id="Маршруты_-_основы">Маршруты - основы</h2>
+Маршруты - это часть кода Express, связывающая HTTP действия (`GET`, `POST`, `PUT`, `DELETE`, etc.), URL пути (шаблона), и функцию, которая обрабатывает этот шаблон.
 
-<p>Маршруты - это часть кода Express, связывающая HTTP действия (<code>GET</code>, <code>POST</code>, <code>PUT</code>, <code>DELETE</code>, etc.), URL пути (шаблона), и функцию, которая обрабатывает этот шаблон.</p>
+Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы `express.Router,` так как они позволяют группировать обработчики маршрутов для определённой части сайта и получать к ним доступ через общий префикс маршрута. Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учётных записей пользователей или других функций, мы сможем сгруппировать их отдельно.
 
-<p>Есть несколько способов создания маршрутов. В этом уроке мы используем промежуточные запросы <code><a href="http://expressjs.com/en/guide/routing.html#express-router">express.Router</a>,</code>  так как они позволяют группировать обработчики маршрутов для определённой части сайта и получать к ним доступ через общий префикс маршрута.  Все маршруты, связанные с библиотекой, будут сохранены в модуле "catalog", и если мы добавим маршруты для обработки учётных записей пользователей или других функций, мы сможем сгруппировать их отдельно.</p>
+> **Примечание:** Маршруты приложения Express уже кратко рассматривались в [Express Introduction > Creating route handlers](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers) (Введение -> Создание обработчиков маршрутов). Применение _Router_ обеспечивает лучшую поддержку модульности (как обсуждается в первой подсекции ниже), а в остальном очень похоже на определение маршрутов непосредственно в объекте приложения _Express_.
 
-<div class="note">
-<p><strong>Примечание:</strong> Маршруты приложения Express уже кратко рассматривались в <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Creating_route_handlers">Express Introduction &gt; Creating route handlers</a> (Введение -&gt; Создание обработчиков маршрутов).  Применение <em>Router </em>обеспечивает лучшую поддержку модульности (как обсуждается в первой подсекции ниже), а в остальном очень похоже на определение маршрутов непосредственно в объекте приложения <em>Express</em>.</p>
-</div>
+В оставшейся части этого раздела представлен обзор того, как Router может быть использован для определения маршрутов.
 
-<p>В оставшейся части этого раздела представлен обзор того, как Router может быть использован  для определения маршрутов.</p>
+### Определение и использование отдельных модулей маршрутов
 
-<h3 id="Определение_и_использование_отдельных_модулей_маршрутов">Определение и использование отдельных модулей маршрутов</h3>
+Код ниже является реальным примером того, как можно создать модуль маршрута, а затем использовать его в приложении _Express_.
 
-<p>Код ниже является реальным примером того, как можно создать модуль маршрута, а затем использовать его в приложении <em>Express</em>.</p>
+Первым делом в модуле **wiki.js** создадим маршруты для wiki . Код сначала импортирует объект приложения Express, использует его для получения объекта `Router` и затем, применяя метод `get(),` добавляет к объекту пару маршрутов. В завершение модуль экспортирует объект `Router` .
 
-<p>Первым делом в модуле <strong>wiki.js </strong>создадим маршруты для wiki .  Код сначала импортирует объект приложения Express, использует его для получения объекта <code>Router</code> и затем, применяя метод <code>get(),</code> добавляет к объекту пару маршрутов. В завершение модуль экспортирует объект <code>Router</code> .</p>
-
-<pre class="brush: js"><code>// wiki.js - Wiki route module.
+```js
+// wiki.js - Wiki route module.
 
 var express = require('express');
 var router = express.Router();
@@ -75,139 +61,135 @@ router.get('/about', function (req, res) {
   res.send('About this wiki');
 })
 
-module.exports = router;</code>
-
-</pre>
+module.exports = router;
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> В примере колбэк-функции обработчиков маршрутов определены непосредственно в функциях роутеров. А в LocalLibrary мы определим эти колбэк-функции в отдельном модуле контроллера.</p>
-</div>
+> **Примечание:** В примере колбэк-функции обработчиков маршрутов определены непосредственно в функциях роутеров. А в LocalLibrary мы определим эти колбэк-функции в отдельном модуле контроллера.
 
-<p>Чтобы использовать модуль роутера в главном приложении, прежде всего следует выполнить <code>require()</code> модуля маршрута (<strong>wiki.js</strong>). Потом вызовем <code>use()</code> для  приложения Express с аргументом, в котором указан URL-путь 'wiki', что добавит  Router к пути обработки промежуточного слоя.</p>
+Чтобы использовать модуль роутера в главном приложении, прежде всего следует выполнить `require()` модуля маршрута (**wiki.js**). Потом вызовем `use()` для приложения Express с аргументом, в котором указан URL-путь 'wiki', что добавит Router к пути обработки промежуточного слоя.
 
-<pre class="brush: js"><code>var wiki = require('./wiki.js');
+```js
+var wiki = require('./wiki.js');
 // ...
-app.use('/wiki', wiki);</code></pre>
+app.use('/wiki', wiki);
+```
 
-<p>После этого два маршрута, определённые в нашем модуле маршрутов wiki, станут доступны из <code>/wiki/</code> и <code>/wiki/about/</code>.</p>
+После этого два маршрута, определённые в нашем модуле маршрутов wiki, станут доступны из `/wiki/` и `/wiki/about/`.
 
-<h3 id="Функции_Route">Функции Route</h3>
+### Функции Route
 
-<p>В модуле выше определена пара типовых функций маршрута. Маршрут "about" (ещё раз показан ниже) определён при помощи метода <code>Router.get()</code>, который отвечает только на  HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй -  колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путём.</p>
+В модуле выше определена пара типовых функций маршрута. Маршрут "about" (ещё раз показан ниже) определён при помощи метода `Router.get()`, который отвечает только на HTTP GET-запросы. Первый аргумент метода - URL-путь, а второй - колбэк-функция, которая будет вызвана, если получен HTTP GET-запрос с указанным путём.
 
-<pre class="brush: js"><code>router.get('/about', function (req, res) {
+```js
+router.get('/about', function (req, res) {
   res.send('About this wiki');
-})</code>
-</pre>
-
-<p>Эта колбэк-функция имеет три аргумента takes three arguments (обычно именуемых как указано: <code>req</code>, <code>res</code>, <code>next</code>), которые соответствуют объекту HTTP запроса, ответу HTTP, и <em>следующей</em> <br>
- функции в цепочке промежуточных элементов.</p>
+})
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Функции в Router - это промежуточный слой (<a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">middleware</a>) are <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware">Express </a>, что означает, что они должны или завершить (ответить на) запрос reqили вызвать следующую (<code>next)</code> функцию в цепочке. В нашем случае запрос завершается вызовом <code>send()</code>, поэтому аргумент <code>next</code> не нужен (и поэтому не указан).</p>
+Эта колбэк-функция имеет три аргумента takes three arguments (обычно именуемых как указано: `req`, `res`, `next`), которые соответствуют объекту HTTP запроса, ответу HTTP, и _следующей_
+функции в цепочке промежуточных элементов.
 
-<p>Выше у функции роутера только один колбэк-аргумент, но можно указать столько таких аргументов, сколько хотите, или указать массив колбэк-функций. каждая из функций - это элемент в цепочке промежуточного слоя, и они будут вызываться в порядке их добавления в цепочку (если предыдущая функция не завершит запрос).</p>
-</div>
+> **Примечание:** Функции в Router - это промежуточный слой ([middleware](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware)) are [Express ](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction#Using_middleware), что означает, что они должны или завершить (ответить на) запрос reqили вызвать следующую (`next)` функцию в цепочке. В нашем случае запрос завершается вызовом `send()`, поэтому аргумент `next` не нужен (и поэтому не указан).
+>
+> Выше у функции роутера только один колбэк-аргумент, но можно указать столько таких аргументов, сколько хотите, или указать массив колбэк-функций. каждая из функций - это элемент в цепочке промежуточного слоя, и они будут вызываться в порядке их добавления в цепочку (если предыдущая функция не завершит запрос).
 
-<p>Здесь, когда приходит GET-запрос с путём ('<code>/about'</code>) колбэк-функция при ответе вызывает <code><a href="https://expressjs.com/en/4x/api.html#res.send">send()</a></code> , возвращая строку "About this wiki". Существует  <a href="https://expressjs.com/en/guide/routing.html#response-methods">ряд других методов ответа</a> , завершающих цикл запрос-ответ. Например, можно вызвать <code><a href="https://expressjs.com/en/4x/api.html#res.json">res.json()</a></code> , чтобы послать ответ JSON, или <code><a href="https://expressjs.com/en/4x/api.html#res.sendFile">res.sendFile()</a>,</code> чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это  <a href="https://expressjs.com/en/4x/api.html#res.render">render()</a>, создающий, на основе шаблонов и данных, и возвращающий  HTML-файлы —мы поговорим об этом подробнее в следующей статье!</p>
+Здесь, когда приходит GET-запрос с путём ('`/about'`) колбэк-функция при ответе вызывает [`send()`](https://expressjs.com/en/4x/api.html#res.send) , возвращая строку "About this wiki". Существует [ряд других методов ответа](https://expressjs.com/en/guide/routing.html#response-methods) , завершающих цикл запрос-ответ. Например, можно вызвать [`res.json()`](https://expressjs.com/en/4x/api.html#res.json) , чтобы послать ответ JSON, или `res.sendFile(),` чтобы послать файл. Метод ответа, который будет использован чаще всего при построении нашей библиотеки - это [render()](https://expressjs.com/en/4x/api.html#res.render), создающий, на основе шаблонов и данных, и возвращающий HTML-файлы —мы поговорим об этом подробнее в следующей статье!
 
-<h3 id="HTTP_глаголы_(действия)">HTTP глаголы (действия)</h3>
+### HTTP глаголы (действия)
 
-<p>Рассмотренный пример использует метод <code>Router.get()</code> для ответа на  HTTP GET- запросы с указанным путём.</p>
+Рассмотренный пример использует метод `Router.get()` для ответа на HTTP GET- запросы с указанным путём.
 
-<p>Кроме того, <code>Router</code> обеспечивает также методы маршрутизации для других HTTP глаголов, которые обычно используются точно таким же способом: <code>post()</code>, <code>put()</code>, <code>delete()</code>, <code>options()</code>, <code>trace()</code>, <code>copy()</code>, <code>lock()</code>, <code>mkcol()</code>, <code>move()</code>, <code>purge()</code>, <code>propfind()</code>, <code>proppatch()</code>, <code>unlock()</code>, <code>report()</code>, ​​​​​​ <code>mkactivity()</code>, <code>checkout()</code>, <code>merge()</code>, <code>m-</code><code>search()</code>, <code>notify()</code>, <code>subscribe()</code>, <code>unsubscribe()</code>, <code>patch()</code>, <code>search()</code>, и <code>connect()</code>.</p>
+Кроме того, `Router` обеспечивает также методы маршрутизации для других HTTP глаголов, которые обычно используются точно таким же способом: `post()`, `put()`, `delete()`, `options()`, `trace()`, `copy()`, `lock()`, `mkcol()`, `move()`, `purge()`, `propfind()`, `proppatch()`, `unlock()`, `report()`, ​​​​​​ `mkactivity()`, `checkout()`, `merge()`, ` m-``search() `, `notify()`, `subscribe()`, `unsubscribe()`, `patch()`, `search()`, и `connect()`.
 
-<p>Например, код ниже делает то же, что и предыдущий, с путём <code>/about,</code> но отвечает на  HTTP POST-запросы.</p>
+Например, код ниже делает то же, что и предыдущий, с путём `/about,` но отвечает на HTTP POST-запросы.
 
-<pre class="brush: js"><code>router.post('/about', function (req, res) {
+```js
+router.post('/about', function (req, res) {
   res.send('About this wiki');
-})</code></pre>
+})
+```
 
-<h3 id="Маршруты_путей">Маршруты путей</h3>
+### Маршруты путей
 
-<p>Маршруты путей определяют конечные точки, в которых могут быть сделаны запросы.  В уже рассмотренных примерах это были просто строки, которые использовались точно так, как были записаны: '/', '/about', '/book', '/any-random.path'.</p>
+Маршруты путей определяют конечные точки, в которых могут быть сделаны запросы. В уже рассмотренных примерах это были просто строки, которые использовались точно так, как были записаны: '/', '/about', '/book', '/any-random.path'.
 
-<p>Маршруты путей могут быть также образцами строк. Образцы строк используют подмножество синтаксиса регулярных выражений для определения <em>образцов</em> конечных точек, для которых должно проверяться соответствие. Подмножество приведено ниже (отметим, что перенос (<code>-</code>) и точка (<code>.</code>) в путях на основе строк понимаются буквально):</p>
+Маршруты путей могут быть также образцами строк. Образцы строк используют подмножество синтаксиса регулярных выражений для определения _образцов_ конечных точек, для которых должно проверяться соответствие. Подмножество приведено ниже (отметим, что перенос (`-`) и точка (`.`) в путях на основе строк понимаются буквально):
 
-<ul>
- <li>? : Конечная точка должна иметь 0 или 1 предыдущий символ. Так, путь маршрута <code>'/ab?cd'</code> соответствует конечным точкам <code>acd</code> или <code>abcd</code> (т.е. b может присутствовать или нет).</li>
- <li>+ : Конечная точка должна иметь 1 или более предыдущих символов. Так, путь маршрута <code>'/ab+cd'</code> будет соответствовать конечным точкам <code>abcd</code>, <code>abbcd</code>, <code>abbbcd</code>, и так далее.</li>
- <li>* : Конечная точка может содержать произвольную строку там, где находится символ '*'. Так, путь маршрута <code>'ab\*cd'</code> будет соответствовать конечным точкам <code>abcd</code>, <code>abXcd</code>, <code>abSOMErandomTEXTcd</code>, и так далее.</li>
- <li>() : Группировка символов для выполнения другой операции. Так, <code>'/ab(cd)?e'</code> выполнит ?-проверку (0 или 1 появление) для группы (cd) — соответствия таковы: <code>abe</code> и <code>abcde</code>.</li>
-</ul>
+- ? : Конечная точка должна иметь 0 или 1 предыдущий символ. Так, путь маршрута `'/ab?cd'` соответствует конечным точкам `acd` или `abcd` (т.е. b может присутствовать или нет).
+- \+ : Конечная точка должна иметь 1 или более предыдущих символов. Так, путь маршрута `'/ab+cd'` будет соответствовать конечным точкам `abcd`, `abbcd`, `abbbcd`, и так далее.
+- \* : Конечная точка может содержать произвольную строку там, где находится символ '\*'. Так, путь маршрута `'ab\*cd'` будет соответствовать конечным точкам `abcd`, `abXcd`, `abSOMErandomTEXTcd`, и так далее.
+- () : Группировка символов для выполнения другой операции. Так, `'/ab(cd)?e'` выполнит ?-проверку (0 или 1 появление) для группы (cd) — соответствия таковы: `abe` и `abcde`.
 
-<p>Пути маршрутов могут быть также <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">регулярными выражениями</a>  JavaScript. Например, путь маршрутов (ниже) будет соответствовать <code>catfish и</code> <code>dogfish</code>, но не <code>catflap</code>, <code>catfishhead</code>, и так далее. Отметим, регулярное выражение как путь использует синтаксис регулярных выражений (это не строка в кавычках, как в предыдущих случаях).</p>
+Пути маршрутов могут быть также [регулярными выражениями](/ru/docs/Web/JavaScript/Guide/Regular_Expressions) JavaScript. Например, путь маршрутов (ниже) будет соответствовать `catfish и` `dogfish`, но не `catflap`, `catfishhead`, и так далее. Отметим, регулярное выражение как путь использует синтаксис регулярных выражений (это не строка в кавычках, как в предыдущих случаях).
 
-<pre class="brush: js"><code>app.get(/.*fish$/, function (req, res) {
+```js
+app.get(/.*fish$/, function (req, res) {
   ...
-})</code></pre>
+})
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Большинство наших маршрутов для библиотеки будут просто строками, а не образцами строк или регулярными выражениями. Кроме того, будут использоваться параметры маршрутов, что обсуждается в следующем разделе.</p>
-</div>
+> **Примечание:** Большинство наших маршрутов для библиотеки будут просто строками, а не образцами строк или регулярными выражениями. Кроме того, будут использоваться параметры маршрутов, что обсуждается в следующем разделе.
 
-<h3 id="Параметры_маршрутов">Параметры маршрутов</h3>
+### Параметры маршрутов
 
-<p>Параметры маршрутов - это <em>именованные сегменты URL</em> , которые используются для выбора значений из указанной позиции  URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, <code>/<strong>:</strong>your_parameter_name/</code>.  Выбранные значения сохраняются в объекте <code>req.params,</code> причём имя параметра  используется как ключ (т.е. <code>req.params.your_parameter_name</code>).</p>
+Параметры маршрутов - это _именованные сегменты URL_ , которые используются для выбора значений из указанной позиции URL. Именованные сегменты начинаются двоеточием, после которого следует имя (например, `/:your_parameter_name/`. Выбранные значения сохраняются в объекте `req.params,` причём имя параметра используется как ключ (т.е. `req.params.your_parameter_name`).
 
-<p>Предположим, например, что URL содержит информацию о пользователях и книгах:  <code>http://localhost:3000/users/34/books/8989</code>. Можно извлечь эту информацию (см. ниже) в параметры <code>userId</code> и <code>bookId</code> пути:</p>
+Предположим, например, что URL содержит информацию о пользователях и книгах: `http://localhost:3000/users/34/books/8989`. Можно извлечь эту информацию (см. ниже) в параметры `userId` и `bookId` пути:
 
-<pre><code>app.get('/users/:userId/books/:bookId', function (req, res) {
+```
+app.get('/users/:userId/books/:bookId', function (req, res) {
   // доступ к userId через: req.params.userId
   // доступ к bookId через: req.params.bookId
   res.send(req.params);
 })
-</code></pre>
+```
 
-<p>Имена параметров пути должны состоять из “символов слова” (A-Z, a-z, 0-9, и _).</p>
+Имена параметров пути должны состоять из “символов слова” (A-Z, a-z, 0-9, и \_).
 
-<div class="note">
-<p><strong>Примечание:</strong> URL <em>/book/create</em> будет соответствовать маршрутам вида <code>/book/:bookId</code> (и '<code>create</code>' станет значением "bookId"). Будет использован первый маршрут, соответствующий введённому  URL, поэтому, если необходимо обрабатывать URL вида <code>/book/create</code> отдельно, обработчик этого маршрута должен быть расположен до маршрута <code>/book/:bookId</code> .</p>
-</div>
+> **Примечание:** URL _/book/create_ будет соответствовать маршрутам вида `/book/:bookId` (и '`create`' станет значением "bookId"). Будет использован первый маршрут, соответствующий введённому URL, поэтому, если необходимо обрабатывать URL вида `/book/create` отдельно, обработчик этого маршрута должен быть расположен до маршрута `/book/:bookId` .
 
-<p>Для начала этих сведений достаточно - если потребуется, можно найти дополнительную информацию в документации  Express: <a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a> (основы маршрутизации) и <a href="http://expressjs.com/en/guide/routing.html">Routing guide</a> (руководство по маршрутизации).  В следующем разделе показано, как задать маршруты и контроллеры для нашей библиотеки LocalLibrary.</p>
+Для начала этих сведений достаточно - если потребуется, можно найти дополнительную информацию в документации Express: [Basic routing](http://expressjs.com/en/starter/basic-routing.html) (основы маршрутизации) и [Routing guide](http://expressjs.com/en/guide/routing.html) (руководство по маршрутизации). В следующем разделе показано, как задать маршруты и контроллеры для нашей библиотеки LocalLibrary.
 
-<h2 id="Маршруты_необходимые_для_библиотеки_LocalLibrary">Маршруты, необходимые для библиотеки LocalLibrary</h2>
+## Маршруты, необходимые для библиотеки LocalLibrary
 
-<p>Те URL, которые в итоге будут нужны для наших страниц, показаны ниже.  Слово <em>object</em> должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author),  слово <em>objects</em> - множественное число для <em>object, </em>а <em>id</em> - уникальное значение для поля(<code>_id</code>), которое Mongoose создаёт по умолчанию для каждого экземпляра модели.</p>
+Те URL, которые в итоге будут нужны для наших страниц, показаны ниже. Слово _object_ должно быть заменено на имя каждой из наших моделей (book, bookinstance, genre, author), слово _objects_ - множественное число для _object,_ а _id_ - уникальное значение для поля(`_id`), которое Mongoose создаёт по умолчанию для каждого экземпляра модели.
 
-<ul>
- <li><code>catalog/</code> — Домашняя страница home/index.</li>
- <li><code>catalog/&lt;objects&gt;/</code> — Список всех книг, экземпляров книг, жанров и авторов (т.е. /<code>catalog/books/</code>, /<code>catalog/genres/</code>, и т.д.)</li>
- <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em></code> — Страница с подробностями для отдельной книги, экземпляра книги, жанра или автора с заданным полем идентификатора <code><em>_id</em></code>  (т.е. <code>/catalog/book/584493c1f4887f06c0e67d37)</code>.</li>
- <li><code>catalog/&lt;object&gt;/create</code> — Форма для создания новой книги, экземпляра книги, жанра или автора (т.е. <code>/catalog/book/create)</code>.</li>
- <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/update</code> —  Форма для обновления отдельной книги, экземпляра книги, жанра или автора с заданным идентификатором <code><em>_id</em></code>  (т.е. <code>/catalog/book/584493c1f4887f06c0e67d37/update)</code>.</li>
- <li><code>catalog/&lt;object&gt;/<em>&lt;id&gt;</em>/delete</code> — Форма для удаления отдельной книги, экземпляра книги, жанра или автора по заданному идентификатору <code><em>_id</em></code> (т.е. <code>/catalog/book/584493c1f4887f06c0e67d37/delete)</code>.</li>
-</ul>
+- `catalog/` — Домашняя страница home/index.
+- `catalog/<objects>/` — Список всех книг, экземпляров книг, жанров и авторов (т.е. /`catalog/books/`, /`catalog/genres/`, и т.д.)
+- `catalog/<object>/<id>` — Страница с подробностями для отдельной книги, экземпляра книги, жанра или автора с заданным полем идентификатора `_id` (т.е. `/catalog/book/584493c1f4887f06c0e67d37)`.
+- `catalog/<object>/create` — Форма для создания новой книги, экземпляра книги, жанра или автора (т.е. `/catalog/book/create)`.
+- `catalog/<object>/<id>/update` — Форма для обновления отдельной книги, экземпляра книги, жанра или автора с заданным идентификатором `_id` (т.е. `/catalog/book/584493c1f4887f06c0e67d37/update)`.
+- `catalog/<object>/<id>/delete` — Форма для удаления отдельной книги, экземпляра книги, жанра или автора по заданному идентификатору `_id` (т.е. `/catalog/book/584493c1f4887f06c0e67d37/delete)`.
 
-<p>Первая домашняя страница и страницы со списками не кодируют никакой дополнительной информации. Хотя результаты, возвращаемые запросами, будут зависеть от типа модели и от содержимого БД, запросы для получения этой информации всегда будут одинаковы (подобно тому, как код для создания объектов всегда будет одним и тем же). </p>
+Первая домашняя страница и страницы со списками не кодируют никакой дополнительной информации. Хотя результаты, возвращаемые запросами, будут зависеть от типа модели и от содержимого БД, запросы для получения этой информации всегда будут одинаковы (подобно тому, как код для создания объектов всегда будет одним и тем же).
 
-<p>В противоположность этому, другие URL используются для работы с определёнными экземплярами документов и моделей — индивидуальность элементов кодируется в URL (как <code><em>&lt;id&gt;</em></code> выше). Параметры путей используются для извлечения информации и передачи её в обработчик пути (в следующей статье мы применим этот приём для того, чтобы динамически определять, какую информацию следует получить из БД). Кодирование информации в URL-адресе позволяет обойтись одним маршрутом для каждого ресурса определенного типа (например, можно обойтись одним маршрутом для обработки отображения любой отдельной записи о книге).</p>
+В противоположность этому, другие URL используются для работы с определёнными экземплярами документов и моделей — индивидуальность элементов кодируется в URL (как `<id>` выше). Параметры путей используются для извлечения информации и передачи её в обработчик пути (в следующей статье мы применим этот приём для того, чтобы динамически определять, какую информацию следует получить из БД). Кодирование информации в URL-адресе позволяет обойтись одним маршрутом для каждого ресурса определенного типа (например, можно обойтись одним маршрутом для обработки отображения любой отдельной записи о книге).
 
-<div class="note">
-<p><strong>Примечание</strong>: Express позволяет строить URL любым способом, который вам нравится — можно кодировать информацию в теле  URL как показано выше или использовать URL <code>GET</code> -запрос с параметрами (например, <code>/book/?id=6</code>). Какой бы подход вы не применяли, URL должны быть ясными, логичными и читаемыми (ознакомьтесь с советами<a href="https://www.w3.org/Provider/Style/URI"> W3C</a>).</p>
-</div>
+> **Примечание:** Express позволяет строить URL любым способом, который вам нравится — можно кодировать информацию в теле URL как показано выше или использовать URL `GET` -запрос с параметрами (например, `/book/?id=6`). Какой бы подход вы не применяли, URL должны быть ясными, логичными и читаемыми (ознакомьтесь с советами[ W3C](https://www.w3.org/Provider/Style/URI)).
 
-<p>Далее мы создадим колбэк-функции обработчиков маршрутов и код маршрутов для всех указанных выше URL.</p>
+Далее мы создадим колбэк-функции обработчиков маршрутов и код маршрутов для всех указанных выше URL.
 
-<h2 id="Создаём_колбэк-функции_обработчиков_маршрутов">Создаём колбэк-функции обработчиков маршрутов</h2>
+## Создаём колбэк-функции обработчиков маршрутов
 
-<p>Перед определением маршрутов сначала создадим фиктивные (каркасные) колбэк-функции, которые они будут вызывать. Эти функции будут храниться в отдельных модулях -"контроллерах" для моделей Book, BookInstance, Genre, и Author (можно использовать любую структуру моделей и файлов, но кажется, что выбранная обеспечивает приемлемую модульность нашего проекта).</p>
+Перед определением маршрутов сначала создадим фиктивные (каркасные) колбэк-функции, которые они будут вызывать. Эти функции будут храниться в отдельных модулях -"контроллерах" для моделей Book, BookInstance, Genre, и Author (можно использовать любую структуру моделей и файлов, но кажется, что выбранная обеспечивает приемлемую модульность нашего проекта).
 
-<p>Начнём с создания каталога для контроллеров в корне проекта (<strong>/controllers</strong>), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:</p>
+Начнём с создания каталога для контроллеров в корне проекта (**/controllers**), а затем создадим отдельные файлы (модули) контроллеров для работы с моделями:
 
-<pre>/express-locallibrary-tutorial  //корень проекта
-  <strong>/controllers</strong>
-    <strong>authorController.js</strong>
-    <strong>bookController.js</strong>
-    <strong>bookinstanceController.js</strong>
-    <strong>genreController.js</strong></pre>
+```
+/express-locallibrary-tutorial  //корень проекта
+  /controllers
+    authorController.js
+    bookController.js
+    bookinstanceController.js
+    genreController.js
+```
 
-<h3 id="Контроллер_автора">Контроллер автора</h3>
+### Контроллер автора
 
-<p>Скопируем следующий код в файл <strong>/controllers/authorController.js</strong>:</p>
+Скопируем следующий код в файл **/controllers/authorController.js**:
 
-<pre class="brush: js">var Author = require('../models/author');
+```js
+var Author = require('../models/author');
 
 // Показать список всех авторов.
 exports.author_list = function(req, res) {
@@ -248,17 +230,18 @@ exports.author_update_get = function(req, res) {
 exports.author_update_post = function(req, res) {
     res.send('NOT IMPLEMENTED: Author update POST');
 };
-</pre>
+```
 
-<p>В модуле сначала подключается (requires) модель, которая далее будет использована для получения данных и их обновления. Далее экспортируются функции для каждого URL, который мы хотим обрабатывать (операции create-создать, update-обновить и delete-удалить используют формы, следовательно, должны быть дополнительные методы для обработки post-запросов от форм - эти методы обсуждаются далее, в статье "forms article" ("формы")).</p>
+В модуле сначала подключается (requires) модель, которая далее будет использована для получения данных и их обновления. Далее экспортируются функции для каждого URL, который мы хотим обрабатывать (операции create-создать, update-обновить и delete-удалить используют формы, следовательно, должны быть дополнительные методы для обработки post-запросов от форм - эти методы обсуждаются далее, в статье "forms article" ("формы")).
 
-<p>Все функции имеют стандартную форму функций среднего слоя <em>Express </em>, с аргументами для запроса, ответа и следующей <code>(next)</code> функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведённых в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница ещё не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше <code>req.params.id</code> ).</p>
+Все функции имеют стандартную форму функций среднего слоя _Express_ , с аргументами для запроса, ответа и следующей `(next)` функции, которая должна быть вызвана, если метод не завершил цикл запроса (во всех приведённых в коде случаях - завершает!). Методы просто возвращают строку, информирующую о том, что соответствующая страница ещё не создана. Если функция контроллера должна получить параметры маршрута, эти параметры будут выведены в строке сообщения (смотри выше `req.params.id` ).
 
-<h4 id="BookInstance_controller">BookInstance controller</h4>
+#### BookInstance controller
 
-<p>Скопируйте следующий код в файл <strong>/controllers/bookinstanceController.js</strong>  (он построен по образцу модуля контроллера для автора <code>Author</code> ):</p>
+Скопируйте следующий код в файл **/controllers/bookinstanceController.js** (он построен по образцу модуля контроллера для автора `Author` ):
 
-<pre class="brush: js">var BookInstance = require('../models/bookinstance');
+```js
+var BookInstance = require('../models/bookinstance');
 
 // Display list of all BookInstances.
 exports.bookinstance_list = function(req, res) {
@@ -299,13 +282,14 @@ exports.bookinstance_update_get = function(req, res) {
 exports.bookinstance_update_post = function(req, res) {
     res.send('NOT IMPLEMENTED: BookInstance update POST');
 };
-</pre>
+```
 
-<h4 id="Контроллер_жанра">Контроллер жанра</h4>
+#### Контроллер жанра
 
-<p>Скопируйте следующий код в файл <strong>/controllers/genreController.js</strong> (он построен по образцу модулей контроллеров для автора <code>Author</code> и экземпляра книги <code>BookInstance</code>):</p>
+Скопируйте следующий код в файл **/controllers/genreController.js** (он построен по образцу модулей контроллеров для автора `Author` и экземпляра книги `BookInstance`):
 
-<pre class="brush: js">var Genre = require('../models/genre');
+```js
+var Genre = require('../models/genre');
 
 // Display list of all Genre.
 exports.genre_list = function(req, res) {
@@ -346,17 +330,18 @@ exports.genre_update_get = function(req, res) {
 exports.genre_update_post = function(req, res) {
     res.send('NOT IMPLEMENTED: Genre update POST');
 };
-</pre>
+```
 
-<h4 id="Контроллер_книги">Контроллер книги</h4>
+#### Контроллер книги
 
-<p>Скопируйте следующий код в файл <strong>/controllers/bookController.js</strong>. Он построен по образцу других модулей контроллеров, но ещё содержит функцию <code>index()</code> для вывода странички с приветствием:</p>
+Скопируйте следующий код в файл **/controllers/bookController.js**. Он построен по образцу других модулей контроллеров, но ещё содержит функцию `index()` для вывода странички с приветствием:
 
-<pre class="brush: js">var Book = require('../models/book');
+```js
+var Book = require('../models/book');
 
-<strong>exports.index = function(req, res) {
+exports.index = function(req, res) {
     res.send('NOT IMPLEMENTED: Site Home Page');
-};</strong>
+};
 
 // Display list of all books.
 exports.book_list = function(req, res) {
@@ -397,25 +382,28 @@ exports.book_update_get = function(req, res) {
 exports.book_update_post = function(req, res) {
     res.send('NOT IMPLEMENTED: Book update POST');
 };
-</pre>
+```
 
-<h2 id="Создание_модуля_для_маршрута_catalog">Создание модуля для маршрута catalog</h2>
+## Создание модуля для маршрута catalog
 
-<p>Далее мы создадим маршруты для всех URL, необходимых веб-сайту<a href="#local_libary_routes"> LocalLibrary</a>, которые будут вызывать функции контроллеров, определённые в предыдущем разделе.</p>
+Далее мы создадим маршруты для всех URL, необходимых веб-сайту[ LocalLibrary](#local_libary_routes), которые будут вызывать функции контроллеров, определённые в предыдущем разделе.
 
-<p>Каркас приложения уже содержит каталог <strong>./routes</strong>, в котором есть маршруты для <em>index</em> и <em>users</em>. Внутри этого каталога создадим ещё один файл маршрутов — <strong>catalog.js</strong> ( см. ниже).</p>
+Каркас приложения уже содержит каталог **./routes**, в котором есть маршруты для _index_ и _users_. Внутри этого каталога создадим ещё один файл маршрутов — **catalog.js** ( см. ниже).
 
-<pre>/express-locallibrary-tutorial //the project root
+```
+/express-locallibrary-tutorial //the project root
   /routes
     index.js
     users.js
-    <strong>catalog.js</strong></pre>
+    catalog.js
+```
 
-<p>Скопируйте приведённый ниже код в файл <strong>/routes/</strong><strong>catalog.js</strong> :</p>
+Скопируйте приведённый ниже код в файл **/routes/\*\***catalog.js\*\* :
 
-<pre class="brush: js"><strong>var express = require('express');
+```js
+var express = require('express');
 var router = express.Router();
-</strong>
+
 // Требующиеся модули контроллеров.
 var book_controller = require('../controllers/bookController');
 var author_controller = require('../controllers/authorController');
@@ -533,115 +521,110 @@ router.get('/bookinstance/:id', book_instance_controller.bookinstance_detail);
 // GET request for list of all BookInstance.
 router.get('/bookinstances', book_instance_controller.bookinstance_list);
 
-<strong>module.exports = router;</strong>
-</pre>
+module.exports = router;
+```
 
-<p>Модуль загружает Express и использует его для создания объекта <code>Router</code> . В маршрутизаторе задаются маршруты и производится их экспорт.</p>
+Модуль загружает Express и использует его для создания объекта `Router` . В маршрутизаторе задаются маршруты и производится их экспорт.
 
-<p>Маршруты определяют в объекте маршрутизатора  или <code>.get()</code> или <code>.post()</code> методы. Все пути заданы как строки (образцы строк и регулярные выражения не использовались). Маршруты, которые взаимодействуют с конкретным ресурсом (скажем, с книгой), для получения из URL идентификатора объекта используют параметры путей.</p>
+Маршруты определяют в объекте маршрутизатора или `.get()` или `.post()` методы. Все пути заданы как строки (образцы строк и регулярные выражения не использовались). Маршруты, которые взаимодействуют с конкретным ресурсом (скажем, с книгой), для получения из URL идентификатора объекта используют параметры путей.
 
-<p>Все функции-обработчики импортируются из созданных в предыдущем разделе модулей контроллеров.</p>
+Все функции-обработчики импортируются из созданных в предыдущем разделе модулей контроллеров.
 
-<h3 id="Обновление_модуля_маршрута_index">Обновление модуля маршрута index</h3>
+### Обновление модуля маршрута index
 
-<p>Все новые маршруты заданы, а маршрут на начальную страницу остался без изменения. Давайте перенаправим его на новую страницу "index", которая создана в каталоге  '/catalog'.</p>
+Все новые маршруты заданы, а маршрут на начальную страницу остался без изменения. Давайте перенаправим его на новую страницу "index", которая создана в каталоге '/catalog'.
 
-<p>Откройте <strong>/routes/index.js</strong> и замените существующий маршрут приведённую ниже.</p>
+Откройте **/routes/index.js** и замените существующий маршрут приведённую ниже.
 
-<pre class="brush: js">// GET home page.
+```js
+// GET home page.
 router.get('/', function(req, res) {
   res.redirect('/catalog');
-});</pre>
+});
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Это первое использование метода ответа <a href="https://expressjs.com/en/4x/api.html#res.redirect">redirect()</a> . Он делает перенаправление на указанную страницу, и по умолчанию устанавливает код возврата HTTP в "302 Found" (найдено). Если требуется, можно изменить код возврата. Путь можно задавать как абсолютный или как относительный.</p>
-</div>
+> **Примечание:** Это первое использование метода ответа [redirect()](https://expressjs.com/en/4x/api.html#res.redirect) . Он делает перенаправление на указанную страницу, и по умолчанию устанавливает код возврата HTTP в "302 Found" (найдено). Если требуется, можно изменить код возврата. Путь можно задавать как абсолютный или как относительный.
 
-<h3 id="Обновление_app.js">Обновление app.js</h3>
+### Обновление app.js
 
-<p>Завершающий шаг - добавление маршрутов в цепочку промежуточного слоя. Это будет сделано в <code>app.js</code>.</p>
+Завершающий шаг - добавление маршрутов в цепочку промежуточного слоя. Это будет сделано в `app.js`.
 
-<p>Откройте файл <strong>app.js</strong> и поместите require для маршрута каталог  ниже других маршрутов (добавьте третью строку. показанную ниже, после имеющихся двух строк):</p>
+Откройте файл **app.js** и поместите require для маршрута каталог ниже других маршрутов (добавьте третью строку. показанную ниже, после имеющихся двух строк):
 
-<pre class="brush: js">var indexRouter = require('./routes/index');
+```js
+var indexRouter = require('./routes/index');
 var usersRouter = require('./routes/users');
-<strong>var catalogRouter = require('./routes/catalog');  //Import routes for "catalog" area of site</strong></pre>
+var catalogRouter = require('./routes/catalog');  //Import routes for "catalog" area of site
+```
 
-<p>Далее, добавьте маршрут каталога в стек промежуточного слоя после других маршрутов (добавить третью строку после имеющихся двух):</p>
+Далее, добавьте маршрут каталога в стек промежуточного слоя после других маршрутов (добавить третью строку после имеющихся двух):
 
-<pre class="brush: js">app.use('/', indexRouter);
+```js
+app.use('/', indexRouter);
 app.use('/users', usersRouter);
-<strong>app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.</strong></pre>
+app.use('/catalog', catalogRouter);  // Add catalog routes to middleware chain.
+```
+
+> **Примечание:** Мы добавили модуль каталога в путь`'/catalog'`. Этот путь будет предшествовать всем путям, определённым в модуле каталога. Например, для доступа к списку книг URL будет таким: `/catalog/books/`.
 
-<div class="note">
-<p><strong>Примечание:</strong> Мы добавили модуль каталога в путь<code>'/catalog'</code>.  Этот путь будет предшествовать всем путям, определённым в модуле каталога. Например, для доступа к списку книг URL будет таким: <code>/catalog/books/</code>.</p>
-</div>
+Вот так. Теперь у нас есть пути и фиктивные функции, подготовленные для всех URL, которые мы собираемся поддерживать на веб-сайте LocalLibrary.
 
-<p>Вот так. Теперь у нас есть пути и фиктивные функции, подготовленные для всех  URL, которые мы собираемся поддерживать на веб-сайте LocalLibrary.</p>
+### Проверка маршрутов
 
-<h3 id="Проверка_маршрутов">Проверка маршрутов</h3>
+Чтобы проверить маршруты, сначала запустим веб-сайт обычным способом
 
-<p>Чтобы проверить маршруты, сначала запустим веб-сайт обычным способом</p>
+- Обычный способ
 
-<ul>
- <li>Обычный способ
-  <pre class="brush: bash"><code>// Windows
-SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+  ```bash
+  // Windows
+  SET DEBUG=express-locallibrary-tutorial:* & npm start
 
-// macOS or Linux
-DEBUG=express-locallibrary-tutorial:* npm start</code>
-</pre>
- </li>
- <li>Если предварительно установлен <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">nodemon</a>, для запуска можно использовать:
-  <pre><code>// Windows
-SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong>
+  // macOS or Linux
+  DEBUG=express-locallibrary-tutorial:* npm start
+  ```
 
-// macOS or Linux
-</code> DEBUG=express-locallibrary-tutorial:* npm <strong style="font-family: inherit; font-size: 1rem;">run devstart</strong>
-</pre>
- </li>
-</ul>
+- Если предварительно установлен [nodemon](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website), для запуска можно использовать:
 
-<p>После запуска перейдите к совокупности URL нашей LocalLibrary, и проверьте, что не появляется страница ошибки (HTTP 404). Небольшая часть наших URL для удобства приводится ниже:</p>
+  ```
+  // Windows
+  SET DEBUG=express-locallibrary-tutorial:* & npm run devstart
 
-<ul>
- <li><a href="http://localhost:3000/">http://localhost:3000/</a></li>
- <li><a href="http://localhost:3000/catalog">http://localhost:3000/catalog</a></li>
- <li><a href="http://localhost:3000/catalog/books">http://localhost:3000/catalog/books</a></li>
- <li><a href="http://localhost:3000/catalog/bookinstances/">http://localhost:3000/catalog/bookinstances/</a></li>
- <li><a href="http://localhost:3000/catalog/authors/">http://localhost:3000/catalog/authors/</a></li>
- <li><a href="http://localhost:3000/catalog/genres/">http://localhost:3000/catalog/genres/</a></li>
- <li><a href="http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/">http://localhost:3000/catalog/book/5846437593935e2f8c2aa226</a></li>
- <li><a href="http://localhost:3000/catalog/book/create">http://localhost:3000/catalog/book/create</a></li>
-</ul>
+  // macOS or Linux
+   DEBUG=express-locallibrary-tutorial:* npm run devstart
+  ```
 
-<h2 id="Итог">Итог</h2>
+После запуска перейдите к совокупности URL нашей LocalLibrary, и проверьте, что не появляется страница ошибки (HTTP 404). Небольшая часть наших URL для удобства приводится ниже:
 
-<p>Созданы все маршруты для нашего сайта. Созданы также фиктивные функции контроллеров, которые мы полностью реализуем в последующих статьях. Попутно мы изучили массу базовых сведений о маршрутах Express, и ознакомились с  некоторыми подходами по структурированию маршрутов и контроллеров.</p>
+- <http://localhost:3000/>
+- <http://localhost:3000/catalog>
+- <http://localhost:3000/catalog/books>
+- <http://localhost:3000/catalog/bookinstances/>
+- <http://localhost:3000/catalog/authors/>
+- <http://localhost:3000/catalog/genres/>
+- [http://localhost:3000/catalog/book/5846437593935e2f8c2aa226](http://localhost:3000/catalog/book/5846437593935e2f8c2aa226/)
+- <http://localhost:3000/catalog/book/create>
 
-<p>В следующей статье мы создадим настоящую страничку приветствия нашего сайта, для чего используем представления (шаблоны) и данные, хранящиеся в наших моделях.</p>
+## Итог
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+Созданы все маршруты для нашего сайта. Созданы также фиктивные функции контроллеров, которые мы полностью реализуем в последующих статьях. Попутно мы изучили массу базовых сведений о маршрутах Express, и ознакомились с некоторыми подходами по структурированию маршрутов и контроллеров.
 
-<ul>
- <li><a href="http://expressjs.com/en/starter/basic-routing.html">Basic routing</a>  Основы маршрутизации (документация Express)</li>
- <li><a href="http://expressjs.com/en/guide/routing.html">Routing guide</a>  Руководство по маршрутизации (документация Express)</li>
-</ul>
+В следующей статье мы создадим настоящую страничку приветствия нашего сайта, для чего используем представления (шаблоны) и данные, хранящиеся в наших моделях.
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}</p>
+## Смотрите также
 
+- [Basic routing](http://expressjs.com/en/starter/basic-routing.html) Основы маршрутизации (документация Express)
+- [Routing guide](http://expressjs.com/en/guide/routing.html) Руководство по маршрутизации (документация Express)
 
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs/Displaying_data", "Learn/Server-side/Express_Nodejs")}}
 
-<h2 id="In_this_module">In this module</h2>
+## In this module
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Express/Node introduction</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Setting up a Node (Express) development environment</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">Express Tutorial: The Local Library website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">Express Tutorial Part 2: Creating a skeleton website</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/mongoose">Express Tutorial Part 3: Using a Database (with Mongoose)</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/routes">Express Tutorial Part 4: Routes and controllers</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Displaying_data">Express Tutorial Part 5: Displaying library data</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/forms">Express Tutorial Part 6: Working with forms</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/deployment">Express Tutorial Part 7: Deploying to production</a></li>
-</ul>
+- [Express/Node introduction](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction)
+- [Setting up a Node (Express) development environment](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment)
+- [Express Tutorial: The Local Library website](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website)
+- [Express Tutorial Part 2: Creating a skeleton website](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website)
+- [Express Tutorial Part 3: Using a Database (with Mongoose)](/ru/docs/Learn/Server-side/Express_Nodejs/mongoose)
+- [Express Tutorial Part 4: Routes and controllers](/ru/docs/Learn/Server-side/Express_Nodejs/routes)
+- [Express Tutorial Part 5: Displaying library data](/ru/docs/Learn/Server-side/Express_Nodejs/Displaying_data)
+- [Express Tutorial Part 6: Working with forms](/ru/docs/Learn/Server-side/Express_Nodejs/forms)
+- [Express Tutorial Part 7: Deploying to production](/ru/docs/Learn/Server-side/Express_Nodejs/deployment)
diff --git a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.md b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.md
index 6d7139575b7293..aef0b17666f184 100644
--- a/files/ru/learn/server-side/express_nodejs/skeleton_website/index.md
+++ b/files/ru/learn/server-side/express_nodejs/skeleton_website/index.md
@@ -3,45 +3,36 @@ title: 'Учебник Express часть 2: Создание скелета с
 slug: Learn/Server-side/Express_Nodejs/skeleton_website
 translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}
 
-<p class="summary">Эта вторая статья в нашем <a href="https://developer.mozilla.org/en-US/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website">учебнике Express</a> показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.</p>
+Эта вторая статья в нашем [учебнике Express](/ru/docs/Learn/Server-side/Express_Nodejs/Tutorial_local_library_website) показывает, как создать каркас проекта веб-сайта, который позже можно будет заполнить с помощью путей сайта, шаблонов представлений и обращений к базе данных.
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td><a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">Установить среду разработки Node</a>. Просмотреть учебник Express.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Научиться запускать свои проекты используя <em>Express Application Generator</em>.</td>
-  </tr>
- </tbody>
-</table>
+| Необходимые знания: | [Установить среду разработки Node](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment). Просмотреть учебник Express. |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Научиться запускать свои проекты используя _Express Application Generator_.                                                         |
 
-<h2 id="Обзор">Обзор</h2>
+## Обзор
 
-<p>В этой статье показано, как создать каркас сайта с помощью средства <a href="https://expressjs.com/en/starter/generator.html">Express Application Generator</a>. Каркас затем можно будет заполнить с помощью путей сайта, шаблонов/представлений и обращений к базе данных. Мы используем это средство для создания основы нашего <a>сайта Local Library</a>. К основе будет добавлен код, необходимый сайту. Создание каркаса чрезвычайно просто -- требуется только вызвать генератор в командной строке, указав имя нового проекта, дополнительно можно указать также движок шаблона сайта и генератор CSS.</p>
+В этой статье показано, как создать каркас сайта с помощью средства [Express Application Generator](https://expressjs.com/en/starter/generator.html). Каркас затем можно будет заполнить с помощью путей сайта, шаблонов/представлений и обращений к базе данных. Мы используем это средство для создания основы нашего сайта Local Library. К основе будет добавлен код, необходимый сайту. Создание каркаса чрезвычайно просто -- требуется только вызвать генератор в командной строке, указав имя нового проекта, дополнительно можно указать также движок шаблона сайта и генератор CSS.
 
-<p>Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.</p>
+Далее показано, как вызвать генератор приложений, и даётся небольшое пояснение различных вариантов представлений и CSS. Мы поясним структуру каркаса веб-сайта. В конце мы покажем, как запустить веб-сайт, чтобы убедиться, что он работает.
 
-<div class="note">
-<p><strong>Замечание</strong>: <em>Express Application Generator</em> — не единственный генератор Express-приложений, и созданный проект --не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О <em>минимальном</em> Express приложении смотрите <a href="https://expressjs.com/en/starter/hello-world.html">Hello world example</a> в документации Express.</p>
-</div>
+> **Примечание:** **Замечание**: _Express Application Generator_ — не единственный генератор Express-приложений, и созданный проект --не единственный жизнеспособный способ организации ваших файлов и каталогов. Однако созданный сайт имеет модульную структуру, которую легко понять и расширить. О _минимальном_ Express приложении смотрите [Hello world example](https://expressjs.com/en/starter/hello-world.html) в документации Express.
 
-<h2 id="Применение_генератора_приложений">Применение генератора приложений</h2>
+## Применение генератора приложений
 
-<p>Вы уже должны были установить <code>express-generator</code>, читая статью <a>установка среды разработки Node</a>. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:</p>
+Вы уже должны были установить `express-generator`, читая статью установка среды разработки Node. Напомним, что генератор установлен с помощью менеджера пакетов NPM, при выполнении команды:
 
-<pre class="brush: bash"><code>npm install express-generator -g</code>
-</pre>
+```bash
+npm install express-generator -g
+```
 
-<p><code>E</code><code>xpress-generator </code>имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):</p>
+` E``xpress-generator  `имеет ряд параметров, которые можно увидеть, выполнив команду express --help (или express -h):
 
-<pre class="brush: bash">&gt; express --help
+```bash
+> express --help
 
   Usage: express [options] [dir]
 
@@ -53,86 +44,78 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
         --pug            add pug engine support (добавить поддержку движка pug)
         --hbs            add handlebars engine support (добавить поддержку движка handlebar)
     -H, --hogan          add hogan.js engine support (добавить поддержку движка hogan.js)
-    -v, --view &lt;engine&gt;  add view &lt;engine&gt; support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
+    -v, --view <engine>  add view <engine> support (ejs|hbs|hjs|jade|pug|twig|vash) (defaults to jade)
                          (добавить поддержку движков представлений. По умолчанию - jade)
-    -c, --css &lt;engine&gt;   add stylesheet &lt;engine&gt; support (less|stylus|compass|sass) (defaults to plain css)
+    -c, --css <engine>   add stylesheet <engine> support (less|stylus|compass|sass) (defaults to plain css)
                          (добавить поддержку движков стилей, по умолчанию - простой CSS)
         --git            add .gitignore (добавить поддержку .gitignore)
     -f, --force          force on non-empty directory (работать в каталоге с файлами)
-</pre>
+```
 
-<p>Команда <code>express</code> создаст проект в <em>текущем</em> каталоге с использованием (устаревшего) движка представления <em>Jade</em> и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога. </p>
+Команда `express` создаст проект в _текущем_ каталоге с использованием (устаревшего) движка представления _Jade_ и обычного CSS. Если указать express name, проект будет создан в подкаталоге name текущего каталога.
 
-<pre class="brush: bash"><code>express</code></pre>
+```bash
+express
+```
 
-<p>Можно выбрать движок представления (шаблон), используя --<code>view; </code><code>параметр</code><code> --</code><code>css </code> позволяет выбрать движок для создания CSS.</p>
+Можно выбрать движок представления (шаблон), используя --` view; ``параметр`` --``css  `позволяет выбрать движок для создания CSS.
 
-<div class="note">
-<p><strong>Примечание:</strong> Другие опции (<code>--hogan</code>, <code>--ejs</code>, <code>--hbs</code> и пр.) для выбора шаблонизатора устарели. Используйте <code>--view</code> (или<code> -v</code>)!</p>
-</div>
+> **Примечание:** Другие опции (`--hogan`, `--ejs`, `--hbs` и пр.) для выбора шаблонизатора устарели. Используйте `--view` (или` -v`)!
 
-<h3 id="Какой_движок_представлений_следует_использовать">Какой движок представлений следует использовать?</h3>
+### Какой движок представлений следует использовать?
 
-<p><em>Express-generator</em><em> </em>даёт возможность сконфигурировать несколько популярных движков, включая <a href="https://www.npmjs.com/package/ejs">EJS</a>, <a href="http://github.com/donpark/hbs">Hbs</a>, <a href="https://pugjs.org/api/getting-started.html">Pug</a> (Jade), <a href="https://www.npmjs.com/package/twig">Twig</a>, и <a href="https://www.npmjs.com/package/vash">Vash</a>, но по умолчанию  выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.</p>
+*Express-generator\_\_ *даёт возможность сконфигурировать несколько популярных движков, включая [EJS](https://www.npmjs.com/package/ejs), [Hbs](http://github.com/donpark/hbs), [Pug](https://pugjs.org/api/getting-started.html) (Jade), [Twig](https://www.npmjs.com/package/twig), и [Vash](https://www.npmjs.com/package/vash), но по умолчанию выбран Jade. Экспресс сразу после установки может поддерживать большое количество и других шаблонизаторов.
 
-<div class="note">
-<p><strong>Примечание:</strong> При желании использовать шаблонизатор, который не поддерживается генератором,  просмотрите  документацию <a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engines with Express</a>  и документацию для нужного шаблонизатора.</p>
-</div>
+> **Примечание:** При желании использовать шаблонизатор, который не поддерживается генератором, просмотрите документацию [Using template engines with Express](https://expressjs.com/en/guide/using-template-engines.html) и документацию для нужного шаблонизатора.
 
-<p>Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность - так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:</p>
+Как правило, следует выбрать шаблонизатор, который имеет всю необходимую вам функциональность и обеспечивает вам высокую производительность - так же, как вы выбираете любой другой компонент! Некоторые критерии для сравнения шаблонизаторов:
 
-<ul>
- <li>Время до  получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть  все относительные сложности изучения кандидатов в шаблонизаторы.</li>
- <li>Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.</li>
- <li>Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят  HTML, используя специальный синтаксис (например, используя отступы или блочные имена).</li>
- <li>Производительность и время интерпретации.</li>
- <li>Особенности — следует выбирать движок  с учётом таких особенностей:
-  <ul>
-   <li>Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.</li>
-   <li>Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.</li>
-   <li>Краткий синтаксис управления переменными и циклами.</li>
-   <li>Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).</li>
-   <li>Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).</li>
-   <li>Поддержка асинхронных операций и потоковой передачи.</li>
-   <li> Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.</li>
-  </ul>
- </li>
-</ul>
+- Время до получения результата — если ваша команда уже имела дело с шаблонизатором, то, скорее всего, продуктивнее будет использовать этот шаблонизатор. Если нет, тогда следует учесть все относительные сложности изучения кандидатов в шаблонизаторы.
+- Популярность и активность — проверьте популярность движка, возможно, у него есть активное сообщество. Очень важно иметь поддержку для движка, если у вас возникнут проблемы в течении жизни веб-сайта.
+- Стиль — некоторые шаблонизаторы используют особую разметку для отображения вставленного контента внутри "обычного" HTML, а другие строят HTML, используя специальный синтаксис (например, используя отступы или блочные имена).
+- Производительность и время интерпретации.
+- Особенности — следует выбирать движок с учётом таких особенностей:
 
-<div class="note">
-<p><strong>Совет:</strong> В интернете множество ресурсов, которые помогут сравнить различные варианты!</p>
-</div>
+  - Наследование макета: позволяет определить базовый шаблон и затем наследовать только те части, которые отличаются для конкретной страницы. Это, как правило, лучший подход, чем создание шаблонов путём включения нескольких необходимых компонентов или создания шаблона с нуля каждый раз.
+  - Поддержка «Include»: позволяет создавать шаблоны, включая другие шаблоны.
+  - Краткий синтаксис управления переменными и циклами.
+  - Возможность фильтровать значения переменных на уровне шаблона (например, делать переменные в верхнем регистре или форматировать значение даты).
+  - Возможность создавать выходные форматы, отличные от HTML (например, JSON или XML).
+  - Поддержка асинхронных операций и потоковой передачи.
+  - Возможность использования как на клиенте, так и на сервере. Возможность применения движка шаблона на клиенте позволяет обслуживать данные и выполнять все действия или их большую часть на стороне клиента.
 
-<p>Для этого проекта мы  используем шаблонизатор <a href="https://pugjs.org/api/getting-started.html">Pug</a> (в прошлом назывался Jade) -- один из популярнейших Express/JavaScript шаблонизаторов, который поддерживается в Express-generator "из коробки".</p>
+> **Примечание:** **Совет:** В интернете множество ресурсов, которые помогут сравнить различные варианты!
 
-<h3 id="Какие_шаблонизаторы_CSS_следует_использовать">Какие шаблонизаторы CSS следует использовать?</h3>
+Для этого проекта мы используем шаблонизатор [Pug](https://pugjs.org/api/getting-started.html) (в прошлом назывался Jade) -- один из популярнейших Express/JavaScript шаблонизаторов, который поддерживается в Express-generator "из коробки".
 
-<p><em>Express Application Generator</em> позволяет создавать проекты, настроенные для применения шаблонизаторов CSS: <a href="http://lesscss.org/">LESS</a>, <a href="http://sass-lang.com/">SASS</a>, <a href="http://compass-style.org/">Compass</a>, <a href="http://stylus-lang.com/">Stylus</a>.</p>
+### Какие шаблонизаторы CSS следует использовать?
 
-<div class="note">
-<p><strong>Примечание: </strong>простой<strong> </strong>CSS имеет некоторые ограничения, затрудняющие выполнение задач. Шаблонизаторы CSS позволяют использовать более эффективный подход для создании таблиц стилей CSS, но требуют компиляции файлов таблиц стилей в стандартный CSS для применения в браузере.</p>
-</div>
+_Express Application Generator_ позволяет создавать проекты, настроенные для применения шаблонизаторов CSS: [LESS](http://lesscss.org/), [SASS](http://sass-lang.com/), [Compass](http://compass-style.org/), [Stylus](http://stylus-lang.com/).
 
-<p>Как и в случае с шаблонизаторами сайта, следует применять шаблонизатор, обеспечивающий высокую производительность работы. В этом проекте мы используем обычный CSS (по умолчанию), поскольку простота наших требований к CSS не оправдает применение чего-то более сложного.</p>
+> **Примечание:**простой\*\* \*\*CSS имеет некоторые ограничения, затрудняющие выполнение задач. Шаблонизаторы CSS позволяют использовать более эффективный подход для создании таблиц стилей CSS, но требуют компиляции файлов таблиц стилей в стандартный CSS для применения в браузере.
 
-<h3 id="Какую_базу_данных_следует_использовать">Какую базу данных следует использовать?</h3>
+Как и в случае с шаблонизаторами сайта, следует применять шаблонизатор, обеспечивающий высокую производительность работы. В этом проекте мы используем обычный CSS (по умолчанию), поскольку простота наших требований к CSS не оправдает применение чего-то более сложного.
 
-<p>Сгенерированный код не использует и не содержит в себе какой-либо базы данных. <em>Express</em> может использовать любой движок <a href="https://expressjs.com/en/guide/database-integration.html">базы данных</a>, который поддерживается <em>Node</em> (<em>Express</em> не предъявляет каких-либо особых требований к базе данных).</p>
+### Какую базу данных следует использовать?
 
-<p>Мы обсудим взаимодействие с базой данных в следующей статье.</p>
+Сгенерированный код не использует и не содержит в себе какой-либо базы данных. _Express_ может использовать любой движок [базы данных](https://expressjs.com/en/guide/database-integration.html), который поддерживается _Node_ (_Express_ не предъявляет каких-либо особых требований к базе данных).
 
-<h2 id="Создание_проекта">Создание проекта</h2>
+Мы обсудим взаимодействие с базой данных в следующей статье.
 
-<p>Разрабатывая пример - приложение <em>Local Library, </em>мы построим проект с именем <em>express-locallibrary-tutorial. </em>Используем библиотеку шаблонов Pug, а движок CSS применять не будем.</p>
+## Создание проекта
 
-<p>Выберем место для нового проекта — каталог express-locallibrary-tutorial - и выполним команду:</p>
+Разрабатывая пример - приложение _Local Library,_ мы построим проект с именем _express-locallibrary-tutorial._ Используем библиотеку шаблонов Pug, а движок CSS применять не будем.
 
-<pre class="brush: bash">express express-locallibrary-tutorial --view=pug
-</pre>
+Выберем место для нового проекта — каталог express-locallibrary-tutorial - и выполним команду:
 
-<p>Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.</p>
+```bash
+express express-locallibrary-tutorial --view=pug
+```
 
-<pre class="brush: bash">   create : express-locallibrary-tutorial
+Будет создан каталог express-locallibrary-tutorial и выведен список созданных внутри каталога проектных файлов.
+
+```bash
+   create : express-locallibrary-tutorial
    create : express-locallibrary-tutorial/package.json
    create : express-locallibrary-tutorial/app.js
    create : express-locallibrary-tutorial/public/images
@@ -151,151 +134,149 @@ translation_of: Learn/Server-side/Express_Nodejs/skeleton_website
    create : express-locallibrary-tutorial/bin/www
 
    install dependencies:
-     &gt; cd express-locallibrary-tutorial &amp;&amp; npm install
+     > cd express-locallibrary-tutorial && npm install
 
    run the app:
-     &gt; SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
-
-<p>После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле <strong>package.json</strong>) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).</p>
-
-<h2 id="Запускаем_каркас_сайта">Запускаем каркас сайта</h2>
-
-
+     > SET DEBUG=express-locallibrary-tutorial:* & npm start
+```
 
-<p>Сейчас у нас есть готовый каркас проекта. Сайт пока ничего не делает, но его стоит запустить, чтобы убедиться в его работоспособности.</p>
+После списка файлов генератор выведет инструкции для установки зависимостей (указанных в файле **package.json**) и запуска приложения (инструкции предназначены для Windows; для Linux/Mac OS X они могут слегка отличаться).
 
+## Запускаем каркас сайта
 
+Сейчас у нас есть готовый каркас проекта. Сайт пока ничего не делает, но его стоит запустить, чтобы убедиться в его работоспособности.
 
-<ol>
- <li>Прежде всего установим зависимости (команда <code>install</code> запросит все пакеты зависимостей, указанные в файле<strong> package.json</strong>).
+1.  Прежде всего установим зависимости (команда `install` запросит все пакеты зависимостей, указанные в файле **package.json**).
 
-  <pre class="brush: bash">cd express-locallibrary-tutorial
-npm install</pre>
- </li>
- <li>Затем запустим приложение.
-  <ul>
-   <li>В Windows используйте команду:
-    <pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm start</pre>
-   </li>
-   <li>В Mac OS X или Linux используйте команду:
-    <pre class="brush: bash">DEBUG=express-locallibrary-tutorial:* npm start
-</pre>
-   </li>
-  </ul>
- </li>
- <li>Откроем <a href="http://localhost:3000/">http://localhost:3000/</a> в браузере. Мы должны увидеть такую страницу:</li>
-</ol>
+    ```bash
+    cd express-locallibrary-tutorial
+    npm install
+    ```
 
-<p><img alt="Browser for default Express app generator website" src="https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png" style="display: block; height: 403px; margin: 0px auto; width: 576px;"></p>
+2.  Затем запустим приложение.
 
-<p>У нас получилось веб-приложение на базе Express, работающее по адресу <em>localhost:3000</em>.</p>
+    - В Windows используйте команду:
 
-<div class="note">
-<p><strong>Примечание:</strong> Можно также запустить приложение командой <code>npm start</code>. Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:</p>
+      ```bash
+      SET DEBUG=express-locallibrary-tutorial:* & npm start
+      ```
 
-<pre class="brush: bash">&gt;SET DEBUG=express-locallibrary-tutorial:* &amp; npm start
+    - В Mac OS X или Linux используйте команду:
 
-&gt; express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial
-&gt; node ./bin/www
+      ```bash
+      DEBUG=express-locallibrary-tutorial:* npm start
+      ```
 
-  express-locallibrary-tutorial:server Listening on port 3000 +0ms
-GET / 200 288.474 ms - 170
-GET /stylesheets/style.css 200 5.799 ms - 111
-GET /favicon.ico 404 34.134 ms - 1335</pre>
-</div>
+3.  Откроем <http://localhost:3000/> в браузере. Мы должны увидеть такую страницу:
 
-<h2 id="Обеспечиваем_перезапуск_сервера_при_изменении_файлов">Обеспечиваем<br>
- перезапуск сервера при изменении файлов</h2>
+![Browser for default Express app generator website](https://mdn.mozillademos.org/files/14375/ExpressGeneratorSkeletonWebsite.png)
 
-<p>Любые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.</p>
+У нас получилось веб-приложение на базе Express, работающее по адресу _localhost:3000_.
 
-<p>Одно из самых простых средств для этого --<br>
- <a href="https://github.com/remy/nodemon">nodemon</a>. Его обычно устанавливают глобально (так как это "инструмент"), но  сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):</p>
+> **Примечание:** Можно также запустить приложение командой `npm start`. Переменная DEBUG, указанная в примере, включает логирование в консоль для дальнейшей отладки. Так, при посещении страницы веб-приложения, вы увидите похожий вывод в консоль:
+>
+> ```bash
+> >SET DEBUG=express-locallibrary-tutorial:* & npm start
+>
+> > express-locallibrary-tutorial@0.0.0 start D:\express-locallibrary-tutorial
+> > node ./bin/www
+>
+>   express-locallibrary-tutorial:server Listening on port 3000 +0ms
+> GET / 200 288.474 ms - 170
+> GET /stylesheets/style.css 200 5.799 ms - 111
+> GET /favicon.ico 404 34.134 ms - 1335
+> ```
 
-<pre class="brush: bash">npm install --save-dev nodemon</pre>
+## Обеспечиваем<br>перезапуск сервера при изменении файлов
 
+Любые изменения, внесённые на веб-сайт Express, не будут отображаться до перезапуска сервера. Остановка (Ctrl-C) и перезапуск сервера каждый раз после внесения изменений быстро становится раздражающей, поэтому стоит автоматизировать перезапуск.
 
+Одно из самых простых средств для этого --
+[nodemon](https://github.com/remy/nodemon). Его обычно устанавливают глобально (так как это "инструмент"), но сейчас мы установим его и будем применять локально как зависимость разработки, так что любые разработчики проекта получат его автоматически при установке приложения. Выполним следующую команду (предполагаем, что мы находимся в корневом каталоге):
 
-<p>Если вы предпочитаете установить nodemon глобально, не только для этого проекта, надо выполнить команду</p>
+```bash
+npm install --save-dev nodemon
+```
 
+Если вы предпочитаете установить nodemon глобально, не только для этого проекта, надо выполнить команду
 
+```
+npm install -g nodemon
+```
 
-<pre><code>npm install -g nodemon</code></pre>
+В файле **package.json** проекта появится новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :
 
-
-
-<p>В файле <strong>package.json </strong>проекта появится  новый раздел с этой зависимостью (на вашей машине номер версии nodemon может быть другим) :</p>
-
-<pre class="brush: json">  "devDependencies": {
+```json
+  "devDependencies": {
     "nodemon": "^1.11.0"
   }
-</pre>
+```
 
-<p>Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах.  Раздел  <code>scripts</code> в файле package.json исходно будет содержать одну строку, которая начинается с  <code>"start"</code>. Обновите его, поставив запятую в конце строки, и добавьте строку <code>"devstart",</code>  показанную ниже:</p>
+Поскольку nodemon не установлен глобально, его нельзя запустить из командной строки (пока мы не добавим его в путь), но его можно вызвать из сценария NPM, так как NPM знает все об установленных пакетах. Раздел `scripts` в файле package.json исходно будет содержать одну строку, которая начинается с `"start"`. Обновите его, поставив запятую в конце строки, и добавьте строку `"devstart",` показанную ниже:
 
-<pre class="brush: json">  "scripts": {
-    "start": "node ./bin/www"<strong>,</strong>
-<strong>    "devstart": "nodemon ./bin/www"</strong>
+```json
+  "scripts": {
+    "start": "node ./bin/www",
+    "devstart": "nodemon ./bin/www"
   },
-</pre>
-
-<p>Теперь можно запустить сервер почти так же, как и ранее, но командой npm run devstart:</p>
+```
 
-<ul>
- <li>В Windows:</li>
-</ul>
+Теперь можно запустить сервер почти так же, как и ранее, но командой npm run devstart:
 
-<pre class="brush: bash">SET DEBUG=express-locallibrary-tutorial:* &amp; npm <strong>run devstart</strong></pre>
+- В Windows:
 
-<ul>
- <li>Для macOS или Linux:</li>
-</ul>
+```bash
+SET DEBUG=express-locallibrary-tutorial:* & npm run devstart
+```
 
-<pre><code>DEBUG=express-locallibrary-tutorial:* npm <strong>run devstart</strong></code></pre>
+- Для macOS или Linux:
 
-<div class="note">
-<p><strong>Примечание:</strong> Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя <code>rs</code> в командной строке). Вам всё равно придётся обновить страницу в браузере .</p>
+```
+DEBUG=express-locallibrary-tutorial:* npm run devstart
+```
 
-<p>Теперь мы должны выполнять команду "<code>npm run </code><em>&lt;scriptname&gt;</em>" а не просто  <code>npm start</code>, поскольку "start", это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии "start", но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.</p>
-</div>
+> **Примечание:** Сейчас после изменения любого файла проекта сервер будет перезапускаться (или можно самостоятельно перезапустить его, введя `rs` в командной строке). Вам всё равно придётся обновить страницу в браузере .
+>
+> Теперь мы должны выполнять команду "`npm run `_\<scriptname>_" а не просто `npm start`, поскольку "start", это, по сути, команда NPM, сопоставленная сценарию в файле package.json. Можно заменить команду в сценарии "start", но, так как мы хотим использовать nodemon только во время разработки, разумно создать новую команду сценария.
 
-<h2 id="Созданный_проект">Созданный проект</h2>
+## Созданный проект
 
-<p>Давайте посмотрим на созданный проект.</p>
+Давайте посмотрим на созданный проект.
 
-<h3 id="Структура_каталогов">Структура каталогов</h3>
+### Структура каталогов
 
-<p>После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы <strong>без </strong>префикса"/"). Файл <strong>package.json</strong> определяет имя файла с приложением, сценарии запуска, зависимости и др.  Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript <strong>/bin/www</strong>. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает  <strong>app.js </strong>для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога <strong>routes/</strong>.  Шаблоны хранятся в каталоге /<strong>views</strong>.</p>
+После установки зависимостей проект имеет такую структуру файлов (файлы - это элементы **без** префикса"/"). Файл **package.json** определяет имя файла с приложением, сценарии запуска, зависимости и др. Сценарий запуска задаёт точку входа приложения, у нас -- файл JavaScript **/bin/www**. Этот файл настраивает некоторые обработчики ошибок приложения, а затем загружает **app.js** для выполнения остальной работы. Пути приложения хранятся в отдельных модулях каталога **routes/**. Шаблоны хранятся в каталоге /**views**.
 
-<pre>/express-locallibrary-tutorial
-    <strong>app.js</strong>
+```
+/express-locallibrary-tutorial
+    app.js
     /bin
-        <strong>www</strong>
-    <strong>package.json</strong>
+        www
+    package.json
     /node_modules
         [about 4,500 subdirectories and files]
     /public
         /images
         /javascripts
         /stylesheets
-            <strong>style.css</strong>
+            style.css
     /routes
-        <strong>index.js</strong>
-        <strong>users.js</strong>
+        index.js
+        users.js
     /views
-        <strong>error.pug</strong>
-        <strong>index.pug</strong>
-        <strong>layout.pug</strong>
+        error.pug
+        index.pug
+        layout.pug
+```
 
-</pre>
+Далее файлы описаны более подробно.
 
-<p>Далее файлы описаны более подробно.</p>
+### package.json
 
-<h3 id="package.json">package.json</h3>
+Файл **package.json** указывает зависимости приложения и содержит другие данные:
 
-<p>Файл <strong>package.json </strong>указывает зависимости приложения и содержит другие данные:</p>
-
-<pre class="brush: json">{
+```json
+{
   "name": "express-locallibrary-tutorial",
   "version": "0.0.0",
   "private": true,
@@ -307,117 +288,120 @@ GET /favicon.ico 404 34.134 ms - 1335</pre>
     "body-parser": "~1.15.2",
     "cookie-parser": "~1.4.3",
     "debug": "~2.2.0",
-<strong>    "express": "~4.14.0",</strong>
+    "express": "~4.14.0",
     "morgan": "~1.7.0",
-<strong>    "pug": "~2.0.0-beta6",</strong>
+    "pug": "~2.0.0-beta6",
     "serve-favicon": "~2.3.0"
   },
   "devDependencies": {
     "nodemon": "^1.11.0"
   }
-}</pre>
+}
+```
 
-<p>Зависимости включают пакет express и пакет для выбранного движка представления (pug). Кроме того, указаны пакеты, полезные во многих веб-приложениях:</p>
+Зависимости включают пакет express и пакет для выбранного движка представления (pug). Кроме того, указаны пакеты, полезные во многих веб-приложениях:
 
-<ul>
- <li><a href="https://www.npmjs.com/package/body-parser">body-parser</a>: -- анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать <code>POST-</code>параметры.</li>
- <li><a href="https://www.npmjs.com/package/cookie-parser">cookie-parser</a>: разбирает заголовок и заполняет <code>req.cookies</code> (по сути, даёт удобный метод для доступа к информации cookie).</li>
- <li><a href="https://www.npmjs.com/package/debug">debug</a>: небольшой отладчик, работающий по образцу методики отладки ядра node.</li>
- <li><a href="https://www.npmjs.com/package/morgan">morgan</a>: средство логирования запросов HTTP для node.</li>
- <li><a href="https://www.npmjs.com/package/serve-favicon">serve-favicon</a>: средство обработки <a href="https://en.wikipedia.org/wiki/Favicon">favicon</a> (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).</li>
-</ul>
+- [body-parser](https://www.npmjs.com/package/body-parser): -- анализирует часть тела входящего запроса HTTP и облегчает извлечение из него различных частей. Например, мы можно читать `POST-`параметры.
+- [cookie-parser](https://www.npmjs.com/package/cookie-parser): разбирает заголовок и заполняет `req.cookies` (по сути, даёт удобный метод для доступа к информации cookie).
+- [debug](https://www.npmjs.com/package/debug): небольшой отладчик, работающий по образцу методики отладки ядра node.
+- [morgan](https://www.npmjs.com/package/morgan): средство логирования запросов HTTP для node.
+- [serve-favicon](https://www.npmjs.com/package/serve-favicon): средство обработки [favicon](https://en.wikipedia.org/wiki/Favicon) (значка, используемого для представления сайта на вкладках браузера, закладках и т. д).
 
-<p>Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой <code>npm start</code>.  Можно видеть, что самом деле выполняется команда node <strong>./bin/www</strong>.  Кроме того, определяется script "<em>devstart</em>", который вызывается командой <code>npm run devstart</code>. Запускается тот же файл <strong>./bin/www</strong> ,но командой <em>nodemon</em> вместо <em>node</em>.</p>
+Раздел "scripts" определяет скрипт" start", выполняемый при запуске сервера командой `npm start`. Можно видеть, что самом деле выполняется команда node **./bin/www**. Кроме того, определяется script "_devstart_", который вызывается командой `npm run devstart`. Запускается тот же файл **./bin/www** ,но командой _nodemon_ вместо _node_.
 
-<pre><code>"scripts": {
+```
+"scripts": {
     "start": "node ./bin/www",
     "devstart": "nodemon ./bin/www"
-  },</code></pre>
+  },
+```
 
-<h3 id="Файл_www">Файл www</h3>
+### Файл www
 
-<p>Файл <strong>/bin/www</strong> – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=<code>require(./</code><code>app</code><code>).</code></p>
+Файл **/bin/www** – это входная точка приложения. Сначала в файле создаётся объект основного приложения, расположенного в app.js — выполняется app=` require(./``app``). `
 
-<pre class="brush: js">#!/usr/bin/env node
+```js
+#!/usr/bin/env node
 
 /**
  * Module dependencies.
  */
 
-<strong>var app = require('../app');</strong>
-</pre>
+var app = require('../app');
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> <code>require()</code> -- это глобальная функция node  для импорта модулей в текущий файл.  Для модуля <strong>app.js </strong>указан относительный путь, а расширение файла по умолчанию (.js) опущено.</p>
-</div>
+> **Примечание:** `require()` -- это глобальная функция node для импорта модулей в текущий файл. Для модуля **app.js** указан относительный путь, а расширение файла по умолчанию (.js) опущено.
 
-<p>Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.</p>
+Оставшаяся часть кода настраивает порт сервера node для HTTP (определён в переменной среды или 3000, если не определён), и начинает обработку и протоколирование соединений и ошибок сервера. Сейчас вам не требуется дополнительных сведений о коде (все в этом файле шаблонно), но, при желании, его можно посмотреть.
 
-<h3 id="Файл_app.js">Файл app.js</h3>
+### Файл app.js
 
-<p>Этот файл создаёт объект приложения  <code>express </code>(с именем<code>app</code>, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:</p>
+Этот файл создаёт объект приложения `express `(с именем`app`, по соглашению), настраивает приложение и промежуточное ПО, а затем экспортирует приложение из модуля. В приведённом ниже коде показаны только те части файла, которые создают и экспортируют объект приложения:
 
-<pre class="brush: js"><code>var express = require('express');
+```js
+var express = require('express');
 var app = express();
 ...
-</code>module.exports = app;
-</pre>
+module.exports = app;
+```
 
-<p>Именно этот экспортированный объект использован в рассмотренном ранее файле www.</p>
+Именно этот экспортированный объект использован в рассмотренном ранее файле www.
 
-<p>Рассмотрим детали файла app.js. Сначала при помощи require(...) выполняется импорт некоторых полезных библиотек node: <em>express,</em> s<em>erve-favicon</em>, <em>morgan</em>, <em>cookie-parse, body-parser </em>(они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).</p>
+Рассмотрим детали файла app.js. Сначала при помощи require(...) выполняется импорт некоторых полезных библиотек node: _express,_ s*erve-favicon*, _morgan_, _cookie-parse, body-parser_ (они ранее были загружены для нашего приложения командой npm install), а также path из основной библиотеки node (применяется для разбора путей каталогов и файлов).
 
-<pre class="brush: js">var express = require('express');
+```js
+var express = require('express');
 var path = require('path');
 var favicon = require('serve-favicon');
 var logger = require('morgan');
 var cookieParser = require('cookie-parser');
 var bodyParser = require('body-parser');
-</pre>
+```
 
-<p>Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.</p>
+Затем require запрашивает модули из каталога путей route. Эти модули и файлы содержат код для обработки конкретного набора соответствующих путей (URL маршрутов). Если мы расширим каркас приложения, например, чтобы получить список книг библиотеки, нам следует добавить новый файл для обработки пути, связанного с книгами.
 
-<pre class="brush: js">var index = require('./routes/index');
+```js
+var index = require('./routes/index');
 var users = require('./routes/users');
-</pre>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.</p>
-</div>
+> **Примечание:** Здесь мы только импортируем модули. В действительности эти пути ещё не используются — это произойдёт в файле несколько позже.
 
-<p>Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").</p>
+Далее, импортированные модули express применяются для создания объекта app, который потом устанавливает движки-шаблоны представления. Установка движков состоит их двух частей. В первой мы задаём значение 'view', указывая папку, в которой будут размещаться шаблоны (у нас это /views). Во второй мы задаём значение движка 'view engine', указывая на библиотеку шаблона (у нас — "pug").
 
-<pre class="brush: js">var app = express();
+```js
+var app = express();
 
 // view engine setup
 app.set('views', path.join(__dirname, 'views'));
 app.set('view engine', 'pug');
-</pre>
+```
 
-<p>Следующие строки вызывают app.use(...), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки <strong>/public </strong>корня проекта.</p>
+Следующие строки вызывают app.use(...), чтобы добавить промежуточные (middleware) библиотеки в цепочку обработки запросов. Кроме сторонних библиотек, импортированных ранее, используем библиотеку Express.static, что позволит обрабатывать статические файлы из папки **/public** корня проекта.
 
-<pre class="brush: js">// uncomment after placing your favicon in /public
+```js
+// uncomment after placing your favicon in /public
 //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
-<strong>app.use(express.static(path.join(__dirname, 'public')));</strong>
-</pre>
+app.use(express.static(path.join(__dirname, 'public')));
+```
 
-<p>Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:</p>
+Теперь, когда промежуточные библиотеки настроены, мы добавляем (импортированный ранее) код обработки путей в цепочку обработки запросов. Импортированный код будет задавать отдельные пути для разных частей сайта:
 
-<pre class="brush: js">app.use('/', index);
+```js
+app.use('/', index);
 app.use('/users', users);
-</pre>
+```
 
-<div class="note">
-<p><strong>Примечание:</strong> . пути, указанные выше ('/' и '<code>/users'</code>) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile.  Мы поговорим подробнее о путях в последующей статье.</p>
-</div>
+> **Примечание:** . пути, указанные выше ('/' и '`/users'`) рассматриваются как префиксы путей, определённых в импортированных файлах. Так, например, если импортированный модуль users определяет путь для /profile, для доступа следует указать /users/profile. Мы поговорим подробнее о путях в последующей статье.
 
-<p>Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.</p>
+Последняя в файле промежуточная библиотека добавляет методы обработки ошибок и ответов 404 от HTTP.
 
-<pre class="brush: js">// catch 404 and forward to error handler
+```js
+// catch 404 and forward to error handler
 app.use(function(req, res, next) {
   var err = new Error('Not Found');
   err.status = 404;
@@ -434,74 +418,70 @@ app.use(function(err, req, res, next) {
   res.status(err.status || 500);
   res.render('error');
 });
-</pre>
+```
 
-<p>Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле <strong>/bin/www</strong>).</p>
+Объект app приложения Express теперь полностью настроен. Остался последний шаг - добавить его к экспортируемым элементам модуля (это позволит импортировать его в файле **/bin/www**).
 
-<pre class="brush: js">module.exports = app;</pre>
+```js
+module.exports = app;
+```
 
-<h3 id="Пути_Routes">Пути (Routes)</h3>
+### Пути (Routes)
 
-<p>Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.</p>
+Файл путей /routes/users.js приведён ниже (файлы путей имеют сходную структуру, поэтому нет необходимости приводить также index.js). Сначала загружается модуль Express, затем он используется для получения объекта express.Router. После этого для этого объекта задаётся путь, и, наконец, объект-роутер экспортируется из модуля (именно это позволяет импортировать файл в app.js):.
 
-<pre class="brush: js">var express = require('express');
+```js
+var express = require('express');
 var router = express.Router();
 
 /* GET users listing. */
-<strong>router.get('/', function(req, res, next) {
+router.get('/', function(req, res, next) {
   res.send('respond with a resource');
-});</strong>
+});
 
 module.exports = router;
-</pre>
+```
 
-<p>Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля -- ('<code>/users</code>') плюс что-то, определяемое в этом файле ('<code>/</code>'). Иными словами, этот путь будет использован, когда получен URL-запрос <code>/users/</code>.</p>
+Путь определяет колбэк-функцию, которая будет вызвана, когда обнаружится HTTP GET-запрос корректного вида. Образец для сопоставления пути задаётся при импорте модуля -- ('`/users`') плюс что-то, определяемое в этом файле ('`/`'). Иными словами, этот путь будет использован, когда получен URL-запрос `/users/`.
 
-<div class="note">
-<p><strong>Совет:</strong> запустите сервер и задайте в браузере URL <a href="http://localhost:3000/users/">http://localhost:3000/users/</a>. Вы должны увидеть<strong> </strong>сообщение: 'respond with a resource'.</p>
-</div>
+> **Примечание:** **Совет:** запустите сервер и задайте в браузере URL <http://localhost:3000/users/>. Вы должны увидеть\*\* \*\*сообщение: 'respond with a resource'.
 
-<p>Стоит отметить, что колбэк-функция имеет третий аргумент - '<code>next</code>', т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути <code>'/'</code>.</p>
+Стоит отметить, что колбэк-функция имеет третий аргумент - '`next`', т. е. является не простой колбэк-функцией, а колбэк-функцией промежуточного модуля. Пока третий аргумент не используется, но будет полезен в дальнейшем, если мы захотим создать несколько обработчиков пути `'/'`.
 
-<h3 id="Представления_шаблоны">Представления (шаблоны)</h3>
+### Представления (шаблоны)
 
-<p>Файлы преставлений (шаблонов) хранятся в каталоге <strong>/views </strong>(это указано в app.js) и имеют расширение<strong> </strong><strong>.pug</strong>. Метод <code><a href="http://expressjs.com/en/4x/api.html#res.render">Response.render()</a></code> выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из <strong>/routes/index.js</strong> (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.</p>
+Файлы преставлений (шаблонов) хранятся в каталоге **/views** (это указано в app.js) и имеют расширение** \*\***.pug**. Метод [`Response.render()`](http://expressjs.com/en/4x/api.html#res.render) выполняет указанный шаблон, передавая объекту значение именованной переменной, и затем посылает результат как ответ. В коде из **/routes/index.js\*\* (приводится ниже) можно увидеть, что роут отвечает, используя шаблон "index" с переданным значением переменной "title" из шаблона.
 
-<pre class="brush: js">/* GET home page. */
+```js
+/* GET home page. */
 router.get('/', function(req, res) {
   res.render('index', { title: 'Express' });
 });
-</pre>
+```
 
-<p>Шаблон для пути '/' приведён ниже (файл <strong>index.pug</strong>). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.</p>
+Шаблон для пути '/' приведён ниже (файл **index.pug**). О синтаксисе мы поговорим позже. Сейчас важно знать, что переменная title со значением 'Express' помещена в определённое место шаблона.
 
-<pre>extends layout
+```
+extends layout
 
 block content
   h1= title
   p Welcome to #{title}
-</pre>
-
-<h2 id="Мини-тест">Мини-тест</h2>
-
-<p>Создайте новый путь в <strong>/routes/users.js</strong>, чтобы выводить текст <strong>"</strong><em>You're so cool" </em>или<em> </em><em>"</em><em>Ну, вы крутой!</em><em>" </em>по URL<em> </em><code>/users/cool/</code><em>. </em>Проверьте его, запустив сервер и посетив в браузере <em><a href="http://localhost:3000/users/cool/">http://localhost:3000/users/cool/</a>.</em></p>
-
-<ul>
-</ul>
+```
 
-<h2 id="Итоги">Итоги</h2>
+## Мини-тест
 
+Создайте новый путь в **/routes/users.js**, чтобы выводить текст **"**_You're so cool"_ или* **"**Ну, вы крутой!\_\_"* по URL\_ _`/users/cool/`_._ Проверьте его, запустив сервер и посетив в браузере _<http://localhost:3000/users/cool/>.\_
 
+## Итоги
 
-<p>Сейчас создан каркас проекта <a>Local Library</a>. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.</p>
+Сейчас создан каркас проекта Local Library. Мы проверили, что он запускается с использованием Node. Но главное, что вы поняли структуру проекта, и знаете, где и как добавить пути и представления для нашей локальной библиотеки.
 
-<p lang="ru-RU">Далее мы изменим каркас, чтобы он работал как библиотечный веб-сайт</p>
+Далее мы изменим каркас, чтобы он работал как библиотечный веб-сайт
 
-<h2 id="Смотрите_также">Смотрите также</h2>
+## Смотрите также
 
-<ul>
- <li><a href="https://expressjs.com/en/starter/generator.html">Express application generator</a> (документация Express)</li>
- <li><a href="https://expressjs.com/en/guide/using-template-engines.html">Using template engi nes with Express</a> (документация Express) </li>
-</ul>
+- [Express application generator](https://expressjs.com/en/starter/generator.html) (документация Express)
+- [Using template engi nes with Express](https://expressjs.com/en/guide/using-template-engines.html) (документация Express)
 
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/Tutorial_local_library_website", "Learn/Server-side/Express_Nodejs/mongoose", "Learn/Server-side/Express_Nodejs")}}
diff --git a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
index 25771dfef07561..fcd031482a90ac 100644
--- a/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
+++ b/files/ru/learn/server-side/express_nodejs/tutorial_local_library_website/index.md
@@ -12,63 +12,48 @@ tags:
 translation_of: Learn/Server-side/Express_Nodejs/Tutorial_local_library_website
 original_slug: Learn/Server-side/Express_Nodejs/Учебник_сайт_local_library
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</div>
+Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор сайта "локальной библиотеки" ("local library"), над которым мы будем работать и развивать в последующих статьях.
 
-<p class="summary">Первая статья в нашей серии практических уроков объясняет, что вы будете изучать, и предоставит обзор сайта "локальной библиотеки" ("local library"), над которым мы будем работать и развивать в последующих статьях.</p>
+| Необходимые знания: | Прочтите [Введение в Express](/ru/docs/Learn/Server-side/Express_Nodejs/Introduction). Для следования статьям вам также надо будет [установить среду разработки Node](/ru/docs/Learn/Server-side/Express_Nodejs/development_environment). |
+| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:             | Представить пример приложения, используемого в этом учебнике, и позволить читателям понять, какие темы будут рассмотрены.                                                                                                                 |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые знания:</th>
-   <td>Прочтите <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/Introduction">Введение в Express</a>. Для следования статьям вам также надо будет <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/development_environment">установить среду разработки Node</a>. </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Представить пример приложения, используемого в этом учебнике, и позволить читателям понять, какие темы будут рассмотрены. </td>
-  </tr>
- </tbody>
-</table>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Добро пожаловать в учебник MDN «Local Library» Express (Node), в котором мы разрабатываем веб-сайт, который может использоваться для управления каталогом локальной библиотеки.
 
-<p>Добро пожаловать в учебник MDN «Local Library» Express (Node), в котором мы разрабатываем веб-сайт, который может использоваться для управления каталогом локальной библиотеки.</p>
+В этой серии обучающих статей вы будете:
 
-<div style="padding-bottom: 30px;">В этой серии обучающих статей вы будете:</div>
+- Использовать инструмент _Express Application Generator_ для создания веб-сайта и скелета приложения.
+- Запускать и останавливать веб сервер Node.
+- Использовать базу данных для хранения данных вашего приложения.
+- Создавать маршруты для запросов различной информации и шаблонов ("представлений") для рендеринга данных в виде HTML для отображения в браузере.
+- Работать с формами.
+- Развёртывать ваше приложение в производство.
 
-<ul>
- <li>Использовать инструмент <em>Express Application Generator</em> для создания веб-сайта и скелета приложения.</li>
- <li>Запускать и останавливать веб сервер Node.</li>
- <li>Использовать базу данных для хранения данных вашего приложения.</li>
- <li>Создавать маршруты для запросов различной информации и шаблонов ("представлений") для рендеринга данных в виде HTML для отображения в браузере.</li>
- <li>Работать с формами.</li>
- <li>Развёртывать ваше приложение в производство.</li>
-</ul>
+Вы уже имеете знания о некоторых из этих тем и кратко касались других. К концу серии уроков вы должны знать достаточно, чтобы разрабатывать простые приложения Express самостоятельно.
 
-<p>Вы уже имеете знания о некоторых из этих тем и кратко касались других. К концу серии уроков вы должны знать достаточно, чтобы разрабатывать простые приложения Express самостоятельно.</p>
+## Сайт LocalLibrary
 
-<h2 id="Сайт_LocalLibrary">Сайт LocalLibrary</h2>
+_LocalLibrary_ это название сайта который мы будем создавать и развивать в ходе прохождения этого курса уроков. Как и следовало ожидать, цель сайта - предоставить онлайн-каталог для небольшой локальной библиотеки, где пользователи могут просматривать доступные книги и управлять своими учётными записями.
 
-<p><em>LocalLibrary</em> это название сайта который мы будем создавать и развивать в ходе прохождения этого курса уроков. Как и следовало ожидать, цель сайта - предоставить онлайн-каталог для небольшой локальной библиотеки, где пользователи могут просматривать доступные книги и управлять своими учётными записями.</p>
+Этот пример был тщательно подобран, потому что он может масштабироваться, чтобы отображать насколько можно много или мало записей, и может использоваться для демонстрации почти любой возможности Express. Что ещё более важно, это позволяет нам обеспечить _управляемый_ путь через функциональность, которая вам понадобится на любом веб-сайте:
 
-<p>Этот пример был тщательно подобран, потому что он может масштабироваться, чтобы отображать насколько можно много или мало записей, и может использоваться для демонстрации почти любой возможности Express. Что ещё более важно, это позволяет нам обеспечить <em>управляемый</em> путь через функциональность, которая вам понадобится на любом веб-сайте:</p>
+- В первых учебных статьях мы определим простую библиотеку, доступную _только для просмотра_, которую могут использовать члены библиотеки, чтобы узнать, какие книги доступны. Это позволяет нам исследовать операции, общие для почти каждого сайта: чтение и отображение содержимого из базы данных.
+- По мере нашего развития, пример библиотеки, естественно, будет расширяться, чтобы продемонстрировать более продвинутые функции веб-сайта. Например, мы можем расширить библиотеку, чтобы разрешить создание новых книг, и использовать это, чтобы продемонстрировать, как использовать формы, а также поддерживать аутентификацию пользователей.
 
-<ul>
- <li>В первых учебных статьях мы определим простую библиотеку, доступную <em>только для просмотра</em>, которую могут использовать члены библиотеки, чтобы узнать, какие книги доступны. Это позволяет нам исследовать операции, общие для почти каждого сайта: чтение и отображение содержимого из базы данных.</li>
- <li>По мере нашего развития, пример библиотеки, естественно, будет расширяться, чтобы продемонстрировать более продвинутые функции веб-сайта. Например, мы можем расширить библиотеку, чтобы разрешить создание новых книг, и использовать это, чтобы продемонстрировать, как использовать формы, а также поддерживать аутентификацию пользователей.</li>
-</ul>
+Несмотря на то, что это очень масштабируемый пример, он называется _**Local**Library,_ потому что мы надеемся показать минимальную информацию, которая поможет быстро начать работать с Express. В результате мы будем хранить информацию о книгах, копиях книг, авторов и другой ключевой информации. Однако, мы не будем хранить информацию о других предметах, которые может предоставить библиотека, или предоставить инфраструктуру, необходимую для поддержки нескольких сайтов библиотек или других функций "большой библиотеки".
 
-<p>Несмотря на то, что это очень масштабируемый пример, он называется <em><strong>Local</strong>Library,</em> потому что мы надеемся показать минимальную информацию, которая поможет быстро начать работать с Express. В результате мы будем хранить информацию о книгах, копиях книг, авторов и другой ключевой информации. Однако, мы не будем хранить информацию о других предметах, которые может предоставить библиотека, или предоставить инфраструктуру, необходимую для поддержки нескольких сайтов библиотек или других функций "большой библиотеки".</p>
+## Я застрял, где я могу посмотреть код?
 
-<h2 id="Я_застрял_где_я_могу_посмотреть_код">Я застрял, где я могу посмотреть код?</h2>
+По мере того, как вы работаете над учебником, мы предоставим вам соответствующие фрагменты кода для копирования и вставки в каждой точке, а также будет другой код, который, мы надеемся, вы расширите самостоятельно (с некоторыми рекомендациями).
 
-<p>По мере того, как вы работаете над учебником, мы предоставим вам соответствующие фрагменты кода для копирования и вставки в каждой точке, а также будет другой код, который, мы надеемся, вы расширите самостоятельно (с некоторыми рекомендациями).</p>
+Если вы застряли, вы можете найти полностью разработанную версию веб-сайта [на Github](https://github.com/mdn/express-locallibrary-tutorial).
 
-<p>Если вы застряли, вы можете найти полностью разработанную версию веб-сайта <a href="https://github.com/mdn/express-locallibrary-tutorial">на Github</a>.</p>
+## Резюме
 
-<h2 id="Резюме">Резюме</h2>
+Теперь, когда вы знаете немного больше о сайте _LocalLIbrary_ и о том, что мы будем изучать, пришло время приступить к созданию [скелета проекта](/ru/docs/Learn/Server-side/Express_Nodejs/skeleton_website), который будет использован в нашем сайте.
 
-<p>Теперь, когда вы знаете немного больше о сайте <em>LocalLIbrary</em> и о том, что мы будем изучать, пришло время приступить к созданию <a href="/en-US/docs/Learn/Server-side/Express_Nodejs/skeleton_website">скелета проекта</a>, который будет использован в нашем сайте.</p>
-
-<p>{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}</p>
+{{PreviousMenuNext("Learn/Server-side/Express_Nodejs/development_environment", "Learn/Server-side/Express_Nodejs/skeleton_website", "Learn/Server-side/Express_Nodejs")}}
diff --git a/files/ru/learn/server-side/first_steps/client-server_overview/index.md b/files/ru/learn/server-side/first_steps/client-server_overview/index.md
index e26e85f42b5ec0..450198bd8a9c0d 100644
--- a/files/ru/learn/server-side/first_steps/client-server_overview/index.md
+++ b/files/ru/learn/server-side/first_steps/client-server_overview/index.md
@@ -16,73 +16,56 @@ tags:
   - Учить
 translation_of: Learn/Server-side/First_steps/Client-Server_overview
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+Теперь, когда вы знаете цель и потенциальные преимущества программирования на стороне сервера, мы подробно рассмотрим, что происходит, когда сервер получает «динамический запрос» от браузера. Поскольку большая часть серверного кода веб-сайта обрабатывает запросы и ответы аналогичным образом, это поможет вам понять, что нужно делать при написании большей части собственного кода.
 
-<p class="summary">Теперь, когда вы знаете цель и потенциальные преимущества программирования на стороне сервера, мы подробно рассмотрим, что происходит, когда сервер получает «динамический запрос» от браузера. Поскольку большая часть серверного кода веб-сайта обрабатывает запросы и ответы аналогичным образом, это поможет вам понять, что нужно делать при написании большей части собственного кода.</p>
+| Перед стартом: | Базовая компьютерная грамотность. Базовое понимание того, что такое веб-сервер.                                                                            |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:          | Изучить взаимодействие между клиентом и сервером на динамическом веб-сайте и, в частности, узнать, какие действия нужно произвести в коде серверной части. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Перед стартом:</th>
-   <td>Базовая компьютерная грамотность. Базовое понимание того, что такое веб-сервер.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Изучить взаимодействие между клиентом и сервером на динамическом веб-сайте и, в частности, узнать, какие действия нужно произвести в коде серверной части.</td>
-  </tr>
- </tbody>
-</table>
+В обсуждении нет реального кода, поскольку мы ещё не выбрали, какой именно веб-фреймворк будем использовать для написания нашего кода! Тем не менее, это обсуждение всё ещё очень актуально, поскольку описанное поведение должно быть реализовано вашим серверным кодом независимо от того, какой язык программирования или веб-фреймворк вы выберите.
 
-<p>В обсуждении нет реального кода, поскольку мы ещё не выбрали, какой именно веб-фреймворк будем использовать для написания нашего кода! Тем не менее, это обсуждение всё ещё очень актуально, поскольку описанное поведение должно быть реализовано вашим серверным кодом независимо от того, какой язык программирования или веб-фреймворк вы выберите.</p>
+## Веб-серверы и HTTP (для начинающих)
 
-<h2 id="Веб-серверы_и_HTTP_для_начинающих">Веб-серверы и HTTP (для начинающих)</h2>
+Веб-браузеры взаимодействуют с [веб-серверами](/ru/docs/Learn/Common_questions/What_is_a_web_server) при помощи протокола передачи гипертекста ([HTTP](/ru/docs/Web/HTTP)). Когда вы кликаете на ссылку на странице, заполняете форму или производите поиск, браузер отправляет на сервер _HTTP-запрос_.
 
-<p>Веб-браузеры взаимодействуют с <a href="https://developer.mozilla.org/ru/docs/Learn/Common_questions/What_is_a_web_server">веб-серверами</a> при помощи протокола передачи гипертекста (<a href="/ru/docs/Web/HTTP">HTTP</a>). Когда вы кликаете на ссылку на странице, заполняете форму или производите поиск, браузер отправляет на сервер <em>HTTP-запрос</em>.</p>
+Этот запрос включает:
 
-<p>Этот запрос включает:</p>
+- Путь (URL), который определяет целевой сервер и ресурс (например, HTML-файл, конкретная точка данных на сервере или запускаемый инструмент).
+- Метод, который определяет необходимое действие (например, получить файл, сохранить или обновить какие-либо данные). Различные методы/команды и связанные с ними действия перечислены ниже:
 
-<ul>
- <li>Путь (URL), который определяет целевой сервер и ресурс (например, HTML-файл, конкретная точка данных на сервере или запускаемый инструмент).</li>
- <li>Метод, который определяет необходимое действие (например, получить файл, сохранить или обновить какие-либо данные). Различные методы/команды и связанные с ними действия перечислены ниже:
-  <ul style="list-style-type: circle;">
-   <li><code>GET</code> – получить определённый ресурс (например, HTML-файл, содержащий информацию о товаре или список товаров).</li>
-   <li><code>POST</code> – создать новый ресурс (например, добавить новую статью на вики, добавить новый контакт в базу данных).</li>
-   <li><code>HEAD</code> – получить метаданные об определённом ресурсе без получения содержания, как это делает запрос <code>GET</code>. Например, вы можете использовать запрос <code>HEAD</code>, чтобы узнать, когда ресурс в последний раз обновлялся, и только потом использовать (более «затратный») запрос <code>GET</code>, чтобы загрузить сам ресурс, если он был изменён.</li>
-   <li><code>PUT</code> – обновить существующий ресурс (или создать новый, если таковой не существует).</li>
-   <li><code>DELETE</code> – удалить определённый ресурс.</li>
-   <li><code>TRACE</code>, <code>OPTIONS</code>, <code>CONNECT</code>, <code>PATCH</code> – эти команды используются для менее популярных/более сложных задач, поэтому пока мы не будем их рассматривать.</li>
-  </ul>
- </li>
- <li>Дополнительная информация может быть закодирована в запросе (например, данные HTML-формы). Информация может быть закодирована как:
-  <ul style="list-style-type: circle;">
-   <li>URL-параметры: <code>GET</code> запросы зашифровывают данные в URL-адресе, который отправляется на сервер, путём добавления пар имя/значение в его конец, например, <code>http://mysite.com<strong>?name=Fred&amp;age=11</strong></code>. В этом случае всегда ставится знак вопроса (<code>?</code>), отделяющий основную часть URL-адреса от URL-параметров, знак равно (=), отделяющий каждое имя от соответствующего ему значения, и амперсанд (&amp;), разделяющий пары. URL-параметры, по своей сути, «небезопасны», так как могут быть изменены пользователями и затем отправлены повторно. В результате, URL-параметры /<code>GET</code> запросы не используются для запросов, которые обновляют данные на сервере.</li>
-   <li><code>POST</code> данные. <code>POST</code> запросы добавляют новые ресурсы, данные которых зашифрованы в теле самого запроса.</li>
-   <li>Куки-файлы клиентской части. Куки-файлы содержат данные сессий о клиенте, включая ключи, которые сервер может использовать для определения статуса его авторизации и разрешения/права доступа к ресурсам.</li>
-  </ul>
- </li>
-</ul>
+  - `GET` – получить определённый ресурс (например, HTML-файл, содержащий информацию о товаре или список товаров).
+  - `POST` – создать новый ресурс (например, добавить новую статью на вики, добавить новый контакт в базу данных).
+  - `HEAD` – получить метаданные об определённом ресурсе без получения содержания, как это делает запрос `GET`. Например, вы можете использовать запрос `HEAD`, чтобы узнать, когда ресурс в последний раз обновлялся, и только потом использовать (более «затратный») запрос `GET`, чтобы загрузить сам ресурс, если он был изменён.
+  - `PUT` – обновить существующий ресурс (или создать новый, если таковой не существует).
+  - `DELETE` – удалить определённый ресурс.
+  - `TRACE`, `OPTIONS`, `CONNECT`, `PATCH` – эти команды используются для менее популярных/более сложных задач, поэтому пока мы не будем их рассматривать.
 
-<p>Веб-серверы ожидают сообщений с запросами от клиентов, обрабатывают их, когда они приходят и отвечают веб-браузеру через сообщение с HTTP-ответом. Ответ содержит <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status">Код статуса HTTP-ответа</a>, который показывает, был ли запрос успешным (например, «<code>200 OK</code>» означает успех, «<code>404 Not Found</code>» если ресурс не может быть найден, «<code>403 Forbidden</code>», если пользователь не имеет права просматривать ресурс, и т. д.). Тело успешного ответа на запрос <code>GET</code> будет содержать запрашиваемый ресурс.</p>
+- Дополнительная информация может быть закодирована в запросе (например, данные HTML-формы). Информация может быть закодирована как:
 
-<p>После того как HTML-страница возвращена, она отрисовывается браузером. Во время этого браузер может обнаружить ссылки на другие ресурсы (например, HTML-страница обычно ссылается на JavaScript и CSS-файлы) и послать отдельные HTTP-запросы для загрузки этих файлов.</p>
+  - URL-параметры: `GET` запросы зашифровывают данные в URL-адресе, который отправляется на сервер, путём добавления пар имя/значение в его конец, например, `http://mysite.com?name=Fred&age=11`. В этом случае всегда ставится знак вопроса (`?`), отделяющий основную часть URL-адреса от URL-параметров, знак равно (=), отделяющий каждое имя от соответствующего ему значения, и амперсанд (&), разделяющий пары. URL-параметры, по своей сути, «небезопасны», так как могут быть изменены пользователями и затем отправлены повторно. В результате, URL-параметры /`GET` запросы не используются для запросов, которые обновляют данные на сервере.
+  - `POST` данные. `POST` запросы добавляют новые ресурсы, данные которых зашифрованы в теле самого запроса.
+  - Куки-файлы клиентской части. Куки-файлы содержат данные сессий о клиенте, включая ключи, которые сервер может использовать для определения статуса его авторизации и разрешения/права доступа к ресурсам.
 
-<p>Как статические, так и динамические веб-сайты (речь о которых идёт в следующих разделах) используют точно такой же протокол/шаблоны обмена данными.</p>
+Веб-серверы ожидают сообщений с запросами от клиентов, обрабатывают их, когда они приходят и отвечают веб-браузеру через сообщение с HTTP-ответом. Ответ содержит [Код статуса HTTP-ответа](/ru/docs/Web/HTTP/Status), который показывает, был ли запрос успешным (например, «`200 OK`» означает успех, «`404 Not Found`» если ресурс не может быть найден, «`403 Forbidden`», если пользователь не имеет права просматривать ресурс, и т. д.). Тело успешного ответа на запрос `GET` будет содержать запрашиваемый ресурс.
 
-<h3 id="Пример_GET_запросаответа">Пример GET запроса/ответа</h3>
+После того как HTML-страница возвращена, она отрисовывается браузером. Во время этого браузер может обнаружить ссылки на другие ресурсы (например, HTML-страница обычно ссылается на JavaScript и CSS-файлы) и послать отдельные HTTP-запросы для загрузки этих файлов.
 
-<p>Вы можете сформировать простой <code>GET</code> запрос кликнув по ссылке или через поиск по сайту (такой как страница поисковой системы). Например, HTTP-запрос, отправленный во время выполнения запроса "client server overview" на сайте MDN, будет во многом похож на текст ниже (он не будет идентичным, потому что части сообщения зависят от вашего браузера/настроек).</p>
+Как статические, так и динамические веб-сайты (речь о которых идёт в следующих разделах) используют точно такой же протокол/шаблоны обмена данными.
 
-<div class="note">
-<p>Формат HTTP сообщения определён в «веб-стандарте» (<a href="http://www.rfc-editor.org/rfc/rfc7230.txt">RFC7230</a>). Вам не нужно знать этот уровень детализации, но, по крайней мере, теперь вы знаете, откуда это появилось!</p>
-</div>
+### Пример GET запроса/ответа
 
-<h4 id="Запрос">Запрос</h4>
+Вы можете сформировать простой `GET` запрос кликнув по ссылке или через поиск по сайту (такой как страница поисковой системы). Например, HTTP-запрос, отправленный во время выполнения запроса "client server overview" на сайте MDN, будет во многом похож на текст ниже (он не будет идентичным, потому что части сообщения зависят от вашего браузера/настроек).
 
-<p>Каждая строка запроса содержит информацию о запросе. Первая часть называется <strong>заголовок</strong> и содержит важную информацию о запросе, точно так же, как <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML">HTML head</a> содержит важную информацию о HTML-документе (но не содержимое документа, которое расположено внутри тэга "body"):</p>
+> **Примечание:** Формат HTTP сообщения определён в «веб-стандарте» ([RFC7230](http://www.rfc-editor.org/rfc/rfc7230.txt)). Вам не нужно знать этот уровень детализации, но, по крайней мере, теперь вы знаете, откуда это появилось!
 
-<pre>GET https://developer.mozilla.org/en-US/search?q=client+server+overview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev HTTP/1.1
+#### Запрос
+
+Каждая строка запроса содержит информацию о запросе. Первая часть называется **заголовок** и содержит важную информацию о запросе, точно так же, как [HTML head](/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/The_head_metadata_in_HTML) содержит важную информацию о HTML-документе (но не содержимое документа, которое расположено внутри тэга "body"):
+
+```
+GET https://developer.mozilla.org/en-US/search?q=client+server+overview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev HTTP/1.1
 Host: developer.mozilla.org
 Connection: keep-alive
 Pragma: no-cache
@@ -94,45 +77,40 @@ Referer: https://developer.mozilla.org/en-US/
 Accept-Encoding: gzip, deflate, sdch, br
 Accept-Language: en-US,en;q=0.8,es;q=0.6
 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _gat=1; _ga=GA1.2.1688886003.1471911953; ffo=true
-</pre>
+```
 
-<p>Первая и вторая строки содержат большую часть информации, о которой говорилось выше:</p>
+Первая и вторая строки содержат большую часть информации, о которой говорилось выше:
 
-<ul>
- <li>Тип запроса (<code>GET</code>).</li>
- <li>URL целевого ресурса (<code>/en-US/search</code>).</li>
- <li>URL-параметры (<code>q=client%2Bserver%2Boverview&amp;topic=apps&amp;topic=html&amp;topic=css&amp;topic=js&amp;topic=api&amp;topic=webdev</code>).</li>
- <li>Целевой/хост-веб-сайт (developer.mozilla.org).</li>
- <li>Конец первой строки также содержит короткую строку, идентифицирующую версию протокола (<code>HTTP/1.1</code>).</li>
-</ul>
+- Тип запроса (`GET`).
+- URL целевого ресурса (`/en-US/search`).
+- URL-параметры (`q=client%2Bserver%2Boverview&topic=apps&topic=html&topic=css&topic=js&topic=api&topic=webdev`).
+- Целевой/хост-веб-сайт (developer.mozilla.org).
+- Конец первой строки также содержит короткую строку, идентифицирующую версию протокола (`HTTP/1.1`).
 
-<p>Последняя строка содержит информацию о клиентских куки — в данном случае можно увидеть куки, включающие id для управления сессиями (<code>Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...</code>).</p>
+Последняя строка содержит информацию о клиентских куки — в данном случае можно увидеть куки, включающие id для управления сессиями (`Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; ...`).
 
-<p>Оставшиеся строки содержат информацию об используемом браузере и о видах ответов, которые он может обработать. Например, здесь вы можете увидеть:</p>
+Оставшиеся строки содержат информацию об используемом браузере и о видах ответов, которые он может обработать. Например, здесь вы можете увидеть:
 
-<ul>
- <li>Мой браузер (<code>User-Agent</code>) — Mozilla Firefox (<code>Mozilla/5.0</code>).</li>
- <li>Он может принимать информацию, упакованную в gzip (<code>Accept-Encoding: gzip</code>).</li>
- <li>Он может принимать указанные кодировки  (<code>Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7</code>) и языков (<code>Accept-Language: de,en;q=0.7,en-us;q=0.3</code>).</li>
- <li>Строка <code>Referer</code> идентифицирует адрес веб-страницы, содержащей ссылку на этот ресурс (то есть источник оригинального запроса, <code>https://developer.mozilla.org/en-US/</code>).</li>
-</ul>
+- Мой браузер (`User-Agent`) — Mozilla Firefox (`Mozilla/5.0`).
+- Он может принимать информацию, упакованную в gzip (`Accept-Encoding: gzip`).
+- Он может принимать указанные кодировки (`Accept-Charset: ISO-8859-1,UTF-8;q=0.7,*;q=0.7`) и языков (`Accept-Language: de,en;q=0.7,en-us;q=0.3`).
+- Строка `Referer` идентифицирует адрес веб-страницы, содержащей ссылку на этот ресурс (то есть источник оригинального запроса, `https://developer.mozilla.org/en-US/`).
 
-<p>HTTP-запрос может также содержать body, но в данном случае этого нет.</p>
+HTTP-запрос может также содержать body, но в данном случае этого нет.
 
-<h4 id="Ответ">Ответ</h4>
+#### Ответ
 
-<p>Первая часть ответа на запрос показана ниже. Заголовок содержит следующую информацию:</p>
+Первая часть ответа на запрос показана ниже. Заголовок содержит следующую информацию:
 
-<ul>
- <li>Первая строка содержит код ответа <code>200 OK</code>, говорящий о том, что запрос выполнен успешно.</li>
- <li>Мы можем видеть, что ответ имеет <code>text/html</code> формат (<code>Content-Type</code>).</li>
- <li>Также мы видим, что ответ использует кодировку UTF-8 (<code>Content-Type: text/html; charset=utf-8</code>).</li>
- <li>Заголовок также содержит длину ответа (<code>Content-Length: 41823</code>).</li>
-</ul>
+- Первая строка содержит код ответа `200 OK`, говорящий о том, что запрос выполнен успешно.
+- Мы можем видеть, что ответ имеет `text/html` формат (`Content-Type`).
+- Также мы видим, что ответ использует кодировку UTF-8 (`Content-Type: text/html; charset=utf-8`).
+- Заголовок также содержит длину ответа (`Content-Length: 41823`).
 
-<p>В конце сообщения мы видим содержимое <strong>body, </strong>содержащее HTML-код возвращаемого ответа.</p>
+В конце сообщения мы видим содержимое **body,** содержащее HTML-код возвращаемого ответа.
 
-<pre class="brush: html">HTTP/1.1 200 OK
+```html
+HTTP/1.1 200 OK
 Server: Apache
 X-Backend-Server: developer1.webapp.scl3.mozilla.com
 Vary: Accept,Cookie, Accept-Encoding
@@ -147,26 +125,27 @@ Content-Length: 41823
 
 
 
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false &gt;
-&lt;head prefix="og: http://ogp.me/ns#"&gt;
-  &lt;meta charset="utf-8"&gt;
-  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge"&gt;
-  &lt;script&gt;(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);&lt;/script&gt;
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr" class="redesign no-js"  data-ffo-opensanslight=false data-ffo-opensans=false >
+<head prefix="og: http://ogp.me/ns#">
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+  <script>(function(d) { d.className = d.className.replace(/\bno-js/, ''); })(document.documentElement);</script>
   ...
-</pre>
+```
 
-<p>Остальная часть заголовка ответа содержит информацию об ответе (например, когда он был сгенерирован), сервере и о том, как он ожидает, что браузер обработает страницу (например, строка <code>X-Frame-Options: DENY</code> говорит браузеру не допускать внедрения этой страницы, если она будет внедрена в {{htmlelement ("iframe")}} на другом сайте).</p>
+Остальная часть заголовка ответа содержит информацию об ответе (например, когда он был сгенерирован), сервере и о том, как он ожидает, что браузер обработает страницу (например, строка `X-Frame-Options: DENY` говорит браузеру не допускать внедрения этой страницы, если она будет внедрена в {{htmlelement ("iframe")}} на другом сайте).
 
-<h3 id="Пример_POST_запросаответа">Пример POST запроса/ответа</h3>
+### Пример POST запроса/ответа
 
-<p>HTTP <code>POST</code> создаётся, когда вы отправляете форму, содержащую информацию, которая должна быть сохранена на сервере.</p>
+HTTP `POST` создаётся, когда вы отправляете форму, содержащую информацию, которая должна быть сохранена на сервере.
 
-<h4 id="Запрос_2">Запрос</h4>
+#### Запрос
 
-<p>В приведённом ниже тексте показан HTTP-запрос, сделанный когда пользователь загружает новые данные профиля на этом сайте. Формат запроса почти такой же, как пример запроса <code>GET</code>, показанный ранее, хотя первая строка идентифицирует этот запрос как <code>POST</code>.</p>
+В приведённом ниже тексте показан HTTP-запрос, сделанный когда пользователь загружает новые данные профиля на этом сайте. Формат запроса почти такой же, как пример запроса `GET`, показанный ранее, хотя первая строка идентифицирует этот запрос как `POST`.
 
-<pre class="brush: html">POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
+```html
+POST https://developer.mozilla.org/en-US/profiles/hamishwillee/edit HTTP/1.1
 Host: developer.mozilla.org
 Connection: keep-alive
 Content-Length: 432
@@ -182,15 +161,17 @@ Accept-Encoding: gzip, deflate, br
 Accept-Language: en-US,en;q=0.8,es;q=0.6
 Cookie: sessionid=6ynxs23n521lu21b1t136rhbv7ezngie; _gat=1; csrftoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT; dwf_section_edit=False; dwf_sg_task_completion=False; _ga=GA1.2.1688886003.1471911953; ffo=true
 
-csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&amp;user-username=hamishwillee&amp;user-fullname=Hamish+Willee&amp;user-title=&amp;user-organization=&amp;user-location=Australia&amp;user-locale=en-US&amp;user-timezone=Australia%2FMelbourne&amp;user-irc_nickname=&amp;user-interests=&amp;user-expertise=&amp;user-twitter_url=&amp;user-stackoverflow_url=&amp;user-linkedin_url=&amp;user-mozillians_url=&amp;user-facebook_url=</pre>
+csrfmiddlewaretoken=zIPUJsAZv6pcgCBJSCj1zU6pQZbfMUAT&user-username=hamishwillee&user-fullname=Hamish+Willee&user-title=&user-organization=&user-location=Australia&user-locale=en-US&user-timezone=Australia%2FMelbourne&user-irc_nickname=&user-interests=&user-expertise=&user-twitter_url=&user-stackoverflow_url=&user-linkedin_url=&user-mozillians_url=&user-facebook_url=
+```
 
-<p>Основное различие заключается в том, что URL-адрес не имеет параметров. Как вы можете видеть, информация из формы закодирована в теле запроса (например, новое полное имя пользователя устанавливается с использованием: <code>&amp;user-fullname=Hamish+Willee</code>).</p>
+Основное различие заключается в том, что URL-адрес не имеет параметров. Как вы можете видеть, информация из формы закодирована в теле запроса (например, новое полное имя пользователя устанавливается с использованием: `&user-fullname=Hamish+Willee`).
 
-<h4 id="Ответ_2">Ответ</h4>
+#### Ответ
 
-<p>Ответ от запроса показан ниже. Код состояния «<code>302 Found</code>» сообщает браузеру, что сообщение обработано, и что необходим второй HTTP-запрос для загрузки страницы, указанной в поле <code>Location</code>. В остальном информация аналогична информации для ответа на запрос <code>GET</code> .</p>
+Ответ от запроса показан ниже. Код состояния «`302 Found`» сообщает браузеру, что сообщение обработано, и что необходим второй HTTP-запрос для загрузки страницы, указанной в поле `Location`. В остальном информация аналогична информации для ответа на запрос `GET` .
 
-<pre class="brush: html">HTTP/1.1 302 FOUND
+```html
+HTTP/1.1 302 FOUND
 Server: Apache
 X-Backend-Server: developer3.webapp.scl3.mozilla.com
 Vary: Cookie
@@ -203,81 +184,76 @@ Connection: Keep-Alive
 X-Frame-Options: DENY
 X-Cache-Info: not cacheable; request wasn't a GET or HEAD
 Content-Length: 0
-</pre>
+```
 
-<div class="note">
-<p><strong>На заметку</strong>: HTTP-ответы и запросы, показанные в этих примерах, были захвачены с помощью приложения <a href="https://www.telerik.com/download/fiddler">Fiddler</a>, но вы можете получить аналогичную информацию с помощью веб-снифферов (например, <a href="http://web-sniffer.net/">http://web-sniffer.net/</a>) или с помощью расширений браузера, таких как HttpFox. Вы можете попробовать это сами. Воспользуйтесь любым из предложенных инструментов, а затем перейдите по сайту и отредактируйте информацию профиля, чтобы увидеть различные запросы и ответы. В большинстве современных браузеров также есть инструменты, которые отслеживают сетевые запросы (например, инструмент <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor">Network Monitor</a> в Firefox).</p>
-</div>
+> **Примечание:** **На заметку**: HTTP-ответы и запросы, показанные в этих примерах, были захвачены с помощью приложения [Fiddler](https://www.telerik.com/download/fiddler), но вы можете получить аналогичную информацию с помощью веб-снифферов (например, <http://web-sniffer.net/>) или с помощью расширений браузера, таких как HttpFox. Вы можете попробовать это сами. Воспользуйтесь любым из предложенных инструментов, а затем перейдите по сайту и отредактируйте информацию профиля, чтобы увидеть различные запросы и ответы. В большинстве современных браузеров также есть инструменты, которые отслеживают сетевые запросы (например, инструмент [Network Monitor](/ru/docs/Tools/Network_Monitor) в Firefox).
 
-<h2 id="Статические_сайты">Статические сайты</h2>
+## Статические сайты
 
-<p><em>Статический сайт</em> — это тот, который возвращает тот же жёсткий кодированный контент с сервера всякий раз, когда запрашивается конкретный ресурс. Например, если у вас есть страница о товаре в <code>/static/myproduct1.html</code>, эта же страница будет возвращена каждому пользователю. Если вы добавите ещё один подобный товар на свой сайт, вам нужно будет добавить ещё одну страницу (например, <code>myproduct2.html</code>) и так далее. Это может стать действительно неэффективным — что происходит, когда вы попадаете на тысячи страниц товаров? Вы повторяли бы много кода на каждой странице (основной шаблон страницы, структуру и т. д.), И если бы вы захотели изменить что-либо в структуре страницы — например, добавить новый раздел «связанные товары» — тогда вам придётся менять каждую страницу отдельно.</p>
+_Статический сайт_ — это тот, который возвращает тот же жёсткий кодированный контент с сервера всякий раз, когда запрашивается конкретный ресурс. Например, если у вас есть страница о товаре в `/static/myproduct1.html`, эта же страница будет возвращена каждому пользователю. Если вы добавите ещё один подобный товар на свой сайт, вам нужно будет добавить ещё одну страницу (например, `myproduct2.html`) и так далее. Это может стать действительно неэффективным — что происходит, когда вы попадаете на тысячи страниц товаров? Вы повторяли бы много кода на каждой странице (основной шаблон страницы, структуру и т. д.), И если бы вы захотели изменить что-либо в структуре страницы — например, добавить новый раздел «связанные товары» — тогда вам придётся менять каждую страницу отдельно.
 
-<div class="note">
-<p><strong>На заметку</strong>: Статические сайты превосходны, когда у вас небольшое количество страниц и вы хотите отправить один и тот же контент каждому пользователю. Однако их обслуживание может потребовать значительных затрат по мере увеличения количества страниц.</p>
-</div>
+> **Примечание:** **На заметку**: Статические сайты превосходны, когда у вас небольшое количество страниц и вы хотите отправить один и тот же контент каждому пользователю. Однако их обслуживание может потребовать значительных затрат по мере увеличения количества страниц.
 
-<p>Давайте вспомним, как это работает, снова взглянув на диаграмму архитектуры статического сайта, на которую мы смотрели в последней статье.</p>
+Давайте вспомним, как это работает, снова взглянув на диаграмму архитектуры статического сайта, на которую мы смотрели в последней статье.
 
-<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png"></p>
+![A simplified diagram of a static web server.](https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png)
 
-<p>Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос <code>GET</code> с указанием URL-адреса его HTML-страницы. Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и код состояния <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Status">HTTP Response status code</a> <code>200 OK</code> (успех). Сервер может вернуть другой код состояния, например, «<code>404 Not Found</code>», если файл отсутствует на сервере или «<code>301 Moved Permanently</code>», если файл существует, но был перемещён в другое место.</p>
+Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос `GET` с указанием URL-адреса его HTML-страницы. Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и код состояния [HTTP Response status code](/ru/docs/Web/HTTP/Status) `200 OK` (успех). Сервер может вернуть другой код состояния, например, «`404 Not Found`», если файл отсутствует на сервере или «`301 Moved Permanently`», если файл существует, но был перемещён в другое место.
 
-<p>Серверу для статического сайта нужно будет только обрабатывать GET-запросы, потому что сервер не сохраняет никаких модифицируемых данных. Он также не изменяет свои ответы на основе данных HTTP-запроса (например, URL-параметров или файлов cookie).</p>
+Серверу для статического сайта нужно будет только обрабатывать GET-запросы, потому что сервер не сохраняет никаких модифицируемых данных. Он также не изменяет свои ответы на основе данных HTTP-запроса (например, URL-параметров или файлов cookie).
 
-<p>Понимание того, как работают статические сайты, тем не менее полезно при изучении программирования на стороне сервера, поскольку динамические сайты точно так же обрабатывают запросы для статических файлов (CSS, JavaScript, статические изображения и т. д.).</p>
+Понимание того, как работают статические сайты, тем не менее полезно при изучении программирования на стороне сервера, поскольку динамические сайты точно так же обрабатывают запросы для статических файлов (CSS, JavaScript, статические изображения и т. д.).
 
-<h2 id="Динамические_сайты">Динамические сайты</h2>
+## Динамические сайты
 
-<p><em>Динамический сайт</em> — это тот, который может генерировать и возвращать контент на основе конкретного URL-адреса запроса и данных (а не всегда возвращать один и тот же жёсткий код для определённого URL-адреса). Используя пример сайта товара, сервер будет хранить «данные» товара в базе данных, а не отдельные HTML-файлы. При получении <code>GET</code>-запроса для товара сервер определяет идентификатор товара, извлекает данные из базы данных и затем создаёт HTML-страницу для ответа, вставляя данные в HTML-шаблон. Это имеет большие преимущества перед статическим сайтом:</p>
+_Динамический сайт_ — это тот, который может генерировать и возвращать контент на основе конкретного URL-адреса запроса и данных (а не всегда возвращать один и тот же жёсткий код для определённого URL-адреса). Используя пример сайта товара, сервер будет хранить «данные» товара в базе данных, а не отдельные HTML-файлы. При получении `GET`-запроса для товара сервер определяет идентификатор товара, извлекает данные из базы данных и затем создаёт HTML-страницу для ответа, вставляя данные в HTML-шаблон. Это имеет большие преимущества перед статическим сайтом:
 
-<p>Использование базы данных позволяет эффективно хранить информацию о товаре с помощью легко расширяемого, изменяемого и доступного для поиска способа.</p>
+Использование базы данных позволяет эффективно хранить информацию о товаре с помощью легко расширяемого, изменяемого и доступного для поиска способа.
 
-<p>Использование HTML-шаблонов позволяет очень легко изменить структуру HTML, потому что это нужно делать только в одном месте, в одном шаблоне, а не через потенциально тысячи статических страниц.</p>
+Использование HTML-шаблонов позволяет очень легко изменить структуру HTML, потому что это нужно делать только в одном месте, в одном шаблоне, а не через потенциально тысячи статических страниц.
 
-<h3 id="Анатомия_динамического_запроса">Анатомия динамического запроса</h3>
+### Анатомия динамического запроса
 
-<p>В этом разделе представлен пошаговый обзор «динамического» цикла HTTP-запроса и ответа, основываясь на том, что мы рассмотрели в последней статье, с гораздо более подробной информацией. Чтобы не отдаляться от практики, мы будем использовать контекст веб-сайта менеджера спортивной команды, где тренер может выбрать имя своей команды и размер команды в HTML-форме и вернуться к предлагаемому «лучшему составу» для своей следующей игры.</p>
+В этом разделе представлен пошаговый обзор «динамического» цикла HTTP-запроса и ответа, основываясь на том, что мы рассмотрели в последней статье, с гораздо более подробной информацией. Чтобы не отдаляться от практики, мы будем использовать контекст веб-сайта менеджера спортивной команды, где тренер может выбрать имя своей команды и размер команды в HTML-форме и вернуться к предлагаемому «лучшему составу» для своей следующей игры.
 
-<p>На приведённой ниже диаграмме показаны основные элементы веб-сайта «team coach», а также пронумерованные ярлыки для последовательности операций, когда тренер обращается к списку «лучших команд». Частями сайта, которые делают его динамичным, являются <em>веб-приложение</em> (так мы будем ссылаться на серверный код, обрабатывающий HTTP-запросы и возвращающие HTTP-ответы), <em>база данных</em>, которая содержит информацию об игроках, командах, тренерах и их отношениях, и <em>HTML-шаблоны</em>.</p>
+На приведённой ниже диаграмме показаны основные элементы веб-сайта «team coach», а также пронумерованные ярлыки для последовательности операций, когда тренер обращается к списку «лучших команд». Частями сайта, которые делают его динамичным, являются _веб-приложение_ (так мы будем ссылаться на серверный код, обрабатывающий HTTP-запросы и возвращающие HTTP-ответы), _база данных_, которая содержит информацию об игроках, командах, тренерах и их отношениях, и _HTML-шаблоны_.
 
-<p><img alt="This is a diagram of a simple web server with step numbers for each of step of the client-server interaction." src="https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png" style="height: 584px; width: 1226px;"></p>
+![This is a diagram of a simple web server with step numbers for each of step of the client-server interaction.](https://mdn.mozillademos.org/files/13829/Web%20Application%20with%20HTML%20and%20Steps.png)
 
-<p>После того, как тренер отправит форму с именем команды и количеством игроков, последовательность операций будет следующей:</p>
+После того, как тренер отправит форму с именем команды и количеством игроков, последовательность операций будет следующей:
 
-<ol>
- <li>Веб-браузер отправит HTTP-запрос <code>GET</code> на сервер с использованием базового URL-адреса ресурса (<code>/best</code>) и кодирования номера команды и игрока в форме URL-параметров (например, <code>/best?team=my_team_name&amp;show=11)</code> или как часть URL-адреса (например, <code>/best/my_team_name/11/</code>). Запрос <code>GET</code> используется, потому что речь идёт только о запросе выборки данных (а не об их изменении).</li>
- <li><em>Веб-сервер</em> определяет, что запрос является «динамическим» и пересылает его в <em>веб-приложение</em> для обработки (веб-сервер определяет, как обрабатывать разные URL-адреса на основе правил сопоставления шаблонов, определённых в его конфигурации).</li>
- <li><em>Веб-приложение</em> определяет, что цель запроса состоит в том, чтобы получить «лучший список команд» на основе URL (<code>/best/</code>) и узнать имя команды и количество игроков из URL-адреса. Затем <em>веб-приложение</em> получает требуемую информацию из базы данных (используя дополнительные «внутренние» параметры, чтобы определить, какие игроки являются «лучшими», и, возможно, определяя личность зарегистрированного тренера из файла cookie на стороне клиента).</li>
- <li><em>Веб-приложение</em> динамически создаёт HTML-страницу, помещая данные (из <em>базы данных</em>) в заполнители внутри HTML-шаблона.</li>
- <li><em>Веб-приложение</em> возвращает сгенерированный HTML в веб-браузер (через <em>веб-сервер</em>) вместе с кодом состояния HTTP 200 («успех»). Если что-либо препятствует возврату HTML, <em>веб-приложение</em> вернёт другой код, например, «404», чтобы указать, что команда не существует.</li>
- <li>Затем веб-браузер начнёт обрабатывать возвращённый HTML, отправив отдельные запросы, чтобы получить любые другие файлы CSS или JavaScript, на которые он ссылается (см. шаг 7).</li>
- <li>Веб-сервер загружает статические файлы из файловой системы и возвращает их непосредственно в браузер (опять же, правильная обработка файлов основана на правилах конфигурации и сопоставлении шаблонов URL).</li>
-</ol>
+1.  Веб-браузер отправит HTTP-запрос `GET` на сервер с использованием базового URL-адреса ресурса (`/best`) и кодирования номера команды и игрока в форме URL-параметров (например, `/best?team=my_team_name&show=11)` или как часть URL-адреса (например, `/best/my_team_name/11/`). Запрос `GET` используется, потому что речь идёт только о запросе выборки данных (а не об их изменении).
+2.  _Веб-сервер_ определяет, что запрос является «динамическим» и пересылает его в _веб-приложение_ для обработки (веб-сервер определяет, как обрабатывать разные URL-адреса на основе правил сопоставления шаблонов, определённых в его конфигурации).
+3.  _Веб-приложение_ определяет, что цель запроса состоит в том, чтобы получить «лучший список команд» на основе URL (`/best/`) и узнать имя команды и количество игроков из URL-адреса. Затем _веб-приложение_ получает требуемую информацию из базы данных (используя дополнительные «внутренние» параметры, чтобы определить, какие игроки являются «лучшими», и, возможно, определяя личность зарегистрированного тренера из файла cookie на стороне клиента).
+4.  _Веб-приложение_ динамически создаёт HTML-страницу, помещая данные (из _базы данных_) в заполнители внутри HTML-шаблона.
+5.  _Веб-приложение_ возвращает сгенерированный HTML в веб-браузер (через _веб-сервер_) вместе с кодом состояния HTTP 200 («успех»). Если что-либо препятствует возврату HTML, _веб-приложение_ вернёт другой код, например, «404», чтобы указать, что команда не существует.
+6.  Затем веб-браузер начнёт обрабатывать возвращённый HTML, отправив отдельные запросы, чтобы получить любые другие файлы CSS или JavaScript, на которые он ссылается (см. шаг 7).
+7.  Веб-сервер загружает статические файлы из файловой системы и возвращает их непосредственно в браузер (опять же, правильная обработка файлов основана на правилах конфигурации и сопоставлении шаблонов URL).
 
-<p>Операция по обновлению записи в базе данных будет обрабатываться аналогичным образом, за исключением того, что, как и любое обновление базы данных, HTTP-запрос из браузера должен быть закодирован как запрос POST.</p>
+Операция по обновлению записи в базе данных будет обрабатываться аналогичным образом, за исключением того, что, как и любое обновление базы данных, HTTP-запрос из браузера должен быть закодирован как запрос POST.
 
-<h3 id="Выполнение_другой_работы">Выполнение другой работы</h3>
+### Выполнение другой работы
 
-<p>Задача <em>веб-приложения</em> — получать HTTP-запросы и возвращать HTTP-ответы. Хотя взаимодействие с базой данных для получения или обновления информации является очень распространённой задачей, код может делать другие вещи одновременно или вообще не взаимодействовать с базой данных.</p>
+Задача _веб-приложения_ — получать HTTP-запросы и возвращать HTTP-ответы. Хотя взаимодействие с базой данных для получения или обновления информации является очень распространённой задачей, код может делать другие вещи одновременно или вообще не взаимодействовать с базой данных.
 
-<p>Хорошим примером дополнительной задачи, которую может выполнять <em>веб-приложение</em>, является отправка электронной почты пользователям для подтверждения их регистрации на сайте. Сайт также может выполнять протоколирование или другие операции.</p>
+Хорошим примером дополнительной задачи, которую может выполнять _веб-приложение_, является отправка электронной почты пользователям для подтверждения их регистрации на сайте. Сайт также может выполнять протоколирование или другие операции.
 
-<h3 id="Возвращение_чего-то_другого_кроме_HTML">Возвращение чего-то другого, кроме HTML</h3>
+### Возвращение чего-то другого, кроме HTML
 
-<p>Серверный код сайта может возвращать не только HTML-фрагменты и файлы в ответе. Он может динамически создавать и возвращать другие типы файлов (текст, PDF, CSV и т. д.) или даже данные (JSON, XML и т. д.).</p>
+Серверный код сайта может возвращать не только HTML-фрагменты и файлы в ответе. Он может динамически создавать и возвращать другие типы файлов (текст, PDF, CSV и т. д.) или даже данные (JSON, XML и т. д.).
 
-<p>Идея вернуть данные в веб-браузер, чтобы он мог динамически обновлять свой собственный контент ({{glossary("AJAX")}}) существует довольно давно. Совсем недавно «Одностраничные приложения» стали популярными, где весь сайт написан с одним HTML-файлом, который динамически обновляется по мере необходимости. Веб-сайты, созданные с использованием приложений такого рода, переносят большие вычислительные затраты с сервера на веб-браузер и приводят к тому, что веб-сайты, ведут себя больше как нативные приложения (очень отзывчивые и т. д.).</p>
+Идея вернуть данные в веб-браузер, чтобы он мог динамически обновлять свой собственный контент ({{glossary("AJAX")}}) существует довольно давно. Совсем недавно «Одностраничные приложения» стали популярными, где весь сайт написан с одним HTML-файлом, который динамически обновляется по мере необходимости. Веб-сайты, созданные с использованием приложений такого рода, переносят большие вычислительные затраты с сервера на веб-браузер и приводят к тому, что веб-сайты, ведут себя больше как нативные приложения (очень отзывчивые и т. д.).
 
-<h2 id="Веб-фреймворки_упрощают_веб-программирование_на_стороне_сервера">Веб-фреймворки упрощают веб-программирование на стороне сервера</h2>
+## Веб-фреймворки упрощают веб-программирование на стороне сервера
 
-<p>Веб-фреймворки на стороне сервера делают написание кода для обработки описанных выше операций намного проще.</p>
+Веб-фреймворки на стороне сервера делают написание кода для обработки описанных выше операций намного проще.
 
-<p>Одной из наиболее важных операций, которые они выполняют, является предоставление простых механизмов для сопоставления URL-адресов для разных ресурсов/страниц с конкретными функциями обработчика. Это упрощает сохранение кода, связанного с каждым типом ресурса, отдельно от остального. Это также имеет преимущества с точки зрения обслуживания, поскольку вы можете изменить URL-адрес, используемый для доставки определённой функции в одном месте, без необходимости изменять функцию обработчика.</p>
+Одной из наиболее важных операций, которые они выполняют, является предоставление простых механизмов для сопоставления URL-адресов для разных ресурсов/страниц с конкретными функциями обработчика. Это упрощает сохранение кода, связанного с каждым типом ресурса, отдельно от остального. Это также имеет преимущества с точки зрения обслуживания, поскольку вы можете изменить URL-адрес, используемый для доставки определённой функции в одном месте, без необходимости изменять функцию обработчика.
 
-<p>Для примера рассмотрим следующий код Django (Python), который связывает два URL-шаблона с двумя функциями просмотра. Первый шаблон проверяет, что HTTP-запрос с URL-адресом ресурса <code>/best</code> будет передан функции с именем <code>index()</code> в модуле <code>views</code>. Запрос, который имеет шаблон «<code>/best/junior</code>», вместо этого будет передан функции просмотра <code>junior()</code>.</p>
+Для примера рассмотрим следующий код Django (Python), который связывает два URL-шаблона с двумя функциями просмотра. Первый шаблон проверяет, что HTTP-запрос с URL-адресом ресурса `/best` будет передан функции с именем `index()` в модуле `views`. Запрос, который имеет шаблон «`/best/junior`», вместо этого будет передан функции просмотра `junior()`.
 
-<pre class="brush: python"># file: best/urls.py
+```python
+# file: best/urls.py
 #
 
 from django.conf.urls import url
@@ -289,17 +265,17 @@ urlpatterns = [
     url(r'^$', views.index),
     # example: /best/junior/
     url(r'^junior/$', views.junior),
-]</pre>
+]
+```
 
-<div class="note">
-<p><strong>На заметку</strong>: Первые параметры в функциях <code>url()</code> могут выглядеть немного необычно (например, <code>r'^junior/$'</code>, потому что они используют метод сопоставления шаблонов под названием «регулярные выражения» (RegEx или RE). Вам не нужно знать, как работают регулярные выражения на этом этапе, кроме того, что они позволяют нам сопоставлять шаблоны в URL-адресе (а не жёстко закодированные значения выше) и использовать их в качестве параметров в наших функциях просмотра. В качестве примера, действительно простой RegEx может говорить «соответствовать одной заглавной букве, за которой следуют от 4 до 7 строчных букв».</p>
-</div>
+> **Примечание:** **На заметку**: Первые параметры в функциях `url()` могут выглядеть немного необычно (например, `r'^junior/$'`, потому что они используют метод сопоставления шаблонов под названием «регулярные выражения» (RegEx или RE). Вам не нужно знать, как работают регулярные выражения на этом этапе, кроме того, что они позволяют нам сопоставлять шаблоны в URL-адресе (а не жёстко закодированные значения выше) и использовать их в качестве параметров в наших функциях просмотра. В качестве примера, действительно простой RegEx может говорить «соответствовать одной заглавной букве, за которой следуют от 4 до 7 строчных букв».
 
-<p>Веб-фреймворк также упрощает функцию просмотра для получения информации из базы данных. Структура наших данных определяется в моделях, которые являются классами Python, которые определяют поля, которые должны храниться в основной базе данных. Если у нас есть модель с именем <em>Team</em> с полем «<em>team_type</em>», мы можем использовать простой синтаксис запроса, чтобы получить все команды, имеющие определённый тип.</p>
+Веб-фреймворк также упрощает функцию просмотра для получения информации из базы данных. Структура наших данных определяется в моделях, которые являются классами Python, которые определяют поля, которые должны храниться в основной базе данных. Если у нас есть модель с именем _Team_ с полем «_team_type_», мы можем использовать простой синтаксис запроса, чтобы получить все команды, имеющие определённый тип.
 
-<p>В приведённом ниже примере представлен список всех команд, у которых есть точный (с учётом регистра) <code>team_type</code> «junior» («младший») — обратите внимание на формат: имя поля (<code>team_type</code>), за которым следует двойной знак подчёркивания, а затем тип соответствия для использования (в этом случае <code>exact</code> («точное»)). Существует много других типов соответствия, и мы можем объединить их. Мы также можем контролировать порядок и количество возвращаемых результатов.</p>
+В приведённом ниже примере представлен список всех команд, у которых есть точный (с учётом регистра) `team_type` «junior» («младший») — обратите внимание на формат: имя поля (`team_type`), за которым следует двойной знак подчёркивания, а затем тип соответствия для использования (в этом случае `exact` («точное»)). Существует много других типов соответствия, и мы можем объединить их. Мы также можем контролировать порядок и количество возвращаемых результатов.
 
-<pre class="brush: python">#best/views.py
+```python
+#best/views.py
 
 from django.shortcuts import render
 
@@ -310,16 +286,16 @@ def junior(request):
     list_teams = Team.objects.filter(team_type__exact="junior")
     context = {'list': list_teams}
     return render(request, 'best/index.html', context)
-</pre>
+```
 
-<p>После того, как функция <code>junior()</code> получает список младших команд, она вызывает функцию <code>render()</code>, передавая исходный <code>HttpRequest</code>, HTML-шаблон и объект «context», определяющий информацию, которая должна быть включена в шаблон. Функция <code>render()</code> — это функция удобства, которая генерирует HTML с использованием контекста и HTML-шаблона и возвращает его в объект <code>HttpResponse</code>.</p>
+После того, как функция `junior()` получает список младших команд, она вызывает функцию `render()`, передавая исходный `HttpRequest`, HTML-шаблон и объект «context», определяющий информацию, которая должна быть включена в шаблон. Функция `render()` — это функция удобства, которая генерирует HTML с использованием контекста и HTML-шаблона и возвращает его в объект `HttpResponse`.
 
-<p>Очевидно, что веб-фреймворки могут помочь вам в решении многих других задач. В следующей статье мы обсудим намного больше преимуществ и некоторые популярные варианты веб-фреймворков.</p>
+Очевидно, что веб-фреймворки могут помочь вам в решении многих других задач. В следующей статье мы обсудим намного больше преимуществ и некоторые популярные варианты веб-фреймворков.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>На этом этапе вы должны хорошо ознакомиться с операциями, которые должен выполнять серверный код, и знать некоторые способы, с помощью которых веб-фреймворк на стороне сервера может сделать это проще.</p>
+На этом этапе вы должны хорошо ознакомиться с операциями, которые должен выполнять серверный код, и знать некоторые способы, с помощью которых веб-фреймворк на стороне сервера может сделать это проще.
 
-<p>В следующем модуле мы поможем вам выбрать лучший веб-фреймворк для вашего первого сайта.</p>
+В следующем модуле мы поможем вам выбрать лучший веб-фреймворк для вашего первого сайта.
 
-<p>{{PreviousMenuNext ("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+{{PreviousMenuNext ("Learn/Server-side/First_steps/Introduction", "Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
diff --git a/files/ru/learn/server-side/first_steps/index.md b/files/ru/learn/server-side/first_steps/index.md
index a216baf3cedf39..46132fc0a6c64d 100644
--- a/files/ru/learn/server-side/first_steps/index.md
+++ b/files/ru/learn/server-side/first_steps/index.md
@@ -13,37 +13,33 @@ tags:
   - TopicStub
 translation_of: Learn/Server-side/First_steps
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p>В этом модуле, посвящённом программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьёй о безопасности веб-сервера.</p>
+В этом модуле, посвящённом программированию на стороне сервера, мы ответим на несколько фундаментальных вопросов о программировании серверной части: «что это такое?», «чем оно отличается от программирования клиентской части?» и «почему оно так полезно?». Затем последует обзор некоторых самых популярных веб-фреймворков для серверной части и руководство по выбору наиболее подходящего фреймворка для создания вашего первого сайта. Наконец, мы завершим этот модуль вводной статьёй о безопасности веб-сервера.
 
-<h2 id="Прежде_чем_начать">Прежде чем начать</h2>
+## Прежде чем начать
 
-<p>Для того, чтобы начать этот модуль, вам не нужно иметь никаких знаний о программировании серверной части или даже о любом виде программирования.</p>
+Для того, чтобы начать этот модуль, вам не нужно иметь никаких знаний о программировании серверной части или даже о любом виде программирования.
 
-<p>Вам нужно понимать "как работает веб". Мы рекомендуем вам сперва прочесть следующие темы:</p>
+Вам нужно понимать "как работает веб". Мы рекомендуем вам сперва прочесть следующие темы:
 
-<ul>
- <li><a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">Что такое веб-сервер</a></li>
- <li><a href="/ru/docs/Learn/Common_questions/What_software_do_I_need">Какое программное обеспечение мне нужно для создания сайта?</a></li>
- <li><a href="/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как загружать файлы на веб-сервер?</a></li>
-</ul>
+- [Что такое веб-сервер](/ru/docs/Learn/Common_questions/What_is_a_web_server)
+- [Какое программное обеспечение мне нужно для создания сайта?](/ru/docs/Learn/Common_questions/What_software_do_I_need)
+- [Как загружать файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server)
 
-<p>С этими базовыми знаниями вы будете готовы работать с модулями этого раздела.</p>
+С этими базовыми знаниями вы будете готовы работать с модулями этого раздела.
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/ru/docs/Learn/Server-side/First_steps/Introduction">Введение в серверную часть</a></dt>
- <dd>Добро пожаловать на курс программирования серверной части MDN для начинающих! В этой первой статье мы посмотрим на программирование серверной части на высоком уровне, отвечая на вопросы такие как: "что это такое?", "чем оно отличается от программирования клиентской части?" и "почему это настолько востребовано?". После прочтения этой статьи вы будете понимать всю дополнительную мощь, доступную веб-сайтам посредством программирования на стороне сервера.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/First_steps/Client-Server_overview">Обзор Клиент-Сервера</a></dt>
- <dd>Теперь, когда вы познакомились с целью и потенциальными преимуществами программирования серверной части, мы собираемся узнать в подробностях, что случится, когда сервер получит "динамический запрос" от браузера. Так как большинство программ серверной части обрабатывает запросы и ответы практически одинаково, это поможет вам понять, что нужно делать при написании собственного кода.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/First_steps/Web_frameworks">Фреймворки серверной части</a></dt>
- <dd>Последняя статья рассказывает о том, что нужно делать веб-приложению серверной стороны для ответа на запросы от веб-браузера. Мы покажем здесь, как веб-фреймворки могут упростить эти задачи и поможем вам подобрать подходящий фреймворк для вашего первого серверного веб-приложения.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a></dt>
- <dd>Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространённых угроз.</dd>
-</dl>
+- [Введение в серверную часть](/ru/docs/Learn/Server-side/First_steps/Introduction)
+  - : Добро пожаловать на курс программирования серверной части MDN для начинающих! В этой первой статье мы посмотрим на программирование серверной части на высоком уровне, отвечая на вопросы такие как: "что это такое?", "чем оно отличается от программирования клиентской части?" и "почему это настолько востребовано?". После прочтения этой статьи вы будете понимать всю дополнительную мощь, доступную веб-сайтам посредством программирования на стороне сервера.
+- [Обзор Клиент-Сервера](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview)
+  - : Теперь, когда вы познакомились с целью и потенциальными преимуществами программирования серверной части, мы собираемся узнать в подробностях, что случится, когда сервер получит "динамический запрос" от браузера. Так как большинство программ серверной части обрабатывает запросы и ответы практически одинаково, это поможет вам понять, что нужно делать при написании собственного кода.
+- [Фреймворки серверной части](/ru/docs/Learn/Server-side/First_steps/Web_frameworks)
+  - : Последняя статья рассказывает о том, что нужно делать веб-приложению серверной стороны для ответа на запросы от веб-браузера. Мы покажем здесь, как веб-фреймворки могут упростить эти задачи и поможем вам подобрать подходящий фреймворк для вашего первого серверного веб-приложения.
+- [Безопасность веб-сайта](/ru/docs/Learn/Server-side/First_steps/Website_security)
+  - : Безопасность веб-сайта требует бдительности на всех этапах проектирования сайта и его использования. Эта вводная статья не сделает из вас гуру безопасности сайтов, но поможет узнать, какие первые важные шаги вы можете предпринять для повышения устойчивости вашего веб-приложения против наиболее распространённых угроз.
 
-<h2 id="Аттестация">Аттестация</h2>
+## Аттестация
 
-<p>Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось чёткое понимание того, какие виды функциональности вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.</p>
+Этот "обзорный" модуль не содержит никакой аттестации, поскольку мы даже не прилагаем здесь для вас никакого кода. Мы действительно надеемся, что на текущем этапе у вас сформировалось чёткое понимание того, какие виды функциональности вы можете предоставить, используя программирование на стороне сервера, и вы уже приняли решение по поводу фреймворка, который вы будете использовать для создания вашего первого сайта.
diff --git a/files/ru/learn/server-side/first_steps/introduction/index.md b/files/ru/learn/server-side/first_steps/introduction/index.md
index 15dde7177f9872..f010047c7d3d05 100644
--- a/files/ru/learn/server-side/first_steps/introduction/index.md
+++ b/files/ru/learn/server-side/first_steps/introduction/index.md
@@ -10,208 +10,169 @@ tags:
   - Серверная часть
 translation_of: Learn/Server-side/First_steps/Introduction
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
 
-<div>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</div>
+Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера.
 
-<p class="summary">Добро пожаловать на курс для начинающих по программированию серверной части сайта! В этой первой статье мы рассмотрим программирование на стороне сервера с высокого уровня, отвечая на такие вопросы, как «что это»?, «как это отличается от программирования на стороне клиента»? и «почему это так полезно»? После прочтения этой статьи вы поймёте дополнительные возможности, доступные веб-сайтам посредством программирования на стороне сервера.</p>
+| Перед стартом: | Базовая компьютерная грамотность. Базовое понимание, что такое веб-сервер.                                                                 |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:          | Ознакомиться с тем, что такое программирование серверной части, на что оно способно и чем отличается от программирования клиентской части. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Перед стартом:</th>
-   <td>Базовая компьютерная грамотность. Базовое понимание, что такое веб-сервер.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Ознакомиться с тем, что такое программирование серверной части, на что оно способно и чем отличается от программирования клиентской части.</td>
-  </tr>
- </tbody>
-</table>
+Большинство крупных веб-сайтов используют программирование серверной части чтобы динамично отображать различные данные при необходимости, в основном взятые из базы данных, располагающейся на сервере и отправляемые клиенту для отображения через некоторый код (например, HTML и JavaScript).
 
-<p>Большинство крупных веб-сайтов используют программирование серверной части чтобы динамично отображать различные данные при необходимости, в основном взятые из базы данных, располагающейся на сервере и отправляемые клиенту для отображения через некоторый код (например, HTML и JavaScript).</p>
+Возможно, самая значительная польза программирования серверной части в том, что оно позволяет формировать контент веб-сайта под конкретного пользователя. Динамические сайты могут выделять контент, который более актуален в зависимости от предпочтений и привычек пользователя. Это также может упростить использование сайтов за счёт сохранения личных предпочтений и информации, например, повторного использования сохранённых данных кредитной карты для оптимизации последующих платежей.
 
-<p>Возможно, самая значительная польза программирования серверной части в том, что оно позволяет формировать контент веб-сайта под конкретного пользователя. Динамические сайты могут выделять контент, который более актуален в зависимости от предпочтений и привычек пользователя. Это также может упростить использование сайтов за счёт сохранения личных предпочтений и информации, например, повторного использования сохранённых данных кредитной карты для оптимизации последующих платежей.</p>
+Это также даёт возможность взаимодействовать с пользователем сайта, посылая уведомления и обновления по электронной почте или по другим каналам. Все эти возможности позволяют глубже взаимодействовать с пользователями.
 
-<p>Это также даёт возможность взаимодействовать с пользователем сайта, посылая уведомления и обновления по электронной почте или по другим каналам. Все эти возможности позволяют глубже взаимодействовать с пользователями.</p>
+В современном мире веб-разработки настоятельно рекомендуется узнать о разработке на стороне сервера.
 
-<p>В современном мире веб-разработки настоятельно рекомендуется узнать о разработке на стороне сервера.</p>
+## Что такое программирование серверной части сайта?
 
-<h2 id="Что_такое_программирование_серверной_части_сайта">Что такое программирование серверной части сайта?</h2>
+Веб-браузеры взаимодействуют с [веб-серверами](/ru/docs/Learn/Common_questions/What_is_a_web_server) при помощи гипертекстового транспортного протокола ({{glossary("HTTP")}}). Когда вы нажимаете на ссылку на веб-странице, заполняете форму или запускаете поиск, **HTTP-запрос** отправляется из вашего браузера на целевой сервер.
 
-<p>Веб-браузеры взаимодействуют с <a href="/ru/docs/Learn/Common_questions/What_is_a_web_server">веб-серверами</a> при помощи гипертекстового транспортного протокола ({{glossary("HTTP")}}). Когда вы нажимаете на ссылку на веб-странице, заполняете форму или запускаете поиск,  <strong>HTTP-запрос </strong> отправляется из вашего браузера на целевой сервер.</p>
+Запрос включает в себя URL, определяющий затронутый ресурс, метод, определяющий требуемое действие (например, получить, удалить или опубликовать ресурс) и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, отправленные как [строка запроса](https://en.wikipedia.org/wiki/Query_string)), как POST запрос (данные, отправленные методом [HTTP POST](/ru/docs/Web/HTTP/Methods/POST)) или в {{glossary("Cookie", "куки-файлах")}}.
 
-<p>Запрос включает в себя URL, определяющий затронутый ресурс, метод, определяющий требуемое действие (например, получить, удалить или опубликовать ресурс) и может включать дополнительную информацию, закодированную в параметрах URL (пары поле-значение, отправленные как <a href="https://en.wikipedia.org/wiki/Query_string">строка запроса</a>), как POST запрос (данные, отправленные методом <a href="/en-US/docs/Web/HTTP/Methods/POST">HTTP POST</a>) или в {{glossary("Cookie", "куки-файлах")}}.</p>
+Веб-серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отвечают веб-браузеру при помощи ответного HTTP сообщения (**HTTP-ответ**). Ответ содержит строку состояния, показывающую, был ли запрос успешным или нет (например, «HTTP/1.1 200 OK» в случае успеха).
 
-<p>Веб-серверы ожидают сообщений с клиентскими запросами, обрабатывают их по прибытию и отвечают веб-браузеру при помощи ответного HTTP сообщения (<strong>HTTP-ответ</strong>). Ответ содержит строку состояния, показывающую, был ли запрос успешным или нет (например, «HTTP/1.1 200 OK» в случае успеха).</p>
+Тело успешного ответа на запрос может содержать запрашиваемые данные (например, новую HTML-страницу или изображение, и т. п.), который может отображаться через веб-браузер.
 
-<p>Тело успешного ответа на запрос может содержать запрашиваемые данные (например, новую HTML-страницу или изображение, и т. п.), который может отображаться через веб-браузер.</p>
+### Статические сайты
 
-<h3 id="Статические_сайты">Статические сайты</h3>
+Схема ниже показывает базовую архитектуру веб-сервера для _статического сайта_ (статический сайт — это тот, который возвращает одно и то же жёстко закодированное содержимое с сервера всякий раз, когда запрашивается конкретный ресурс). Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос «GET» с указанием его URL.
 
-<p>Схема ниже показывает базовую архитектуру веб-сервера для <em>статического сайта</em> (статический сайт — это тот, который возвращает одно и то же жёстко закодированное содержимое с сервера всякий раз, когда запрашивается конкретный ресурс). Когда пользователь хочет перейти на страницу, браузер отправляет HTTP-запрос «GET» с указанием его URL. </p>
+Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и [успешный статус](/ru/docs/Web/HTTP/Status#Successful_responses) (обычно 200 OK). Если файл не может быть извлечён по каким-либо причинам, возвращается статус ошибки (смотри [ошибки клиента](/ru/docs/Web/HTTP/Status#Client_error_responses) и [ошибки сервера](/ru/docs/Web/HTTP/Status#Server_error_responses)).
 
-<p>Сервер извлекает запрошенный документ из своей файловой системы и возвращает HTTP-ответ, содержащий документ и <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Successful_responses">успешный статус</a> (обычно 200 OK). Если файл не может быть извлечён по каким-либо причинам, возвращается статус ошибки (смотри <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Client_error_responses">ошибки клиента</a> и <a href="https://developer.mozilla.org/ru/docs/Web/HTTP/Status#Server_error_responses">ошибки сервера</a>).</p>
+![A simplified diagram of a static web server.](https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png)
 
-<p><img alt="A simplified diagram of a static web server." src="https://mdn.mozillademos.org/files/13841/Basic%20Static%20App%20Server.png" style="height: 223px; width: 800px;"></p>
+### Динамические сайты
 
-<h3 id="Динамические_сайты">Динамические сайты</h3>
+Динамический веб-сайт — это тот, где часть содержимого ответа генерируется динамически только при необходимости. На динамическом веб-сайте HTML-страницы обычно создаются путём вставки данных из базы данных в заполнители в HTML-шаблонах (это гораздо более эффективный способ хранения большого количества контента, чем использование статических сайтов).
 
-<p>Динамический веб-сайт — это тот, где часть содержимого ответа генерируется динамически только при необходимости. На динамическом веб-сайте HTML-страницы обычно создаются путём вставки данных из базы данных в заполнители в HTML-шаблонах (это гораздо более эффективный способ хранения большого количества контента, чем использование статических сайтов).</p>
+Динамический сайт может возвращать разные данные для URL-адреса на основе информации, предоставленной пользователем или сохранёнными настройками, и может выполнять другие операции, как часть возврата ответа (например, отправку уведомлений).
 
-<p>Динамический сайт может возвращать разные данные для URL-адреса на основе информации, предоставленной пользователем или сохранёнными настройками, и может выполнять другие операции, как часть возврата ответа (например, отправку уведомлений).</p>
+Большая часть кода для поддержки динамического веб-сайта должна выполняться на сервере. Создание этого кода известно, как «**программирование серверной части**» (или иногда «**программирование бэкенда**»).
 
-<p>Большая часть кода для поддержки динамического веб-сайта должна выполняться на сервере. Создание этого кода известно, как «<strong>программирование серверной части</strong>» (или иногда «<strong>программирование бэкенда</strong>»).</p>
+Схема ниже показывает простую архитектуру _динамического сайта_. Как и на предыдущей схеме, браузеры отправляют HTTP-запросы на сервер, затем сервер обрабатывает запросы и возвращает соответствующие HTTP-ответы.
 
-<p>Схема ниже показывает простую архитектуру <em>динамического сайта</em>. Как и на предыдущей схеме, браузеры отправляют HTTP-запросы на сервер, затем сервер обрабатывает запросы и возвращает соответствующие HTTP-ответы.</p>
+Запросы статических ресурсов обрабатываются так же, как и для статических сайтов (статические ресурсы — это любые файлы, которые не меняются, обычно это: CSS, JavaScript, изображения, предварительно созданные PDF-файлы и прочее).
 
-<p>Запросы статических ресурсов обрабатываются так же, как и для статических сайтов (статические ресурсы — это любые файлы, которые не меняются, обычно это: CSS, JavaScript, изображения, предварительно созданные PDF-файлы и прочее).</p>
+![A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.](https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png)
 
-<p><img alt="A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview." src="https://mdn.mozillademos.org/files/13839/Web%20Application%20with%20HTML%20and%20Steps.png"></p>
+Запросы динамических данных отправляются (2) в код серверной части (показано на диаграмме как _Веб-приложение_). Для «динамических запросов» сервер интерпретирует запрос, читает необходимую информацию из базы данных (3), комбинирует извлечённые данные с шаблонами HTML и возвращает ответ, содержащий сгенерированный HTML (5, 6).
 
-<p>Запросы динамических данных отправляются (2) в код серверной части (показано на диаграмме как <em>Веб-приложение</em>). Для «динамических запросов» сервер интерпретирует запрос, читает необходимую информацию из базы данных (3), комбинирует извлечённые данные с шаблонами HTML и возвращает ответ, содержащий сгенерированный HTML (5, 6).</p>
+## Одинаково ли программирование серверной части и клиентской?
 
-<div>
-<h2 id="Одинаково_ли_программирование_серверной_части_и_клиентской">Одинаково ли программирование серверной части и клиентской?</h2>
-</div>
+Теперь обратим внимание на код, задействованный в серверной части и клиентской части. В каждом случае код существенно различается:
 
-<p>Теперь обратим внимание на код, задействованный в серверной части и клиентской части. В каждом случае код существенно различается:</p>
+- Они имеют различные цели и назначение.
+- Как правило, они не используют одни и те же языки программирования (исключение составляет JavaScript, который можно использовать на стороне сервера и клиента).
+- Они выполняются в разных средах операционной системы.
 
-<ul>
- <li>Они имеют различные цели и назначение.</li>
- <li>Как правило, они не используют одни и те же языки программирования (исключение составляет JavaScript, который можно использовать на стороне сервера и клиента).</li>
- <li>Они выполняются в разных средах операционной системы.</li>
-</ul>
+Код, который выполняется в браузере, известный как **код клиентской части**, прежде всего связан с улучшением внешнего вида и поведения отображаемой веб-страницы. Это включает в себя выбор и стилизацию компонентов пользовательского интерфейса, создание макетов, навигацию, проверку форм и т. д. Напротив, программирование веб-сайта на стороне сервера в основном включает выбор содержимого, которое возвращается браузеру в ответ на запросы. Код на стороне сервера обрабатывает такие задачи, как проверка отправленных данных и запросов, использование баз данных для хранения и извлечения данных и отправка правильных данных клиенту по мере необходимости.
 
-<p>Код, который выполняется в браузере, известный как <strong>код клиентской части</strong>, прежде всего связан с улучшением внешнего вида и поведения отображаемой веб-страницы. Это включает в себя выбор и стилизацию компонентов пользовательского интерфейса, создание макетов, навигацию, проверку форм и т. д. Напротив, программирование веб-сайта на стороне сервера в основном включает выбор содержимого, которое возвращается браузеру в ответ на запросы. Код на стороне сервера обрабатывает такие задачи, как проверка отправленных данных и запросов, использование баз данных для хранения и извлечения данных и отправка правильных данных клиенту по мере необходимости.</p>
+Код клиентской части написан с использованием [HTML](/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page), [CSS](/ru/docs/Learn/CSS) и [JavaScript](/ru/docs/Learn/JavaScript) — он запускается в веб-браузере и практически не имеет доступа к базовой операционной системе (включая ограниченный доступ к файловой системе).
 
-<p>Код клиентской части написан с использованием <a href="https://developer.mozilla.org/ru/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">HTML</a>, <a href="https://developer.mozilla.org/ru/docs/Learn/CSS">CSS</a> и <a href="https://developer.mozilla.org/ru/docs/Learn/JavaScript">JavaScript</a> — он запускается в веб-браузере и практически не имеет доступа к базовой операционной системе (включая ограниченный доступ к файловой системе).</p>
+Веб-разработчики не могут контролировать, какой браузер может использовать каждый пользователь для просмотра веб-сайта — браузеры обеспечивают противоречивые уровни совместимости с функциями кода на стороне клиента, и одной из задач программирования на стороне клиента является изящная обработка различий в поддержке браузера.
 
-<p>Веб-разработчики не могут контролировать, какой браузер может использовать каждый пользователь для просмотра веб-сайта — браузеры обеспечивают противоречивые уровни совместимости с функциями кода на стороне клиента, и одной из задач программирования на стороне клиента является изящная обработка различий в поддержке браузера.</p>
+Код серверной части может быть написан на любом количестве языков программирования — примеры популярных языков серверной части включают в себя PHP, Python, Ruby, C# и NodeJS (JavaScript). Код серверной части имеет полный доступ к операционной системе сервера, и разработчик может выбрать какой язык программирования (и какую версию) он хотел бы использовать.
 
-<p>Код серверной части может быть написан на любом количестве языков программирования — примеры популярных языков серверной части включают в себя PHP, Python, Ruby, C# и NodeJS (JavaScript). Код серверной части имеет полный доступ к операционной системе сервера, и разработчик может выбрать какой язык программирования (и какую версию) он хотел бы использовать.</p>
+Разработчики обычно пишут свой код, используя **веб-фреймворки**. Веб-фреймворки — это наборы функций, объектов, правил и других конструкций кода, предназначенных для решения общих проблем, ускорения разработки и упрощения различных типов задач, стоящих в конкретной области.
 
-<p>Разработчики обычно пишут свой код, используя <strong>веб-фреймворки</strong>. Веб-фреймворки — это наборы функций, объектов, правил и других конструкций кода, предназначенных для решения общих проблем, ускорения разработки и упрощения различных типов задач, стоящих в конкретной области.</p>
+И снова, поскольку и клиентская и серверная части используют фреймворки, области очень разные и, следовательно, фреймворки тоже разные. Фреймворки клиентской части упрощают вёрстку и представление данных, тогда как фреймворки серверной части обеспечивают много «обычной» функциональности веб-сервера, которую вы, возможно, в противном случае, должны были осуществлять самостоятельно (например, поддержка сессий, поддержка пользователей и аутентификация, простой доступ к базе данных, шаблонам библиотек и т. д.).
 
-<p>И снова, поскольку и клиентская и серверная части используют фреймворки, области очень разные и, следовательно, фреймворки тоже разные. Фреймворки клиентской части упрощают вёрстку и представление данных, тогда как фреймворки серверной части обеспечивают много «обычной» функциональности веб-сервера, которую вы, возможно, в противном случае, должны были осуществлять самостоятельно (например, поддержка сессий, поддержка пользователей и аутентификация, простой доступ к базе данных, шаблонам библиотек и т. д.).</p>
+> **Примечание:** **На заметку**: Фреймворки клиентской части часто используются для ускорения написания кода клиентской части, но вы также можете решить писать весь код руками; на самом деле, написание кода руками может быть более быстрым и эффективным, если вам нужен небольшой простой веб-сайт UI.
+>
+> И, наоборот, вы практически никогда не посмотрите в сторону написания кода серверной части веб-приложения без фреймворка: осуществление жизненно важной функции, такой как HTTP сервер действительно сложно сделать с нуля, скажем, на Python, но веб-фреймворки для Python, такие как Django, обеспечивают это из коробки наряду с другими полезными инструментами.
 
-<div class="note">
-<p><strong>На заметку</strong>: Фреймворки клиентской части часто используются для ускорения написания кода клиентской части, но вы также можете решить писать весь код руками; на самом деле, написание кода руками может быть более быстрым и эффективным, если вам нужен небольшой простой веб-сайт UI.</p>
+## Что можно сделать в серверной части?
 
-<p>И, наоборот, вы практически никогда не посмотрите в сторону написания кода серверной части веб-приложения без фреймворка: осуществление жизненно важной функции, такой как HTTP сервер действительно сложно сделать с нуля, скажем, на Python, но веб-фреймворки для Python, такие как Django, обеспечивают это из коробки наряду с другими полезными инструментами.</p>
-</div>
+Программирование серверной части очень полезно поскольку позволяет _эффективно_ доставлять информацию, составленную для индивидуальных пользователей и, таким образом, создавать намного лучший опыт использования.
 
-<div>
-<h2 id="Что_можно_сделать_в_серверной_части">Что можно сделать в серверной части?</h2>
+Компании, такие как Amazon, используют программирование серверной части для построения исследовательских результатов для товаров, формирования целевого предложения, основанного на предпочтениях клиента и предыдущих покупках, упрощения заказов и т. д. Банки используют программирование серверной части, чтобы хранить учётную информацию и позволять только авторизованным пользователям просматривать и совершать транзакции. Другие сервисы, такие как Facebook, Twitter, Instagram и Wikipedia используют бэкенд, чтобы выделять, распространять и контролировать доступ к интересному контенту.
 
-<p>Программирование серверной части очень полезно поскольку позволяет <em>эффективно</em> доставлять информацию, составленную для индивидуальных пользователей и, таким образом, создавать намного лучший опыт использования.</p>
+Некоторые типичные применения и выгоды бэкенда перечислены ниже. Вы заметите, что есть некоторое пересечение!
 
-<p>Компании, такие как Amazon, используют программирование серверной части для построения исследовательских результатов для товаров, формирования целевого предложения, основанного на предпочтениях клиента и предыдущих покупках, упрощения заказов и т. д. Банки используют программирование серверной части, чтобы хранить учётную информацию и позволять только авторизованным пользователям просматривать и совершать транзакции. Другие сервисы, такие как Facebook, Twitter, Instagram и Wikipedia используют бэкенд, чтобы выделять, распространять и контролировать доступ к интересному контенту.</p>
-</div>
+### Эффективное хранение и доставка информации
 
-<p>Некоторые типичные применения и выгоды бэкенда перечислены ниже. Вы заметите, что есть некоторое пересечение!</p>
+Представьте, сколько товаров доступно на Amazon, и представьте, сколько постов было написано на Facebook? Создание статической страницы для каждого товара или поста было бы абсолютно неэффективным.
 
-<h3 id="Эффективное_хранение_и_доставка_информации">Эффективное хранение и доставка информации</h3>
+Программирование серверной части позволяет вместо этого хранить информацию в базе данных и динамически создавать и возвращать HTML и другие типы файлов (например, PDF, изображения, и т. д.). Также есть возможность просто вернуть данные ({{glossary("JSON")}}, {{glossary("XML")}}, и т. д.) для отображения, используя подходящий фреймворк клиентской части (это уменьшает загрузку процессора на сервере и количество передаваемых данных).
 
-<p>Представьте, сколько товаров доступно на Amazon, и представьте, сколько постов было написано на Facebook? Создание статической страницы для каждого товара или поста было бы абсолютно неэффективным.</p>
+Сервер не ограничен в отправке информации из баз данных и может вместо этого возвращать результат инструментов программного обеспечения или данные из сервисов коммуникации. Контент даже может быть целевым относительно устройства клиента, который его получает.
 
-<p>Программирование серверной части позволяет вместо этого хранить информацию в базе данных и динамически создавать и возвращать HTML и другие типы файлов (например, PDF, изображения, и т. д.). Также есть возможность просто вернуть данные ({{glossary("JSON")}}, {{glossary("XML")}}, и т. д.) для отображения, используя подходящий фреймворк клиентской части (это уменьшает загрузку процессора на сервере и количество передаваемых данных).</p>
+Из-за того, что информация находится в базе данных, её также можно легко передать и обновить через другие бизнес системы (например, отслеживание).
 
-<p>Сервер не ограничен в отправке информации из баз данных и может вместо этого возвращать результат инструментов программного обеспечения или данные из сервисов коммуникации. Контент даже может быть целевым относительно устройства клиента, который его получает.</p>
+> **Примечание:** **На заметку:** вам не нужно сильно напрягать своё воображение, чтобы увидеть достоинства кода серверной части для эффективного хранения и передачи информации:
+>
+> 1.  Зайдите на [Amazon](https://www.amazon.com/) или в другой интернет-магазин.
+> 2.  Введите в поиск несколько ключевых слов и заметьте, как структура страницы не изменилась, тогда как результаты изменились.
+> 3.  Откройте два или три разных товара. Заметьте, что они имеют схожую структуру и внешний вид, но содержимое для разных товаров было вставлено из базы данных.
+>
+> Для обычного поиска (например, «рыба») вы можете увидеть буквально миллионы найденных значений. Использование базы данных позволяет им храниться и передаваться эффективно, и это позволяет контролировать представление информации всего в одном месте.
 
-<p>Из-за того, что информация находится в базе данных, её также можно легко передать и обновить через другие бизнес системы (например, отслеживание).</p>
+### Настраиваемый пользовательский опыт взаимодействия
 
-<div class="note">
-<p><strong>На заметку:</strong> вам не нужно сильно напрягать своё воображение, чтобы увидеть достоинства кода серверной части для эффективного хранения и передачи информации:</p>
+Серверы могут хранить и использовать информацию о клиентах чтобы поставлять удобный и сделанный индивидуально пользовательский опыт взаимодействия. Например, многие сайты хранят данные кредитных карт, чтобы не нужно было вводить их повторно. Сайты, наподобие Google Maps, могут использовать сохранённое и текущее местоположение для предоставления информации о маршруте, а также историю поиска или путешествий для выделения местных предприятий в результатах поиска.
 
-<ol>
- <li>Зайдите на <a href="https://www.amazon.com/">Amazon</a> или в другой интернет-магазин.</li>
- <li>Введите в поиск несколько ключевых слов и заметьте, как структура страницы не изменилась, тогда как результаты изменились.</li>
- <li>Откройте два или три разных товара. Заметьте, что они имеют схожую структуру и внешний вид, но содержимое для разных товаров было вставлено из базы данных.</li>
-</ol>
+Более глубокий анализ привычек пользователя может быть использован для прогнозирования их интересов и дальнейших настроек ответов и уведомлений, например, предоставление списка ранее посещённых популярных мест, которые вы, возможно, захотите найти на карте.
 
-<p>Для обычного поиска (например, «рыба») вы можете увидеть буквально миллионы найденных значений. Использование базы данных позволяет им храниться и передаваться эффективно, и это позволяет контролировать представление информации всего в одном месте.</p>
-</div>
+> **Примечание:** **На заметку:** [Google Maps](https://maps.google.com/) сохраняет вашу историю поиска и посещений. Часто посещаемые или часто вводимые в поиск локации выделяются больше, чем остальные.
+>
+> Результаты поиска Google оптимизируются на основе предыдущего поиска.
+>
+> 1.  Перейдите в [поиск Google](https://google.com/).
+> 2.  Произведите поиск по слову «футбол».
+> 3.  Теперь попробуйте ввести «любимое» в поисковой строке и понаблюдайте, как работают подсказки автозаполнения поиска.
+>
+> Стечение обстоятельств? Нет!
 
-<h3 id="Настраиваемый_пользовательский_опыт_взаимодействия">Настраиваемый пользовательский опыт взаимодействия</h3>
+### Контролируемый доступ к контенту
 
-<p>Серверы могут хранить и использовать информацию о клиентах чтобы поставлять удобный и сделанный индивидуально пользовательский опыт взаимодействия. Например, многие сайты хранят данные кредитных карт, чтобы не нужно было вводить их повторно. Сайты, наподобие Google Maps, могут использовать сохранённое и текущее местоположение для предоставления информации о маршруте, а также историю поиска или путешествий для выделения местных предприятий в результатах поиска.</p>
+Программирование серверной части позволяет сайтам ограничивать доступ авторизованным пользователям и предоставлять только ту информацию, которую пользователю разрешено видеть.
 
-<p>Более глубокий анализ привычек пользователя может быть использован для прогнозирования их интересов и дальнейших настроек ответов и уведомлений, например, предоставление списка ранее посещённых популярных мест, которые вы, возможно, захотите найти на карте.</p>
+Реальные примеры:
 
-<div class="note">
-<p><strong>На заметку:</strong> <a href="https://maps.google.com/">Google Maps</a> сохраняет вашу историю поиска и посещений. Часто посещаемые или часто вводимые в поиск локации выделяются больше, чем остальные.</p>
+- Социальные сети, такие как Facebook, позволяют пользователям полностью контролировать свои данные, но только своим друзьям разрешать просматривать или комментировать их. Пользователь определяет, кто может просматривать его данные и, более того, чьи данные появляются на его стене. Авторизация — центральная часть опыта взаимодействия.
+- Сайт, на котором вы находитесь прямо сейчас, контролирует доступ к контенту: статьи видны всем, но только авторизованные пользователи могут редактировать контент. Чтобы проверить это, нажмите на кнопку «Редактировать» в верхней части страницы, и, если вы авторизованы, вы увидите редакторский интерфейс, а если нет — вас перенаправит на страницу авторизации.
 
-<p>Результаты поиска Google оптимизируются на основе предыдущего поиска.</p>
+> **Примечание:** **На заметку:** Рассмотрим другие реальные примеры, где доступ к контенту контролируется. Например, что вы можете увидеть, если зайдёте на сайт вашего банка? Авторизуйтесь через вашу учётную запись, и какую дополнительную информацию вы можете просматривать и редактировать? Что за информацию вы можете увидеть, которую может редактировать только банк?
 
-<ol>
- <li> Перейдите в <a href="https://google.com/">поиск Google</a>.</li>
- <li> Произведите поиск по слову «футбол».</li>
- <li> Теперь попробуйте ввести «любимое» в поисковой строке и понаблюдайте, как работают подсказки автозаполнения поиска.</li>
-</ol>
+### Хранение информации о сессии/состоянии
 
-<p>Стечение обстоятельств? Нет!</p>
-</div>
+Программирование серверной части позволяет разработчикам использовать **сессии** – изначально это механизм, позволяющий серверу хранить информацию о текущем пользователе сайта и отправлять разные ответы, основанные на этой информации.
 
-<h3 id="Контролируемый_доступ_к_контенту">Контролируемый доступ к контенту</h3>
+Это позволяет, например, сайту знать, что пользователь был предварительно авторизован и выводить ссылки на его адрес электронной почты или историю заказов или, возможно, сохранить прогресс простой игры, так чтобы пользователь мог вернуться на сайт продолжить с того места, где он закончил.
 
-<p>Программирование серверной части позволяет сайтам ограничивать доступ авторизованным пользователям и предоставлять только ту информацию, которую пользователю разрешено видеть.</p>
+> **Примечание:** **На заметку:** Посетите новостной сайт, у которого есть подписка и откройте ветку тегов (например, [The Age](http://www.theage.com.au/)). Продолжайте посещать сайт в течение нескольких часов/дней. В итоге вас начнёт перенаправлять на страницы, объясняющие, как оформить платную подписку, а сами статьи станут вам недоступны. Эта информация является примером сессии, сохранённой в куки-файлах.
 
-<p>Реальные примеры:</p>
+### Уведомления и средства связи
 
-<ul>
- <li>Социальные сети, такие как Facebook, позволяют пользователям полностью контролировать свои данные, но только своим друзьям разрешать просматривать или комментировать их. Пользователь определяет, кто может просматривать его данные и, более того, чьи данные появляются на его стене. Авторизация — центральная часть опыта взаимодействия.</li>
- <li>Сайт, на котором вы находитесь прямо сейчас, контролирует доступ к контенту: статьи видны всем, но только авторизованные пользователи могут редактировать контент. Чтобы проверить это, нажмите на кнопку «Редактировать» в верхней части страницы, и, если вы авторизованы, вы увидите редакторский интерфейс, а если нет — вас перенаправит на страницу авторизации.</li>
-</ul>
+Серверы могут отправлять общие или пользовательские уведомления непосредственно через сайт или по электронной почте, через смс, мгновенные сообщения, видеосвязь или другие средства связи.
 
-<div class="note">
-<p><strong>На заметку:</strong> Рассмотрим другие реальные примеры, где доступ к контенту контролируется. Например, что вы можете увидеть, если зайдёте на сайт вашего банка? Авторизуйтесь через вашу учётную запись, и какую дополнительную информацию вы можете просматривать и редактировать? Что за информацию вы можете увидеть, которую может редактировать только банк?</p>
-</div>
+Вот несколько примеров:
 
-<h3 id="Хранение_информации_о_сессиисостоянии">Хранение информации о сессии/состоянии</h3>
+- Facebook или Twitter отправляет уведомления по электронной почте и смс-сообщения, чтобы уведомить вас о новых разговорах.
+- Amazon регулярно отправляет письма на электронную почту, предлагающие товары, похожие на те, которые уже были куплены или просматривались вами, которые могут вас заинтересовать.
+- Веб-сервер может посылать сообщения администратору сайта, предупреждая его о том, что на сервере заканчивается память или о подозрительной активности пользователя.
 
-<p>Программирование серверной части позволяет разработчикам использовать <strong>сессии</strong> – изначально это механизм, позволяющий серверу хранить информацию о текущем пользователе сайта и отправлять разные ответы, основанные на этой информации.</p>
+> **Примечание:** **На заметку**: Самый распространённый вид уведомлений – это «подтверждение регистрации». Возьмите почти любой интересующий вас крупный сайт (Google, Amazon, Instagram и т. п.) и создайте новую учётную запись, используя ваш адрес электронной почты. Вскоре вы получите письмо, подтверждающее факт вашей регистрации или содержащее информацию о необходимости активировать вашу учётную запись.
 
-<p>Это позволяет, например, сайту знать, что пользователь был предварительно авторизован и выводить ссылки на его адрес электронной почты или историю заказов или, возможно, сохранить прогресс простой игры, так чтобы пользователь мог вернуться на сайт продолжить с того места, где он закончил.</p>
+### Анализ данных
 
-<div class="note">
-<p><strong>На заметку:</strong> Посетите новостной сайт, у которого есть подписка и откройте ветку тегов (например, <a href="http://www.theage.com.au/">The Age</a>). Продолжайте посещать сайт в течение нескольких часов/дней. В итоге вас начнёт перенаправлять на страницы, объясняющие, как оформить платную подписку, а сами статьи станут вам недоступны. Эта информация является примером сессии, сохранённой в куки-файлах.</p>
-</div>
+Веб-сайт может собирать много данных о своих пользователях: что они ищут, что они покупают, что они рекомендуют, как долго они остаются на каждой странице. Программирование серверной части может быть использовано, чтобы усовершенствовать ответы, основанные на анализе этих данных.
 
-<h3 id="Уведомления_и_средства_связи">Уведомления и средства связи</h3>
+Например, и Amazon, и Google рекламируют товары на основании предыдущих поисков (и покупок).
 
-<p>Серверы могут отправлять общие или пользовательские уведомления непосредственно через сайт или по электронной почте, через смс, мгновенные сообщения, видеосвязь или другие средства связи.</p>
+> **Примечание:** **На заметку**: Если вы пользуетесь Facebook, зайдите на вашу стену и посмотрите на ряд постов. Заметьте, что некоторые посты не идут по порядку: в частности, посты с большим количеством «лайков» часто находятся выше по списку, чем остальные. Также взгляните на рекламу, которую вам показывают, вы вероятно увидите рекламу товаров, которые искали на других сайтах. Алгоритм Facebook для выделения контента и рекламы может казаться мистикой, но очевидно, что он зависит от ваших лайков и запросов поиска!
 
-<p>Вот несколько примеров:</p>
+## Подведение итогов
 
-<ul>
- <li>Facebook или Twitter отправляет уведомления по электронной почте и смс-сообщения, чтобы уведомить вас о новых разговорах.</li>
- <li>Amazon регулярно отправляет письма на электронную почту, предлагающие товары, похожие на те, которые уже были куплены или просматривались вами, которые могут вас заинтересовать.</li>
- <li>Веб-сервер может посылать сообщения администратору сайта, предупреждая его о том, что на сервере заканчивается память или о подозрительной активности пользователя.</li>
-</ul>
+Поздравляем, вы дошли до конца первой статьи о программировании серверной части.
 
-<div class="note">
-<p><strong>На заметку</strong>: Самый распространённый вид уведомлений – это «подтверждение регистрации». Возьмите почти любой интересующий вас крупный сайт (Google, Amazon, Instagram и т. п.) и создайте новую учётную запись, используя ваш адрес электронной почты. Вскоре вы получите письмо, подтверждающее факт вашей регистрации или содержащее информацию о необходимости активировать вашу учётную запись.</p>
-</div>
+Теперь вы узнали, что код серверной части выполняется на веб-сервере и его основная роль состоит в контролировании отправляемой пользователю информации (тогда как код клиентской части в основном определяет структуру и способ преподнесения информации пользователю). Вы должны также понимать, что это полезно, так как позволяет создавать веб-сайты, которые эффективно доставляют информацию, собранную для конкретных пользователей и иметь чёткое представление о некоторых вещах, которые вы сможете делать, когда станете разработчиком бэкенда.
 
-<h3 id="Анализ_данных">Анализ данных</h3>
+Наконец, вы должны понимать, что код серверной части может быть написан на разных языках программирования, и что вам следует использовать веб-фреймворк для упрощения процесса написания кода.
 
-<p>Веб-сайт может собирать много данных о своих пользователях: что они ищут, что они покупают, что они рекомендуют, как долго они остаются на каждой странице. Программирование серверной части может быть использовано, чтобы усовершенствовать ответы, основанные на анализе этих данных.</p>
+В следующей статье мы поможем вам выбрать лучший фреймворк для вашего первого сайта; затем мы изучим несколько основных взаимодействий с клиентской частью более подробно.
 
-<p>Например, и Amazon, и Google рекламируют товары на основании предыдущих поисков (и покупок).</p>
-
-<div class="note">
-<p><strong>На заметку</strong>: Если вы пользуетесь Facebook, зайдите на вашу стену и посмотрите на ряд постов. Заметьте, что некоторые посты не идут по порядку: в частности, посты с большим количеством «лайков» часто находятся выше по списку, чем остальные. Также взгляните на рекламу, которую вам показывают, вы вероятно увидите рекламу товаров, которые искали на других сайтах. Алгоритм Facebook для выделения контента и рекламы может казаться мистикой, но очевидно, что он зависит от ваших лайков и запросов поиска!</p>
-</div>
-
-<h2 id="Подведение_итогов">Подведение итогов</h2>
-
-<p>Поздравляем, вы дошли до конца первой статьи о программировании серверной части.</p>
-
-<p>Теперь вы узнали, что код серверной части выполняется на веб-сервере и его основная роль состоит в контролировании отправляемой пользователю информации (тогда как код клиентской части в основном определяет структуру и способ преподнесения информации пользователю). Вы должны также понимать, что это полезно, так как позволяет создавать веб-сайты, которые эффективно доставляют информацию, собранную для конкретных пользователей и иметь чёткое представление о некоторых вещах, которые вы сможете делать, когда станете разработчиком бэкенда.</p>
-
-<p>Наконец, вы должны понимать, что код серверной части может быть написан на разных языках программирования, и что вам следует использовать веб-фреймворк для упрощения процесса написания кода.</p>
-
-<p>В следующей статье мы поможем вам выбрать лучший фреймворк для вашего первого сайта; затем мы изучим несколько основных взаимодействий с клиентской частью более подробно.</p>
-
-<p>{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}</p>
+{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
diff --git a/files/ru/learn/server-side/first_steps/web_frameworks/index.md b/files/ru/learn/server-side/first_steps/web_frameworks/index.md
index 542e14f64fbfee..01de6e3697ae8b 100644
--- a/files/ru/learn/server-side/first_steps/web_frameworks/index.md
+++ b/files/ru/learn/server-side/first_steps/web_frameworks/index.md
@@ -8,46 +8,36 @@ tags:
   - начальный уровень
 translation_of: Learn/Server-side/First_steps/Web_frameworks
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</div>
+В предыдущей статье было показано, как выглядит общение между веб-клиентами и серверами, характер HTTP-запросов и ответов, а также то, что веб-приложение на стороне сервера должно выполнять, чтобы отвечать на запросы из веб-браузера. Благодаря этим знаниям настало время изучить, как веб-интерфейсы могут упростить эти задачи, и дать вам представление о том, как выбрать структуру для своего первого веб-приложения на стороне сервера.
 
-<p class="summary">В предыдущей статье было показано, как выглядит общение между веб-клиентами и серверами, характер HTTP-запросов и ответов, а также то, что веб-приложение на стороне сервера должно выполнять, чтобы отвечать на запросы из веб-браузера. Благодаря этим знаниям настало время изучить, как веб-интерфейсы могут упростить эти задачи, и дать вам представление о том, как выбрать структуру для своего первого веб-приложения на стороне сервера.</p>
+| Необходимые навыки: | Базовая компьютерная грамотность. Высокое понимание того, как серверный код обрабатывает и отвечает на HTTP-запросы (см. [Client-Server overview](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview)). |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Цели:               | Понять, как веб-интерфейсы могут упростить разработку / обслуживание кода на стороне сервера и заставить читателей задуматься о выборе структуры для собственной разработки.                                       |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые навыки:</th>
-   <td>Базовая компьютерная грамотность. Высокое понимание того, как серверный код обрабатывает и отвечает на HTTP-запросы (см. <a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a>).</td>
-  </tr>
-  <tr>
-   <th scope="row">Цели:</th>
-   <td>Понять, как веб-интерфейсы могут упростить разработку / обслуживание кода на стороне сервера и заставить читателей задуматься о выборе структуры для собственной разработки.</td>
-  </tr>
- </tbody>
-</table>
+Следующие разделы иллюстрируют некоторые моменты, используя фрагменты кода, взятые из реальных веб-интерфейсов. Не беспокойтесь, если не всё сразу понятно; мы будем работать над кодом вместе в модулях, посвящённых отдельным фреймворкам.
 
-<p>Следующие разделы иллюстрируют некоторые моменты, используя фрагменты кода, взятые из реальных веб-интерфейсов. Не беспокойтесь, если не всё сразу понятно; мы будем работать над кодом вместе в модулях, посвящённых отдельным фреймворкам.</p>
+## Обзор
 
-<h2 id="Обзор">Обзор</h2>
+Серверные веб-фреймворки (или «фреймворки веб-приложений») — это программные среды, которые упрощают создание, поддержку и масштабирование веб-приложений. Они предоставляют инструменты и библиотеки, которые упрощают общие задачи веб-разработки, включая маршрутизацию URL-адресов для соответствующих обработчиков, взаимодействие с базами данных, поддержку сеансов и авторизацию пользователей, форматирование вывода (например, HTML, JSON, XML) и улучшение защиты от веб-атак.
 
-<p>Серверные веб-фреймворки (или «фреймворки веб-приложений») — это программные среды, которые упрощают создание, поддержку и масштабирование веб-приложений. Они предоставляют инструменты и библиотеки, которые упрощают общие задачи веб-разработки, включая маршрутизацию URL-адресов для соответствующих обработчиков, взаимодействие с базами данных, поддержку сеансов и авторизацию пользователей, форматирование вывода (например, HTML, JSON, XML) и улучшение защиты от веб-атак.</p>
+В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.
 
-<p>В следующем разделе приводится более подробная информация о том, как веб-фреймворки могут облегчить разработку веб-приложений. Затем мы объясним некоторые критерии, которые вы можете использовать для выбора веб-фреймворка, а затем перечислим некоторые из ваших вариантов.</p>
+## Что может сделать веб-фреймворк для вас?
 
-<h2 id="Что_может_сделать_веб-фреймворк_для_вас">Что может сделать веб-фреймворк для вас?</h2>
+Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.
 
-<p>Веб-фреймворки предоставляют инструменты и библиотеки для упрощения общих операций веб-разработки. Вы не обязаны использовать веб-фреймворк на стороне сервера, но это настоятельно рекомендуется — это сделает вашу жизнь намного проще.</p>
+В этом разделе обсуждается различная функциональность, которая часто предоставляется веб-фреймворками (но не каждый фреймворк должен обязательно содержать весь описанный функционал!)
 
-<p>В этом разделе обсуждается различная функциональность, которая часто предоставляется веб-фреймворками (но не каждый фреймворк должен обязательно содержать весь описанный функционал!)</p>
+### Работайте напрямую с HTTP-запросами и ответами
 
-<h3 id="Работайте_напрямую_с_HTTP-запросами_и_ответами">Работайте напрямую с HTTP-запросами и ответами</h3>
+Как мы видели в последней статье, веб-серверы и браузеры обмениваются данными по протоколу HTTP — серверы ожидают HTTP-запросы из браузера, а затем возвращают информацию в HTTP-ответах. Веб-фреймворки позволяют писать упрощённый синтаксис, который будет генерировать серверный код для работы с этими запросами и ответами. Это означает, что вам будет легче работать, взаимодействуя с более простым кодом более высокого уровня, а не с сетевыми примитивами более низкого уровня.
 
-<p>Как мы видели в последней статье, веб-серверы и браузеры обмениваются данными по протоколу HTTP — серверы ожидают HTTP-запросы из браузера, а затем возвращают информацию в HTTP-ответах. Веб-фреймворки позволяют писать упрощённый синтаксис, который будет генерировать серверный код для работы с этими запросами и ответами. Это означает, что вам будет легче работать, взаимодействуя с более простым кодом более высокого уровня, а не с сетевыми примитивами более низкого уровня.</p>
+Пример ниже показывает, как это работает в веб-фреймворке Django (Python). Каждая функция «view» (обработчик запроса) получает объект `HttpRequest`, содержащий информацию о запросе, и должна вернуть объект `HttpResponse` с форматированным выводом (в этом случае строка).
 
-<p>Пример ниже показывает, как это работает в веб-фреймворке Django (Python). Каждая функция «view» (обработчик запроса) получает объект <code>HttpRequest</code>, содержащий информацию о запросе, и должна вернуть объект <code>HttpResponse</code> с форматированным выводом (в этом случае строка).</p>
-
-<pre class="brush: python"># Django view function
+```python
+# Django view function
 from django.http import HttpResponse
 
 def index(request):
@@ -55,49 +45,51 @@ def index(request):
     # perform operations using information from the request.
     # Return HttpResponse
     return HttpResponse('Output string to return')
-</pre>
+```
 
-<h3 id="Запросы_маршрута_к_соответствующему_обработчику">Запросы маршрута к соответствующему обработчику</h3>
+### Запросы маршрута к соответствующему обработчику
 
-<p>Большинство сайтов предоставляют несколько различных ресурсов, доступных через отдельные URL-адреса. Если работать с ними в одной функции, поддерживать будет трудно, поэтому веб-фреймворки предоставляют простые механизмы для сопоставления шаблонов URL-адресов с конкретными функциями обработчика. Этот подход также имеет преимущества с точки зрения обслуживания, потому что вы можете изменить URL-адрес, используемый для доставки определённой функции, без изменения базового кода.</p>
+Большинство сайтов предоставляют несколько различных ресурсов, доступных через отдельные URL-адреса. Если работать с ними в одной функции, поддерживать будет трудно, поэтому веб-фреймворки предоставляют простые механизмы для сопоставления шаблонов URL-адресов с конкретными функциями обработчика. Этот подход также имеет преимущества с точки зрения обслуживания, потому что вы можете изменить URL-адрес, используемый для доставки определённой функции, без изменения базового кода.
 
-<p>Различные фреймворки используют различные механизмы для сопоставления. Например, веб-фреймворк Flask (Python) добавляет маршруты для просмотра функций используя декораторы.</p>
+Различные фреймворки используют различные механизмы для сопоставления. Например, веб-фреймворк Flask (Python) добавляет маршруты для просмотра функций используя декораторы.
 
-<pre class="brush: python">@app.route("/")
+```python
+@app.route("/")
 def hello():
-    return "Hello World!"</pre>
+    return "Hello World!"
+```
 
-<p>Django ожидает, что разработчики определят список сопоставлений URL-адресов между шаблоном URL-адреса и функцией просмотра.</p>
+Django ожидает, что разработчики определят список сопоставлений URL-адресов между шаблоном URL-адреса и функцией просмотра.
 
-<pre class="brush: python">urlpatterns = [
+```python
+urlpatterns = [
     url(r'^$', views.index),
     # example: /best/myteamname/5/
-    url(r'^best/(?P&lt;team_name&gt;\w.+?)/(?P&lt;team_number&gt;[0-9]+)/$', views.best),
+    url(r'^best/(?P<team_name>\w.+?)/(?P<team_number>[0-9]+)/$', views.best),
 ]
-</pre>
+```
 
-<h3 id="Упростите_доступ_к_данным_в_запросе">Упростите доступ к данным в запросе</h3>
+### Упростите доступ к данным в запросе
 
-<p>Данные могут быть закодированы в HTTP-запросе разными способами. Для получения файлов или данных с сервера, HTTP-запрос <code>GET</code> может кодировать, какие данные требуются в URL-параметрах или в структуре URL. HTTP-запрос <code>POST</code> для обновления ресурса на сервере вместо этого будет включать обновлённую информацию как «POST данные» внутри тела запроса. HTTP-запрос может также включать информацию о текущей сессии или пользователе в cookie со стороны клиента.</p>
+Данные могут быть закодированы в HTTP-запросе разными способами. Для получения файлов или данных с сервера, HTTP-запрос `GET` может кодировать, какие данные требуются в URL-параметрах или в структуре URL. HTTP-запрос `POST` для обновления ресурса на сервере вместо этого будет включать обновлённую информацию как «POST данные» внутри тела запроса. HTTP-запрос может также включать информацию о текущей сессии или пользователе в cookie со стороны клиента.
 
-<p>Веб-фреймворки предоставляют соответствующие языку программирования механизмы доступа к этой информации. Например, объект <code>HttpRequest</code>, который Django передаёт каждой функции «view», содержит методы и свойства для доступа к целевому URL, типу запроса (например, HTTP <code>GET</code>), параметрам <code>GET</code> или <code>POST</code>, файлам cookie и данным сеанса и т. д. Django также может передавать информацию, закодированную в структуре URL, путём определения «шаблонов захвата» в преобразователе URL (см. последний фрагмент кода в разделе выше).</p>
+Веб-фреймворки предоставляют соответствующие языку программирования механизмы доступа к этой информации. Например, объект `HttpRequest`, который Django передаёт каждой функции «view», содержит методы и свойства для доступа к целевому URL, типу запроса (например, HTTP `GET`), параметрам `GET` или `POST`, файлам cookie и данным сеанса и т. д. Django также может передавать информацию, закодированную в структуре URL, путём определения «шаблонов захвата» в преобразователе URL (см. последний фрагмент кода в разделе выше).
 
-<h3 id="Абстрагируйте_и_упростите_доступ_к_базе_данных">Абстрагируйте и упростите доступ к базе данных</h3>
+### Абстрагируйте и упростите доступ к базе данных
 
-<p>Веб-сайты используют базы данных для хранения информации как для пользователей, так и о пользователях. Веб-фреймворки часто предоставляют слой базы данных, который абстрагирует операции чтения, записи, запроса и удаления базы данных. Этот уровень абстракции называется Object-Relational Mapper (ORM).</p>
+Веб-сайты используют базы данных для хранения информации как для пользователей, так и о пользователях. Веб-фреймворки часто предоставляют слой базы данных, который абстрагирует операции чтения, записи, запроса и удаления базы данных. Этот уровень абстракции называется Object-Relational Mapper (ORM).
 
-<p>Использование ORM имеет два преимущества:</p>
+Использование ORM имеет два преимущества:
 
-<ul>
- <li>Вы можете заменить лежащую в основе базу данных без необходимости изменять код, который её использует. Это позволяет разработчикам оптимизировать характеристики различных баз данных в зависимости от их использования.</li>
- <li>Базовая проверка данных может быть реализована. Это позволяет легче и безопаснее проверить, что данные хранятся в правильном поле типа базы данных, имеют правильный формат (например, адрес электронной почты) и не являются вредоносными (взломщики могут использовать определённые шаблоны кода, чтобы сделать такие вещи, как удаление записей базы данных).</li>
-</ul>
+- Вы можете заменить лежащую в основе базу данных без необходимости изменять код, который её использует. Это позволяет разработчикам оптимизировать характеристики различных баз данных в зависимости от их использования.
+- Базовая проверка данных может быть реализована. Это позволяет легче и безопаснее проверить, что данные хранятся в правильном поле типа базы данных, имеют правильный формат (например, адрес электронной почты) и не являются вредоносными (взломщики могут использовать определённые шаблоны кода, чтобы сделать такие вещи, как удаление записей базы данных).
 
-<p>Например, веб-фреймворк Django предоставляет ORM и ссылается на объект, используемый для определения структуры записи в качестве модели. Модель задаёт типы полей, которые должны быть сохранены, что может обеспечить проверку на уровне поля того, какая информация может быть сохранена (например, поле электронной почты будет разрешать только действительные адреса электронной почты). В определениях полей также можно указать их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст метки для форм и т. д. Модель не содержит никакой информации о базе данных, поскольку это параметр конфигурации, который может быть изменён отдельно от нашего кода.</p>
+Например, веб-фреймворк Django предоставляет ORM и ссылается на объект, используемый для определения структуры записи в качестве модели. Модель задаёт типы полей, которые должны быть сохранены, что может обеспечить проверку на уровне поля того, какая информация может быть сохранена (например, поле электронной почты будет разрешать только действительные адреса электронной почты). В определениях полей также можно указать их максимальный размер, значения по умолчанию, параметры списка выбора, текст справки для документации, текст метки для форм и т. д. Модель не содержит никакой информации о базе данных, поскольку это параметр конфигурации, который может быть изменён отдельно от нашего кода.
 
-<p>Первый фрагмент кода ниже показывает очень простую модель Django для объекта <code>Team</code>. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи. <code>team_level</code> — это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.</p>
+Первый фрагмент кода ниже показывает очень простую модель Django для объекта `Team`. Это сохраняет название команды и уровень команды как символьные поля и определяет максимальное количество символов для каждой записи. `team_level` — это поле выбора, поэтому здесь мы связываем варианты значений на выбор с сохраняемыми данными, а также значение по умолчанию.
 
-<pre class="brush: python">#best/models.py
+```python
+#best/models.py
 
 from django.db import models
 
@@ -111,193 +103,174 @@ class Team(models.Model):
         ...  #list our other teams
     )
     team_level = models.CharField(max_length=3,choices=TEAM_LEVELS,default='U11')
-</pre>
+```
 
-<p>Модель Django предоставляет простой API запросов для поиска в базе данных. Это может соответствовать нескольким полям одновременно, используя различные критерии (например, exact (точный), case-insensitive (без учёта регистра), greater than (больше чем) и т. п.), а также может поддерживать сложные операторы (например, вы можете указать поиск для команд U11, в которых есть команда имя, которое начинается с «Fr» или заканчивается на «al»).</p>
+Модель Django предоставляет простой API запросов для поиска в базе данных. Это может соответствовать нескольким полям одновременно, используя различные критерии (например, exact (точный), case-insensitive (без учёта регистра), greater than (больше чем) и т. п.), а также может поддерживать сложные операторы (например, вы можете указать поиск для команд U11, в которых есть команда имя, которое начинается с «Fr» или заканчивается на «al»).
 
-<p>Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09. В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле <code>team_level</code> имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции <code>filter()</code> в качестве аргумента с именем поля и типом соответствия, отделённым двойным подчёркиванием: <strong>team_level__exact</strong>).</p>
+Второй фрагмент кода показывает функцию представления (обработчик ресурсов) для отображения всех наших команд U09. В этом случае мы указываем, что мы хотим фильтровать для всех записей, где поле `team_level` имеет в точности текст «U09» (обратите внимание ниже, как этот критерий передаётся функции `filter()` в качестве аргумента с именем поля и типом соответствия, отделённым двойным подчёркиванием: **team_level\_\_exact**).
 
-<pre class="brush: python">#best/views.py
+```python
+#best/views.py
 
 from django.shortcuts import render
 from .models import Team
 
 def youngest(request):
-    <strong>list_teams = Team.objects.filter(team_level__exact="U09")</strong>
+    list_teams = Team.objects.filter(team_level__exact="U09")
     context = {'youngest_teams': list_teams}
     return render(request, 'best/index.html', context)
-</pre>
-
-<dl>
-</dl>
+```
 
-<h3 id="Отрисовка_данных">Отрисовка данных</h3>
+### Отрисовка данных
 
-<p>Веб-фреймворки часто предоставляют системы шаблонов. Они позволяют вам указать структуру выходного документа, используя заполнители для данных, которые будут добавлены при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.</p>
+Веб-фреймворки часто предоставляют системы шаблонов. Они позволяют вам указать структуру выходного документа, используя заполнители для данных, которые будут добавлены при создании страницы. Шаблоны часто используются для создания HTML, но могут также создавать другие типы документов.
 
-<p>Веб-фреймворки часто предоставляют механизм, позволяющий легко создавать другие форматы из хранимых данных, включая {{glossary ("JSON")}} и {{glossary ("XML")}}.</p>
+Веб-фреймворки часто предоставляют механизм, позволяющий легко создавать другие форматы из хранимых данных, включая {{glossary ("JSON")}} и {{glossary ("XML")}}.
 
-<p>Например, система шаблонов Django позволяет вам задавать переменные с использованием синтаксиса «двойных велосипедных рулей» (например, <code>{</code><code>{ <em>имя_переменной</em> </code><code>}</code><code>}</code>), которые будут заменены значениями, передаваемыми из функции «view» при отрисовке страницы. Система шаблонов также обеспечивает поддержку выражений (с синтаксисом: <code>{% <em>выражение</em> %}</code>), которые позволяют шаблонам выполнять простые операции, такие как повторение значений списка, передаваемых в шаблон.</p>
+Например, система шаблонов Django позволяет вам задавать переменные с использованием синтаксиса «двойных велосипедных рулей» (например, ` {``{ имя_переменной ``}``} `), которые будут заменены значениями, передаваемыми из функции «view» при отрисовке страницы. Система шаблонов также обеспечивает поддержку выражений (с синтаксисом: `{% выражение %}`), которые позволяют шаблонам выполнять простые операции, такие как повторение значений списка, передаваемых в шаблон.
 
-<div class="note">
-<p><strong>На заметку</strong>. Многие другие системы шаблонов используют аналогичный синтаксис, например: Jinja2 (Python),  handlebars  (JavaScript),  moustache  (JavaScript) и т. п.</p>
-</div>
+> **Примечание:** **На заметку**. Многие другие системы шаблонов используют аналогичный синтаксис, например: Jinja2 (Python), handlebars (JavaScript), moustache (JavaScript) и т. п.
 
-<p>Фрагмент кода ниже показывает, как это работает. Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка <code>youngest_teams</code>. Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная <code>youngest_teams</code>, а затем повторяет её в цикле <code>for</code>. На каждой итерации шаблон отображает значение <code>team_name</code> команды в элементе списка.</p>
+Фрагмент кода ниже показывает, как это работает. Продолжая пример «самой молодой команды» из предыдущего раздела, HTML-шаблон передаёт представлению переменную списка `youngest_teams`. Внутри скелета HTML у нас есть выражение, которое сначала проверяет, существует ли переменная `youngest_teams`, а затем повторяет её в цикле `for`. На каждой итерации шаблон отображает значение `team_name` команды в элементе списка.
 
-<pre class="brush: html">#best/templates/best/index.html
+```html
+#best/templates/best/index.html
 
-&lt;!DOCTYPE html&gt;
-&lt;html lang="en"&gt;
-&lt;body&gt;
+<!DOCTYPE html>
+<html lang="en">
+<body>
 
  {% if youngest_teams %}
-    &lt;ul&gt;
+    <ul>
     {% for team in youngest_teams %}
-        &lt;li&gt;\{\{ team.team_name \}\}&lt;/li&gt;
+        <li>\{\{ team.team_name \}\}</li>
     {% endfor %}
-    &lt;/ul&gt;
+    </ul>
 {% else %}
-    &lt;p&gt;No teams are available.&lt;/p&gt;
+    <p>No teams are available.</p>
 {% endif %}
 
-&lt;/body&gt;
-&lt;/html&gt;
-</pre>
+</body>
+</html>
+```
+
+## Как выбрать веб-фреймворк
 
-<h2 id="Как_выбрать_веб-фреймворк">Как выбрать веб-фреймворк</h2>
+Многочисленные веб-фреймворки существуют практически для каждого языка программирования, который вы, возможно, захотите использовать (мы перечислим несколько наиболее популярных фреймворков в следующем разделе). При таком большом количестве вариантов может оказаться затруднительным определить, какой фреймворк обеспечивает лучшую отправную точку для вашего нового веб-приложения.
 
-<p>Многочисленные веб-фреймворки существуют практически для каждого языка программирования, который вы, возможно, захотите использовать (мы перечислим несколько наиболее популярных фреймворков в следующем разделе). При таком большом количестве вариантов может оказаться затруднительным определить, какой фреймворк обеспечивает лучшую отправную точку для вашего нового веб-приложения.</p>
+Вот некоторые из факторов, которые могут повлиять на ваше решение:
 
-<p>Вот некоторые из факторов, которые могут повлиять на ваше решение:</p>
+- **Усилия для изучения:** усилия по изучению веб-фреймворка зависят от того, насколько вы знакомы с базовым языком программирования, последовательностью его API, качеством документации, а также размером и активностью поддерживающего его сообщества. Если вы начинаете без какого бы то ни было опыта программирования, подумайте о Django (это один из самых простых способов изучения на основе вышеуказанных критериев). Если вы являетесь частью команды разработчиков, которая уже имеет значительный опыт работы с определённым веб-фреймворком или языком программирования, то имеет смысл остановиться на используемом.
+- **Производительность:** Производительность — это показатель того, насколько быстро вы можете создавать новые функции, когда вы знакомы с платформой, и включает в себя как усилия по написанию, так и по обслуживанию кода (поскольку вы не можете писать новые функции, пока старые не работают). Многие из факторов, влияющих на производительность, аналогичны тем, которые используются для «Усилий по обучению» — например, документация, сообщество, опыт программирования и т. д. — другие факторы включают в себя:
 
-<ul>
- <li><strong>Усилия для изучения:</strong> усилия по изучению веб-фреймворка зависят от того, насколько вы знакомы с базовым языком программирования, последовательностью его API, качеством документации, а также размером и активностью поддерживающего его сообщества. Если вы начинаете без какого бы то ни было опыта программирования, подумайте о Django (это один из самых простых способов изучения на основе вышеуказанных критериев). Если вы являетесь частью команды разработчиков, которая уже имеет значительный опыт работы с определённым веб-фреймворком или языком программирования, то имеет смысл остановиться на используемом.</li>
- <li><strong>Производительность:</strong> Производительность — это показатель того, насколько быстро вы можете создавать новые функции, когда вы знакомы с платформой, и включает в себя как усилия по написанию, так и по обслуживанию кода (поскольку вы не можете писать новые функции, пока старые не работают). Многие из факторов, влияющих на производительность, аналогичны тем, которые используются для «Усилий по обучению» — например, документация, сообщество, опыт программирования и т. д. — другие факторы включают в себя:
-  <ul>
-   <li><em>Назначение / происхождение фреймворка: </em>Некоторые веб-фреймворки изначально создавались для решения определённых типов проблем и работают лучше при создании веб-приложений с аналогичными ограничениями. Например, Django был создан для поддержки разработки газетного веб-сайта, поэтому он хорош для блогов и других сайтов, связанных с публикацией материалов. Flask, напротив, является гораздо более лёгкой средой и отлично подходит для создания веб-приложений, работающих на встроенных устройствах.</li>
-   <li><em>Основанный на мнении сообщества против не имеющего мнения.</em> Фреймворк, основанный на мнении — это тот, в котором рекомендованы «лучшие» способы решения конкретной проблемы. Такие фреймворки, как правило, более продуктивны, когда вы пытаетесь решить общие проблемы, потому что они ведут вас в правильном направлении, однако иногда они менее гибки.</li>
-   <li><em>Всё включено против разбирайтесь сами</em>: некоторые веб-фреймворки включают в себя инструменты / библиотеки, которые решают каждую проблему, которую их разработчики могут считать «по умолчанию», в то время как более лёгкие фреймворки ожидают, что веб-разработчики будут выбирать решение проблем из отдельных библиотек (например, Django из первых, в то время как Flask является примером очень лёгкого каркаса). Начать работу с фреймворками, которые включают в себя всё, часто легче, потому что «из коробки» у вас уже есть всё, что вам нужно, и есть вероятность, что они хорошо интегрированы и хорошо документированы. Однако, если меньший фреймворк имеет всё, что вам (когда-либо) понадобится, он может работать в более стеснённых условиях и будет иметь меньший и более простой набор вещей для изучения.</li>
-   <li><em>Поощряет ли платформа хорошие практики разработки или нет: </em>например, фреймворк, который поощряет архитектуру Model-View-Controller, разделяющую код на логические функции, приведёт к более поддерживаемому коду, чем тот, который не ожидает этого от разработчиков. Аналогично дизайн фреймворка может оказать большое влияние на то, насколько легко тестировать и повторно использовать код.</li>
-  </ul>
- </li>
- <li><strong>Производительность фреймворка / языка программирования:</strong> Обычно «скорость» не является самым значимым критерием при выборе, потому что даже относительно медленные среды выполнения, такие как Python, более чем «достаточно хороши» для сайтов среднего размера, работающих на умеренном оборудовании. Ожидаемым плюсам скорости другого языка, например C++ или JavaScript, могут быть противопоставлены минусы в виде затрат на его изучение и обслуживание. </li>
- <li><strong>Поддержка кеширования:</strong> По мере того, как ваш сайт становится более успешным, вы можете столкнуться с тем, что он больше не справляется с количеством запросов, которые получает, когда пользователи им пользуются. На этом этапе вы можете рассмотреть возможность добавления поддержки кеширования. Кеширование — это оптимизация, при которой вы сохраняете весь веб-ответ или его часть так, чтобы его не нужно было пересчитывать при последующих запросах. Возврат кешированного ответа гораздо быстрее, чем его вычисление. Кеширование может быть реализовано в вашем коде или на сервере (см. <a href="https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%BA%D1%81%D0%B8">обратный прокси</a>). Веб-фреймворки будут иметь разные уровни поддержки для определения того, какой контент можно кешировать.</li>
- <li><strong>Масштабируемость.</strong> Как только ваш веб-сайт станет фантастически успешным, вы исчерпаете преимущества кеширования и даже достигнете пределов <em>вертикального масштабирования</em> (запуска веб-приложения на более мощном оборудовании). На этом этапе вам может потребоваться <em>масштабировать горизонтально</em> (разделить нагрузку, распределяя ваш сайт между несколькими веб-серверами и базами данных) или масштабировать «географически», потому что некоторые из ваших клиентов находятся далеко от вашего сервера. Веб-фреймворк, который вы выберете, может существенно повлиять на то, насколько легко масштабировать ваш сайт.</li>
- <li><strong>Веб-безопасность.</strong> Некоторые веб-фреймворки предоставляют лучшую поддержку для обработки распространённых веб-атак. Например, Django очищает весь пользовательский ввод от HTML-шаблонов, чтобы введённый пользователем JavaScript не мог быть запущен. Другие платформы предоставляют аналогичную защиту, но она не всегда включена по умолчанию.</li>
-</ul>
+  - _Назначение / происхождение фреймворка:_ Некоторые веб-фреймворки изначально создавались для решения определённых типов проблем и работают лучше при создании веб-приложений с аналогичными ограничениями. Например, Django был создан для поддержки разработки газетного веб-сайта, поэтому он хорош для блогов и других сайтов, связанных с публикацией материалов. Flask, напротив, является гораздо более лёгкой средой и отлично подходит для создания веб-приложений, работающих на встроенных устройствах.
+  - _Основанный на мнении сообщества против не имеющего мнения._ Фреймворк, основанный на мнении — это тот, в котором рекомендованы «лучшие» способы решения конкретной проблемы. Такие фреймворки, как правило, более продуктивны, когда вы пытаетесь решить общие проблемы, потому что они ведут вас в правильном направлении, однако иногда они менее гибки.
+  - _Всё включено против разбирайтесь сами_: некоторые веб-фреймворки включают в себя инструменты / библиотеки, которые решают каждую проблему, которую их разработчики могут считать «по умолчанию», в то время как более лёгкие фреймворки ожидают, что веб-разработчики будут выбирать решение проблем из отдельных библиотек (например, Django из первых, в то время как Flask является примером очень лёгкого каркаса). Начать работу с фреймворками, которые включают в себя всё, часто легче, потому что «из коробки» у вас уже есть всё, что вам нужно, и есть вероятность, что они хорошо интегрированы и хорошо документированы. Однако, если меньший фреймворк имеет всё, что вам (когда-либо) понадобится, он может работать в более стеснённых условиях и будет иметь меньший и более простой набор вещей для изучения.
+  - _Поощряет ли платформа хорошие практики разработки или нет:_ например, фреймворк, который поощряет архитектуру Model-View-Controller, разделяющую код на логические функции, приведёт к более поддерживаемому коду, чем тот, который не ожидает этого от разработчиков. Аналогично дизайн фреймворка может оказать большое влияние на то, насколько легко тестировать и повторно использовать код.
 
-<p>Существует также много других возможных влияющих факторов, включая вопросы лицензирования, зависимость от того, находится ли фреймворк в процессе активной разработки и т. д.</p>
+- **Производительность фреймворка / языка программирования:** Обычно «скорость» не является самым значимым критерием при выборе, потому что даже относительно медленные среды выполнения, такие как Python, более чем «достаточно хороши» для сайтов среднего размера, работающих на умеренном оборудовании. Ожидаемым плюсам скорости другого языка, например C++ или JavaScript, могут быть противопоставлены минусы в виде затрат на его изучение и обслуживание.
+- **Поддержка кеширования:** По мере того, как ваш сайт становится более успешным, вы можете столкнуться с тем, что он больше не справляется с количеством запросов, которые получает, когда пользователи им пользуются. На этом этапе вы можете рассмотреть возможность добавления поддержки кеширования. Кеширование — это оптимизация, при которой вы сохраняете весь веб-ответ или его часть так, чтобы его не нужно было пересчитывать при последующих запросах. Возврат кешированного ответа гораздо быстрее, чем его вычисление. Кеширование может быть реализовано в вашем коде или на сервере (см. [обратный прокси](https://ru.wikipedia.org/wiki/%D0%9E%D0%B1%D1%80%D0%B0%D1%82%D0%BD%D1%8B%D0%B9_%D0%BF%D1%80%D0%BE%D0%BA%D1%81%D0%B8)). Веб-фреймворки будут иметь разные уровни поддержки для определения того, какой контент можно кешировать.
+- **Масштабируемость.** Как только ваш веб-сайт станет фантастически успешным, вы исчерпаете преимущества кеширования и даже достигнете пределов _вертикального масштабирования_ (запуска веб-приложения на более мощном оборудовании). На этом этапе вам может потребоваться _масштабировать горизонтально_ (разделить нагрузку, распределяя ваш сайт между несколькими веб-серверами и базами данных) или масштабировать «географически», потому что некоторые из ваших клиентов находятся далеко от вашего сервера. Веб-фреймворк, который вы выберете, может существенно повлиять на то, насколько легко масштабировать ваш сайт.
+- **Веб-безопасность.** Некоторые веб-фреймворки предоставляют лучшую поддержку для обработки распространённых веб-атак. Например, Django очищает весь пользовательский ввод от HTML-шаблонов, чтобы введённый пользователем JavaScript не мог быть запущен. Другие платформы предоставляют аналогичную защиту, но она не всегда включена по умолчанию.
 
-<p>Если вы абсолютный новичок в программировании, вы, вероятно, выберете свою среду на основе «простоты обучения». В дополнение к «простоте использования» самого языка, ваши самые ценные ресурсы — это высококачественная документация / учебные пособия и активное сообщество, помогающее новым пользователям. Мы выбрали <a href="https://www.djangoproject.com/">Django</a> (Python) и <a href="http://expressjs.com/">Express</a> (Node/JavaScript) для написания наших примеров далее в курсе, главным образом потому, что они просты в освоении и имеют хорошую поддержку.</p>
+Существует также много других возможных влияющих факторов, включая вопросы лицензирования, зависимость от того, находится ли фреймворк в процессе активной разработки и т. д.
 
-<div class="note">
-<p><strong>На заметку:</strong> Давайте перейдём к основным веб-сайтам для <a href="https://www.djangoproject.com/">Django</a> (Python) и <a href="http://expressjs.com/">Express</a> (Node/JavaScript) и ознакомимся с их документацией и сообществом.</p>
+Если вы абсолютный новичок в программировании, вы, вероятно, выберете свою среду на основе «простоты обучения». В дополнение к «простоте использования» самого языка, ваши самые ценные ресурсы — это высококачественная документация / учебные пособия и активное сообщество, помогающее новым пользователям. Мы выбрали [Django](https://www.djangoproject.com/) (Python) и [Express](http://expressjs.com/) (Node/JavaScript) для написания наших примеров далее в курсе, главным образом потому, что они просты в освоении и имеют хорошую поддержку.
 
-<ol>
- <li>Перейдите к основным сайтам (ссылки выше)
+> **Примечание:** **На заметку:** Давайте перейдём к основным веб-сайтам для [Django](https://www.djangoproject.com/) (Python) и [Express](http://expressjs.com/) (Node/JavaScript) и ознакомимся с их документацией и сообществом.
+>
+> 1.  Перейдите к основным сайтам (ссылки выше)
+>
+>     - Нажмите на ссылки меню «Документация» (такие вещи, как «Документация, Руководство, Справочник по API, Начало работы»).
+>     - Можете ли вы увидеть темы, показывающие, как настроить маршрутизацию URL, шаблоны и базы данных / модели?
+>     - Понятны ли эти документы?
+>
+> 2.  Перейдите к спискам рассылки для каждого сайта (доступно по ссылкам сообщества).
+>
+>     - Сколько вопросов было опубликовано за последние несколько дней?
+>     - У скольких есть ответы?
+>     - Есть ли у них активное сообщество?
 
-  <ul>
-   <li>Нажмите на ссылки меню «Документация» (такие вещи, как «Документация, Руководство, Справочник по API, Начало работы»).</li>
-   <li>Можете ли вы увидеть темы, показывающие, как настроить маршрутизацию URL, шаблоны и базы данных / модели?</li>
-   <li>Понятны ли эти документы?</li>
-  </ul>
- </li>
- <li>Перейдите к спискам рассылки для каждого сайта (доступно по ссылкам сообщества).
-  <ul>
-   <li>Сколько вопросов было опубликовано за последние несколько дней?</li>
-   <li>У скольких есть ответы?</li>
-   <li>Есть ли у них активное сообщество?</li>
-  </ul>
- </li>
-</ol>
-</div>
+## Несколько хороших веб-фреймворков?
 
-<h2 id="Несколько_хороших_веб-фреймворков">Несколько хороших веб-фреймворков?</h2>
+Давайте продолжим и обсудим несколько конкретных серверных веб-фреймворков.
 
-<p>Давайте продолжим и обсудим несколько конкретных серверных веб-фреймворков.</p>
+Фреймворки на стороне сервера, представленные ниже, представляют собой несколько самых популярных из доступных на момент написания. Все они имеют всё, что вам нужно для продуктивной работы — они с открытым исходным кодом, находятся в процессе активной разработки, имеют полные энтузиазма сообщества, создающие документацию и помогающие пользователям на форумах, и используются на большом количестве выдающихся веб-сайтов. Существует также много других замечательных серверных фреймворков, которые вы можете найти с помощью обычного поиска в Интернете.
 
-<p>Фреймворки на стороне сервера, представленные ниже, представляют собой несколько самых популярных из доступных на момент написания. Все они имеют всё, что вам нужно для продуктивной работы — они с открытым исходным кодом, находятся в процессе активной разработки, имеют полные энтузиазма сообщества, создающие документацию и помогающие пользователям на форумах, и используются на большом количестве выдающихся веб-сайтов. Существует также много других замечательных серверных фреймворков, которые вы можете найти с помощью обычного поиска в Интернете.</p>
+> **Примечание:** **На заметку:** Описания взяты (частично) с веб-сайтов фреймворка!
 
-<div class="note">
-<p><strong>На заметку:</strong> Описания взяты (частично) с веб-сайтов фреймворка!</p>
-</div>
+### Django (Python)
 
-<h3 id="Django_Python">Django (Python)</h3>
+[Django](https://www.djangoproject.com/) — это веб-фреймворк высокого уровня на языке Python, который способствует быстрой разработке и чистому, прагматичному дизайну. Созданный опытными разработчиками, он берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего приложения без необходимости заново изобретать велосипед. Он бесплатен для использования и имеет открытый исходный код.
 
-<p><a href="https://www.djangoproject.com/">Django</a> — это веб-фреймворк высокого уровня на языке Python, который способствует быстрой разработке и чистому, прагматичному дизайну. Созданный опытными разработчиками, он берёт на себя большую часть хлопот веб-разработки, поэтому вы можете сосредоточиться на написании своего приложения без необходимости заново изобретать велосипед. Он бесплатен для использования и имеет открытый исходный код.</p>
+Django следует философии «Всё включено» и предоставляет практически всё, что большинство разработчиков может пожелать «из коробки». Поскольку всё включено, всё работает вместе, следует последовательным принципам проектирования и имеет обширную и актуальную документацию. Он также быстр, безопасен и очень масштабируем. Основанный на Python, код Django легко читать и поддерживать.
 
-<p>Django следует философии «Всё включено» и предоставляет практически всё, что большинство разработчиков может пожелать «из коробки». Поскольку всё включено, всё работает вместе, следует последовательным принципам проектирования и имеет обширную и актуальную документацию. Он также быстр, безопасен и очень масштабируем. Основанный на Python, код Django легко читать и поддерживать.</p>
+Популярные сайты, использующие Django (с домашней страницы Django), включают в себя: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.
 
-<p>Популярные сайты, использующие Django (с домашней страницы Django), включают в себя: Disqus, Instagram, Knight Foundation, MacArthur Foundation, Mozilla, National Geographic, Open Knowledge Foundation, Pinterest, Open Stack.</p>
+### Flask (Python)
 
-<h3 id="Flask_Python">Flask (Python)</h3>
+[Flask](http://flask.pocoo.org/) — это микрофреймворк для Python.
 
-<p><a href="http://flask.pocoo.org/">Flask</a> — это микрофреймворк для Python.</p>
+И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны [Jinja2](https://github.com/pallets/jinja), безопасные файлы cookie, [модульное тестирование](https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5) и диспетчеризацию запросов [RESTful](http://www.restapitutorial.com/lessons/restfulresourcenaming.html). У него хорошая документация и активное сообщество.
 
-<p>И хотя Flask минималистичен, он может создавать серьёзные веб-сайты из коробки. Он содержит сервер разработки и отладчик, а также поддерживает шаблоны <a href="https://github.com/pallets/jinja">Jinja2</a>, безопасные файлы cookie, <a href="https://ru.wikipedia.org/wiki/%D0%9C%D0%BE%D0%B4%D1%83%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5_%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5">модульное тестирование</a> и диспетчеризацию запросов <a href="http://www.restapitutorial.com/lessons/restfulresourcenaming.html">RESTful</a>. У него хорошая документация и активное сообщество.</p>
+Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на [Raspberry Pi](https://www.raspberrypi.org/), [контроллеры Drone](https://www.raspberrypi.org/) и т. п.).
 
-<p>Flask стал чрезвычайно популярным, особенно для разработчиков, которым необходимо предоставлять веб-сервисы в небольших системах с ограниченными ресурсами (например, запуск веб-сервера на <a href="https://www.raspberrypi.org/">Raspberry Pi</a>, <a href="https://www.raspberrypi.org/">контроллеры Drone</a> и т. п.).</p>
+### Express (Node.js/JavaScript)
 
-<h3 id="Express_Node.jsJavaScript">Express (Node.js/JavaScript)</h3>
+[Express](http://expressjs.com/) — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для [Node.js](https://nodejs.org/en/) (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и [middleware](/ru/docs/Glossary/Middleware) (промежуточные интерфейсы).
 
-<p><a href="http://expressjs.com/">Express</a> — быстрый, непринуждённый, гибкий и минималистский веб-фреймворк для <a href="https://nodejs.org/en/">Node.js</a> (node — это серверная среда для запуска JavaScript). Он обеспечивает надёжный набор функций для веб и мобильных приложений и предоставляет полезные HTTP-утилиты и <a href="/en-US/docs/Glossary/Middleware">middleware</a> (промежуточные интерфейсы).</p>
+Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).
 
-<p>Express чрезвычайно популярен, частично потому, что он облегчает миграцию клиентских веб-программистов JavaScript в разработку на стороне сервера, а частично потому, что он ресурсоэффективен (базовая среда узлов использует лёгкую многозадачность в потоке, а не порождает отдельные процессы для каждого новый веб-запроса).</p>
+Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели!
 
-<p>Поскольку Express является минималистским веб-фреймворком, он не включает в себя все компоненты, которые вы, возможно, захотите использовать (например, доступ к базе данных и поддержка пользователей и сеансов предоставляются через независимые библиотеки). Есть много отличных независимых компонентов, но иногда бывает сложно решить, какой из них лучше всего подходит для конкретной цели! </p>
+На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых [Feathers](http://feathersjs.com/), [ItemsAPI](https://www.itemsapi.com/), [KeystoneJS](http://keystonejs.com/), [Kraken](http://krakenjs.com/), [LoopBack](http://loopback.io/), [MEAN](http://mean.io/) и [Sails](http://sailsjs.org/).
 
-<p>На Express основаны многие популярные серверные фреймворки, а также фреймворки полного цикла (которые включают как серверную, так и клиентскую часть), в числе которых <a href="http://feathersjs.com/">Feathers</a>, <a href="https://www.itemsapi.com/">ItemsAPI</a>, <a href="http://keystonejs.com/">KeystoneJS</a>, <a href="http://krakenjs.com/">Kraken</a>, <a href="http://loopback.io/">LoopBack</a>, <a href="http://mean.io/">MEAN</a> и <a href="http://sailsjs.org/">Sails</a>.</p>
+Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён [здесь](http://expressjs.com/en/resources/companies-using-express.html)).
 
-<p>Express используют многие крупные компании, в том числе: Uber, Accenture, IBM и т. д. (список приведён <a href="http://expressjs.com/en/resources/companies-using-express.html">здесь</a>).</p>
+### Ruby on Rails (Ruby)
 
-<h3 id="Ruby_on_Rails_Ruby">Ruby on Rails (Ruby)</h3>
+[Rails](http://rubyonrails.org/) (обычно именуется «Ruby on Rails») — это веб-фреймворк, написанный для языка программирования Ruby.
 
-<p><a href="http://rubyonrails.org/">Rails</a> (обычно именуется «Ruby on Rails») — это веб-фреймворк, написанный для языка программирования Ruby.</p>
+Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Им точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» — пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.
 
-<p>Rails следует очень похожей философии дизайна на Django. Как и Django, он предоставляет стандартные механизмы для маршрутизации URL-адресов, доступа к данным из базы данных, генерации HTML из шаблонов и форматирования таких данных как {{glossary ("JSON")}} или {{glossary ("XML")}}. Им точно так же поощряется использование шаблонов проектирования, таких как DRY («не повторяйте себя» — пишите код только один раз, если это возможно), MVC (модель-представление-контроллер) и ряд других.</p>
+Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.
 
-<p>Конечно, в них существует и много различий, которые связаны с конкретными проектными решениями и природой самих языков.</p>
-<p>Rails использовался для крупных сайтов, в том числе: <a href="https://basecamp.com/">Basecamp</a>, <a href="https://github.com/">GitHub</a>, <a href="https://shopify.com/">Shopify</a>, <a href="https://airbnb.com/">Airbnb</a>, <a href="https://twitch.tv/">Twitch</a>, <a href="https://soundcloud.com/">SoundCloud</a>, <a href="https://hulu.com/">Hulu</a>, <a href="https://zendesk.com/">Zendesk</a>, <a href="https://square.com/">Square</a>, <a href="https://highrisehq.com/">Highrise</a>.</p>
+Rails использовался для крупных сайтов, в том числе: [Basecamp](https://basecamp.com/), [GitHub](https://github.com/), [Shopify](https://shopify.com/), [Airbnb](https://airbnb.com/), [Twitch](https://twitch.tv/), [SoundCloud](https://soundcloud.com/), [Hulu](https://hulu.com/), [Zendesk](https://zendesk.com/), [Square](https://square.com/), [Highrise](https://highrisehq.com/).
 
-<h3 id="ASP.NET">ASP.NET</h3>
+### ASP.NET
 
-<p><a href="http://www.asp.net/">ASP.NET</a> — это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.</p>
+[ASP.NET](http://www.asp.net/) — это веб-фреймворк с открытым исходным кодом, разработанный Microsoft для создания современных веб-приложений и сервисов. С ASP.NET вы можете быстро создавать веб-сайты на основе HTML, CSS и JavaScript, масштабировать их для использования миллионами пользователей и легко добавлять более сложные возможности, такие как веб-API, формы поверх данных или коммуникации в режиме реального времени.
 
-<p>Одним из отличий ASP.NET является то, что он построен на <a href="https://ru.wikipedia.org/wiki/Common_Language_Runtime">Common Language Runtime</a> (CLR, «общеязыковая исполняющая среда»), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.</p>
+Одним из отличий ASP.NET является то, что он построен на [Common Language Runtime](https://ru.wikipedia.org/wiki/Common_Language_Runtime) (CLR, «общеязыковая исполняющая среда»), что позволяет программистам писать код ASP.NET с использованием любого поддерживаемого языка .NET (C#, Visual Basic и т. п.). Как и многие продукты Microsoft, он обладает отличными инструментами (часто бесплатными), активным сообществом разработчиков и хорошо написанной документацией.
 
-<p>ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.</p>
+ASP.NET используется Microsoft, Xbox.com, Stack Overflow и многими другими.
 
-<h3 id="Mojolicious_Perl">Mojolicious (Perl)</h3>
+### Mojolicious (Perl)
 
-<p><a href="http://mojolicious.org/">Mojolicious</a> — это веб-фреймворк следующего поколения для языка программирования Perl.</p>
+[Mojolicious](http://mojolicious.org/) — это веб-фреймворк следующего поколения для языка программирования Perl.
 
-<p>Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием <a href="https://metacpan.org/module/CGI">CGI</a>. Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.</p>
+Ещё в первые дни Интернета многие люди изучали Perl из-за замечательной библиотеки Perl под названием [CGI](https://metacpan.org/module/CGI). Язык позволял довольно просто начать, не зная многого о языке, и был достаточно мощным, чтобы вы продолжали работу. Mojolicious реализует эту идею, используя новейшие технологии.
 
-<p>Некоторые из функций, предоставляемых Mojolicious:</p>
+Некоторые из функций, предоставляемых Mojolicious:
 
-<ul>
- <li>веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC.</li>
- <li>RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/<a href="http://plackperl.org/">PSGI</a>, первоклассная поддержка Unicode.</li>
- <li>Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip.</li>
- <li>Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS.</li>
- <li>Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии.</li>
- <li>Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом.</li>
-</ul>
+- веб-инфраструктура в режиме реального времени, позволяющая легко превращать отдельные файловые прототипы в хорошо структурированные веб-приложения MVC.
+- RESTful маршруты, плагины, команды, шаблоны Perl-ish, согласование контента, управление сеансами, проверка форм, структура тестирования, статический файловый сервер, обнаружение CGI/[PSGI](http://plackperl.org/), первоклассная поддержка Unicode.
+- Реализация полного стека HTTP и WebSocket клиент/сервер с IPv6, TLS, SNI, IDNA, HTTP/SOCKS5 прокси, сокет домена UNIX, Comet (длинный опрос), поддержка активности, пул соединений, тайм-аут, cookie, поддержка нескольких частей и сжатия gzip.
+- Парсеры и генераторы JSON и HTML/XML с поддержкой селекторов CSS.
+- Очень чистый, портативный и объектно-ориентированный Perl API без скрытой магии.
+- Свежий код, основанный на многолетнем опыте, бесплатный и с открытым исходным кодом.
 
-<h2 id="Резюме">Резюме</h2>
+## Резюме
 
-<p>Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь — позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком. </p>
+Эта статья показала, что веб-фреймворки могут упростить разработку и поддержку кода на стороне сервера. Она также предоставила общий обзор нескольких популярных платформ и обсудила критерии выбора платформы веб-приложений. Теперь у вас должно быть хотя бы представление о том, как выбрать веб-фреймворк для собственной разработки на стороне сервера. Если нет, то не беспокойтесь — позже в курсе мы дадим вам подробные учебники по Django и Express, чтобы дать вам некоторый опыт работы с веб-фреймворком.
 
-<p>Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.</p>
+Для следующей статьи в этом модуле мы немного изменим направление и рассмотрим веб-безопасность.
 
-<p>{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}</p>
+{{PreviousMenuNext("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps/Website_security", "Learn/Server-side/First_steps")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/ru/docs/Learn/Server-side/First_steps/Introduction">Introduction to the server side</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Client-Server overview</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Server-side web frameworks</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Website security</a></li>
-</ul>
+- [Introduction to the server side](/ru/docs/Learn/Server-side/First_steps/Introduction)
+- [Client-Server overview](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview)
+- [Server-side web frameworks](/ru/docs/Learn/Server-side/First_steps/Web_frameworks)
+- [Website security](/ru/docs/Learn/Server-side/First_steps/Website_security)
diff --git a/files/ru/learn/server-side/first_steps/website_security/index.md b/files/ru/learn/server-side/first_steps/website_security/index.md
index b3b7c1c8f4ee8f..e3ae96bb1c545b 100644
--- a/files/ru/learn/server-side/first_steps/website_security/index.md
+++ b/files/ru/learn/server-side/first_steps/website_security/index.md
@@ -4,164 +4,138 @@ slug: Learn/Server-side/First_steps/Website_security
 translation_of: Learn/Server-side/First_steps/Website_security
 original_slug: Learn/Server-side/First_steps/Веб_Безопасность
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
 
-<div>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</div>
+Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить своё веб-приложение против наиболее распространённых атак.
 
-<p class="summary">Безопасность сайта требует бдительности во всех аспектах дизайна и использования сайта. Эта вводная статья не сделает из вас гуру безопасности веб-сайта, но она поможет вам понять, откуда приходят угрозы, и что вы можете сделать, чтобы укрепить своё веб-приложение против наиболее распространённых атак.</p>
+| Условия: | Элементарная компьютерная грамотность                                                                                                |
+| -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
+| Цель:    | Понять самые распространённые угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта. |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Условия:</th>
-   <td>Элементарная компьютерная грамотность</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Понять самые распространённые угрозы безопасности веб-приложений. И что вы можете сделать, чтобы уменьшить риск взлома вашего сайта.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое безопасность сайта?
 
-<h2 id="Что_такое_безопасность_сайта">Что такое безопасность сайта?</h2>
+Интернет - опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение изменённой (и часто повреждённой) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.
 
-<p>Интернет - опасное место! Мы регулярно слышим о том, что веб-сайты становятся недоступными из-за атак типа отказано в обслуживании, или отображение изменённой (и часто повреждённой) информации на их страницах. В других случаях миллионы паролей, адресов электронной почты и данные кредитных карт становились общедоступными, подвергая пользователей веб-сайта личному смущению или к финансовым рискам.</p>
+Цель веб-безопасности заключается в предотвращении этих (или других) видов атак. Более формальным определением веб-безопасности является: _способы защиты веб-сайтов от несанкционированного доступа, использования, изменения, уничтожения или нарушения работы._
 
-<p>Цель веб-безопасности заключается в предотвращении этих (или других) видов атак. Более формальным определением веб-безопасности является: <em>способы защиты веб-сайтов от несанкционированного доступа, использования, изменения, уничтожения или нарушения работы.</em></p>
+Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надёжные и продуманные механизмы защиты от ряда наиболее распространённых атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.
 
-<p>Для эффективной безопасности веб-сайта необходимо уделять особое внимание к разработке всего веб-сайта: к вашему веб-приложению, конфигурации веб-сервера, при написании политик создания и обновления паролей, а так же кода на стороне клиента. Хотя все это звучит очень зловеще, хорошая новость заключается в том, что если вы используете веб-фреймворк для серверной части, то он почти наверняка обеспечит «по умолчанию» надёжные и продуманные механизмы защиты от ряда наиболее распространённых атак. Другие атаки можно смягчить с помощью конфигурации вашего веб-сервера, например, включив HTTPS. Наконец, есть общедоступные инструменты для сканирования уязвимостей, которые могут помочь вам определить, если вы допустили какие-либо очевидные ошибки.</p>
+В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространённых угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.
 
-<p>В оставшейся части этой статьи мы рассмотрим более подробную информацию о некоторых самых распространённых угрозах и о простых шагах, которые вы можете предпринять, чтобы защитить свой сайт.</p>
+> **Примечание:**Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.
 
-<div class="note">
-<p><strong>Примечание: </strong>Это вводная статья, призванная помочь вам задуматься о безопасности веб-сайта, но она не является исчерпывающей.</p>
-</div>
+## Угрозы безопасности сайта
 
-<h2 id="Угрозы_безопасности_сайта">Угрозы безопасности сайта</h2>
+В этом разделе перечислены лишь некоторые из наиболее распространённых угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо _недостаточно параноидально_ относится к данным, поступающим из браузера.
 
-<p>В этом разделе перечислены лишь некоторые из наиболее распространённых угроз веб-сайта и способы их устранения. Читая, обратите внимание на то, насколько успешны угрозы, когда веб-приложение доверяет, либо <em>недостаточно параноидально</em> относится к данным, поступающим из браузера.</p>
+### Межсайтовый скриптинг (XSS)
 
-<h3 id="Межсайтовый_скриптинг_XSS">Межсайтовый скриптинг (XSS)</h3>
+XSS (_Cross-Site Scripting_ - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код _через_ веб-сайт в браузеры других пользователей. Поскольку внедрённый код поступает в браузер с сайта, он является _доверенным_ и может выполнять такие действия, как отправка авторизационного файла *cookie*пользователя злоумышленнику. Когда у злоумышленника есть файл _cookie_, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.
 
-<p>XSS (<em>Cross-Site Scripting</em> - Межсайтовый скриптинг) это термин, используемый для описания типа атак, которые позволяют злоумышленнику внедрять вредоносный код <em>через</em> веб-сайт в браузеры других пользователей. Поскольку внедрённый код поступает в браузер с сайта, он является <em>доверенным</em> и может выполнять такие действия, как отправка авторизационного файла <em>cookie</em>пользователя злоумышленнику. Когда у злоумышленника есть файл <em>cookie</em>, он может войти на сайт, как если бы он был пользователем, и сделать все, что может пользователь, например, получить доступ к данным кредитной карты, просмотреть контактные данные или изменить пароли.</p>
+> **Примечание:** Уязвимости XSS исторически встречались чаще, чем любые другие виды угроз безопасности.
 
-<div class="note">
-<p><strong>Примечание</strong>: Уязвимости XSS исторически встречались чаще, чем любые другие виды угроз безопасности.</p>
-</div>
+Уязвимости XSS делятся на _отражённые_ и _хранимые_, в зависимости от того, как сайт возвращает внедрённый код в браузер.
 
-<p>Уязвимости XSS делятся на <em>отражённые</em> и <em>хранимые</em>, в зависимости от того, как сайт возвращает внедрённый код в браузер.</p>
+- _Отражённая_ XSS-уязвимость возникает, когда пользовательский контент, который передаётся на сервер, _немедленно_ и _без изменений_ возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: `http://mysite.com?q=beer<script%20src="http://evilsite.com/tricky.js"></script>`) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.
+- Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.
 
-<ul>
- <li><em>Отражённая </em>XSS-уязвимость возникает, когда пользовательский контент, который передаётся на сервер, <em>немедленно</em> и <em>без изменений</em> возвращается для отображения в браузере. Любой скрипт в исходном пользовательском контенте запустится при загрузке новой страницы. Например, рассмотрим строку поиска по сайту, в которой поисковые слова закодированы как параметры URL, и эти слова отображаются вместе с результатами. Злоумышленник может создать поисковую ссылку, которая будет содержать вредоносный скрипт в качестве параметра (например: <code>http://mysite.com?q=beer&lt;script%20src="http://evilsite.com/tricky.js"&gt;&lt;/script&gt;</code>) и переслать его другому пользователю по электронной почте. Если целевой пользователь кликнет по этой «интересной ссылке», то скрипт выполнится при отображении результатов поиска. Как мы уже говорили, злоумышленник  таким образом получает всю информацию, необходимую ему для входа на сайт в качестве целевого пользователя, потенциального совершения покупок от имени пользователя или получения его контактной информации.</li>
- <li>
-  <p>Постоянная уязвимость XSS возникает, когда вредоносный скрипт хранится на веб-сайте, а затем снова отображается без изменений, чтобы другие пользователи могли выполнять его невольно.</p>
-  <p>Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.</p>
-  <p>Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.</p>
-  <p>Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как &lt;script&gt;, &lt;object&gt;, &lt;embed&gt; и &lt;link&gt;.</p>
-  <p>Процесс изменения пользовательских данных, чтобы их нельзя было использовать для запуска сценариев или иным образом влиять на выполнение серверного кода, называется очисткой ввода. Многие веб-фреймворки автоматически очищают пользовательский ввод от HTML-форм по умолчанию.</p>
- </li>
-</ul>
+  Например, доска обсуждений, которая принимает комментарии, содержащие неизмененный HTML, может хранить вредоносный скрипт от злоумышленника. Когда комментарии отображаются, скрипт выполняется и может отправить злоумышленнику информацию, необходимую для доступа к учётной записи пользователя. Атака такого рода чрезвычайно популярна и мощна, потому что злоумышленник может даже не иметь прямого отношения к жертвам.
 
-<h3 id="SQL_injection">SQL injection</h3>
+  Хотя данные из запросов POST или GET являются наиболее распространённым источником уязвимостей XSS, любые данные из браузера потенциально уязвимы, такие как данные cookie, отображаемые браузером, или пользовательские файлы, которые загружаются и отображаются.
 
-<p>Уязвимости SQL-инъекций позволяют злоумышленникам выполнять произвольный код SQL в базе данных, позволяя получать, изменять или удалять данные независимо от разрешений пользователя. Успешная инъекционная атака может подделать удостоверения, создать новые удостоверения с правами администратора, получить доступ ко всем данным на сервере или уничтожить / изменить данные, чтобы сделать их непригодными для использования.</p>
+  Наилучшей защитой от уязвимостей XSS является удаление или отключение любой разметки, которая потенциально может содержать инструкции по запуску кода. Для HTML это включает такие элементы, как \<script>, \<object>, \<embed> и \<link>.
 
-<p>Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.</p>
+  Процесс изменения пользовательских данных, чтобы их нельзя было использовать для запуска сценариев или иным образом влиять на выполнение серверного кода, называется очисткой ввода. Многие веб-фреймворки автоматически очищают пользовательский ввод от HTML-форм по умолчанию.
 
-<p>Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:</p>
+### SQL injection
 
-<pre class="brush: sql">statement = "SELECT * FROM users WHERE name = '" + <strong>userName</strong> + "';"</pre>
+Уязвимости SQL-инъекций позволяют злоумышленникам выполнять произвольный код SQL в базе данных, позволяя получать, изменять или удалять данные независимо от разрешений пользователя. Успешная инъекционная атака может подделать удостоверения, создать новые удостоверения с правами администратора, получить доступ ко всем данным на сервере или уничтожить / изменить данные, чтобы сделать их непригодными для использования.
 
-<p>Если пользователь указывает реальное имя, оператор будет работать так, как задумано. Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.</p>
+Типы внедрения SQL включают внедрение SQL на основе ошибок, внедрение SQL на основе логических ошибок и внедрение SQL на основе времени.
 
-<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't</strong>';
-</pre>
+Эта уязвимость присутствует, если пользовательский ввод, который передаётся в базовый оператор SQL, может изменить смысл оператора. Например, следующий код предназначен для перечисления всех пользователей с определённым именем (userName), которое было предоставлено из формы HTML:
 
-<p>Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.</p>
+```sql
+statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+```
 
-<p>Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса. Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.</p>
+Если пользователь указывает реальное имя, оператор будет работать так, как задумано. Однако злонамеренный пользователь может полностью изменить поведение этого оператора SQL на новый оператор в следующем примере, просто указав текст полужирным шрифтом для userName.
 
-<div class="note">
-<p>Примечание. Инструкция SQL обрабатывает символ ' как начало и конец строкового литерала. Поместив обратную косую черту перед этим символом (\ '), мы экранируем символ и говорим SQL вместо этого трактовать его как символ (только часть строки).</p>
-</div>
+```sql
+SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+```
 
-<p>В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).</p>
+Модифицированный оператор создаёт действительный оператор SQL, который удаляет таблицу пользователей и выбирает все данные из таблицы userinfo (которая раскрывает информацию о каждом пользователе). Это работает, потому что первая часть введённого текста (a ';) завершает исходное утверждение.
 
-<pre class="brush: sql">SELECT * FROM users WHERE name = '<strong>a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t'</strong>;
+Чтобы избежать такого рода атак, вы должны убедиться, что любые пользовательские данные, которые передаются в запрос SQL, не могут изменить природу запроса. Один из способов сделать это - экранировать все символы пользовательского ввода, которые имеют особое значение в SQL.
 
-</pre>
+> **Примечание:** Примечание. Инструкция SQL обрабатывает символ ' как начало и конец строкового литерала. Поместив обратную косую черту перед этим символом (\ '), мы экранируем символ и говорим SQL вместо этого трактовать его как символ (только часть строки).
 
-<p>Веб-фреймворки будут часто заботиться о зарезервированных символах для вас. Django, например, гарантирует, что любые пользовательские данные, передаваемые в наборы запросов (модельные запросы), будут экранируются.</p>
+В следующей инструкции мы экранируем символ '. Теперь SQL будет интерпретировать имя как всю строку, выделенную жирным шрифтом (это действительно очень странное имя, но безопасное).
 
-<div class="note">
-<p><strong>Примечание: </strong>этот раздел в значительной степени основан на информации из <a href="https://en.wikipedia.org/wiki/SQL_injection">Wikipedia</a>.</p>
-</div>
+```sql
+SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+```
 
-<h3 id="Подделка_межсайтовых_запросов_CSRF">Подделка межсайтовых запросов (CSRF)</h3>
+Веб-фреймворки будут часто заботиться о зарезервированных символах для вас. Django, например, гарантирует, что любые пользовательские данные, передаваемые в наборы запросов (модельные запросы), будут экранируются.
 
-<p>CSRF-атаки позволяют злоумышленнику выполнять действия, используя учётные данные другого пользователя, без его ведома или согласия.</p>
+> **Примечание:**этот раздел в значительной степени основан на информации из [Wikipedia](https://en.wikipedia.org/wiki/SQL_injection).
 
-<p>Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определённый сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учётную запись, используя HTTP-запрос <code>POST</code>, который включает имя учётной записи и сумму денег. Джон создаёт форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет её по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).</p>
+### Подделка межсайтовых запросов (CSRF)
 
-<p>Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос <code>POST</code>, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошёл ли пользователь в систему и имеет ли разрешение на совершение транзакции.</p>
+CSRF-атаки позволяют злоумышленнику выполнять действия, используя учётные данные другого пользователя, без его ведома или согласия.
 
-<p>В результате любой пользователь, который нажимает кнопку <em>Отправить</em> во время входа на торговый сайт, совершает транзакцию. Джон становится богатым.</p>
+Этот тип атаки лучше всего пояснить на примере. Джон - злоумышленник, который знает, что определённый сайт позволяет пользователям, вошедшим в систему, отправлять деньги на указанную учётную запись, используя HTTP-запрос `POST`, который включает имя учётной записи и сумму денег. Джон создаёт форму, которая включает в себя его банковские реквизиты и сумму денег в виде скрытых полей, и отправляет её по электронной почте другим пользователям сайта (с кнопкой «Отправить», замаскированной под ссылку на сайт «быстрого обогащения»).
 
-<div class="note">
-<p><strong>Примечание: </strong>Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учётным данным). Браузер пользователя сохраняет эту информацию и автоматически включает её во все запросы к соответствующему серверу.</p>
-</div>
+Если пользователь нажимает кнопку отправки, на сервер будет отправлен HTTP-запрос `POST`, содержащий сведения о транзакции и любые файлы cookie на стороне клиента, которые браузер связал с сайтом (добавление связанных файлов cookie сайта в запросы является нормальным поведением браузера). Сервер проверит файлы cookie и использует их, чтобы определить, вошёл ли пользователь в систему и имеет ли разрешение на совершение транзакции.
 
-<p>Один из способов предотвратить этот тип атаки - запросить сервером запросы <code>POST</code>, содержащие секрет, созданный пользователем для конкретного сайта. Секрет будет предоставлен сервером при отправке веб-формы, используемой для переводов. Такой подход не позволяет Джону создать свою собственную форму, потому что он должен знать секрет, который сервер предоставляет пользователю. Даже если он узнает секрет и создаст форму для конкретного пользователя, он больше не сможет использовать ту же форму для атаки на каждого пользователя.</p>
+В результате любой пользователь, который нажимает кнопку _Отправить_ во время входа на торговый сайт, совершает транзакцию. Джон становится богатым.
 
-<p>Веб-фреймворки часто включают такие механизмы предотвращения CSRF.</p>
+> **Примечание:**Уловка здесь в том, что Джону не нужен доступ к файлам cookie пользователя (или учётным данным). Браузер пользователя сохраняет эту информацию и автоматически включает её во все запросы к соответствующему серверу.
 
-<h3 id="Прочие_угрозы">Прочие угрозы</h3>
+Один из способов предотвратить этот тип атаки - запросить сервером запросы `POST`, содержащие секрет, созданный пользователем для конкретного сайта. Секрет будет предоставлен сервером при отправке веб-формы, используемой для переводов. Такой подход не позволяет Джону создать свою собственную форму, потому что он должен знать секрет, который сервер предоставляет пользователю. Даже если он узнает секрет и создаст форму для конкретного пользователя, он больше не сможет использовать ту же форму для атаки на каждого пользователя.
 
-<p>Другие распространённые атаки / уязвимости включают:</p>
+Веб-фреймворки часто включают такие механизмы предотвращения CSRF.
 
-<ul>
- <li><a href="https://www.owasp.org/index.php/Clickjacking">Clickjacking</a>. В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учётных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.</li>
- <li><a href="/en-US/docs/Glossary/Distributed_Denial_of_Service">Denial of Service</a> (DoS). DoS обычно достигается за счёт наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объёмы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).</li>
- <li><a href="https://en.wikipedia.org/wiki/Directory_traversal_attack">Directory Traversal</a> (Файл и раскрытие). В этой атаке злоумышленник пытается получить доступ к частям файловой системы веб-сервера, к которым у него не должно быть доступа. Эта уязвимость возникает, когда пользователь может передавать имена файлов, содержащие символы навигации файловой системы (например, <code>../../</code>). Решение состоит в том, чтобы очищать ввод перед его использованием.</li>
- <li><a href="https://en.wikipedia.org/wiki/File_inclusion_vulnerability">File Inclusion</a>. В этой атаке пользователь может "случайно" указать файл для отображения или выполнения в данных, передаваемых на сервер. После загрузки этот файл может выполняться на веб-сервере или на стороне клиента (что приводит к XSS-атаке). Решение состоит в том, чтобы дезинфицировать ввод перед его использованием.</li>
- <li><a href="https://www.owasp.org/index.php/Command_Injection">Внедрение команд</a>. Атаки с внедрением команд позволяют злоумышленнику выполнять произвольные системные команды в операционной системе хоста. Решение состоит в том, чтобы дезинфицировать вводимые пользователем данные до того, как их можно будет использовать в системных вызовах.</li>
-</ul>
+### Прочие угрозы
 
-<p>Полный список угроз безопасности веб-сайтов см. <a href="https://en.wikipedia.org/wiki/Category:Web_security_exploits">Category: Web security exploits</a> (Wikipedia) и <a href="https://www.owasp.org/index.php/Category:Attack">Category: Attack</a> (Open Web Application Security Project).</p>
+Другие распространённые атаки / уязвимости включают:
 
-<h2 id="Несколько_ключевых_сообщений">Несколько ключевых сообщений</h2>
+- [Clickjacking](https://www.owasp.org/index.php/Clickjacking). В этой атаке злоумышленник перехватывает клики, предназначенные для видимого сайта верхнего уровня, и направляет их на скрытую ниже страницу. Этот метод можно использовать, например, для отображения законного сайта банка, но захвата учётных данных для входа в невидимый {{htmlelement("iframe")}} , контролируемый злоумышленником. Clickjacking также можно использовать для того, чтобы заставить пользователя нажать кнопку на видимом сайте, но при этом на самом деле невольно нажимать совершенно другую кнопку. В качестве защиты ваш сайт может предотвратить встраивание себя в iframe на другом сайте, установив соответствующие заголовки HTTP.
+- [Denial of Service](/ru/docs/Glossary/Distributed_Denial_of_Service) (DoS). DoS обычно достигается за счёт наводнения целевого сайта поддельными запросами, так что доступ к сайту нарушается для законных пользователей. Запросы могут быть просто многочисленными или по отдельности потреблять большие объёмы ресурсов (например, медленное чтение или загрузка больших файлов). Защита от DoS обычно работает, выявляя и блокируя «плохой» трафик, пропуская при этом легитимные сообщения. Эти средства защиты обычно расположены перед веб-сервером или на нем (они не являются частью самого веб-приложения).
+- [Directory Traversal](https://en.wikipedia.org/wiki/Directory_traversal_attack) (Файл и раскрытие). В этой атаке злоумышленник пытается получить доступ к частям файловой системы веб-сервера, к которым у него не должно быть доступа. Эта уязвимость возникает, когда пользователь может передавать имена файлов, содержащие символы навигации файловой системы (например, `../../`). Решение состоит в том, чтобы очищать ввод перед его использованием.
+- [File Inclusion](https://en.wikipedia.org/wiki/File_inclusion_vulnerability). В этой атаке пользователь может "случайно" указать файл для отображения или выполнения в данных, передаваемых на сервер. После загрузки этот файл может выполняться на веб-сервере или на стороне клиента (что приводит к XSS-атаке). Решение состоит в том, чтобы дезинфицировать ввод перед его использованием.
+- [Внедрение команд](https://www.owasp.org/index.php/Command_Injection). Атаки с внедрением команд позволяют злоумышленнику выполнять произвольные системные команды в операционной системе хоста. Решение состоит в том, чтобы дезинфицировать вводимые пользователем данные до того, как их можно будет использовать в системных вызовах.
 
-<p>Почти все эксплойты безопасности, описанные в предыдущих разделах, успешны, когда веб-приложение доверяет данным из браузера. Что бы вы ни делали для повышения безопасности своего веб-сайта, вы должны дезинфицировать все данные, исходящие от пользователей, прежде чем они будут отображаться в браузере, использоваться в запросах SQL или передаваться в вызов операционной системы или файловой системы.</p>
+Полный список угроз безопасности веб-сайтов см. [Category: Web security exploits](https://en.wikipedia.org/wiki/Category:Web_security_exploits) (Wikipedia) и [Category: Attack](https://www.owasp.org/index.php/Category:Attack) (Open Web Application Security Project).
 
-<div class="warning">
-<p>Внимание! Самый важный урок, который вы можете извлечь о безопасности веб-сайтов: <strong>никогда не доверяйте данным из браузера</strong>. Это включает, помимо прочего, данные в параметрах URL-адресов запросов <code>GET</code>, запросов <code>POST</code>, заголовков HTTP и файлов cookie, а также файлов, загруженных пользователем. Всегда проверяйте и дезинфицируйте все входящие данные. Всегда предполагайте худшее!</p>
-</div>
+## Несколько ключевых сообщений
 
-<p>Вы можете предпринять ряд других конкретных шагов:</p>
+Почти все эксплойты безопасности, описанные в предыдущих разделах, успешны, когда веб-приложение доверяет данным из браузера. Что бы вы ни делали для повышения безопасности своего веб-сайта, вы должны дезинфицировать все данные, исходящие от пользователей, прежде чем они будут отображаться в браузере, использоваться в запросах SQL или передаваться в вызов операционной системы или файловой системы.
 
-<ul>
- <li>Используйте более эффективное управление паролями. Поощряйте регулярную смену надёжных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).</li>
- <li>Настройте свой веб-сервер для использования <a href="/en-US/docs/Glossary/https">HTTPS</a> и <a href="/en-US/docs/Web/Security/HTTP_strict_transport_security">HTTP Strict Transport Security</a> (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учётные данные для входа, файлы cookie, данные запросов <code>POST</code> и информация заголовка не будут легко доступны для злоумышленников.</li>
- <li>Следите за наиболее популярными угрозами (<a href="https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project">текущий список OWASP находится здесь</a>) и в первую очередь устраняйте наиболее распространённые уязвимости.</li>
- <li>Используйте <a href="https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools">инструменты сканирования уязвимостей</a>, чтобы выполнить автоматическое тестирование безопасности на вашем сайте. Позже ваш очень успешный веб-сайт может также обнаруживать ошибки, предлагая вознаграждение за обнаружение ошибок, как это <a href="https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/">делает здесь</a> Mozilla.</li>
- <li>Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространённый шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.</li>
-</ul>
+> **Предупреждение:** Внимание! Самый важный урок, который вы можете извлечь о безопасности веб-сайтов: **никогда не доверяйте данным из браузера**. Это включает, помимо прочего, данные в параметрах URL-адресов запросов `GET`, запросов `POST`, заголовков HTTP и файлов cookie, а также файлов, загруженных пользователем. Всегда проверяйте и дезинфицируйте все входящие данные. Всегда предполагайте худшее!
 
-<p>Веб-фреймворки могут помочь смягчить многие из наиболее распространённых уязвимостей.</p>
+Вы можете предпринять ряд других конкретных шагов:
 
-<h2 id="Резюме">Резюме</h2>
+- Используйте более эффективное управление паролями. Поощряйте регулярную смену надёжных паролей. Рассмотрите возможность двухфакторной аутентификации для вашего сайта, чтобы в дополнение к паролю пользователь должен был ввести другой код аутентификации (обычно тот, который доставляется через какое-то физическое оборудование, которое будет иметь только пользователь, например, код в SMS, отправленном на его телефон).
+- Настройте свой веб-сервер для использования [HTTPS](/ru/docs/Glossary/https) и [HTTP Strict Transport Security](/ru/docs/Web/Security/HTTP_strict_transport_security) (HSTS). HTTPS шифрует данные, передаваемые между вашим клиентом и сервером. Это гарантирует, что учётные данные для входа, файлы cookie, данные запросов `POST` и информация заголовка не будут легко доступны для злоумышленников.
+- Следите за наиболее популярными угрозами ([текущий список OWASP находится здесь](https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project)) и в первую очередь устраняйте наиболее распространённые уязвимости.
+- Используйте [инструменты сканирования уязвимостей](https://www.owasp.org/index.php/Category:Vulnerability_Scanning_Tools), чтобы выполнить автоматическое тестирование безопасности на вашем сайте. Позже ваш очень успешный веб-сайт может также обнаруживать ошибки, предлагая вознаграждение за обнаружение ошибок, как это [делает здесь](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/) Mozilla.
+- Храните и отображайте только те данные, которые вам нужны. Например, если ваши пользователи должны хранить конфиденциальную информацию, такую как данные кредитной карты, отображайте часть номера карты только для того, чтобы он мог быть идентифицирован пользователем, и недостаточно, чтобы его мог скопировать злоумышленник и использовать на другом сайте. Самый распространённый шаблон в настоящее время - отображение только последних 4 цифр номера кредитной карты.
 
-<p>В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространённых угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.</p>
+Веб-фреймворки могут помочь смягчить многие из наиболее распространённых уязвимостей.
 
-<p>Этой статьёй вы подошли к концу <a href="/en-US/docs/Learn/Server-side/First_steps">этого модуля</a>, охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.</p>
+## Резюме
 
-<p>{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}</p>
+В этой статье объясняется концепция веб-безопасности и некоторые из наиболее распространённых угроз, от которых ваш веб-сайт должен пытаться защититься. Самое главное, вы должны понимать, что веб-приложение не может доверять никаким данным из веб-браузера. Все пользовательские данные должны быть очищены перед отображением или использованием в SQL-запросах и вызовах файловой системы.
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+Этой статьёй вы подошли к концу [этого модуля](/ru/docs/Learn/Server-side/First_steps), охватывающего ваши первые шаги в программировании на стороне сервера. Мы надеемся, что вам понравилось изучать эти фундаментальные концепции, и теперь вы готовы выбрать веб-платформу и начать программировать.
 
-<ul>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Introduction">Введение в серверную часть</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview">Обзор технологии клиент-сервер</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Web_frameworks">Серверные веб-фреймворки</a></li>
- <li><a href="/en-US/docs/Learn/Server-side/First_steps/Website_security">Безопасность веб-сайта</a></li>
-</ul>
+{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+
+## В этом модуле
+
+- [Введение в серверную часть](/ru/docs/Learn/Server-side/First_steps/Introduction)
+- [Обзор технологии клиент-сервер](/ru/docs/Learn/Server-side/First_steps/Client-Server_overview)
+- [Серверные веб-фреймворки](/ru/docs/Learn/Server-side/First_steps/Web_frameworks)
+- [Безопасность веб-сайта](/ru/docs/Learn/Server-side/First_steps/Website_security)
diff --git a/files/ru/learn/server-side/index.md b/files/ru/learn/server-side/index.md
index 95d5edbfd0b8fc..86b3364acc70cb 100644
--- a/files/ru/learn/server-side/index.md
+++ b/files/ru/learn/server-side/index.md
@@ -14,41 +14,37 @@ tags:
   - TopicStub
 translation_of: Learn/Server-side
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary"><strong>Тема<em> Динамические веб-сайты </em></strong>– <em><strong>серверное программирование</strong></em> состоит из ряда модулей, рассматривающих создание динамических веб-сайтов; сайтов, которые доставляют персонализированную информацию в ответ на HTTP запрос. Этот модуль предоставляет общее введение в серверное программирование, наряду со специальными руководствами начального уровня о том, как использовать Django (Python) и Express (Node.js/JavaScript) веб-фреймворки для создания простых приложений.</p>
+**Тема _Динамические веб-сайты_ **– _**серверное программирование**_ состоит из ряда модулей, рассматривающих создание динамических веб-сайтов; сайтов, которые доставляют персонализированную информацию в ответ на HTTP запрос. Этот модуль предоставляет общее введение в серверное программирование, наряду со специальными руководствами начального уровня о том, как использовать Django (Python) и Express (Node.js/JavaScript) веб-фреймворки для создания простых приложений.
 
-<p>Подавляющее большинство веб-сайтов используют какую-либо из серверных технологий для динамического отображения различных требуемых данных. К примеру, вообразите себе сколь много товаров доступны на Amazon, и представьте как много постов расположено на  Facebook? Отображение всех их посредством отдельных статических страниц было бы крайне неэффективно, вместо этого подобные сайты используют шаблоны (созданные из <a href="/ru/docs/Learn/HTML">HTML</a>, <a href="/ru/docs/Learn/CSS">CSS</a>, и <a href="/ru/docs/Learn/JavaScript">JavaScript</a>), и затем динамически обновляют данные, отображаемые внутри этих шаблонов, когда это необходимо , т.е. когда вы хотите увидеть другой товар на Amazon.</p>
+Подавляющее большинство веб-сайтов используют какую-либо из серверных технологий для динамического отображения различных требуемых данных. К примеру, вообразите себе сколь много товаров доступны на Amazon, и представьте как много постов расположено на Facebook? Отображение всех их посредством отдельных статических страниц было бы крайне неэффективно, вместо этого подобные сайты используют шаблоны (созданные из [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript)), и затем динамически обновляют данные, отображаемые внутри этих шаблонов, когда это необходимо , т.е. когда вы хотите увидеть другой товар на Amazon.
 
-<p>В современном мире веб-разработки крайне рекомендуется изучить разработку на стороне сервера.</p>
+В современном мире веб-разработки крайне рекомендуется изучить разработку на стороне сервера.
 
-<h2 id="Программа_обучения">Программа обучения</h2>
+## Программа обучения
 
-<p>Начинать с серверного программирования обычно легче, чем с разработки на стороне клиента, поскольку динамические веб-сайты склонны производить множество однообразных операций (извлекать данные из базы данных и помещать их на странице, подтверждать пользовательский ввод и сохранять его в базе данных, проверять пользовательские права и выполнение входа, и.т.д.) и сконструированы с использованием веб-фреймворков, которые выполняют эти и другие привычные веб-серверу операции с лёгкостью.</p>
+Начинать с серверного программирования обычно легче, чем с разработки на стороне клиента, поскольку динамические веб-сайты склонны производить множество однообразных операций (извлекать данные из базы данных и помещать их на странице, подтверждать пользовательский ввод и сохранять его в базе данных, проверять пользовательские права и выполнение входа, и.т.д.) и сконструированы с использованием веб-фреймворков, которые выполняют эти и другие привычные веб-серверу операции с лёгкостью.
 
-<p>Общее понимание концепций программирования (или определённого программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".</p>
+Общее понимание концепций программирования (или определённого программного языка) будет полезным, но не обязательным. Сходным образом, опыт программирования на клиентской стороне не требуется, но базовое знание поможет вам успешнее взаимодействовать с разработчиками клиентской стороны веб-приложения - "фронтенда".
 
-<p>Вам потребуется понимать "как работает веб". Мы рекомендуем вам сначала ознакомиться с темами:</p>
+Вам потребуется понимать "как работает веб". Мы рекомендуем вам сначала ознакомиться с темами:
 
-<ul>
- <li><a href="/ru/docs/Learn/Что_такое_веб_сервер">Что такое веб-сервер</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/What_software_do_I_need">Какое ПО мне нужно для построения веб-сайта?</a></li>
- <li><a href="/en-US/docs/Learn/Common_questions/Upload_files_to_a_web_server">Как заливать файлы на веб-сервер?</a></li>
-</ul>
+- [Что такое веб-сервер](/ru/docs/Learn/Что_такое_веб_сервер)
+- [Какое ПО мне нужно для построения веб-сайта?](/ru/docs/Learn/Common_questions/What_software_do_I_need)
+- [Как заливать файлы на веб-сервер?](/ru/docs/Learn/Common_questions/Upload_files_to_a_web_server)
 
-<p>С этим базовым набором знаний вы будете готовы освоить модули в этой секции.</p>
+С этим базовым набором знаний вы будете готовы освоить модули в этой секции.
 
-<h2 id="Модули">Модули</h2>
+## Модули
 
-<p>Эта тема состоит из следующих модулей. Начинайте с самого первого модуля, а затем переходите на выбор к любому из двух следующих, рассматривающих работу с парой популярных серверных языков с использованием соответствующих веб-фреймворков. </p>
+Эта тема состоит из следующих модулей. Начинайте с самого первого модуля, а затем переходите на выбор к любому из двух следующих, рассматривающих работу с парой популярных серверных языков с использованием соответствующих веб-фреймворков.
 
-<dl>
- <dt><a href="/ru/docs/Learn/Server-side/First_steps">Первые шаги в программировании веб-сайтов на стороне сервера</a></dt>
- <dd>Этот модуль посвящён информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.</dd>
- <dt><a href="/en-US/docs/Learn/Server-side/Django">Веб-фреймворк Django (Python)</a></dt>
- <dd>Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Этот модуль объяснит почему Django настолько хороший серверный веб-фреймворк, как установить среду разработки и как с его помощью можно выполнять привычные задачи.</dd>
- <dt><a href="/ru/docs/Learn/Server-side/Express_Nodejs">Веб-фреймворк Express (Node.js/JavaScript)</a></dt>
- <dd>Express - популярный веб-фреймворк, написанный на JavaScript и размещённый в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развёртывания.</dd>
- <dt><a href="https://developer.mozilla.org/ru/docs/Learn/Server-side/Node_server_without_framework">Сервер на Node без фреймворков</a></dt>
- <dd>В этой статье представлен простой статический файловый сервер, построенный с использованием чистого Node.js, для тех из вас, кто не хочет использовать фреймворк.</dd>
-</dl>
+- [Первые шаги в программировании веб-сайтов на стороне сервера](/ru/docs/Learn/Server-side/First_steps)
+  - : Этот модуль посвящён информации о технологиях программирования веб-сайтов на стороне сервера, попутно отвечая и на фундаментальные вопросы о серверном программировании — "что это такое", "чем оно отличается от программирования на стороне клиента", и "почему оно так востребовано" — и обозревая некоторые из наиболее популярных серверных веб-фреймворков, а также объясняя как выбрать подходящий для вашего сайта. Напоследок мы организуем вводный раздел о безопасности веб-сервера.
+- [Веб-фреймворк Django (Python)](/ru/docs/Learn/Server-side/Django)
+  - : Django является чрезвычайно популярным и полнофункциональным серверным веб-фреймворком, написанным на Python. Этот модуль объяснит почему Django настолько хороший серверный веб-фреймворк, как установить среду разработки и как с его помощью можно выполнять привычные задачи.
+- [Веб-фреймворк Express (Node.js/JavaScript)](/ru/docs/Learn/Server-side/Express_Nodejs)
+  - : Express - популярный веб-фреймворк, написанный на JavaScript и размещённый в среде окружения node.js. Модуль объясняет некоторые из ключевых преимуществ этой структуры, как настроить среду разработки и как выполнять общие задачи для веб-разработки и развёртывания.
+- [Сервер на Node без фреймворков](/ru/docs/Learn/Server-side/Node_server_without_framework)
+  - : В этой статье представлен простой статический файловый сервер, построенный с использованием чистого Node.js, для тех из вас, кто не хочет использовать фреймворк.
diff --git a/files/ru/learn/server-side/node_server_without_framework/index.md b/files/ru/learn/server-side/node_server_without_framework/index.md
index b2b9a117276252..355817f4b20f29 100644
--- a/files/ru/learn/server-side/node_server_without_framework/index.md
+++ b/files/ru/learn/server-side/node_server_without_framework/index.md
@@ -3,27 +3,26 @@ title: Node.js server without a framework
 slug: Learn/Server-side/Node_server_without_framework
 translation_of: Learn/Server-side/Node_server_without_framework
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Здесь вы найдёте описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .</p>
+Здесь вы найдёте описание простого статического сервера, который построен сугубо на Node.js без использования какого-либо фреймворка .
 
-<p><a href="https://nodejs.org/en/">Node.js</a> может использовать множество фреймворков, которые могут помочь создать сервер</p>
+[Node.js](https://nodejs.org/en/) может использовать множество фреймворков, которые могут помочь создать сервер
 
-<p>Наиболее популярные:</p>
+Наиболее популярные:
 
-<ul>
- <li><a href="http://expressjs.com/">Express</a>: Один из наиболее популярных фреймворков.</li>
- <li><a href="https://hapijs.com/">Hapi.js</a>: Набирающий популярность фреймворк для построения приложений и сервисов</li>
- <li><a href="https://www.totaljs.com/">Total</a>:  Этот фреймворк имеет богатую функциональность и не требует каких-либо дополнительных фреймворков или библиотек.</li>
-</ul>
+- [Express](http://expressjs.com/): Один из наиболее популярных фреймворков.
+- [Hapi.js](https://hapijs.com/): Набирающий популярность фреймворк для построения приложений и сервисов
+- [Total](https://www.totaljs.com/): Этот фреймворк имеет богатую функциональность и не требует каких-либо дополнительных фреймворков или библиотек.
 
-<p>Конечно-же эти фреймворки могут и не подойти для каждого конкретного случая. Именно поэтому нужно знать как все работает изнутри, чтобы быть готовым сделать свой собственный сервер без каких-либо дополнительных зависимостей.</p>
+Конечно-же эти фреймворки могут и не подойти для каждого конкретного случая. Именно поэтому нужно знать как все работает изнутри, чтобы быть готовым сделать свой собственный сервер без каких-либо дополнительных зависимостей.
 
-<h2 id="Пример">Пример</h2>
+## Пример
 
-<p>Вот так выглядит  статический сервер на Node.js:</p>
+Вот так выглядит статический сервер на Node.js:
 
-<pre class="brush: js">var http = require('http');
+```js
+var http = require('http');
 var fs = require('fs');
 var path = require('path');
 
@@ -76,8 +75,9 @@ http.createServer(function (request, response) {
     });
 
 }).listen(8125);
-console.log('Server running at http://127.0.0.1:8125/');</pre>
+console.log('Server running at http://127.0.0.1:8125/');
+```
 
-<h2 id="Задание">Задание</h2>
+## Задание
 
-<p>Попробуйте добавить в этот код описание как работает этот код. Как вариант ещё можно добавить функциональность динамических запросов.</p>
+Попробуйте добавить в этот код описание как работает этот код. Как вариант ещё можно добавить функциональность динамических запросов.
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
index 3f8a6681749e6c..2a0cc4184fd257 100644
--- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
+++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_getting_started/index.md
@@ -1,8 +1,7 @@
 ---
 title: Начало работы с Angular
-slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
-original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
-translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
+slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
 tags:
   - Новички
   - Фреймворки
@@ -11,165 +10,145 @@ tags:
   - Изучение
   - client-side
   - Angular
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
+original_slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
 ---
-<div>{{LearnSidebar}}</div>
-
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
-
-<p class="summary">Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.</p>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Понимание основ <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, знание <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терминала/командной строки</a>.
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы.</td>
-  </tr>
- </tbody>
-</table>
+Пришло время взглянуть на фреймворк от Google — Angular, еще один популярный вариант, с которым вы часто будете сталкиваться. В этой статье мы рассмотрим, что Angular может предложить, установим необходимые компоненты, запустим пример приложения, и разберём базовую архитектуру Angular.
 
-<h2 id="what_is_angular">Что такое Angular?</h2>
+| Необходимые условия: | Понимание основ [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript), знание [терминала/командной строки](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line). |
+| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Настроить локальную среду разработки Angular, создать стартовое приложение, и понять основные принципы работы.                                                                                                                         |
 
-<p>Angular — это платформа для разработки, написанная на <a href="https://www.typescriptlang.org/">TypeScript</a>. Как платформа Angular включает:</p>
+## Что такое Angular?
 
-<ul>
-  <li>Основанный на компонентах фреймворк для создания масштабируемых веб-приложений</li>
-  <li>Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.</li>
-  <li>Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код</li>
-</ul>
+Angular — это платформа для разработки, написанная на [TypeScript](https://www.typescriptlang.org/). Как платформа Angular включает:
 
-<p>Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.</p>
+- Основанный на компонентах фреймворк для создания масштабируемых веб-приложений
+- Набор хорошо интегрированных библиотек, охватывающих широкий спектр функций: маршрутизация, управление формами, клиент-серверное взаимодействие и т.д.
+- Набор инструментов разработчика, которые помогут вам разрабатывать, собирать, тестировать и обновлять ваш код
 
-<p>Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI - это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:</p>
+Когда вы создаете приложение с помощью Angular, вы пользуетесь преимуществами платформы, которая может масштабироваться от проекта, который разрабатывает один человек, до приложений корпоративного уровня. Angular разработан, чтобы максимально упростить обновление, поэтому вы можете использовать последние разработки с минимумом усилий. А самое замечательное то, что экосистема Angular состоит из огромного сообщества, включающего более чем 1.7 миллиона разработчиков, авторов библиотек и создателей контента.
 
-<table class="standard-table">
-<tr>
-<td><code><a href="https://angular.io/cli/build">ng build</a></code></td>
-<td>Компилирует Angular-приложение в выходной каталог.</td>
-</tr>
-<tr>
-<td><code><a href="https://angular.io/cli/serve">ng serve</a></code></td>
-<td>Собирает и запускает ваше приложение, пересобирая его при изменении файлов.</td>
-</tr>
-<tr>
-<td><code><a href="https://angular.io/cli/generate">ng generate</a></code></td>
-<td>Генерирует или изменяет файлы на основе схематиков</td>
-</tr>
-<tr>
-<td><code><a href="https://angular.io/cli/test">ng test</a></code></td>
-<td>Запускает модульные тесты для заданного проекта.</td>
-</tr>
-<tr>
-<td><code><a href="https://angular.io/cli/e2e">ng e2e</a></code></td>
-<td>Собирает и запускает Angular-приложение, запуская затем сквозные тесты.</td>
-</tr>
-</table>
+Прежде, чем приступить к изучению платформы Angular, сначала стоит познакомиться с Angular CLI. Angular CLI - это быстрый, простой и рекомендуемый способ разработки Angular-приложений. Angular CLI облегчает выполнение ряда задач. Вот некоторые из них:
 
-<p>Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.</p>
+| [`ng build`](https://angular.io/cli/build)       | Компилирует Angular-приложение в выходной каталог.                          |
+| ------------------------------------------------ | --------------------------------------------------------------------------- |
+| [`ng serve`](https://angular.io/cli/serve)       | Собирает и запускает ваше приложение, пересобирая его при изменении файлов. |
+| [`ng generate`](https://angular.io/cli/generate) | Генерирует или изменяет файлы на основе схематиков                          |
+| [`ng test`](https://angular.io/cli/test)         | Запускает модульные тесты для заданного проекта.                            |
+| [`ng e2e`](https://angular.io/cli/e2e)           | Собирает и запускает Angular-приложение, запуская затем сквозные тесты.     |
 
-<h2 id="what-you-ll-build">Что вы создадите</h2>
+Скоро вы сами убедитесь, что Angular CLI является полезным инструментом для создания ваших приложений.
 
-<p>Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.</p>
+## Что вы создадите
 
-<h2 id="prerequisites">Необходимые условия</h2>
+Эта серия руководств проведёт вас через создание приложения со списком дел (to-do list). С помощью этого приложения вы узнаете, как использовать Angular для управления, редактирования, добавления, удаления и фильтрации элементов.
 
-<p>Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:</p>
+## Необходимые условия
 
-<ul>
-  <li><p><strong>Node.js</strong></p>
-    <p>Angular требует <a href="https://nodejs.org/about/releases">текущую, последнюю LTS, или поддерживаемую LTS</a> версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ <code>engines</code> в <a href="https://unpkg.com/@angular/cli/package.json">package.json</a> файле.</p>
-    <p>Для получения дополнительной информации о установке Node.js смотрите <a href="https://nodejs.org" title="Nodejs.org">nodejs.org</a>.
-Если вы не знаете какая версия Node.js установлена в вашей системе, запустите <code>node -v</code> в терминале.</p>
-  </li>
-  <li><p><strong>пакетный менеджер npm</strong></p>
-    <p>Angular, Angular CLI, Angular приложения зависят от <a href="https://docs.npmjs.com/getting-started/what-is-npm">npm пакетов</a> которые обеспечивают множество функций.
-    Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm.
-    Это руководство использует <a href="https://docs.npmjs.com/cli/install">npm</a> через интерфейс командной строки, который устанавливается с <code>Node.js</code> по умолчанию.
-    Для того, чтобы узнать какая версия npm установлена, запустите <code>npm -v</code> в терминале.</p>
-  </li>
-</ul>
+Чтобы установить Angular в вашей локальной системе, вам понадобится следующее:
 
-<h2 id="set_up_your_application">Настройка приложения</h2>
+- **Node.js**
 
-<p>Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular.
-Для установки Angular CLI, запустите следующие команды в терминале:</p>
+  Angular требует [текущую, последнюю LTS, или поддерживаемую LTS](https://nodejs.org/about/releases) версию Node.js. Для получения информации о конкретных требованиях к версии смотрите ключ `engines` в [package.json](https://unpkg.com/@angular/cli/package.json) файле.
 
-<pre class="brush: js">npm install -g @angular/cli</pre>
+  Для получения дополнительной информации о установке Node.js смотрите [nodejs.org](https://nodejs.org "Nodejs.org").
+  Если вы не знаете какая версия Node.js установлена в вашей системе, запустите `node -v` в терминале.
 
-<p>Команды Angular CLI начинаются с <code>ng</code>, за которым следует то, что вы хотите CLI сделал.
-В рабочей директории (например, Desktop) выполните команду <code>ng new</code>, чтобы создать новое приложение под названием <code>todo</code>:</p>
+- **пакетный менеджер npm**
 
-<pre class="brush: js">ng new todo --routing=false --style=css</pre>
+  Angular, Angular CLI, Angular приложения зависят от [npm пакетов](https://docs.npmjs.com/getting-started/what-is-npm) которые обеспечивают множество функций.
+  Для загрузки и установки npm пакетов, вам необходим пакетный менеджер npm.
+  Это руководство использует [npm](https://docs.npmjs.com/cli/install) через интерфейс командной строки, который устанавливается с `Node.js` по умолчанию.
+  Для того, чтобы узнать какая версия npm установлена, запустите `npm -v` в терминале.
 
-<p>В текущей директории команда <code>ng new</code> создаст необходимое для работы маленькое Angular-приложение.
-Дополнительные флаги, <code>--routing</code> и <code>--style</code>, определяют, как обрабатывать навигацию и стили в приложении.
-В этом руководстве эти функции будут описаны позже.</p>
+## Настройка приложения
 
-<p>Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".</p>
+Вы можете использовать Angular CLI, запуская команды в терминале для генерации, сборки, тестирования, и развертывания приложений на Angular.
+Для установки Angular CLI, запустите следующие команды в терминале:
 
-<p>Перейдите в ваш новый проект с помощью команды <code>cd</code>:</p>
+```js
+npm install -g @angular/cli
+```
 
-<pre class="brush: js">cd todo</pre>
+Команды Angular CLI начинаются с `ng`, за которым следует то, что вы хотите CLI сделал.
+В рабочей директории (например, Desktop) выполните команду `ng new`, чтобы создать новое приложение под названием `todo`:
 
-<p>Запустите ваше приложение <code>todo</code>, выполнив команду <code>ng serve</code>:</p>
+```js
+ng new todo --routing=false --style=css
+```
 
-<pre class="brush: js">ng serve</pre>
+В текущей директории команда `ng new` создаст необходимое для работы маленькое Angular-приложение.
+Дополнительные флаги, `--routing` и `--style`, определяют, как обрабатывать навигацию и стили в приложении.
+В этом руководстве эти функции будут описаны позже.
 
-<p>Когда CLI спросить про аналитику, ответьте <code>no</code>.</p>
+Если вам будет предложено применить строгую проверку типов, вы можете ответить "yes".
 
-<p>В браузере перейдите на <a href="http://localhost:4200/">http://localhost:4200/</a>, и вы увидите ваше новое приложение.
-Если измените любой из исходных файлов, приложение автоматически перезагрузится.</p>
+Перейдите в ваш новый проект с помощью команды `cd`:
 
-<p>Пока выполняется <code>ng serve</code>, запускать другие команды можно в новой вкладке или окне терминала.
-Если вы захотите остановить работу приложения, нажмите <code>Ctrl+c</code> в терминале, где оно было запущено.</p>
+```js
+cd todo
+```
 
-<h2 id="get_familiar_with_your_angular_application">Знакомство с вашим Angular приложением</h2>
+Запустите ваше приложение `todo`, выполнив команду `ng serve`:
 
-<p>Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в <code>src/app</code>.
-Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:</p>
+```js
+ng serve
+```
 
-<ol>
-  <li><code>app.module.ts</code>: определяет файлы, которые использует приложение.
-Этот файл действует как центральный узел для других файлов в вашем приложении.</li>
-  <li><code>app.component.ts</code>: Определяет класс, который содержит логику основной страницы приложения.</li>
-  <li><code>app.component.html</code>: Содержит HTML для <code>AppComponent</code>. Содержимое этого файла также называется шаблоном.
-Шаблон определяет представление или то, что вы видите в браузере.</li>
-  <li><code>app.component.css</code>: Содержит стили для <code>AppComponent</code>. Этот файл используется, когда вам нужно стилизовать определённый компонент, а не всё приложение.</li>
-</ol>
+Когда CLI спросить про аналитику, ответьте `no`.
 
-<p>Компонент Angular состоит из трех основных частей: шаблон, стили, и класс.
-Например, <code>app.component.ts</code>, <code>app.component.html</code>, и <code>app.component.css</code> вместе составляют <code>AppComponent</code>.
-Эта структура разделяет логику, представление и стили, чтобы приложение было более масштабируемым и удобным в обслуживании.</p>
+В браузере перейдите на <http://localhost:4200/>, и вы увидите ваше новое приложение.
+Если измените любой из исходных файлов, приложение автоматически перезагрузится.
 
-<p>Таким образом, с самого начала вы используете лучшие приёмы разработки.</p>
+Пока выполняется `ng serve`, запускать другие команды можно в новой вкладке или окне терминала.
+Если вы захотите остановить работу приложения, нажмите `Ctrl+c` в терминале, где оно было запущено.
 
-<p>Angular CLI также генерирует файл для тестирования компонента <code>app.component.spec.ts</code>, но в это руководство не входит тестирование, поэтому вы можете игнорировать этот файл.</p>
+## Знакомство с вашим Angular приложением
 
-<p>Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.</p>
+Исходные файлы, на которых будет сосредоточено внимание в этом руководстве находится в `src/app`.
+Файлы, генерируемые CLI автоматически, на которые стоит обратить внимание:
 
-<h2 id="the_structure_of_an_angular_application">Структура Angular приложения</h2>
+1.  `app.module.ts`: определяет файлы, которые использует приложение.
+    Этот файл действует как центральный узел для других файлов в вашем приложении.
+2.  `app.component.ts`: Определяет класс, который содержит логику основной страницы приложения.
+3.  `app.component.html`: Содержит HTML для `AppComponent`. Содержимое этого файла также называется шаблоном.
+    Шаблон определяет представление или то, что вы видите в браузере.
+4.  `app.component.css`: Содержит стили для `AppComponent`. Этот файл используется, когда вам нужно стилизовать определённый компонент, а не всё приложение.
 
-<p>Angular построен на TypeScript.
+Компонент Angular состоит из трех основных частей: шаблон, стили, и класс.
+Например, `app.component.ts`, `app.component.html`, и `app.component.css` вместе составляют `AppComponent`.
+Эта структура разделяет логику, представление и стили, чтобы приложение было более масштабируемым и удобным в обслуживании.
+
+Таким образом, с самого начала вы используете лучшие приёмы разработки.
+
+Angular CLI также генерирует файл для тестирования компонента `app.component.spec.ts`, но в это руководство не входит тестирование, поэтому вы можете игнорировать этот файл.
+
+Каждый раз, когда вы генерируете компонент, CLI создает эти четыре файла в каталоге с указанным вами именем.
+
+## Структура Angular приложения
+
+Angular построен на TypeScript.
 TypeScript — это надмножество JavaScript, т.е. любой правильный JavaScript-код будет работать в TypeScript.
-TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.</p>
+TypeScript предлагает типизацию и более лаконичный синтаксис, чем простой JavaScript, который дает вам инструмент для создание более удобного в сопровождении кода и минимизации ошибок.
 
-<p>Компоненты — это строительные блоки Angular-приложений.
-Компоненты включают TypeScript-класс, который имеет декоратор <code>@Component()</code>, HTML-шаблон и стили.</p>
+Компоненты — это строительные блоки Angular-приложений.
+Компоненты включают TypeScript-класс, который имеет декоратор `@Component()`, HTML-шаблон и стили.
 
-<h3 id="the_class">Класс</h3>
+### Класс
 
-<p>Класс — это место, где вы помещаете любую логику, которая нужна вашему компоненту.
+Класс — это место, где вы помещаете любую логику, которая нужна вашему компоненту.
 Этот код должен включать функции, обработчики событий, свойства, и ссылки на сервисы.
-Класс находится в файле с таким именем, как <code>feature.component.ts</code>, где <code>feature</code> это название вашего компонента.
-Итак, у вас могут быть файлы с такими именами как <code>header.component.ts</code>, <code>signup.component.ts</code>, или <code>feed.component.ts</code>.
-Вы создаете компонент с декоратором <code>@Component()</code>, включающий метаданные, которые сообщают Angular расположение HTML- и CSS-файлов.
-Типичный компонент выглядит так:</p>
+Класс находится в файле с таким именем, как `feature.component.ts`, где `feature` это название вашего компонента.
+Итак, у вас могут быть файлы с такими именами как `header.component.ts`, `signup.component.ts`, или `feed.component.ts`.
+Вы создаете компонент с декоратором `@Component()`, включающий метаданные, которые сообщают Angular расположение HTML- и CSS-файлов.
+Типичный компонент выглядит так:
 
-<pre class="brush: js">
+```js
 import { Component } from '@angular/core';
 
 @Component({
@@ -181,51 +160,59 @@ import { Component } from '@angular/core';
 
 export class ItemComponent {
 // ваш код будет тут
-}</pre>
+}
+```
 
-<p>Компонент называется <code>ItemComponent</code>, и имеет селектор <code>app-item</code>.
+Компонент называется `ItemComponent`, и имеет селектор `app-item`.
 Вы можете использовать этот селектор как и обычные HTML-теги, помещая его в другие шаблоны.
 Когда селектор находится в компоненте, браузер отображает шаблон этого компонента.
-Это руководство поможет вам создать два компонента и использовать один в другом.</p>
+Это руководство поможет вам создать два компонента и использовать один в другом.
 
-<p>Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения.
-Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.</p>
+Компонентная модель Angular предлагает надежную инкапсуляцию и интуитивно понятную структуру приложения.
+Компоненты также упрощают модульное тестирование вашего приложения и могут улучшить общую читаемость кода.
 
-<h3 id="the_html_template">HTML-шаблоны</h3>
+### HTML-шаблоны
 
-<p>У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать.
-Шаблон можно задать либо строкой, либо как путь к файлу.</p>
+У каждого компонента есть HTML-шаблон, в котором определяется то, что этот компонент будет отображать.
+Шаблон можно задать либо строкой, либо как путь к файлу.
 
-<p>Для ссылки на внешний HTML-файл, используется свойство <code>templateUrl</code>:</p>
+Для ссылки на внешний HTML-файл, используется свойство `templateUrl`:
 
-<pre class="brush: js">@Component({
+```js
+@Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 
 export class AppComponent {
-}</pre>
+}
+```
 
-<p>Чтобы указать напрямую HTML-код, используется свойство <code>template</code> с обратными кавычками:</p>
+Чтобы указать напрямую HTML-код, используется свойство `template` с обратными кавычками:
 
-<pre class="brush: js">@Component({
+```js
+@Component({
   selector: 'app-root',
-  template: `&lt;h1&gt;Hi!&lt;/h1&gt;`,
+  template: `<h1>Hi!</h1>`,
 })
 
 export class AppComponent {
-}</pre>
+}
+```
 
-<p>Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент.
+Angular расширяет HTML дополнительным синтаксисом, который позволяет вставлять динамические данные в компонент.
 Angular автоматически обновляет DOM, когда состояние компонента изменяется.
-Например, этот синтаксис можно применить для  вставки динамического текста, как показано в следующем примере.</p>
+Например, этот синтаксис можно применить для вставки динамического текста, как показано в следующем примере.
 
-<pre class="brush: html">&lt;h1&gt;\{{ title }}&lt;/h1&gt;</pre>
+```html
+<h1>\{{ title }}</h1>
+```
 
-<p>Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать.
-Значение для <code>title</code> берется из класса компонента:</p>
+Двойные фигурные скобки говорят Angular, что содержимое внутри них нужно интерполировать.
+Значение для `title` берется из класса компонента:
 
-<pre class="brush: js">import { Component } from '@angular/core';
+```js
+import { Component } from '@angular/core';
 
 @Component ({
   selector: 'app-root',
@@ -235,101 +222,99 @@ Angular автоматически обновляет DOM, когда состо
 
 export class AppComponent {
     title = 'To do application';
-}</pre>
+}
+```
 
-<p>Когда приложение загружает компонент и его шаблон, браузер видит следующее:</p>
+Когда приложение загружает компонент и его шаблон, браузер видит следующее:
 
-<pre class="brush: html">&lt;h1&gt;To do application&lt;/h1&gt;
-</pre>
+```html
+<h1>To do application</h1>
+```
 
-<h3 id="styles">Стили</h3>
+### Стили
 
-<p>Компонент может наследовать общие стили приложения из файла <code>styles.css</code> или переопределять их собственными стилями.
-Вы можете писать стили для конкретных компонентов прямо в декораторе <code>@Component()</code> или указывая путь к CSS-файлу.</p>
+Компонент может наследовать общие стили приложения из файла `styles.css` или переопределять их собственными стилями.
+Вы можете писать стили для конкретных компонентов прямо в декораторе `@Component()` или указывая путь к CSS-файлу.
 
-<p>Чтобы включить стили непосредственного в декоратор компонента, используется свойство <code>styles</code>:</p>
+Чтобы включить стили непосредственного в декоратор компонента, используется свойство `styles`:
 
-<pre class="brush: js">@Component({
+```js
+@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styles: ['h1 { color: red; }']
-})</pre>
+})
+```
 
-<p>Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве <code>styleUrls</code>:</p>
+Обычно компонент использует стили определяемые в отельном файле, указанном в свойстве `styleUrls`:
 
-<pre class="brush: js">@Component({
+```js
+@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
-})</pre>
-
-<p>С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.</p>
-
-<h2 id="summary">Резюме</h2>
-
-<p>Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.</p>
-
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
-
-<h2 id="In_this_module">В это модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Введение в клиентские фреймворки</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Основные функции фреймворков</a></li>
- <li>React
-  <ul>
-   <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Начало работы с React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Начало создания приложения списка дел с React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Компоненты React приложения</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Интерактивность React: события и состояние</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Интерактивность React: редактирование, фильтрация, условная отрисовка</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Доступность в React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Ресурсы по React</a></li>
-  </ul>
- </li>
- <li>Ember
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Начало работы с Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Структура Ember приложения и компоненты</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Интерактивность Ember: события, классы и состояние</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Интерактивность Ember: функциональность подвала, условная отрисовка</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Маршрутизация в Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ресурсы по Ember и устранение неполадок</a></li>
-  </ul>
- </li>
- <li>Vue
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Начало работы с Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Создание вашего первого компонента Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Отрисовка списка Vue компонентов</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Добавление новой формы во Vue: события, методы, и модели</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Стилизация Vue компонентов с CSS</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Использование вычисляемых свойств во Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Условная отрисовка во Vue: Редактирование существующих дел</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Управление фокусом во Vue с помощью refs</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Ресурсы по Vue</a></li>
-  </ul>
- </li>
- <li>Svelte
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Начало работы со Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Начинаем приложение списка дел c использованием Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Динамическое поведение в Svelte: работа с переменными и пропсами</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Компоненты Svelte приложения</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Продвинутый Svelte: реактивность, жизненный цикл, доступность</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Работа хранилищами в Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Поддержка TypeScript в Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Развертывание и следующие шаги</a></li>
-  </ul>
- </li>
- <li>Angular
-   <ul>
-    <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Начало работы с Angular</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Начинаем приложение списка дел с использованием Angular</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Стилизация Angular приложения</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Создание компонента элемента (item component)</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Фильтрация списка дел</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Сборка Angular приложений и другие ресурсы</a></li>
-   </ul>
- </li>
-</ul>
+})
+```
+
+С помощью стилей для конкретных компонентов вы можете организовывать свой CSS так, чтобы его было легко поддерживать и переносить.
+
+## Резюме
+
+Это ваше первое знакомство с Angular. На этом этапе всё должно быть настроено и готово к созданию Angular-приложения, а у вас быть базовое представление о том, как работает Angular. В следующей статье мы углубим эти знания и начнем создавать структуру вашего приложения списка дел.
+
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+
+## В это модуле
+
+- [Введение в клиентские фреймворки](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+- [Основные функции фреймворков](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- React
+
+  - [Начало работы с React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - [Начало создания приложения списка дел с React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - [Компоненты React приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - [Интерактивность React: события и состояние](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - [Интерактивность React: редактирование, фильтрация, условная отрисовка](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - [Доступность в React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - [Ресурсы по React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+
+- Ember
+
+  - [Начало работы с Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - [Структура Ember приложения и компоненты](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - [Интерактивность Ember: события, классы и состояние](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - [Интерактивность Ember: функциональность подвала, условная отрисовка](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - [Маршрутизация в Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - [Ресурсы по Ember и устранение неполадок](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+
+- Vue
+
+  - [Начало работы с Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - [Создание вашего первого компонента Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - [Отрисовка списка Vue компонентов](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - [Добавление новой формы во Vue: события, методы, и модели](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - [Стилизация Vue компонентов с CSS](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - [Использование вычисляемых свойств во Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - [Условная отрисовка во Vue: Редактирование существующих дел](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - [Управление фокусом во Vue с помощью refs](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - [Ресурсы по Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+
+- Svelte
+
+  - [Начало работы со Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
+  - [Начинаем приложение списка дел c использованием Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
+  - [Динамическое поведение в Svelte: работа с переменными и пропсами](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
+  - [Компоненты Svelte приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+  - [Продвинутый Svelte: реактивность, жизненный цикл, доступность](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+  - [Работа хранилищами в Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+  - [Поддержка TypeScript в Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+  - [Развертывание и следующие шаги](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
+
+- Angular
+
+  - [Начало работы с Angular](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
+  - [Начинаем приложение списка дел с использованием Angular](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning)
+  - [Стилизация Angular приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling)
+  - [Создание компонента элемента (item component)](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component)
+  - [Фильтрация списка дел](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering)
+  - [Сборка Angular приложений и другие ресурсы](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building)
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md
index 2438db1321ea16..098062ac46b9aa 100644
--- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md
+++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/angular_todo_list_beginning/index.md
@@ -1,8 +1,7 @@
 ---
 title: Начинаем приложение списка дел с использованием Angular
-slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
-original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
-translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
+slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
 tags:
   - Новички
   - Фреймворки
@@ -12,75 +11,70 @@ tags:
   - Angular
   - Компоненты
   - Структура
+translation_of: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
+original_slug: >-
+  Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+Сейчас мы готовы приступить к созданию приложения списка дел с использованием Angular. Готовое приложение будет отображать список дел, позволять редактировать, удалять и добавлять элементы. В этой статье вы познакомитесь со структурой приложения и поработаете над базовым отображением списка дел.
 
-<p>Сейчас мы готовы приступить к созданию приложения списка дел с использованием Angular. Готовое приложение будет отображать список дел, позволять редактировать, удалять и добавлять элементы. В этой статье вы познакомитесь со структурой приложения и поработаете над базовым отображением списка дел. </p>
+| Необходимые условия: | Понимание основ [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript), знание [терминала/командной строки](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line).          |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:                | Создать базовую структуру приложения, сделать так, чтобы оно отображало список дел, и понять фундаментальные концепции Angular: структуру компонентов, совместное использование данных между компонентами и использование циклов вывода данных. |
 
-<table>
- <tbody>
-  <tr>
-    <th scope="row">Необходимые условия:</th>
-    <td>Понимание основ <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, знание <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терминала/командной строки</a>.
-    </td>
-  </tr>
-   <th scope="row">Цель:</th>
-   <td>Создать базовую структуру приложения, сделать так, чтобы оно отображало список дел, и понять фундаментальные концепции Angular: структуру компонентов, совместное использование данных между компонентами и использование циклов вывода данных. </td>
-  </tr>
- </tbody>
-</table>
+## Структура приложения списка дел
 
-<h2 id="the_to_do_application_structure">Структура приложения списка дел</h2>
+Как и в приложении без фреймворка, в Angular-приложении есть `index.html`.
+Тэг `<body>` в `index.html`, содержит специальный Angular-элемент — `<app-root>` — для вставки вашего основного компонента, который включает в себя другие компоненты, которые вы создаете.
+Обычно, вам не нужно работать с `index.html`, вместо этого сфокусируйтесь на работе со специальными элементами вашего приложения — компонентами.
 
-<p>Как и в приложении без фреймворка, в Angular-приложении есть <code>index.html</code>.
-Тэг <code>&lt;body&gt;</code> в <code>index.html</code>, содержит специальный Angular-элемент — <code>&lt;app-root&gt;</code> — для вставки вашего основного компонента, который включает в себя другие компоненты, которые вы создаете.
-Обычно, вам не нужно работать с <code>index.html</code>, вместо этого сфокусируйтесь на работе со специальными элементами вашего приложения — компонентами.</p>
+### Организация приложения с помощью компонентов
 
-<h3 id="organize_your_application_with_components">Организация приложения с помощью компонентов</h3>
+Компоненты — это основной структурный элемент Angular-приложений. Приложение со списком дел состоит из двух компонентов — компонента-основы для вашего приложения и компонента для обработки элементов списка дел.
 
-<p>Компоненты — это основной структурный элемент Angular-приложений. Приложение со списком дел состоит из двух компонентов — компонента-основы для вашего приложения и компонента для обработки элементов списка дел. </p>
+Каждый компонент состоит из класса TypeScript, HTML и CSS. TypeScript транспилируется в JavaScript — это означает, что ваше приложение в конечном итоге преобразуется в JavaScript, но вы можете использовать расширенные функции Typescript и оптимизированный синтаксис.
 
-<p>Каждый компонент состоит из класса TypeScript, HTML и CSS. TypeScript транспилируется в JavaScript — это означает, что ваше приложение в конечном итоге преобразуется в JavaScript, но вы можете использовать расширенные функции Typescript и оптимизированный синтаксис.</p>
+### Динамическое изменение UI с помощью \*ngIf и \*ngFor
 
-<h3 id="dynamically_change_the_ui_with_ngif_and_ngfor">Динамическое изменение UI с помощью *ngIf и *ngFor</h3>
+В этом руководстве также рассматриваются две важные директивы Angular для динамического изменения структуры DOM. Директива похожа на команду, которую вы можете использовать в своем HTML, чтобы повлиять на изменения в вашем приложении.
 
-<p>В этом руководстве также рассматриваются две важные директивы Angular для динамического изменения структуры DOM. Директива похожа на команду, которую вы можете использовать в своем HTML, чтобы повлиять на изменения в вашем приложении.</p>
+Первая директива, рассматриваемая в этом руководстве — это Angular-итератор, `*ngFor`.
+`*ngFor` дает возможность динамически создавать DOM-элементы на основе элементов массива.
 
-<p>Первая директива, рассматриваемая в этом руководстве — это Angular-итератор, <code>*ngFor</code>.
-<code>*ngFor</code> дает возможность динамически создавать DOM-элементы на основе элементов массива.</p>
-
-<p>Вторая директива, которую вы изучите в этом руководстве — это <code>*ngIf</code>.
-Вы можете использовать <code>*ngIf</code> для добавления или удаления элементов из DOM в зависимости от условия.
+Вторая директива, которую вы изучите в этом руководстве — это `*ngIf`.
+Вы можете использовать `*ngIf` для добавления или удаления элементов из DOM в зависимости от условия.
 Например, если пользователи хотят отредактировать элемент в списке дел, вы можете предоставить им средства для редактирования этого элемента.
-Если они не хотят редактировать элемент, вы можете удалить элементы для редактирования. </p>
+Если они не хотят редактировать элемент, вы можете удалить элементы для редактирования.
 
-<h3 id="share_data_between_components">Обмен данными между компонентами</h3>
+### Обмен данными между компонентами
 
-<p>В этом приложении вы работаете с обменом данными между компонентами. Чтобы добавить новый элемент в список дел, главный компонент должен отправить новый элемент второму компоненту. Этот второй компонент управляет элементами и заботится о редактировании, отметке выполненных и удалении элементов.</p>
+В этом приложении вы работаете с обменом данными между компонентами. Чтобы добавить новый элемент в список дел, главный компонент должен отправить новый элемент второму компоненту. Этот второй компонент управляет элементами и заботится о редактировании, отметке выполненных и удалении элементов.
 
-<p>Обмен данными между Angular-компонентами происходит с помощью специальных декораторов, называемых <code>@Input()</code> и <code>@Output()</code>.
-Эти декораторы указывают, что определенные свойства могут получать или отправлять данные. Использование <code>@Output()</code> означает, что вы вызываете событие в одном компоненте, чтобы оповестить другой компонент об изменении данных.</p>
+Обмен данными между Angular-компонентами происходит с помощью специальных декораторов, называемых `@Input()` и `@Output()`.
+Эти декораторы указывают, что определенные свойства могут получать или отправлять данные. Использование `@Output()` означает, что вы вызываете событие в одном компоненте, чтобы оповестить другой компонент об изменении данных.
 
-<h2 id="define_item-">Определение элемента</h2>
+## Определение элемента
 
-<p>В директории <code>app</code>, создайте новый файл и назовите его <code>item.ts</code>, затем поместите туда следующее:</p>
+В директории `app`, создайте новый файл и назовите его `item.ts`, затем поместите туда следующее:
 
-<pre class="brush: js">export interface Item {
+```js
+export interface Item {
   description: string;
   done: boolean;
-}</pre>
+}
+```
 
-<p><code>Item</code> как <code>interface</code> описывает <code>item</code> как объект, чтобы приложение могло понимать, что такое <code>item</code> и как с ним взаимодействовать.
-Для нашего списка дел,<code>item</code> это объект у которого есть описание (description) и он может быть выполнен (done).</p>
+`Item` как `interface` описывает `item` как объект, чтобы приложение могло понимать, что такое `item` и как с ним взаимодействовать.
+Для нашего списка дел,`item` это объект у которого есть описание (description) и он может быть выполнен (done).
 
-<h2 id="add_logic_to_appcomponent-">Добавление логики в AppComponent</h2>
+## Добавление логики в AppComponent
 
-<p>Теперь, когда выше приложение знает, что такое <code>item</code>, вы можете добавить несколько элементов в <code>app.component.ts</code>.
-В <code>app.component.ts</code> замените содержимое на:</p>
+Теперь, когда выше приложение знает, что такое `item`, вы можете добавить несколько элементов в `app.component.ts`.
+В `app.component.ts` замените содержимое на:
 
-<pre class="brush: js">
+```js
 import { Component } from '@angular/core';
 
 @Component({
@@ -108,52 +102,53 @@ export class AppComponent {
     return this.allItems.filter(item => this.filter === 'done' ? item.done : !item.done);
   }
 
-}</pre>
+}
+```
 
-<p>Первая строка — это импорт JavaScript, который импортирует Angular .
-<code>@Component()</code> декоратор описывает метаданные <code>AppComponent</code>.
-Свойства метаданных по умолчанию следующие:</p>
+Первая строка — это импорт JavaScript, который импортирует Angular .
+`@Component()` декоратор описывает метаданные `AppComponent`.
+Свойства метаданных по умолчанию следующие:
 
-<ul>
-  <li><code>selector</code>: Сообщает имя селектора CSS, который используется в шаблоне для создания экземпляра этого компонента. Тут это <code>&#39;app-root&#39;</code>.
-В <code>index.html</code> внутри тэга <code>body</code>, Angular CLI добавляет <code>&lt;app-root&gt;&lt;/app-root&gt;</code> когда генерирует приложение.
-Вы можете использовать селекторы компонентов точно так же, добавляя их к другим HTML-шаблонам компонентов.</li>
-  <li><code>templateUrl</code>: Задает HTML-файл, который нужно связать с этим компонентом. .
-Тут это &#39;./app.component.html&#39;,</li>
-  <li><code>styleUrls</code>: Предоставляет расположение и имя файла для стилей, которые применяются конкретно к этому компоненту. Тут это <code>&#39;./app.component.css&#39;</code>.</li>
-</ul>
+- `selector`: Сообщает имя селектора CSS, который используется в шаблоне для создания экземпляра этого компонента. Тут это `'app-root'`.
+  В `index.html` внутри тэга `body`, Angular CLI добавляет `<app-root></app-root>` когда генерирует приложение.
+  Вы можете использовать селекторы компонентов точно так же, добавляя их к другим HTML-шаблонам компонентов.
+- `templateUrl`: Задает HTML-файл, который нужно связать с этим компонентом. .
+  Тут это './app.component.html',
+- `styleUrls`: Предоставляет расположение и имя файла для стилей, которые применяются конкретно к этому компоненту. Тут это `'./app.component.css'`.
 
-<p>Свойство <code>filter</code> имеет тип <code>union</code>, это значит, что <code>filter</code> может принимать значения: <code>all</code>, <code>active</code> или <code>done</code>.
-С типом <code>union</code>, если вы опечатаетесь в значении, которое присваиваете свойству <code>filter</code>, TypeScript сообщит об этом, чтобы вы могли вовремя отловить ошибку.
-В этом руководстве показано, как добавить фильтрацию на более позднем этапе, но вы также можете использовать фильтр, чтобы отобразить список всех элементов по умолчанию.</p>
+Свойство `filter` имеет тип `union`, это значит, что `filter` может принимать значения: `all`, `active` или `done`.
+С типом `union`, если вы опечатаетесь в значении, которое присваиваете свойству `filter`, TypeScript сообщит об этом, чтобы вы могли вовремя отловить ошибку.
+В этом руководстве показано, как добавить фильтрацию на более позднем этапе, но вы также можете использовать фильтр, чтобы отобразить список всех элементов по умолчанию.
 
-<p>Массив <code>allItems</code> содержит текущие дела, в том числе и выполненные (<code>done</code>).
-Первый элемент, <code>eat</code>, имеет значение свойства <code>done: true</code>.</p>
+Массив `allItems` содержит текущие дела, в том числе и выполненные (`done`).
+Первый элемент, `eat`, имеет значение свойства `done: true`.
 
-<p>Геттер, <code>get items()</code>, извлекает все элементы из массива <code>allItems</code> если <code>filter</code> имеет значение <code>all</code>.
-Иначе, <code>get items()</code> возвращает завершенные (<code>done: true</code>) или незавершенные (<code>done: false</code>) элементы в зависимости от того, как пользователь фильтрует представление.
-Геттер так же устанавливает <code>items</code> как имя массива, которое вы будете использовать в следующем блоке.</p>
+Геттер, `get items()`, извлекает все элементы из массива `allItems` если `filter` имеет значение `all`.
+Иначе, `get items()` возвращает завершенные (`done: true`) или незавершенные (`done: false`) элементы в зависимости от того, как пользователь фильтрует представление.
+Геттер так же устанавливает `items` как имя массива, которое вы будете использовать в следующем блоке.
 
-<h2 id="add_html_to_the_appcomponent_template">Добавление HTML-шаблона для AppComponent</h2>
+## Добавление HTML-шаблона для AppComponent
 
-<p>Чтобы увидеть список элементов в браузере, замените содержимое <code>app.component.html</code> на следующий HTML:</p>
+Чтобы увидеть список элементов в браузере, замените содержимое `app.component.html` на следующий HTML:
 
-<pre class="brush: html">&lt;div class="main"&gt;
-  &lt;h1&gt;My To Do List&lt;/h1&gt;
-  &lt;h2&gt;What would you like to do today?&lt;/h2&gt;
+```html
+<div class="main">
+  <h1>My To Do List</h1>
+  <h2>What would you like to do today?</h2>
 
-  &lt;ul&gt;
-    &lt;li *ngFor="let item of items"&gt;\{{item.description}}&lt;/li&gt;
-  &lt;/ul&gt;
-&lt;/div&gt;</pre>
+  <ul>
+    <li *ngFor="let item of items">\{{item.description}}</li>
+  </ul>
+</div>
+```
 
-<p>Тэг <code>&lt;li&gt;</code> содержит <code>*ngFor</code> — встроенную директива Angular, которая перебирает элементы в массиве <code>items</code>.
-Для каждого элемента, <code>*ngFor</code> создает новый тэг <code>&lt;li&gt;</code>.
-Двойные фигурные скобки, которые содержат <code>item.description</code> сообщают Angular, что нужно заполнить каждый тэг <code>&lt;li&gt;</code> текстом из item&#39;s description.</p>
+Тэг `<li>` содержит `*ngFor` — встроенную директива Angular, которая перебирает элементы в массиве `items`.
+Для каждого элемента, `*ngFor` создает новый тэг `<li>`.
+Двойные фигурные скобки, которые содержат `item.description` сообщают Angular, что нужно заполнить каждый тэг `<li>` текстом из item's description.
 
-<p>В браузере вы должны увидеть список элементов:</p>
+В браузере вы должны увидеть список элементов:
 
-<pre>
+```
 My To Do List
 What would you like to do today?
 
@@ -161,110 +156,105 @@ What would you like to do today?
 * sleep
 * play
 * laugh
-</pre>
+```
 
-<h2 id="add_items_to_the_list">Добавление элементов в список</h2>
+## Добавление элементов в список
 
-<p>С список дел нужно добавлять элементы.</p>
+С список дел нужно добавлять элементы.
 
-<p>Добавьте в <code>app.component.ts</code>, следующий метод класса:</p>
+Добавьте в `app.component.ts`, следующий метод класса:
 
-<pre class="brush: js">addItem(description: string) {
+```js
+addItem(description: string) {
   this.allItems.unshift({
     description,
     done: false
   });
-}</pre>
+}
+```
 
-<p>Метод <code>addItem()</code> принимает элемент, который предоставляет пользователь, и добавляет его в массив, когда пользователь нажимает кнопку  <strong>Add</strong>.<code>addItem()</code> использует метод массива <code>unshift()</code> чтобы добавить новый элемент в начало массива и, соответственно, начало списка.
-Вы можете использовать метод <code>push()</code>, который добавит новый элемент в конец массива и, соответственно, конец списка.</p>
+Метод `addItem()` принимает элемент, который предоставляет пользователь, и добавляет его в массив, когда пользователь нажимает кнопку **Add**.`addItem()` использует метод массива `unshift()` чтобы добавить новый элемент в начало массива и, соответственно, начало списка.
+Вы можете использовать метод `push()`, который добавит новый элемент в конец массива и, соответственно, конец списка.
 
-<p>Для того, чтобы использовать метод <code>addItem()</code>, отредактируйте HTML в шаблоне <code>AppComponent</code>.</p>
+Для того, чтобы использовать метод `addItem()`, отредактируйте HTML в шаблоне `AppComponent`.
 
-<p>В <code>app.component.html</code>, замените <code>&lt;h2&gt;</code> на следующее:</p>
+В `app.component.html`, замените `<h2>` на следующее:
 
-<pre class="brush: js">&lt;label for="addItemInput"&gt;What would you like to do today?&lt;/label&gt;
+```js
+<label for="addItemInput">What would you like to do today?</label>
 
-&lt;input
+<input
   #newItem
   placeholder="add an item"
   (keyup.enter)="addItem(newItem.value); newItem.value = ''"
   class="lg-text-input"
   id="addItemInput"
-/&gt;
-
-&lt;button class="btn-primary" (click)="addItem(newItem.value)"&gt;Add&lt;/button&gt;</pre>
-
-<p>Когда пользователь вводит новый элемент в <code>&lt;input&gt;</code> и нажимает <strong>Enter</strong>, метод <code>addItem()</code> добавляет значение в массив <code>items</code>.
-Нажатие <strong>Enter</strong> так же сбрасывает значение в <code>&lt;input&gt;</code> на пустую строку.
-В качестве альтернативы пользователь может щелкнуть на кнопке <strong>Add</strong>, которая так же вызовет метод <code>addItem()</code>.</p>
-
-
-<h2 id="summary">Резюме</h2>
-
-<p>Сейчас у вас должен быть список дел, отображаемый в вашем браузере. Это большой прогресс! Конечно, нам предстоит еще многое сделать. В следующей статье мы рассмотрим добавление стилей в наше приложение.</p>
-
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
-
-<h2 id="In_this_module">В это модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Введение в клиентские фреймворки</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Основные функции фреймворков</a></li>
- <li>React
-  <ul>
-   <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Начало работы с React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Начало создания приложения списка дел с React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Компоненты React приложения</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">Интерактивность React: события и состояние</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">Интерактивность React: редактирование, фильтрация, условная отрисовка</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Доступность в React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">Ресурсы по React</a></li>
-  </ul>
- </li>
- <li>Ember
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Начало работы с Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Структура Ember приложения и компоненты</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Интерактивность Ember: события, классы и состояние</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Интерактивность Ember: функциональность подвала, условная отрисовка</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Маршрутизация в Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ресурсы по Ember и устранение неполадок</a></li>
-  </ul>
- </li>
- <li>Vue
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Начало работы с Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Создание вашего первого компонента Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Отрисовка списка Vue компонентов</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Добавление новой формы во Vue: события, методы, и модели</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Стилизация Vue компонентов с CSS</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Использование вычисляемых свойств во Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Условная отрисовка во Vue: Редактирование существующих дел</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Управление фокусом во Vue с помощью refs</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Ресурсы по Vue</a></li>
-  </ul>
- </li>
- <li>Svelte
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started">Начало работы со Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning">Начинаем приложение списка дел c использованием Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props">Динамическое поведение в Svelte: работа с переменными и пропсами</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components">Компоненты Svelte приложения</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility">Продвинутый Svelte: реактивность, жизненный цикл, доступность</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores">Работа хранилищами в Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript">Поддержка TypeScript в Svelte</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next">Развертывание и следующие шаги</a></li>
-  </ul>
- </li>
- <li>Angular
-   <ul>
-    <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started">Начало работы с Angular</a></li>
-    <li><a href="/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning">Начинаем приложение списка дел с использованием Angular</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling">Стилизация Angular приложения</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component">Создание компонента элемента (item component)</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering">Фильтрация списка дел</a></li>
-    <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building">Сборка Angular приложений и другие ресурсы</a></li>
-   </ul>
- </li>
-</ul>
+/>
+
+<button class="btn-primary" (click)="addItem(newItem.value)">Add</button>
+```
+
+Когда пользователь вводит новый элемент в `<input>` и нажимает **Enter**, метод `addItem()` добавляет значение в массив `items`.
+Нажатие **Enter** так же сбрасывает значение в `<input>` на пустую строку.
+В качестве альтернативы пользователь может щелкнуть на кнопке **Add**, которая так же вызовет метод `addItem()`.
+
+## Резюме
+
+Сейчас у вас должен быть список дел, отображаемый в вашем браузере. Это большой прогресс! Конечно, нам предстоит еще многое сделать. В следующей статье мы рассмотрим добавление стилей в наше приложение.
+
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+
+## В это модуле
+
+- [Введение в клиентские фреймворки](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+- [Основные функции фреймворков](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- React
+
+  - [Начало работы с React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - [Начало создания приложения списка дел с React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - [Компоненты React приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - [Интерактивность React: события и состояние](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - [Интерактивность React: редактирование, фильтрация, условная отрисовка](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - [Доступность в React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - [Ресурсы по React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+
+- Ember
+
+  - [Начало работы с Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - [Структура Ember приложения и компоненты](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - [Интерактивность Ember: события, классы и состояние](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - [Интерактивность Ember: функциональность подвала, условная отрисовка](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - [Маршрутизация в Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - [Ресурсы по Ember и устранение неполадок](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+
+- Vue
+
+  - [Начало работы с Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - [Создание вашего первого компонента Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - [Отрисовка списка Vue компонентов](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - [Добавление новой формы во Vue: события, методы, и модели](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - [Стилизация Vue компонентов с CSS](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - [Использование вычисляемых свойств во Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - [Условная отрисовка во Vue: Редактирование существующих дел](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - [Управление фокусом во Vue с помощью refs](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - [Ресурсы по Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+
+- Svelte
+
+  - [Начало работы со Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
+  - [Начинаем приложение списка дел c использованием Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
+  - [Динамическое поведение в Svelte: работа с переменными и пропсами](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
+  - [Компоненты Svelte приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+  - [Продвинутый Svelte: реактивность, жизненный цикл, доступность](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+  - [Работа хранилищами в Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+  - [Поддержка TypeScript в Svelte](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+  - [Развертывание и следующие шаги](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
+
+- Angular
+
+  - [Начало работы с Angular](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
+  - [Начинаем приложение списка дел с использованием Angular](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning)
+  - [Стилизация Angular приложения](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling)
+  - [Создание компонента элемента (item component)](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component)
+  - [Фильтрация списка дел](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering)
+  - [Сборка Angular приложений и другие ресурсы](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building)
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md
index ab3b66c1145289..cb945e9632164d 100644
--- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md
+++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/index.md
@@ -4,135 +4,110 @@ slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 translation_of: Learn/Tools_and_testing/Client-side_JavaScript_frameworks
 original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки
 ---
-<div>{{LearnSidebar}}<br>
-JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,</div>
-
-<div>предоставляя разработчикам проверенные и протестированные</div>
-
-<div>инструменты для создания масштабируемых и интерактивных веб-приложений. Многие</div>
-
-<div>современные компании используют фреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.<br>
- </div>
-
-<p class="summary">Начинающему разработчику веб-интерфейсов, может быть трудно понять, с чего начать изучение фреймворков - их выбор разнообразен, а новые появляются постоянно. В основном же они работают аналогичным образом, но делают некоторые вещи по-разному, также есть некоторые специфичные вещи, которые следует соблюдать при использовании фреймворков.</p>
-
-<p class="summary">Этим набором статей мы постараемся дать вам удобную отправную точку, чтобы помочь вам начать изучать основы. Мы не стремимся научить вас всему, что вам нужно знать о React / ReactDOM, или Vue, или какой-то другой конкретной среде; Документация этих фреймворков отлично выполняют эту работу. Вместо этого мы хотим сделать шаг назад и сначала ответить на более фундаментальные вопросы, такие как:</p>
-
-<ul>
- <li class="summary">Почему я должен использовать фреймворк? Какие проблемы он решит?</li>
- <li class="summary">Какие вопросы я должен задать себе при выборе определённого фреймворка?<br>
-  Нужен ли мне какой-либо из них вовсе?</li>
- <li class="summary">Какими возможностями обладают фреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?</li>
- <li class="summary">Как они связаны с "ванильным" JavaScript, или HTML?</li>
-</ul>
-
-<p class="summary">После этого мы предоставим некоторые учебные пособия, охватывающие основы некоторых фреймворков, чтобы предоставить вам достаточно контекста, чтобы вы  могли начать углубляться в этой теме. Мы хотим, чтобы вы изучали фреймворки прагматично, не забывая о фундаментальных практиках веб-разработки, таких как, например, доступность.</p>
-
-<p class="summary"><strong><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Начните прямо сейчас с "Введение в фронтенд фреймворки"</a></strong></p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and especially <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</p>
-
-<p>Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.</p>
-
-<h2 id="Introductory_guides">Introductory guides</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">1. Introduction to client-side frameworks</a></dt>
- <dd>We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">2. Framework main features</a></dt>
- <dd>Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.</dd>
-</dl>
-
-<h2 id="React_tutorials">React tutorials</h2>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.</p>
-
-<p>If you need to check your code against our version, you can find a finished version of the sample React app code in our <a href="https://github.com/mdn/todo-react">todo-react repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-react-build/">https://mdn.github.io/todo-react-build/</a>.</p>
-</div>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">1. Getting started with React</a></dt>
- <dd>In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">2. Beginning our React todo list</a></dt>
- <dd>Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic <code>App</code> component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">3. Componentizing our React app</a></dt>
- <dd>At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article we will show you a sensible way to break our app up into components.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">4. React interactivity: Events and state</a></dt>
- <dd>With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">5. React interactivity: Editing, filtering, conditional rendering</a></dt>
- <dd>As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">6. Accessibility in React</a></dt>
- <dd>In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">7. React resources</a></dt>
- <dd>Our final article provides you with a list of React resources that you can use to go further in your learning.</dd>
-</dl>
-
-<h2 id="Ember_tutorials">Ember tutorials</h2>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.</p>
-
-<p>If you need to check your code against our version, you can find a finished version of the sample Ember app code in the <a href="https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc">ember-todomvc-tutorial repository</a>. For a running live version, see <a href="https://nullvoxpopuli.github.io/ember-todomvc-tutorial/">https://nullvoxpopuli.github.io/ember-todomvc-tutorial/</a> (this also includes a few additional features not covered in the tutorial).</p>
-</div>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">1. Getting started with Ember</a></dt>
- <dd>In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">2. Ember app structure and componentization</a></dt>
- <dd>In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">3. Ember interactivity: Events, classes and state</a></dt>
- <dd>At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">4. Ember Interactivity: Footer functionality, conditional rendering</a></dt>
- <dd>Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">5. Routing in Ember</a></dt>
- <dd>In this article we learn about routing, or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">6. Ember resources and troubleshooting</a></dt>
- <dd>Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.</dd>
-</dl>
-
-<h2 id="Vue_tutorials">Vue tutorials</h2>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: Vue tutorials last tested in May 2020, with Vue 2.6.11.</p>
-
-<p>If you need to check your code against our version, you can find a finished version of the sample Vue app code in our <a href="https://github.com/mdn/todo-vue">todo-vue repository</a>. For a running live version, see <a href="https://mdn.github.io/todo-vue/dist/">https://mdn.github.io/todo-vue/dist/</a>.</p>
-</div>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">1. Getting started with Vue</a></dt>
- <dd>Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">2. Creating our first Vue component</a></dt>
- <dd>Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">3. Rendering a list of Vue components</a></dt>
- <dd>At this point we've got a fully working component; we're now ready to add multiple <code>ToDoItem</code> components to our App. In this artcle we'll look at adding a set of todo item data to our <code>App.vue</code> component, which we'll then loop through and display inside <code>ToDoItem</code> components using the <code>v-for</code> directive.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">4. Adding a new todo form: Vue events, methods, and models</a></dt>
- <dd>We now have sample data in place, and a loop that takes each bit of data and renders it inside a <code>ToDoItem</code> in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text <code>&lt;input&gt;</code>, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">5. Styling Vue components with CSS</a></dt>
- <dd>The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">6. Using Vue computed properties</a></dt>
- <dd>In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods, but only re-run when one of their dependencies changes.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">7. Vue conditional rendering: editing existing todos</a></dt>
- <dd>Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely <code>v-if</code> and <code>v-else</code> — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">8. Focus management with Vue refs</a></dt>
- <dd>We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">9. Vue resources</a></dt>
- <dd>Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.</dd>
-</dl>
-
-<h2 id="Which_frameworks_did_we_choose">Which frameworks did we choose?</h2>
-
-<p>We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:</p>
-
-<ul>
- <li>They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skillset when looking for a job.</li>
- <li>They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.</li>
- <li>We don't have the resources to cover <em>all</em> modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.</li>
- <li>As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.</li>
-</ul>
-
-<p>We want to say this up front — we've <strong>not</strong> chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.</p>
-
-<p>Note that we were hoping to have more frameworks included upon intial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via <a href="https://wiki.mozilla.org/Matrix">Matrix</a>, or <a href="https://discourse.mozilla.org/c/mdn">Discourse</a>, or drop us a mail on the <a href="mailto:mdn-admins@mozilla.org">mdn-admins list</a>.</p>
+{{LearnSidebar}}
+JavaScript-фреймворки являются неотъемлемой частью современной веб-разработки,предоставляя разработчикам проверенные и протестированныеинструменты для создания масштабируемых и интерактивных веб-приложений. Многиесовременные компании используют фреймворки для своих решений, поэтому многие задачи связанные с разработкой клиентской части веб-приложений теперь требуют опыта работы с ними.
+
+Начинающему разработчику веб-интерфейсов, может быть трудно понять, с чего начать изучение фреймворков - их выбор разнообразен, а новые появляются постоянно. В основном же они работают аналогичным образом, но делают некоторые вещи по-разному, также есть некоторые специфичные вещи, которые следует соблюдать при использовании фреймворков.
+
+Этим набором статей мы постараемся дать вам удобную отправную точку, чтобы помочь вам начать изучать основы. Мы не стремимся научить вас всему, что вам нужно знать о React / ReactDOM, или Vue, или какой-то другой конкретной среде; Документация этих фреймворков отлично выполняют эту работу. Вместо этого мы хотим сделать шаг назад и сначала ответить на более фундаментальные вопросы, такие как:
+
+- Почему я должен использовать фреймворк? Какие проблемы он решит?
+- Какие вопросы я должен задать себе при выборе определённого фреймворка?
+  Нужен ли мне какой-либо из них вовсе?
+- Какими возможностями обладают фреймворки? Как они работают в целом и в чём отличия их имплементаций этих возможностей?
+- Как они связаны с "ванильным" JavaScript, или HTML?
+
+После этого мы предоставим некоторые учебные пособия, охватывающие основы некоторых фреймворков, чтобы предоставить вам достаточно контекста, чтобы вы могли начать углубляться в этой теме. Мы хотим, чтобы вы изучали фреймворки прагматично, не забывая о фундаментальных практиках веб-разработки, таких как, например, доступность.
+
+**[Начните прямо сейчас с "Введение в фронтенд фреймворки"](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)**
+
+## Prerequisites
+
+You should really learn the basics of the core web languages first before attempting to move on to learning client-side frameworks — [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), and especially [JavaScript](/ru/docs/Learn/JavaScript).
+
+Your code will be richer and more professional as a result, and you'll be able to troubleshoot problems with more confidence if you understand the fundamental web platform features that the frameworks are building on top of.
+
+## Introductory guides
+
+- [1. Introduction to client-side frameworks](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+  - : We begin our look at frameworks with a general overview of the area, looking at a brief history of JavaScript and frameworks, why frameworks exist and what they give us, how to start thinking about choosing a framework to learn, and what alternatives there are to client-side frameworks.
+- [2. Framework main features](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+  - : Each major JavaScript framework has a different approach to updating the DOM, handling browser events, and providing an enjoyable developer experience. This article will explore the main features of “the big 4” frameworks, looking at how frameworks tend to work from a high level, and the differences between them.
+
+## React tutorials
+
+> **Примечание:** React tutorials last tested in May 2020, with React/ReactDOM 16.13.1 and create-react-app 3.4.1.
+>
+> If you need to check your code against our version, you can find a finished version of the sample React app code in our [todo-react repository](https://github.com/mdn/todo-react). For a running live version, see <https://mdn.github.io/todo-react-build/>.
+
+- [1. Getting started with React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - : In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app, learning a bit about how React works in the process.
+- [2. Beginning our React todo list](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - : Let's say that we’ve been tasked with creating a proof-of-concept in React – an app that allows users to add, edit, and delete tasks they want to work on, and also mark tasks as complete without deleting them. This article will walk you through putting the basic `App` component structure and styling in place, ready for individual component definition and interactivity, which we'll add later.
+- [3. Componentizing our React app](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - : At this point, our app is a monolith. Before we can make it do things, we need to break it apart into manageable, descriptive components. React doesn’t have any hard rules for what is and isn’t a component – that’s up to you! In this article we will show you a sensible way to break our app up into components.
+- [4. React interactivity: Events and state](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - : With our component plan worked out, it's now time to start updating our app from a completely static UI to one that actually allows us to interact and change things. In this article we'll do this, digging into events and state along the way.
+- [5. React interactivity: Editing, filtering, conditional rendering](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - : As we near the end of our React journey (for now at least), we'll add the finishing touches to the main areas of functionality in our Todo list app. This includes allowing you to edit existing tasks, and filtering the list of tasks between all, completed, and incomplete tasks. We'll look at conditional UI rendering along the way.
+- [6. Accessibility in React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - : In our final tutorial article, we'll focus on (pun intended) accessibility, including focus management in React, which can improve usability and reduce confusion for both keyboard-only and screenreader users.
+- [7. React resources](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+  - : Our final article provides you with a list of React resources that you can use to go further in your learning.
+
+## Ember tutorials
+
+> **Примечание:** Ember tutorials last tested in May 2020, with Ember/Ember CLI version 3.18.0.
+>
+> If you need to check your code against our version, you can find a finished version of the sample Ember app code in the [ember-todomvc-tutorial repository](https://github.com/NullVoxPopuli/ember-todomvc-tutorial/tree/master/steps/00-finished-todomvc/todomvc). For a running live version, see <https://nullvoxpopuli.github.io/ember-todomvc-tutorial/> (this also includes a few additional features not covered in the tutorial).
+
+- [1. Getting started with Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - : In our first Ember article we will look at how Ember works and what it's useful for, install the Ember toolchain locally, create a sample app, and then do some initial setup to get it ready for development.
+- [2. Ember app structure and componentization](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - : In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.
+- [3. Ember interactivity: Events, classes and state](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - : At this point we'll start adding some interactivity to our app, providing the ability to add and display new todo items. Along the way, we'll look at using events in Ember, creating component classes to contain JavaScript code to control interactive features, and setting up a service to keep track of the data state of our app.
+- [4. Ember Interactivity: Footer functionality, conditional rendering](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - : Now it's time to start tackling the footer functionality in our app. Here we'll get the todo counter to update to show the correct number of todos still to complete, and correctly apply styling to completed todos (i.e. where the checkbox has been checked). We'll also wire up our "Clear completed" button. Along the way, we'll learn about using conditional rendering in our templates.
+- [5. Routing in Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - : In this article we learn about routing, or URL-based filtering as it is sometimes referred to. We'll use it to provide a unique URL for each of the three todo views — "All", "Active", and "Completed".
+- [6. Ember resources and troubleshooting](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+  - : Our final Ember article provides you with a list of resources that you can use to go further in your learning, plus some useful troubleshooting and other information.
+
+## Vue tutorials
+
+> **Примечание:** Vue tutorials last tested in May 2020, with Vue 2.6.11.
+>
+> If you need to check your code against our version, you can find a finished version of the sample Vue app code in our [todo-vue repository](https://github.com/mdn/todo-vue). For a running live version, see <https://mdn.github.io/todo-vue/dist/>.
+
+- [1. Getting started with Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - : Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.
+- [2. Creating our first Vue component](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - : Now it's time to dive deeper into Vue, and create our own custom component — we'll start by creating a component to represent each item in the todo list. Along the way, we'll learn about a few important concepts such as calling components inside other components, passing data to them via props, and saving data state.
+- [3. Rendering a list of Vue components](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - : At this point we've got a fully working component; we're now ready to add multiple `ToDoItem` components to our App. In this artcle we'll look at adding a set of todo item data to our `App.vue` component, which we'll then loop through and display inside `ToDoItem` components using the `v-for` directive.
+- [4. Adding a new todo form: Vue events, methods, and models](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - : We now have sample data in place, and a loop that takes each bit of data and renders it inside a `ToDoItem` in our app. What we really need next is the ability to allow our users to enter their own todo items into the app, and for that we'll need a text `<input>`, an event to fire when the data is submitted, a method to fire upon submission to add the data and rerender the list, and a model to control the data. This is what we'll cover in this article.
+- [5. Styling Vue components with CSS](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - : The time has finally come to make our app look a bit nicer. In this article we'll explore the different ways of styling Vue components with CSS.
+- [6. Using Vue computed properties](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - : In this article we'll add a counter that displays the number of completed todo items, using a feature of Vue called computed properties. These work similarly to methods, but only re-run when one of their dependencies changes.
+- [7. Vue conditional rendering: editing existing todos](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - : Now it is time to add one of the major parts of functionality that we're still missing — the ability to edit existing todo items. To do this, we will take advantage of Vue's conditional rendering capabilities — namely `v-if` and `v-else` — to allow us to toggle between the existing todo item view, and an edit view where you can update todo item labels. We'll also look at adding functionality to delete todo items.
+- [8. Focus management with Vue refs](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - : We are nearly done with Vue. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility. We'll look at using Vue refs to handle this — an advanced feature that allows you to have direct access to the underlying DOM nodes below the virtual DOM, or direct access from one component to the internal DOM structure of a child component.
+- [9. Vue resources](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
+  - : Now we'll round off our study of Vue by giving you a list of resources that you can use to go further in your learning, plus some other useful tips.
+
+## Which frameworks did we choose?
+
+We are publishing our initial set of articles with guides focusing on three of the major frameworks out there — React/ReactDOM, Ember, and Vue. There is a variety of reasons for this:
+
+- They are popular choices that will be around for a while — like with any software tool, it is good to stick with actively-developed choices that are likely to not be discontinued next week, and which will be desirable additions to your skillset when looking for a job.
+- They have strong communities and good documentation. It is very important to be able to get help with learning a complex subject, especially when you are just starting out.
+- We don't have the resources to cover _all_ modern frameworks. That list would be very difficult to keep up-to-date anyway, as new ones appear all the time.
+- As a beginner, trying to choose what to focus on out of the huge number of choices available is a very real problem. Keeping the list short is therefore helpful.
+
+We want to say this up front — we've **not** chosen the frameworks we are focusing on because we think they are the best, or because we endorse them in any way. We just think they score highly on the above criteria.
+
+Note that we were hoping to have more frameworks included upon intial publication, but we decided to release the content and then add more framework guides later, rather than delay it longer. If your favourite framework is not represented in this content and you'd like to help change that, feel free to discuss it with us! Get in touch with us via [Matrix](https://wiki.mozilla.org/Matrix), or [Discourse](https://discourse.mozilla.org/c/mdn), or drop us a mail on the [mdn-admins list](mailto:mdn-admins@mozilla.org).
diff --git a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
index 615ae111a96ce1..d36110f8a3a14a 100644
--- a/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
+++ b/files/ru/learn/tools_and_testing/client-side_javascript_frameworks/react_getting_started/index.md
@@ -6,143 +6,131 @@ translation_of: >-
   Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started
 original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймворки/React_getting_started
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
 
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</div>
+В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .
 
-<p class="summary">В этой статье мы скажем привет React. Мы узнаем немного подробностей о его происхождении и сценариях использования, настроим базовый набор инструментов на нашем локальном компьютере, а также создадим и поиграем с простым приложением для начинающих, и в процессе узнаем немного о том, как React работает .</p>
+| Что нужно знать: | [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript), быть знакомым с [терминалом/командной строкой](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line).React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React. |
+| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Задача:          | Настроить локальную среду разработки React, создать стартовое приложение и понять основы его работы.                                                                                                                                                                                                                                                                                                                                                                                  |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Что нужно знать:</th>
-   <td>
-    <p><a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, быть знакомым с <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">терминалом/командной строкой</a>.</p>
+## Привет React
 
-    <p>React использует синтаксис HTML-in-JavaScript под названием JSX (JavaScript и XML). Знание HTML и JavaScript поможет вам изучить JSX и лучше определить, связаны ли ошибки в вашем приложении с JavaScript или с более специфической областью React.</p>
-   </td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>
-    <p>Настроить локальную среду разработки React, создать стартовое приложение и понять основы его работы.</p>
-   </td>
-  </tr>
- </tbody>
-</table>
+Как гласит официальный слоган, [React](https://ru.reactjs.org/) - это библиотека для создания пользовательских интерфейсов. React не является фреймворком – он даже не рассчитан исключительно для web. Он используется для визуализации и в связке с другими библиотеками. Например, [React Native](https://reactnative.dev/) можно использовать для создания мобильных приложений; [React 360](https://facebook.github.io/react-360/) можно использовать для создания приложений виртуальной реальности; помимо того есть и другие [варианты](https://github.com/chentsulin/awesome-react-renderer).
 
-<h2 id="Привет_React">Привет React</h2>
+Для создания веб-приложений разработчики используют React в тандеме с [ReactDOM](https://reactjs.org/docs/react-dom.html). React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.
 
-<p>Как гласит официальный слоган, <a href="https://ru.reactjs.org/">React</a> - это библиотека для создания пользовательских интерфейсов. React не является фреймворком – он даже не рассчитан исключительно для web. Он используется для визуализации и в связке с другими библиотеками. Например, <a href="https://reactnative.dev/">React Native</a> можно использовать для создания мобильных приложений; <a href="https://facebook.github.io/react-360/">React 360</a> можно использовать для создания приложений виртуальной реальности; помимо того есть и другие <a href="https://github.com/chentsulin/awesome-react-renderer">варианты</a>.</p>
+Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счёт использования компонентов - автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.
 
-<p>Для создания веб-приложений разработчики используют React в тандеме с <a href="https://reactjs.org/docs/react-dom.html">ReactDOM</a>. React and ReactDOM часто обсуждаются в том же пространстве и используются для решения тех же проблем, что и другие настоящие фреймворки для веб-разработки. Когда мы ссылаемся на React как на «фреймворк», мы подразумеваем это разговорное понимание.</p>
+## Когда использовать
 
-<p>Основная цель React - минимизировать ошибки, возникающие при разработке пользовательских интерфейсов. Это достигается за счёт использования компонентов - автономных логических фрагментов кода, которые описывают часть пользовательского интерфейса. А уже эти компоненты объединяются для создания полноценного пользовательского интерфейса. React абстрагирует большую часть работы по визуализации, оставляя вам возможность сосредоточиться на дизайне.</p>
+В отличие от других платформ, рассматриваемых в этом модуле, React не обязывает к строгим правилам в отношении соглашений о коде или организации файлов. Это позволяет командам договариваться, что для них более подходит, и структурировать React проект соответствующим образом. React может отвечать за одну кнопку, несколько частей или же весь пользовательский интерфейс приложения.
 
-<h2 id="Когда_использовать">Когда использовать</h2>
+Хотя React _можно_ использовать для [небольших частей интерфейса](https://ru.reactjs.org/docs/add-react-to-a-website.html), «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложение с помощью React.
 
-<p>В отличие от других платформ, рассматриваемых в этом модуле, React не обязывает к строгим правилам в отношении соглашений о коде или организации файлов. Это позволяет командам договариваться, что для них более подходит, и структурировать React проект соответствующим образом. React может отвечать за одну кнопку, несколько частей или же весь пользовательский интерфейс приложения.</p>
+Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но его можно освоить.
 
-<p>Хотя React <em>можно</em> использовать для <a href="https://ru.reactjs.org/docs/add-react-to-a-website.html">небольших частей интерфейса</a>, «зайти» в него не так просто, как, к примеру, в jQuery, или даже во Vue. Куда легче это сделать создав всё приложение с помощью React.</p>
+В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью [create-react-app](https://create-react-app.dev/), предоставляемого Facebook.
 
-<p>Кроме того, такие преимущества React-приложения, как написание интерфейсов с помощью JSX, требуют процесса компиляции. Добавление на сайт компилятора Babel приводит к более медленному выполнению кода, поэтому такие инструменты обычно настраиваются для процесса сборки. Да, возможно, у React есть серьёзные требования к инструментарию, но его можно освоить.</p>
+## Как React использует JavaScript?
 
-<p>В этой статье основное внимание будет уделено использованию React для создания всего пользовательского интерфейса с помощью <a href="https://create-react-app.dev/">create-react-app</a>, предоставляемого Facebook.</p>
+React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of [JSX](https://reactjs.org/docs/introducing-jsx.html) syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:
 
-<h2 id="Как_React_использует_JavaScript">Как React использует JavaScript?</h2>
+```js
+const heading = <h1>Mozilla Developer Network</h1>;
+```
 
-<p>React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of <a href="https://reactjs.org/docs/introducing-jsx.html">JSX</a> syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:</p>
+This heading constant is known as a **JSX expression**. React can use it to render that [`<h1>`](/en-US/docs/Web/HTML/Element/Heading_Elements) tag in our app.
 
-<pre class="brush: js">const heading = &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;;</pre>
+Suppose we wanted to wrap our heading in a [`<header>`](/en-US/docs/Web/HTML/Element/header) tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:
 
-<p>This heading constant is known as a <strong>JSX expression</strong>. React can use it to render that <code><a href="/en-US/docs/Web/HTML/Element/Heading_Elements">&lt;h1&gt;</a></code> tag in our app.</p>
+```js
+const header = (
+  <header>
+    <h1>Mozilla Developer Network</h1>
+  </header>
+);
+```
 
-<p>Suppose we wanted to wrap our heading in a <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:</p>
+> **Примечание:** The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:
+>
+> ```js
+> const header = <header>
+>     <h1>Mozilla Developer Network</h1>
+> </header>
+> ```
+>
+> However, this looks kind of awkward, because the [`<header>`](/en-US/docs/Web/HTML/Element/header) tag that starts the expression is not indented to the same position as its corresponding closing tag.
 
-<pre class="brush: js">const header = (
-  &lt;header&gt;
-    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
-  &lt;/header&gt;
-);</pre>
+Of course, your browser can't read JSX without help. When compiled (using a tool like [Babel](https://babeljs.io/) or [Parcel](https://parceljs.org/)), our header expression would look like this:
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: The parentheses in the previous snippet aren't unique to JSX, and don’t have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:</p>
-
-<pre class="brush: js">const header = &lt;header&gt;
-    &lt;h1&gt;Mozilla Developer Network&lt;/h1&gt;
-&lt;/header&gt;</pre>
-
-<p>However, this looks kind of awkward, because the <code><a href="/en-US/docs/Web/HTML/Element/header">&lt;header&gt;</a></code> tag that starts the expression is not indented to the same position as its corresponding closing tag.</p>
-</div>
-
-<p>Of course, your browser can't read JSX without help. When compiled (using a tool like <a href="https://babeljs.io/">Babel</a> or <a href="https://parceljs.org/">Parcel</a>), our header expression would look like this:</p>
-
-<pre class="brush: js">const header = React.createElement("header", null,
+```js
+const header = React.createElement("header", null,
   React.createElement("h1", null, "Mozilla Developer Network")
-);</pre>
+);
+```
 
-<p>It's <em>possible</em> to skip the compilation step and use <code><a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement()</a></code> to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.</p>
+It's _possible_ to skip the compilation step and use [`React.createElement()`](https://reactjs.org/docs/react-api.html#createelement) to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, popular tooling makes JSX-to-JavaScript compilation part of its setup process. You don't have to configure compilation yourself unless you want to.
 
-<p>Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.</p>
+Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you build user interfaces more quickly and intuitively, and allow others to better understand your code base at a glance.
 
-<p>To read more about JSX, check out the React team's <a href="https://reactjs.org/docs/jsx-in-depth.html">JSX In Depth</a> article.</p>
+To read more about JSX, check out the React team's [JSX In Depth](https://reactjs.org/docs/jsx-in-depth.html) article.
 
-<h2 id="Настройка_вашего_первого_React_приложения">Настройка вашего первого React приложения</h2>
+## Настройка вашего первого React приложения
 
-<p>There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.</p>
+There are many ways to use React, but we're going to use the command-line interface (CLI) tool create-react-app, as mentioned earlier, which expedites the process of developing a React application by installing some packages and creating some files for you, handling the tooling described above.
 
-<p>It's possible to <a href="https://reactjs.org/docs/add-react-to-a-website.html">add React to a website without create-react-app</a> by copying some <code><a href="/en-US/docs/Web/HTML/Element/script">&lt;script&gt;</a></code> elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.</p>
+It's possible to [add React to a website without create-react-app](https://reactjs.org/docs/add-react-to-a-website.html) by copying some [`<script>`](/en-US/docs/Web/HTML/Element/script) elements into an HTML file, but the create-react-app CLI is a common starting point for React applications. Using it will allow you spend more time building your app, and less time fussing with setup.
 
-<h3 id="Requirements">Requirements</h3>
+### Requirements
 
-<p>In order to use create-react-app, you need to have <a href="https://nodejs.org/en/">Node.js</a> installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).</p>
+In order to use create-react-app, you need to have [Node.js](https://nodejs.org/en/) installed. It's recommended that you use the long-term support (LTS) version. Node includes npm (the node package manager), and npx (the node package runner).
 
-<p>You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> for more information on npm and yarn.</p>
+You may also use the Yarn package manager as an alternative, but we'll assume you are using npm in this set of tutorials. See [Package management basics](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) for more information on npm and yarn.
 
-<p>If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. <strong>Gitbash</strong> (which comes as part of the <a href="https://gitforwindows.org/">git for Windows toolset</a>) or <strong><a href="https://docs.microsoft.com/en-us/windows/wsl/about">Windows Subsystem for Linux</a></strong> (<strong>WSL</strong>) are both suitable. See <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line">Command line crash course</a> for more information on these, and on terminal commands in general.</p>
+If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. **Gitbash** (which comes as part of the [git for Windows toolset](https://gitforwindows.org/)) or **[Windows Subsystem for Linux](https://docs.microsoft.com/en-us/windows/wsl/about)** (**WSL**) are both suitable. See [Command line crash course](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Command_line) for more information on these, and on terminal commands in general.
 
-<p>Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.</p>
+Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers — IE9+ by way of some polyfills. It is recommended that you use a modern browser like Firefox, Safari, or Chrome when working through these tutorials.
 
-<p>Also see the following for more information:</p>
+Also see the following for more information:
 
-<ul>
- <li><a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/">"What is npm" on nodejs.org</a></li>
- <li><a href="https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner">"Introducing npx" on the npm blog</a></li>
- <li><a href="https://create-react-app.dev/">The create-react-app documentation</a></li>
-</ul>
+- ["What is npm" on nodejs.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-npm/)
+- ["Introducing npx" on the npm blog](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner)
+- [The create-react-app documentation](https://create-react-app.dev/)
 
-<h3 id="Initializing_your_app">Initializing your app</h3>
+### Initializing your app
 
-<p>create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you <code>cd</code> to the place you'd like your app to live on your hard drive, then run the following in your terminal:</p>
+create-react-app takes one argument: the name you'd like to give your app. create-react-app uses this name to make a new directory, then creates the necessary files inside it. Make sure you `cd` to the place you'd like your app to live on your hard drive, then run the following in your terminal:
 
-<pre class="brush: bash">npx create-react-app moz-todo-react</pre>
+```bash
+npx create-react-app moz-todo-react
+```
 
-<p>This creates a <code>moz-todo-react</code> directory, and does several things inside it:</p>
+This creates a `moz-todo-react` directory, and does several things inside it:
 
-<ul>
- <li>Installs some npm packages essential to the functionality of the app.</li>
- <li>Writes scripts for starting and serving the application.</li>
- <li>Creates a structure of files and directories that define the basic app architecture.</li>
- <li>Initializes the directory as a git repository, if you have git installed on your computer.</li>
-</ul>
+- Installs some npm packages essential to the functionality of the app.
+- Writes scripts for starting and serving the application.
+- Creates a structure of files and directories that define the basic app architecture.
+- Initializes the directory as a git repository, if you have git installed on your computer.
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag <code>--use-npm</code> when you run create-react-app:</p>
+> **Примечание:** if you have the yarn package manager installed, create-react-app will default to using it instead of npm. If you have both package managers installed and explicitly want to use NPM, you can add the flag `--use-npm` when you run create-react-app:
+>
+> ```bash
+> npx create-react-app moz-todo-react --use-npm
+> ```
 
-<pre class="brush: bash">npx create-react-app moz-todo-react --use-npm</pre>
-</div>
+create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.
 
-<p>create-react-app will display a number of messages in your terminal while it works; this is normal! This might take a few minutes, so now might be a good time to go make a cup of tea.</p>
+When the process is complete, `cd` into the `moz-todo-react` directory and run the command `npm start`. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:
 
-<p>When the process is complete, <code>cd</code> into the <code>moz-todo-react</code> directory and run the command <code>npm start</code>. The scripts installed by create-react-app will start being served at a local server at localhost:3000, and open the app in a new browser tab. Your browser will display something like this:</p>
+![Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application](https://mdn.mozillademos.org/files/17203/default-create-react-app.png)
 
-<p><img alt="Screenshot of Firefox MacOS, open to localhost:3000, showing the default create-react-app application" src="https://mdn.mozillademos.org/files/17203/default-create-react-app.png" style="border-style: solid; border-width: 1px; height: 980px; width: 1600px;"></p>
+### Application structure
 
-<h3 id="Application_structure">Application structure</h3>
+create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:
 
-<p>create-react-app gives us everything we need to develop a React application. Its initial file structure looks like this:</p>
-
-<pre>moz-todo-react
+```
+moz-todo-react
 ├── README.md
 ├── node_modules
 ├── package.json
@@ -159,306 +147,323 @@ original_slug: Learn/Tools_and_testing/Фронтенд_JavaScript_фреймв
     ├── index.css
     ├── index.js
     ├── logo.svg
-    └── serviceWorker.js</pre>
+    └── serviceWorker.js
+```
 
-<p>The <strong><code>src</code></strong> directory is where we'll spend most of our time, as it's where the source code for our application lives.</p>
+The **`src`** directory is where we'll spend most of our time, as it's where the source code for our application lives.
 
-<p>The <strong><code>public</code></strong> directory contains files that will be read by your browser while you're developing the app; the most important of these is <code>index.html</code>. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the <code><a href="/en-US/docs/Web/HTML/Element/title">&lt;title&gt;</a></code> element in this file to reflect the title of your application. Accurate page titles are important for accessibility!</p>
+The **`public`** directory contains files that will be read by your browser while you're developing the app; the most important of these is `index.html`. React injects your code into this file so that your browser can run it. There's some other markup that helps create-react-app function, so take care not to edit it unless you know what you're doing. You very much should change the text inside the [`<title>`](/en-US/docs/Web/HTML/Element/title) element in this file to reflect the title of your application. Accurate page titles are important for accessibility!
 
-<p>The <code>public</code> directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment">Deploying our app</a> tutorial.</p>
+The `public` directory will also be published when you build and deploy a production version of your app. We won’t cover deployment in this tutorial, but you should be able to use a similar solution to that described in our [Deploying our app](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Deployment) tutorial.
 
-<p>The <code>package.json</code> file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read <a href="https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/">What is the file `package.json`? on NodeJS.org</a>; we also talk about it in our <a href="/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management">Package management basics</a> tutorial.</p>
+The `package.json` file contains information about our project that Node.js/npm uses to keep it organized. This file is not unique to React applications; create-react-app merely populates it. You don't need to understand this file at all to complete this tutorial, however, if you'd like to learn more about it, you can read [What is the file \`package.json\`? on NodeJS.org](https://nodejs.org/en/knowledge/getting-started/npm/what-is-the-file-package-json/); we also talk about it in our [Package management basics](/ru/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Package_management) tutorial.
 
-<h2 id="Изучаем_наш_первый_React_компонент_—_&lt;App>">Изучаем наш первый React компонент — <code>&lt;App/&gt;</code></h2>
+## Изучаем наш первый React компонент — `<App/>`
 
-<p>In React, a <strong>component</strong> is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.</p>
+In React, a **component** is a reusable module that renders a part of our app. These parts can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.
 
-<p>Let's open <code>src/App.js</code>, since our browser is prompting us to edit it. This file contains our first component, <code>App</code>, and a few other lines of code:</p>
+Let's open `src/App.js`, since our browser is prompting us to edit it. This file contains our first component, `App`, and a few other lines of code:
 
-<pre class="brush: js">import React from 'react';
+```js
+import React from 'react';
 import logo from './logo.svg';
 import './App.css';
 
 function App() {
   return (
-    &lt;div className="App"&gt;
-      &lt;header className="App-header"&gt;
-        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
-        &lt;p&gt;
-          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
-        &lt;/p&gt;
-        &lt;a
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
-        &gt;
+        >
           Learn React
-        &lt;/a&gt;
-      &lt;/header&gt;
-    &lt;/div&gt;
+        </a>
+      </header>
+    </div>
   );
 }
-export default App;</pre>
+export default App;
+```
 
-<p>The <code>App.js</code> file consists of three main parts: some <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/import">import</a></code> statements at the top, the <code>App</code> component in the middle, and an <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/export">export</a></code> statement at the bottom. Most React components follow this pattern.</p>
+The `App.js` file consists of three main parts: some [`import`](/en-US/docs/Web/JavaScript/Reference/Statements/import) statements at the top, the `App` component in the middle, and an [`export`](/en-US/docs/Web/JavaScript/Reference/Statements/export) statement at the bottom. Most React components follow this pattern.
 
-<h3 id="Import_statements">Import statements</h3>
+### Import statements
 
-<p>The <code>import</code> statements at the top of the file allow <code>App.js</code> to use code that has been defined elsewhere. Let's look at these statements more closely.</p>
+The `import` statements at the top of the file allow `App.js` to use code that has been defined elsewhere. Let's look at these statements more closely.
 
-<pre class="brush: js">import React from 'react';
+```js
+import React from 'react';
 import logo from './logo.svg';
-import './App.css';</pre>
+import './App.css';
+```
 
-<p>The first statement imports the React library itself. Because React turns the JSX we write into <code>React.createElement()</code>, all React components must import the <code>React</code> module. If you skip this step, your application will produce an error.</p>
+The first statement imports the React library itself. Because React turns the JSX we write into `React.createElement()`, all React components must import the `React` module. If you skip this step, your application will produce an error.
 
-<p>The second statement imports a logo from <code>'./logo.svg'</code>. Note the <code>./</code> at the beginning of the path, and the <code>.svg</code> extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the <code>logo.svg</code> file lives in our source directory.</p>
+The second statement imports a logo from `'./logo.svg'`. Note the `./` at the beginning of the path, and the `.svg` extension at the end — these tell us that the file is local and that it is not a JavaScript file. Indeed, the `logo.svg` file lives in our source directory.
 
-<p>We don't write a path or extension when importing the <code>React</code> module — this is not a local file; instead, it is listed as a dependency in our <code>package.json</code> file. Be careful of this distinction as you work through this lesson!</p>
+We don't write a path or extension when importing the `React` module — this is not a local file; instead, it is listed as a dependency in our `package.json` file. Be careful of this distinction as you work through this lesson!
 
-<p>The third statement imports the CSS related to our App component. Note that there is no variable name and no <code>from</code> directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.</p>
+The third statement imports the CSS related to our App component. Note that there is no variable name and no `from` directive. This particular import syntax is not native to JavaScript module syntax – it comes from Webpack, the tool create-react-app uses to bundle all our JavaScript files together and serve them to the browser.
 
-<h3 id="The_App_component">The <code>App</code> component</h3>
+### The `App` component
 
-<p>After the imports, we have a function named <code>App</code>. Whereas most of the JavaScript community prefers camel-case names like <code>helloWorld</code>, React components use pascal-case variable names, like <code>HelloWorld</code>, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the <code>App</code> function to <code>app</code>, your browser would show you an error.</p>
+After the imports, we have a function named `App`. Whereas most of the JavaScript community prefers camel-case names like `helloWorld`, React components use pascal-case variable names, like `HelloWorld`, to make it clear that a given JSX element is a React component, and not a regular HTML tag. If you were to rename the `App` function to `app`, your browser would show you an error.
 
-<p>Let's look at App more closely.</p>
+Let's look at App more closely.
 
-<pre class="brush: js">function App() {
+```js
+function App() {
   return (
-    &lt;div className="App"&gt;
-      &lt;header className="App-header"&gt;
-        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
-        &lt;p&gt;
-          Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.
-        &lt;/p&gt;
-        &lt;a
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/App.js</code> and save to reload.
+        </p>
+        <a
           className="App-link"
           href="https://reactjs.org"
           target="_blank"
           rel="noopener noreferrer"
-        &gt;
+        >
           Learn React
-        &lt;/a&gt;
-      &lt;/header&gt;
-    &lt;/div&gt;
+        </a>
+      </header>
+    </div>
   );
-}</pre>
+}
+```
 
-<p>The <code>App</code> function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.</p>
+The `App` function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.
 
-<p>Some elements in the expression have attributes, which are written just like in HTML, following a pattern of <code>attribute="value"</code>. On line 3, the opening <code><a href="/en-US/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> tag has a <code>className</code> attribute. This the same as the <code><a href="/en-US/docs/Web/HTML/Global_attributes/class">class</a></code> attribute in HTML, but because JSX is JavaScript, we can't use the word <code>class</code> – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.</p>
+Some elements in the expression have attributes, which are written just like in HTML, following a pattern of `attribute="value"`. On line 3, the opening [`<div>`](/en-US/docs/Web/HTML/Element/div) tag has a `className` attribute. This the same as the [`class`](/en-US/docs/Web/HTML/Global_attributes/class) attribute in HTML, but because JSX is JavaScript, we can't use the word `class` – it's reserved, meaning JavaScript already uses it for a specific purpose and it would cause problems here in our code. A few other HTML attributes are written differently in JSX than they are in HTML too, for the same kind of reason. We'll cover them as we encounter them.
 
-<p>Take a moment to change the <code><a href="/en-US/docs/Web/HTML/Element/p">&lt;p&gt;</a></code> tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at <code>http://localhost:3000</code> in your browser. Now delete the <code><a href="/en-US/docs/Web/HTML/Element/a">&lt;a&gt;</a></code> tag and save; the "Learn React" link will be gone.</p>
+Take a moment to change the [`<p>`](/en-US/docs/Web/HTML/Element/p) tag on line 6 so that it reads "Hello, world!", then save your file. You'll notice that this change is immediately rendered in the development server running at `http://localhost:3000` in your browser. Now delete the [`<a>`](/en-US/docs/Web/HTML/Element/a) tag and save; the "Learn React" link will be gone.
 
-<p>Your <code>App</code> component should now look like this:</p>
+Your `App` component should now look like this:
 
-<pre class="brush: js">function App() {
+```js
+function App() {
   return (
-    &lt;div className="App"&gt;
-      &lt;header className="App-header"&gt;
-        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
-        &lt;p&gt;
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
           Hello, World!
-        &lt;/p&gt;
-      &lt;/header&gt;
-    &lt;/div&gt;
+        </p>
+      </header>
+    </div>
   );
-}</pre>
+}
+```
 
-<h3 id="Export_statements">Export statements</h3>
+### Export statements
 
-<p>At the very bottom of the <code>App.js</code> file, the statement <code>export default App</code> makes our <code>App</code> component available to other modules.</p>
+At the very bottom of the `App.js` file, the statement `export default App` makes our `App` component available to other modules.
 
-<h2 id="Interrogating_the_index">Interrogating the index</h2>
+## Interrogating the index
 
-<p>Let’s open <code>src/index.js</code>, because that's where the <code>App</code> component is being used. This file is the entry point for our app, and it initially looks like this:</p>
+Let’s open `src/index.js`, because that's where the `App` component is being used. This file is the entry point for our app, and it initially looks like this:
 
-<pre class="brush: js">import React from 'react';
+```js
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));
+ReactDOM.render(<App />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();</pre>
+serviceWorker.unregister();
+```
 
-<p>As with <code>App.js</code>, the file starts by importing all the JS modules and other assets it needs to run. <code>src/index.css</code> holds global styles that are applied to our whole app. We can also see our <code>App</code> component imported here; it is made available for import thanks to the <code>export</code> statement at the bottom of <code>App.js</code>.</p>
+As with `App.js`, the file starts by importing all the JS modules and other assets it needs to run. `src/index.css` holds global styles that are applied to our whole app. We can also see our `App` component imported here; it is made available for import thanks to the `export` statement at the bottom of `App.js`.
 
-<p>Line 7 calls React’s <code>ReactDOM.render()</code> function with two arguments:</p>
+Line 7 calls React’s `ReactDOM.render()` function with two arguments:
 
-<ul>
- <li>The component we want to render, <code>&lt;App /&gt;</code> in this case.</li>
- <li>The DOM element inside which we want the component to be rendered, in this case the element with an ID of <code>root</code>. If you look inside <code>public/index.html</code>, you'll see that this is a <code>&lt;div&gt;</code> element just inside the <code>&lt;body&gt;</code>.</li>
-</ul>
+- The component we want to render, `<App />` in this case.
+- The DOM element inside which we want the component to be rendered, in this case the element with an ID of `root`. If you look inside `public/index.html`, you'll see that this is a `<div>` element just inside the `<body>`.
 
-<p>All of this tells React that we want to render our React application with the <code>App</code> component as the root, or first component.</p>
+All of this tells React that we want to render our React application with the `App` component as the root, or first component.
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: In JSX, React components and HTML elements must have closing slashes. Writing just <code>&lt;App&gt;</code> or just <code>&lt;img&gt;</code> will cause an error.</p>
-</div>
+> **Примечание:** In JSX, React components and HTML elements must have closing slashes. Writing just `<App>` or just `<img>` will cause an error.
 
-<p><a href="/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers">Service workers</a> are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.</p>
+[Service workers](/ru/docs/Web/API/Service_Worker_API/Using_Service_Workers) are interesting pieces of code that help application performance and allow features of your web applications to work offline, but they’re not in scope for this article. You can delete line 5, as well as lines 9 through 12.
 
-<p>Your final <code>index.js</code> file should look like this:</p>
+Your final `index.js` file should look like this:
 
-<pre class="brush: js">import React from 'react';
+```js
+import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 
-ReactDOM.render(&lt;App /&gt;, document.getElementById('root'));</pre>
+ReactDOM.render(<App />, document.getElementById('root'));
+```
 
-<h2 id="Переменные_и_свойства">Переменные и свойства</h2>
+## Переменные и свойства
 
-<p>Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).</p>
+Next, we'll use a few of our JavaScript skills to get a bit more comfortable editing components and working with data in React. We'll talk about how variables are used inside JSX, and introduce props, which are a way of passing data into a component (which can then be accessed using variables).
 
-<h3 id="Variables_in_JSX">Variables in JSX</h3>
+### Variables in JSX
 
-<p>Back in <code>App.js</code>, let’s focus on line 9:</p>
+Back in `App.js`, let’s focus on line 9:
 
-<pre class="brush: js">&lt;img src={logo} className="App-logo" alt="logo" /&gt;</pre>
+```js
+<img src={logo} className="App-logo" alt="logo" />
+```
 
-<p>Here, the <code>&lt;img /&gt;</code> tag's <code>src</code> attribute value is in curly braces. This is how JSX recognizes variables. React will see <code>{logo}</code>, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.</p>
+Here, the `<img />` tag's `src` attribute value is in curly braces. This is how JSX recognizes variables. React will see `{logo}`, know you are referring to the logo import on line 2 of our app, then retrieve the logo file and render it.
 
-<p>Let's try making a variable of our own. Before the return statement of <code>App</code>, add <code>const subject = 'React';</code>. Your <code>App</code> component should now look like this:</p>
+Let's try making a variable of our own. Before the return statement of `App`, add `const subject = 'React';`. Your `App` component should now look like this:
 
-<pre class="brush: js">function App() {
+```js
+function App() {
   const subject = "React";
   return (
-    &lt;div className="App"&gt;
-      &lt;header className="App-header"&gt;
-        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
-        &lt;p&gt;
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
           Hello, World!
-        &lt;/p&gt;
-      &lt;/header&gt;
-    &lt;/div&gt;
+        </p>
+      </header>
+    </div>
   );
-}</pre>
+}
+```
 
-<p>Change line 8 to use our <code>subject</code> variable instead of the word "world", like this:</p>
+Change line 8 to use our `subject` variable instead of the word "world", like this:
 
-<pre class="brush: js">function App() {
+```js
+function App() {
   const subject = "React";
   return (
-    &lt;div className="App"&gt;
-      &lt;header className="App-header"&gt;
-        &lt;img src={logo} className="App-logo" alt="logo" /&gt;
-        &lt;p&gt;
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
           Hello, {subject}!
-        &lt;/p&gt;
-      &lt;/header&gt;
-    &lt;/div&gt;
+        </p>
+      </header>
+    </div>
   );
-}</pre>
+}
+```
 
-<p>When you save, your browser should display "Hello, React!" instead of "Hello, world!"</p>
+When you save, your browser should display "Hello, React!" instead of "Hello, world!"
 
-<p>Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.</p>
+Variables are convenient, but the one we've just set doesn’t make great use of React's features. That's where props come in.
 
-<h3 id="Component_props">Component props</h3>
+### Component props
 
-<p>A <strong>prop</strong> is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — <code>prop="value"</code>. Let’s open <code>index.js</code> and give our <code>&lt;App/&gt;</code> call its first prop.</p>
+A **prop** is any data passed into a React component. Props are written inside component calls, and use the same syntax as HTML attributes — `prop="value"`. Let’s open `index.js` and give our `<App/>` call its first prop.
 
-<p>Add a prop of <code>subject</code> to the <code>&lt;App/&gt;</code> component call, with a value of <code>Clarice</code>. When you are done, your code should look something like this:</p>
+Add a prop of `subject` to the `<App/>` component call, with a value of `Clarice`. When you are done, your code should look something like this:
 
-<pre class="brush: js">ReactDOM.render(&lt;App subject="Clarice" /&gt;, document.getElementById('root'));</pre>
+```js
+ReactDOM.render(<App subject="Clarice" />, document.getElementById('root'));
+```
 
-<p>Back in <code>App.js</code>, let's revisit the App function itself, which reads like this (with the <code>return</code> statement shortened for brevity):</p>
+Back in `App.js`, let's revisit the App function itself, which reads like this (with the `return` statement shortened for brevity):
 
-<pre class="brush: js">function App() {
+```js
+function App() {
   const subject = "React";
   return (
     // return statement
   );
-}</pre>
+}
+```
 
-<p>Change the signature of the <code>App</code> function so that it accepts <code>props</code> as a parameter. Just like any other parameter, you can put <code>props</code> in a <code>console.log()</code> to read it out to your browser's console. Go ahead and do that after your <code>subject</code> constant but before the <code>return</code> statement, like so:</p>
+Change the signature of the `App` function so that it accepts `props` as a parameter. Just like any other parameter, you can put `props` in a `console.log()` to read it out to your browser's console. Go ahead and do that after your `subject` constant but before the `return` statement, like so:
 
-<pre class="brush: js">function App(props) {
+```js
+function App(props) {
   const subject = "React";
   console.log(props);
   return (
     // return statement
   );
-}</pre>
+}
+```
 
-<p>Save your file and check your browser's JavaScript console. You should see something like this logged:</p>
+Save your file and check your browser's JavaScript console. You should see something like this logged:
 
-<pre class="brush: js">Object { subject: "Clarice" }</pre>
+```js
+Object { subject: "Clarice" }
+```
 
-<p>The object property <code>subject</code> corresponds to the <code>subject</code> prop we added to our <code>&lt;App /&gt;</code> component call, and the string <code>Clarice</code> corresponds to its value. Component props in React are always collected into objects in this fashion.</p>
+The object property `subject` corresponds to the `subject` prop we added to our `<App />` component call, and the string `Clarice` corresponds to its value. Component props in React are always collected into objects in this fashion.
 
-<p>Now that <code>subject</code> is one of our props, let's utilize it in <code>App.js</code>. Change the <code>subject</code> constant so that, instead of defining it as the string <code>React</code>, you are reading the value of <code>props.subject</code>. You can also delete your <code>console.log()</code> if you want.</p>
+Now that `subject` is one of our props, let's utilize it in `App.js`. Change the `subject` constant so that, instead of defining it as the string `React`, you are reading the value of `props.subject`. You can also delete your `console.log()` if you want.
 
-<pre class="brush: js">function App(props) {
+```js
+function App(props) {
   const subject = props.subject;
   return (
     // return statement
   );
-}</pre>
-
-<p>When you save, the the app should now greet you with "Hello, Clarice!". If you return to <code>index.js</code>, edit the value of <code>subject</code>, and save, your text will change.</p>
-
-<h2 id="Резюме">Резюме</h2>
-
-<p>This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.</p>
-
-<p>In React:</p>
-
-<ul>
- <li>Components can import modules they need, and must export themselves at the bottom of their files.</li>
- <li>Component functions are named with <code>PascalCase</code>.</li>
- <li>You can read JSX variables by putting them between curly braces, like <code>{so}</code>.</li>
- <li>Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, <code>class</code> in HTML translates to <code>className</code> in JSX. Note that multi-word attributes are camel-cased.</li>
- <li>Props are written just like attributes inside component calls, and are passed into components.</li>
-</ul>
-
-<p>{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}</p>
-
-<h2 id="В_этом_модуле">В этом модуле</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction">Introduction to client-side frameworks</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features">Framework main features</a></li>
- <li>React
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started">Getting started with React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning">Beginning our React todo list</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components">Componentizing our React app</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state">React interactivity: Events and state</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering">React interactivity: Editing, filtering, conditional rendering</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility">Accessibility in React</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources">React resources</a></li>
-  </ul>
- </li>
- <li>Ember
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started">Getting started with Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization">Ember app structure and componentization</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state">Ember interactivity: Events, classes and state</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer">Ember Interactivity: Footer functionality, conditional rendering</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing">Routing in Ember</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources">Ember resources and troubleshooting</a></li>
-  </ul>
- </li>
- <li>Vue
-  <ul>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started">Getting started with Vue</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component">Creating our first Vue component</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists">Rendering a list of Vue components</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models">Adding a new todo form: Vue events, methods, and models</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling">Styling Vue components with CSS</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties">Using Vue computed properties</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering">Vue conditional rendering: editing existing todos</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management">Focus management with Vue refs</a></li>
-   <li><a href="/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources">Vue resources</a></li>
-  </ul>
- </li>
-</ul>
+}
+```
+
+When you save, the the app should now greet you with "Hello, Clarice!". If you return to `index.js`, edit the value of `subject`, and save, your text will change.
+
+## Резюме
+
+This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we’ve learned.
+
+In React:
+
+- Components can import modules they need, and must export themselves at the bottom of their files.
+- Component functions are named with `PascalCase`.
+- You can read JSX variables by putting them between curly braces, like `{so}`.
+- Some JSX attributes are different to HTML attributes, so that they don't conflict with JavaScript reserved words. For example, `class` in HTML translates to `className` in JSX. Note that multi-word attributes are camel-cased.
+- Props are written just like attributes inside component calls, and are passed into components.
+
+{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+
+## В этом модуле
+
+- [Introduction to client-side frameworks](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction)
+- [Framework main features](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features)
+- React
+
+  - [Getting started with React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
+  - [Beginning our React todo list](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_todo_list_beginning)
+  - [Componentizing our React app](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_components)
+  - [React interactivity: Events and state](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_events_state)
+  - [React interactivity: Editing, filtering, conditional rendering](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_interactivity_filtering_conditional_rendering)
+  - [Accessibility in React](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_accessibility)
+  - [React resources](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_resources)
+
+- Ember
+
+  - [Getting started with Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
+  - [Ember app structure and componentization](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_structure_componentization)
+  - [Ember interactivity: Events, classes and state](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_interactivity_events_state)
+  - [Ember Interactivity: Footer functionality, conditional rendering](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_conditional_footer)
+  - [Routing in Ember](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_routing)
+  - [Ember resources and troubleshooting](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_resources)
+
+- Vue
+
+  - [Getting started with Vue](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
+  - [Creating our first Vue component](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_first_component)
+  - [Rendering a list of Vue components](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_rendering_lists)
+  - [Adding a new todo form: Vue events, methods, and models](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_methods_events_models)
+  - [Styling Vue components with CSS](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_styling)
+  - [Using Vue computed properties](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_computed_properties)
+  - [Vue conditional rendering: editing existing todos](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_conditional_rendering)
+  - [Focus management with Vue refs](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_refs_focus_management)
+  - [Vue resources](/ru/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_resources)
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
index a27f6cde336f08..8d1dcd95f3f931 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/feature_detection/index.md
@@ -3,93 +3,84 @@ title: Реализация функции обнаружения
 slug: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
 translation_of: Learn/Tools_and_testing/Cross_browser_testing/Feature_detection
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+Обнаружение функций включает определение того, поддерживает ли браузер определённый блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как `@supports`.
 
-<p class="summary">Обнаружение функций включает определение того, поддерживает ли браузер определённый блок кода, и выполнение другого кода в зависимости от того, поддерживает ли он или нет, так что браузер всегда может обеспечить работу, а не сбой / ошибку в некоторых браузерах. В этой статье подробно описывается, как написать собственное простое обнаружение функций, как использовать библиотеку для ускорения реализации, а также встроенные функции для обнаружения функций, такие как <code>@supports</code>.</p>
+| Предусловия: | Знакомство с основными языками [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript); идея высокого уровня [принципов кросс-браузерного тестирования.](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction). |
+| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| Задача:      | Понять, что такое концепция выявления функций, и уметь внедрять подходящие решения в CSS и JavaScript.                                                                                                                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Предусловия:</th>
-   <td>Знакомство с основными языками <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и  <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>; идея высокого уровня <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">принципов кросс-браузерного тестирования.</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Задача:</th>
-   <td>Понять, что такое концепция выявления функций, и уметь внедрять подходящие решения в CSS и JavaScript.</td>
-  </tr>
- </tbody>
-</table>
+## Концепция обнаружения функций.
 
-<h2 id="Концепция_обнаружения_функций.">Концепция обнаружения функций.</h2>
+Идея обнаружения функции заключается в том, что вы можете запустить тест, чтобы определить, поддерживается ли функция в текущем браузере, а затем условно запустить код, чтобы обеспечить приемлемый опыт как в браузерах, которые поддерживают функцию, так и в браузере, который не поддерживает. Если вы этого не сделаете, браузеры, которые не поддерживают функции, которые вы используете в своём коде, не будут отображать ваши сайты должным образом и просто не сработают, создавая плохой опыт пользователя.
 
-<p>Идея обнаружения функции заключается в том, что вы можете запустить тест, чтобы определить, поддерживается ли функция в текущем браузере, а затем условно запустить код, чтобы обеспечить приемлемый опыт как в браузерах, которые поддерживают функцию, так и в браузере, который не поддерживает. Если вы этого не сделаете, браузеры, которые не поддерживают функции, которые вы используете в своём коде, не будут отображать ваши сайты должным образом и просто не сработают, создавая плохой опыт пользователя.</p>
+Давайте подведём итоги и посмотрим на пример, который мы затронули в нашем документе [Решение самых распространённых проблем JavaScript](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Feature_detection)— [Использование геолокации](/ru/docs/Web/API/Geolocation/Using_geolocation) (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство `geolocation,` доступное на глобальном объекте [Navigator](/ru/docs/Web/API/Navigator). Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:
 
-<p>Давайте подведём итоги и посмотрим на пример, который мы затронули в нашем документе <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Feature_detection">Решение самых распространённых проблем JavaScript</a>— <a href="/en-US/docs/Web/API/Geolocation/Using_geolocation">Использование геолокации</a> (который предоставляет доступные данные о местоположении для устройства, на котором работает веб-браузер) есть основная точка входа для его использования, свойство <code>geolocation,</code>  доступное на глобальном объекте <a href="/en-US/docs/Web/API/Navigator">Navigator</a>. Следовательно, вы можете определить, поддерживает ли браузер геолокацию или нет, используя что-то вроде следующего:</p>
-
-<pre class="language-js">if ("geolocation" in navigator) {
+```js
+if ("geolocation" in navigator) {
   navigator.geolocation.getCurrentPosition(function(position) {
     // show the location on a map, perhaps using the Google Maps API
   });
 } else {
   // Give the user a choice of static maps instead perhaps
-}</pre>
+}
+```
 
-<p>Однако, вероятно, лучше использовать установленную библиотеку обнаружения объектов, а не писать свою собственную все время. Modernizr - это отраслевой стандарт для тестирования функций, и мы рассмотрим это позже.</p>
+Однако, вероятно, лучше использовать установленную библиотеку обнаружения объектов, а не писать свою собственную все время. Modernizr - это отраслевой стандарт для тестирования функций, и мы рассмотрим это позже.
 
-<p>Прежде чем мы продолжим, мы хотели бы сразу сказать одну вещь - не путайте обнаружение функций с <strong>перехватом браузера</strong> (обнаружение того, какой конкретный браузер обращается к сайту) - это ужасная практика, от которой следует отказаться любой ценой. См. <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_bad_browser_sniffing_code">Использование плохого кода перехвата браузера</a> для дополнительной информации.</p>
+Прежде чем мы продолжим, мы хотели бы сразу сказать одну вещь - не путайте обнаружение функций с **перехватом браузера** (обнаружение того, какой конкретный браузер обращается к сайту) - это ужасная практика, от которой следует отказаться любой ценой. См. [Использование плохого кода перехвата браузера](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript#Using_bad_browser_sniffing_code) для дополнительной информации.
 
-<h2 id="Написание_ваших_собственных_тестов_обнаружения_функций">Написание ваших собственных тестов обнаружения функций</h2>
+## Написание ваших собственных тестов обнаружения функций
 
-<p>В этом разделе мы рассмотрим реализацию ваших собственных тестов обнаружения функций как в CSS, так и в JavaScript.</p>
+В этом разделе мы рассмотрим реализацию ваших собственных тестов обнаружения функций как в CSS, так и в JavaScript.
 
-<h3 id="CSS">CSS</h3>
+### CSS
 
-<p>Вы можете написать тесты для функций CSS, протестировав существование <em><a href="/en-US/docs/Web/API/HTMLElement/style">element.style.property</a></em> (например, <code>paragraph.style.transform</code>) в JavaScript.</p>
+Вы можете написать тесты для функций CSS, протестировав существование _[element.style.property](/ru/docs/Web/API/HTMLElement/style)_ (например, `paragraph.style.transform`) в JavaScript.
 
-<p>Классическим примером может быть проверка поддержки <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надёжную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.</p>
+Классическим примером может быть проверка поддержки [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox) в браузере; для браузеров, которые поддерживают новейшие спецификации Flexbox, мы могли бы использовать гибкую и надёжную гибкую компоновку. Для браузеров, которые этого не делают, мы могли бы использовать плавающий макет, который работает нормально, хотя он немного более хрупкий и хакерский, и не такой привлекательный.
 
-<p>Давайте реализуем что-то, что демонстрирует это, хотя мы пока оставим это простым.</p>
+Давайте реализуем что-то, что демонстрирует это, хотя мы пока оставим это простым.
 
-<ol>
- <li>Начните с создания локальных копий наших файлов <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect.html">css-feature-detect.html</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/flex-layout.css">flex-layout.css</a></code>, <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/float-layout.css">float-layout-css</a></code>, и <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/basic-styling.css">basic-styling.css</a></code>. Сохраните их в новой дирекции.</li>
- <li>Мы добавим HTML5 Shiv и в наш пример, чтобы семантические элементы HTML5 правильно стилизовались в старых версиях IE. Загрузите последнюю версию  (См. <a href="https://github.com/aFarkas/html5shiv#manual-installation">Ручная установка</a>), разархивируйте ZIP, скопируйте файлы <code>html5shiv-printshiv.min.js</code> и <code>html5shiv.min.js</code> в ваш пример дирекции и создайте ссылку на один из файлов, поместив следующее в свой {{htmlelement("title")}} элемент:
-  <pre>&lt;script src="html5shiv.min.js"&gt;&lt;/script&gt;</pre>
- </li>
- <li>Посмотрите ваши примеры CSS-файлов - вы увидите, что <code>basic-styling.css</code> обрабатывает все стили, которые мы хотим дать каждому браузеру, тогда как два других CSS-файла содержат CSS, который мы хотим выборочно применять к браузеру в зависимости от  их уровни поддержки. Вы можете посмотреть на различные эффекты этих двух файлов, вручную изменив CSS-файл, на который ссылается второй элемент {{htmlelement("link")}}, но давайте вместо этого реализуем некоторый JavaScript, чтобы автоматически заменять их при необходимости.</li>
- <li>Сначала удалите содержимое атрибута <code>href</code> второго элемента <code>&lt;link&gt;</code> . Мы будем заполнять это динамически позже.</li>
- <li>Затем добавьте элемент <code>&lt;script&gt;&lt;/script&gt;</code> внизу вашего контекста (непосредственно перед закрывающим тегом <code>&lt;/body&gt;</code>).</li>
- <li>Дайте ему следующее содержание:
-  <pre class="brush: js">const conditional = document.querySelector('.conditional');
-const testElem = document.createElement('div');
-if (testElem.style.flex !== undefined &amp;&amp; testElem.style.flexFlow !== undefined) {
-  conditional.setAttribute('href', 'flex-layout.css');
-} else {
-  conditional.setAttribute('href', 'float-layout.css');
-}</pre>
- </li>
-</ol>
+1.  Начните с создания локальных копий наших файлов [`css-feature-detect.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect.html), [`flex-layout.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/flex-layout.css), [`float-layout-css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/float-layout.css), и [`basic-styling.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/basic-styling.css). Сохраните их в новой дирекции.
+2.  Мы добавим HTML5 Shiv и в наш пример, чтобы семантические элементы HTML5 правильно стилизовались в старых версиях IE. Загрузите последнюю версию (См. [Ручная установка](https://github.com/aFarkas/html5shiv#manual-installation)), разархивируйте ZIP, скопируйте файлы `html5shiv-printshiv.min.js` и `html5shiv.min.js` в ваш пример дирекции и создайте ссылку на один из файлов, поместив следующее в свой {{htmlelement("title")}} элемент:
+
+    ```
+    <script src="html5shiv.min.js"></script>
+    ```
 
-<p>Здесь мы берём ссылку на второй элемент <code>&lt;link&gt;</code> и создаём элемент <code>&lt;div&gt;</code> как часть нашего теста.  В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.</p>
+3.  Посмотрите ваши примеры CSS-файлов - вы увидите, что `basic-styling.css` обрабатывает все стили, которые мы хотим дать каждому браузеру, тогда как два других CSS-файла содержат CSS, который мы хотим выборочно применять к браузеру в зависимости от их уровни поддержки. Вы можете посмотреть на различные эффекты этих двух файлов, вручную изменив CSS-файл, на который ссылается второй элемент {{htmlelement("link")}}, но давайте вместо этого реализуем некоторый JavaScript, чтобы автоматически заменять их при необходимости.
+4.  Сначала удалите содержимое атрибута `href` второго элемента `<link>` . Мы будем заполнять это динамически позже.
+5.  Затем добавьте элемент `<script></script>` внизу вашего контекста (непосредственно перед закрывающим тегом `</body>`).
+6.  Дайте ему следующее содержание:
 
-<div class="note">
-<p><strong>Примечание: </strong>Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">css-feature-detect-finished.html</a> (см. Также <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html">живую версию</a>).</p>
-</div>
+    ```js
+    const conditional = document.querySelector('.conditional');
+    const testElem = document.createElement('div');
+    if (testElem.style.flex !== undefined && testElem.style.flexFlow !== undefined) {
+      conditional.setAttribute('href', 'flex-layout.css');
+    } else {
+      conditional.setAttribute('href', 'float-layout.css');
+    }
+    ```
+
+Здесь мы берём ссылку на второй элемент `<link>` и создаём элемент `<div>` как часть нашего теста. В нашем условном выражении мы проверяем, что свойства {{cssxref ("flex")}} и {{cssxref ("flex-flow")}} существуют в браузере. Обратите внимание, что представления JavaScript этих свойств, которые хранятся внутри объекта {{domxref ("HTMLElement.style")}}, используют нижний горбатый регистр, а не дефисы, для разделения слов.
 
-<p>Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.</p>
+> **Примечание:**Если у вас возникли проблемы с выполнением этого, вы можете сравнить его с нашим кодом [css-feature-detect-finished.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html) (см. Также [живую версию](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/feature-detection/css-feature-detect-finished.html)).
 
-<div class="note">
-<p><strong>Примечание:</strong> Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour">Поведение CSS-откат</a> и <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes">Обработка префиксов CSS</a>.</p>
-</div>
+Когда вы сохраните все и опробуете свой пример, вы должны увидеть макет flexbox, применённый к странице, если браузер поддерживает современный flexbox, и макет float, если нет.
 
-<h4 id="supports">@supports</h4>
+> **Примечание:** Часто такой подход является излишним из-за незначительной проблемы с обнаружением функций - вы часто можете обойтись без использования префиксов нескольких поставщиков и свойств резервирования, как описано в разделе [Поведение CSS-откат](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#CSS_fallback_behaviour) и [Обработка префиксов CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Handling_CSS_prefixes).
 
-<p>Недавно, в CSS появился собственный механизм обнаружения собственных функций — {{cssxref("@supports")}} at-rule. Это работает аналогично <a href="/en-US/docs/Web/CSS/Media_Queries">медиавыражениям</a> (см. Также <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Responsive_design_problems">Адаптивные проблемы дизайна</a>) — за исключением того, что вместо выборочного применения CSS в зависимости от медиа-функции, такой как разрешение, ширина экрана или соотношение сторон, выборочно применяется CSS в зависимости от того, поддерживается ли функция CSS.</p>
+#### @supports
 
-<p>Например, мы могли бы переписать наш предыдущий пример для использования <code>@supports</code> — см. <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html">supports-feature-detect.html</a></code> и <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css">supports-styling.css</a></code>. Если вы посмотрите на последнее, вы увидите пару блоков <code>@supports</code> например:</p>
+Недавно, в CSS появился собственный механизм обнаружения собственных функций — {{cssxref("@supports")}} at-rule. Это работает аналогично [медиавыражениям](/ru/docs/Web/CSS/Media_Queries) (см. Также [Адаптивные проблемы дизайна](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS#Responsive_design_problems)) — за исключением того, что вместо выборочного применения CSS в зависимости от медиа-функции, такой как разрешение, ширина экрана или соотношение сторон, выборочно применяется CSS в зависимости от того, поддерживается ли функция CSS.
 
-<pre class="brush: css">@supports (flex-flow: row) and (flex: 1) {
+Например, мы могли бы переписать наш предыдущий пример для использования `@supports` — см. [`supports-feature-detect.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html) и [`supports-styling.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css). Если вы посмотрите на последнее, вы увидите пару блоков `@supports` например:
+
+```css
+@supports (flex-flow: row) and (flex: 1) {
 
   main {
     display: flex;
@@ -104,140 +95,118 @@ if (testElem.style.flex !== undefined &amp;&amp; testElem.style.flexFlow !== und
     padding-right: 0;
   }
 
-}</pre>
+}
+```
 
-<p>Этот блок at-rule применяет правило CSS только в том случае, если текущий браузер поддерживает объявления как <code>flex-flow: row</code> так и <code>flex: 1</code>. Чтобы каждое условие работало, вам необходимо включить полное объявление (а не просто имя свойства) и НЕ включать точку с запятой в конце.</p>
+Этот блок at-rule применяет правило CSS только в том случае, если текущий браузер поддерживает объявления как `flex-flow: row` так и `flex: 1`. Чтобы каждое условие работало, вам необходимо включить полное объявление (а не просто имя свойства) и НЕ включать точку с запятой в конце.
 
-<p><code>@supports</code> также имеет логику <code>OR</code> и <code>NOT</code> — другой блок применяет разметку с плавающей запятой, если свойства flexbox недоступны:</p>
+`@supports` также имеет логику `OR` и `NOT` — другой блок применяет разметку с плавающей запятой, если свойства flexbox недоступны:
 
-<pre class="brush: css">@supports not (flex-flow: row) and (flex: 1) {
+```css
+@supports not (flex-flow: row) and (flex: 1) {
 
   /* rules in here */
 
-}</pre>
-
-<p>Это может выглядеть намного удобнее, чем в предыдущем примере - мы можем выполнять все наши функции обнаружения в CSS, JavaScript не требуется, и мы можем обрабатывать всю логику в одном файле CSS, сокращая HTTP-запросы. Проблема здесь в поддержке браузера — <code>@supports</code> вообще не поддерживается в IE, а поддерживается только в самых последних версиях Safari / iOS WebKit (9 + / 9.2 +), тогда как версия JavaScript должна работать в гораздо более старых браузерах (вероятно, назад  до IE8 или 9, хотя в более старых версиях IE будут возникать дополнительные проблемы, такие как отсутствие поддержки {{domxref ("Document.querySelector")}} и наличие испорченной блочной модели).</p>
-
-<h3 id="JavaScript">JavaScript</h3>
-
-<p>Мы уже видели пример теста на обнаружение функций JavaScript ранее. Как правило, такие тесты выполняются по одному из следующих общих шаблонов:</p>
-
-<table class="standard-table">
- <caption>Краткое изложение методов обнаружения функций JavaScript</caption>
- <thead>
-  <tr>
-   <th scope="col">Тип обнаружения функции</th>
-   <th scope="col">Объяснение</th>
-   <th scope="col">Пример</th>
-  </tr>
- </thead>
- <tbody>
-  <tr>
-   <td><em>Если член в объекте</em></td>
-   <td>Проверьте, существует ли определённый метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.</td>
-   <td>
-    <p><code>if("geolocation" in navigator) { ... }</code></p>
-   </td>
-  </tr>
-  <tr>
-   <td><em>Свойство на элементе</em></td>
-   <td>Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли свойство для него.  Показанный пример является способом определения поддержки  <a href="/en-US/docs/Web/API/Canvas_API">HTML5 Canvas</a>.</td>
-   <td><code>function supports_canvas() {<br>
-    return !!document.createElement('canvas').getContext;<br>
-    }<br>
-    <br>
-    if(supports_canvas()) { ... }</code></td>
-  </tr>
-  <tr>
-   <td><em>Метод на возвращаемое значение элемента</em></td>
-   <td>Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли метод для него.  Если это так, проверьте, какое значение он возвращает.</td>
-   <td>См. <a href="http://diveinto.html5doctor.com/detect.html#video-formats">Dive Into HTML5 Video Formats detection</a>.</td>
-  </tr>
-  <tr>
-   <td><em>Свойство на сохраняемое значение элемента</em></td>
-   <td>Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение.</td>
-   <td>См. <a href="http://diveinto.html5doctor.com/detect.html#input-types">Dive into HTML5 <code>&lt;input&gt;</code> types detection</a>.</td>
-  </tr>
- </tbody>
-</table>
-
-<div class="note">
-<p><strong>Примечание:</strong> Двойное <code>NOT</code> в приведённом выше примере (<code>!!</code>) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.</p>
-</div>
-
-<p>Страница <a href="http://diveinto.html5doctor.com/detect.html">Погружение в HTML5 Обнаружение функций HTML5</a> содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr <a href="https://github.com/Modernizr/Modernizr/wiki/Undetectables">Необнаруживаемые</a>.</p>
-
-<h4 id="matchMedia">matchMedia</h4>
-
-<p>Мы также хотели упомянуть функцию JavaScript {{domxref("Window.matchMedia")}} на этом этапе. Это свойство, которое позволяет вам запускать тесты медиавыражений внутри JavaScript. Это выглядит так:</p>
-
-<pre class="brush: js">if (window.matchMedia("(max-width: 480px)").matches) {
+}
+```
+
+Это может выглядеть намного удобнее, чем в предыдущем примере - мы можем выполнять все наши функции обнаружения в CSS, JavaScript не требуется, и мы можем обрабатывать всю логику в одном файле CSS, сокращая HTTP-запросы. Проблема здесь в поддержке браузера — `@supports` вообще не поддерживается в IE, а поддерживается только в самых последних версиях Safari / iOS WebKit (9 + / 9.2 +), тогда как версия JavaScript должна работать в гораздо более старых браузерах (вероятно, назад до IE8 или 9, хотя в более старых версиях IE будут возникать дополнительные проблемы, такие как отсутствие поддержки {{domxref ("Document.querySelector")}} и наличие испорченной блочной модели).
+
+### JavaScript
+
+Мы уже видели пример теста на обнаружение функций JavaScript ранее. Как правило, такие тесты выполняются по одному из следующих общих шаблонов:
+
+| Тип обнаружения функции                     | Объяснение                                                                                                                                                                                                                                            | Пример                                                                                                               |
+| ------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
+| _Если член в объекте_                       | Проверьте, существует ли определённый метод или свойство (обычно точка входа в использование API или другой функции, которую вы обнаруживаете) в его родительском объекте.                                                                            | `if("geolocation" in navigator) { ... }`                                                                             |
+| _Свойство на элементе_                      | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли свойство для него. Показанный пример является способом определения поддержки [HTML5 Canvas](/ru/docs/Web/API/Canvas_API). | `function supports_canvas() { return !!document.createElement('canvas').getContext; } if(supports_canvas()) { ... }` |
+| _Метод на возвращаемое значение элемента_   | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, а затем проверьте, существует ли метод для него. Если это так, проверьте, какое значение он возвращает.                                                    | См. [Dive Into HTML5 Video Formats detection](http://diveinto.html5doctor.com/detect.html#video-formats).            |
+| _Свойство на сохраняемое значение элемента_ | Создайте элемент в памяти, используя {{domxref ("Document.createElement()")}}, установите для свойства определённое значение, затем проверьте, сохраняется ли значение.                                                                   | См. [Dive into HTML5 `<input>` types detection](http://diveinto.html5doctor.com/detect.html#input-types).            |
+
+> **Примечание:** Двойное `NOT` в приведённом выше примере (`!!`) это способ заставить возвращаемое значение стать «правильным» логическим значением, а не {{glossary("Truthy")}}/{{glossary("Falsy")}} значение, которое может исказить результаты.
+
+Страница [Погружение в HTML5 Обнаружение функций HTML5](http://diveinto.html5doctor.com/detect.html) содержит гораздо больше полезных тестов для обнаружения функций, помимо перечисленных выше, и вы можете найти тест обнаружения функций для большинства вещей, выполнив поиск «обнаружение поддержки для ВАШИ-ФУНКЦИИ-ЗДЕСЬ» в своей любимой поисковой системе. Имейте в виду, однако, что некоторые функции, как известно, не обнаруживаются - см. список Modernizr [Необнаруживаемые](https://github.com/Modernizr/Modernizr/wiki/Undetectables).
+
+#### matchMedia
+
+Мы также хотели упомянуть функцию JavaScript {{domxref("Window.matchMedia")}} на этом этапе. Это свойство, которое позволяет вам запускать тесты медиавыражений внутри JavaScript. Это выглядит так:
+
+```js
+if (window.matchMedia("(max-width: 480px)").matches) {
   // run JavaScript in here.
-}</pre>
+}
+```
 
-<p>В качестве примера, наша демо версия <a href="https://github.com/chrisdavidmills/snapshot">Snapshot</a> использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут <code>media</code>,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:</p>
+В качестве примера, наша демо версия [Snapshot](https://github.com/chrisdavidmills/snapshot) использует её для выборочного применения библиотеки Brick JavaScript и её использования для обработки макета пользовательского интерфейса, но только для небольшого экрана (шириной 480 пикселей или меньше). Сначала мы используем атрибут `media`,чтобы применить CSS-код Brick к странице, только если ширина страницы составляет 480px или меньше:
 
-<pre class="brush: css">&lt;link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)"&gt;</pre>
+```css
+<link href="dist/brick.css" type="text/css" rel="stylesheet" media="all and (max-width: 480px)">
+```
 
-<p>Затем мы используем <code>matchMedia()</code> в JavaScript несколько раз, чтобы запускать функции навигации Brick только в том случае, если мы на маленьком экране (в более широких экранах все можно увидеть сразу, поэтому нам не нужно переходить между различными изображениями).</p>
+Затем мы используем `matchMedia()` в JavaScript несколько раз, чтобы запускать функции навигации Brick только в том случае, если мы на маленьком экране (в более широких экранах все можно увидеть сразу, поэтому нам не нужно переходить между различными изображениями).
 
-<pre class="brush: js">if (window.matchMedia("(max-width: 480px)").matches) {
+```js
+if (window.matchMedia("(max-width: 480px)").matches) {
   deck.shuffleTo(1);
-}</pre>
+}
+```
+
+## Использование Modernizr для реализации обнаружения функций
+
+Можно реализовать свои собственные тесты обнаружения функций, используя методы, подобные тем, которые подробно описаны выше. Вы можете также использовать специальную библиотеку обнаружения функций, так как она всё упрощает. Основой всех библиотек обнаружения функций является [Modernizr](https://modernizr.com/), и он может обнаружить практически все, что вам когда-либо понадобится. Давайте посмотрим, как его использовать.
+
+Когда вы экспериментируете с Modernizr, вы также можете использовать сборку разработки, которая включает в себя все возможные тесты обнаружения функций. Скачать:
+
+1.  Нажав на ссылку [Сборка разработки](https://modernizr.com/download?do_not_use_in_production).
+2.  Нажав на большую розовую кнопку _Build_ на появившейся странице.
+3.  Нажав на верхнюю ссылку _Download_ в появившемся диалоговом окне.
 
-<h2 id="Использование_Modernizr_для_реализации_обнаружения_функций">Использование Modernizr для реализации обнаружения функций</h2>
+Сохраните его где-нибудь разумно, например, в директории, для которой вы создавали другие примеры в этой статье.
 
-<p>Можно реализовать свои собственные тесты обнаружения функций, используя методы, подобные тем, которые подробно описаны выше. Вы можете также использовать специальную библиотеку обнаружения функций, так как она всё упрощает. Основой всех библиотек обнаружения функций является <a href="https://modernizr.com/">Modernizr</a>, и он может обнаружить практически все, что вам когда-либо понадобится. Давайте посмотрим, как его использовать.</p>
+Когда вы используете Modernizr в рабочей среде, вы можете перейти на [Страницу скачивания](https://modernizr.com/download) которую вы уже посетили, и нажимать кнопки плюс только для тех функций, которые вам нужны. Затем, когда вы нажмёте кнопку _Build_ вы загрузите пользовательскую сборку, содержащую только те функции, которые обнаружены, что позволит значительно уменьшить размер файла.
 
-<p>Когда вы экспериментируете с Modernizr, вы также можете использовать сборку разработки, которая включает в себя все возможные тесты обнаружения функций. Скачать:</p>
+### CSS
 
-<ol>
- <li>Нажав на ссылку <a href="https://modernizr.com/download?do_not_use_in_production">Сборка разработки</a>.</li>
- <li>Нажав на большую розовую кнопку <em>Build</em> на появившейся странице.</li>
- <li>Нажав на верхнюю ссылку <em>Download</em> в появившемся диалоговом окне.</li>
-</ol>
+Давайте посмотрим, как Modernizr работает с точки зрения избирательного применения CSS.
 
-<p>Сохраните его где-нибудь разумно, например, в директории, для которой вы создавали другие примеры в этой статье.</p>
+1.  Во-первых, создайте копию [`supports-feature-detect.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html) и [`supports-styling.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css). Сохраните их как `modernizr-css.html` и `modernizr-css.css`.
+2.  Обновите ваш элемент {{htmlelement ("link")}} в своём HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!):
 
-<p>Когда вы используете Modernizr в рабочей среде, вы можете перейти на <a href="https://modernizr.com/download">Страницу скачивания</a> которую вы уже посетили, и нажимать кнопки плюс только для тех функций, которые вам нужны. Затем, когда вы нажмёте кнопку <em>Build</em> вы загрузите пользовательскую сборку, содержащую только те функции, которые обнаружены, что позволит значительно уменьшить размер файла.</p>
+    ```html
+    <link href="modernizr-css.css" rel="stylesheet">
+    ```
 
-<h3 id="CSS_2">CSS</h3>
+3.  Над этим элементом `<link>` добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может её использовать.
 
-<p>Давайте посмотрим, как Modernizr работает с точки зрения избирательного применения CSS.</p>
+    ```html
+    <script src="modernizr-custom.js"></script>
+    ```
 
-<ol>
- <li>Во-первых, создайте копию <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-feature-detect.html">supports-feature-detect.html</a></code> и <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/supports-styling.css">supports-styling.css</a></code>. Сохраните их как <code>modernizr-css.html</code> и <code>modernizr-css.css</code>.</li>
- <li>Обновите ваш элемент {{htmlelement ("link")}} в своём HTML-коде, чтобы он указывал на правильный файл CSS (также следует обновить элемент {{htmlelement ("title")}} на что-то более подходящее!):
-  <pre class="brush: html">&lt;link href="modernizr-css.css" rel="stylesheet"&gt;</pre>
- </li>
- <li>Над этим элементом <code>&lt;link&gt;</code> добавьте элемент {{htmlelement ("script")}}, чтобы применить библиотеку Modernizr к странице, как показано ниже. Это должно быть применено к странице перед любым CSS (или JavaScript), который может её использовать.
-  <pre class="brush: html">&lt;script src="modernizr-custom.js"&gt;&lt;/script&gt;</pre>
- </li>
- <li>Теперь отредактируйте открывающий тег <code>&lt;html&gt;</code>, чтобы он выглядел так:
-  <pre class="brush: html">&lt;html class="no-js"&gt;</pre>
- </li>
-</ol>
+4.  Теперь отредактируйте открывающий тег `<html>`, чтобы он выглядел так:
 
-<p>На этом этапе попробуйте загрузить свою страницу, и вы получите представление о том, как Modernizr работает с функциями CSS. Если вы посмотрите на инспектор DOM инструментов разработчика вашего браузера, вы увидите, что Modernizr обновил значение вашего <code>&lt;html&gt;</code> <code>class</code> следующим образом:</p>
+    ```html
+    <html class="no-js">
+    ```
 
-<pre>&lt;html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor
-blob-constructor cookies cors ...AND LOADS MORE VALUES!&gt;</pre>
+На этом этапе попробуйте загрузить свою страницу, и вы получите представление о том, как Modernizr работает с функциями CSS. Если вы посмотрите на инспектор DOM инструментов разработчика вашего браузера, вы увидите, что Modernizr обновил значение вашего `<html>` `class` следующим образом:
 
-<p>Теперь он содержит большое количество классов, которые указывают на состояние поддержки различных функций. Например, если браузер вообще не поддерживает flexbox, <code>&lt;html&gt;</code> будет присвоено имя класса <code>no-flexbox</code>. Если бы он поддерживал современный flexbox, он получил бы имя класса <code>flexbox</code>. Если вы выполните поиск в списке классов, вы также увидите другие, относящиеся к flexbox, например:</p>
+```
+<html class="js no-htmlimports sizes flash transferables applicationcache blobconstructor
+blob-constructor cookies cors ...AND LOADS MORE VALUES!>
+```
 
-<ul>
- <li><code>flexboxlegacy</code> для старой спецификации flexbox (2009).</li>
- <li><code>flexboxtweener</code> для промежуточного синтаксиса 2011 года, поддерживаемого IE10.</li>
- <li><code>flexwrap</code> для свойства {{cssxref ("flex-wrap")}}, которого нет в некоторых реализациях.</li>
-</ul>
+Теперь он содержит большое количество классов, которые указывают на состояние поддержки различных функций. Например, если браузер вообще не поддерживает flexbox, `<html>` будет присвоено имя класса `no-flexbox`. Если бы он поддерживал современный flexbox, он получил бы имя класса `flexbox`. Если вы выполните поиск в списке классов, вы также увидите другие, относящиеся к flexbox, например:
 
-<div class="note">
-<p><strong>Примечание:</strong> вы можете найти список того, что означают все имена классов — см.  <a href="https://modernizr.com/docs#features">Функции, обнаруженные Modernizr</a>.</p>
-</div>
+- `flexboxlegacy` для старой спецификации flexbox (2009).
+- `flexboxtweener` для промежуточного синтаксиса 2011 года, поддерживаемого IE10.
+- `flexwrap` для свойства {{cssxref ("flex-wrap")}}, которого нет в некоторых реализациях.
 
-<p>Далее, давайте обновим наш CSS, чтобы использовать Modernizr вместо <code>@supports</code>. Перейдите в <code>modernizr-css.css</code>, и замените два блока <code>@supports</code> следующим:</p>
+> **Примечание:** вы можете найти список того, что означают все имена классов — см. [Функции, обнаруженные Modernizr](https://modernizr.com/docs#features).
 
-<pre class="brush: css">/* Properties for browsers with modern flexbox */
+Далее, давайте обновим наш CSS, чтобы использовать Modernizr вместо `@supports`. Перейдите в `modernizr-css.css`, и замените два блока `@supports` следующим:
+
+```css
+/* Properties for browsers with modern flexbox */
 
 .flexbox main {
   display: flex;
@@ -266,79 +235,76 @@ blob-constructor cookies cors ...AND LOADS MORE VALUES!&gt;</pre>
 
 .no-flexbox footer {
   clear: left;
-}</pre>
+}
+```
 
-<p>Так как же это работает? Поскольку все эти имена классов были помещены в элемент <code>&lt;html&gt;</code> вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (<code>no-flexbox</code>).</p>
+Так как же это работает? Поскольку все эти имена классов были помещены в элемент `<html>` вы можете настроить таргетинг на браузеры, которые поддерживают или не поддерживают функцию, используя определённые селекторы-потомки. Поэтому здесь мы применяем верхний набор правил только для браузеров, которые поддерживают flexbox, а нижний набор правил - только для браузеров, которые не поддерживают (`no-flexbox`).
 
-<div class="note">
-<p><strong>Примечание:</strong> Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.</p>
-</div>
+> **Примечание:** Имейте в виду, что все тесты функций HTML и JavaScript Modernizr также представлены в этих именах классов, так что вы можете свободно применять CSS выборочно в зависимости от того, поддерживает ли браузер функции HTML или JavaScript, если это необходимо.
 
-<div class="note">
-<p><strong>Примечание:</strong> Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> и <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css">modernizr-css.css</a></code> (см. Также этот запуск в реальном времени).</p>
-</div>
+> **Примечание:** Если у вас возникли проблемы с выполнением этого, проверьте ваш код по файлам [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) и [`modernizr-css.css`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.css) (см. Также этот запуск в реальном времени).
 
-<h3 id="JavaScript_2">JavaScript</h3>
+### JavaScript
 
-<p>Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счёт того, что глобальный объект <code>Modernizr</code> становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства <code>true</code>/<code>false</code>.</p>
+Modernizr также одинаково хорошо подготовлен для реализации функций обнаружения JavaScript. Это достигается за счёт того, что глобальный объект `Modernizr` становится доступным для страницы, к которой он применяется, и содержит результаты функции, определяемой как свойства `true`/`false`.
 
-<p>Например, загрузите наш пример <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html">modernizr-css.html</a></code> в своём браузере, затем попробуйте перейти на консоль JavaScript и набрать  <code>Modernizr.</code>, а после некоторые из этих имён классов (они тоже здесь одинаковы). Например:</p>
+Например, загрузите наш пример [`modernizr-css.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-css.html) в своём браузере, затем попробуйте перейти на консоль JavaScript и набрать `Modernizr.`, а после некоторые из этих имён классов (они тоже здесь одинаковы). Например:
 
-<pre>Modernizr.flexbox
+```
+Modernizr.flexbox
 Modernizr.websqldatabase
 Modernizr.xhr2
-Modernizr.fetch</pre>
+Modernizr.fetch
+```
 
-<p>Консоль вернёт значения <code>true</code>/<code>false</code>, чтобы указать, поддерживает ли ваш браузер эти функции или нет.</p>
+Консоль вернёт значения `true`/`false`, чтобы указать, поддерживает ли ваш браузер эти функции или нет.
 
-<p>Давайте посмотрим на пример, чтобы показать, как вы бы пользовали эти свойства.</p>
+Давайте посмотрим на пример, чтобы показать, как вы бы пользовали эти свойства.
 
-<ol>
- <li>Прежде всего, сделайте локальную копию файла примера <code><a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-js.html">modernizr-js.html</a></code>.</li>
- <li>Присоедините библиотеку Modernizr к HTML, используя элемент <code>&lt;script&gt;</code> , как мы делали в предыдущих демонстрациях. Поместите его над существующим элементом <code>&lt;script&gt;</code> который прикрепляет API Google Maps к странице.</li>
- <li>Затем заполните текст-заполнитель <code>YOUR-API-KEY</code> во втором элементе <code>&lt;script&gt;</code> (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учётную запись Google, перейдите на страницу <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">Получить ключ / Аутентификация</a> затем нажмите синюю кнопку <em>Get a Key</em> и следуйте инструкциям.</li>
- <li>Наконец, добавьте ещё один элемент <code>&lt;script&gt;</code> внизу тела HTML (непосредственно перед тегом <code>&lt;/body&gt;</code> ) и поместите следующий скрипт в теги:
-  <pre class="brush: js">if (Modernizr.geolocation) {
+1.  Прежде всего, сделайте локальную копию файла примера [`modernizr-js.html`](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/feature-detection/modernizr-js.html).
+2.  Присоедините библиотеку Modernizr к HTML, используя элемент `<script>` , как мы делали в предыдущих демонстрациях. Поместите его над существующим элементом `<script>` который прикрепляет API Google Maps к странице.
+3.  Затем заполните текст-заполнитель `YOUR-API-KEY` во втором элементе `<script>` (как он есть сейчас) действительным ключом API Google Maps. Чтобы получить ключ, войдите в учётную запись Google, перейдите на страницу [Получить ключ / Аутентификация](https://developers.google.com/maps/documentation/javascript/get-api-key) затем нажмите синюю кнопку _Get a Key_ и следуйте инструкциям.
+4.  Наконец, добавьте ещё один элемент `<script>` внизу тела HTML (непосредственно перед тегом `</body>` ) и поместите следующий скрипт в теги:
 
-  navigator.geolocation.getCurrentPosition(function(position) {
+    ```js
+    if (Modernizr.geolocation) {
 
-    let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
-    let myOptions = {
-      zoom: 8,
-      center: latlng,
-      mapTypeId: google.maps.MapTypeId.TERRAIN,
-      disableDefaultUI: true
-    }
-    let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
-  });
+      navigator.geolocation.getCurrentPosition(function(position) {
 
-} else {
-  const para = document.createElement('p');
-  para.textContent = 'Argh, no geolocation!';
-  document.body.appendChild(para);
-}</pre>
- </li>
-</ol>
+        let latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
+        let myOptions = {
+          zoom: 8,
+          center: latlng,
+          mapTypeId: google.maps.MapTypeId.TERRAIN,
+          disableDefaultUI: true
+        }
+        let map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
+      });
+
+    } else {
+      const para = document.createElement('p');
+      para.textContent = 'Argh, no geolocation!';
+      document.body.appendChild(para);
+    }
+    ```
 
-<p>Опробуйте свой пример! Здесь мы используем тест <code>Modernizr.geolocation</code>, чтобы проверить, поддерживается ли геолокация текущим браузером. Если это так, мы запускаем некоторый код, который получает текущее местоположение вашего устройства и отображает его на карте Google.</p>
+Опробуйте свой пример! Здесь мы используем тест `Modernizr.geolocation`, чтобы проверить, поддерживается ли геолокация текущим браузером. Если это так, мы запускаем некоторый код, который получает текущее местоположение вашего устройства и отображает его на карте Google.
 
-<h2 id="Подведение_итогов">Подведение итогов</h2>
+## Подведение итогов
 
-<p>В этой статье было рассмотрено обнаружение функций с достаточным количеством подробностей, рассмотрены основные концепции и показано, как реализовать свои собственные тесты обнаружения функций и использовать библиотеку Modernizr для более лёгкой реализации тестов.</p>
+В этой статье было рассмотрено обнаружение функций с достаточным количеством подробностей, рассмотрены основные концепции и показано, как реализовать свои собственные тесты обнаружения функций и использовать библиотеку Modernizr для более лёгкой реализации тестов.
 
-<p>Далее мы начнём изучать автоматизированное тестирование.</p>
+Далее мы начнём изучать автоматизированное тестирование.
 
-<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Accessibility","Learn/Tools_and_testing/Cross_browser_testing/Automated_testing", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<h2 id="В_этом_модуле">В этом модуле</h2>
+## В этом модуле
 
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Введение в кросс-браузерное тестирование</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Стратегии проведения тестирования</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Решение распространённых проблем HTML и CSS</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Решение распространённых проблем JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Решение распространённых проблем доступности</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Реализация функции обнаружения</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Введение в автоматизированное тестирование</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Настройка собственной среды автоматизации тестирования</a></li>
-</ul>
+- [Введение в кросс-браузерное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
+- [Стратегии проведения тестирования](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
+- [Решение распространённых проблем HTML и CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
+- [Решение распространённых проблем JavaScript](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
+- [Решение распространённых проблем доступности](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
+- [Реализация функции обнаружения](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+- [Введение в автоматизированное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
+- [Настройка собственной среды автоматизации тестирования](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
index 0d2a2f0583bd63..5f843920bccf31 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/html_and_css/index.md
@@ -3,161 +3,140 @@ title: Handling common HTML and CSS problems
 slug: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
 translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<div>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handling CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.
 
-<p class="summary">With the scene set, we'll now look specifically at the common cross-browser problems you will come across in HTML and CSS code, and what tools can be used to prevent problems from happening, or fix problems that occur. This includes linting code, handling CSS prefixes, using browser dev tools to track down problems, using polyfills to add support into browsers, tackling responsive design problems, and more.</p>
+| Пререквизиты: | Знакомство с основами [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript); идея высокого уровня [кросс-браузерного тестирования](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction) |
+| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Цель:         | Иметь возможность находить распространённые кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения                                                                                                        |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Пререквизиты:</th>
-   <td>Знакомство с основами <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>; идея высокого уровня <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">кросс-браузерного тестирования</a></td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Иметь возможность находить распространённые кросс-браузерные проблемы HTML и CSS, использовать нужные инструменты и методы для их устранения</td>
-  </tr>
- </tbody>
-</table>
+## The trouble with HTML and CSS
 
-<h2 id="The_trouble_with_HTML_and_CSS">The trouble with HTML and CSS</h2>
+Some of the trouble with HTML and CSS lies with the fact that both languages are fairly simple, and often developers don't take them seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page. In the worst cases, JavaScript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating DOM elements is expensive). In other cases, nascent features are not supported consistently across browsers, which can make some features and styles not work for some users. Responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations.
 
-<p>Some of the trouble with HTML and CSS lies with the fact that both languages are fairly simple, and often developers don't take them seriously, in terms of making sure the code is well-crafted, efficient, and semantically describes the purpose of the features on the page. In the worst cases, JavaScript is used to generate the entire web page content and style, which makes your pages inaccessible, and less performant (generating DOM elements is expensive). In other cases, nascent features are not supported consistently across browsers, which can make some features and styles not work for some users. Responsive design problems are also common — a site that looks good in a desktop browser might provide a terrible experience on a mobile device, because the content is too small to read, or perhaps the site is slow because of expensive animations.</p>
+Let's go forth and look at how we can reduce cross browser errors that result from HTML/CSS.
 
-<p>Let's go forth and look at how we can reduce cross browser errors that result from HTML/CSS.</p>
+## First things first: fixing general problems
 
-<h2 id="First_things_first_fixing_general_problems">First things first: fixing general problems</h2>
+We said in the [first article of this series](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery) that a good strategy to begin with is to test in a couple of modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cross browser issues.
 
-<p>We said in the <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction#Testingdiscovery">first article of this series</a> that a good strategy to begin with is to test in a couple of modern browsers on desktop/mobile, to make sure your code is working generally, before going on to concentrate on the cross browser issues.</p>
+In our [Debugging HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML) and [Debugging CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS) articles, we provided some really basic guidance on debugging HTML/CSS — if you are not familiar with the basics, you should definitely study these articles before carrying on.
 
-<p>In our <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a> and <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a> articles, we provided some really basic guidance on debugging HTML/CSS — if you are not familiar with the basics, you should definitely study these articles before carrying on.</p>
+Basically, it is a matter of checking whether your HTML and CSS code is well formed and doesn't contain any syntax errors.
 
-<p>Basically, it is a matter of checking whether your HTML and CSS code is well formed and doesn't contain any syntax errors.</p>
+> **Примечание:** One common problem with CSS and HTML arises when different CSS rules begin to conflict with one another. This can be especially problematic when you are using third party code. For example, you might use a CSS framework and find that one of the class names it uses clashes with one you've already used for a different purpose. Or you might find that HTML generated by some kind of third party API (generating ad banners, for example) includes a class name or ID that you are already using for a different purpose. To ensure this doesn't happen, you need to research the tools you are using first and design your code around them. It is also worth "namespacing" CSS, e.g. if you have a widget, make sure it has a distinct class, and then start the selectors that select elements inside the widget with this class, so conflicts are less likely. For example `.audio-player ul a`.
 
-<div class="note">
-<p><strong>Note</strong>: One common problem with CSS and HTML arises when different CSS rules begin to conflict with one another. This can be especially problematic when you are using third party code. For example, you might use a CSS framework and find that one of the class names it uses clashes with one you've already used for a different purpose. Or you might find that HTML generated by some kind of third party API (generating ad banners, for example) includes a class name or ID that you are already using for a different purpose. To ensure this doesn't happen, you need to research the tools you are using first and design your code around them. It is also worth "namespacing" CSS, e.g. if you have a widget, make sure it has a distinct class, and then start the selectors that select elements inside the widget with this class, so conflicts are less likely. For example <code>.audio-player ul a</code>.</p>
-</div>
+### Validation
 
-<h3 id="Validation">Validation</h3>
+For HTML, validation involves making sure all your tags are properly closed and nested, you are using a DOCTYPE, and you are using tags for their correct purpose. A good strategy is to validate your code regularly. One service that can do this is the W3C [Markup Validation Service](https://validator.w3.org/), which allows you to point to your code, and returns a list of errors:
 
-<p>For HTML, validation involves making sure all your tags are properly closed and nested, you are using a DOCTYPE, and you are using tags for their correct purpose. A good strategy is to validate your code regularly. One service that can do this is the W3C <a class="external external-icon" href="https://validator.w3.org/">Markup Validation Service</a>, which allows you to point to your code, and returns a list of errors:</p>
+![The HTML validator homepage](https://mdn.mozillademos.org/files/12441/validator.png)
 
-<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0px auto;"></p>
+CSS has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on. The W3C has a [CSS Validator](http://jigsaw.w3.org/css-validator/) available too, for this purpose.
 
-<p>CSS has a similar story — you need to check that your property names are spelled correctly, property values are spelled correctly and are valid for the properties they are used on, you are not missing any curly braces, and so on. The W3C has a <a class="external external-icon" href="http://jigsaw.w3.org/css-validator/">CSS Validator</a> available too, for this purpose.</p>
+### Linters
 
-<h3 id="Linters">Linters</h3>
+Another good option to choose is a so-called Linter application, which not only points out errors, but can also flag up warnings about bad practices in your CSS, and other points besides. Linters can generally be customized to be stricter or more relaxed in their error/warning reporting.
 
-<p>Another good option to choose is a so-called Linter application, which not only points out errors, but can also flag up warnings about bad practices in your CSS, and other points besides. Linters can generally be customized to be stricter or more relaxed in their error/warning reporting.</p>
+There are many online linter applications, the best of which are probably [Dirty Markup](https://www.dirtymarkup.com/) (HTML, CSS, JavaScript), and [CSS Lint](http://csslint.net/) (CSS only). These allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. Dirty Markup also allows you to make fixes to your markup using the _Clean_ button.
 
-<p>There are many online linter applications, the best of which are probably <a href="https://www.dirtymarkup.com/">Dirty Markup</a> (HTML, CSS, JavaScript), and <a href="http://csslint.net/">CSS Lint</a> (CSS only). These allows you to paste your code into a window, and it will flag up any errors with crosses, which can then be hovered to get an error message informing you what the problem is. Dirty Markup also allows you to make fixes to your markup using the <em>Clean</em> button.</p>
+![](https://mdn.mozillademos.org/files/14113/dirty-markup.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14113/dirty-markup.png" style="border-style: solid; border-width: 1px; display: block; height: 203px; margin: 0px auto; width: 1204px;"></p>
+However, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle.
 
-<p>However, it is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle.</p>
+Many code editors have linter plugins. Github's [Atom](https://atom.io/) code editor for example has a rich plugin ecosystem available, with many linting options. To show you an example of how such plugins generally work:
 
-<p>Many code editors have linter plugins. Github's <a href="https://atom.io/">Atom</a> code editor for example has a rich plugin ecosystem available, with many linting options. To show you an example of how such plugins generally work:</p>
+1.  Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.
+2.  Go to Atom's _Preferences..._ dialog (e.g. by Choosing _Atom > Preferences..._ on Mac, or _File > Preferences..._ on Windows/Linux) and choose the _Install_ option in the left hand menu.
+3.  In the _Search packages_ text field, type "lint" and press Enter/Return to search for linting-related packages.
+4.  You should see a package called **lint** at the top of the list. Install this first (using the _Install_ button), as other linters rely on it to work. After that, install the **linter-csslint** plugin for linting CSS, and the **linter-tidy** plugin for linting HTML.
+5.  After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.
 
-<ol>
- <li>Install Atom (if you haven't got an up-to-date version already installed) — download it from the Atom page linked above.</li>
- <li>Go to Atom's <em>Preferences...</em> dialog (e.g. by Choosing <em>Atom &gt; Preferences...</em> on Mac, or <em>File &gt; Preferences...</em> on Windows/Linux) and choose the <em>Install</em> option in the left hand menu.</li>
- <li>In the <em>Search packages</em> text field, type "lint" and press Enter/Return to search for linting-related packages.</li>
- <li>You should see a package called <strong>lint</strong> at the top of the list. Install this first (using the <em>Install</em> button), as other linters rely on it to work. After that, install the <strong>linter-csslint</strong> plugin for linting CSS, and the <strong>linter-tidy</strong> plugin for linting HTML.</li>
- <li>After the packages have finished installing, try loading up an HTML file and a CSS file: you'll see any issues highlighted with green (for warnings) and red (for errors) circles next to the line numbers, and a separate panel at the bottom provides line numbers, error messages, and sometimes suggested values or other fixes.</li>
-</ol>
+![](https://mdn.mozillademos.org/files/14109/atom-htmltidy.png)![](https://mdn.mozillademos.org/files/14107/atom-csslint.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14109/atom-htmltidy.png" style="display: block; margin: 0 auto;"><img alt="" src="https://mdn.mozillademos.org/files/14107/atom-csslint.png" style="display: block; height: 516px; margin: 0px auto; width: 700px;"></p>
+Other popular editors have similar linting packages available. For example, see:
 
-<p>Other popular editors have similar linting packages available. For example, see:</p>
+- [SublimeLinter](www.sublimelinter.com/) for Sublime Text
+- [Notepad++ linter](https://sourceforge.net/projects/notepad-linter/)
 
-<ul>
- <li><a href="www.sublimelinter.com/">SublimeLinter</a> for Sublime Text</li>
- <li><a href="https://sourceforge.net/projects/notepad-linter/">Notepad++ linter</a></li>
-</ul>
+### Browser developer tools
 
-<h3 id="Browser_developer_tools">Browser developer tools</h3>
+The developer tools built into most browsers also feature useful tools for hunting down errors, mainly for CSS.
 
-<p>The developer tools built into most browsers also feature useful tools for hunting down errors, mainly for CSS.</p>
+> **Примечание:** HTML errors don't tend to show up so easily in dev tools, as the browser will try to correct badly-formed markup automatically; the W3C validator is the best way to get HTML errors — see [Validation](#validation) above.
 
-<div class="note">
-<p><strong>Note</strong>: HTML errors don't tend to show up so easily in dev tools, as the browser will try to correct badly-formed markup automatically; the W3C validator is the best way to get HTML errors — see <a href="#validation">Validation</a> above.</p>
-</div>
+As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:
 
-<p>As an example, in Firefox the CSS inspector will show CSS declarations that aren't applied crossed out, with a warning triangle. Hovering the warning triangle will provide a descriptive error message:</p>
+![](https://mdn.mozillademos.org/files/14111/css-message-devtools.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14111/css-message-devtools.png" style="display: block; height: 311px; margin: 0px auto; width: 451px;"></p>
+Other browser devtools have similar features.
 
-<p>Other browser devtools have similar features.</p>
+## Common cross browser problems
 
-<h2 id="Common_cross_browser_problems">Common cross browser problems</h2>
+Now let's move on to look at some of the most common cross browser HTML and CSS problems. The main areas we'll look at are lack of support for modern features, and layout issues.
 
-<p>Now let's move on to look at some of the most common cross browser HTML and CSS problems. The main areas we'll look at are lack of support for modern features, and layout issues.</p>
+### Older browsers not supporting modern features
 
-<h3 id="Older_browsers_not_supporting_modern_features">Older browsers not supporting modern features</h3>
+This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox), or [HTML5 video/audio](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery), or even more nascent, [CSS Grids](/ru/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout) or [-webkit-background-clip: text](/ru/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text).
 
-<p>This is a common problem, especially when you need to support old browsers (such as old IE versions) or you are using features that are implemented using CSS prefixes. In general, most core HTML and CSS functionality (such as basic HTML elements, CSS basic colors and text styling) works across most browsers you'll want to support; more problems are uncovered when you start wanting to use newer features such as <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>, or <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">HTML5 video/audio</a>, or even more nascent, <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a> or <a href="/en-US/docs/Learn/CSS/Styling_boxes/Advanced_box_effects#-webkit-background-clip_text">-webkit-background-clip: text</a>.</p>
+Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See [Finding help](#finding_help) below.
 
-<p>Once you've identified a list of potential problem technologies you will be using, it is a good idea to research what browsers they are supported in, and what related techniques are useful. See <a href="#finding_help">Finding help</a> below.</p>
+#### HTML fallback behaviour
 
-<h4 id="HTML_fallback_behaviour">HTML fallback behaviour</h4>
+Some problems can be solved by just taking advantage of the natural way in which HTML/CSS work.
 
-<p>Some problems can be solved by just taking advantage of the natural way in which HTML/CSS work.</p>
+Unrecognised HTML elements are treated by the browser as anonymous inline elements (effectively inline elements with no semantic value, similar to {{htmlelement("span")}} elements). You can still refer to them by their names, and style them with CSS, for example — you just need to make sure they are behaving as you want them to, for example setting `display: block;` on all of the new semantic elements (such as {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), but only in old versions of IE that don't recognise them (so, IE 8 and lower). This way new browsers can just use the code as normal, but older IE versions will be able to style these elements too.
 
-<p>Unrecognised HTML elements are treated by the browser as anonymous inline elements (effectively inline elements with no semantic value, similar to {{htmlelement("span")}} elements). You can still refer to them by their names, and style them with CSS, for example — you just need to make sure they are behaving as you want them to, for example setting <code>display: block;</code> on all of the new semantic elements (such as {{htmlelement("article")}}, {{htmlelement("aside")}}, etc.), but only in old versions of IE that don't recognise them (so, IE 8 and lower). This way new browsers can just use the code as normal, but older IE versions will be able to style these elements too.</p>
+> **Примечание:** See [IE conditional comments](#ie_conditional_comments) for the best way to do this.
 
-<div class="note">
-<p><strong>Note</strong>: See <a href="#ie_conditional_comments">IE conditional comments</a> for the best way to do this.</p>
-</div>
+More complex elements like HTML [`<video>`](/en-US/docs/Web/HTML/Element/video), [`<audio>`](/en-US/docs/Web/HTML/Element/audio), and [`<canvas>`](/en-US/docs/Web/HTML/Element/canvas) (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.
 
-<p>More complex elements like HTML <code><a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt;</a></code>, <code><a href="/en-US/docs/Web/HTML/Element/audio">&lt;audio&gt;</a></code>, and <code><a href="/en-US/docs/Web/HTML/Element/canvas">&lt;canvas&gt;</a></code> (and other features besides) have natural mechanisms for fallbacks to be added, which work on the same principle as described above. You can add fallback content in between the opening and closing tags, and non-supporting browsers will effectively ignore the outer element and run the nested content.</p>
+For example:
 
-<p>For example:</p>
+```html
+<video id="video" controls preload="metadata" poster="img/poster.jpg">
+  <source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4">
+  <source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm">
+  <source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg">
+  <!-- Flash fallback -->
+  <object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576">
+     <param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+     <param name="allowfullscreen" value="true" />
+     <param name="wmode" value="transparent" />
+     <param name="flashvars" value="controlbar=over&amp;image=img/poster.jpg&amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" />
+      <img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" />
+  </object>
+  <!-- Offer download -->
+  <a href="video/tears-of-steel-battle-clip-medium.mp4">Download MP4</a>
+</video>
+```
 
-<pre class="brush: html"><code class="language-html">&lt;video id="video" controls preload="metadata" poster="img/poster.jpg"&gt;
-  &lt;source src="video/tears-of-steel-battle-clip-medium.mp4" type="video/mp4"&gt;
-  &lt;source src="video/tears-of-steel-battle-clip-medium.webm" type="video/webm"&gt;
-  &lt;source src="video/tears-of-steel-battle-clip-medium.ogg" type="video/ogg"&gt;
-  &lt;!-- Flash fallback --&gt;
-  &lt;object type="application/x-shockwave-flash" data="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" width="1024" height="576"&gt;
-     &lt;param name="movie" value="flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" /&gt;
-     &lt;param name="allowfullscreen" value="true" /&gt;
-     &lt;param name="wmode" value="transparent" /&gt;
-     &lt;param name="flashvars" value="controlbar=over&amp;amp;image=img/poster.jpg&amp;amp;file=flash-player.swf?videoUrl=video/tears-of-steel-battle-clip-medium.mp4" /&gt;
-      &lt;img alt="Tears of Steel poster image" src="img/poster.jpg" width="1024" height="428" title="No video playback possible, please download the video from the link below" /&gt;
-  &lt;/object&gt;
-  &lt;!-- Offer download --&gt;
-  &lt;a href="video/tears-of-steel-battle-clip-medium.mp4"&gt;Download MP4&lt;/a&gt;
-&lt;/video&gt;</code></pre>
+This example (taken from [Creating a cross-browser video player](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player)) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.
 
-<p>This example (taken from <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>) includes not only a Flash video fallback for older IE versions, but also a simple link allowing you to download the video if even the Flash player doesn't work, so at least the user can still access the video.</p>
+> **Примечание:** 3rd party libraries like [Video.js](http://videojs.com/) and [JW Player](https://www.jwplayer.com/) use such fallback mechanisms to provide cross-browser support.
 
-<div class="note">
-<p><strong>Note</strong>: 3rd party libraries like <a href="http://videojs.com/">Video.js</a> and <a href="https://www.jwplayer.com/">JW Player</a> use such fallback mechanisms to provide cross-browser support.</p>
-</div>
+HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special [`<input>`](/en-US/docs/Web/HTML/Element/input) types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.
 
-<p>HTML5 form elements also exhibit fallback qualities — HTML5 introduced some special <code><a href="/en-US/docs/Web/HTML/Element/input">&lt;input&gt;</a></code> types for inputting specific information into forms, such as times, dates, colors, numbers, etc. These are very useful, particularly on mobile platforms, where providing a pain-free way of entering data is very important for the user experience. Supporting platforms provide special UI widgets when these input types are used, such as a calendar widget for entering dates.</p>
+The following example shows date and time inputs:
 
-<p>The following example shows date and time inputs:</p>
+```html
+<form>
+  <div>
+    <label for="date">Enter a date:</label>
+    <input id="date" type="date">
+  </div>
+  <div>
+    <label for="time">Enter a time:</label>
+    <input id="time" type="time">
+  </div>
+</form>
+```
 
-<pre class="brush: html">&lt;form&gt;
-  &lt;div&gt;
-    &lt;label for="date"&gt;Enter a date:&lt;/label&gt;
-    &lt;input id="date" type="date"&gt;
-  &lt;/div&gt;
-  &lt;div&gt;
-    &lt;label for="time"&gt;Enter a time:&lt;/label&gt;
-    &lt;input id="time" type="time"&gt;
-  &lt;/div&gt;
-&lt;/form&gt;</pre>
+The output of this code is as follows:
 
-<p>The output of this code is as follows:</p>
-
-<div class="hidden">
-<h6 id="Hidden_example">Hidden example</h6>
-
-<pre class="brush: css">label {
+```css hidden
+label {
         float: left;
         width: 30%;
         text-align: right;
@@ -180,45 +159,44 @@ translation_of: Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS
       body {
         width: 400px;
         margin: 0 auto;
-      }</pre>
+      }
+```
 
-<pre class="brush: html">&lt;form&gt;
-      &lt;div&gt;
-        &lt;label for="date"&gt;Enter a date:&lt;/label&gt;
-        &lt;input id="date" type="date"&gt;
-      &lt;/div&gt;
-      &lt;div&gt;
-        &lt;label for="time"&gt;Enter a time:&lt;/label&gt;
-        &lt;input id="time" type="time"&gt;
-      &lt;/div&gt;
-    &lt;/form&gt;</pre>
-</div>
+```html hidden
+<form>
+      <div>
+        <label for="date">Enter a date:</label>
+        <input id="date" type="date">
+      </div>
+      <div>
+        <label for="time">Enter a time:</label>
+        <input id="time" type="time">
+      </div>
+    </form>
+```
 
-<p>{{ EmbedLiveSample('Hidden_example', '100%', 150) }}</p>
+{{ EmbedLiveSample('Hidden_example', '100%', 150) }}
 
-<div class="note">
-<p><strong>Note</strong>: You can also see this running live as <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html">forms-test.html</a> on GitHub (see the <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html">source code</a> also).</p>
-</div>
+> **Примечание:** You can also see this running live as [forms-test.html](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/forms-test.html) on GitHub (see the [source code](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/forms-test.html) also).
 
-<p>If you view the example on a supporting browser like desktop/Android Chrome or iOS Safari, you'll see the special widgets/features in action as you try to input data. On a non-supporting platform such as Firefox or Internet Explorer, the inputs will just fallback to normal text inputs, so at least the user can still enter some information.</p>
+If you view the example on a supporting browser like desktop/Android Chrome or iOS Safari, you'll see the special widgets/features in action as you try to input data. On a non-supporting platform such as Firefox or Internet Explorer, the inputs will just fallback to normal text inputs, so at least the user can still enter some information.
 
-<p>Note: Of course, this may not be a great solution for your project's needs — the difference in visual presentation is not great, plus it is harder to guarantee the data will be entered in the format you want it in. For cross browser forms, It is probably better to rely on simple form elements, or selectively using advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as <a href="http://jqueryui.com/">jQuery UI</a> or <a href="https://bootstrap-datepicker.readthedocs.io/en/latest/">Bootstrap datepicker</a>.</p>
+Note: Of course, this may not be a great solution for your project's needs — the difference in visual presentation is not great, plus it is harder to guarantee the data will be entered in the format you want it in. For cross browser forms, It is probably better to rely on simple form elements, or selectively using advanced form elements only in supporting browsers, or using a library that provides decent cross browser form widgets, such as [jQuery UI](http://jqueryui.com/) or [Bootstrap datepicker](https://bootstrap-datepicker.readthedocs.io/en/latest/).
 
-<h4 id="CSS_fallback_behaviour">CSS fallback behaviour</h4>
+#### CSS fallback behaviour
 
-<p>CSS is arguably better at fallbacks than HTML. If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error. This might be frustrating for you and your users if such a mistake slips through to production code, but at least it means the whole site doesn't come crashing down because of one error, and if used cleverly you can use it to your advantage.</p>
+CSS is arguably better at fallbacks than HTML. If a browser encounters a declaration or rule it doesn't understand, it just skips it completely without applying it or throwing an error. This might be frustrating for you and your users if such a mistake slips through to production code, but at least it means the whole site doesn't come crashing down because of one error, and if used cleverly you can use it to your advantage.
 
-<p>Let's look at an example — a simple box styled with CSS, which has some styling provided by various CSS3 features:</p>
+Let's look at an example — a simple box styled with CSS, which has some styling provided by various CSS3 features:
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14141/blingy-button.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/14141/blingy-button.png)
 
-<div class="note">
-<p><strong>Note</strong>: You can also see this example running live on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">button-with-fallback.html</a> (also see the <a href="http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html">source code</a>).</p>
-</div>
+> **Примечание:** You can also see this example running live on GitHub as [button-with-fallback.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/button-with-fallback.html) (also see the [source code](http://mdn.github.io/learning-area/tools-testing/cross-browser-testing/html-css/button-with-fallback.html)).
 
-<p>The button has a number of declarations that style, but the two we are most interested in are as follows:</p>
+The button has a number of declarations that style, but the two we are most interested in are as follows:
 
-<pre class="brush: css">button {
+```css
+button {
   ...
 
   background-color: #ff0000;
@@ -234,252 +212,245 @@ button:hover {
 button:active {
   box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4),
               inset -1px -1px 3px rgba(255,255,255,0.4);
-}</pre>
+}
+```
 
-<p>Here we are providing an <a href="/en-US/docs/Web/CSS/color_value#rgba()">RGBA</a> {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!</p>
+Here we are providing an [RGBA](</ru/docs/Web/CSS/color_value#rgba()>) {{cssxref("background-color")}} that changes opacity on hover to give the user a hint that the button is interactive, and some semi-transparent inset {{cssxref("box-shadow")}} shades to give the button a bit of texture and depth. The trouble is that RGBA colors and box shadows don't work in IE versions older than 9 — in older versions the background just wouldn't show up at all so the text would be unreadable, no good at all!
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14135/unreadable-button.png" style="display: block; margin: 0 auto;"></p>
+![](https://mdn.mozillademos.org/files/14135/unreadable-button.png)
 
-<p>To sort this out, we have added a second <code>background-color</code> declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first <code>background-color</code> value; when it gets to the second <code>background-color</code> declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.</p>
+To sort this out, we have added a second `background-color` declaration, which just specifies a hex color — this is supported way back in really old browsers, and acts as a fallback if the modern shiny features don't work. What happens is a browser visiting this page first applies the first `background-color` value; when it gets to the second `background-color` declaration, it will override the initial value with this value if it supports RGBA colors. If not, it will just ignore the entire declaration and move on.
 
-<div class="note">
-<p><strong>Note</strong>: The same is true for other CSS features like <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">media queries</a>, <code><a href="/en-US/docs/Web/CSS/@font-face">@font-face</a></code> and <code><a href="/en-US/docs/Web/CSS/@supports">@supports</a></code> blocks — if they are not supported, the browser just ignores them.</p>
-</div>
+> **Примечание:** The same is true for other CSS features like [media queries](/ru/docs/Web/CSS/Media_Queries/Using_media_queries), [`@font-face`](/en-US/docs/Web/CSS/@font-face) and [`@supports`](/en-US/docs/Web/CSS/@supports) blocks — if they are not supported, the browser just ignores them.
 
-<h4 id="IE_conditional_comments">IE conditional comments</h4>
+#### IE conditional comments
 
-<p>IE conditional comments are a modified proprietary HTML comment syntax, which can be used to selectively apply HTML code to different versions of IE. This has proven to be a very effective mechanism for fixing cross browser bugs. The syntax looks like this:</p>
+IE conditional comments are a modified proprietary HTML comment syntax, which can be used to selectively apply HTML code to different versions of IE. This has proven to be a very effective mechanism for fixing cross browser bugs. The syntax looks like this:
 
-<pre class="brush: html">&lt;!--[if lte IE 8]&gt;
-  &lt;script src="ie-fix.js"&gt;&lt;/script&gt;
-  &lt;link href="ie-fix.css" rel="stylesheet" type="text/css"&gt;
-&lt;![endif]--&gt;</pre>
+```html
+<!--[if lte IE 8]>
+  <script src="ie-fix.js"></script>
+  <link href="ie-fix.css" rel="stylesheet" type="text/css">
+<![endif]-->
+```
 
-<p>This block will apply the IE-specific CSS and JavaScript only if the browser viewing the page is IE 8 or older. <code>lte</code> means "less than or equal to", but you can also use lt, gt, gte, <code>!</code> for NOT, and other logical syntax.</p>
+This block will apply the IE-specific CSS and JavaScript only if the browser viewing the page is IE 8 or older. `lte` means "less than or equal to", but you can also use lt, gt, gte, `!` for NOT, and other logical syntax.
 
-<div class="note">
-<p><strong>Note</strong>: Sitepoint's <a href="https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/">Internet Explorer Conditional Comments</a> provides a useful beginner's tutorial/reference that explains the conditional comment syntax in detail.</p>
-</div>
+> **Примечание:** Sitepoint's [Internet Explorer Conditional Comments](https://www.sitepoint.com/web-foundations/internet-explorer-conditional-comments/) provides a useful beginner's tutorial/reference that explains the conditional comment syntax in detail.
 
-<p>As you can see, this is especially useful for applying code fixes to old versions of IE. The use case we mentioned earlier (making modern semantic elements styleable in old versions of IE) can be achieved easily using conditional comments, for example you could put something like this in your IE stylesheet:</p>
+As you can see, this is especially useful for applying code fixes to old versions of IE. The use case we mentioned earlier (making modern semantic elements styleable in old versions of IE) can be achieved easily using conditional comments, for example you could put something like this in your IE stylesheet:
 
-<pre class="brush: css">aside, main, article, section, nav, figure, figcaption {
+```css
+aside, main, article, section, nav, figure, figcaption {
   display: block;
-}</pre>
+}
+```
+
+It isn't that simple, however — you also need to create a copy of each element you want to style in the DOM via JavaScript, for them to be styleable; this is a strange quirk, and we won't bore you with the details here. For example:
 
-<p>It isn't that simple, however — you also need to create a copy of each element you want to style in the DOM via JavaScript, for them to be styleable; this is a strange quirk, and we won't bore you with the details here. For example:</p>
+```js
+var asideElem = document.createElement('aside');
+ ...
+```
 
-<pre class="brush: js">var asideElem = document.createElement('aside');
- ...</pre>
+This sounds like a pain to deal with, but fortunately there is a {{glossary("polyfill")}} available that does the necessary fixes for you, and more besides — see [HTML5Shiv](https://github.com/aFarkas/html5shiv) for all the details (see [manual installation](https://github.com/aFarkas/html5shiv#installation) for the simplest usage).
 
-<p>This sounds like a pain to deal with, but fortunately there is a {{glossary("polyfill")}} available that does the necessary fixes for you, and more besides — see <a href="https://github.com/aFarkas/html5shiv">HTML5Shiv</a> for all the details (see <a href="https://github.com/aFarkas/html5shiv#installation">manual installation</a> for the simplest usage).</p>
+#### Selector support
 
-<h4 id="Selector_support">Selector support</h4>
+Of course, no CSS features will apply at all if you don't use the right [selectors](/ru/docs/Learn/CSS/Introduction_to_CSS/Selectors) to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.
 
-<p>Of course, no CSS features will apply at all if you don't use the right <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">selectors</a> to select the element you want to style! If you just write a selector incorrectly so the styling isn't as expected in any browser, you'll just need to troubleshoot and work out what is wrong with your selector. We find that it is helpful to inspect the element you are trying to style using your browser's dev tools, then look at the DOM tree breadcrumb trail that DOM inspectors tend to provide to see if your selector makes sense compared to it.</p>
+For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:
 
-<p>For example, in the Firefox dev tools, you get this kind of output at the bottom of the DOM inspector:</p>
+![](https://mdn.mozillademos.org/files/14139/dom-breadcrumb-trail.png)
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14139/dom-breadcrumb-trail.png" style="display: block; height: 24px; margin: 0px auto; width: 448px;"></p>
+If for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired:
 
-<p>If for example you were trying to use this selector, you'd be able to see that it wouldn't select the input element as desired:</p>
+```css
+form > #date
+```
 
-<pre class="brush: css">form &gt; #date</pre>
+(The `date` form input isn't directly inside the `<form>`; you'd be better off using a general descendant selector instead of a child selector).
 
-<p>(The <code>date</code> form input isn't directly inside the <code>&lt;form&gt;</code>; you'd be better off using a general descendant selector instead of a child selector).</p>
+However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like [`:nth-of-type`](/en-US/docs/Web/CSS/:nth-of-type), [`:not`](/en-US/docs/Web/CSS/:not), [`::selection`](/en-US/docs/Web/CSS/::selection), etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's [Selectivizr](http://selectivizr.com/) library — this is a small JavaScript library that works on top of an existing JavaScript library like [jQuery](http://jquery.com/) or [MooTools](http://mootools.net/).
 
-<p>However, another issue that appears in versions of IE older than 9 is that none of the newer selectors (mainly pseudo-classes and pseudo-elements like <code><a href="/en-US/docs/Web/CSS/:nth-of-type">:nth-of-type</a></code>, <code><a href="/en-US/docs/Web/CSS/:not">:not</a></code>, <code><a href="/en-US/docs/Web/CSS/::selection">::selection</a></code>, etc.) work. If you want to use these in your CSS and you need to support older IE versions, a good move is to use Keith Clark's <a href="http://selectivizr.com/">Selectivizr</a> library — this is a small JavaScript library that works on top of an existing JavaScript library like <a href="http://jquery.com/">jQuery</a> or <a href="http://mootools.net/">MooTools</a>.</p>
+1.  To try this example, make a local copy of [selectivizr-example-start.html](https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html). If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with `p:first-child`, which won't work in old versions of IE.
+2.  Now download [MooTools](http://mootools.net/) and [Selectivizr](http://selectivizr.com/), and save them in the same directory as your sample HTML.
+3.  Put the following code into the head of your HTML document, just before the opening `<style>` tag:
 
-<ol>
- <li>To try this example, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/tools-testing/cross-browser-testing/html-css/selectivizr-example-start.html">selectivizr-example-start.html</a>. If you look at this running live, you'll see that it contains two paragraphs, one of which is styled. We've selected the paragraph with <code>p:first-child</code>, which won't work in old versions of IE.</li>
- <li>Now download <a href="http://mootools.net/">MooTools</a> and <a href="http://selectivizr.com/">Selectivizr</a>, and save them in the same directory as your sample HTML.</li>
- <li>Put the following code into the head of your HTML document, just before the opening <code>&lt;style&gt;</code> tag:
-  <pre class="brush: html">&lt;script type="text/javascript" src="MooTools-Core-1.6.0.js"&gt;&lt;/script&gt;
-    &lt;!--[if (gte IE 6)&amp;(lte IE 8)]&gt;
-      &lt;script type="text/javascript" src="selectivizr-min.js"&gt;&lt;/script&gt;
-    &lt;![endif]--&gt;</pre>
- </li>
-</ol>
+    ```html
+    <script type="text/javascript" src="MooTools-Core-1.6.0.js"></script>
+        <!--[if (gte IE 6)&(lte IE 8)]>
+          <script type="text/javascript" src="selectivizr-min.js"></script>
+        <![endif]-->
+    ```
 
-<p>If you try running this in an old version of IE, it should work fine.</p>
+If you try running this in an old version of IE, it should work fine.
 
-<p><img alt="" src="https://mdn.mozillademos.org/files/14137/new-selector-ie7.png" style="border-style: solid; border-width: 1px; display: block; height: 516px; margin: 0px auto; width: 771px;"></p>
+![](https://mdn.mozillademos.org/files/14137/new-selector-ie7.png)
 
-<h4 id="Handling_CSS_prefixes">Handling CSS prefixes</h4>
+#### Handling CSS prefixes
 
-<p>Another set of problems comes with CSS prefixes — these are a mechanism orignally used to allow browser vendors to implement their own version of a CSS (or JavaScript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. So for example:</p>
+Another set of problems comes with CSS prefixes — these are a mechanism orignally used to allow browser vendors to implement their own version of a CSS (or JavaScript) feature while the technology is in an experimental state, so they can play with it and get it right without conflicting with other browser's implementations, or the final unprefixed implementations. So for example:
 
-<ul>
- <li>Mozilla uses <code>-moz-</code></li>
- <li>Chrome/Opera/Safari use <code>-webkit-</code></li>
- <li>Microsoft uses <code>-ms-</code></li>
-</ul>
+- Mozilla uses `-moz-`
+- Chrome/Opera/Safari use `-webkit-`
+- Microsoft uses `-ms-`
 
-<p>Here's some examples:</p>
+Here's some examples:
 
-<pre class="brush: css">-webkit-transform: rotate(90deg);
+```css
+-webkit-transform: rotate(90deg);
 
 background-image: -moz-linear-gradient(left,green,yellow);
 background-image: -webkit-gradient(linear,left center,right center,from(green),to(yellow));
 background-image: linear-gradient(to right,green,yellow);
-</pre>
+```
 
-<p>The first line shows a {{cssxref("transform")}} property with a <code>-webkit-</code> prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).</p>
+The first line shows a {{cssxref("transform")}} property with a `-webkit-` prefix — this was needed to make transforms work in Chrome, etc. until the feature was finalized and such browsers added a prefix-free version of the property (at the time of writing, Chrome supported both versions).
 
-<p>The last three lines show three different versions of the <code><a href="/en-US/docs/Web/CSS/linear-gradient">linear-gradient()</a></code> function, which is used to generate a linear gradient in the background of an element:</p>
+The last three lines show three different versions of the [`linear-gradient()`](/en-US/docs/Web/CSS/linear-gradient) function, which is used to generate a linear gradient in the background of an element:
 
-<ol>
- <li>The first one has a <code>-moz-</code> prefix, and shows a slightly older version of the syntax (Firefox)</li>
- <li>The second one has a <code>-webkit-</code> prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the WebKit engine).</li>
- <li>The third one has no prefix, and shows the final version of the syntax (included in the <a href="https://drafts.csswg.org/css-images-3/#linear-gradients">CSS Image Values and Replaced Content Module Level 3 spec</a>, which defines this feature).</li>
-</ol>
+1.  The first one has a `-moz-` prefix, and shows a slightly older version of the syntax (Firefox)
+2.  The second one has a `-webkit-` prefix, and shows an even older, proprietary version of the syntax (this is actually from a really old version of the WebKit engine).
+3.  The third one has no prefix, and shows the final version of the syntax (included in the [CSS Image Values and Replaced Content Module Level 3 spec](https://drafts.csswg.org/css-images-3/#linear-gradients), which defines this feature).
 
-<p>Prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. This is particularly a problem when developers decide to only use say, the <code>-webkit- </code>version of a property — meaning that the site won't work in other browsers. This actually happens so much that other browsers have started to implement <code>-webkit-</code> prefixed versions of various CSS properties, so they will work with such code. Usage of prefixes by browser vendors has declined recently precisely because of these types of problems, but there are still some that need attention.</p>
+Prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. This is particularly a problem when developers decide to only use say, the `-webkit- `version of a property — meaning that the site won't work in other browsers. This actually happens so much that other browsers have started to implement `-webkit-` prefixed versions of various CSS properties, so they will work with such code. Usage of prefixes by browser vendors has declined recently precisely because of these types of problems, but there are still some that need attention.
 
-<p>If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes on MDN reference pages, and sites like <a href="http://caniuse.com/">caniuse.com</a>. If you are unsure, you can also find out by doing some testing directly in browsers.</p>
+If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes on MDN reference pages, and sites like [caniuse.com](http://caniuse.com/). If you are unsure, you can also find out by doing some testing directly in browsers.
 
-<p>Try this simple example:</p>
+Try this simple example:
 
-<ol>
- <li>Open up google.com, or another site that has a prominent heading or other block level element.</li>
- <li>Right/Cmd + click on the element in question and choose Inspect/Inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the DOM inspector.</li>
- <li>Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of <code>hplogo</code>.</li>
- <li>Store a reference to this element in a variable, for example:
-  <pre class="brush: js">var test = document.getElementById('hplogo');</pre>
- </li>
- <li>Now try to set a new value for the CSS property you are interested in on that element; you can do this using the <a href="/en-US/docs/Web/API/HTMLElement/style">style</a> property of the element, for example try typing these into the JavaScript console:
-  <pre class="brush: js">test.style.transform = 'rotate(90deg)'
-test.style.webkitTransform = 'rotate(90deg)'</pre>
- </li>
-</ol>
+1.  Open up google.com, or another site that has a prominent heading or other block level element.
+2.  Right/Cmd + click on the element in question and choose Inspect/Inspect element (or whatever the option is in your browser) — this should open up the dev tools in your browser, with the element highlighted in the DOM inspector.
+3.  Look for a feature you can use to select that element. For example, at the time of writing, the main Google logo had an ID of `hplogo`.
+4.  Store a reference to this element in a variable, for example:
 
-<p>As you start to type the property name representation after the second dot (note that in JavaScript, CSS property names are written in lower camel case, not hyphenated), the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. This is useful for finding out what versions of the property are implemented in that browser.</p>
+    ```js
+    var test = document.getElementById('hplogo');
+    ```
 
-<p>At the time of writing, both Firefox and Chrome implemented <code>-webkit-</code> prefixed and non-prefixed versions of {{cssxref("transform")}}!</p>
+5.  Now try to set a new value for the CSS property you are interested in on that element; you can do this using the [style](/ru/docs/Web/API/HTMLElement/style) property of the element, for example try typing these into the JavaScript console:
 
-<p>Once you've found out which prefixes you need to support, you should write them all out in your CSS, for example:</p>
+    ```js
+    test.style.transform = 'rotate(90deg)'
+    test.style.webkitTransform = 'rotate(90deg)'
+    ```
 
-<pre class="brush: css">-ms-transform: rotate(90deg);
+As you start to type the property name representation after the second dot (note that in JavaScript, CSS property names are written in lower camel case, not hyphenated), the JavaScript console should begin to autocomplete the names of the properties that exist in the browser and match what you've written so far. This is useful for finding out what versions of the property are implemented in that browser.
+
+At the time of writing, both Firefox and Chrome implemented `-webkit-` prefixed and non-prefixed versions of {{cssxref("transform")}}!
+
+Once you've found out which prefixes you need to support, you should write them all out in your CSS, for example:
+
+```css
+-ms-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
-transform: rotate(90deg);</pre>
+transform: rotate(90deg);
+```
 
-<p>This ensures that all browsers that support any of the above forms of the property can make the feature work. It is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible. If for example a browser implements both the <code>-webkit-</code> version and the non-prefixed version,  it will first apply the <code>-webkit-</code> version, then override it with the non-prefixed version. You want it to happen this way round, not the other way round.</p>
+This ensures that all browsers that support any of the above forms of the property can make the feature work. It is worth putting the non-prefixed version last, because that will be the most up-to-date version, which you'll want browsers to use if possible. If for example a browser implements both the `-webkit-` version and the non-prefixed version, it will first apply the `-webkit-` version, then override it with the non-prefixed version. You want it to happen this way round, not the other way round.
 
-<p>Of course, doing this for lots of different CSS rules can get really tedious. It is better to use an automation tool to do it for you. And such tools exist:</p>
+Of course, doing this for lots of different CSS rules can get really tedious. It is better to use an automation tool to do it for you. And such tools exist:
 
-<p>The <a href="http://leaverou.github.io/prefixfree/">prefix-free JavaScript library</a> can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate. It is really easy and convenient to use, although it does have some downsides (see the link above for details), and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site.</p>
+The [prefix-free JavaScript library](http://leaverou.github.io/prefixfree/) can be attached to a page, and will automatically detect what capabilities are possessed by browsers viewing the page and add prefixes as appropriate. It is really easy and convenient to use, although it does have some downsides (see the link above for details), and it is arguable that parsing every stylesheet in your site and add prefixes at run time can be a drain on the computer's processing power for a large site.
 
-<p>Another solution is to add prefixes automatically during development, and this (and other things besides) can be done using tools like <a href="https://github.com/postcss/autoprefixer">Autoprefixer</a> and <a href="http://postcss.org/">PostCSS</a>. These tools can be used in a variety of ways, for example Autoprefixer has an <a href="http://autoprefixer.github.io/">online version</a> that allows you to enter your non-prefixed CSS on the left, and gives you a prefix-added version on the right. You can choose which browsers you want to make sure you support using the notation outlined in <a href="https://github.com/postcss/autoprefixer#options">Autoprefixer options</a>; also see <a href="https://github.com/ai/browserslist#queries">Browserslist queries</a>, which this is based on, for more detail. As an example, the following query will select the last 2 versions of all major browsers and versions of IE above 9.</p>
+Another solution is to add prefixes automatically during development, and this (and other things besides) can be done using tools like [Autoprefixer](https://github.com/postcss/autoprefixer) and [PostCSS](http://postcss.org/). These tools can be used in a variety of ways, for example Autoprefixer has an [online version](http://autoprefixer.github.io/) that allows you to enter your non-prefixed CSS on the left, and gives you a prefix-added version on the right. You can choose which browsers you want to make sure you support using the notation outlined in [Autoprefixer options](https://github.com/postcss/autoprefixer#options); also see [Browserslist queries](https://github.com/ai/browserslist#queries), which this is based on, for more detail. As an example, the following query will select the last 2 versions of all major browsers and versions of IE above 9.
 
-<pre>last 2 versions, ie &gt; 9</pre>
+```
+last 2 versions, ie > 9
+```
 
-<p>Autoprefixer can also be used in other, more convenient ways — see <a href="https://github.com/postcss/autoprefixer#usage">Autoprefixer usage</a>. For example you can use it with a task runner/build tool such as <a href="http://gulpjs.com/">Gulp</a> or <a href="https://webpack.github.io/">Webpack</a> to automatically add prefixes once development has been done. (Explaining how these work is somewhat beyond the scope of this article.)</p>
+Autoprefixer can also be used in other, more convenient ways — see [Autoprefixer usage](https://github.com/postcss/autoprefixer#usage). For example you can use it with a task runner/build tool such as [Gulp](http://gulpjs.com/) or [Webpack](https://webpack.github.io/) to automatically add prefixes once development has been done. (Explaining how these work is somewhat beyond the scope of this article.)
 
-<p>You can also use a plugin for a text editor such as Atom or Sublime text. For example, in Atom:</p>
+You can also use a plugin for a text editor such as Atom or Sublime text. For example, in Atom:
 
-<ol>
- <li>You can install it by going to <em>Preferences &gt; Install</em>, searching for <em>Autoprefixer</em>, then hitting install.</li>
- <li>You can set a browser query by pressing the Autoprefixer <em>Settings</em> button and entering the query in the text field in the <em>Settings</em> section on the page.</li>
- <li>In your code, you can select sections of CSS you want to add prefixes to, open the command pallette (<em>Cmd/Ctrl + Shift + P</em>), then type in Autoprefixer and select the Autoprefixer result that autocompletes.</li>
-</ol>
+1.  You can install it by going to _Preferences > Install_, searching for _Autoprefixer_, then hitting install.
+2.  You can set a browser query by pressing the Autoprefixer _Settings_ button and entering the query in the text field in the _Settings_ section on the page.
+3.  In your code, you can select sections of CSS you want to add prefixes to, open the command pallette (_Cmd/Ctrl + Shift + P_), then type in Autoprefixer and select the Autoprefixer result that autocompletes.
 
-<p>As an example, we entered the following code:</p>
+As an example, we entered the following code:
 
-<pre class="brush: css">body {
+```css
+body {
   display: flex;
-}</pre>
+}
+```
 
-<p>We highlighted it and ran the Autoprefixer command, and it replaced it with this:</p>
+We highlighted it and ran the Autoprefixer command, and it replaced it with this:
 
-<pre class="brush: css">body {
+```css
+body {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-}</pre>
-
-<h3 id="Layout_issues">Layout issues</h3>
-
-<p>Another problem that might come up is differences in layouts between browsers. Historically this used to be much more of a problem, but recently, with modern browsers tending to support CSS more consistently, layout issues tend to be more commonly associated with:</p>
+}
+```
 
-<ul>
- <li>Lack of (or differences in) support for modern layout features.</li>
- <li>Layouts not looking good in mobile browsers (i.e. responsive design problems).</li>
-</ul>
+### Layout issues
 
-<div class="note">
-<p><strong>Note</strong>: Historically web developers used to use CSS files called resets, which removed all the default browser styling applied to HTML, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout. However, it has more recently been seen as overkill. The best equivalent we have in modern times is <a href="https://necolas.github.io/normalize.css/">normalize.css</a>, a neat bit of CSS that builds slightly on the default browser styling to make things more consistent and fix some layout issues. You are advised to apply normalize.css to all your HTML pages.</p>
-</div>
+Another problem that might come up is differences in layouts between browsers. Historically this used to be much more of a problem, but recently, with modern browsers tending to support CSS more consistently, layout issues tend to be more commonly associated with:
 
-<div class="note">
-<p><strong>Note</strong>:  When trying to track down a tricky layout issue, a good technique is to add a brightly colored {{cssxref("outline")}} to the offending element, or all the elements nearby. This makes it a lot easier to see where everything is placed. See <a href="http://www.otsukare.info/2016/10/05/debugging-css" rel="bookmark" title="Permalink to Debug your CSS with outline visualizations.">Debug your CSS with outline visualizations</a> for more details.</p>
-</div>
+- Lack of (or differences in) support for modern layout features.
+- Layouts not looking good in mobile browsers (i.e. responsive design problems).
 
-<h4 id="Support_for_new_layout_features">Support for new layout features</h4>
+> **Примечание:** Historically web developers used to use CSS files called resets, which removed all the default browser styling applied to HTML, and then applied their own styles for everything over the top — this was done to make styling on a project more consistent, and reduce possible cross browser issues, especially for things like layout. However, it has more recently been seen as overkill. The best equivalent we have in modern times is [normalize.css](https://necolas.github.io/normalize.css/), a neat bit of CSS that builds slightly on the default browser styling to make things more consistent and fix some layout issues. You are advised to apply normalize.css to all your HTML pages.
 
-<p>Much of the layout work on the web today is done using <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">floats</a> — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox">Why Flexbox?</a>)</p>
+> **Примечание:** When trying to track down a tricky layout issue, a good technique is to add a brightly colored {{cssxref("outline")}} to the offending element, or all the elements nearby. This makes it a lot easier to see where everything is placed. See [Debug your CSS with outline visualizations](http://www.otsukare.info/2016/10/05/debugging-css "Permalink to Debug your CSS with outline visualizations.") for more details.
 
-<p>More recently, dedicated layout mechanisms have appeared, like <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout">CSS Grids</a>, which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:</p>
+#### Support for new layout features
 
-<ul>
- <li>CSS grids are very new; at the time of writing, they were only <a href="http://gridbyexample.com/browsers/">supported</a> in the very newest versions of modern browsers.</li>
- <li>Flexbox is <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility">well-supported</a> in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see <a href="https://dev.opera.com/articles/advanced-cross-browser-flexbox/">Advanced Cross-Browser Flexbox</a> to get an idea).</li>
-</ul>
+Much of the layout work on the web today is done using [floats](/ru/docs/Learn/CSS/CSS_layout/Floats) — this is because floats are well-supported (way back to IE4, albeit with a number of bugs that would also need to be investigated if you were to try to support IE that far back). However, they are not really meant for layout purposes — using floats the way we do is really a hack — and they do have some serious limitations (e.g. see [Why Flexbox?](/ru/docs/Learn/CSS/CSS_layout/Flexbox#Why_Flexbox))
 
-<p>Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).</p>
+More recently, dedicated layout mechanisms have appeared, like [Flexbox](/ru/docs/Learn/CSS/CSS_layout/Flexbox) and [CSS Grids](/ru/docs/Learn/CSS/CSS_layout/Grids#Native_CSS_Grids_with_Grid_Layout), which make common layout tasks far easier and remove such shortcomings. These however are not as well-supported in browsers:
 
-<p>For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.</p>
+- CSS grids are very new; at the time of writing, they were only [supported](http://gridbyexample.com/browsers/) in the very newest versions of modern browsers.
+- Flexbox is [well-supported](/ru/docs/Learn/CSS/CSS_layout/Flexbox#Cross_browser_compatibility) in modern browsers, but provides problems in older browsers. IE 9 doesn't support it at all, and IE 10 and old versions of iOS/desktop Safari respectively support incompatible old versions of the flexbox spec. This results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see [Advanced Cross-Browser Flexbox](https://dev.opera.com/articles/advanced-cross-browser-flexbox/) to get an idea).
 
-<div class="note">
-<p><strong>Note</strong>: There is a fairly new feature in CSS called <code><a href="/en-US/docs/Web/CSS/@supports">@supports</a></code>, which allows you to implement native feature detection tests.</p>
-</div>
+Layout features aren't as easy to provide graceful fallbacks for than simple colors, shadows, or gradients. If layout properties are ignored, your entire design will likely fall to pieces. Because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the result (we will cover feature detection in detail in a later article).
 
-<h4 id="Responsive_design_problems">Responsive design problems</h4>
+For example, you could apply a flexbox layout to modern browsers, then instead apply a floated layout to older browsers that don't support flexbox.
 
-<p>Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using <a href="/en-US/docs/Web/CSS/Media_Queries">media queries</a>, and make sure it is applied correctly using <a href="/en-US/docs/Mozilla/Mobile/Viewport_meta_tag">viewport</a>. You can find a detailed account of such practices in <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">The building blocks of responsive design</a>.</p>
+> **Примечание:** There is a fairly new feature in CSS called [`@supports`](/en-US/docs/Web/CSS/@supports), which allows you to implement native feature detection tests.
 
-<p>Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple <a href="/en-US/Apps/Progressive/Responsive/Mobile_first">mobile first media queries</a>, to more complex <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes">responsive image techniques</a>.</p>
+#### Responsive design problems
 
-<p>Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like <a href="https://code.google.com/archive/p/css3-mediaqueries-js/">css3-mediaqueries-js</a>, or <a href="https://github.com/scottjehl/Respond">Respond.js</a>.</p>
+Responsive design is the practice of creating web layouts that change to suit different device form factors — for example different screen widths, orientations (portrait or landscape), or resolutions. A desktop layout for example will look terrible when viewed on a mobile device, so you need to provide a suitable mobile layout using [media queries](/ru/docs/Web/CSS/Media_Queries), and make sure it is applied correctly using [viewport](/ru/docs/Mozilla/Mobile/Viewport_meta_tag). You can find a detailed account of such practices in [The building blocks of responsive design](/ru/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks).
 
-<h2 id="Finding_help">Finding help</h2>
+Resolution is a big issue too — for example, mobile devices are less likely to need big heavy images than desktop computers, and are more likely to have slower internet connections and possibly even expensive data plans that make wasted bandwidth more of a problem. In addition, different devices can have a range of different resolutions, meaning that smaller images could appear pixellated. There are a number of techniques that allow you to work around such problems, from simple [mobile first media queries](/en-US/Apps/Progressive/Responsive/Mobile_first), to more complex [responsive image techniques](/ru/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Resolution_switching_Different_sizes).
 
-<p>There are many other issues you'll encounter with HTML and CSS; the most important thing to know really is how to find answers online.</p>
+Another difficulty that can present problems is browser support for the features that make the above techniques possible. media queries are not supported in IE 8 or less, so if you want to use a mobile first layout and have the desktop layout then apply to old IE versions, you'll have to apply a media query {{glossary("polyfill")}} to your page, like [css3-mediaqueries-js](https://code.google.com/archive/p/css3-mediaqueries-js/), or [Respond.js](https://github.com/scottjehl/Respond).
 
-<p>Among the best sources of support information are the Mozilla Developer Network (that's where you are now!), <a href="http://stackoverflow.com/">stackoverflow.com</a>, and <a href="http://caniuse.com/">caniuse.com</a>.</p>
+## Finding help
 
-<p>To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:</p>
+There are many other issues you'll encounter with HTML and CSS; the most important thing to know really is how to find answers online.
 
-<ul>
- <li>Reference material with browser support information for client-side web technologies, e.g. the <a href="/en-US/docs/Web/HTML/Element/video">&lt;video&gt; reference page</a>.</li>
- <li>Other supporting reference material, e.g. <a href="/en-US/docs/Web/HTML/Supported_media_formats">Media formats supported by the HTML audio and video elements</a>.</li>
- <li>Useful tutorials that solve specific problems, for example <a href="/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player">Creating a cross-browser video player</a>.</li>
-</ul>
+Among the best sources of support information are the Mozilla Developer Network (that's where you are now!), [stackoverflow.com](http://stackoverflow.com/), and [caniuse.com](http://caniuse.com/).
 
-<p><a href="http://caniuse.com/">caniuse.com</a> provides support information, along with a few useful external resource links. For example, see <a href="http://caniuse.com/#search=video">http://caniuse.com/#search=video</a> (you just have to enter the feature you are searching for into the text box).</p>
+To use the Mozilla Developer Network (MDN), most people do a search engine search of the technology they are trying to find information on, plus the term "mdn", for example "mdn HTML5 video". MDN contains several useful types of content:
 
-<p><a href="http://stackoverflow.com/">stackoverflow.com</a> (SO) is a forum site where you can ask questions and have fellow developers share their solutions, look up previous posts, and help other developers. You are advised to look and see if there is an answer to your question already, before posting a new question. For example, we searched for "cross browser html5 video" on SO, and very quickly came up with <a class="question-hyperlink" href="http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility">HTML5 Video with full cross browser compatibility</a>.</p>
+- Reference material with browser support information for client-side web technologies, e.g. the [\<video> reference page](/ru/docs/Web/HTML/Element/video).
+- Other supporting reference material, e.g. [Media formats supported by the HTML audio and video elements](/ru/docs/Web/HTML/Supported_media_formats).
+- Useful tutorials that solve specific problems, for example [Creating a cross-browser video player](/ru/docs/Web/Apps/Fundamentals/Audio_and_video_delivery/cross_browser_video_player).
 
-<p>Aside from that, try searching your favourite search engine for an answer to your problem. It is often useful to search for specific error messages if you have them — other developers will be likely to have had the same problems as you.</p>
+[caniuse.com](http://caniuse.com/) provides support information, along with a few useful external resource links. For example, see <http://caniuse.com/#search=video> (you just have to enter the feature you are searching for into the text box).
 
-<h2 id="Summary">Summary</h2>
+[stackoverflow.com](http://stackoverflow.com/) (SO) is a forum site where you can ask questions and have fellow developers share their solutions, look up previous posts, and help other developers. You are advised to look and see if there is an answer to your question already, before posting a new question. For example, we searched for "cross browser html5 video" on SO, and very quickly came up with [HTML5 Video with full cross browser compatibility](http://stackoverflow.com/questions/16212510/html5-video-with-full-cross-browser-compatibility).
 
-<p>Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them.</p>
+Aside from that, try searching your favourite search engine for an answer to your problem. It is often useful to search for specific error messages if you have them — other developers will be likely to have had the same problems as you.
 
-<p>{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+## Summary
 
-<p> </p>
+Now you should be familiar with the main types of cross browser HTML and CSS problems that you'll meet in web development, and how to go about fixing them.
 
-<h2 id="In_this_module">In this module</h2>
+{{PreviousMenuNext("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies","Learn/Tools_and_testing/Cross_browser_testing/JavaScript", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
-</ul>
+## In this module
 
-<p> </p>
+- [Introduction to cross browser testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
+- [Strategies for carrying out testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
+- [Handling common HTML and CSS problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
+- [Handling common JavaScript problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
+- [Handling common accessibility problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
+- [Implementing feature detection](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+- [Introduction to automated testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
+- [Setting up your own test automation environment](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/index.md
index b0343d2a99c6d0..a06ad0963e2d5d 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/index.md
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/index.md
@@ -3,32 +3,30 @@ title: Кросс-браузерное тестирование
 slug: Learn/Tools_and_testing/Cross_browser_testing
 translation_of: Learn/Tools_and_testing/Cross_browser_testing
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Этот модуль фокусируется на тестировании веб-проектов в разных браузерах. Мы рассматриваем идентификацию вашей целевой аудитории (например о каких пользователях, браузерах и устройствах вам больше всего нужно беспокоиться?), Как пройти тестирование, основные проблемы, с которыми вам придётся столкнуться с разными типами кода и способы смягчения их, какие инструменты наиболее полезны для помощи в тестировании и устранении проблем, а также о том, как использовать автоматизацию для ускорения тестирования.</p>
+Этот модуль фокусируется на тестировании веб-проектов в разных браузерах. Мы рассматриваем идентификацию вашей целевой аудитории (например о каких пользователях, браузерах и устройствах вам больше всего нужно беспокоиться?), Как пройти тестирование, основные проблемы, с которыми вам придётся столкнуться с разными типами кода и способы смягчения их, какие инструменты наиболее полезны для помощи в тестировании и устранении проблем, а также о том, как использовать автоматизацию для ускорения тестирования.
 
-<h2 id="Предпосылки">Предпосылки</h2>
+## Предпосылки
 
-<p>Сначала вы должны изучить основы  <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>,<a href="/en-US/docs/Learn/JavaScript">JavaScript</a> языков  прежде чем пытаться использовать инструменты,  описанные здесь.</p>
+Сначала вы должны изучить основы [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS),[JavaScript](/ru/docs/Learn/JavaScript) языков прежде чем пытаться использовать инструменты, описанные здесь.
 
-<h2 id="Руководства">Руководства</h2>
+## Руководства
 
-<dl>
- <dt><a href="/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Введение в кросс-браузерное тестирование</a></dt>
- <dd>Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространёнными типами проблем вы столкнётесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Стратегии проведения тестирования</a></dt>
- <dd>Затем мы углубимся в тестирование, рассматривая целевую аудиторию (например какие браузеры, устройства и другие сегменты должны проверяться), стратегии тестирования низкого уровня (получить себе множество устройств и некоторых виртуальных машин и делать специальные тесты, когда это необходимо), стратегии более высоких технологий (автоматизация, использование специальных тестовых приложений) и тестирование с помощью групп пользователей.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Рассмотрим общие проблемы HTML и CSS</a></dt>
- <dd>С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдёте в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Рассмотрим общие проблемы JavaScript</a></dt>
- <dd>Теперь мы рассмотрим общие проблемы JavaScript в браузере и как их исправить. Это включает в себя информацию об использовании инструментов браузера для отслеживания и устранения неполадок, используя полифилы и библиотеки для решения проблем, получения современных функций JavaScript, работающих в старых браузерах, и многое другое.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Рассмотрим общие проблемы доступности</a></dt>
- <dd>Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространённых проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Внедрение свойства обнаружения</a></dt>
- <dd>Свойство выявления включает в себя разработку того, поддерживает ли браузер определённый блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как  <code>@supports</code>.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Введение в автоматизированное тестирование</a></dt>
- <dd>Введение в автоматизированное тестирование<br>
- Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоёмким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Настройка собственной среды автоматизации тестирования</a></dt>
- <dd>В этой статье мы научим вас, как установить свою собственную среду автоматизации и запустить собственные тесты с помощью Selenium / WebDriver и библиотеки тестирования, такой как selenium-webdriver для Node. Мы также рассмотрим, как интегрировать локальную тестовую среду с коммерческими приложениями, такими как те, которые обсуждались в предыдущей статье.</dd>
-</dl>
+- [Введение в кросс-браузерное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
+  - : Этот модуль начинается с обзора темы кросс-браузерного тестирования и отвечает на такие вопросы, как «что такое кросс-браузерное тестирование?», «с какими наиболее распространёнными типами проблем вы столкнётесь?» и «каковы основные подходы к тестированию, выявлению и устранению проблем?"
+- [Стратегии проведения тестирования](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
+  - : Затем мы углубимся в тестирование, рассматривая целевую аудиторию (например какие браузеры, устройства и другие сегменты должны проверяться), стратегии тестирования низкого уровня (получить себе множество устройств и некоторых виртуальных машин и делать специальные тесты, когда это необходимо), стратегии более высоких технологий (автоматизация, использование специальных тестовых приложений) и тестирование с помощью групп пользователей.
+- [Рассмотрим общие проблемы HTML и CSS](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
+  - : С набором сценариев, мы теперь рассмотрим общие кроссбраузерные проблемы, которые вы найдёте в коде HTML и CSS, и какие инструменты можно использовать для предотвращения возникновения проблем или устранения возникающих проблем. Это включает в себя листинг кода, передачу префиксов CSS, использование инструментов браузера dev tools для устранения проблем, использование полифилов для добавления поддержки в браузеры, решение проблем с отзывчивым дизайном и многое другое.
+- [Рассмотрим общие проблемы JavaScript](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
+  - : Теперь мы рассмотрим общие проблемы JavaScript в браузере и как их исправить. Это включает в себя информацию об использовании инструментов браузера для отслеживания и устранения неполадок, используя полифилы и библиотеки для решения проблем, получения современных функций JavaScript, работающих в старых браузерах, и многое другое.
+- [Рассмотрим общие проблемы доступности](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
+  - : Затем мы обращаем наше внимание на доступность, предоставляя информацию о распространённых проблемах, как сделать простое тестирование, и как использовать инструменты аудита/автоматизации для поиска проблем доступности.
+- [Внедрение свойства обнаружения](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+  - : Свойство выявления включает в себя разработку того, поддерживает ли браузер определённый блок кода, и работает ли другой код, зависящий от того, делает он (или нет), чтобы браузер всегда мог обеспечить рабочую силу, а также сбои / ошибки в некоторых браузерах. В этой статье описывается, как написать собственную простую функцию выявления, как использовать библиотеку для ускорения реализации и встроенные функции для обнаружения функций, такие как `@supports`.
+- [Введение в автоматизированное тестирование](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
+  - : Введение в автоматизированное тестирование
+    Вручную запускать тесты на нескольких браузерах и устройствах, несколько раз в день, может стать утомительным и трудоёмким. Чтобы эффективно справляться с этим, вы должны ознакомиться с инструментами автоматизации. В этой статье мы рассмотрим, что доступно, как использовать задачи, а также основы использования коммерческих приложений для автоматизации тестирования браузера, таких как Sauce Labs и Browser Stack.
+- [Настройка собственной среды автоматизации тестирования](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
+  - : В этой статье мы научим вас, как установить свою собственную среду автоматизации и запустить собственные тесты с помощью Selenium / WebDriver и библиотеки тестирования, такой как selenium-webdriver для Node. Мы также рассмотрим, как интегрировать локальную тестовую среду с коммерческими приложениями, такими как те, которые обсуждались в предыдущей статье.
diff --git a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md
index bf9e431cb7fa33..fcf8ec42f69897 100644
--- a/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md
+++ b/files/ru/learn/tools_and_testing/cross_browser_testing/introduction/index.md
@@ -5,199 +5,164 @@ tags:
   - тестирование
 translation_of: Learn/Tools_and_testing/Cross_browser_testing/Introduction
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<div>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</div>
+Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"
 
-<p class="summary">Эта статья начинает модуль с обзора темы кросс-браузерного тестирования, отвечая на такие вопросы как "что такое кросс-браузерное тестирование?", "с какими распространёнными проблемами можно столкнуться?" и "какие основные подходы для тестирования, обнаружения и исправления проблем существуют?"</p>
+| Необходимые условия: | Знакомство с основами [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), и [JavaScript](/ru/docs/Learn/JavaScript). |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------------ |
+| Цель:                | Улучшить понимание идей кроссбраузерного тестирования.                                                                   |
 
-<table>
- <tbody>
-  <tr>
-   <th scope="row">Необходимые условия:</th>
-   <td>Знакомство с основами <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, и <a href="/en-US/docs/Learn/JavaScript">JavaScript</a>.</td>
-  </tr>
-  <tr>
-   <th scope="row">Цель:</th>
-   <td>Улучшить понимание идей кроссбраузерного тестирования.</td>
-  </tr>
- </tbody>
-</table>
+## Что такое кросс-браузерное тестирование?
 
-<h2 id="Что_такое_кросс-браузерное_тестирование">Что такое кросс-браузерное тестирование?</h2>
+Кросс-браузерное тестирование - это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаёте, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:
 
-<p>Кросс-браузерное тестирование - это практика обеспечения уверенности в том, что веб-сайты и веб-приложения, которые вы создаёте, работают в приемлемом количестве браузеров. Обязанность веб-разработчика быть уверенным, что проект работает не только у вас, а у всех ваших пользователей, независимо от браузера, устройства, или других вспомогательных инструментов, которые они используют. Вы должны думать о:</p>
+- Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.
+- Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.
+- Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).
 
-<ul>
- <li>Других браузерах. Не тех нескольких, которые вы регулярно используете, а о довольно старых, которые некоторые люди могут использовать до сих пор, и которые не поддерживают современные возможности CSS и JavaScript.</li>
- <li>Разных устройствах с разными возможностями, начиная от последних лучших планшетов, смартфонов и "умных" телевизоров, до дешёвых устройств и самых старых смартфонов, в которых браузеры могут работать с ограниченными возможностями.</li>
- <li>Людях с инвалидностью, которые используют Web с помощью вспомогательных технологий, таких как скринридеры, или не используют мышь (некоторые используют только клавиатуру).</li>
-</ul>
+Поймите, что вы - не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей — нужно сделать много тестов!
 
-<p>Поймите, что вы - не ваши пользователи — если ваш сайт работает на Macbook Pro или Galaxy Nexus, это не значит, что он будет работать так для всех пользователей —  нужно сделать много тестов!</p>
+> **Примечание:** Статья [сделаем веб доступным для всех](https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/) предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.
 
-<div class="note">
-<p><strong>Примечание</strong>: Статья <a href="https://hacks.mozilla.org/2016/07/make-the-web-work-for-everyone/">сделаем веб доступным для всех</a> предоставляет более полезную информацию о различных браузерах, которые используют люди, их доле рынка и связанных с этим проблемах совместимости браузеров.</p>
-</div>
+Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.
 
-<p>Мы должны поговорить немного о терминологии. Для начала, когда мы говорим о сайтах, "работающих кросс-браузерной", на самом деле мы говорим о том, что они должны обеспечивать приемлемое удобство использования в разных браузерах. Это нормально, если сайт выглядит немного по-разному в разных браузерах, главное он должен обеспечивать полную функциональность.В современных браузерах вы можете сделать что-то анимированным или использовать 3D, тогда как в старых браузерах вы можете лишь показать плоскую картинку, предоставляющую ту же информацию. Если владелец сайта доволен, вы сделали своё дело.</p>
+С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.
 
-<p>С другой стороны, плохо, когда сайт полноценно работает для обычных людей, но может быть совершенно недоступен для людей, имеющих проблемы со зрением, т.к. их приложения для чтения экрана не могут распознать информацию на сайте.</p>
+Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. [Gotta test 'em all?](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.
 
-<p>Когда мы говорим "приемлемое количество браузеров", мы не говорим, что это должно быть 100% всех браузеров в мире — это почти невозможно. Вы можете собрать информацию о том, какими браузеры и устройства используют ваши пользователи (это мы обсудим во второй статье — см. <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">Gotta test 'em all?</a>), но это ничего не гарантирует. Как веб-разработчик, вы должны определить для себя несколько браузеров и устройств, на которых код должен работать полностью, но кроме этого, вы должны писать код так, чтобы и другие браузеры были способны максимально использовать ваш сайт (defensive coding). Это одна из самых больших проблем веб-разработки.</p>
+> **Примечание:** Мы разберём defensive coding позже в этом модуле.
 
-<div class="note">
-<p><strong>Примечание</strong>: Мы разберём defensive coding позже в этом модуле.</p>
-</div>
+## Почему возникают кросс-браузерные проблемы?
 
-<h2 id="Почему_возникают_кросс-браузерные_проблемы">Почему возникают кросс-браузерные проблемы?</h2>
+Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. [Отладка HTML](/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML), [Отладка CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS), and [Что пошло не так? Устранение ошибок JavaScript](/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так) из предыдущего раздела).
 
-<p>Есть множество причин, почему возникают кросс-браузерные проблемы, и, заметьте, что сейчас мы говорим о проблемах, при которых некоторые вещи ведут себя по-разному в разных браузерах / устройствах / настройках просмотра. Прежде чем вы столкнётесь с проблемами браузера, вы должны исправить все ошибки в коде (см. <a href="/ru/docs/Learn/HTML/Введение_в_HTML/Debugging_HTML">Отладка HTML</a>, <a href="/ru/docs/Learn/CSS/Introduction_to_CSS/Отладка_CSS">Отладка CSS</a>, and <a href="/ru/docs/Learn/JavaScript/Первые_шаги/Что_пошло_не_так">Что пошло не так? Устранение ошибок JavaScript</a> из предыдущего раздела).</p>
+Кросс-браузерные проблемы возникают потому-что:
 
-<p>Кросс-браузерные проблемы возникают потому-что:</p>
+- иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги всё же иногда возникают.
+- браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.
+- некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.
 
-<ul>
- <li>иногда браузеры содержат баги, или реализуют возможности по-разному. В настоящее время это не такая частая проблема, но когда IE4 и Netscape 4 конкурировали за право быть доминирующим браузером в 90-е, компании-разработчики браузеров умышленно реализовывали возможности по-своему в попытке получить конкурентное преимущество, что делало жизнь веб-разработчикам адом. Сейчас же браузеры гораздо жёстче соблюдают стандарты, но различия и баги всё же иногда возникают.</li>
- <li>браузеры имеют разную степень поддержи современных технологий. Это неизбежно, когда вы имеете дело с новейшими функциями, которые браузеры только начинают осваивать, или если вы вынуждены поддерживать очень старые браузеры, которые более не дорабатываются или которые могли быть заморожены (то есть в них не добавляют новый функционал) задолго до того, как придумали новые возможности. Например, если вы хотите использовать передовые возможности JavaScript на вашем сайте, то они могут не работать в старых браузерах. Если вам нужна поддержка старых браузеров, вы можете конвертировать ваш код под старый синтаксис, используя специальные компиляторы.</li>
- <li>некоторые устройства могут иметь ограничения, из-за которых сайт работает медленно или отображается неверно. Например, если сайт был спроектирован для просмотра на десктопных устройствах, он возможно будет выглядеть мелко и трудночитаемо на мобильных устройствах. Если ваш сайт содержит множество больших анимаций, это может быть хорошо на высокопроизводительных планшетах, но может быть вялым или резким на устройствах меньшей производительности.</li>
-</ul>
+а также другие причины.
 
-<p>а также другие причины.</p>
+В статьях далее, мы выясним основные проблемы кросс-браузерности и посмотрим на их решения.
 
-<p>В статьях далее, мы выясним основные проблемы кросс-браузерности и посмотрим на их решения.</p>
+## Инструменты для кросс-браузерного тестирования
 
-<h2 id="Инструменты_для_кросс-браузерного_тестирования">Инструменты для кросс-браузерного тестирования</h2>
+Может показаться, что тестирование - это затратно и страшно, но это важно — вы должны спланировать и убедиться, что вы делаете тесты в нужных местах, чтобы не было неожиданных проблем. Если вы работаете над большим проектом, вы должны тестировать его регулярно, чтобы убеждаться, что новые возможности работают корректно для вашей целевой аудитории, и что новый код не ломает старый функционал.
 
-<p>Может показаться, что тестирование - это затратно и страшно, но это важно — вы должны спланировать и убедиться, что вы делаете тесты в нужных местах, чтобы не было неожиданных проблем. Если вы работаете над большим проектом, вы должны тестировать его регулярно, чтобы убеждаться, что новые возможности работают корректно для вашей целевой аудитории, и что новый код не ломает старый функционал.</p>
+Если вы будете тестировать в конце проекта, любые не обнаруженные баги будут гораздо более затратными по времени для исправления, если бы вы их тестировали и обнаруживали своевременно.
 
-<p>Если вы будете тестировать в конце проекта, любые не обнаруженные баги будут гораздо более затратными по времени для исправления, если бы вы их тестировали и обнаруживали своевременно.</p>
+Рабочий процесс над тестированием и исправлением ошибок может быть разбит на следующие четыре фазы (очень грубое разделение - у разных людей этот процесс может очень сильно отличаться):
 
-<p>Рабочий процесс над тестированием и исправлением ошибок может быть разбит на следующие четыре фазы (очень грубое разделение - у разных людей этот процесс может очень сильно отличаться):</p>
+**Начальное планирование > Разработка > Тестирование > Исправление ошибок**
 
-<p><strong>Начальное планирование &gt; Разработка &gt; Тестирование &gt; Исправление ошибок</strong></p>
+Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности. Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберём то, что может происходить на каждом этапе.
 
-<p>Шаги 2-4 будут повторяться до тех пор, пока не будут реализованы все возможности. Мы рассмотрим различные элементы процесса тестирования более детально в следующих статьях, но пока давайте соберём то, что может происходить на каждом этапе.</p>
+### Начальное планирование
 
-<h3 id="Начальное_планирование">Начальное планирование</h3>
+На этом этапе у вас, возможно, будет несколько встреч с владельцем/заказчиком сайта (это может быть ваш босс или кто-то из другой компании, для кого вы пишете сайт), чтобы точно определить, каким должен быть сайт - какой контент и функциональность должны быть на сайте, как сайт должен выглядеть и т.д. На этом этапе вы также хотите знать сколько времени у вас есть на разработку и цену работы. Не хочется углубляться в детали, но такое планирование оказывает большое влияние на кросс-браузерное тестирование.
 
-<p>На этом этапе у вас, возможно, будет несколько встреч с владельцем/заказчиком сайта (это может быть ваш босс или кто-то из другой компании, для кого вы пишете сайт), чтобы точно определить, каким должен быть сайт - какой контент и функциональность должны быть на сайте, как сайт должен выглядеть и т.д. На этом этапе вы также хотите знать сколько времени у вас есть на разработку и цену работы. Не хочется углубляться в детали, но такое планирование  оказывает большое влияние на кросс-браузерное тестирование.</p>
+Once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.
 
-<p>Once you've got an idea of the required featureset, and what technologies you will likely build these features with, you should start exploring the target audience — what browsers, devices, etc. will the target audience for this site be using? The client might already have data about this from previous research they've done, e.g. from other web sites they own, or from previous versions of the web site you are now working on. If not, you will be able to get a good idea by looking at other sources, such as usage stats for competitors, or countries the site will be serving. You can also use a bit of intuition.</p>
+So for example, you might be building an e-commerce site that serves customers in North America. The site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.
 
-<p>So for example, you might be building an e-commerce site that serves customers in North America. The site should work entirely in the last few versions of the most popular desktop and mobile (iOS, Android, Windows phone) browsers — this should include Chrome (and Opera as it is based on the same rendering engine as Chrome), Firefox, IE/Edge, and Safari. It should also provide an acceptable experience on IE 8 and 9, and be accessible with WCAG AA compliance.</p>
+Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work in IE versions before 11. You'd have to agree to provide a version of the site without this feature to users of older IE versions.
 
-<p>Now you know your target testing platforms, you should go back and review the required featureset and what technologies you are going to use. For example, if the e-commerce site owner wants a WebGL-powered 3D tour of each product built into the product pages, they will need to accept that this just won't work in IE versions before 11. You'd have to agree to provide a version of the site without this feature to users of older IE versions.</p>
+You should compile a list of the potential problem areas.
 
-<p>You should compile a list of the potential problem areas.</p>
+> **Примечание:** You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult [caniuse.com](http://caniuse.com/), for some further useful details.
 
-<div class="note">
-<p><strong>Note</strong>: You can find browser support information for technologies by looking up the different features on MDN — the site you're on! You should also consult <a href="http://caniuse.com/">caniuse.com</a>, for some further useful details.</p>
-</div>
+Once you've agreed on these details, you can go ahead and start developing the site.
 
-<p>Once you've agreed on these details, you can go ahead and start developing the site.</p>
+### Development
 
-<h3 id="Development">Development</h3>
+Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.
 
-<p>Now on to the development of the site. You should split the different parts of the development into modules, for example you might split the different site areas up — home page, product page, shopping cart, payment workflow, etc. You might then further subdivide these — implement common site header and footer, implement product page detail view, implement persistent shopping cart widget, etc.</p>
+There are multiple general strategies to cross browser development, for example:
 
-<p>There are multiple general strategies to cross browser development, for example:</p>
+- Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a {{glossary("Polyfill")}} to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.
+- Accept that some things aren't going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.
+- Accept that your site just isn't going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.
 
-<ul>
- <li>Get all the functionality working as closely as possible in all target browsers. This may involve writing different code paths that reproduce functionality in different ways aimed at different browsers, or using a {{glossary("Polyfill")}} to mimic any missing support using JavaScript or other technologies, or using a library that allows you to write a single bit of code and then does different things in the background depending on what the browser supports.</li>
- <li>Accept that some things aren't going to work the same on all browsers, and provide different (acceptable) solutions in browsers that don't support the full functionality. Sometimes this is inevitable due to device constraints — a cinema widescreen isn't going to give the same visual experience as a 4" mobile screen, regardless of how you program your site.</li>
- <li>Accept that your site just isn't going to work in some older browsers, and move on. This is OK, provided your client/userbase is OK with it.</li>
-</ul>
+Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end!
 
-<p>Normally your development will involve a combination of the above three approaches. The most important thing is that you test each small part before committing it — don't leave all the testing till the end!</p>
+### Testing/discovery
 
-<h3 id="Testingdiscovery">Testing/discovery</h3>
+After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working:
 
-<p>After each implementation phase, you will need to test the new functionality. To start with, you should make sure there are no general issues with your code that are stopping your feature from working:</p>
+1.  Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.
+2.  Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.
+3.  Test on a mobile platform, such as Android or iOS.
 
-<ol>
- <li>Test it in a couple of stable browsers on your system, like Firefox, Safari, Chrome, or IE/Edge.</li>
- <li>Do some low fi accessibility testing, such as trying to use your site with only the keyboard, or using your site via a screen reader to see if it is navigable.</li>
- <li>Test on a mobile platform, such as Android or iOS.</li>
-</ol>
+At this point, fix any problems you find with your new code.
 
-<p>At this point, fix any problems you find with your new code.</p>
+Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on [determining your target browsers](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all)). For example:
 
-<p>Next, you should try expanding your list of test browsers to a full list of target audience browsers and start concentrating on weeding out cross browser issues (see the next article for more information on <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies#Gotta_test_%27em_all">determining your target browsers</a>). For example:</p>
+- Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).
+- Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),
+- Also do tests in any other browsers you have included inside your target list.
 
-<ul>
- <li>Try to test the latest change on all the modern desktop browsers you can — including Firefox, Chrome, Opera, IE, Edge, and Safari on desktop (Mac, Windows, and Linux, ideally).</li>
- <li>Test it in common phone and tablet browsers (e.g. iOS Safari on iPhone/iPad, Chrome and Firefox on iPhone/iPad/Android),</li>
- <li>Also do tests in any other browsers you have included inside your target list.</li>
-</ul>
+The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a team). You should try to test it on real physical devices where possible.
 
-<p>The most low fi option is to just do all the testing you can by yourself (pulling in team mates to help out if you are working in a  team). You should try to test it on real physical devices where possible.</p>
+If you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.
 
-<p>If you haven't got the means to test all those different browser, operating system, and device combinations on physical hardware, you can also make use of emulators (emulate a device using software on your desktop computer) and virtual machines (software that allows you to emulate multiple operating system/software combinations on your desktop computer). This is a very popular choice, especially in some circumstances — for example, Windows doesn't let you have multiple versions of Windows installed simulataneously on the same machine, so using multiple virtual machines is often the only option here.</p>
+Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.
 
-<p>Another option is user groups — using a group of people outside your development team to test your site. This could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide results.</p>
+Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system ([Selenium](http://www.seleniumhq.org/) being the popular app of choice) that could for example load your site in a number of different browsers, and:
 
-<p>Finally, you can get smarter with your testing using auditing or automation tools; this is a sensible choice as your projects get bigger, as doing all this testing by hand can start to take a really long time. You can set up your own testing automation system (<a href="http://www.seleniumhq.org/">Selenium</a> being the popular app of choice) that could for example load your site in a number of different browsers, and:</p>
+- see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed
+- take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.
 
-<ul>
- <li>see if a button click causes something to happen successfully (like for example, a map displaying), displaying the results once the tests are completed</li>
- <li>take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.</li>
-</ul>
+You can also go further than this, if wished. There are commercial tools available such as [Sauce Labs](https://saucelabs.com/), [Browser Stack](https://www.browserstack.com/), [LambdaTest](https://www.lambdatest.com/), [TestingBot](https://testingbot.com), and [CrossBrowserTesting](https://crossbrowsertesting.com) that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.
 
-<p>You can also go further than this, if wished. There are commercial tools available such as <a href="https://saucelabs.com/">Sauce Labs</a>, <a href="https://www.browserstack.com/">Browser Stack</a>, <a href="https://www.lambdatest.com/">LambdaTest</a>, <a href="https://testingbot.com">TestingBot</a>, and <a href="https://crossbrowsertesting.com">CrossBrowserTesting</a> that do this kind of thing for you, without you having to worry about the setup, if you wish to invest some money in your testing. It is also possible to set up an environment that automatically runs tests for you, and then only lets you check in your changes to the central code repository if the tests still pass.</p>
+#### Testing on prerelease browsers
 
-<h4 id="Testing_on_prerelease_browsers">Testing on prerelease browsers</h4>
+It is often a good idea to test on prerelease versions of browsers; see the following links:
 
-<p>It is often a good idea to test on prerelease versions of browsers; see the following links:</p>
+- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)
+- [Edge Insider Preview](https://insider.windows.com/)
+- [Safari Technology Preview](https://developer.apple.com/safari/technology-preview/)
+- [Chrome Canary](https://www.google.com/chrome/browser/canary.html)
+- [Opera Developer](http://www.opera.com/computer/beta)
 
-<ul>
- <li><a href="https://www.mozilla.org/en-US/firefox/developer/">Firefox Developer Edition</a></li>
- <li><a href="https://insider.windows.com/">Edge Insider Preview</a></li>
- <li><a href="https://developer.apple.com/safari/technology-preview/">Safari Technology Preview</a></li>
- <li><a href="https://www.google.com/chrome/browser/canary.html">Chrome Canary</a></li>
- <li><a href="http://www.opera.com/computer/beta">Opera Developer</a></li>
-</ul>
+This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.
 
-<p>This is especially prevalent if you are using very new technologies in your site, and you want to test against the latest implementations, or if you are coming across a bug in the latest release version of a browser, and you want to see if the browser's developers have fixed the bug in a newer version.</p>
+### Fixes/iteration
 
-<h3 id="Fixesiteration">Fixes/iteration</h3>
+Once you've discovered a bug, you need to try to fix it.
 
-<p>Once you've discovered a bug, you need to try to fix it.</p>
+The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.
 
-<p>The first thing to do is to narrow down where the bug occurs as much as possible. Get as much information as you can from the person reporting the bug — what platform(s), device(s), browser version(s), etc. Try it on similar configurations (e.g. the same browser version on different desktop platforms, or a few different versions of the same browser on the same platform) to see how widely the bug persists.</p>
+It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see [Reporting bugs](#reporting_bugs), below).
 
-<p>It might not be your fault — if a bug exists in a browser, then hopefully the vendor will rapidly fix it. It might have already been fixed — for example if a bug is present in Firefox release 49, but it is no longer there in Firefox Nightly (version 52), then they have fixed it. If it is not fixed, then you may want to file a bug (see <a href="#reporting_bugs">Reporting bugs</a>, below).</p>
+If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see [Debugging HTML](/ru/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML), [Debugging CSS](/ru/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS), and [What went wrong? Troubleshooting JavaScript](/ru/docs/Learn/JavaScript/First_steps/What_went_wrong)). Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work.
 
-<p>If it is your fault, you need to fix it! Finding out the cause of the bug involves the same strategy as any web development bug (again, see <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a>, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a>, and <a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>). Once you've discovered what is causing your bug, you need to decide how to work around it in the particular browser it is causing problems in — you can't just change the problem code outright, as this may break the code in other browsers. The general approach is usually to fork the code in some way, for example use JavaScript feature detection code to detect situations in which a problem feature doesn't work, and run some different code in those cases that does work.</p>
+Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or in other browsers.
 
-<p>Once a fix has been made, you'll want to repeat your testing process to make sure your fix is working OK, and hasn't caused the site to break in other places or in other browsers.</p>
+## Reporting bugs
 
-<h2 id="Reporting_bugs">Reporting bugs</h2>
+Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:
 
-<p>Just to reiterate on what was said above, if you discover bugs in browsers, you should report them:</p>
+- [Firefox Bugzilla](https://bugzilla.mozilla.org/)
+- [EdgeHTML issue tracker](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/)
+- [Safari](https://bugs.webkit.org/)
+- [Chrome](https://bugs.chromium.org/p/chromium/issues/list)
+- [Opera](https://bugs.opera.com/wizard/desktop)
 
-<ul>
- <li><a href="https://bugzilla.mozilla.org/">Firefox Bugzilla</a></li>
- <li><a href="https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/">EdgeHTML issue tracker</a></li>
- <li><a href="https://bugs.webkit.org/">Safari</a></li>
- <li><a href="https://bugs.chromium.org/p/chromium/issues/list">Chrome</a></li>
- <li><a href="https://bugs.opera.com/wizard/desktop">Opera</a></li>
-</ul>
+## Summary
 
-<h2 id="Summary">Summary</h2>
+This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies.
 
-<p>This article should have given you a high-level understanding of the most important concepts you need to know about cross browser testing. Armed with this knowledge, you are now ready to move on and start learning about Cross browser testing strategies.</p>
+{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}
 
-<p>{{NextMenu("Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies", "Learn/Tools_and_testing/Cross_browser_testing")}}</p>
+## In this module
 
-<h2 id="In_this_module">In this module</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction">Introduction to cross browser testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies">Strategies for carrying out testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS">Handling common HTML and CSS problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript">Handling common JavaScript problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Handling common accessibility problems</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection">Implementing feature detection</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing">Introduction to automated testing</a></li>
- <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment">Setting up your own test automation environment</a></li>
-</ul>
+- [Introduction to cross browser testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction)
+- [Strategies for carrying out testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Testing_strategies)
+- [Handling common HTML and CSS problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/HTML_and_CSS)
+- [Handling common JavaScript problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/JavaScript)
+- [Handling common accessibility problems](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility)
+- [Implementing feature detection](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection)
+- [Introduction to automated testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Automated_testing)
+- [Setting up your own test automation environment](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment)
diff --git a/files/ru/learn/tools_and_testing/github/index.md b/files/ru/learn/tools_and_testing/github/index.md
index 1f801e7fb1304c..f120df0665c0c7 100644
--- a/files/ru/learn/tools_and_testing/github/index.md
+++ b/files/ru/learn/tools_and_testing/github/index.md
@@ -8,78 +8,62 @@ tags:
 translation_of: Learn/Tools_and_testing/GitHub
 original_slug: Learn/Tools_and_testing/GitHub
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Все разработчики используют ту или иную <strong>систему контроля версий (СКВ, VCS)</strong>, инструмент, позволяющий им взаимодействовать с другими разработчиками на проекте без угрозы того, что кто-то перезапишет чужую работу, а также вернуться к предыдущим версиям кода при обнаружении проблем позднее.</p>
+Все разработчики используют ту или иную **систему контроля версий (СКВ, VCS)**, инструмент, позволяющий им взаимодействовать с другими разработчиками на проекте без угрозы того, что кто-то перезапишет чужую работу, а также вернуться к предыдущим версиям кода при обнаружении проблем позднее.
 
-<p class="summary">Самая популярная СКВ (по крайней мере, среди веб-разработчиков) являются <strong>Git</strong>, а также <strong>GitHub</strong>- сайт, обеспечивающий размещение ваших репозиториев и включающий инструменты для работы с ними. Цели этого модуля - дать вам необходимые знания о каждой из упомянутых СКВ.</p>
+Самая популярная СКВ (по крайней мере, среди веб-разработчиков) являются **Git**, а также **GitHub**- сайт, обеспечивающий размещение ваших репозиториев и включающий инструменты для работы с ними. Цели этого модуля - дать вам необходимые знания о каждой из упомянутых СКВ.
 
-<h2 id="Обзор">Обзор</h2>
+## Обзор
 
-<p>СКВ являются основой для разработки программного обеспечения:</p>
+СКВ являются основой для разработки программного обеспечения:
 
-<ul>
- <li>Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идёт о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определённый механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.</li>
- <li>Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.</li>
- <li>Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например <code>myCode.js</code>, <code>myCode_v2.js</code>, <code>myCode_v3.js</code>, <code>myCode_final.js</code>, <code>myCode_really_really_final.js</code>, и так далее, но это на самом деле ненадёжный и порождающий ошибки способ.</li>
- <li>Различные члены команды могут захотеть создать собственные версии кода (в Git такие версии именуются <strong>ветками</strong>), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в GitHub используются <strong>пул реквизиты</strong> - запросы на принятие изменений) с главной версией.</li>
-</ul>
+- Редко, когда вы работаете с проектом полностью самостоятельно. Как только вы начинаете работать с другими людьми, возникает риск конфликта. Речь идёт о ситуации, когда несколько человек пытается в одно и то же время обновить одну и ту же часть кода. Нужен определённый механизм, позволяющий управлять событиями и тем самым избежать потери результатов общей работы.
+- Работая с проектом в одиночку или с другими, вы захотите иметь возможность иметь резервную копию кода на случай поломки вашего компьютера.
+- Также у вас может возникнуть необходимость откатить изменения к более ранним версиям, если проблема обнаружена позднее. Конечно, это начать делать самостоятельно, сохраняя различные версии одного и того же файла, например `myCode.js`, `myCode_v2.js`, `myCode_v3.js`, `myCode_final.js`, `myCode_really_really_final.js`, и так далее, но это на самом деле ненадёжный и порождающий ошибки способ.
+- Различные члены команды могут захотеть создать собственные версии кода (в Git такие версии именуются **ветками**), работать над новой фичей в этой версии, а затем контролируемо объединить эту версию (в GitHub используются **пул реквизиты** - запросы на принятие изменений) с главной версией.
 
-<p>СКВ обеспечивают инструменты для решения всех вышеуказанных задач. <a href="https://git-scm.com/">Git</a> является примером СКВ, а <a href="https://github.com/">GitHub</a> - это сайт, обеспечивающий веб-интерфейс для работы с гит, а также множество полезных инструментов для работы с гит-репозиториями лично или в командах, такие как фиксация проблем с кодом, инструменты для проверки кода, инструменты для управления созданием продукта, например назначение задач и их статусов, и т.д.</p>
+СКВ обеспечивают инструменты для решения всех вышеуказанных задач. [Git](https://git-scm.com/) является примером СКВ, а [GitHub](https://github.com/) - это сайт, обеспечивающий веб-интерфейс для работы с гит, а также множество полезных инструментов для работы с гит-репозиториями лично или в командах, такие как фиксация проблем с кодом, инструменты для проверки кода, инструменты для управления созданием продукта, например назначение задач и их статусов, и т.д.
 
-<div class="blockIndicator note">
-<p><strong>Важно</strong>: ГИТ на самом деле - распределённая система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо ещё). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения  с оригиналом. </p>
-</div>
+> **Примечание:** **Важно**: ГИТ на самом деле - распределённая система контроля версий, это значит что полная копия репозитория, содержащая всю кодовую базу сохраняется на твой компьютер (и кого-либо ещё). Ты вносишь изменения в свою копию и затем отправляешь эти изменения обратно на сервер, на котором администратор решит соединять ли твои изменения с оригиналом.
 
-<h2 id="Подготовка">Подготовка</h2>
+## Подготовка
 
-<p>Для использования Git и GitHub тебе необходимо:</p>
+Для использования Git и GitHub тебе необходимо:
 
-<ul>
- <li>Компьютер с установленной версией Git (посмотри <a href="https://git-scm.com/downloads">страницу загрузки Git</a>).</li>
- <li>Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать <a href="https://git-scm.com/downloads/guis/">Git-клиенты с графическим интерфейсом</a> (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.</li>
- <li><a href="https://github.com/join">Аккаунт на GitHub</a>. Если у тебя ещё его нет, зарегистрируйся сейчас по указанной ссылке.</li>
-</ul>
+- Компьютер с установленной версией Git (посмотри [страницу загрузки Git](https://git-scm.com/downloads)).
+- Приложения для работы с Git. В зависимости от того как ты предпочитаешь работать, можешь использовать [Git-клиенты с графическим интерфейсом](https://git-scm.com/downloads/guis/) (мы рекомендуем GitHub Desktop, SourceTree или Git Kraken) или просто продолжай использовать окно терминала. Если честно, будет весьма полезно для тебя узнать основы использования git-команд в терминале, даже если ты собираешься работать через графический интерфейс.
+- [Аккаунт на GitHub](https://github.com/join). Если у тебя ещё его нет, зарегистрируйся сейчас по указанной ссылке.
 
-<p>Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!</p>
+Что касается предварительных знаний, вам не нужно разбираться в веб-разработке, Git / GitHub или VCS, чтобы приступить к этому модулю. Тем не менее, рекомендуется, чтобы вы разбирались в составлении кода, могли его писать и читать, а также сохранили пару строчек кода в своих репозиториях!
 
-<p>Также желательно, чтобы у вас были некоторые базовые знания о терминале, например, перемещение между каталогами, создание файлов и изменение системного <code>PATH</code>.</p>
+Также желательно, чтобы у вас были некоторые базовые знания о терминале, например, перемещение между каталогами, создание файлов и изменение системного `PATH`.
 
-<div class="blockIndicator note">
-<p><strong>Важно</strong>: Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как <a href="https://about.gitlab.com/">GitLab</a>, которые ты можешь попробовать, а также ты можешь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов.</p>
-</div>
+> **Примечание:** **Важно**: Github не единственный сайт / инструментарий который ты можешь использовать с Git. Есть и альтернативы, такие как [GitLab](https://about.gitlab.com/), которые ты можешь попробовать, а также ты можешь попробовать настроить свой собственный сервер Git и использовать вместо GitHub. Мы в этом курсе остановились на GitHub, чтобы показать один из рабочих способов.
 
-<h2 id="Guides">Guides</h2>
+## Guides
 
-<p>Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.</p>
+Note that the links below take you to resources on external sites. Eventually we will are aiming to have our own dedicated Git/GitHub course, but for now, these will help you get to grips with the subject in hand.
 
-<dl>
- <dt><a href="https://guides.github.com/activities/hello-world/">Hello World (from GitHub)</a></dt>
- <dd>This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.</dd>
- <dt><a href="https://guides.github.com/introduction/git-handbook/">Git Handbook (from GitHub)</a></dt>
- <dd>This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.</dd>
- <dt><a href="https://guides.github.com/activities/forking/">Forking Projects (from GitHub)</a></dt>
- <dd>Forking projects is essential when you want to contribute to someone else's code. This guide explains how.</dd>
- <dt><a href="https://help.github.com/en/articles/about-pull-requests">About Pull Requests (from GitHub)</a></dt>
- <dd>A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.</dd>
- <dt><a href="https://guides.github.com/features/issues/">Mastering issues (from GitHub)</a></dt>
- <dd>Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.</dd>
-</dl>
+- [Hello World (from GitHub)](https://guides.github.com/activities/hello-world/)
+  - : This is a good place to start — this practical guide gets you to jump right into using GitHub, learning the basics of Git such as creating repositories and branches, making commits, and opening and merging pull requests.
+- [Git Handbook (from GitHub)](https://guides.github.com/introduction/git-handbook/)
+  - : This Git Handbook goes into a little more depth, explaining what a VCS is, what a repository is, how the basic GitHub model works, Git commands and examples, and more.
+- [Forking Projects (from GitHub)](https://guides.github.com/activities/forking/)
+  - : Forking projects is essential when you want to contribute to someone else's code. This guide explains how.
+- [About Pull Requests (from GitHub)](https://help.github.com/en/articles/about-pull-requests)
+  - : A useful guide to managing pull requests, the way that your suggested code changes are delivered to people's repositories for consideration.
+- [Mastering issues (from GitHub)](https://guides.github.com/features/issues/)
+  - : Issues are like a forum for your GitHub project, where people can ask questions and report problems, and you can manage updates (for example assigning people to fix issues, clarifying the issue, letting people know things are fixed). This articles gives you what you need to know about issues.
 
-<div class="blockIndicator note">
-<p><strong>Note</strong>: There is <strong>a lot more</strong> that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like <a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> and<a href="https://dangitgit.com/"> Dangit, git!</a></p>
-</div>
+> **Примечание:** There is **a lot more** that you can do with Git and GitHub, but we feel that the above represents the minimum you need to know to start using Git effectively. As you get deeper into Git, you'll start to realise that it is easy to go wrong when you start using more complicated commands. Don't worry, even professional web developers find Git confusing sometimes, and often solve problems by searching for solutions on the web, or consulting sites like [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) and[ Dangit, git!](https://dangitgit.com/)
 
-<h2 id="See_also">See also</h2>
+## See also
 
-<ul>
- <li><a href="https://guides.github.com/introduction/flow/">Understanding the GitHub flow</a></li>
- <li><a href="https://git-scm.com/docs">Git command list</a></li>
- <li><a href="https://guides.github.com/features/mastering-markdown/">Mastering markdown</a> (the text format you write in on PR, issue comments, and <code>.md</code> files).</li>
- <li><a href="https://guides.github.com/features/pages/">Getting Started with GitHub Pages</a> (how to publish demos and websites on GitHub).</li>
- <li><a href="https://learngitbranching.js.org/">Learn Git branching</a></li>
- <li><a href="https://github.com/k88hudson/git-flight-rules">Flight rules for Git</a> (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).</li>
- <li>
-  <p><a href="https://dangitgit.com/">Dangit, git!</a> (another useful compendium, specifically of ways to correct things when you went wrong).</p>
- </li>
-</ul>
+- [Understanding the GitHub flow](https://guides.github.com/introduction/flow/)
+- [Git command list](https://git-scm.com/docs)
+- [Mastering markdown](https://guides.github.com/features/mastering-markdown/) (the text format you write in on PR, issue comments, and `.md` files).
+- [Getting Started with GitHub Pages](https://guides.github.com/features/pages/) (how to publish demos and websites on GitHub).
+- [Learn Git branching](https://learngitbranching.js.org/)
+- [Flight rules for Git](https://github.com/k88hudson/git-flight-rules) (a very useful compendium of ways to achieve specific things in Git, including how to correct things when you went wrong).
+- [Dangit, git!](https://dangitgit.com/) (another useful compendium, specifically of ways to correct things when you went wrong).
diff --git a/files/ru/learn/tools_and_testing/index.md b/files/ru/learn/tools_and_testing/index.md
index c5de8e7d496ced..c0c77bf6c8f138 100644
--- a/files/ru/learn/tools_and_testing/index.md
+++ b/files/ru/learn/tools_and_testing/index.md
@@ -20,29 +20,25 @@ tags:
   - user testing
 translation_of: Learn/Tools_and_testing
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}
 
-<p class="summary">Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices.</p>
+Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from ready-rolled CSS and JavaScript, to testing and automation apps, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, and working out reliable testing plans for your code. This part of the learning area aims to give you what you need get started and make informed choices.
 
-<p>The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.</p>
+The web industry is an exciting place to work, but it is not without its complications. The core technologies we use to build web sites are fairly stable now, but new features are being added all the time, and new tools — that facilitate working with, and are built on top of these technologies — are constantly appearing. On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.
 
-<p>Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.</p>
+Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favourites.
 
-<div class="note">
-<p><strong>Note</strong>: Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.</p>
-</div>
+> **Примечание:** Because new tools appear and old ones go out of fashion all the time, we have deliberately written this material to be as neutral as possible — we want to focus first and foremost on the general types of tasks these tools will help you accomplish, and keep prescribing specific tools to a minimum. We obviously need to show tool usage to demonstrate specific techniques, but be clear that we do not necessarily recommend these tools as the best or only way to do things — in most cases there are other ways, but we want to provide you with a clear methodology that works.
 
-<h2 id="Learning_pathway">Learning pathway</h2>
+## Learning pathway
 
-<p>You should really learn the basics of the core <a href="/en-US/docs/Learn/HTML">HTML</a>, <a href="/en-US/docs/Learn/CSS">CSS</a>, and <a href="/en-US/docs/Learn/JavaScript">JavaScript</a> languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.</p>
+You should really learn the basics of the core [HTML](/ru/docs/Learn/HTML), [CSS](/ru/docs/Learn/CSS), and [JavaScript](/ru/docs/Learn/JavaScript) languages first before attempting to use the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, or making effective use of JavaScript libraries, or writing tests and running them against your code using test runners, etc.
 
-<p>You need a solid foundation first.</p>
+You need a solid foundation first.
 
-<h2 id="Modules">Modules</h2>
+## Modules
 
-<dl>
- <dt>Real world web development tools (TBD)</dt>
- <dd>In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.</dd>
- <dt><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">Cross browser testing</a></dt>
- <dd>This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.</dd>
-</dl>
+- Real world web development tools (TBD)
+  - : In this module, we explore the different kinds of web development tools available. This includes reviewing the most common kinds of tasks you may be called on to solve, how they can fit together in a workflow, and the best tools currently avaiable for carrying out those tasks.
+- [Cross browser testing](/ru/docs/Learn/Tools_and_testing/Cross_browser_testing)
+  - : This module looks specifically at the area of testing web projects across different browsers. Here we look identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about doing testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.