Hello, World!<\/h1>\n```\n","theory":"\nEvery day we look at dozens of web pages and read texts on them that are rendered as though they were in a magazine. These pages are hypertext - a system of web pages that can be navigated using links. A language, HTML, exists to implement this system.\n\nHTML stands for HyperText Markup Language. By its function, HTML is a set of rules by which the browser distinguishes headings from lists, tables from pictures, and so on. HTML appeared in 1993 and was intended to standardize the rules for displaying text within web pages.\n\nEven this page is text marked up using HTML and processed by the browser. Technology has come a long way, but the concept of using HTML to mark up text has remained unchanged for many years.\n\nHere is an example of HTML markup:\n\n```html\n\n Code Basics<\/h2>\n
\n Code Basics - free hands-on programming lessons for people\n starting from scratch.\n <\/p>\n
\n If you are a complete beginner and want to learn the basics - variables,\n strings, loops, functions, etc., then Code Basics is for you.\n <\/p>\n<\/section>\n```\n\nDon't be intimidated by all the confusing words and symbols - by the end of the course, you'll understand how the markup above works, and you'll learn how to use this markup on your own pages. Note that the whole essence of the markup above is text. The rest are auxiliary elements to display the text where it was conceived to be by the designers and\/or developers.\n","version_id":78704,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:25.694Z","prepared_code":"","original_code":"
Hello, World!<\/h1>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'h1', HTMLHeadingElement);\n expect(element).to.have.text('Hello, World!');\n});\n","version":78704,"slug":"html-markup","natural_order":1,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/10-html-markup\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":259,"name":"Tags","locale":"en","instructions":"Wrap the phrase _The quick brown fox jumps over the lazy dog_ `
` into the
tag and paste in the editor.\n","theory":"\nIn order for the browser to determine the type of element that needs to be displayed on the page, there are special constructions in HTML, called tags. You can use tags to create a paragraph, a title, or a text section, and also to quickly change them.\n\nOne of the main tags is the paragraph tag. It separates sections of text from each other, allowing users to read the information on the page more comfortably.\n\nIn HTML, paragraphs are specified using the dedicated `
<\/p>` construction, and you can put the desired text between the tags. This is done between `
` and `<\/p>`. These tags are called _paired_ tags because they have an opening and closing part. In addition to _paired_ tags, there are _unpaired_ tags, that have no closing part, because nothing fits inside.\n\n```html\n
\n Hexlet is a hands-on programming course.\n We help newcomers become professional programmers,\n and experienced developers gain new knowledge and grow professionally.\n<\/p>\n```\n\nThere can be several such paragraphs on a page - this is not a unique element.\n\n```html\n
Hexlet is a hands-on programming course.<\/p>\n
\n We help newcomers become professional programmers,\n and experienced developers gain new knowledge and grow professionally.\n<\/p>\n```\n\nJumping forward a little, we'd like to point out that browsers, by default, display many tags with predefined styles. For example, paragraphs are indented at the bottom to visually separate them from each other. The last example in the browser looks like this:\n\n\n\nUsing CSS, you can change these styles and add new ones. There is a separate course on this site for learning this language.\n","version_id":78705,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:25.852Z","prepared_code":"","original_code":"
The quick brown fox jumps over the lazy dog<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p', HTMLParagraphElement);\n expect(element).to.contain.text('lazy');\n});\n","version":78705,"slug":"tags","natural_order":2,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/20-tags\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":261,"name":"Text in HTML","locale":"en","instructions":"Format this text\n\n```html\nMy Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.<\/p>\n\n\"My Circle\" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. \"My Circle\" and \"Habr\" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.\n```\n\nEach paragraph must be inside a separate tag\n","theory":"\nWithin a browser or other program that can process HTML, the text is rendered based on the specified tags. Without them, the browser will not understand how to properly display the text.\n\nLet's look at an example of text and try to output it both with tags and without them.\n\nText:\n\n```html\nWe believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.\n\nWith today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.\n```\n\nIf you insert this text into the page without using tags, you'll get this result:\n\n```html\nWe believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level. With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies. Hexlet is a ready-made path from absolute beginner to your first job.\n```\n\nThis is not the result that was expected - the lines have been stuck together and turned into one unreadable wall of text. For the text to look as intended, it needs to be wrapped in `
` tags:\n\n```html\n
We believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.<\/p>\n\n
With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.<\/p>\n\n
Hexlet is a ready-made path from absolute beginner to your first job.<\/p>\n```\n\n
\n We believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.<\/p>\n\n
With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.<\/p>\n\n
Hexlet is a ready-made path from absolute beginner to your first job.<\/p>\n<\/div>\n\nThe example illustrates that text formatted in a word processor and then opened in a browser will be one continuous line, so the information needs to be marked with special tags. In this course, we'll look at tags for creating tables, lists, links, and page sections that make sense. In this lesson, we took a closer look at paragraphs and the importance of markup for proper output on a page.\n","version_id":78706,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:26.932Z","prepared_code":"","original_code":"
My Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.<\/p>\n\n
\"My Circle\" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. \"My Circle\" and \"Habr\" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'p', HTMLParagraphElement);\n const elements = querySelectorAll(document, 'p', HTMLParagraphElement);\n expect(elements).to.have.length(2)\n \/\/ expect(elements).to.contain.text(['surveyed', 'studied'])\n});\n","version":78706,"slug":"text-in-html","natural_order":3,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/30-text-in-html\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":262,"name":"Tag nesting","locale":"en","instructions":"Create a bullet list of three items. You learned about this type of list in this lesson\n","theory":"\nTag nesting is an important concept in HTML. You can place more than just text between HTML tags as it was before, you can also place other tags. This allows you to create a complex layout in which areas are separated from each other, e.g., the menu is separated from the header, the advertising block is separated from the main content, etc.\n\nSome elements in HTML require some tags to be nested into other. For example, lists:\n\n\n\n```html\n
\n - The first item in the list<\/li>\n
- The second item in the list<\/li>\n <\/ul>\n```\n\nThe `
` tag is used to define the list, and this one indicates that it's _a bulleted_ list. Inside are the `- ` tags that define the elements of our list.\n\nThis kind of nesting resembles a tree, there's a treetop (the `
` tag) and leaves (the `- ` tags)\n\n```text\n|──ul\n| |──li\n| |──li\n```\n\n---\n\nInterestingly a tag with other tags inside is also called _a wrapper_\n\n---\n\nThe tree can grow even further. The lessons about lists will show you that other lists can be placed inside list elements, and then lists can be placed inside those lists, and so on and so forth.\n\nBut there are exceptions. You can't put paragraphs within paragraphs in HTML. The example below would be incorrect:\n\n```html\n
Paragraph\n
And here's another paragraph within a paragraph<\/p>.\n This is not a happy home for the paragraph.\n<\/p>\n```\n\nIn this lesson, we introduced the concept of nesting tags in HTML and examined it with the aid of bullet lists as a reminder. During this course, you'll learn both about the many situations where nesting is the best solution, and also about the tags that must not be nested within each other.\n","version_id":78707,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:27.498Z","prepared_code":"","original_code":"
\n - In 1973, IBM released the Model 3340 hard drive, which was designed with two 30MB modules<\/li>\n
- Of all HTTP protocol errors, users most often encounter the 404 Not Found<\/li>\n
- Hypertext Markup Language HTML was developed by British scientist Tim Berners-Lee<\/li>\n<\/ul>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'ul', HTMLUListElement);\n const elements = querySelectorAll(document, 'ul > li', HTMLLIElement);\n expect(elements).to.have.length(3);\n});\n","version":78707,"slug":"nested-tag","natural_order":4,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/40-nested-tag\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":271,"name":"HTML Attributes","locale":"en","instructions":"Create a paragraph with any text and a tooltip. Add the class `hexlet` to it.\n","theory":"\nPage markup information can have many subtleties and nuances. For example, you can specify the type of element, but you can also pass additional information to be processed by the browser. Mouse over the text below:\n\n\n\nWhen you mouse over an element, a small window will appear saying \"Tooltip. Here you can specify additional information\". This behavior is set using _attributes_ - special structures that can affect the output of information on the page. Each tag in HTML has several standard attributes, which are written based on this template: `attribute=\"value\"`:\n\n- **Attribute** is the name of the attribute. The `title` attribute was used to make the tooltip appear\n- **Value** is the value of the attribute. It can be different, depending on the attribute itself. In this example, the text to be displayed when hovering over the item was used as the value.\n\nHere's the example text from above, but with the markup:\n\n```html\n
Mouse over this line of text. It's better to do it from a computer.<\/p>\n```\n\nThe `title` attribute can be used on any page element, not just paragraphs. These attributes are called _global_ attributes, because they do not depend on the element. In contrast, there are attributes that are unique to one or more tags. For example, the attribute `colspan` which specifies the number of cells joined together in a table. Using it on anything other than a table makes no sense.\n\nAttributes can implicitly affect the information output. For example, when using the _CSS_ style language, there is an attribute called `class`, whose task is to separate similar elements from each other using the value of the attribute. You will learn how classes work in our _CSS_ course, but for now it is important to know that this attribute does not show up in any way when information is displayed on the page.\n\n```html\n
Lead class paragraph<\/p>\n
Mega-paragraph class paragraph<\/p>\n```\n\nOne tag can have several attributes at once. They're written successively, and the order in which they are written does not matter:\n\n```html\n
Paragraph with multiple attributes<\/p>\n```\n\nIn this lesson, we explored the concept of attributes and their notation. We learned how `title` and `class` attributes work, and that attributes can be either global or unique to HTML elements. Global attributes can be used for any tag, while unique attributes can only be used for specific ones.\n","version_id":78708,"description":null,"definitions":[],"tips":["All global attributes can be viewed on [MDN Web Docs](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes)"],"created_at":"2026-09-22T19:50:28.168Z","prepared_code":"","original_code":"
Hover your cursor over this text<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const elements = query(document, 'p', HTMLElement);\n expect(elements).to.have.attr('title').match(\/,*\/);\n expect(elements).to.have.attr('class', 'hexlet');\n});\n","version":78708,"slug":"attributes","natural_order":5,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/50-attributes\/en\/README.md"}],"40":[{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":263,"name":"Paragraphs","locale":"en","instructions":"Wrap the phrase _Hello, World_ in a paragraph tag\n","theory":"Paragraphs are the main way to divide a large text into small logical blocks. These blocks are automatically \"indented\" from each other. Such text is much easier to read and does not scare users.\n\nParagraphs are mostly found within large text. For example, any lesson on Hexlet or Code Basics is broken up into paragraphs for easy reading, just like this one.\n\nIt is broken down into small blocks of meaning. Not only is it more comfortable to read, but you can quickly find the information you need in a large text.\n\nParagraphs are created using the paired `
` tag with a small amount of text in the body. For example:\n\n```html\n
First paragraph<\/p>\n
Second paragraph<\/p>\n```\n\nThis is what they look like in the browser:\n\n\n","version_id":78709,"description":null,"definitions":[{"name":"Paragraph","description":"A small block of text separated from the rest of the content by indents at the bottom and top"}],"tips":["Paragraphs cannot be nested within each other"],"created_at":"2026-09-22T19:50:28.883Z","prepared_code":"","original_code":"
Hello, World<\/p>","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p', HTMLParagraphElement);\n expect(element).to.contain.text('Hello, World');\n});\n","version":78709,"slug":"paragraph","natural_order":6,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/10-paragraph\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":264,"name":"Text layout","locale":"en","instructions":"Add the phrase to the editor\n\n```text\nHexlet - hands-on programming courses\n```\n\nin which make the word \"courses\" bold (physical markup) and highlight the word \"programming\" in italics (logical markup). Don't forget to wrap the phrase in a paragraph\n","theory":"\nAny text contains key parts that one wants to convey to the reader. These can be definitions, clues, key idea. If there is a lot of text, such parts can get lost or not be detected at all. How do you help the browser and the user quickly find those parts on a page? In HTML markup, you can use **bold** and _italics_ for this purpose.\n\n## Bold lettering\n\nTo bold the text, one of the two paired tags is used: `` or ``:\n\n```html\nCode Basics — programming courses<\/b>.<\/p>\n```\n\n\n\n```html\n
HTML — Hypertext Markup Language<\/strong><\/p>\n```\n\n\n\nBoth examples illustrate adding boldface to a section of text. But why were two different tags used for visually identical results? It's all about _semantics_, that is, meaning. In this case, the meaning of the tag:\n\n- `` — a simple text selection. It can be used anywhere to visually highlight text. This tag has no meaning whatsoever\n- `` — the logical highlighting of an important section of text. This tag is semantic and marks the important part. It should not be applied to all areas in a row\n\nOnce upon a time, the developers wanted these tags to look different and differ in terms of behavior for the browser, but history has taken a slightly different path. Nowadays it is considered that `` is redundant and you should use CSS for visual highlighting and `` for important sections.\n\n## Italic highlighting\n\nThe italic emphasis is very similar to the bold emphasis, but it emphasizes the key part, not the key part. For example:\n\n```html\nCode Basics<\/i> — programming free<\/em> courses<\/p>\n```\n\n\n\nIn this example, two parts of the text were marked:\n\n- The `` tag was used to mark the name of the Code Basics portal. The tag is intended to visually italicize text and has no semantic meaning\n- The `` tag highlighted the phrase \"free courses\". This is the logical emphasis on the free nature of the courses that has been given to the offer. There are many courses and no free ones, so it's worth adding emphasis to this part of the sentence\n","version_id":78710,"description":null,"definitions":[{"name":"Semantics","description":"Meaning. In the context of HTML - the semantic choice of markup for a piece of information"}],"tips":["Tags for visual emphasis are shorter than for semantic emphasis. It helps to remember when to use `` and ``, and when to use `` and ``","In practice, instead of `` and `` they use CSS styling"],"created_at":"2026-09-22T19:50:29.536Z","prepared_code":"","original_code":"Hexlet — hands-on programming<\/em> courses<\/b><\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const b = query(document, 'p > b', HTMLElement);\n expect(b).to.have.text('courses');\n\n const em = query(document, 'p > em', HTMLElement);\n expect(em).to.have.text('programming');\n});\n","version":78710,"slug":"text-style","natural_order":7,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/20-text-style\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":343,"name":"Headings","locale":"en","instructions":"Add a first and second level header with arbitrary text in the editor\n","theory":"\nThe larger the text, the more often it is divided into logical sections. For example, the basic markup of a report, diploma or essay consists of three main parts:\n\n1. Introduction\n2. Main part\n3. Conclusion\n\nSuch logical divisions into headings allow you to navigate faster in the document and find the part you need.\n\nTo create titles used 6 paired tags: ``, ``, ``, ``, ``, ``, where `` — title of the first level, the most important and describes the main subject of the text, and `` — the title of the lowest level.\n\n```html\nTitle of the first level<\/h1>\nTitle of the second level<\/h2>\nTitle of the third level<\/h3>\nTitle of the fourth level<\/h4>\nTitle of the fifth level<\/h5>\nTitle of the sixth level<\/h6>\n```\n\n\n\nEach lower level heading is a subsection of a higher level heading. This is very similar to the table of contents of any book, the structure of which might look like this:\n\n- Chapter 1\n - Part 1\n - Part 2\n - Notes\n - Part 3\n- Chapter 2\n\n```html\nThe best book on earth<\/h1>\n
Description of the book. Thanks to my cat and my two dogs. Meow!<\/p>\n\n
Chapter 1<\/h2>\n\nPart 1<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n\n
Part 2<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n
Notes<\/h4>\n
The text of this note is written with love<\/p>\n\n
Part 3<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n\n
Chapter 2<\/h2>\n```\n","version_id":78711,"description":null,"definitions":[],"tips":["Follow the sequence of headings. Don't skip levels","There is usually only one first level header on the page"],"created_at":"2026-09-22T19:50:31.224Z","prepared_code":"","original_code":"Code Basics<\/h1>\nCoding lessons<\/h2>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const h1 = query(document, 'h1');\n expect(h1).to.be.visible;\n\n const h2 = query(document, 'h2');\n expect(h2).to.be.visible;\n});\n","version":78711,"slug":"hypertext-header","natural_order":8,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/25-hypertext-header\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":265,"name":"Lists","locale":"en","instructions":"Create a numbered list of 5 items\n","theory":"\nLists are one way of presenting content on a page. With their help it is easy to group small related fragments, such as a shopping list:\n\n```text\n— Milk\n— Bread\n— Water\n```\n\nYou can make such a list with three paragraphs, but then, at first glance, it will seem that these are three different phrases not united by a common meaning.\n\n\n\nLists are used to properly relate this information. To create them in HTML, several tags are used, nested within each other:\n\n- `` or `` to define the type of list\n- `- ` to create a list item\n\nThe general layout is as follows:\n\n```text\n
\n Text<\/list_item>\n<\/list_item>\n```\n\n## Marked list\n\nThe `` tag is used to create a bulleted list.\n\nBulleted lists are used when the information does not require a specific sequence. For example, the grocery list from the example above. It is not so important what will be bought first: milk or bread, it is important to buy all the products.\n\n```html\n\n - Milk<\/li>\n
- Bread<\/li>\n
- Water<\/li>\n<\/ul>\n```\n\n\n\n## Numbered list\n\n**Numbered** lists are used to group sequential information, an important feature of which is the presence of a serial number of the item.\n\nSuch lists are useful if they indicate the sequence of actions to be taken. A numbered list is created with the `
` tag, inside which also lie elements in the `- ` tags.\n\nTo-do list for the day\n\n\n\nin HTML markup looks like this:\n\n```html\n
\n - Buy food<\/li>\n
- Go to Alex<\/li>\n
- Cook dinner<\/li>\n<\/ol>\n```\n","version_id":78712,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:32.130Z","prepared_code":"","original_code":"
\n - Before the invention of electronic computers, computers in the U.S. were used to refer to workers engaged in manual calculations.<\/li>\n
- Some programmers use the rubber duck debugging method to debug code.<\/li>\n
- An update of a computer program that fixes detected bugs is called a patch<\/li>\n
- On the first American typewriters, the keys were usually arranged alphabetically.<\/li>\n
- The inventor of the computer mouse, Douglas Engelbart, in his explanatory drawings depicted the screen cursor as an arrow pointing vertically upward.<\/li>\n<\/ol>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'ol', HTMLOListElement);\n const elements = querySelectorAll(document, 'ol > li', HTMLLIElement);\n expect(elements).to.have.length(5);\n});\n","version":78712,"slug":"lists","natural_order":9,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/30-lists\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":266,"name":"Nested lists","locale":"en","instructions":"Create the markup for the list:\n\n1. The JavaScript profession\n - Frontend\n - Backend\n2. The PHP Profession\n","theory":"\nWhen making a to-do list, it may be necessary to break items down into several additional sub-items. For example, in the to-do list, the item \"Go to the store\" may contain a shopping list.\n\n_Nested lists_ are used to create this structure. This allows you to insert a new list as a list item, rather than just text, creating a complex structure:\n\n\n\nIn HTML it looks like this:\n\n```html\n
\n - Go to the store\n
\n - Buy milk<\/li>\n
- Buy bread<\/li>\n <\/ul>\n <\/li>\n
- Take a class on Code Basics <\/li>\n<\/ul>\n```\n\nIt is important to note that the nested list is part of the list item and is inside the `
- ` tag:\n\n```html\n
- Go to the store\n
\n - Buy milk<\/li>\n
- Buy bread<\/li>\n <\/ul>\n<\/li>\n```\n\nThis nesting allows you to preserve semantics and indicate that the nested list refers specifically to \"Go to the store\" and not to any other item.\n\nYou can nest different kinds of lists into each other: bulleted into numbered and vice versa. The main thing is to monitor the opening and closing of tags. In the case of an error, the browser will try to correct the error itself, but it may not be correct.\n","version_id":78713,"description":null,"definitions":[],"tips":["At each nesting level the labeled list changes its marker. This is done to visually distinguish nested lists"],"created_at":"2026-09-22T19:50:33.971Z","prepared_code":"","original_code":"
\n - JavaScript Career\n
\n - Frontend<\/li>\n
- Backend<\/li>\n <\/ul>\n <\/li>\n
- PHP Career<\/li>\n<\/ol>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n const ol = query(document, 'ol', HTMLOListElement);\n const olLis = querySelectorAll(document, 'ol > li', HTMLLIElement);\n expect(olLis).to.have.length(2);\n\n const ul = query(document, 'ol > li > ul', HTMLUListElement);\n const ulLis = querySelectorAll(ul, 'li', HTMLLIElement);\n expect(ulLis).to.have.length(2);\n});\n","version":78713,"slug":"nested-lists","natural_order":10,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/40-nested-lists\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":267,"name":"Tables","locale":"en","instructions":"Create a table of 3 rows with 2 cells in each. The first line contains the table headers\n","theory":"\nOne of the most familiar forms of presenting information is tables. We meet them everywhere: product information, multiplication table, documents. Such a filing makes it easy to compare the characteristics of certain products. In page layout, tables are used just as often, although they have a slightly confusing layout.\n\nA table is a composite element made up of several nested tags. This is similar to how lists are made up - there is a container and special tag elements inside it\n\nThe marking contains several basic elements:\n\n- `
` — table area\n - `` — line\n - `` — table header\n - `` — header cell\n - ` ` — table body\n - `` — cell\n\nAny table starts with a paired `` tag\n\n```html\n\n \n<\/table>\n```\n\nIt is within this tag creates rows and columns of the table. Now you can create rows and columns. The `` and `` tags are used for this purpose. Create two rows and three cells in each row:\n\n```html\n\n \n \"Tota\" Chocolate<\/td> \n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" Chocolate<\/td> \n 100 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n<\/table>\n```\n\n\n\n---\n\n**Important:** The number of cells in each row must be the same\n\n---\n\nTry pasting this code into the editor. Notice that visually the output will be different from the table output in the theory of this lesson. The thing is that, by default, the browser doesn't put visible borders for the table cells. To do this, you need to use CSS, a special style language. You'll encounter this language and its capabilities in another course.\n\nThe data is displayed, but there are not enough headings to describe each column. The `` tag is used to create the table header and the `` tag is used as the cell tag. Otherwise, the structure of the layout does not change. Let's add the headings to the table:\n\n```html\n\n \n \n Yummy<\/th> \n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \"Tota\" Chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" Chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n<\/table>\n```\n\n\n\nThe last step is to add the ` ` tag, which marks the main part of the table. Often developers miss it because browsers automatically wrap a group of lines that are not wrapped in other tags. Note that the `` tag is often the only one in the table. In large tables, you can use several `` to separate different sections in a table, but in most cases this is not necessary.\n\n```html\n\n \n \n Yummy<\/th>\n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \n \"Tota\" Chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" Chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nAdditionally, you can specify the \"footer\" of the table. It can contain summary information, such as the cost of all goods.\n\nTables can be configured with a header. It is needed when several tables are output at the same time. It helps to separate them from each other and not get confused about which table is delivering what. A paired `` tag is used to create the table title. If you have a header, it _must_ be placed immediately after the `` tag. Let's add a header to the table:\n\n```html\n\n \"Hexlet\" chocolate assortment<\/caption>\n \n \n Yummy<\/th>\n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \n \"Tota\" chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\n\n","version_id":78714,"description":null,"definitions":[],"tips":["The number of cells in each row of the table must be the same","The `caption` of the table is _always_ placed immediately after opening the table","Browsers automatically add the ` ` tag if it is missing. In small tables it can be omitted"],"created_at":"2026-09-22T19:50:34.672Z","prepared_code":"","original_code":"\n \n \n Items<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n \n \n Apple<\/td>\n 1 dollar<\/td>\n <\/tr>\n \n Pears<\/td>\n 1.3 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n","test_code":"const { test } = require('tests');\n\ntest(({ querySelectorAll, query, expect }) => {\n query(document, 'table > thead', HTMLTableHeaderCellElement);\n const ths = querySelectorAll(document, 'table > thead > tr > th', HTMLElement);\n expect(ths).to.have.length(2);\n\n const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);\n expect(trs).to.have.length(2);\n\n const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);\n expect(tds).to.have.length(4);\n});\n","version":78714,"slug":"table","natural_order":11,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/50-table\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":268,"name":"Combining cells inside rows and columns","locale":"en","instructions":"\nCreate a table with two rows and three columns. In the second row, combine the first two cells using the attributes you learned about. The first row should be the header of the table\n","theory":"\nTables often need to merge rows or columns. It helps to combine different information. For example, if there is no product in the stock table, there is no point in constantly duplicating information - it can be merged, and you can write that the product is out of stock:\n\n\n\nWith HTML, you can combine cells in columns or rows by using the special attributes `colspan` and `rowspan`. Their values are the number of cells to be merged with the current one, either to the right (for `colspan`) or down (for `rowspan`) Counting for the number of cells starts from the current cell that the property has been applied to. For example, if the value is `colspan=\"2\"`, the current cell will be merged with the neighboring one.\n\nThe layout for the example above, without combining cells, is as follows:\n\n```html\n\n \n \n Item<\/th>\n Price<\/th>\n Amount<\/th>\n <\/tr>\n <\/thead>\n\n \n \n Tea<\/td>\n Out of stock<\/td> \n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nIn order to merge cells, you need to do two things:\n\n1. Once you've chosen a cell to be merged and added the tags, add the `colspan` attribute with a value equal to the number of cells to be merged to the right\n2. Remove unnecessary cells from the row\n\n```html\n\n \n \n Item<\/th>\n Price<\/th>\n Amount<\/th>\n <\/tr>\n <\/thead>\n\n \n \n Tea<\/td>\n Out of stock<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nThe `rowspan` attribute is used to combine cells vertically. The algorithm is the same as the with horizontal merging. The only difference is that you have to delete cells in neighboring rows:\n\n```html\n\n \n \n Employee<\/th>\n Salary<\/th>\n Bonus<\/th>\n Manager<\/th>\n <\/tr>\n <\/thead>\n\n \n \n Alex Primadonin<\/td>\n 750$<\/td>\n 63$<\/td>\n Cody Hexly<\/td>\n <\/tr>\n \n Eddie Vainy<\/td>\n 1200$<\/td>\n 0<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nIn this example, there are two employees interacting with one manager. You can specify it twice, but it's clearer if you merge the cells vertically. To do this, the attribute `rowspan=\"2\"` was added, and in the second row the fourth cell was removed, because its place will be taken by the cell above.\n\n\n","version_id":78715,"description":null,"definitions":[],"tips":["The number of cells in each row of the table must be the same after merging. It's important to distinguish between the number of ` ` tags and the total number of cells. For example, using the `colspan=\"2\"` attribute on a cell you will get two cells but visually combined in one. For this reason, it's necessary to remove one physical cell from the markup to compensate","If the `colspan` attribute is used, then the cells in the same line will be removed from the HTML code. If the `rowspan` attribute is used, the cells in the rows below are deleted"],"created_at":"2026-09-22T19:50:36.246Z","prepared_code":"","original_code":"\n \n \n 2 rows added<\/th>\n 3 columns added<\/th>\n 2 columns in second row combined<\/th>\n <\/tr>\n <\/thead>\n \n \n Result<\/td>\n Exercise completed<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n","test_code":"const { test } = require('tests');\n\ntest(({ querySelectorAll, query, expect }) => {\n const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);\n expect(trs).to.have.length(1);\n\n const trHead = querySelectorAll(document, 'table > thead > tr');\n expect(trHead).to.have.length(1);\n\n const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);\n expect(tds).to.have.length(2);\n\n const tdWithColspan = query(document, 'table > tbody > tr > td:nth-child(1)', HTMLElement);\n expect(tdWithColspan).to.have.attribute('colspan', '2');\n});\n","version":78715,"slug":"colspan-rowspan","natural_order":12,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/60-colspan-rowspan\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":269,"name":"Special HTML Characters","locale":"en","instructions":"Write the \"one-fourth\" fraction symbol. You can find the alias of this symbol on [Wikipedia](https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references)\n","theory":"There are special characters you can use in your text called mnemonic aliases. They allow you to use characters that are present in the symbol table but are not on the keyboard, such as math symbols or Greek:\n\n\n\nTo record these characters, we use the `&character-name;` construction. It's important to pay attention to the letter case in the name of the character.\n\nLet's take the symbols of suits in cards as an example:\n\n| Character | Code |\n| --------- | ---------- |\n| ♣ | `♣` |\n| ♠ | `♠` |\n| ♥ | `♥` |\n| ♦ | `♦` |\n\nMany of these symbols can be found on [Wikipedia](https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references).\n\nThe main typographic mnemonic aliases in HTML are:\n\n- ` ` - a non-breaking space. This is a very important thing that allows you to stay on the same line of text so as not to spoil the logical structure of the text in certain cases\n- `«` and `»` - the left and right angle quotes («»). They're used everywhere in typography\n- `—` - a long dash\n\nAliases are common when you want to insert tags without them being processed by the browser. In this case, you can use the aliases `<` and `>`, which are needed to denote **<** and **>**, respectively\n\n```html\n<p> this markup will not be treated as a paragraph <\/p>\n```\n","version_id":78716,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:37.335Z","prepared_code":"","original_code":"¼\n","test_code":"const { test } = require('tests');\n\ntest(({ expect }) => {\n const text = document.body.innerHTML.trim();\n expect(text).to.equal('¼');\n});\n","version":78716,"slug":"special-characters","natural_order":13,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/70-special-characters\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":292,"name":"Formatted text","locale":"en","instructions":"Add any text to the `` tag and paste it into the editor. Try different versions of the texts.\n","theory":"\nSometimes you need to insert text while retaining its original formatting. Let's take a look at Mayakovsky's famous \"ladder\" from the poem \"To Sergei Yesenin.\n\n\n\nVladimir Mayakovsky believed that it was in this form that the rhythm of verse could best be framed.\n\nIt is very difficult to format such text using special characters in HTML. You have to \"juggle\" with space characters. These markings will be very difficult to maintain in the future as a result:\n\n```html\nAs the saying says,<\/p>\n
you are<\/p>\n
now far.<\/p>\n```\n\nTo solve this problem, there is a special tag called `
`, whose task is to display the text within itself while saving all the space characters. By default, the `` tag outputs text in a monospaced font in which all characters have the same width, unlike regular fonts.\n\n```html\n\nAs the saying says,\n you are\n now far.\nVoid and stars,\n a stodgy kind\n passover.\nNot a payday,\n not a whiskey bar.\nSober.\n<\/pre>\n```\n\nInside the `pre` tag, you can use tags to format the text: ``, ``, ``, ``.\n","version_id":78718,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.061Z","prepared_code":"","original_code":"\nAs the saying says,\n you are\n now far.\nVoid and stars,\n a stodgy kind\n passover.\nNot a payday,\n not a whiskey bar.\nSober.\n<\/pre>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n\n const pre = query(document, 'pre');\n expect(pre).to.be.visible;\n\n});\n","version":78718,"slug":"pre","natural_order":15,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/90-pre\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":291,"name":"Inserting computer code into HTML","locale":"en","instructions":"Add any text to the `` tag and paste it into the editor. Try different versions of the texts\n","theory":"\nIf you have a programming tutorial blog or write articles, then you'll need to demonstrate your code. Every lesson on Code Basics has these blocks:\n\n```html\nYou can see the markup here<\/p>\n```\n\nTo create a block of code, use the tag ``, and you can write code in any language there.\n\n```javascript\n\/\/ Example code in JavaScript\nconst square = (num) => {\n return num * num;\n};\n```\n\nThe `` tag is often used with the `` tag to preserve formatting. If the `` tag is not used, you have to control line breaks yourself, for example by wrapping each line with a `` tag.\n\nIt's important that all tags inside `` are be processed by the browser, which is why special characters are used inside. Also, a common solution is to wrap the name of the tag in a separate tag, such as ``:\n\n```html\n\n <p<\/span>>Insert the p tag as plain text <\/p<\/span>>\n<\/code>\n```\n","version_id":78719,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.687Z","prepared_code":"","original_code":"\n const a = 5;\n<\/code>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n\n const code = query(document, 'code');\n expect(code).to.be.visible;\n\n});\n","version":78719,"slug":"code","natural_order":16,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/95-code\/en\/README.md"}],"41":[{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":272,"name":"Images","locale":"en","instructions":"\nPaste the image from into the editor with alt text \"W3C\" for when the image is not available\n","theory":"\nYour text will be better read and received if you use images. They help users navigate the text, break it down into parts, and set the mood for the reader.\n\nThe pictures on the page don't come from nowhere. They must first be uploaded to a directory on the server or a special image hosting service. To insert an image into a page, you can use the unpaired `![]()
`, which has two obligatory attributes: `src` and `alt`.\n\n## src attribute\n\nThe `src` attribute specifies the path to the image. This is also a link, as with the `` tag, only now the user is not redirected, but rather the browser loads the image from this path if it exists. The path to the picture can be either _relative_ or _absolute_.\n\n```html\n\n![](\"\/images.png\")
\n\n```\n\n## alt attribute\n\nWhat should I do if the picture is not available at the moment? In this case, browsers will show a small image indicating that the required image is not available.\n\nBut how would the user know what was here? Maybe the image is critical to the article, and without it you'll lose the meaning of what is written? You can advise the user to come back later when the image is available, or you can describe to them what was in the image.\n\nTo do this, use the `alt` attribute, its value is text. It will be shown if the image cannot be loaded\n\n```html\n\n![\"Logo\"](\"https:\/\/cdn6.hexlet.io\/1P6tmafZTIy5.png\")
\n\n```\n\nIn addition to the function of \"telling people what you can't show them\" the `alt` attribute serves a critical role for people who use screen readers - programs that read information from the screen. Since the image cannot be read, programs read what was specified in the `alt` attribute.\n\n## Image size\n\nAn important component when working with images is its size. When you download a picture from a third-party resource and paste it to a page, it may be the case that the image is very large, and it needs to be made smaller. To do this, you can change the `width` and `height` attributes.\n\n```html\n\n\n\n```\n\nThe picture will be displayed at 320x240 pixels.\n\nIt's important to remember that using the `width` and `height` attributes does not change the physical size of the picture - it will be the same size in terms of kilo\/megabytes, etc, only the visual size will change. If you want to optimize your page, use images with the right size or reduce them using a graphics editor or special service. Now a lot of people use cell phones and mobile Internet, so the size of the page is important.\n","version_id":78720,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.821Z","prepared_code":"","original_code":"![\"W3C\"](\"https:\/\/www.w3.org\/2008\/site\/images\/logo-w3c-screen-lg.png\")
\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'img');\n expect(element).to.have.attr('src', 'https:\/\/www.w3.org\/2008\/site\/images\/logo-w3c-screen-lg.png');\n expect(element).to.have.attr('alt', 'W3C');\n});\n","version":78720,"slug":"img","natural_order":17,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/30-media\/10-img\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":273,"name":"Audio","locale":"en","instructions":"Add audio to the page. Use the following audio files:\n\n- \n- \n\nTurn your volume down just in case ;)\n","theory":"\nPreviously, to add audio to an HTML page, you had to use special \"extensions\" that allowed you to embed an audio player in the page. Starting with the HTML5 standard, this feature is there by default. You can now use the `
Code Basics<\/h2>\n
\n Code Basics - free hands-on programming lessons for people\n starting from scratch.\n <\/p>\n
\n If you are a complete beginner and want to learn the basics - variables,\n strings, loops, functions, etc., then Code Basics is for you.\n <\/p>\n<\/section>\n```\n\nDon't be intimidated by all the confusing words and symbols - by the end of the course, you'll understand how the markup above works, and you'll learn how to use this markup on your own pages. Note that the whole essence of the markup above is text. The rest are auxiliary elements to display the text where it was conceived to be by the designers and\/or developers.\n","version_id":78704,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:25.694Z","prepared_code":"","original_code":"
Hello, World!<\/h1>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'h1', HTMLHeadingElement);\n expect(element).to.have.text('Hello, World!');\n});\n","version":78704,"slug":"html-markup","natural_order":1,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/10-html-markup\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":259,"name":"Tags","locale":"en","instructions":"Wrap the phrase _The quick brown fox jumps over the lazy dog_ `
` into the
tag and paste in the editor.\n","theory":"\nIn order for the browser to determine the type of element that needs to be displayed on the page, there are special constructions in HTML, called tags. You can use tags to create a paragraph, a title, or a text section, and also to quickly change them.\n\nOne of the main tags is the paragraph tag. It separates sections of text from each other, allowing users to read the information on the page more comfortably.\n\nIn HTML, paragraphs are specified using the dedicated `
<\/p>` construction, and you can put the desired text between the tags. This is done between `
` and `<\/p>`. These tags are called _paired_ tags because they have an opening and closing part. In addition to _paired_ tags, there are _unpaired_ tags, that have no closing part, because nothing fits inside.\n\n```html\n
\n Hexlet is a hands-on programming course.\n We help newcomers become professional programmers,\n and experienced developers gain new knowledge and grow professionally.\n<\/p>\n```\n\nThere can be several such paragraphs on a page - this is not a unique element.\n\n```html\n
Hexlet is a hands-on programming course.<\/p>\n
\n We help newcomers become professional programmers,\n and experienced developers gain new knowledge and grow professionally.\n<\/p>\n```\n\nJumping forward a little, we'd like to point out that browsers, by default, display many tags with predefined styles. For example, paragraphs are indented at the bottom to visually separate them from each other. The last example in the browser looks like this:\n\n\n\nUsing CSS, you can change these styles and add new ones. There is a separate course on this site for learning this language.\n","version_id":78705,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:25.852Z","prepared_code":"","original_code":"
The quick brown fox jumps over the lazy dog<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p', HTMLParagraphElement);\n expect(element).to.contain.text('lazy');\n});\n","version":78705,"slug":"tags","natural_order":2,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/20-tags\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":261,"name":"Text in HTML","locale":"en","instructions":"Format this text\n\n```html\nMy Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.<\/p>\n\n\"My Circle\" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. \"My Circle\" and \"Habr\" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.\n```\n\nEach paragraph must be inside a separate tag\n","theory":"\nWithin a browser or other program that can process HTML, the text is rendered based on the specified tags. Without them, the browser will not understand how to properly display the text.\n\nLet's look at an example of text and try to output it both with tags and without them.\n\nText:\n\n```html\nWe believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.\n\nWith today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.\n```\n\nIf you insert this text into the page without using tags, you'll get this result:\n\n```html\nWe believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level. With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies. Hexlet is a ready-made path from absolute beginner to your first job.\n```\n\nThis is not the result that was expected - the lines have been stuck together and turned into one unreadable wall of text. For the text to look as intended, it needs to be wrapped in `
` tags:\n\n```html\n
We believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.<\/p>\n\n
With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.<\/p>\n\n
Hexlet is a ready-made path from absolute beginner to your first job.<\/p>\n```\n\n
We believe that a true programmer must understand how a computer works and be able to think like a computer. They should see a problem, not an assignment. They must be able to analyze and reason at the level of the problem and above, not just at a code level.<\/p>\n\n
With today's abundance of study materials, courses, and books, the main question a beginner faces now is not \"where to study?\" but \"what should I study and in what order?\". There are many opinions on this subject. Some advise starting with mathematics, while others advise specific languages and technologies.<\/p>\n\n
Hexlet is a ready-made path from absolute beginner to your first job.<\/p>\n<\/div>\n\nThe example illustrates that text formatted in a word processor and then opened in a browser will be one continuous line, so the information needs to be marked with special tags. In this course, we'll look at tags for creating tables, lists, links, and page sections that make sense. In this lesson, we took a closer look at paragraphs and the importance of markup for proper output on a page.\n","version_id":78706,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:26.932Z","prepared_code":"","original_code":"
My Circle, a career portal, studied the IT education market and determined which online schools teach programming well. In the final ranking, Hexlet came in second place.<\/p>\n\n
\"My Circle\" surveyed 3,500 IT professionals and compiled a ranking table of online schools for programmers. \"My Circle\" and \"Habr\" users who attended online universities took part in the survey. In the final table, Hexlet came in second place.<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'p', HTMLParagraphElement);\n const elements = querySelectorAll(document, 'p', HTMLParagraphElement);\n expect(elements).to.have.length(2)\n \/\/ expect(elements).to.contain.text(['surveyed', 'studied'])\n});\n","version":78706,"slug":"text-in-html","natural_order":3,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/30-text-in-html\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":262,"name":"Tag nesting","locale":"en","instructions":"Create a bullet list of three items. You learned about this type of list in this lesson\n","theory":"\nTag nesting is an important concept in HTML. You can place more than just text between HTML tags as it was before, you can also place other tags. This allows you to create a complex layout in which areas are separated from each other, e.g., the menu is separated from the header, the advertising block is separated from the main content, etc.\n\nSome elements in HTML require some tags to be nested into other. For example, lists:\n\n\n\n```html\n
- \n
- The first item in the list<\/li>\n
- The second item in the list<\/li>\n <\/ul>\n```\n\nThe `
- ` tag is used to define the list, and this one indicates that it's _a bulleted_ list. Inside are the `
- ` tags that define the elements of our list.\n\nThis kind of nesting resembles a tree, there's a treetop (the `
- ` tag) and leaves (the `
- ` tags)\n\n```text\n|──ul\n| |──li\n| |──li\n```\n\n---\n\nInterestingly a tag with other tags inside is also called _a wrapper_\n\n---\n\nThe tree can grow even further. The lessons about lists will show you that other lists can be placed inside list elements, and then lists can be placed inside those lists, and so on and so forth.\n\nBut there are exceptions. You can't put paragraphs within paragraphs in HTML. The example below would be incorrect:\n\n```html\n
Paragraph\n
And here's another paragraph within a paragraph<\/p>.\n This is not a happy home for the paragraph.\n<\/p>\n```\n\nIn this lesson, we introduced the concept of nesting tags in HTML and examined it with the aid of bullet lists as a reminder. During this course, you'll learn both about the many situations where nesting is the best solution, and also about the tags that must not be nested within each other.\n","version_id":78707,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:27.498Z","prepared_code":"","original_code":"
- \n
- In 1973, IBM released the Model 3340 hard drive, which was designed with two 30MB modules<\/li>\n
- Of all HTTP protocol errors, users most often encounter the 404 Not Found<\/li>\n
- Hypertext Markup Language HTML was developed by British scientist Tim Berners-Lee<\/li>\n<\/ul>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'ul', HTMLUListElement);\n const elements = querySelectorAll(document, 'ul > li', HTMLLIElement);\n expect(elements).to.have.length(3);\n});\n","version":78707,"slug":"nested-tag","natural_order":4,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/40-nested-tag\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":271,"name":"HTML Attributes","locale":"en","instructions":"Create a paragraph with any text and a tooltip. Add the class `hexlet` to it.\n","theory":"\nPage markup information can have many subtleties and nuances. For example, you can specify the type of element, but you can also pass additional information to be processed by the browser. Mouse over the text below:\n\n\n\nWhen you mouse over an element, a small window will appear saying \"Tooltip. Here you can specify additional information\". This behavior is set using _attributes_ - special structures that can affect the output of information on the page. Each tag in HTML has several standard attributes, which are written based on this template: `attribute=\"value\"`:\n\n- **Attribute** is the name of the attribute. The `title` attribute was used to make the tooltip appear\n- **Value** is the value of the attribute. It can be different, depending on the attribute itself. In this example, the text to be displayed when hovering over the item was used as the value.\n\nHere's the example text from above, but with the markup:\n\n```html\n
Mouse over this line of text. It's better to do it from a computer.<\/p>\n```\n\nThe `title` attribute can be used on any page element, not just paragraphs. These attributes are called _global_ attributes, because they do not depend on the element. In contrast, there are attributes that are unique to one or more tags. For example, the attribute `colspan` which specifies the number of cells joined together in a table. Using it on anything other than a table makes no sense.\n\nAttributes can implicitly affect the information output. For example, when using the _CSS_ style language, there is an attribute called `class`, whose task is to separate similar elements from each other using the value of the attribute. You will learn how classes work in our _CSS_ course, but for now it is important to know that this attribute does not show up in any way when information is displayed on the page.\n\n```html\n
Lead class paragraph<\/p>\n
Mega-paragraph class paragraph<\/p>\n```\n\nOne tag can have several attributes at once. They're written successively, and the order in which they are written does not matter:\n\n```html\n
Paragraph with multiple attributes<\/p>\n```\n\nIn this lesson, we explored the concept of attributes and their notation. We learned how `title` and `class` attributes work, and that attributes can be either global or unique to HTML elements. Global attributes can be used for any tag, while unique attributes can only be used for specific ones.\n","version_id":78708,"description":null,"definitions":[],"tips":["All global attributes can be viewed on [MDN Web Docs](https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Global_attributes)"],"created_at":"2026-09-22T19:50:28.168Z","prepared_code":"","original_code":"
Hover your cursor over this text<\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const elements = query(document, 'p', HTMLElement);\n expect(elements).to.have.attr('title').match(\/,*\/);\n expect(elements).to.have.attr('class', 'hexlet');\n});\n","version":78708,"slug":"attributes","natural_order":5,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/10-html\/50-attributes\/en\/README.md"}],"40":[{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":263,"name":"Paragraphs","locale":"en","instructions":"Wrap the phrase _Hello, World_ in a paragraph tag\n","theory":"Paragraphs are the main way to divide a large text into small logical blocks. These blocks are automatically \"indented\" from each other. Such text is much easier to read and does not scare users.\n\nParagraphs are mostly found within large text. For example, any lesson on Hexlet or Code Basics is broken up into paragraphs for easy reading, just like this one.\n\nIt is broken down into small blocks of meaning. Not only is it more comfortable to read, but you can quickly find the information you need in a large text.\n\nParagraphs are created using the paired `
` tag with a small amount of text in the body. For example:\n\n```html\n
First paragraph<\/p>\n
Second paragraph<\/p>\n```\n\nThis is what they look like in the browser:\n\n\n","version_id":78709,"description":null,"definitions":[{"name":"Paragraph","description":"A small block of text separated from the rest of the content by indents at the bottom and top"}],"tips":["Paragraphs cannot be nested within each other"],"created_at":"2026-09-22T19:50:28.883Z","prepared_code":"","original_code":"
Hello, World<\/p>","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'p', HTMLParagraphElement);\n expect(element).to.contain.text('Hello, World');\n});\n","version":78709,"slug":"paragraph","natural_order":6,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/10-paragraph\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":264,"name":"Text layout","locale":"en","instructions":"Add the phrase to the editor\n\n```text\nHexlet - hands-on programming courses\n```\n\nin which make the word \"courses\" bold (physical markup) and highlight the word \"programming\" in italics (logical markup). Don't forget to wrap the phrase in a paragraph\n","theory":"\nAny text contains key parts that one wants to convey to the reader. These can be definitions, clues, key idea. If there is a lot of text, such parts can get lost or not be detected at all. How do you help the browser and the user quickly find those parts on a page? In HTML markup, you can use **bold** and _italics_ for this purpose.\n\n## Bold lettering\n\nTo bold the text, one of the two paired tags is used: `` or ``:\n\n```html\n
Code Basics — programming courses<\/b>.<\/p>\n```\n\n\n\n```html\n
HTML — Hypertext Markup Language<\/strong><\/p>\n```\n\n\n\nBoth examples illustrate adding boldface to a section of text. But why were two different tags used for visually identical results? It's all about _semantics_, that is, meaning. In this case, the meaning of the tag:\n\n- `` — a simple text selection. It can be used anywhere to visually highlight text. This tag has no meaning whatsoever\n- `` — the logical highlighting of an important section of text. This tag is semantic and marks the important part. It should not be applied to all areas in a row\n\nOnce upon a time, the developers wanted these tags to look different and differ in terms of behavior for the browser, but history has taken a slightly different path. Nowadays it is considered that `` is redundant and you should use CSS for visual highlighting and `` for important sections.\n\n## Italic highlighting\n\nThe italic emphasis is very similar to the bold emphasis, but it emphasizes the key part, not the key part. For example:\n\n```html\n
Code Basics<\/i> — programming free<\/em> courses<\/p>\n```\n\n\n\nIn this example, two parts of the text were marked:\n\n- The `` tag was used to mark the name of the Code Basics portal. The tag is intended to visually italicize text and has no semantic meaning\n- The `` tag highlighted the phrase \"free courses\". This is the logical emphasis on the free nature of the courses that has been given to the offer. There are many courses and no free ones, so it's worth adding emphasis to this part of the sentence\n","version_id":78710,"description":null,"definitions":[{"name":"Semantics","description":"Meaning. In the context of HTML - the semantic choice of markup for a piece of information"}],"tips":["Tags for visual emphasis are shorter than for semantic emphasis. It helps to remember when to use `` and ``, and when to use `` and ``","In practice, instead of `` and `` they use CSS styling"],"created_at":"2026-09-22T19:50:29.536Z","prepared_code":"","original_code":"
Hexlet — hands-on programming<\/em> courses<\/b><\/p>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const b = query(document, 'p > b', HTMLElement);\n expect(b).to.have.text('courses');\n\n const em = query(document, 'p > em', HTMLElement);\n expect(em).to.have.text('programming');\n});\n","version":78710,"slug":"text-style","natural_order":7,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/20-text-style\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":343,"name":"Headings","locale":"en","instructions":"Add a first and second level header with arbitrary text in the editor\n","theory":"\nThe larger the text, the more often it is divided into logical sections. For example, the basic markup of a report, diploma or essay consists of three main parts:\n\n1. Introduction\n2. Main part\n3. Conclusion\n\nSuch logical divisions into headings allow you to navigate faster in the document and find the part you need.\n\nTo create titles used 6 paired tags: `
`, `
`, `
`, `
`, `
`, `
`, where `
` — title of the first level, the most important and describes the main subject of the text, and `
` — the title of the lowest level.\n\n```html\n
Title of the first level<\/h1>\n
Title of the second level<\/h2>\n
Title of the third level<\/h3>\n
Title of the fourth level<\/h4>\n
Title of the fifth level<\/h5>\n
Title of the sixth level<\/h6>\n```\n\n\n\nEach lower level heading is a subsection of a higher level heading. This is very similar to the table of contents of any book, the structure of which might look like this:\n\n- Chapter 1\n - Part 1\n - Part 2\n - Notes\n - Part 3\n- Chapter 2\n\n```html\n
The best book on earth<\/h1>\n
Description of the book. Thanks to my cat and my two dogs. Meow!<\/p>\n\n
Chapter 1<\/h2>\n\n
Part 1<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n\n
Part 2<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n
Notes<\/h4>\n
The text of this note is written with love<\/p>\n\n
Part 3<\/h3>\n
Paragraph with text<\/p>\n
Paragraph with text<\/p>\n\n
Chapter 2<\/h2>\n```\n","version_id":78711,"description":null,"definitions":[],"tips":["Follow the sequence of headings. Don't skip levels","There is usually only one first level header on the page"],"created_at":"2026-09-22T19:50:31.224Z","prepared_code":"","original_code":"
Code Basics<\/h1>\n
Coding lessons<\/h2>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const h1 = query(document, 'h1');\n expect(h1).to.be.visible;\n\n const h2 = query(document, 'h2');\n expect(h2).to.be.visible;\n});\n","version":78711,"slug":"hypertext-header","natural_order":8,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/25-hypertext-header\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":265,"name":"Lists","locale":"en","instructions":"Create a numbered list of 5 items\n","theory":"\nLists are one way of presenting content on a page. With their help it is easy to group small related fragments, such as a shopping list:\n\n```text\n— Milk\n— Bread\n— Water\n```\n\nYou can make such a list with three paragraphs, but then, at first glance, it will seem that these are three different phrases not united by a common meaning.\n\n\n\nLists are used to properly relate this information. To create them in HTML, several tags are used, nested within each other:\n\n- `
- ` or `
- ` to create a list item\n\nThe general layout is as follows:\n\n```text\n
\n Text<\/list_item>\n<\/list_item>\n```\n\n## Marked list\n\nThe ` - ` tag is used to create a bulleted list.\n\nBulleted lists are used when the information does not require a specific sequence. For example, the grocery list from the example above. It is not so important what will be bought first: milk or bread, it is important to buy all the products.\n\n```html\n
- Milk<\/li>\n
- Bread<\/li>\n
- Water<\/li>\n<\/ul>\n```\n\n\n\n## Numbered list\n\n**Numbered** lists are used to group sequential information, an important feature of which is the presence of a serial number of the item.\n\nSuch lists are useful if they indicate the sequence of actions to be taken. A numbered list is created with the `
- ` tag, inside which also lie elements in the `
- ` tags.\n\nTo-do list for the day\n\n\n\nin HTML markup looks like this:\n\n```html\n
- \n
- Buy food<\/li>\n
- Go to Alex<\/li>\n
- Cook dinner<\/li>\n<\/ol>\n```\n","version_id":78712,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:32.130Z","prepared_code":"","original_code":"
- \n
- Before the invention of electronic computers, computers in the U.S. were used to refer to workers engaged in manual calculations.<\/li>\n
- Some programmers use the rubber duck debugging method to debug code.<\/li>\n
- An update of a computer program that fixes detected bugs is called a patch<\/li>\n
- On the first American typewriters, the keys were usually arranged alphabetically.<\/li>\n
- The inventor of the computer mouse, Douglas Engelbart, in his explanatory drawings depicted the screen cursor as an arrow pointing vertically upward.<\/li>\n<\/ol>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n query(document, 'ol', HTMLOListElement);\n const elements = querySelectorAll(document, 'ol > li', HTMLLIElement);\n expect(elements).to.have.length(5);\n});\n","version":78712,"slug":"lists","natural_order":9,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/30-lists\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":266,"name":"Nested lists","locale":"en","instructions":"Create the markup for the list:\n\n1. The JavaScript profession\n - Frontend\n - Backend\n2. The PHP Profession\n","theory":"\nWhen making a to-do list, it may be necessary to break items down into several additional sub-items. For example, in the to-do list, the item \"Go to the store\" may contain a shopping list.\n\n_Nested lists_ are used to create this structure. This allows you to insert a new list as a list item, rather than just text, creating a complex structure:\n\n\n\nIn HTML it looks like this:\n\n```html\n
- \n
- Go to the store\n
- \n
- Buy milk<\/li>\n
- Buy bread<\/li>\n <\/ul>\n <\/li>\n
- Take a class on Code Basics <\/li>\n<\/ul>\n```\n\nIt is important to note that the nested list is part of the list item and is inside the `
- ` tag:\n\n```html\n
- Go to the store\n
- \n
- Buy milk<\/li>\n
- Buy bread<\/li>\n <\/ul>\n<\/li>\n```\n\nThis nesting allows you to preserve semantics and indicate that the nested list refers specifically to \"Go to the store\" and not to any other item.\n\nYou can nest different kinds of lists into each other: bulleted into numbered and vice versa. The main thing is to monitor the opening and closing of tags. In the case of an error, the browser will try to correct the error itself, but it may not be correct.\n","version_id":78713,"description":null,"definitions":[],"tips":["At each nesting level the labeled list changes its marker. This is done to visually distinguish nested lists"],"created_at":"2026-09-22T19:50:33.971Z","prepared_code":"","original_code":"
- \n
- JavaScript Career\n
- \n
- Frontend<\/li>\n
- Backend<\/li>\n <\/ul>\n <\/li>\n
- PHP Career<\/li>\n<\/ol>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, querySelectorAll, expect }) => {\n const ol = query(document, 'ol', HTMLOListElement);\n const olLis = querySelectorAll(document, 'ol > li', HTMLLIElement);\n expect(olLis).to.have.length(2);\n\n const ul = query(document, 'ol > li > ul', HTMLUListElement);\n const ulLis = querySelectorAll(ul, 'li', HTMLLIElement);\n expect(ulLis).to.have.length(2);\n});\n","version":78713,"slug":"nested-lists","natural_order":10,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/40-nested-lists\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":267,"name":"Tables","locale":"en","instructions":"Create a table of 3 rows with 2 cells in each. The first line contains the table headers\n","theory":"\nOne of the most familiar forms of presenting information is tables. We meet them everywhere: product information, multiplication table, documents. Such a filing makes it easy to compare the characteristics of certain products. In page layout, tables are used just as often, although they have a slightly confusing layout.\n\nA table is a composite element made up of several nested tags. This is similar to how lists are made up - there is a container and special tag elements inside it\n\nThe marking contains several basic elements:\n\n- `
` — table area\n - `
` — line\n - `` — table header\n - ` ` — table body\n - `` — header cell\n - ` ` — cell\n\nAny table starts with a paired ` ` tag\n\n```html\n
\n \n<\/table>\n```\n\nIt is within this tag creates rows and columns of the table. Now you can create rows and columns. The `
` and ` ` tags are used for this purpose. Create two rows and three cells in each row:\n\n```html\n \n
\n \"Tota\" Chocolate<\/td> \n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" Chocolate<\/td> \n 100 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n<\/table>\n```\n\n\n\n---\n\n**Important:** The number of cells in each row must be the same\n\n---\n\nTry pasting this code into the editor. Notice that visually the output will be different from the table output in the theory of this lesson. The thing is that, by default, the browser doesn't put visible borders for the table cells. To do this, you need to use CSS, a special style language. You'll encounter this language and its capabilities in another course.\n\nThe data is displayed, but there are not enough headings to describe each column. The `` tag is used to create the table header and the ` ` tag is used as the cell tag. Otherwise, the structure of the layout does not change. Let's add the headings to the table:\n\n```html\n \n \n
\n Yummy<\/th> \n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \"Tota\" Chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n ` tag, which marks the main part of the table. Often developers miss it because browsers automatically wrap a group of lines that are not wrapped in other tags. Note that the `` tag is often the only one in the table. In large tables, you can use several `` to separate different sections in a table, but in most cases this is not necessary.\n\n```html\n\"Tota TeamLead\" Chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n<\/table>\n```\n\n\n\nThe last step is to add the ` \n \n
\n \nYummy<\/th>\n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \"Tota\" Chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n \"Tota TeamLead\" Chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nAdditionally, you can specify the \"footer\" of the table. It can contain summary information, such as the cost of all goods.\n\nTables can be configured with a header. It is needed when several tables are output at the same time. It helps to separate them from each other and not get confused about which table is delivering what. A paired ` ` tag is used to create the table title. If you have a header, it _must_ be placed immediately after the ` ` tag. Let's add a header to the table:\n\n```html\n
\n
\"Hexlet\" chocolate assortment<\/caption>\n \n\n \nYummy<\/th>\n Weight<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n\n \n \"Tota\" chocolate<\/td>\n 100 gram<\/td>\n 20 dollars<\/td>\n <\/tr>\n\n \n ` tag if it is missing. In small tables it can be omitted"],"created_at":"2026-09-22T19:50:34.672Z","prepared_code":"","original_code":"\"Tota TeamLead\" chocolate<\/td>\n 150 gram<\/td>\n 50 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\n\n","version_id":78714,"description":null,"definitions":[],"tips":["The number of cells in each row of the table must be the same","The `caption` of the table is _always_ placed immediately after opening the table","Browsers automatically add the ` \n \n
\n \nItems<\/th>\n Price<\/th>\n <\/tr>\n <\/thead>\n \n Apple<\/td>\n 1 dollar<\/td>\n <\/tr>\n \n Pears<\/td>\n 1.3 dollars<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n","test_code":"const { test } = require('tests');\n\ntest(({ querySelectorAll, query, expect }) => {\n query(document, 'table > thead', HTMLTableHeaderCellElement);\n const ths = querySelectorAll(document, 'table > thead > tr > th', HTMLElement);\n expect(ths).to.have.length(2);\n\n const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);\n expect(trs).to.have.length(2);\n\n const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);\n expect(tds).to.have.length(4);\n});\n","version":78714,"slug":"table","natural_order":11,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/50-table\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":268,"name":"Combining cells inside rows and columns","locale":"en","instructions":"\nCreate a table with two rows and three columns. In the second row, combine the first two cells using the attributes you learned about. The first row should be the header of the table\n","theory":"\nTables often need to merge rows or columns. It helps to combine different information. For example, if there is no product in the stock table, there is no point in constantly duplicating information - it can be merged, and you can write that the product is out of stock:\n\n\n\nWith HTML, you can combine cells in columns or rows by using the special attributes `colspan` and `rowspan`. Their values are the number of cells to be merged with the current one, either to the right (for `colspan`) or down (for `rowspan`) Counting for the number of cells starts from the current cell that the property has been applied to. For example, if the value is `colspan=\"2\"`, the current cell will be merged with the neighboring one.\n\nThe layout for the example above, without combining cells, is as follows:\n\n```html\n \n \n
\n \nItem<\/th>\n Price<\/th>\n Amount<\/th>\n <\/tr>\n <\/thead>\n\n \n Tea<\/td>\n Out of stock<\/td> \n <\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nIn order to merge cells, you need to do two things:\n\n1. Once you've chosen a cell to be merged and added the tags, add the `colspan` attribute with a value equal to the number of cells to be merged to the right\n2. Remove unnecessary cells from the row\n\n```html\n \n \n
\n \nItem<\/th>\n Price<\/th>\n Amount<\/th>\n <\/tr>\n <\/thead>\n\n \n Tea<\/td>\n Out of stock<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nThe `rowspan` attribute is used to combine cells vertically. The algorithm is the same as the with horizontal merging. The only difference is that you have to delete cells in neighboring rows:\n\n```html\n \n \n
\n \nEmployee<\/th>\n Salary<\/th>\n Bonus<\/th>\n Manager<\/th>\n <\/tr>\n <\/thead>\n\n \n Alex Primadonin<\/td>\n 750$<\/td>\n 63$<\/td>\n Cody Hexly<\/td>\n <\/tr>\n \n Eddie Vainy<\/td>\n 1200$<\/td>\n 0<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n```\n\nIn this example, there are two employees interacting with one manager. You can specify it twice, but it's clearer if you merge the cells vertically. To do this, the attribute `rowspan=\"2\"` was added, and in the second row the fourth cell was removed, because its place will be taken by the cell above.\n\n\n","version_id":78715,"description":null,"definitions":[],"tips":["The number of cells in each row of the table must be the same after merging. It's important to distinguish between the number of ` ` tags and the total number of cells. For example, using the `colspan=\"2\"` attribute on a cell you will get two cells but visually combined in one. For this reason, it's necessary to remove one physical cell from the markup to compensate","If the `colspan` attribute is used, then the cells in the same line will be removed from the HTML code. If the `rowspan` attribute is used, the cells in the rows below are deleted"],"created_at":"2026-09-22T19:50:36.246Z","prepared_code":"","original_code":" \n \n
\n \n2 rows added<\/th>\n 3 columns added<\/th>\n 2 columns in second row combined<\/th>\n <\/tr>\n <\/thead>\n \n Result<\/td>\n Exercise completed<\/td>\n <\/tr>\n <\/tbody>\n<\/table>\n","test_code":"const { test } = require('tests');\n\ntest(({ querySelectorAll, query, expect }) => {\n const trs = querySelectorAll(document, 'table > tbody > tr', HTMLElement);\n expect(trs).to.have.length(1);\n\n const trHead = querySelectorAll(document, 'table > thead > tr');\n expect(trHead).to.have.length(1);\n\n const tds = querySelectorAll(document, 'table > tbody > tr > td', HTMLElement);\n expect(tds).to.have.length(2);\n\n const tdWithColspan = query(document, 'table > tbody > tr > td:nth-child(1)', HTMLElement);\n expect(tdWithColspan).to.have.attribute('colspan', '2');\n});\n","version":78715,"slug":"colspan-rowspan","natural_order":12,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/60-colspan-rowspan\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":269,"name":"Special HTML Characters","locale":"en","instructions":"Write the \"one-fourth\" fraction symbol. You can find the alias of this symbol on [Wikipedia](https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references)\n","theory":"There are special characters you can use in your text called mnemonic aliases. They allow you to use characters that are present in the symbol table but are not on the keyboard, such as math symbols or Greek:\n\n\n\nTo record these characters, we use the `&character-name;` construction. It's important to pay attention to the letter case in the name of the character.\n\nLet's take the symbols of suits in cards as an example:\n\n| Character | Code |\n| --------- | ---------- |\n| ♣ | `♣` |\n| ♠ | `♠` |\n| ♥ | `♥` |\n| ♦ | `♦` |\n\nMany of these symbols can be found on [Wikipedia](https:\/\/en.wikipedia.org\/wiki\/List_of_XML_and_HTML_character_entity_references).\n\nThe main typographic mnemonic aliases in HTML are:\n\n- ` ` - a non-breaking space. This is a very important thing that allows you to stay on the same line of text so as not to spoil the logical structure of the text in certain cases\n- `«` and `»` - the left and right angle quotes («»). They're used everywhere in typography\n- `—` - a long dash\n\nAliases are common when you want to insert tags without them being processed by the browser. In this case, you can use the aliases `<` and `>`, which are needed to denote **<** and **>**, respectively\n\n```html\n<p> this markup will not be treated as a paragraph <\/p>\n```\n","version_id":78716,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:37.335Z","prepared_code":"","original_code":"¼\n","test_code":"const { test } = require('tests');\n\ntest(({ expect }) => {\n const text = document.body.innerHTML.trim();\n expect(text).to.equal('¼');\n});\n","version":78716,"slug":"special-characters","natural_order":13,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/70-special-characters\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":292,"name":"Formatted text","locale":"en","instructions":"Add any text to the ` ` tag and paste it into the editor. Try different versions of the texts.\n","theory":"\nSometimes you need to insert text while retaining its original formatting. Let's take a look at Mayakovsky's famous \"ladder\" from the poem \"To Sergei Yesenin.\n\n\n\nVladimir Mayakovsky believed that it was in this form that the rhythm of verse could best be framed.\n\nIt is very difficult to format such text using special characters in HTML. You have to \"juggle\" with space characters. These markings will be very difficult to maintain in the future as a result:\n\n```html\n
As the saying says,<\/p>\n
you are<\/p>\n
now far.<\/p>\n```\n\nTo solve this problem, there is a special tag called `
`, whose task is to display the text within itself while saving all the space characters. By default, the `
` tag outputs text in a monospaced font in which all characters have the same width, unlike regular fonts.\n\n```html\n
\nAs the saying says,\n you are\n now far.\nVoid and stars,\n a stodgy kind\n passover.\nNot a payday,\n not a whiskey bar.\nSober.\n<\/pre>\n```\n\nInside the `pre` tag, you can use tags to format the text: ``, ``, ``, ``.\n","version_id":78718,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.061Z","prepared_code":"","original_code":"
\nAs the saying says,\n you are\n now far.\nVoid and stars,\n a stodgy kind\n passover.\nNot a payday,\n not a whiskey bar.\nSober.\n<\/pre>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n\n const pre = query(document, 'pre');\n expect(pre).to.be.visible;\n\n});\n","version":78718,"slug":"pre","natural_order":15,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/90-pre\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":291,"name":"Inserting computer code into HTML","locale":"en","instructions":"Add any text to the `` tag and paste it into the editor. Try different versions of the texts\n","theory":"\nIf you have a programming tutorial blog or write articles, then you'll need to demonstrate your code. Every lesson on Code Basics has these blocks:\n\n```html\nYou can see the markup here<\/p>\n```\n\nTo create a block of code, use the tag `
`, and you can write code in any language there.\n\n```javascript\n\/\/ Example code in JavaScript\nconst square = (num) => {\n return num * num;\n};\n```\n\nThe `` tag is often used with the `` tag to preserve formatting. If the `
` tag is not used, you have to control line breaks yourself, for example by wrapping each line with a `
` tag.\n\nIt's important that all tags inside `
` are be processed by the browser, which is why special characters are used inside. Also, a common solution is to wrap the name of the tag in a separate tag, such as ``:\n\n```html\n\n <p<\/span>>Insert the p tag as plain text <\/p<\/span>>\n<\/code>\n```\n","version_id":78719,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.687Z","prepared_code":"","original_code":"\n const a = 5;\n<\/code>\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n\n const code = query(document, 'code');\n expect(code).to.be.visible;\n\n});\n","version":78719,"slug":"code","natural_order":16,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/20-hypertext\/95-code\/en\/README.md"}],"41":[{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":272,"name":"Images","locale":"en","instructions":"\nPaste the image from`, which has two obligatory attributes: `src` and `alt`.\n\n## src attribute\n\nThe `src` attribute specifies the path to the image. This is also a link, as with the `` tag, only now the user is not redirected, but rather the browser loads the image from this path if it exists. The path to the picture can be either _relative_ or _absolute_.\n\n```html\n\n
\n\n```\n\n## alt attribute\n\nWhat should I do if the picture is not available at the moment? In this case, browsers will show a small image indicating that the required image is not available.\n\nBut how would the user know what was here? Maybe the image is critical to the article, and without it you'll lose the meaning of what is written? You can advise the user to come back later when the image is available, or you can describe to them what was in the image.\n\nTo do this, use the `alt` attribute, its value is text. It will be shown if the image cannot be loaded\n\n```html\n\n\n\n```\n\nIn addition to the function of \"telling people what you can't show them\" the `alt` attribute serves a critical role for people who use screen readers - programs that read information from the screen. Since the image cannot be read, programs read what was specified in the `alt` attribute.\n\n## Image size\n\nAn important component when working with images is its size. When you download a picture from a third-party resource and paste it to a page, it may be the case that the image is very large, and it needs to be made smaller. To do this, you can change the `width` and `height` attributes.\n\n```html\n\n\n\n```\n\nThe picture will be displayed at 320x240 pixels.\n\nIt's important to remember that using the `width` and `height` attributes does not change the physical size of the picture - it will be the same size in terms of kilo\/megabytes, etc, only the visual size will change. If you want to optimize your page, use images with the right size or reduce them using a graphics editor or special service. Now a lot of people use cell phones and mobile Internet, so the size of the page is important.\n","version_id":78720,"description":null,"definitions":[],"tips":[],"created_at":"2026-09-22T19:50:38.821Z","prepared_code":"","original_code":"\n","test_code":"const { test } = require('tests');\n\ntest(({ query, expect }) => {\n const element = query(document, 'img');\n expect(element).to.have.attr('src', 'https:\/\/www.w3.org\/2008\/site\/images\/logo-w3c-screen-lg.png');\n expect(element).to.have.attr('alt', 'W3C');\n});\n","version":78720,"slug":"img","natural_order":17,"source_code_url":"https:\/\/github.com\/hexlet-basics\/exercises-html\/blob\/main\/modules\/30-media\/10-img\/en\/README.md"},{"language":{"id":6,"slug":"html","learn_as":"first_language","progress":"completed","category_id":null,"current_version_id":2324,"created_at":"2019-06-24T14:40:48.000Z","current_version":{"id":2324,"result":"Success","state":"built","created_at":"2026-09-22T19:50:21.277Z"},"hexlet_program_landing_page":"https:\/\/ru.hexlet.io\/programs\/frontend","repository_url":"https:\/\/github.com\/hexlet-basics\/exercises-html","cover_list_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsMzAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--7f5cb77d08a2f7f20c947e4471d5f47a7459f0f4\/html.png","cover_thumb_variant":"https:\/\/code-basics.com\/rails\/active_storage\/representations\/proxy\/eyJfcmFpbHMiOnsiZGF0YSI6NjA2LCJwdXIiOiJibG9iX2lkIn19--f788557d06a394106a789e8a67949a8165def32b\/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls0MCwzMF19LCJwdXIiOiJ2YXJpYXRpb24ifX0=--110c303af978616d1b24fded57b4009ff798aff6\/html.png","rating_count":89,"members_count":110642,"rating_value":4},"id":273,"name":"Audio","locale":"en","instructions":"Add audio to the page. Use the following audio files:\n\n-
- JavaScript Career\n
- Go to the store\n
- ` tags.\n\nTo-do list for the day\n\n\n\nin HTML markup looks like this:\n\n```html\n
- \n
- ` to define the type of list\n- `
- ` to create a list item\n\nThe general layout is as follows:\n\n```text\n
- ` tags)\n\n```text\n|──ul\n| |──li\n| |──li\n```\n\n---\n\nInterestingly a tag with other tags inside is also called _a wrapper_\n\n---\n\nThe tree can grow even further. The lessons about lists will show you that other lists can be placed inside list elements, and then lists can be placed inside those lists, and so on and so forth.\n\nBut there are exceptions. You can't put paragraphs within paragraphs in HTML. The example below would be incorrect:\n\n```html\n
- ` tags that define the elements of our list.\n\nThis kind of nesting resembles a tree, there's a treetop (the `